/* ══════════════════════════════════════════════════════════════════════════
   1 · TOKENS
   ══════════════════════════════════════════════════════════════════════════ */
:root {
  /* Escala de maqueta: 1px a 1512 de ancho, proporcional por encima */
  --k: clamp(1px, 100vw / 1512, 2.4px);

  /* Color */
  --cream: #FFFCF3;
  --ink: #20211D;
  --ink-50: rgba(32, 33, 29, .5);
  --ink-40: rgba(32, 33, 29, .4);
  --charcoal: #2B2927;
  --green: #286030;
  --green-deep: #0E2B19;
  --grey-soft: #B8B8B8;
  --rule: rgba(33, 33, 33, .4);
  --rule-on: #212121;
  --placeholder: #D9D7D1;

  /* Tipografía */
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --track-wide: .115em;
  --gutter: clamp(20px, 6.02vw, calc(91 * var(--k)));
  --th: 481.24;   /* alto del carril de la galería (unidades de diseño) */
  --tw: 2352.9;   /* ancho del carril */
}

/* ══════════════════════════════════════════════════════════════════════════
   2 · BASE
   ══════════════════════════════════════════════════════════════════════════ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  /* Solo se frenan las animaciones autónomas (bucles, balanceo, menú); los efectos que avanzan con el
 scroll del usuario (relleno del texto, pila de fotos, galería, apariciones) se conservan: ver «modo
 lite» en el JS. Antes se apagaba todo, y en equipos con «reducir animaciones» activado la página
 parecía no tener efectos. */
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
  }
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
p,
figure {
  margin: 0;
}

img,
svg,
iframe {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
  border-radius: 4px;
}

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

/* ── Barra de scroll propia ───────────────────────────────────────────────
   La nativa se oculta (el scroll sigue siendo el del navegador: rueda, teclado,
   táctil…) y se dibuja un indicador que flota SOBRE la página, sin ocupar ancho:
   así no aparece ninguna franja junto a la galería o el footer, que van a sangre.
   Solo se ve mientras haces scroll (y al acercar el ratón al borde derecho, para
   poder arrastrarlo); en reposo se funde y desaparece.                          */
.js {
  scrollbar-width: none;
}

.js::-webkit-scrollbar {
  display: none;
}

.sb {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 0;
  z-index: 90;
  /* sobre la página y el menú; bajo la cortina (100) */
  pointer-events: none;
}

.sb__thumb {
  position: absolute;
  top: 0;
  right: 4px;
  width: 6px;
  border-radius: 99px;
  background: rgba(14, 43, 25, .58);
  /* verde oscuro con algo de transparencia */
  box-shadow: 0 0 0 1px rgba(255, 252, 243, .4);
  /* filo claro: se lee también sobre el footer oscuro */
  opacity: 0;
  pointer-events: none;
  touch-action: none;
  transition: opacity .4s ease, width .2s ease, background-color .2s ease;
}

.sb.is-active .sb__thumb {
  opacity: 1;
  pointer-events: auto;
}

.sb__thumb:hover,
.sb.is-drag .sb__thumb {
  width: 10px;
  background: rgba(14, 43, 25, .8);
  cursor: grab;
}

.sb.is-drag .sb__thumb {
  cursor: grabbing;
}

.has-intro .sb,
html.modal-open .sb {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .sb__thumb {
    transition: none;
  }
}

/* ── Efecto de viento ─────────────────────────────────────────────────────
   Los filtros viven en el <svg class="wind-defs"> del principio del body.
   `filter` no afecta al layout, así que no altera el tamaño del contenedor.
   JS retira el filtro cuando el elemento sale de pantalla (.is-still): un
   filtro SVG animado se recalcula en CPU en cada fotograma, y apagarlo
   cuando no se ve es la única optimización que de verdad se nota aquí.
   (`will-change` no ayuda: Chrome no acelera estos filtros por GPU.)      */
.wind-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.wind {
  filter: url(#wind-medium);
}

.wind--subtle {
  filter: url(#wind-subtle);
}

.wind--gust {
  filter: url(#wind-gust);
}

.wind.is-still,
.wind--subtle.is-still,
.wind--gust.is-still {
  filter: none;
  animation: none;
}

/* Macro-movimiento opcional: un balanceo mínimo que acompaña al
   desplazamiento sin sustituirlo. El origen va en la esquina anclada. */
.wind-sway {
  animation: wind-sway 14s ease-in-out infinite alternate;
}

@keyframes wind-sway {
  from {
    rotate: -.3deg;
  }

  to {
    rotate: .3deg;
  }
}

@media (prefers-reduced-motion: reduce) {

  .wind,
  .wind--subtle,
  .wind--gust {
    filter: none;
  }

  .wind-sway {
    animation: none;
    rotate: 0deg;
  }
}

/* Lienzo a ancho completo —nunca se limita a 1512— para que la galería, el
   footer y las ramas lleguen siempre a los laterales del viewport.
   `overflow-x:clip` recorta los desbordes decorativos sin crear un contenedor
   de scroll, de modo que `position:sticky` sigue funcionando dentro. */
.page {
  position: relative;
  width: 100%;
  overflow-x: clip;
}

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

/* ══════════════════════════════════════════════════════════════════════════
   3 · PIEZAS REUTILIZABLES
   ══════════════════════════════════════════════════════════════════════════ */
.media {
  position: relative;
  overflow: hidden;
}

.media>img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ph {
  width: 100%;
  height: 100%;
  background: var(--placeholder);
  /* Filo tenue para que la pila de fotos se lea mientras son placeholders.
 Desaparece en cuanto se sustituyen por <img>. */
  box-shadow: inset 0 0 0 1px rgba(32, 33, 29, .1);
}

.ph::after {
  content: attr(data-ph);
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 12px;
  text-align: center;
  font-family: var(--sans);
  font-size: calc(11 * var(--k));
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(32, 33, 29, .38);
}

.pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(12 * var(--k));
  height: calc(48 * var(--k));
  padding-inline: calc(22 * var(--k));
  border: 1px solid var(--charcoal);
  border-radius: 99px;
  color: var(--charcoal);
  font-size: calc(12.8 * var(--k));
  line-height: 1;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .3s ease .05s, border-color .3s ease;
}

.pill:hover,
.pill:focus-visible {
  border-color: var(--green);
  color: var(--cream);
}

/* Relleno «líquido»: una mancha verde que crece desde el punto por donde entra el cursor (--mx/--my los
   escribe el JS; sin JS brota desde abajo), con el borde ondulándose mientras se expande, y se recoge hacia
   donde sale el cursor. También lo llevan «Reservar» de la barra y el resto de botones .pill. */
.pill,
.btn-reservar {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.pill::before,
.btn-reservar::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: var(--mx, 50%);
  top: var(--my, 115%);
  width: calc(100% + 120px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--green);
  translate: -50% -50%;
  scale: 0;
  transition: scale .7s cubic-bezier(.22, 1.1, .36, 1);
}

.pill:hover::before,
.pill:focus-visible::before,
.btn-reservar:hover::before,
.btn-reservar:focus-visible::before {
  scale: 1.35;
  animation: fx-blob 2.6s ease-in-out infinite;
}

@keyframes fx-blob {
  0%, 100% { border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%; }
  25% { border-radius: 44% 56% 52% 48% / 54% 46% 56% 44%; }
  50% { border-radius: 54% 46% 45% 55% / 46% 54% 47% 53%; }
  75% { border-radius: 47% 53% 56% 44% / 55% 45% 50% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .pill::before,
  .btn-reservar::before {
    transition-duration: .01ms;
    animation: none !important;
  }
}

.underlined {
  display: inline-block;
  padding-bottom: calc(4 * var(--k));
  border-bottom: 1px solid var(--charcoal);
  color: var(--charcoal);
  font-size: calc(13.6 * var(--k));
  line-height: 1;
  letter-spacing: .111em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity .25s ease;
}

.underlined:hover {
  opacity: .6;
}

.eyebrow {
  font-size: calc(16 * var(--k));
  line-height: .96;
  letter-spacing: .113em;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════════════════════
   4 · HEADER
   ══════════════════════════════════════════════════════════════════════════ */
/* Barra superior: pegada arriba, se esconde al bajar y reaparece al subir.
   `sticky` (no `fixed`) la mantiene en el flujo, así que no cambia el layout.
   Su fondo es crema sólido que se desvanece por abajo, para que el contenido
   que pasa por debajo no choque con el menú. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--k));
  padding: calc(20 * var(--k)) var(--gutter);
  background: linear-gradient(to bottom,
      var(--cream) 0%, var(--cream) 62%, rgba(255, 252, 243, 0) 100%);
  transition: translate .45s cubic-bezier(.2, .7, .3, 1);
}

.site-header.is-hidden {
  translate: 0 -102%;
}

/* Si el foco del teclado entra en el menú, debe verse */
.site-header:focus-within {
  translate: 0 0;
}

/* Degradado fijo en el borde superior: el contenido se disuelve al salir por
   arriba, también cuando la barra está escondida. */
.top-fade {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(72 * var(--k));
  z-index: 40;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(255, 252, 243, .96) 0%, rgba(255, 252, 243, 0) 100%);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 2.2vw, calc(32 * var(--k)));
  width: calc(400 * var(--k));
  font-family: var(--serif);
  font-size: calc(24 * var(--k));
  line-height: 1.08;
  letter-spacing: .03em;
  color: var(--green);
  white-space: nowrap;
}

.site-nav a {
  position: relative;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1);
}

.site-nav a:hover::after {
  transform: scaleX(1);
}

.site-logo {
  flex: 0 0 auto;
}

.site-logo img {
  width: calc(158 * var(--k));
  height: auto;
}

.header-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: calc(32 * var(--k));
  width: calc(400 * var(--k));
}

/* Selector de idioma de escritorio: a la izquierda de «Reservar» (en móvil va en la barra/menú) */
.header-actions .nav-lang {
  display: block;
}

.header-actions .lang__btn {
  font-size: calc(24 * var(--k));
}

.header-actions .lang__list {
  left: auto;
  right: 0;
}

.btn-reservar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: calc(51 * var(--k));
  padding-inline: calc(32 * var(--k));
  border: 1px solid var(--green);
  border-radius: 99px;
  font-family: var(--serif);
  font-size: calc(24 * var(--k));
  line-height: 1;
  letter-spacing: .03em;
  color: var(--green);
  white-space: nowrap;
  transition: color .3s ease .05s;
}

.btn-reservar:hover,
.btn-reservar:focus-visible {
  color: var(--cream);
}

/* ══════════════════════════════════════════════════════════════════════════
   5 · HERO — 80 % del alto de pantalla
   ══════════════════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 80svh;
  /* «Acompáñanos» va anclado abajo (position:absolute); el relleno inferior
 reserva su hueco para que la pastilla y el titular sigan centrados igual. */
  --cta-gap: calc(127 * var(--k));
  --cta-h: calc(24 * var(--k));
  padding: calc(40 * var(--k)) var(--gutter) calc(40 * var(--k) + var(--cta-gap) + var(--cta-h));
  /* Tamaño base del titular; sirve también de interlínea absoluta para que
 el «30», más grande, no separe las dos líneas. */
  --hero-fs: clamp(42px, 6.94vw, calc(104.939 * var(--k)));
}

/* Pastilla superior */
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  height: calc(32 * var(--k));
  padding-inline: calc(22 * var(--k));
  border-radius: 99px;
  background: rgba(32, 33, 29, .03);
  font-family: var(--serif);
  font-size: calc(20 * var(--k));
  font-weight: 400;
  line-height: 1;
  letter-spacing: .03em;
  color: var(--green);
  white-space: nowrap;
}

.hero__title {
  width: min(66.8vw, calc(1009.78 * var(--k)));
  margin: calc(99 * var(--k)) 0 0;
  text-align: center;
  line-height: calc(.64 * var(--hero-fs));
  font-weight: 400;
}

.hero__display {
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--hero-fs);
  letter-spacing: -.02em;
}

/* El «30» va algo más grande que el resto de la línea */
.hero__big {
  font-size: 1.22em;
}

.hero__accent {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(48px, 7.937vw, calc(120 * var(--k)));
  letter-spacing: -.02em;
}

.is-faded {
  color: var(--ink-50);
}

/* Invitación a bajar */
.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--k));
  /* Pegado casi al borde inferior del viewport (el hero mide el 80 % de la pantalla) */
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(-10 * var(--k));
  margin: 0 auto;
  width: fit-content;
  font-family: var(--serif);
  font-size: calc(24 * var(--k));
  line-height: 1;
  letter-spacing: .03em;
  color: var(--green);
  white-space: nowrap;
  /* --cta-o lo escribe el JS al hacer scroll: baja a 0 y el enlace desaparece (también para el teclado) */
  opacity: var(--cta-o, 1);
  transition: opacity .25s ease, visibility 0s;
}

.hero__cta:hover {
  opacity: calc(var(--cta-o, 1) * .65);
}

.hero__cta.is-gone {
  visibility: hidden;
  pointer-events: none;
}

.hero__cta .hand {
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: calc(22 * var(--k));
  line-height: 1;
  letter-spacing: 0;
}

/* ── Intro: cortina verde con el logo que sube hasta la barra de navegación ──
   Todo cuelga de html.has-intro (lo pone un script en el <head> y lo quita el
   JS al terminar). Sin JS, o con «reducir movimiento», nada de esto existe.   */
.curtain,
.curtain-logo {
  display: none;
}

.has-intro {
  overflow: hidden;
}

/* la cortina cubre todo y no se puede hacer scroll */
.has-intro .curtain,
.has-intro .curtain-logo {
  display: block;
}

.curtain {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 100;
  height: calc(100lvh + 9vh);
  /* sobra por abajo para el borde curvo */
  background: var(--green);
  border-radius: 0 0 50% 50% / 0 0 9vh 9vh;
  pointer-events: none;
}

/* Logo blanco centrado; el JS lo reposiciona hasta el hueco del logo del menú */
.curtain-logo {
  position: fixed;
  z-index: 101;
  left: 50%;
  top: 50%;
  width: calc(250 * var(--k));
  translate: -50% -50%;
  pointer-events: none;
}

.curtain-logo img {
  display: block;
  width: 100%;
  height: auto;
}

/* La copia verde se revela por debajo del borde de la cortina, a la vez que
   asoma el fondo crema: el logo cambia de color justo al salir de la cortina. */
.curtain-logo .cl-green {
  position: absolute;
  inset: 0;
  clip-path: inset(100% 0 0 0);
}

/* Al empezar, el logo se «rellena» como una cortina que sube: su silueta, muy tenue (.cl-ghost), se va
   llenando de abajo arriba con el logo crema. Sin fill-mode «forwards» para que, al terminar, mande el
   clip-path que escribe el JS durante el viaje. */
.curtain-logo .cl-ghost {
  position: absolute;
  inset: 0;
  opacity: .2;
  animation: cl-ghost .35s .75s ease both;
}

.curtain-logo .cl-cream {
  animation: cl-fill .8s .1s cubic-bezier(.6, 0, .25, 1) backwards;
}

@keyframes cl-fill {
  from {
    clip-path: inset(100% 0 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes cl-ghost {
  from {
    opacity: .2;
  }

  to {
    opacity: 0;
  }
}

/* Mientras dura la intro, el menú espera: el logo real aparece cuando aterriza
   el viajero, y el resto del menú se funde justo después. */
.site-nav,
.header-actions {
  transition: opacity .8s ease .1s;
}

.has-intro .site-nav,
.has-intro .header-actions {
  opacity: 0;
}

.has-intro .site-logo img {
  opacity: 0;
}

/* ── Selector de idioma, hamburguesa y menú móvil (solo ≤ 900 px) ─────────────── */
.nav-lang,
.nav-burger,
.menu {
  display: none;
}

.nav-lang,
.nav-burger {
  transition: opacity .8s ease .1s;
}

.has-intro .nav-lang,
.has-intro .nav-burger {
  opacity: 0;
}

.nav-lang {
  position: relative;
}

.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 4px;
  border: 0;
  background: none;
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1;
  letter-spacing: .03em;
  color: color-mix(in srgb, var(--green) 55%, var(--cream));   /* el verde de marca al 55 % */
  cursor: pointer;
  transition: color .25s ease;
}

.lang__btn:hover {
  color: var(--green);
}

.lang__btn svg {
  width: 12px;
  height: 12px;
  transition: rotate .3s cubic-bezier(.2, .8, .2, 1);
}

.lang__btn[aria-expanded="true"] svg {
  rotate: 180deg;
}

.lang__list {
  position: absolute;
  left: 0;
  top: calc(100% + 4px);
  z-index: 5;
  min-width: 176px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid rgba(43, 41, 39, .14);
  border-radius: 16px;
  background: var(--cream);
  box-shadow: 0 18px 38px -16px rgba(14, 43, 25, .45);
  color: var(--charcoal);
  font-family: var(--sans);
  font-size: 14px;
  opacity: 0;
  translate: 0 -6px;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .25s ease, translate .35s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .35s;
}

.lang__list.is-open {
  opacity: 1;
  translate: 0 0;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.lang__list a {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 10px 12px;
  border-radius: 11px;
  transition: background-color .2s ease;
}

.lang__list a:hover,
.lang__list a:focus-visible {
  background: rgba(40, 96, 48, .06);
}

.lang__list a[aria-current="true"] {
  background: rgba(40, 96, 48, .09);
}

.lang__list small {
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.nav-burger {
  width: 44px;
  height: 44px;
  margin-right: -9px;
  padding: 0;
  place-items: center;
  border: 0;
  background: none;
  color: var(--green);
  cursor: pointer;
}

.nav-burger svg {
  width: 26px;
  height: 18px;
}

/* Menú a pantalla completa: verde #286030, texto blanco */
.menu {
  position: fixed;
  inset: 0;
  width: 100vw;
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0;
  padding: 0 32px 32px;
  border: 0;
  background: #286030;
  color: #fff;
  overflow: hidden;
}

.menu::backdrop {
  background: #286030;
}

.menu[open] {
  display: flex;
  flex-direction: column;
  animation: menu-in .45s cubic-bezier(.2, .8, .2, 1);
}

.menu.is-closing {
  animation: menu-out .26s ease forwards;
}

/* Aparición «líquida»: el JS anima un clip-path ondulado que brota del icono del menú (y vuelve a él
   al cerrar), así que se apagan el fundido propio y el fondo del backdrop, que no se recorta. */
.menu.liquid[open],
.menu.liquid.is-closing {
  animation: none;
}

.menu.liquid::backdrop {
  background: transparent;
}

@keyframes menu-in {
  from {
    opacity: 0;
    translate: 0 -12px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes menu-out {
  to {
    opacity: 0;
    translate: 0 -8px;
  }
}

@keyframes menu-rise {
  from {
    opacity: 0;
    translate: 0 18px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

.menu__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  flex: 0 0 auto;
  height: 120px;
}

.menu__bar .nav-lang {
  display: block;
  justify-self: start;
}

.nav-lang--light .lang__btn {
  font-size: 22px;
  color: rgba(255, 255, 255, .6);
}

.nav-lang--light .lang__btn:hover {
  color: #fff;
}

.menu__logo img {
  display: block;
  width: 106px;
  height: auto;
}

.menu__close {
  display: grid;
  place-items: center;
  justify-self: end;
  width: 44px;
  height: 44px;
  margin-right: -9px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
}

.menu__close svg {
  width: 26px;
  height: 26px;
}

.menu__links {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
}

.menu__links a {
  width: fit-content;
  font-family: var(--serif);
  font-size: 32px;
  line-height: 35px;
  letter-spacing: .03em;
  color: #fff;
  transition: opacity .25s ease;
}

.menu__links a:hover {
  opacity: .7;
}

.menu__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  height: 51px;
  border: 1px solid #fff;
  border-radius: 99px;
  font-family: var(--serif);
  font-size: 24px;
  line-height: 1;
  letter-spacing: .03em;
  color: #fff;
  transition: background-color .25s ease, color .25s ease;
}

.menu__cta:hover {
  background: #fff;
  color: #286030;
}

/* Los enlaces y el botón entran en cascada al abrir */
.menu[open]:not(.is-closing) .menu__links a,
.menu[open]:not(.is-closing) .menu__cta {
  animation: menu-rise .65s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(140ms + var(--n, 0) * 75ms);
}

@media (min-width:901px) {
  .menu {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .menu[open],
  .menu[open] .menu__links a,
  .menu[open] .menu__cta {
    animation: none;
  }
}

/* Cada palabra del titular es un inline-block para poder animarla por separado */
.wd {
  display: inline-block;
}

/* ══════════════════════════════════════════════════════════════════════════
   6 · HISTORIA — manifiesto con relleno al scroll + dos columnas + CTA
   ══════════════════════════════════════════════════════════════════════════ */
.intro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(56px, 8.13vw, calc(123 * var(--k)));
  padding: calc(56 * var(--k)) var(--gutter);
}

/* Ramas de olivo: ancladas SIEMPRE a los laterales del viewport.
   Los desplazamientos verticales son los del diseño, relativos a esta sección.

   `--py` lo escribe el JS en cada fotograma: es el parallax. Va en la
   propiedad `translate` —no en `transform`— para que se componga ANTES que el
   `rotate` del balanceo y ambos efectos no se interfieran. */
.branch {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
  user-select: none;
  /* --ex: entrada lateral de la intro (px de diseño, 0 en reposo) */
  translate: calc(var(--ex, 0) * var(--k)) calc(var(--py, 0) * 1px);
}

.branch--left {
  left: calc(50% - 50vw);
  top: calc(-466 * var(--k));
  width: calc(445 * var(--k));
  transform-origin: 0% 20%;
}

.branch--right {
  right: calc(50% - 50vw);
  top: calc(-123 * var(--k));
  width: calc(481 * var(--k));
  transform-origin: 100% 20%;
}

.manifesto {
  position: relative;
  z-index: 1;
  width: min(100%, calc(789 * var(--k)));
  font-family: var(--serif);
  font-size: clamp(28px, 3.57vw, calc(54 * var(--k)));
  line-height: 1.25;
  text-align: center;
  /* El texto de Figma termina con un párrafo vacío: añade una línea de aire */
  padding-bottom: 1.25em;
}

/* Cada palabra interpola de gris a tinta según el progreso de scroll (--t) */
.manifesto .w {
  color: var(--grey-soft);
  color: color-mix(in srgb, var(--ink) calc(var(--t, 1) * 100%), var(--grey-soft));
}

/* Texto de apertura: una sola columna centrada. Son tres párrafos cortos y, en una landing, un
   único hilo de lectura (arriba → abajo) se consume mejor que dos columnas. text-wrap: balance
   reparte las líneas de cada párrafo para que no queden palabras sueltas. */
.intro__copy {
  position: relative;
  z-index: 1;
  width: min(100%, calc(540 * var(--k)));
  margin-inline: auto;
  font-size: calc(18 * var(--k));
  line-height: 1.42;
  text-align: center;
  text-wrap: balance;
}

.intro__copy p+p {
  margin-top: 1.42em;
}

/* ── «Un saludo de Bruno»: el botón reproduce el audio y se transforma ───────────
   Estado en <html data-voice="idle|playing|paused"> (lo escribe el JS). Al sonar aparecen unas
   barras de ecualizador a la izquierda, el icono pasa de ▶ a ❚❚ y un anillo marca el progreso. */
.pill--media {
  position: relative;
  z-index: 1;
  height: calc(59 * var(--k));
  padding-left: calc(20 * var(--k));
  padding-right: calc(12 * var(--k));
}

.play {
  --ic: #18441E;
  --vp: 0;
  position: relative;
  display: block;
  flex: 0 0 auto;
  width: calc(33 * var(--k));
  height: calc(33 * var(--k));
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.pill:hover .play {
  --ic: var(--cream);
}

.play svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.play .bg {
  fill: color-mix(in srgb, var(--ic) 20%, transparent);
  transition: fill .25s ease;
}

.play .ring {
  fill: none;
  stroke: var(--ic);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: calc((1 - var(--vp, 0)) * 100);
  transform: rotate(-90deg);
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transition: opacity .35s ease, stroke .25s ease;
}

.play .tri,
.play .pau {
  fill: var(--ic);
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity .28s ease, transform .4s cubic-bezier(.2, .8, .2, 1), fill .25s ease;
}

.play .pau {
  opacity: 0;
  transform: scale(.55);
}

[data-voice="playing"] .play .tri {
  opacity: 0;
  transform: scale(.55);
}

[data-voice="playing"] .play .pau {
  opacity: 1;
  transform: scale(1);
}

[data-voice="playing"] .play .ring,
[data-voice="paused"] .play .ring {
  opacity: 1;
}

/* Ecualizador: ocupa 0 de ancho en reposo (el margen negativo absorbe el gap del botón) */
.eq {
  display: flex;
  align-items: center;
  gap: calc(3 * var(--k));
  height: calc(18 * var(--k));
  width: 0;
  margin-left: calc(-12 * var(--k));
  overflow: hidden;
  opacity: 0;
  transition: width .55s cubic-bezier(.2, .8, .2, 1), margin .55s cubic-bezier(.2, .8, .2, 1), opacity .35s ease;
}

[data-voice="playing"] .pill--media .eq {
  width: calc(21 * var(--k));
  margin-left: 0;
  opacity: 1;
}

.eq i {
  flex: 0 0 auto;
  width: calc(3 * var(--k));
  height: 100%;
  border-radius: 99px;
  background: currentColor;
  transform: scaleY(.3);
  animation: eq 1.15s ease-in-out infinite;
  animation-play-state: paused;
}

[data-voice="playing"] .eq i {
  animation-play-state: running;
}

.eq i:nth-child(2) { animation-delay: -.45s; }
.eq i:nth-child(3) { animation-delay: -.85s; }
.eq i:nth-child(4) { animation-delay: -.25s; }

@keyframes eq {
  0%, 100% { transform: scaleY(.25); }
  50% { transform: scaleY(1); }
}

/* ── Apariciones al entrar en pantalla ───────────────────────────────────────────
   Mismo lenguaje que el titular del hero: cada palabra sube .35em saliendo de un desenfoque, con la
   curva easeOutCubic y 120 ms entre palabras. Solo existen si el JS está activo y no se pide
   «reducir movimiento» (la clase rv-ready la pone el JS): sin ellas todo se ve directamente.
   El estado oculto (rv-ready) y las transiciones (rv-on, unos ms después) van por separado para que
   los elementos no se «desvanezcan» al ocultarse la primera vez. */
.rv-on .carta__title .wd,
.rv-on .timeline__lead .wd,
.rv-on .visit__heading h2 .wd,
.rv-on .option h3 .wd {
  transition: opacity .85s cubic-bezier(.215, .61, .355, 1), translate .85s cubic-bezier(.215, .61, .355, 1), filter .85s cubic-bezier(.215, .61, .355, 1);
}

.rv-on .carta__title .wd,
.rv-on .timeline__lead .wd,
.rv-on .visit__heading h2 .wd {
  transition-delay: calc(var(--i, 0) * 120ms);
}

/* Historia: primero el titular y la regla de años (dan contexto) y, al fijarse el bloque, llegan las fotos */
.rv-on .timeline__ruler {
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1) .45s, translate 1.1s cubic-bezier(.16, 1, .3, 1) .45s;
}

.rv-ready .timeline__sticky:not(.is-in) .timeline__ruler {
  opacity: 0;
  translate: 0 calc(24 * var(--k));
}

.rv-ready .timeline__sticky:not(.is-in) .timeline__lead .wd,
.rv-ready .visit__heading h2:not(.is-in) .wd,
.rv-ready .carta__title:not(.is-in) .wd {
  opacity: 0;
  translate: 0 .35em;
  filter: blur(8px);
}

/* Destacados: primero el icono (sube, crece y se aclara), después su título palabra a palabra,
   y cada tarjeta entra 160 ms después de la anterior */
.rv-on .option img {
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1), translate 1.2s cubic-bezier(.16, 1, .3, 1), scale 1.1s cubic-bezier(.22, 1.35, .36, 1);   /* zoom-in con un leve rebote */
  transition-delay: calc(var(--n, 0) * 160ms);
}

.rv-ready .options__grid:not(.is-in) .option img {
  opacity: 0;
  translate: 0 calc(26 * var(--k));
  scale: .45;
}

.rv-on .option h3 .wd {
  transition-delay: calc(var(--n, 0) * 160ms + 300ms + var(--i, 0) * 80ms);
}

.rv-ready .options__grid:not(.is-in) .option h3 .wd {
  opacity: 0;
  translate: 0 .3em;
  filter: blur(6px);
}

.rv-on .options__note {
  transition: opacity .9s cubic-bezier(.215, .61, .355, 1) .15s, translate .9s cubic-bezier(.16, 1, .3, 1) .15s;
}

.rv-ready .options__note:not(.is-in) {
  opacity: 0;
  translate: 0 calc(14 * var(--k));
}

/* Reproductor flotante: aparece al bajar el scroll mientras el audio está sonando o en pausa,
   para poder pausarlo o reanudarlo sin volver al botón. Mismo lenguaje que el resto de píldoras. */
.voice {
  position: fixed;
  left: 50%;
  bottom: max(14px, calc(22 * var(--k)));
  z-index: 80;
  display: flex;
  align-items: center;
  gap: calc(14 * var(--k));
  width: min(calc(100vw - 24px), calc(430 * var(--k)));
  padding: calc(9 * var(--k)) calc(10 * var(--k)) calc(9 * var(--k)) calc(9 * var(--k));
  border: 1px solid var(--charcoal);
  border-radius: 99px;
  background: rgba(255, 252, 243, .94);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 34px -14px rgba(14, 43, 25, .4);
  color: var(--charcoal);
  translate: -50% calc(28 * var(--k));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .4s ease, translate .65s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .65s;
}

.voice.is-on {
  translate: -50% 0;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.has-intro .voice,
html.modal-open .voice {
  display: none;
}

.voice .play {
  width: max(38px, calc(42 * var(--k)));
  height: max(38px, calc(42 * var(--k)));
}

.voice__body {
  flex: 1 1 auto;
  min-width: 0;
}

.voice__title {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: max(19px, calc(22 * var(--k)));
  line-height: 1.05;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.voice__row {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--k));
  margin-top: calc(5 * var(--k));
}

.voice__time {
  flex: 0 0 auto;
  font-size: max(10.5px, calc(11 * var(--k)));
  letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
  opacity: .7;
}

.voice__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: max(32px, calc(34 * var(--k)));
  height: max(32px, calc(34 * var(--k)));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--charcoal);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

.voice__close:hover {
  background: var(--green);
  color: var(--cream);
}

.voice__close svg {
  width: 11px;
  height: 11px;
}

/* Barra de progreso (también sirve para saltar a otro punto) */
.voice__seek {
  --vp: 0;
  -webkit-appearance: none;
  appearance: none;
  flex: 1 1 auto;
  min-width: 0;
  height: 16px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}

.voice__seek::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(to right, var(--green) calc(var(--vp) * 100%), rgba(43, 41, 39, .18) 0);
}

.voice__seek::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 12px;
  height: 12px;
  margin-top: -4.5px;
  border: 0;
  border-radius: 50%;
  background: var(--charcoal);
  box-shadow: 0 0 0 3px rgba(255, 252, 243, .9);
  transition: transform .2s ease;
}

.voice__seek:hover::-webkit-slider-thumb {
  transform: scale(1.25);
}

.voice__seek::-moz-range-track {
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(to right, var(--green) calc(var(--vp) * 100%), rgba(43, 41, 39, .18) 0);
}

.voice__seek::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border: 0;
  border-radius: 50%;
  background: var(--charcoal);
  box-shadow: 0 0 0 3px rgba(255, 252, 243, .9);
}

@media (prefers-reduced-motion: reduce) {
  .eq i { animation: none; transform: scaleY(.6); }
  .eq, .voice, .play .tri, .play .pau, .play .ring { transition-duration: .01ms; transition-delay: 0s; }
}

/* ══════════════════════════════════════════════════════════════════════════
   7 · LÍNEA DE TIEMPO — 6 fotos que se apilan con el scroll
   ══════════════════════════════════════════════════════════════════════════ */
.timeline {
  position: relative;
  z-index: 1;
}

/* Sin JS la sección es un bloque normal con la pila ya montada */
.timeline__sticky {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Separación de 64 entre el texto, la pila de fotos y la regla (Figma). El
 grupo mide 300 + 744.4 + 250 = 1294.4 más los dos huecos; cuando el ancho no
 da para tanto, el hueco se reduce solo y nada queda fuera del viewport. */
  gap: clamp(2px, calc((100vw - 1294.4 * var(--k) - 48px) / 2), calc(64 * var(--k)));
  padding: calc(120 * var(--k)) var(--gutter);
}

.js .timeline {
  height: 290svh;
}

.js .timeline__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  padding-block: 0;
}

.timeline__lead {
  display: grid;
  place-items: center;
  width: calc(300 * var(--k));
  flex: 0 0 auto;
  padding: calc(10 * var(--k));
}

.timeline__lead h2 {
  width: calc(242 * var(--k));
  font-weight: 400;
  font-family: var(--serif);
  font-size: clamp(32px, 2.78vw, calc(42 * var(--k)));
  line-height: 1.12;
  text-align: left;
}

/* Escenario de la pila: el grupo de 744.4 × 651.5 del diseño, limitado por el alto */
.timeline__stage {
  position: relative;
  flex: 0 0 auto;
  width: min(calc(744.385 * var(--k)), 86vw, 88svh);
  aspect-ratio: 744.385 / 651.5;
}

/* ── Pila de fotos: HUECOS FIJOS ───────────────────────────────────────────────────
   Cada <figure class="shot"> es un hueco con posición, tamaño y giro definidos por el diseño:
 --cx / --cy  centro del hueco (% del escenario)      --w   ancho (% del escenario)
 --ar         proporción del hueco (ancho / alto)      --r   giro en grados
   La foto que se suba se AJUSTA al hueco con object-fit (por defecto «contain»: se ve entera, sin
   recortar nada, tenga el tamaño o la proporción que tenga). Así, cambiar un archivo nunca mueve ni
   deforma la composición. No hay sombras en CSS: las llevan las propias imágenes (PNG con
   transparencia). Si una foto debe llenar el hueco recortándose, basta añadirle --fit:cover. */
.shot {
  --p: 1;
  /* progreso de entrada (0 → 1) */
  --cx: 50;
  --cy: 50;
  --w: 60;
  --r: 0;
  --ar: 1.45;
  position: absolute;
  left: calc(var(--cx) * 1%);
  top: calc(var(--cy) * 1%);
  width: calc(var(--w) * 1%);
  aspect-ratio: var(--ar);
  margin: 0;
  z-index: var(--i, 0);
  translate: -50% calc(-50% + (1 - var(--p)) * 24%);
  rotate: calc(var(--r) * var(--p) * 1deg);
  scale: calc(.9 + .1 * var(--p));
  opacity: var(--p);
}

.shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: var(--fit, contain);
}

/* Regla de años */
.timeline__ruler {
  --p: 0;
  position: relative;
  flex: 0 0 auto;
  width: calc(250 * var(--k));
  height: min(calc(365 * var(--k)), 44svh);
}

.timeline__ruler .year {
  position: absolute;
  left: 0;
  right: 0;
  font-size: calc(32 * var(--k));
  line-height: 1.25;
  text-align: center;
}

.timeline__ruler .year--start {
  top: 0;
  opacity: calc(1 - .5 * var(--p));
}

.timeline__ruler .year--end {
  bottom: 0;
  opacity: calc(.45 + .55 * var(--p));
}

.timeline__ruler .tick {
  position: absolute;
  top: var(--t);
  left: 50%;
  width: calc(19.305 * var(--k));
  height: 1px;
  border-radius: 1px;
  background: var(--rule);
  translate: -50% 0;
  transition: background-color .35s ease, width .35s ease;
}

.timeline__ruler .tick.is-past {
  background: var(--rule-on);
  width: calc(25 * var(--k));
}

/* Marcador que viaja de 1996 a 2026 */
.timeline__ruler .head {
  position: absolute;
  left: 50%;
  top: calc(18.63% + var(--p) * 59.18%);
  width: calc(38.61 * var(--k));
  height: calc(3 * var(--k));
  border-radius: 99px;
  background: var(--rule-on);
  translate: -50% -50%;
}

/* ══════════════════════════════════════════════════════════════════════════
   8 · CARTA
   ══════════════════════════════════════════════════════════════════════════ */
.carta {
  position: relative;
  z-index: 1;
  margin-top: clamp(32px, calc(80 * var(--k)), 120px);   /* respiro tras la última foto de la historia */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(40px, 4.56vw, calc(69 * var(--k)));
  padding: calc(56 * var(--k)) var(--gutter);
}

/* Ramas de la carta: ancladas a los laterales del viewport, con viento y parallax como las del hero.
   El contenido pasa por encima (position + z-index) porque las ramas son absolutas. */
.carta > :not(.branch) {
  position: relative;
  z-index: 1;
}

.branch--carta-l {
  left: calc(50% - 50vw);
  top: calc(150 * var(--k));
  width: calc(330 * var(--k));
  transform-origin: 0% 20%;
}

.branch--carta-r {
  right: calc(50% - 50vw);
  top: calc(-70 * var(--k));
  width: calc(387 * var(--k));
  transform-origin: 100% 20%;
}

.br-m {
  display: none;
}

.carta__title {
  width: 100%;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 5.42vw, calc(82 * var(--k)));
  line-height: 1.25;
  text-align: center;
}

.carta__body {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 4.43vw, calc(67 * var(--k)));
  width: 100%;
}

.carta__ticket {
  flex: 0 0 auto;
  width: calc(451.028 * var(--k));
  aspect-ratio: 451.028 / 557.867;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* El PNG ya lleva la sombra y los bordes transparentes, así que se muestra ENTERO (contain, con su
   proporción real: antes se recortaba a la caja de Figma y se perdía una esquina). Gira -15.1° como en el diseño. */
.carta__ticket {
  position: relative;
}

/* Pista flotante: pequeña, oscura y translúcida, a un lado del cursor. Solo con puntero fino. */
.ticket__hint {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 11px 6px 9px;
  border-radius: 99px;
  background: rgba(32, 33, 29, .78);
  color: var(--cream);
  font-size: 12px;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  scale: .92;
  transform: translate(var(--hx, 0px), var(--hy, 0px));
  transition: opacity .25s ease, scale .25s ease, transform .12s ease-out;
}

.ticket__hint.is-on {
  opacity: 1;
  scale: 1;
}

.ticket__hint svg {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
}

@media (hover: none) {
  .ticket__hint {
    display: none;
  }
}

.ticket__sheet {
  position: relative;
  width: 80%;
  aspect-ratio: 1109 / 1440;
  rotate: -15.1deg;
}

.ticket__sheet img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Se puede escribir y tachar sobre la comanda: un canvas del mismo tamaño que el PNG, recortado
   a la silueta del papel (así no se pinta sobre la sombra ni el fondo). El cursor es un lápiz
   (la punta, en el punto 3 29). Solo con ratón o lápiz digital; el dedo sigue haciendo scroll. */
.ticket__ink {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  clip-path: var(--clip, polygon(14.9% 6.2%, 96% 12.5%, 89.8% 98.6%, 4% 91.3%));
  touch-action: pan-y;   /* el scroll vertical con el dedo sigue funcionando; los trazos horizontales dibujan */
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M3 29l1.5-6.5L22 5l5 5L9.5 27.5z' fill='%23f2c14e' stroke='%2320211d' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M22 5l2.2-2.2a1.8 1.8 0 012.5 0l2.5 2.5a1.8 1.8 0 010 2.5L27 10z' fill='%23e58b8b' stroke='%2320211d' stroke-width='1.4'/%3E%3Cpath d='M3 29l1.5-6.5 5 5z' fill='%23f6e3c0' stroke='%2320211d' stroke-width='1.4' stroke-linejoin='round'/%3E%3Cpath d='M3 29l.9-3.9 3 3z' fill='%2320211d'/%3E%3C/svg%3E") 3 29, crosshair;
}

.carta__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(36px, 4.23vw, calc(64 * var(--k)));
  width: calc(384 * var(--k));
  max-width: 100%;
  flex: 0 0 auto;
}

.carta__text p {
  max-width: calc(370.148 * var(--k));
  font-size: calc(18 * var(--k));
  line-height: 1.42;
  color: var(--charcoal);
}

.carta__text p+p {
  margin-top: 1.42em;
}

.carta__links {
  display: flex;
  align-items: center;
  gap: calc(18 * var(--k));
  flex-wrap: wrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   9 · GALERÍA HORIZONTAL — el scroll vertical desplaza el collage de lado a lado
   ══════════════════════════════════════════════════════════════════════════ */
.hgallery {
  /* Unidad propia de la galería: = --k por encima de 1512, y se reduce de forma
 proporcional por debajo (con un mínimo para que en móvil no sea diminuta). */
  --g: clamp(.5px, calc(100vw / 1512), 2.4px);
  position: relative;
  z-index: 1;
}

/* Sin JS o con «reducir movimiento»: una banda con scroll horizontal normal */
.hgallery__sticky {
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: calc(56 * var(--g));
  scrollbar-width: thin;
  scrollbar-color: rgba(32, 33, 29, .25) transparent;
}

.hgallery__track {
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--tw) * var(--g));
  height: calc(var(--th) * var(--g));
  margin-inline: min(var(--gutter), calc(40 * var(--g))) var(--gutter);   /* la primera foto, más cerca del borde izquierdo */
}

.hg {
  position: absolute;
  left: calc(var(--l) * var(--g));
  top: calc(var(--t) * var(--g));
  width: calc(var(--w) * var(--g));
  height: calc(var(--h) * var(--g));
  margin: 0;
  overflow: hidden;
  z-index: var(--z, 1);
  background: var(--placeholder);
  translate: var(--dx, 0px) 0;
  /* desplazamiento propio de cada capa (parallax) */
}

.hg img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Carga de imágenes: mientras no han llegado, un fondo con grano tenue (solo en la galería de platos, donde
   se cargan al acercarse); al llegar, la foto aparece desde un leve desenfoque. El JS pone .ld-on en <html> y
   .is-loaded en cada contenedor: sin JS las imágenes se ven siempre. */
.ld-on .hg img,
.ld-on .shot img,
.ld-on .ticket__sheet img {
  opacity: 0;
  filter: blur(14px);
  transition: opacity .9s ease, filter 1.2s ease;
}

.ld-on .is-loaded img {
  opacity: 1;
  filter: none;
}

.ld-on .hg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .17 0 0 0 0 .15 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .55;
  animation: ld-grain .9s steps(4) infinite;
  transition: opacity .7s ease;
}

.ld-on .hg.is-loaded::after {
  opacity: 0;
  animation: none;
}

@keyframes ld-grain {
  0% { background-position: 0 0; }
  25% { background-position: -30px 20px; }
  50% { background-position: 20px -25px; }
  75% { background-position: -15px -10px; }
  100% { background-position: 0 0; }
}

/* Modo fijado (lo activa el JS): la sección es más alta que la pantalla, el
   contenido queda pegado y el scroll vertical se convierte en desplazamiento
   horizontal del carril. Cada foto se mueve un poco distinto dentro de su marco
   (parallax interno) para dar profundidad. */
.hg-on {
  height: calc(100svh + var(--travel, 0px));
  /* El carril va centrado en una pantalla entera, lo que deja un hueco en blanco sobre las fotos:
 se recorta casi a la mitad tirando de la galería hacia arriba (el recorrido de scroll no cambia). */
  margin-top: calc(max(0px, (100svh - var(--th) * var(--g)) / 2) * -.45);
}

.hg-on .hgallery__sticky {
  position: sticky;
  top: 0;
  height: 100svh;
  padding-block: 0;
  overflow: hidden;
}

.hg-on .hgallery__track {
  translate: var(--tx, 0px) 0;
  will-change: translate;
}

.hg-on .hg {
  will-change: translate;
}

/* Móvil: las seis fotos en DOS filas (las tres primeras arriba, las otras tres abajo, desplazadas),
   a una escala mayor, para que el carril llene la pantalla y no queden grandes vacíos en blanco. */
@media (max-width:900px) {
  :root {
    --th: 790;
    --tw: 1290;
  }

  .hgallery {
    --g: min(calc(100vw / 500), calc(100svh / 950));
  }

  .hg {
    left: calc(var(--l2) * var(--g));
    top: calc(var(--t2) * var(--g));
  }
}

.hg-on .hg img {
  scale: 1.12;
  translate: var(--ix, 0px) 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   10 · OPCIONES DIETÉTICAS
   ══════════════════════════════════════════════════════════════════════════ */
/* El espacio en blanco por encima del bloque = el hueco que deja la galería fijada
   bajo sus fotos (--ws) + el relleno superior propio (82). Se recorta un tercio
   de ese total tirando del bloque hacia arriba (margen negativo) y se devuelve
   el mismo valor por debajo (relleno inferior), de modo que la altura total de
   la página no cambia. */
.options {
  --g: clamp(.5px, calc(100vw / 1512), 2.4px);
  /* misma unidad que la galería */
  --ws: calc(56 * var(--g));
  /* hueco bajo la galería (modo banda) */
  --cut: min(var(--ws), calc((var(--ws) + 82 * var(--k)) / 3));
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(48px, 5.3vw, calc(80 * var(--k)));
  margin-top: calc(var(--cut) * -1);
  padding: calc(82 * var(--k)) var(--gutter) calc(36 * var(--k) + var(--cut));
}

/* Con la galería fijada, bajo las fotos queda media pantalla menos media altura del carril */
.hg-on+.options {
  --ws: max(0px, calc((100svh - var(--th) * var(--g)) / 2));
}

@media (max-width:900px) {
  .options {
    --g: min(calc(100vw / 500), calc(100svh / 950));   /* misma unidad que la galería */
  }
}

.options__grid {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(28px, 4.233vw, calc(64 * var(--k)));
  width: 100%;
  flex-wrap: wrap;
}

.option {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(18 * var(--k));
  width: calc(300 * var(--k));
}

.option img {
  width: calc(125.456 * var(--k));
  height: calc(125.456 * var(--k));
}

.option h3 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 2.78vw, calc(42 * var(--k)));
  line-height: .92;
  text-align: center;
}

.options__note {
  width: min(100%, calc(924 * var(--k)));
  font-size: calc(18 * var(--k));
  line-height: 1.42;
  text-align: center;
}

/* ══════════════════════════════════════════════════════════════════════════
   11 · RESEÑAS — fila inferior del bloque «Visítanos»
   ══════════════════════════════════════════════════════════════════════════ */
.reviews__list {
  display: flex;
  align-items: flex-start;
  min-height: calc(94 * var(--k));
  gap: calc(32 * var(--k));
  width: 100%;
}

.review {
  display: flex;
  flex-direction: column;
  flex: 1 0 0;
  min-width: 0;
  padding: calc(12 * var(--k)) calc(16 * var(--k));
  border: 1px solid var(--charcoal);
  border-radius: calc(24 * var(--k));
  color: var(--charcoal);
  transition: background-color .25s ease, padding .4s cubic-bezier(.2, .8, .2, 1), border-radius .4s cubic-bezier(.2, .8, .2, 1);
}

/* Hover: el fondo se mantiene y la tarjeta se «redondea» en píldora, con el contenido sangrado hacia dentro */
.review:hover,
.review:focus-visible {
  padding-inline: calc(37 * var(--k));
  border-radius: calc(48 * var(--k));
  background: rgba(43, 41, 39, .04);
}

.review__head {
  display: flex;
  align-items: center;
  gap: calc(6 * var(--k));
  padding-bottom: calc(16 * var(--k));
}

.review__head img {
  width: calc(18 * var(--k));
  height: calc(18 * var(--k));
  border-radius: 50%;
  object-fit: cover;
}

.review__source {
  flex: 1 1 auto;
  min-width: 0;
  font-size: calc(14 * var(--k));
  line-height: calc(20 * var(--k));
}

.review__head .ext {
  width: calc(18 * var(--k));
  height: calc(18 * var(--k));
  flex: 0 0 auto;
  border-radius: 0;
}

.review__score {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--k));
}

.review__score b {
  font-weight: 400;
  font-size: calc(20 * var(--k));
  line-height: calc(26 * var(--k));
}

.review__score span {
  font-size: calc(12 * var(--k));
  line-height: calc(16 * var(--k));
}

/* ══════════════════════════════════════════════════════════════════════════
   12 · VISÍTANOS + MAPA
   ══════════════════════════════════════════════════════════════════════════ */
.visit {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(32 * var(--k));
  padding: calc(28 * var(--k)) var(--gutter) 0;
}

/* Las dos filas —datos + mapa, y las dos reseñas— comparten rejilla:
   dos columnas iguales de 581.5 con 32 de separación. */
.visit__row {
  display: flex;
  align-items: center;
  gap: calc(32 * var(--k));
  width: 100%;
  max-width: calc(1195 * var(--k));
}

.visit__info {
  display: flex;
  flex-direction: column;
  gap: calc(56 * var(--k));
  flex: 1 0 0;
  min-width: 0;
}

.visit__block {
  display: flex;
  flex-direction: column;
  gap: calc(42 * var(--k));
}

.visit__heading {
  display: flex;
  flex-direction: column;
  gap: calc(15 * var(--k));
}

.visit__heading h2 {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(44px, 4.23vw, calc(64 * var(--k)));
  line-height: 1;
}

.visit__address {
  font-size: calc(20 * var(--k));
  line-height: 1.2;
  color: var(--ink-40);
}

.visit__facts {
  display: flex;
  align-items: flex-start;
  gap: clamp(40px, 6.48vw, calc(98 * var(--k)));
}

.visit__facts>div {
  display: flex;
  flex-direction: column;
  gap: calc(12 * var(--k));
}

.visit__facts dt {
  font-size: calc(12 * var(--k));
  line-height: .84;
  letter-spacing: .118em;
  text-transform: uppercase;
}

.visit__facts dd {
  margin: 0;
  font-size: calc(18 * var(--k));
  line-height: calc(24.516 * var(--k));
}

.visit__actions {
  display: flex;
  align-items: center;
  gap: calc(12 * var(--k));
  flex-wrap: wrap;
}

.visit__actions .pill {
  border-color: var(--ink);
  color: var(--ink);
}

.visit__actions .pill:hover {
  color: var(--cream);
}

/* Mapa propio e interactivo: un SVG dibujado con datos de OpenStreetMap (tools/map/build-map.py).
   No depende de ningún servicio externo, así que no puede romperse ni tardar.
   Se arrastra, se hace zoom (botones, doble clic, Ctrl/⌘ + rueda, pellizco) y se recentra.
   Blanco y negro en reposo; a color al pasar el ratón, arrastrarlo o enfocarlo con el teclado. */
.visit__map {
  position: relative;
  flex: 1 0 0;
  min-width: 0;
  aspect-ratio: 1636 / 1308;
  border-radius: calc(32 * var(--k));
  overflow: hidden;
  background: #F2EEE3;
  /* = color del terreno: sin parpadeo al cargar */
  cursor: grab;
  touch-action: pan-x pan-y;
  /* un dedo hace scroll de la página; dos dedos mueven el mapa */
  -webkit-user-select: none;
  user-select: none;
}

.visit__map.is-dragging {
  cursor: grabbing;
}

.visit__map:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

.map-art {
  position: absolute;
  inset: 0;
  filter: grayscale(1) contrast(1.05);
  transition: filter .55s cubic-bezier(.2, .7, .3, 1);
}

.visit__map:hover .map-art,
.visit__map:focus-within .map-art,
.visit__map.is-dragging .map-art {
  filter: grayscale(0);
}

@media (hover:none) {
  .map-art {
    filter: none;
  }
}

/* en táctil no hay «hover»: se ve a color */
.map-view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Rótulos: texto SVG con tamaño fijo en pantalla (.s lo contra-escala el JS con --iz) y halo del color del terreno.
   Cada nivel de zoom tiene su propio juego (.lod); sin JS se muestra el del zoom inicial. */
.map-labels .lod {
  display: none;
}

.map-labels .lod[data-z="1"] {
  display: inline;
}

.map-labels .s {
  transform: scale(var(--iz, 1));
}

.map-labels text {
  font-family: var(--sans);
  paint-order: stroke;
  stroke: #F2EEE3;
  stroke-width: 7px;
  stroke-linejoin: round;
  pointer-events: none;
}

.map-labels .road,
.map-labels .rio,
.map-labels .park,
.map-labels .place {
  text-anchor: middle;
}

.map-labels .road {
  font-size: 30px;
  fill: #8C8678;
  letter-spacing: .02em;
}

.map-labels .rio {
  font-size: 28px;
  fill: #6E9FB8;
  font-style: italic;
  letter-spacing: .03em;
}

.map-labels .poi {
  font-size: 31px;
  fill: #6A655A;
}

.map-labels .park {
  font-size: 31px;
  fill: #6F8F5A;
  font-style: italic;
  letter-spacing: .04em;
}

.map-labels .dot {
  fill: #8F897B;
  stroke: #F2EEE3;
  stroke-width: 3px;
}

/* Ciudades y distritos (zoom lejano): en mayúsculas y espaciadas las más importantes */
.map-labels .place {
  fill: #7A7466;
  font-weight: 500;
  letter-spacing: .03em;
}

.map-labels .place.r0 {
  font-size: 40px;
  fill: #4F4B42;
  font-weight: 600;
  letter-spacing: .16em;
}

.map-labels .place.r1 {
  font-size: 34px;
  fill: #5E5A4F;
  font-weight: 600;
  letter-spacing: .12em;
}

.map-labels .place.r2 {
  font-size: 30px;
}

.map-labels .place.r3 {
  font-size: 27px;
  fill: #8C8678;
}

/* Pin rojo sobre L'Olivo (el JS lo coloca sobre el punto exacto; queda en rojo aunque el mapa esté en gris) */
.map-pin {
  position: absolute;
  left: calc(var(--px, 50) * 1%);
  top: calc(var(--py, 50) * 1%);
  z-index: 2;
  width: calc(30 * var(--k));
  translate: -50% -100%;
  pointer-events: none;
  filter: drop-shadow(0 calc(3 * var(--k)) calc(3 * var(--k)) rgba(0, 0, 0, .32));
}

.map-pin svg {
  display: block;
  width: 100%;
  height: auto;
}

.map-me {
  transition: opacity .25s ease;
  position: absolute;
  left: calc(100% + 8 * var(--k));
  top: calc(2 * var(--k));
  font-size: max(13px, calc(16 * var(--k)));
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  text-shadow: 0 0 3px #F2EEE3, 0 0 3px #F2EEE3, 0 0 6px #F2EEE3;
}

/* A escala de ciudad el pin es un punto y su rótulo estorba: se esconde */
.visit__map.is-far .map-me {
  opacity: 0;
}

/* Controles */
.map-ui {
  position: absolute;
  right: calc(14 * var(--k));
  top: calc(14 * var(--k));
  z-index: 4;
  display: none;
  /* sin JS no hay nada que controlar */
  flex-direction: column;
  gap: calc(6 * var(--k));
}

.js .map-ui {
  display: flex;
}

.map-ui button {
  display: grid;
  place-items: center;
  width: max(34px, calc(38 * var(--k)));
  height: max(34px, calc(38 * var(--k)));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--cream);
  color: var(--charcoal);
  box-shadow: 0 2px 8px rgba(14, 43, 25, .22), 0 0 0 1px rgba(43, 41, 39, .1);
  font: 400 max(20px, calc(22 * var(--k)))/1 var(--sans);
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, opacity .2s ease;
}

.map-ui button:hover {
  background: var(--green);
  color: var(--cream);
}

.map-ui button[disabled] {
  opacity: .4;
  pointer-events: none;
}

.map-ui button[hidden] {
  display: none;
}

.map-ui svg {
  width: 55%;
  height: 55%;
}

.map-hint {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  translate: -50% -50%;
  padding: calc(10 * var(--k)) calc(18 * var(--k));
  border-radius: 99px;
  background: rgba(14, 43, 25, .8);
  color: var(--cream);
  font-size: max(12px, calc(13 * var(--k)));
  letter-spacing: .04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}

.map-hint.is-on {
  opacity: 1;
}

/* Enlace a Google Maps + atribución de OpenStreetMap (obligatoria por la licencia) */
.map-open {
  position: absolute;
  left: calc(14 * var(--k));
  bottom: calc(14 * var(--k));
  z-index: 4;
  padding: calc(8 * var(--k)) calc(14 * var(--k));
  border-radius: 99px;
  background: var(--cream);
  box-shadow: 0 2px 8px rgba(14, 43, 25, .18), 0 0 0 1px rgba(43, 41, 39, .08);
  color: var(--charcoal);
  font-size: max(10.5px, calc(11.5 * var(--k)));
  letter-spacing: .11em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background-color .25s ease, color .25s ease;
}

.map-open:hover {
  background: var(--green);
  color: var(--cream);
}

.map-attr {
  position: absolute;
  right: calc(14 * var(--k));
  bottom: calc(14 * var(--k));
  /* separado de la esquina redondeada: allí se recortaría */
  z-index: 4;
  padding: calc(3 * var(--k)) calc(9 * var(--k));
  border-radius: 99px;
  background: rgba(255, 252, 243, .86);
  color: rgba(43, 41, 39, .75);
  font-size: max(10px, calc(10.5 * var(--k)));
}

.map-attr:hover {
  color: var(--ink);
  text-decoration: underline;
}

/* ══════════════════════════════════════════════════════════════════════════
   13 · FOOTER
   ══════════════════════════════════════════════════════════════════════════ */
.site-footer {
  position: relative;
  z-index: 1;
  padding:
    clamp(240px, 38.3vw, calc(579 * var(--k))) calc(130 * var(--k)) calc(61 * var(--k)) calc(120 * var(--k));
  color: var(--cream);
  overflow: hidden;
  isolation: isolate;
  --fa: calc(90 * var(--k));
  /* cuánto sube la imagen respecto al footer */
}

/* Capa de la imagen: sobresale --fa por arriba y el JS la hace subir de +--fa a 0
   mientras el footer entra (--fp: 0 → 1). Sin JS queda quieta (--fp = 1). */
.site-footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: calc(var(--fa) * -1);
  z-index: -2;
  background: url("../img/footer/footer.webp") center / cover no-repeat;
  translate: 0 calc((1 - var(--fp, 1)) * var(--fa));
  will-change: translate;
}

/* Degradados de fusión: fijos al borde del footer, para que la imagen siga
   fundiéndose con el crema de arriba y el verde de abajo mientras se mueve. */
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--cream) 0%, rgba(255, 252, 243, 0) 50%),
    linear-gradient(180deg, rgba(14, 43, 25, 0) 50%, var(--green-deep) 100%);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: calc(30 * var(--k));
  width: 100%;
}

.site-footer__top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: calc(32 * var(--k));
}

.site-footer__brand {
  width: calc(246 * var(--k));
  display: flex;
  justify-content: flex-start;
}

/* a ras del borde izquierdo, como la línea y el copyright */
.site-footer__brand img {
  width: calc(177 * var(--k));
  height: auto;
}

.site-footer__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: calc(23 * var(--k));
  width: calc(323 * var(--k));
}

.social {
  display: grid;
  place-items: center;
  width: calc(28 * var(--k));
  height: calc(28 * var(--k));
  padding: calc(4 * var(--k));
  border-radius: calc(8 * var(--k));
  background: rgba(255, 255, 255, .2);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  transition: background-color .25s ease;
}

.social:hover {
  background: rgba(255, 255, 255, .35);
}

.social img {
  width: calc(10.52 * var(--k));
  height: calc(18.02 * var(--k));
}

.site-footer__links {
  display: flex;
  align-items: center;
  gap: calc(22 * var(--k));
  font-size: calc(13 * var(--k));
  line-height: 1.2;
  white-space: nowrap;
}

.site-footer__links a,
.site-footer__links button {
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  cursor: pointer;
  transition: opacity .25s ease;
}

.site-footer__links a:hover,
.site-footer__links button:hover {
  opacity: .7;
}

.site-footer__links button:focus-visible {
  outline-color: var(--cream);
}

.site-footer__rule {
  height: 1px;
  background: rgba(255, 255, 255, .6);
}

.site-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--k));
  font-size: calc(13 * var(--k));
  line-height: 1.2;
  color: rgba(255, 252, 243, .6);
}

.site-footer__bottom a {
  color: inherit;
  transition: color .2s ease;
}

.site-footer__bottom a:hover {
  color: var(--cream);
}

.site-footer__bottom u {
  text-decoration-thickness: from-font;
  text-underline-offset: 2px;
}

/* ══════════════════════════════════════════════════════════════════════════
   13b · MODALES LEGALES (<dialog> nativo: foco atrapado, Esc, capa de fondo)
   ══════════════════════════════════════════════════════════════════════════ */
html.modal-open {
  overflow: hidden;
}

.modal {
  width: min(calc(760 * var(--k)), calc(100vw - 32px));
  max-width: none;
  max-height: min(calc(100svh - 48px), calc(820 * var(--k)));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: max(18px, calc(28 * var(--k)));
  background: var(--cream);
  color: var(--ink);
  overflow: hidden;
  box-shadow: 0 40px 120px -30px rgba(14, 43, 25, .55), 0 0 0 1px rgba(32, 33, 29, .08);
}

.modal[open] {
  display: flex;
  flex-direction: column;
  animation: modal-in .38s cubic-bezier(.2, .8, .2, 1);
}

.modal::backdrop {
  background: rgba(14, 43, 25, .46);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  animation: modal-fade .3s ease;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.985);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes modal-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(20px, 3vw, calc(28 * var(--k))) clamp(20px, 4vw, calc(36 * var(--k))) clamp(14px, 2vw, calc(20 * var(--k)));
  border-bottom: 1px solid rgba(32, 33, 29, .1);
}

.modal__title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(30px, 3vw, calc(40 * var(--k)));
  line-height: 1;
}

.modal__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--charcoal);
  border-radius: 50%;
  background: none;
  color: var(--charcoal);
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}

.modal__close:hover {
  background: var(--green);
  color: var(--cream);
}

.modal__close svg {
  width: 14px;
  height: 14px;
}

.modal__body {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(18px, 2.4vw, calc(26 * var(--k))) clamp(20px, 4vw, calc(36 * var(--k))) clamp(26px, 3vw, calc(40 * var(--k)));
  font-size: max(15px, calc(16 * var(--k)));
  line-height: 1.6;
  color: var(--charcoal);
}

.modal__body> :first-child {
  margin-top: 0;
}

.modal__meta {
  font-size: max(12px, calc(13 * var(--k)));
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.modal__body h3 {
  margin: 1.7em 0 .35em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: max(21px, calc(25 * var(--k)));
  line-height: 1.15;
  color: var(--ink);
}

.modal__body p,
.modal__body ul {
  margin: .6em 0 0;
}

.modal__body ul {
  padding-left: 1.2em;
}

.modal__body li+li {
  margin-top: .5em;
}

.modal__body a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.modal__body a:hover {
  opacity: .75;
}

/* Modal de reserva */
.modal--sm {
  width: min(calc(560 * var(--k)), calc(100vw - 32px));
}

.modal__lead {
  margin: 0;
  font-size: max(15px, calc(16 * var(--k)));
  line-height: 1.5;
  color: var(--charcoal);
}

.reserve-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: max(12px, calc(14 * var(--k)));
  margin-top: max(18px, calc(22 * var(--k)));
}

.modal__body .reserve-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: max(16px, calc(20 * var(--k)));
  padding: max(18px, calc(22 * var(--k)));
  border: 1px solid var(--charcoal);
  border-radius: max(16px, calc(22 * var(--k)));
  color: var(--charcoal);
  text-decoration: none;
  transition: background-color .25s ease, color .25s ease;
}

.reserve-option__icon {
  display: grid;
  place-items: center;
  width: max(46px, calc(54 * var(--k)));
  height: max(46px, calc(54 * var(--k)));
  border-radius: 50%;
  background: rgba(40, 96, 48, .1);
  color: var(--green);
  transition: background-color .25s ease, color .25s ease;
}

.reserve-option__icon svg {
  width: 48%;
  height: 48%;
}

.reserve-option__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.reserve-option strong {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: max(26px, calc(32 * var(--k)));
  line-height: 1;
}

.reserve-option small {
  font-size: max(13px, calc(14 * var(--k)));
  line-height: 1.3;
  opacity: .72;
}

.modal__body .reserve-option:hover,
.modal__body .reserve-option:focus-visible {
  background: var(--green);
  color: var(--cream);
  opacity: 1;
}

.reserve-option:hover .reserve-option__icon,
.reserve-option:focus-visible .reserve-option__icon {
  background: rgba(255, 252, 243, .16);
  color: var(--cream);
}

@media (max-width:520px) {
  .reserve-options {
    grid-template-columns: 1fr;
  }

  .modal__body .reserve-option {
    flex-direction: row;
    align-items: center;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   14 · ADAPTACIÓN
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width:1150px) {
  .timeline__sticky {
    flex-direction: column;
    gap: 3svh;
  }

  .timeline__lead {
    width: auto;
  }

  .timeline__lead h2 {
    width: auto;
    max-width: 380px;
  }

  /* Más grande que antes: el escenario puede ser algo más ancho que la pantalla (los bordes se
 recortan) y las fotos, al ser % del escenario, crecen con él conservando la superposición. */
  .timeline__stage {
    width: min(104vw, 52svh);
  }

  .timeline__ruler {
    width: min(60vw, 250px);
    height: min(18svh, 200px);
  }

  .timeline__ruler .year {
    font-size: 28px;
  }

  .js .timeline {
    height: 260svh;
  }

  .options__grid {
    gap: clamp(24px, 3.2vw, 48px);
    flex-wrap: nowrap;
  }

  .option {
    flex: 0 1 300px;
    min-width: 0;
  }
}

@media (max-width:980px) {
  .visit__row {
    flex-direction: column;
    align-items: stretch;
    gap: 32px;
  }

  .visit__info,
  .visit__map {
    width: 100%;
    flex: 0 0 auto;
  }

  .review {
    flex: 0 0 auto;
  }

  .reviews__list {
    min-height: 0;
  }

  .carta__body {
    flex-direction: column;
    gap: 48px;
  }

  .carta__ticket {
    width: min(360px, 80%);
  }

  .carta__text {
    width: min(520px, 100%);
    align-items: center;
    text-align: center;
  }

  .carta__links {
    justify-content: center;
  }
}

@media (max-width:900px) {

  /* Nav móvil: [idioma] [logo centrado] [hamburguesa], con fondo transparente arriba del todo.
 Al hacer scroll (y reaparecer al subir) recupera el degradado crema para que se lea sobre el contenido. */
  .site-header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 0;
    padding: 14px 22px;
    background: transparent;
    transition: translate .45s cubic-bezier(.2, .7, .3, 1), background-color .3s ease;
  }

  .site-header.is-scrolled {
    background: linear-gradient(to bottom, var(--cream) 0%, var(--cream) 70%, rgba(255, 252, 243, 0) 100%);
  }

  .site-nav,
  .header-actions {
    display: none;
  }

  .site-logo {
    grid-column: 2;
  }

  .site-logo img {
    width: 113px;
  }

  /* Logo de la intro más pequeño: parte de menos escala respecto al del menú, así se ve más nítido */
  .curtain-logo {
    width: 150px;
  }

  /* Regla de años en HORIZONTAL: 1996 a la izquierda, 2026 a la derecha y el avance de izquierda a derecha */
  .timeline__ruler {
    width: min(86vw, 340px);
    height: 56px;
  }

  .timeline__ruler .year {
    top: 50%;
    bottom: auto;
    translate: 0 -50%;
  }

  .timeline__ruler .year--start {
    right: auto;
    text-align: left;
  }

  .timeline__ruler .year--end {
    left: auto;
    text-align: right;
  }

  .timeline__ruler .tick {
    top: 50%;
    left: var(--t);
    width: 1px;
    height: 14px;
    translate: -50% -50%;
    transition: background-color .35s ease, height .35s ease;
  }

  .timeline__ruler .tick.is-past {
    width: 1px;
    height: 22px;
  }

  .timeline__ruler .head {
    top: 50%;
    left: calc(18.63% + var(--p) * 59.18%);
    width: 3px;
    height: 34px;
  }

  .br-m {
    display: inline;
  }

  /* Titular de la historia y bloque «Encuéntranos» centrados */
  .timeline__lead {
    width: 100%;
    padding-inline: 24px;
  }

  .timeline__lead h2 {
    width: auto;
    max-width: 380px;
    text-align: center;
  }

  .visit__info,
  .visit__block,
  .visit__heading {
    align-items: center;
    text-align: center;
  }

  .visit__facts {
    justify-content: center;
  }

  .visit__actions {
    justify-content: center;
  }

  .timeline__stage {
    width: min(122vw, 62svh);
  }

  .site-header > .nav-lang {
    display: block;
    grid-column: 1;
    justify-self: start;
  }

  .nav-burger {
    display: grid;
    grid-column: 3;
    justify-self: end;
  }

  .hero {
    min-height: 80svh;
    --cta-gap: clamp(48px, 10vw, 127px);
    padding-top: clamp(48px, 10vw, 120px);
    padding-bottom: calc(clamp(48px, 10vw, 120px) + var(--cta-gap) + var(--cta-h));
  }

  /* Al envolver en más de dos líneas, la interlínea cerrada del diseño
 haría chocar los renglones: aquí se devuelve el aire. */
  .hero__title {
    width: 92vw;
    line-height: 1.02;
  }

  /* Las ramas se retiran hacia fuera y bajan de intensidad */
  .branch--left {
    top: calc(-330 * var(--k));
    width: clamp(130px, 26vw, 445px);
    margin-left: -9vw;
    opacity: .5;
  }

  .branch--carta-l {
    top: calc(60 * var(--k));
    width: clamp(110px, 24vw, 370px);
    margin-left: -7vw;
    opacity: .5;
  }

  .branch--carta-r {
    top: calc(-40 * var(--k));
    width: clamp(108px, 23.4vw, 387px);
    margin-right: -7vw;
    opacity: .5;
  }

  .branch--right {
    top: calc(-90 * var(--k));
    width: clamp(140px, 28vw, 481px);
    margin-right: -9vw;
    opacity: .5;
  }

  .options__grid {
    flex-direction: column;
    align-items: center;
    gap: 48px;
  }

  .option {
    width: min(320px, 100%);
    flex: 0 0 auto;
  }

  .js .timeline {
    height: 230svh;
  }
}

@media (max-width:720px) {
  .intro {
    padding-block: 40px;
  }

  .intro {
    padding-inline: 32px;
  }

  .manifesto {
    font-size: 32px;
  }

  .timeline__ruler .year {
    font-size: 24px;
  }

  .site-footer {
    padding-inline: clamp(20px, 6vw, 120px);
    padding-bottom: 40px;
  }

  .site-footer__top {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .site-footer__brand,
  .site-footer__meta {
    width: auto;
    align-items: center;
  }

  .site-footer__bottom {
    flex-direction: column;
    text-align: center;
    gap: 10px;
    font-size: 12px;
  }

  .site-footer__links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 16px;
    font-size: 12px;
  }
}

@media (max-width:420px) {
  .site-nav {
    gap: 18px;
    font-size: 18px;
  }

  .intro__copy,
  .options__note,
  .carta__text p {
    font-size: 16px;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PÁGINAS INTERIORES — legales (privacidad, cookies, aviso legal) y 404
   Comparten cabecera, menú, modal de reservas y pie con la home (las genera tools/build.py).
   ══════════════════════════════════════════════════════════════════════════ */
.lg-page {
  position: relative;
  z-index: 1;
  padding: clamp(24px, 4vw, calc(56 * var(--k))) var(--gutter) clamp(56px, 7vw, calc(110 * var(--k)));
}

.lg {
  width: min(100%, 760px);
  margin: 0 auto;
}

.lg-back {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 14px;
  letter-spacing: .06em;
  color: var(--green);
}

.lg-back:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

.lg h1 {
  margin: 0 0 8px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(40px, 7vw, 64px);
  line-height: 1.02;
  color: var(--ink);
}

.lg-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--charcoal);
}

.lg-body .modal__meta {
  margin: 0 0 8px;
  font-size: 13px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-40);
}

.lg-body h3 {
  margin: 1.8em 0 .35em;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 26px;
  line-height: 1.15;
  color: var(--ink);
}

.lg-body p,
.lg-body ul {
  margin: .6em 0 0;
}

.lg-body ul {
  padding-left: 1.2em;
}

.lg-body li + li {
  margin-top: .5em;
}

.lg-body a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 404: la comanda «rayable» a la izquierda, el texto a la derecha, ramas con viento y aceitunas que caen con el ratón */
.nf-page {
  position: relative;
  z-index: 1;
}

.nf {
  position: relative;
  padding: clamp(16px, 4vw, 56px) var(--gutter) clamp(48px, 8vw, 120px);
}

.nf__branch {
  position: absolute;
  height: auto;
  pointer-events: none;
  user-select: none;
  /* --py: parallax de scroll (lo escribe main.js según data-depth): las ramas se rezagan más que el centro */
  translate: 0 calc(var(--py, 0) * 1px);
}

.nf__branch--l {
  left: calc(50% - 50vw);
  bottom: 4%;
  width: clamp(110px, 19vw, 300px);
  transform-origin: 0% 20%;
}

.nf__branch--r {
  right: calc(50% - 50vw);
  top: 0;
  width: clamp(110px, 22vw, 340px);
  transform-origin: 100% 20%;
}

.nf__body {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 6vw, 110px);
  min-height: min(74svh, 760px);
}

.nf__ticket {
  position: relative;
  flex: 0 0 auto;
  width: clamp(230px, 27vw, 470px);
  translate: 0 calc(var(--py, 0) * 1px);
}

.nf__sheet {
  width: 100%;
  aspect-ratio: 1101 / 1428;
  rotate: 0deg;
  --clip: polygon(14% 6.8%, 93.5% 11.9%, 91% 96%, 6% 91%);
}

.nf__copy {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  max-width: 560px;
  text-align: center;
  translate: 0 calc(var(--py, 0) * 1px);
}

.nf__title {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(36px, 4.4vw, 68px);
  line-height: 1.02;
  color: var(--green);
}

.nf__text {
  margin: 0;
  font-size: 16px;
  line-height: 1.55;
  color: var(--charcoal);
}

.nf__btn {
  margin-top: 8px;
}

@media (max-width: 760px) {
  .nf__body {
    flex-direction: column;
    min-height: 0;
    padding-top: 8px;
  }

  .nf__ticket {
    width: min(64vw, 300px);
  }
}

/* Aceitunas: capa a TODO el alto del documento (el JS la pasa al <body> y fija su alto); añade <img class="nf-olive"> */
.nf-olives {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 40;
  overflow: hidden;
  pointer-events: none;
}

.nf-olive {
  position: absolute;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform, opacity;
}

/* Flecha ↗ de los botones: al pasar el cursor gira 45° y queda recta (→), un guiño visual al hover */
.arr {
  display: inline-block;
  transition: rotate .4s cubic-bezier(.22, 1.1, .36, 1);
}

a:hover .arr,
a:focus-visible .arr {
  rotate: 45deg;
}

@media (prefers-reduced-motion: reduce) {
  .arr { transition: none; }
}