/* ==========================================================================
   Caldarium · capa base del sitio público (propuesta B, «Vuestra marca, a
   otro nivel», elegida por Pedro el 05/10/2026).
   Tokens y reglas globales: todo lo demás hereda de aquí. Un tamaño, color,
   radio o sombra a pelo en un componente es un defecto.

   Cortes canónicos (los únicos del proyecto):
     1180px  rejillas anchas a menos columnas
      860px  menú hamburguesa y rejillas a una columna
      560px  móvil estrecho
   ========================================================================== */

@font-face { font-family: "Cormorant Garamond"; src: url("../fuentes/CormorantGaramond-300.c47ff12887a3.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fuentes/CormorantGaramond-300i.339c10fa7ae4.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Cormorant Garamond"; src: url("../fuentes/CormorantGaramond-500.c47ff12887a3.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fuentes/Montserrat-400.311d352d9323.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fuentes/Montserrat-500.311d352d9323.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("../fuentes/Montserrat-600.311d352d9323.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* Colores de marca */
  --color-primario: #FF9F0A;
  --color-primario-hondo: #E08400;
  --color-tinta: #1A1A1A;
  --color-grafito: #333333;
  --color-crema: #ECE8E1;
  --color-blanco: #FDFDFD;
  --color-noche: #111111;          /* pie */
  --color-panel-oscuro: #222222;   /* formularios sobre fondo oscuro */

  /* Derivados semánticos */
  --color-fondo: var(--color-blanco);
  --color-fondo-alterno: var(--color-crema);
  --color-fondo-oscuro: var(--color-tinta);
  --color-texto: var(--color-grafito);
  --color-texto-claro: rgba(253, 253, 253, .78);
  --color-titulo: var(--color-tinta);
  --color-linea: rgba(26, 26, 26, .14);
  --color-linea-clara: rgba(253, 253, 253, .16);

  /* Tipografía: dos familias */
  --fuente-titulos: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --fuente-texto: "Montserrat", "Helvetica Neue", Arial, sans-serif;

  --texto-xxs: .68rem;
  --texto-xs: .75rem;
  --texto-s: .875rem;
  --texto-base: 1rem;
  --texto-l: 1.125rem;
  --titulo-h1: clamp(3rem, 1.1rem + 7vw, 7.75rem);     /* solo el hero de portada */
  --titulo-pagina: clamp(2.6rem, 1.3rem + 4.6vw, 5.6rem); /* h1 de las páginas interiores */
  --titulo-h2: clamp(2.35rem, 1.45rem + 3.4vw, 4.6rem);
  --titulo-h2-media: clamp(2rem, 1.3rem + 1.9vw, 3.1rem); /* h2 en media columna (texto + foto) */
  --titulo-h3: clamp(1.55rem, 1.25rem + 1vw, 2.1rem);
  --titulo-h4: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
  --titulo-cita: clamp(1.4rem, 1.1rem + 1vw, 1.9rem);

  /* Espaciado */
  --e-1: .25rem; --e-2: .5rem; --e-3: 1rem; --e-4: 1.5rem; --e-5: 2rem; --e-6: 3rem; --e-7: 4.5rem;
  --ancho-max: 1320px;
  --ancho-texto: 42rem;
  --margen-lateral: clamp(1.25rem, .5rem + 3.5vw, 4rem);
  --seccion: clamp(4.5rem, 3rem + 7vw, 10rem);
  --hueco-rejilla: clamp(1.5rem, 1rem + 2vw, 3rem);

  /* Forma */
  --radio: 2px;
  --radio-foto: 4px;
  --sombra: 0 30px 60px -30px rgba(26, 26, 26, .35);
  --toque: 44px;
  --transicion: .35s cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--fuente-texto);
  font-size: var(--texto-base);
  line-height: 1.7;
  color: var(--color-texto);
  background: var(--color-fondo);
  overflow-x: hidden;
}
body.sin-scroll { overflow: hidden; }
img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, h4 {
  font-family: var(--fuente-titulos);
  font-weight: 300;
  color: var(--color-titulo);
  line-height: 1.02;
  margin: 0;
  letter-spacing: -.01em;
  overflow-wrap: break-word;
  hyphens: manual;
}
h1 { font-size: var(--titulo-pagina); }
h2 { font-size: var(--titulo-h2); }
h3 { font-size: var(--titulo-h3); font-weight: 500; line-height: 1.15; }
h4 { font-size: var(--titulo-h4); font-weight: 500; line-height: 1.25; }
h1 em, h2 em, h3 em { font-style: italic; color: var(--color-primario); }
p { margin: 0 0 var(--e-3); }
small { font-size: var(--texto-xs); }
strong, b { font-weight: 600; }
ul, ol { padding-left: 1.2em; }
:focus-visible { outline: 2px solid var(--color-primario); outline-offset: 3px; }
::selection { background: var(--color-primario); color: var(--color-tinta); }

/* Cormorant usa números elzevirianos: en cifras, de alineación */
.cifra { font-family: var(--fuente-titulos); font-style: italic; color: var(--color-primario); white-space: nowrap; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; }
.nw { white-space: nowrap; }
.oculto { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Maquetación ---------- */
.contenedor { width: 100%; max-width: calc(var(--ancho-max) + 2 * var(--margen-lateral)); margin-inline: auto; padding-inline: var(--margen-lateral); }
.contenedor--texto { max-width: calc(var(--ancho-texto) + 2 * var(--margen-lateral)); }
.seccion { padding-block: var(--seccion); }
.seccion--crema { background: var(--color-fondo-alterno); }
.seccion--oscura { background: var(--color-fondo-oscuro); color: var(--color-texto-claro); }
.seccion--oscura :is(h1, h2, h3, h4) { color: var(--color-blanco); }
.seccion--grafito { background: var(--color-grafito); color: var(--color-texto-claro); }
.seccion--grafito :is(h1, h2, h3, h4) { color: var(--color-blanco); }
.rejilla-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--hueco-rejilla); align-items: center; }
.rejilla-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--hueco-rejilla); }
.rejilla-auto { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: var(--hueco-rejilla); }

/* ---------- Antetítulo y encabezados de sección ---------- */
.antetitulo {
  font-size: var(--texto-xs); font-weight: 600; letter-spacing: .22em; text-transform: uppercase;
  color: var(--color-grafito); margin: 0 0 1.25rem;
  display: flex; align-items: center; gap: .9rem;
}
.antetitulo::before { content: ""; width: 2.5rem; height: 2px; background: var(--color-primario); flex: none; }
.seccion--oscura .antetitulo, .seccion--grafito .antetitulo, .antetitulo--claro { color: var(--color-blanco); }

.encabezado { margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem); }
.encabezado h2 + p, .encabezado h1 + p, .encabezado__texto { font-size: var(--texto-l); margin: var(--e-4) 0 0; max-width: 36rem; }
.encabezado--partido { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 2rem 4rem; align-items: end; }
.encabezado--partido h2 { max-width: 14ch; }
.encabezado--partido .encabezado__texto { margin: 0; }
.encabezado--centro { text-align: center; }
.encabezado--centro .antetitulo { justify-content: center; }
.encabezado--centro :is(h1, h2) { max-width: 18ch; margin-inline: auto; }
.encabezado--centro p { margin-inline: auto; }

/* Encabezado que separa una línea de producto de otra (p. ej. bañera fría
   después de los spas): banda con nombre del producto. Lo pidió Pedro. */
.separador-producto { display: flex; align-items: baseline; gap: var(--e-4); padding-block: var(--e-4); border-block: 1px solid var(--color-linea); margin-bottom: var(--e-6); }
.separador-producto__tipo { font-size: var(--texto-xs); font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--color-primario-hondo); }
.separador-producto__nombre { font-family: var(--fuente-titulos); font-size: var(--titulo-h3); line-height: 1.1; color: var(--color-tinta); }

/* ---------- Botones y enlaces ---------- */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-height: 52px; padding: .9rem 1.9rem;
  font-family: var(--fuente-texto); font-size: var(--texto-xs); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; text-align: center; line-height: 1.3;
  text-decoration: none; border: 1px solid transparent; border-radius: var(--radio);
  cursor: pointer; transition: background var(--transicion), color var(--transicion), border-color var(--transicion), transform var(--transicion);
}
.boton:hover { transform: translateY(-2px); }
.boton--primario { background: var(--color-primario); color: var(--color-tinta); }
.boton--primario:hover { background: var(--color-primario-hondo); }
.boton--oscuro { background: var(--color-tinta); color: var(--color-blanco); }
.boton--oscuro:hover { background: var(--color-grafito); }
.boton--claro { border-color: rgba(253,253,253,.55); color: var(--color-blanco); background: transparent; }
.boton--claro:hover { background: var(--color-blanco); color: var(--color-tinta); }
.boton--borde { border-color: var(--color-tinta); color: var(--color-tinta); background: transparent; }
.boton--borde:hover { background: var(--color-tinta); color: var(--color-blanco); }
.boton--compacto { min-height: var(--toque); padding: .7rem 1.3rem; }
.acciones { display: flex; flex-wrap: wrap; gap: var(--e-3); }

.enlace-flecha {
  display: inline-flex; align-items: center; gap: .75rem; min-height: var(--toque);
  font-size: var(--texto-xs); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--color-tinta); border-bottom: 1px solid currentColor;
}
.enlace-flecha::after { content: "→"; color: var(--color-primario); font-size: 1rem; transition: transform var(--transicion); }
.enlace-flecha:hover::after { transform: translateX(5px); }
.seccion--oscura .enlace-flecha, .seccion--grafito .enlace-flecha, .enlace-flecha--claro { color: var(--color-blanco); }

/* ---------- Texto largo (blog, páginas de contenido) ---------- */
.prosa { max-width: var(--ancho-texto); }
.prosa > * + * { margin-top: var(--e-3); }
.prosa :is(h2, h3, h4) { margin-top: var(--e-6); margin-bottom: var(--e-3); }
.prosa h2 { font-size: var(--titulo-h3); font-weight: 500; line-height: 1.15; }
.prosa a { color: var(--color-primario-hondo); }
.prosa blockquote { margin: var(--e-5) 0; padding-left: 1.5rem; border-left: 2px solid var(--color-primario); font-family: var(--fuente-titulos); font-style: italic; font-size: var(--titulo-cita); line-height: 1.3; color: var(--color-tinta); }
.prosa img { border-radius: var(--radio-foto); }

/* ---------- Fotos ---------- */
.foto { margin: 0; overflow: hidden; border-radius: var(--radio-foto); background: var(--color-crema); }
.foto img, .foto video { width: 100%; height: 100%; object-fit: cover; }
.foto--4x3 { aspect-ratio: 4 / 3; }
.foto--16x10 { aspect-ratio: 16 / 10; }
.foto--16x9 { aspect-ratio: 16 / 9; }
.foto--cuadrada { aspect-ratio: 1; }
.video-embebido { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radio-foto); overflow: hidden; background: var(--color-tinta); }
.video-embebido iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- Tarjeta ---------- */
.tarjeta { display: flex; flex-direction: column; background: var(--color-crema); border-radius: var(--radio-foto); overflow: hidden; }
.tarjeta__cuerpo { padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.tarjeta__cuerpo h3 { margin-bottom: var(--e-3); }
.tarjeta__marca { font-size: var(--texto-xs); font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--color-grafito); margin-bottom: var(--e-3); }
.tarjeta__marca::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primario); margin-right: .7rem; vertical-align: middle; }
.tarjeta--oscura { background: var(--color-tinta); color: var(--color-texto-claro); }
.tarjeta--oscura :is(h3, .tarjeta__marca) { color: var(--color-blanco); }

/* ---------- Lista de datos (etiqueta · valor) ---------- */
.datos { list-style: none; margin: 0 0 2.25rem; padding: 0; border-top: 1px solid var(--color-linea); }
.datos li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--e-3); padding: .85rem 0; border-bottom: 1px solid var(--color-linea); color: var(--color-tinta); font-size: var(--texto-s); }
.datos span { font-size: var(--texto-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-grafito); padding-top: .15rem; }

/* ---------- Preguntas frecuentes ---------- */
.faq { border-top: 1px solid var(--color-linea); }
.faq__item { border-bottom: 1px solid var(--color-linea); }
.faq__pregunta {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--e-4);
  min-height: 64px; padding: var(--e-4) 0;
  font-family: var(--fuente-titulos); font-size: var(--titulo-h4); font-weight: 500; line-height: 1.25; color: var(--color-tinta);
}
.faq__pregunta::-webkit-details-marker { display: none; }
.faq__pregunta::after { content: "+"; flex: none; width: 2rem; height: 2rem; display: grid; place-items: center; border: 1px solid var(--color-primario); border-radius: 50%; font-family: var(--fuente-texto); font-size: 1.1rem; color: var(--color-primario-hondo); transition: transform var(--transicion), background var(--transicion); }
.faq__item[open] .faq__pregunta::after { transform: rotate(45deg); background: var(--color-primario); color: var(--color-tinta); }
.faq__respuesta { padding: 0 0 var(--e-5); max-width: var(--ancho-texto); }
.seccion--oscura .faq, .seccion--oscura .faq__item { border-color: var(--color-linea-clara); }
.seccion--oscura .faq__pregunta { color: var(--color-blanco); }

/* ---------- Tabla (con caja de scroll) ---------- */
.tabla-caja { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabla { width: 100%; border-collapse: collapse; font-size: var(--texto-s); }
.tabla th { text-align: left; font-size: var(--texto-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-tinta); padding: var(--e-3); border-bottom: 2px solid var(--color-primario); }
.tabla td { padding: var(--e-3); border-bottom: 1px solid var(--color-linea); vertical-align: top; }

/* ---------- Formularios ---------- */
.formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e-4); align-content: start; }
.formulario--panel { background: var(--color-panel-oscuro); padding: clamp(1.5rem, 1rem + 2vw, 3rem); border-radius: var(--radio-foto); border-top: 2px solid var(--color-primario); color: var(--color-texto-claro); }
.campo { grid-column: 1 / -1; display: flex; flex-direction: column; gap: .4rem; min-width: 0; }
.campo--medio { grid-column: span 1; }
.campo label, .franja legend { font-size: var(--texto-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--color-tinta); }
.campo input, .campo textarea, .campo select {
  width: 100%; min-height: 48px; padding: .7rem 0; font: inherit; color: var(--color-tinta);
  background: transparent; border: 0; border-bottom: 1px solid rgba(26,26,26,.3); border-radius: 0;
}
.campo textarea { resize: vertical; min-height: 7rem; }
.campo :is(input, textarea, select):focus { outline: none; border-bottom-color: var(--color-primario); }
.formulario--panel .campo label, .formulario--panel .franja legend { color: var(--color-blanco); }
.formulario--panel .campo :is(input, textarea, select) { color: var(--color-blanco); border-bottom-color: rgba(253,253,253,.3); color-scheme: dark; }
.casilla { grid-column: 1 / -1; display: flex; align-items: flex-start; gap: .7rem; min-height: var(--toque); font-size: var(--texto-s); cursor: pointer; }
.casilla input { accent-color: var(--color-primario); width: 18px; height: 18px; margin-top: .25rem; flex: none; }
.franja { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.franja legend { padding: 0; margin-bottom: .4rem; width: 100%; }
.franja label { display: inline-flex; align-items: center; gap: .5rem; min-height: var(--toque); font-size: var(--texto-s); cursor: pointer; }
.franja input { accent-color: var(--color-primario); width: 18px; height: 18px; }
.formulario__enviar { grid-column: 1 / -1; justify-self: start; }
.formulario__aviso { grid-column: 1 / -1; padding: var(--e-3); border-left: 2px solid var(--color-primario); background: var(--color-crema); color: var(--color-tinta); font-size: var(--texto-s); }

/* ---------- Respuesta en estrecho ---------- */
@media (max-width: 1180px) {
  .rejilla-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .rejilla-2, .rejilla-3, .encabezado--partido { grid-template-columns: minmax(0, 1fr); }
  .encabezado--partido { align-items: start; }
  .antetitulo::before { width: 1.5rem; }
}
@media (max-width: 560px) {
  .formulario { grid-template-columns: minmax(0, 1fr); }
  .campo--medio { grid-column: 1 / -1; }
  .formulario__enviar, .acciones .boton { width: 100%; }
  .datos li { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .boton { padding-inline: 1.25rem; letter-spacing: .12em; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}