/* ==========================================================================
   Noon — Landing
   Copia 1:1 de NOON_LandingPage.pdf (Chai Latte).
   Móvil = página 2 del PDF (lienzo 440pt). Desktop = página 1 (lienzo 1920pt).

   Cómo funciona la escala:
   Cada medida del PDF se escribe tal cual y se multiplica por --s, que vale
   1px cuando el viewport mide lo mismo que el lienzo. Así `42.4 * var(--s)`
   ES el 42.4pt del Illustrator, y todo escala junto sin recalcular nada.

   Reglas de marca que se aplican encima del PDF:
   - letter-spacing siempre 0. El aire del original se recupera con
     word-spacing y con cajas de ancho fijo, nunca separando letras.
   - sin texto justificado.
   ========================================================================== */

:root {
  /* Paleta muestreada de las aplicaciones aprobadas */
  --hueso:        #EBE3D8;
  --hueso-claro:  #F7F4EF;
  --tinta:        #2D2D23;
  --terracota:    #854729;
  --ocre:         #B28A56;
  --olivo:        #7B7559;

  --fg-suave: color-mix(in srgb, var(--tinta) 62%, var(--hueso));
  --filete:   color-mix(in srgb, var(--tinta) 22%, var(--hueso));

  /* Unidad de escala: lienzo móvil de 440pt */
  --s: calc(min(100vw, 500px) / 440);

  /* Móvil: un solo canalón para TODO (nav, banda, títulos, horarios, tarjetas,
     footer). Así cada bloque comparte el mismo borde izquierdo y el mismo
     ancho. Es el mismo valor que usa la sangría de las tarjetas. En desktop
     estas dos variables se redefinen con los márgenes del PDF. */
  --pad-texto: calc(20 * var(--s));
  --pad-ancho: calc(20 * var(--s));

  /* Medida única de contenido: el módulo de 790pt del PDF. Lo comparten la
     los horarios, la lista de FAQ, el formulario y el mapa, así todos los bloques
     centrados cierran en el mismo borde. Ningún elemento define su propio
     ancho en ch: o va al riel completo, o va a esta medida. */
  --medida: calc(790 * var(--s));

  --font-display: "Neue Montreal", ui-sans-serif, system-ui, sans-serif;
  --font-label:   "Euclid Circular B", ui-sans-serif, system-ui, sans-serif;

  /* Noon baja el ritmo: nada rápido, nada con rebote */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 420ms;
}

/* --------------------------------------------------------------- Fuentes */
@font-face {
  font-family: "Neue Montreal";
  src: url("assets/fonts/NeueMontreal-Book.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Montreal";
  src: url("assets/fonts/NeueMontreal-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Euclid Circular B";
  src: url("assets/fonts/EuclidCircularB-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}

/* ------------------------------------------------------------------ Base */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  color-scheme: light;          /* la marca es hueso; nada de dark automático */
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--hueso);
  color: var(--tinta);
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  touch-action: manipulation;                /* mata el retardo del doble tap */
  -webkit-tap-highlight-color: color-mix(in srgb, var(--terracota) 22%, transparent);
}

img, svg { display: block; max-width: 100%; }
p { margin: 0; }

/* El nav es sticky: sin esto, saltar a #reservar deja el título debajo del nav. */
[id] { scroll-margin-top: calc(72 * var(--s)); }

h1, h2, h3 { text-wrap: balance; }
/* pretty evita palabras huérfanas al final de los párrafos. */
.bloque__intro, .plan__texto, .regalo__texto, .regalo__nota,
.faq__item p, .footer__dir, .mapa__pie { text-wrap: pretty; }

.page { max-width: 2100px; margin-inline: auto; position: relative; }

.visualmente-oculto {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--terracota);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------------- Loader */
/* La onda llena el monograma mientras carga. Loopea; se desvanece al listo. */
#loader {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: var(--hueso);
  transition: opacity 520ms var(--ease), visibility 520ms;
}
#loader.oculto { opacity: 0; visibility: hidden; }
.loader__svg { width: clamp(66px, 17vw, 110px); height: auto; }
@media (prefers-reduced-motion: reduce) {
  /* Sin animación: se muestra un instante y se va, sin la onda en bucle. */
  .ld-wave, .ld-rise { animation: none; }
  #loader .ld-rise > animateTransform { display: none; }
}

.saltar {
  position: absolute; left: 50%; translate: -50% -120%;
  z-index: 100; background: var(--terracota); color: var(--hueso-claro);
  padding: 12px 20px; border-radius: 999px; text-decoration: none;
  font-size: 14px; transition: translate var(--dur) var(--ease);
}
.saltar:focus-visible { translate: -50% 12px; }

/* ------------------------------------------------------------------- Nav */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(18 * var(--s)) max(var(--pad-ancho), env(safe-area-inset-left));
  background: color-mix(in srgb, var(--hueso) 88%, transparent);
  backdrop-filter: blur(10px);
}
.nav__marca { display: inline-flex; color: var(--tinta); }
.nav__marca svg { width: calc(88 * var(--s)); aspect-ratio: 3.7595; }

.nav__links { display: none; }

/* Hamburguesa: dos filetes, como el PDF */
.nav__toggle {
  display: grid; align-content: center; gap: calc(7 * var(--s));
  /* Área táctil de 44px sin agrandar las barras: el dibujo queda al centro. */
  width: 44px; min-height: 44px;
  background: none; border: 0; cursor: pointer;
  padding: 0 calc((44px - 42 * var(--s)) / 2);
}
/* Solo las dos líneas visibles; el span "Menú" (oculto) no cuenta. */
.nav__toggle span:not(.visualmente-oculto) {
  display: block; height: 1.5px; background: var(--tinta);
  transform-origin: center;
  transition: translate var(--dur) var(--ease), rotate var(--dur) var(--ease);
}
/* Al abrir, las dos líneas se cruzan en una X. */
.nav__toggle[aria-expanded="true"] span:nth-child(1) { translate: 0 calc(4.25 * var(--s)); rotate: 45deg; }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { translate: 0 calc(-4.25 * var(--s)); rotate: -45deg; }

.nav__panel {
  position: fixed; inset: 0; z-index: 49;
  display: grid; align-content: center; justify-items: center;
  gap: calc(28 * var(--s));
  background: var(--hueso);
  opacity: 0; visibility: hidden;
  overscroll-behavior: contain;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
  transition: opacity var(--dur) var(--ease), visibility var(--dur);
}
.nav__panel[data-abierto="true"] { opacity: 1; visibility: visible; }
.nav__panel a {
  color: var(--tinta); text-decoration: none;
  font-size: calc(30 * var(--s));
  display: grid; place-items: center;
  min-height: 44px; padding-inline: calc(20 * var(--s));
}

/* --------------------------------------------------------- Selector idioma */
.lang { position: relative; }
.lang__btn {
  display: inline-flex; align-items: center; gap: calc(6 * var(--s));
  font: inherit; color: var(--tinta); background: none; border: 0; cursor: pointer;
  padding: calc(8 * var(--s)) calc(10 * var(--s));
  min-height: 44px; border-radius: 999px;
}
.lang__btn svg { transition: rotate var(--dur) var(--ease); }
.lang[data-abierto="true"] .lang__btn svg { rotate: 180deg; }
.lang__menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  z-index: 60; margin: 0; padding: calc(5 * var(--s)); list-style: none;
  background: var(--hueso-claro);
  border-radius: calc(12 * var(--s));
  box-shadow: 0 6px 24px color-mix(in srgb, var(--tinta) 16%, transparent);
  opacity: 0; visibility: hidden; translate: 0 -6px;
  transition: opacity var(--dur) var(--ease), visibility var(--dur), translate var(--dur) var(--ease);
}
.lang[data-abierto="true"] .lang__menu { opacity: 1; visibility: visible; translate: 0 0; }
.lang__menu button {
  display: block; width: 100%; text-align: left; white-space: nowrap;
  font: inherit; color: var(--tinta); background: none; border: 0; cursor: pointer;
  padding: calc(10 * var(--s)) calc(20 * var(--s)); border-radius: calc(8 * var(--s));
}
.lang__menu button:hover { background: color-mix(in srgb, var(--tinta) 7%, transparent); }
.lang__menu button[aria-selected="true"] { color: var(--terracota); }

/* En el panel móvil: el selector es una fila más del menú. */
.lang--movil { margin-top: calc(8 * var(--s)); }
.lang--movil .lang__btn { font-size: calc(30 * var(--s)); }
.lang--movil .lang__menu {
  right: auto; left: 50%; translate: -50% -6px;
}
.lang--movil[data-abierto="true"] .lang__menu { translate: -50% 0; }
.lang--movil .lang__menu button { font-size: calc(20 * var(--s)); text-align: center; }

/* ------------------------------------------------------------------ Hero */
/* Las cuatro esquinas van redondeadas. Radio medido del PDF: ~3.3% del ancho
   del lienzo en las dos páginas (14pt sobre 440, 66pt sobre 1920). */
.hero {
  position: relative; isolation: isolate;
  display: grid; grid-template-columns: 1fr 1fr;
  border-radius: calc(14 * var(--s));
  overflow: hidden;
}
/* En móvil el hero llena la pantalla bajo el nav. El 84px descuenta la
   altura del nav sticky para que el corte caiga justo en el borde inferior. */
.hero img {
  width: 100%;
  height: calc(100dvh - 84px);
  object-fit: cover;
}

/* Tagline: el aire viene de word-spacing y del ancho de la caja, no de tracking.
   Sentence case por revisión del cliente (jul 2026); antes iba en mayúsculas. */
.tagline {
  position: absolute; inset: 0; z-index: 2;
  display: grid; align-content: center; justify-items: center;
  row-gap: calc(16 * var(--s));
  margin: 0; padding-inline: var(--pad-texto);
  color: var(--hueso-claro);
  text-align: center;
  /* Scrim suave centrado: el subtítulo cae sobre el hielo (lado claro) y
     sin esto el blanco no se lee. Tinta al 38%, se desvanece al 72%. */
  background: radial-gradient(
    ellipse 54% 42% at 50% 50%,
    color-mix(in srgb, var(--tinta) 38%, transparent),
    transparent 72%
  );
}
.tagline__frase {
  margin: 0;
  font-family: var(--font-label);
  font-size: calc(18 * var(--s));
  line-height: 1.72;
  /* La frase se lee como una sola unidad: el espacio entre palabras apenas se
     abre. Nunca se abre con letter-spacing. */
  word-spacing: calc(2 * var(--s));
}
.tagline__frase span { display: block; }
.tagline__sub {
  font-size: calc(13 * var(--s));
  line-height: 1.5;
  max-width: 36ch;
  text-wrap: pretty;
}

.monograma {
  display: flex; justify-content: center;
  padding-top: calc(72 * var(--s));
  padding-bottom: calc(96 * var(--s));
  color: var(--tinta);
}
.monograma svg { width: calc(46 * var(--s)); aspect-ratio: 1.4904; }

/* --------------------------------------------------------------- Bloques */
.bloque { padding-inline: var(--pad-texto); }

.bloque__titulo {
  font-size: calc(42.4 * var(--s));
  line-height: 1.05;
  font-weight: 500;
  margin: 0 0 calc(34 * var(--s));
}

.bloque__intro {
  font-size: calc(18.2 * var(--s));
  line-height: 1.55;
  /* Sin medida propia: el intro cierra donde cierra su bloque. */
}

/* ------------------------------------------------- Reservar / disponibilidad */
.reservar { padding-bottom: calc(90 * var(--s)); }

/* ------------------------------------------------------------ Reserva
   Sin embed de Acuity: dos botones, cada uno entra directo al calendario de
   su servicio. Un clic menos que el selector de Acuity. */
/* Reserva va centrada: sin titulo a la vista, el intro manda y los botones
   caen bajo su mismo eje. Un solo ancho para los dos, el token --medida. */
.reservar .bloque__cabeza { text-align: center; }
.reservar .bloque__intro { max-width: var(--medida); margin-inline: auto; }

.reserva__acciones {
  /* Lado a lado tambien en movil: dos columnas iguales. El padding lateral
     del boton base (40) no cabe en media pantalla, asi que aqui manda el
     ancho de la celda y el aire se recorta. */
  display: grid; grid-template-columns: 1fr 1fr; gap: calc(12 * var(--s));
  margin-top: calc(56 * var(--s));
  /* Sin sangría: abren en el mismo riel de texto que el título "Reserva",
     no en el riel ancho de las tarjetas. */
}
/* Mismo escalón que Comprar, la gift card y Enviar: el "doble del base"
   que ya usa el resto de los CTA de la página. */
.reserva__acciones .boton {
  margin: 0; width: 100%;
  font-size: calc(20.2 * var(--s));
  padding-inline: calc(12 * var(--s));
  /* En pantallas chicas el escalado deja el boton en 38px de alto y el
     minimo tactil son 44. El min-height no estorba arriba de eso. */
  min-height: 44px;
  display: grid; place-content: center;
}


/* --------------------------------------------------------- Banda divisoria */
.banda {
  display: flex; justify-content: space-between;
  padding: calc(24 * var(--s)) var(--pad-ancho);
  border-block: 1px solid var(--tinta);
  font-family: var(--font-label);
  font-size: calc(9.2 * var(--s));
  text-transform: uppercase;
  word-spacing: calc(3 * var(--s));
  margin-bottom: calc(96 * var(--s));
}

/* ------------------------------------------------------------ Membresías */
.membresias { padding-bottom: calc(40 * var(--s)); }

.planes {
  display: grid; gap: calc(56 * var(--s));
  /* Sangría completa en móvil: las tarjetas rompen el margen de la sección
     y usan casi todo el ancho, con un canalón corto. En desktop se resetea. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding: calc(64 * var(--s)) calc(20 * var(--s)) 0;
}

/* Las dos tarjetas igualan altura y el botón ancla abajo, así quedan
   paralelos aunque un plan tenga más texto que el otro. */
.plan { position: relative; display: flex; flex-direction: column; }
.plan__foto {
  width: 100%; height: calc(186 * var(--s));
  object-fit: cover;
  border-radius: calc(18 * var(--s)) calc(18 * var(--s)) 0 0;
}
.plan__cuerpo {
  position: relative;
  flex: 1; display: flex; flex-direction: column;
  margin-top: calc(-22 * var(--s));
  background: var(--hueso-claro);
  border-radius: calc(18 * var(--s));
  /* Menos margen lateral en móvil: el texto usa más ancho y rompe en menos
     renglones. En desktop el padding se sobrescribe más abajo. */
  padding: calc(28 * var(--s)) calc(22 * var(--s)) calc(30 * var(--s));
}
.plan__nombre {
  font-size: calc(44 * var(--s)); font-weight: 500;
  line-height: 1; letter-spacing: -0.01em;
  margin: 0 0 calc(12 * var(--s));
}
.plan__precio {
  font-size: calc(14 * var(--s)); font-weight: 500;
  margin: 0 0 calc(20 * var(--s));
}
.plan__precio span { color: var(--fg-suave); font-weight: 400; }

/* El PDF fija este cuerpo en 11.5pt. En un teléfono real eso queda por
   debajo del mínimo legible y truena WCAG, así que sube a 15px.
   Es la única medida donde nos despegamos del original a propósito. */
.plan__texto,
.plan__lista {
  font-size: max(calc(11.5 * var(--s)), 14px);
  line-height: 1.45;
  color: color-mix(in srgb, var(--tinta) 88%, var(--hueso));
}
.plan__lista {
  margin: calc(20 * var(--s)) 0 0;
  padding-left: 1.15em;
  display: grid; gap: calc(12 * var(--s));
}
.plan__lista li::marker { color: var(--fg-suave); }
/* margin-top:auto empuja el botón al fondo; el margin-bottom del último bloque
   de texto marca el aire mínimo entre el body y el botón. */
.plan__cuerpo .boton { margin-top: auto; font-size: calc(20.2 * var(--s)); }  /* Comprar: doble del base */

/* El drop-in vive en su propia reja, arriba del título de la sección: sin el
   aire superior de .planes y con separación propia antes de la cabeza. */
.planes--dropin { padding-top: 0; padding-bottom: calc(64 * var(--s)); }

/* --- Drop-in con toggle Social / Private ---
   Mismo formato que Social/Private: título, precio abajo, alineado a la izq. */
.plan--dropin .plan__cuerpo { margin-top: 0; border-radius: calc(18 * var(--s)); }
.plan--dropin .plan__texto {
  /* La tarjeta es una banda: el párrafo corre hasta el borde del toggle y cabe
     en un renglón. Sin medida propia. */
  max-width: none;
  font-size: max(calc(11 * var(--s)), 13px);
}

/* Toggle delgado y horizontal, con el color de los botones (terracota).
   Pista en terracota tenue; la pestaña activa es terracota sólida como
   Comprar / Cómo llegar. */
/* Toggle a todo el ancho, arriba del título. Delgado y horizontal. */
.dropin__toggle {
  display: flex; width: 100%;
  padding: calc(3 * var(--s));
  margin: 0 0 calc(24 * var(--s));
  background: color-mix(in srgb, var(--terracota) 14%, transparent);
  border-radius: 999px;
}
.dropin__tab {
  flex: 1;                                            /* mitad y mitad */
  font: inherit; font-size: calc(13 * var(--s));
  color: var(--terracota); background: transparent;
  border: 0; cursor: pointer;
  padding: calc(7 * var(--s)) 0;                      /* delgado */
  border-radius: 999px;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.dropin__tab[aria-selected="true"] {
  background: var(--terracota);
  color: var(--hueso-claro);
}

.dropin__panel { display: grid; justify-items: start; }   /* texto a la izq */
.dropin__panel[hidden] { display: none; }
.dropin__panel .plan__precio { margin-bottom: calc(16 * var(--s)); }
/* El botón va centrado, como el Comprar de las cartas de arriba. */
.dropin__panel .boton { margin: calc(26 * var(--s)) auto 0; justify-self: center; }
.plan__lista, .plan__texto:last-of-type { margin-bottom: calc(34 * var(--s)); }
.plan__lista b { font-weight: 500; }

.boton {
  /* fit-content o el botón se estira a todo lo ancho del contenedor flex */
  display: block; width: fit-content;
  margin: calc(30 * var(--s)) auto 0;
  font: inherit; font-size: calc(10.1 * var(--s));
  color: var(--hueso-claro); background: var(--terracota);
  border: 0; border-radius: 999px;
  padding: calc(14 * var(--s)) calc(40 * var(--s));
  cursor: pointer; text-decoration: none; text-align: center;
  transition: background var(--dur) var(--ease), translate 160ms var(--ease);
}
.boton:hover { background: color-mix(in srgb, var(--terracota) 88%, black); }
.boton:active { translate: 0 1px; }

/* ------------------------------------------------------------ Manifiesto */
.manifiesto {
  position: relative;
  margin-top: calc(74 * var(--s));
  display: grid; place-items: center;
  min-height: calc(320 * var(--s));
  padding: calc(40 * var(--s)) var(--pad-ancho);
  isolation: isolate;
  overflow: hidden;
}
.manifiesto img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover;
}
/* La foto es clara en la zona de la arena y el texto blanco no alcanzaba
   contraste AA. Scrim mínimo para pasar sin mover la composición. */
.manifiesto::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(
    100deg,
    color-mix(in srgb, var(--tinta) 72%, transparent),
    color-mix(in srgb, var(--tinta) 58%, transparent)
  );
  /* 72/58 es el mínimo medido que mantiene el texto en AA (5.1:1) dejando
     ver la foto. Por debajo de 70/56 truena. Si cambia la foto, re-medir. */
}
.manifiesto__texto {
  color: var(--hueso-claro);
  /* El PDF fija 9.9pt. En blanco sobre foto eso no se lee; mínimo 12px. */
  font-size: max(calc(9.9 * var(--s)), 12px);
  font-weight: 500;
  line-height: 2;
  /* La línea más larga fija el ancho del bloque; las otras dos se abren
     hasta ese mismo ancho. Así las tres comparten borde izquierdo y derecho,
     como en el PDF. */
  width: fit-content;
  max-width: 100%;
}
/* Copy revisado (jul 2026): tres frases completas, una por renglón.
   El spread palabra-a-palabra del PDF ya no aplica con líneas largas. */
.manifiesto__texto > span { display: block; }


/* -------------------------------------------------------------- Gift card */
/* Caja centrada: es la única sección de la página con esta forma, para que
   no se lea como una tarjeta de membresía más. */
.regalo { padding: calc(74 * var(--s)) var(--pad-ancho) 0; }
.regalo__caja {
  background: var(--hueso-claro);
  border-radius: calc(18 * var(--s));
  padding: calc(52 * var(--s)) calc(36 * var(--s));
  text-align: center;
}
.regalo__titulo {
  font-family: var(--font-label);
  font-size: calc(10.5 * var(--s));
  text-transform: uppercase;
  word-spacing: calc(3 * var(--s));
  font-weight: 400;
  color: var(--fg-suave);
  margin: 0 0 calc(18 * var(--s));
}
.regalo__texto {
  font-size: calc(24 * var(--s));
  line-height: 1.2;
  max-width: 20ch;
  margin-inline: auto;
}
.regalo__nota {
  font-size: calc(13 * var(--s));
  color: var(--fg-suave);
  margin-top: calc(18 * var(--s));
}
/* En EN la nota se fundió dentro del párrafo principal (revisión del cliente);
   la clave queda vacía y la caja no debe dejar el hueco. */
.regalo__nota:empty { display: none; }
/* El párrafo EN es más largo que el ES: baja un punto y abre la caja. */
.regalo__texto:lang(en) { font-size: calc(18 * var(--s)); max-width: 36ch; }
/* Mismo tamaño de letra que Comprar. */
.regalo .boton {
  margin-top: calc(30 * var(--s));
  font-size: calc(20.2 * var(--s));
  padding: calc(16 * var(--s)) calc(40 * var(--s));
}

/* ------------------------------------------------------------------- FAQ */
/* <details name> hace que solo una quede abierta a la vez, sin JavaScript. */
.faq { padding-top: calc(90 * var(--s)); }
.faq__lista {
  margin-top: calc(40 * var(--s));
  border-top: 1px solid var(--filete);
  /* la lista ocupa la mitad del ancho de contenido, centrada */
  max-width: var(--medida);
  margin-inline: auto;
}
.faq__item { border-bottom: 1px solid var(--filete); }
.faq__item summary {
  cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5em;
  padding: calc(20 * var(--s)) 0;
  font-size: calc(16 * var(--s));
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+";
  color: var(--fg-suave);
  font-size: 1.25em; line-height: 1;
}
.faq__item[open] summary::after { content: "\2212"; }
.faq__item summary:hover { color: var(--terracota); }
.faq__item p {
  padding-bottom: calc(22 * var(--s));
  font-size: calc(15 * var(--s));
  line-height: 1.55;
  color: var(--fg-suave);
}

/* -------------------------------------------------------------- Contacto */
.contacto { padding-block: calc(64 * var(--s)) calc(48 * var(--s)); }
/* Móvil: campos más juntos para que el formulario y el botón lean como
   un solo bloque, sin huecos grandes entre uno y otro. */
.form { margin-top: calc(36 * var(--s)); display: grid; gap: calc(16 * var(--s)); }

.campo { display: grid; gap: calc(6 * var(--s)); }
.campo label { font-size: calc(14 * var(--s)); }
.campo input, .campo textarea {
  font: inherit; font-size: max(calc(13 * var(--s)), 16px);
  color: var(--tinta); background: transparent;
  border: 1px solid var(--fg-suave);
  border-radius: 999px;
  padding: calc(14 * var(--s)) calc(20 * var(--s));
  width: 100%;
  transition: border-color var(--dur) var(--ease);
}
.campo textarea { border-radius: calc(20 * var(--s)); resize: vertical; min-height: calc(104 * var(--s)); }
.campo input:hover, .campo textarea:hover { border-color: var(--tinta); }
.campo__error { font-size: calc(12 * var(--s)); color: var(--terracota); min-height: 1em; }

/* Dos momentos de error: mientras escribe (:user-invalid) y al intentar
   enviar con campos vacíos (data-intentado, que pone el JS). */
.campo :is(input, textarea):user-invalid,
.form[data-intentado="true"] .campo :is(input, textarea):invalid {
  border-color: var(--terracota);
}
.campo :is(input, textarea):user-invalid + .campo__error::before,
.form[data-intentado="true"] .campo :is(input, textarea):invalid + .campo__error::before {
  content: attr(data-msg);
}

.form .boton { font-size: calc(20.2 * var(--s)); }  /* mismo tamaño que Comprar */
.form__estado { text-align: center; font-size: calc(13 * var(--s)); min-height: 1.4em; }

/* ------------------------------------------------------------------ Mapa */
/* Calles reales de la zona (OSM) como line-art. Fondo tinta, líneas hueso,
   un punto en la ubicación. Se lee como continuación del footer oscuro. */
.mapa {
  --linea: var(--hueso);
  background: var(--tinta);
  padding: calc(56 * var(--s)) var(--pad-ancho) 0;
}
.mapa__lienzo {
  position: relative;
  /* cuadrado, centrado, con canalón lateral */
  width: 100%; max-width: calc(560 * var(--s));
  aspect-ratio: 1;
  margin-inline: auto;
  overflow: hidden;
  isolation: isolate;
}
.mapa__lienzo svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
}
/* Desvanecido en los bordes para que las calles no se corten en seco. */
.mapa__lienzo::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 50%, transparent 55%, var(--tinta) 100%);
}
.mapa__pin {
  position: absolute; z-index: 2;
  left: 50%; top: 50%; translate: -50% -50%;
  width: calc(14 * var(--s)); aspect-ratio: 1;
  border-radius: 999px;
  background: var(--terracota);
  box-shadow: 0 0 0 calc(6 * var(--s)) color-mix(in srgb, var(--terracota) 30%, transparent);
}
.mapa__pie {
  text-align: center;
  color: color-mix(in srgb, var(--hueso) 70%, var(--tinta));
  font-size: calc(13 * var(--s));
  padding: calc(24 * var(--s)) var(--pad-ancho) calc(8 * var(--s));
}
/* Mismo tamaño (letra y caja) que Comprar. */
.mapa__ir {
  font-size: calc(20.2 * var(--s));
  margin: calc(20 * var(--s)) auto 0;
  padding: calc(14 * var(--s)) calc(40 * var(--s));
}

/* ---------------------------------------------------------------- Footer */
/* El pie cierra en tinta: ancla la página y repite el juego de opuestos
   que sostiene la marca. La terracota no se usa aquí a propósito, es el
   único color de acción y se reserva para los botones. */
.footer {
  padding: calc(64 * var(--s)) var(--pad-texto) calc(64 * var(--s));
  text-align: center;
  background: var(--tinta);
  color: var(--hueso-claro);
}
.footer__contacto {
  display: flex; justify-content: center; gap: calc(46 * var(--s));
  font-size: calc(14 * var(--s)); font-weight: 500;
  margin-bottom: calc(18 * var(--s)); flex-wrap: wrap;
}
.footer__contacto a { color: inherit; text-decoration: none; min-width: 0; overflow-wrap: break-word; }
.footer__contacto a:hover { text-decoration: underline; text-underline-offset: 4px; }
.footer__dir {
  font-size: calc(14 * var(--s)); line-height: 1.5;
  margin-bottom: calc(18 * var(--s));
}
.footer__marca { display: flex; justify-content: center; color: var(--hueso-claro); }
.footer__marca svg { width: calc(46 * var(--s)); aspect-ratio: 1.4904; }

/* ----------------------------------------------------------------- Legal */
/* Términos y Condiciones. Misma medida que la lista de FAQ: todo el texto
   cierra en el mismo borde, sin anchos sueltos por elemento. */
.legal {
  /* el padding lateral del .bloque entra en la caja: se suma para que el
     texto mida exactamente --medida, igual que la lista de FAQ */
  max-width: calc(var(--medida) + 2 * var(--pad-texto));
  margin-inline: auto;
  padding-top: calc(48 * var(--s));
  padding-bottom: calc(72 * var(--s));
}
.legal__cabeza { border-bottom: 1px solid var(--filete); padding-bottom: calc(22 * var(--s)); }
.legal__cabeza .bloque__titulo { margin-bottom: calc(10 * var(--s)); }
.legal__meta { font-size: calc(14 * var(--s)); color: var(--fg-suave); }
/* Un bloque por idioma; se muestra el del idioma activo del sitio. */
[data-lang-only="en"] { display: none; }
html[lang="en"] [data-lang-only="es"] { display: none; }
html[lang="en"] [data-lang-only="en"] { display: block; }
.legal__intro {
  font-size: calc(17 * var(--s)); line-height: 1.55;
  padding-block: calc(26 * var(--s));
  text-wrap: pretty;
}
.legal__sec { padding-block: calc(22 * var(--s)) calc(6 * var(--s)); }
.legal__sec h2 {
  font-size: calc(19 * var(--s)); font-weight: 500; line-height: 1.2;
  margin: 0 0 calc(12 * var(--s));
}
.legal__sec p {
  font-size: calc(15 * var(--s)); line-height: 1.6; color: var(--fg-suave);
  margin-bottom: calc(12 * var(--s));
  text-wrap: pretty;
}
.footer__legal { font-size: calc(14 * var(--s)); margin-bottom: calc(56 * var(--s)); }
.footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 4px; }
.footer__legal a:hover { color: var(--ocre); }

/* ==========================================================================
   Desktop — página 1 del PDF, lienzo 1920pt
   ========================================================================== */
@media (min-width: 900px) {
  :root {
    --s: calc(min(100vw, 2100px) / 1920);
    /* En pt del lienzo, no en %: el % se resolvía contra el contenedor de cada
       bloque, así que un riel anidado (las tarjetas dentro de .bloque) sumaba
       los dos canalones y quedaba fuera de escuadra. */
    --pad-texto: calc(174 * var(--s));   /* x=174 */
    --pad-ancho: calc(88 * var(--s));    /* x=88  */
  }

  [id] { scroll-margin-top: calc(130 * var(--s)); }

  .nav { padding-block: calc(24 * var(--s)); }
  .nav__marca svg { width: calc(148 * var(--s)); }
  .nav__toggle { display: none; }
  .nav__panel { display: none; }
  .nav__links {
    display: flex; align-items: center; gap: calc(74 * var(--s));
    font-size: calc(29 * var(--s));
  }
  .nav__links a { color: var(--tinta); text-decoration: none; }
  .nav__links a:hover { color: var(--terracota); }
  .nav__links .pill {
    border: 1px solid var(--tinta); border-radius: 999px;
    padding: calc(10 * var(--s)) calc(38 * var(--s));
    transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
  }
  .nav__links .pill:hover {
    background: var(--tinta); color: var(--hueso); border-color: var(--tinta);
  }

  .hero { border-radius: calc(66 * var(--s)); }
  .hero img { height: min(calc(1126 * var(--s)), 86dvh); }

  .tagline { row-gap: calc(26 * var(--s)); }
  .tagline__frase {
    font-size: calc(37.4 * var(--s));
    word-spacing: calc(4 * var(--s));
  }
  .tagline__sub { font-size: calc(22 * var(--s)); max-width: 44ch; }
  .monograma { padding-top: calc(150 * var(--s)); padding-bottom: calc(190 * var(--s)); }
  .monograma svg { width: calc(96 * var(--s)); }

  /* Título a la izquierda, párrafo en la columna derecha (x=897 → 46.7%) */
  /* Título e intro arrancan del mismo renglón: alinean por la tapa de la
     letra, no por la caja de línea. Sin el trim, el half-leading del párrafo
     (1.4) lo bajaría contra el del título (1.05) y se vería chueco. */
  .bloque__cabeza {
    display: grid; grid-template-columns: 1fr 42%; align-items: start;
    gap: calc(80 * var(--s));
  }
  /* Reserva no usa la reja de dos columnas: va en una sola, centrada. */
  .reservar .bloque__cabeza { display: block; }
  .bloque__cabeza .bloque__titulo,
  .bloque__cabeza .bloque__intro {
    text-box-trim: trim-start;
    text-box-edge: cap alphabetic;
  }
  .bloque__titulo { font-size: calc(60 * var(--s)); margin: 0; }
  /* Sin max-width propio: el párrafo llena su columna y cierra exactamente en
     el riel derecho, igual que el título abre en el izquierdo. */
  .bloque__intro { font-size: calc(26 * var(--s)); line-height: 1.4; max-width: none; }

  .reserva__acciones {
    grid-template-columns: none; grid-auto-flow: column; justify-content: center;
    gap: calc(20 * var(--s)); margin-top: calc(90 * var(--s));
  }
  .reserva__acciones .boton {
    width: auto;
    font-size: calc(36 * var(--s));                                  /* = Comprar */
    padding: calc(16 * var(--s)) calc(58 * var(--s));
  }


  .reservar { padding-bottom: calc(140 * var(--s)); }

  .banda {
    font-size: calc(30.9 * var(--s));
    word-spacing: calc(8 * var(--s));
    /* La banda es texto, no caja: va al riel de texto (x=174), igual que los
       títulos y el footer. Los filetes siguen a sangre completa. */
    padding: calc(52 * var(--s)) var(--pad-texto);
    margin-bottom: calc(180 * var(--s));
  }

  .planes {
    grid-template-columns: 1fr 1fr;
    gap: calc(79 * var(--s));
    width: auto;
    /* Las tarjetas salen al riel ancho (x=88), el mismo de la gift card.
       Mismo recurso que los horarios de Reserva. */
    margin-inline: calc(var(--pad-ancho) - var(--pad-texto));
    padding: calc(72 * var(--s)) 0 0;
  }
  /* Drop-in a lo ancho, arriba del título de la sección. */
  .plan--dropin { grid-column: 1 / -1; }
  .planes--dropin { padding-top: 0; padding-bottom: calc(96 * var(--s)); }
  .plan--dropin .plan__cuerpo {
    border-radius: calc(28 * var(--s));
    padding-block: calc(56 * var(--s));
  }
  .dropin__tab { font-size: calc(18 * var(--s)); padding: calc(8 * var(--s)) calc(30 * var(--s)); }
  .dropin__panel .boton { margin-top: calc(32 * var(--s)); }
  .plan--dropin .plan__texto { font-size: calc(18 * var(--s)); }  /* un poco < membresías (20) */
  .boton.mapa__ir { font-size: calc(36 * var(--s)); padding: calc(16 * var(--s)) calc(58 * var(--s)); }  /* = Comprar */

  .plan__foto { height: calc(286 * var(--s)); border-radius: calc(28 * var(--s)) calc(28 * var(--s)) 0 0; }
  .plan__cuerpo {
    margin-top: calc(-46 * var(--s));
    border-radius: calc(28 * var(--s));
    padding: calc(40 * var(--s)) calc(78 * var(--s)) calc(46 * var(--s));
  }
  .plan__nombre { font-size: calc(48 * var(--s)); }
  .plan__precio { font-size: calc(24 * var(--s)); }
  .plan__texto, .plan__lista { font-size: calc(20 * var(--s)); }
  .boton { font-size: calc(18 * var(--s)); padding: calc(16 * var(--s)) calc(58 * var(--s)); margin-top: calc(22 * var(--s)); }
  .plan__cuerpo .boton { font-size: calc(36 * var(--s)); }  /* Comprar: doble del base */

  .manifiesto {
    margin-top: calc(190 * var(--s));
    min-height: calc(700 * var(--s));
  }
  .manifiesto__texto {
    font-size: calc(30.9 * var(--s));
    line-height: 2.1;
  }

  .regalo { padding-top: calc(150 * var(--s)); }
  .regalo__caja { padding: calc(86 * var(--s)); border-radius: calc(28 * var(--s)); }
  .regalo__titulo { font-size: calc(20 * var(--s)); }
  .regalo__texto { font-size: calc(46 * var(--s)); }
  .regalo__texto:lang(en) { font-size: calc(32 * var(--s)); max-width: 40ch; }
  .regalo__nota { font-size: calc(20 * var(--s)); }
  .regalo .boton { font-size: calc(36 * var(--s)); padding: calc(16 * var(--s)) calc(58 * var(--s)); }  /* = Comprar */

  .faq { padding-top: calc(150 * var(--s)); }
  .faq__lista { margin-top: calc(50 * var(--s)); }
  .faq__item summary { font-size: calc(26 * var(--s)); padding-block: calc(24 * var(--s)); }
  .faq__item p { font-size: calc(22 * var(--s)); padding-bottom: calc(28 * var(--s)); }

  .contacto { padding-block: calc(50 * var(--s)) calc(30 * var(--s)); }
  /* Izquierda: intro y datos. Derecha: formulario (x=1074 → 56%) */
  .contacto__grid {
    display: grid; grid-template-columns: 1fr auto;
    gap: calc(36 * var(--s)); align-items: start;
    margin-top: calc(26 * var(--s));
  }
  /* El intro llena su columna del grid; el ancho lo decide la retícula, no el
     párrafo. */
  .contacto .bloque__intro { max-width: none; }
  /* Nombre y Apellido comparten renglón, como en el PDF de desktop.
     Ahorra el alto de un campo completo sin achicar la tipografía. */
  .form {
    margin-top: 0; gap: calc(10 * var(--s)) calc(20 * var(--s));
    display: grid; grid-template-columns: 1fr 1fr;
    /* el formulario mantiene su mitad de ancho, pegado al borde derecho */
    width: var(--medida);
    justify-self: end;
  }
  .form > .campo:nth-child(1) { grid-column: 1; }
  .form > .campo:nth-child(2) { grid-column: 2; }
  .form > .campo:nth-child(n+3),
  .form > .boton,
  .form > .form__estado { grid-column: 1 / -1; }
  .campo label { font-size: calc(18 * var(--s)); }
  .contacto .campo { gap: calc(6 * var(--s)); }
  .campo input, .campo textarea {
    font-size: calc(21 * var(--s));
    padding: calc(7 * var(--s)) calc(20 * var(--s));
  }
  .campo textarea { min-height: calc(56 * var(--s)); border-radius: calc(18 * var(--s)); }
  .form .boton { font-size: calc(36 * var(--s)); margin-right: 0; padding: calc(16 * var(--s)) calc(58 * var(--s)); }  /* mismo tamaño que Comprar */
  .form__estado { font-size: calc(14 * var(--s)); }
  .campo__error { font-size: calc(13 * var(--s)); }

  .footer { text-align: left; padding-inline: var(--pad-texto); padding-block: calc(96 * var(--s)); }
  .footer__contacto { justify-content: flex-start; font-size: calc(31 * var(--s)); gap: calc(150 * var(--s)); }
  .footer__dir { font-size: calc(31 * var(--s)); }
  .footer__marca { margin-top: calc(60 * var(--s)); justify-content: center; }
  .footer__marca svg { width: calc(96 * var(--s)); }

  .legal { padding-top: calc(120 * var(--s)); padding-bottom: calc(160 * var(--s)); }
  .legal__cabeza { padding-bottom: calc(36 * var(--s)); }
  .legal__meta { font-size: calc(22 * var(--s)); }
  .legal__intro { font-size: calc(26 * var(--s)); padding-block: calc(44 * var(--s)); }
  .legal__sec { padding-block: calc(36 * var(--s)) calc(10 * var(--s)); }
  .legal__sec h2 { font-size: calc(30 * var(--s)); margin-bottom: calc(18 * var(--s)); }
  .legal__sec p { font-size: calc(22 * var(--s)); margin-bottom: calc(18 * var(--s)); }
  .footer__dir { margin-bottom: calc(24 * var(--s)); }
  .footer__legal { font-size: calc(22 * var(--s)); margin-bottom: 0; }

  .mapa { padding-top: calc(120 * var(--s)); }
  .mapa__lienzo { max-width: var(--medida); }
  .mapa__pie { font-size: calc(22 * var(--s)); padding-inline: var(--pad-texto); }
}

/* --------------------------------------------------- Movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}