/* (01) Los espacios — horizontal editorial.

   ── Cuándo esta sección corre en horizontal ──────────────────────────
   El criterio es UNO SOLO y vive en breakpoints.js como window.REGO_MQ:

       (any-hover: hover) and (any-pointer: fine) and (min-width: 640px)

   Toda media query de este archivo lo repite palabra por palabra, y
   hscroll.js activa el pin con la misma cadena leída de REGO_MQ. Si alguna
   vez hay que cambiarlo, se cambia en breakpoints.js y se replica acá igual:
   en cuanto CSS y JS discrepan, el track se maqueta para un eje y el pin se
   crea para el otro.

   La pregunta principal es el dispositivo, no el ancho. `any-hover`/
   `any-pointer` -- nunca `hover`/`pointer` a secas, que describen el
   señalador PRIMARIO y hacen que una laptop Windows táctil se declare
   teléfono. El piso de 640px no está para decidir si es PC: está para
   atajar el único caso que el puntero no distingue, un teléfono con un
   ratón Bluetooth. Ver breakpoints.js para la medición que fijó ese valor.

   Replaces the old "Studios REGO" card run. Mechanics and composition follow
   the brief; two of its colour decisions did not survive contact with a
   contrast checker and are noted at --hs-accent below.

   Every token here is declared on .hscroll, never on :root — the names in the
   brief (--bg, --fg, --accent) would have repainted the whole landing, and the
   rest of this project already namespaces its variables per section, so these
   carry an --hs- prefix as well. */
.hscroll {
  /* Interpolated by hscroll.js across four stops; these are stop 0 so the
     section paints correctly before the script runs. */
  --hs-bg: #0e0e0f;
  --hs-fg: #eae7e0;

  /* Deepest background in the ramp, held constant. Used where something needs
     to read as a hole punched through the accent regardless of where the
     background currently sits. */
  --hs-bg-deep: #0e0e0f;

  /* The brief specifies this gold and asserts it clears 4.5:1 against every
     --bg in the ramp. It does not: against the final light stop (#E9E4DA) it
     measures 1.74:1, because both colours are light. So the accent is used for
     fills only — bars, rules, the highlighter, the CTA plate — and never as
     text colour. Anything that has to be *read* uses --hs-fg, which is defined
     per stop against its own background and therefore cannot drift. */
  --hs-accent: #d4a857;

  /* Ink for text sitting on top of the accent. Fixed rather than inherited:
     --hs-fg is light for three of the four stops, and light-on-gold is
     1.78:1. This is 8.6:1 on the accent at every stop. */
  --hs-on-accent: #14100c;

  /* Both are derived from the foreground rather than fixed, so they invert
     along with the ramp. A fixed white film is invisible once the background
     reaches the daylight stop — which is exactly where the reservation card
     lives, so the card would lose its container at the one moment it has to
     read as one. The rgba values are the fallback for engines without
     color-mix. */
  --hs-surface: rgba(255, 255, 255, 0.06);
  --hs-surface: color-mix(in srgb, currentColor 6%, transparent);
  --hs-line: rgba(127, 127, 127, 0.28);
  --hs-line: color-mix(in srgb, currentColor 24%, transparent);

  /* Ancho de la tarjeta de reserva de salón. Es un token y no un valor suelto
     porque el ancho del último beat se DERIVA de él: si cambia aquí, la
     tarjeta deja de quedar centrada al final del recorrido. Ver .beat--salon. */
  --hs-card-w: clamp(300px, 30vw, 440px);

  --hs-serif: var(--vc-serif, "Zodiak", Georgia, serif);
  --hs-sans: var(--ov-font-display, "Satoshi", sans-serif);
  --hs-mono: var(--rs-mono, "JetBrains Mono", ui-monospace, monospace);

  position: relative;
  z-index: 4;
  width: 100%;
  overflow: hidden;
  background-color: var(--hs-bg);
  color: var(--hs-fg);
  font-family: var(--hs-sans);
  /* No transition on background-color. It looks harmless, but the ramp
     rewrites --hs-bg on every scroll frame, so a transition restarts before
     it can ever finish and the computed colour stays pinned to whatever it
     was on the first frame — the section renders permanently at stop 0 while
     the variable underneath it is updating correctly. The scrub already
     smooths the ramp; this only broke it. */
}

/* ── Background field ────────────────────────────────────────────────── */
.hscroll__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Contour lines — the relief of the hills around Bagua Grande, and the
   deepest-moving layer in the parallax stack. Inherits currentColor so it
   flips with the ramp instead of needing its own interpolation. */
.hscroll__topo {
  position: absolute;
  top: 0;
  left: 0;
  width: 220%;
  height: 100%;
  opacity: 0.1;
  color: var(--hs-fg);
}

/* ── Track ───────────────────────────────────────────────────────────── */
/* Mobile-first: the track is a plain block and every beat stacks. The
   horizontal layout is additive, inside the desktop query, so both the small
   screen and the reduced-motion case fall back to this without undoing
   anything. */
.hscroll__track {
  position: relative;
  z-index: 1;
  display: block;
  padding: clamp(3.5rem, 9vh, 6rem) 0;
}

.beat {
  position: relative;
  padding: 0 clamp(1.25rem, 6vw, 3rem);
  margin-bottom: clamp(3rem, 8vh, 5.5rem);
}
.beat:last-child { margin-bottom: 0; }

/* ── Type ────────────────────────────────────────────────────────────── */
/* Tipografía en .sec-eyebrow (style.css) — este era el tratamiento de
   referencia y ahora lo comparten las cinco secciones.

   Se le quita el opacity del conjunto: apagaba por igual las tres partes y,
   con el numeral ya en dorado, lo habría deslavado. La atenuación vive
   ahora en .sec-eyebrow span, que es la parte que debe ceder.

   El acento se ANULA aquí, y a propósito. --hs-accent es para rellenos, nunca
   para texto: contra el stop de luz de la rampa mide 1.74:1 (ver la nota en
   --hs-accent, arriba). Un numeral dorado se leería bien en el arranque
   nocturno y se borraría al llegar al crema — y en el layout apilado esta
   marca recorre la rampa entera. Así que en esta sección el numeral se
   distingue por peso y opacidad, no por color, que es lo único que sobrevive
   a un fondo que se mueve. */
.hs-eyebrow {
  --sec-accent: currentColor;
  margin: 0 0 1.5rem;
}

/* Block title. Solid on small screens — an outline at this size turns to mush
   once the strokes are only a couple of pixels apart. */
.beat__backdrop {
  margin: 0 0 1.5rem;
  font-family: var(--hs-serif);
  font-size: clamp(2.5rem, 12vw, 4rem);
  font-weight: 700;
  line-height: 0.9;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

.beat__subtitle {
  position: relative;
  margin: clamp(1.5rem, 4vh, 2.25rem) 0;
  font-family: var(--hs-serif);
  font-style: italic;
  font-size: clamp(1.2rem, 4.6vw, 1.35rem);
  line-height: 1.35;
}

/* Highlighter.

   The plate is a background gradient on the span itself, not an absolutely
   positioned pseudo-element. That distinction matters: this text wraps, and
   an absolute ::before resolves against a single inline fragment, so every
   line but one was left with no plate behind it — and since the text is inked
   near-black to sit on the gold, those lines rendered black on a near-black
   background and simply vanished. box-decoration-break gives each line
   fragment its own plate instead.

   The wipe rides on --hs-mark: 100% is shut, 0% is fully painted. It defaults
   to painted so the copy stays readable if the script never runs; hscroll.js
   sets it to 100% when it builds the reveal. */
.beat__subtitle .mark {
  --hs-mark: 0%;
  color: var(--hs-on-accent);
  font-style: normal;
  font-weight: 600;
  padding: 0 0.18em;
  background-image: linear-gradient(var(--hs-accent), var(--hs-accent));
  background-repeat: no-repeat;
  /* Sits on the baseline like a real marker — under the ascenders, not over
     them. */
  background-position: left bottom 0.02em;
  background-size: calc(100% - var(--hs-mark)) 0.92em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.beat__rule {
  display: block;
  width: 48px;
  height: 2px;
  margin-top: 1.25rem;
  background: var(--hs-accent);
  transform-origin: left center;
}

/* ── Photos ──────────────────────────────────────────────────────────── */
.hs-photo {
  position: relative;
  margin: 0 0 clamp(1.5rem, 4vh, 2.5rem);
  /* column-reverse, no column: el <figcaption> va PRIMERO en el DOM —que es
     lo correcto para lectores de pantalla— pero visualmente debe cerrar la
     figura, no encabezarla. Arriba chocaba contra el titular calado del beat
     ("HOSPEDAJE"), dos textos claros superpuestos en la misma banda, y el pie
     se perdía. Abajo cae sobre la foto, que le da fondo propio. */
  display: flex;
  flex-direction: column-reverse;
}

.hs-photo picture {
  display: block;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  /* The reveal wipes this open; see hscroll.js. */
}

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

.hs-label {
  /* Antes margin-bottom: ahora el pie va debajo, así que el aire va arriba. */
  margin-top: 10px;
  font-family: var(--hs-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  opacity: 0.6;
}

/* Duotone for the context shots, so heterogeneous material reads as one
   set. Product shots — the room, the terrace, the salon — stay full colour. */
.hs-photo--duo img { filter: grayscale(1) contrast(1.08); }
.hs-photo--duo picture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--hs-accent);
  mix-blend-mode: color;
  opacity: 0.35;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.hs-photo--duo:hover picture::after { opacity: 0; }

/* Editorial annotation mark on one restaurant frame. */
.hs-tick {
  display: block;
  width: 28px;
  height: 4px;
  margin-top: 10px;
  background: var(--hs-accent);
  transform-origin: left center;
}

/* Gestural stroke over the intro photo. */
.hs-stroke {
  position: absolute;
  inset: 12% 8% auto;
  width: 84%;
  height: auto;
  color: var(--hs-accent);
  pointer-events: none;
}

/* ── Intro marquees ──────────────────────────────────────────────────── */
.hs-marquee {
  margin-bottom: 2rem;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.hs-marquee__line {
  display: flex;
  width: max-content;
  font-family: var(--hs-serif);
  font-size: clamp(2.5rem, 14vw, 4rem);
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0.9;
}
.hs-marquee__line--a { color: var(--hs-accent); }
.hs-marquee__line--b { color: var(--hs-fg); opacity: 0.35; }

/* ── Reservation card ────────────────────────────────────────────────── */
.hs-card {
  padding: 28px;
  border: 1px solid var(--hs-line);
  border-radius: 14px;
  background: var(--hs-surface);
}

.hs-card__kicker {
  margin: 0 0 0.75rem;
  font-family: var(--hs-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0.6;
}

.hs-card__title {
  margin: 0 0 1.25rem;
  font-family: var(--hs-serif);
  font-size: clamp(1.5rem, 5vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.hs-card__data {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font-size: 14px;
  line-height: 1.6;
}
.hs-card__data li {
  padding: 0.6rem 0;
  border-top: 1px solid var(--hs-line);
  opacity: 0.8;
}

.hs-card__cta {
  display: block;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--hs-accent);
  color: var(--hs-on-accent);
  font-family: var(--hs-sans);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  text-decoration: none;
  /* 48px minimum touch target. */
  min-height: 48px;
  line-height: 20px;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.hs-card__cta:focus-visible {
  outline: 2px solid var(--hs-fg);
  outline-offset: 3px;
}

.hs-card__alt {
  /* block, no inline-block. En escritorio el CTA pasa a inline-block para que
     la píldora se ajuste a su texto en vez de cruzar la tarjeta entera; con
     este enlace también en inline, los dos caben en la misma línea en cuanto
     la tarjeta es ancha, y el enlace secundario terminaba de pie junto al
     botón principal como si fueran dos acciones del mismo rango. En bloque
     cae siempre debajo, que es su sitio. */
  display: block;
  width: fit-content;
  margin-top: 1rem;
  font-size: 13px;
  color: inherit;
  opacity: 0.7;
  text-decoration: underline;
  text-underline-offset: 4px;
}
.hs-card__alt:hover { opacity: 1; }

/* ── Progress rail ───────────────────────────────────────────────────── */
/* Not decoration: without a visible sense of how much is left, a pinned
   horizontal run reads as an unbounded hijack and people bail. */
.hscroll__progress {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 3vw, 1.5rem);
  padding: 0.85rem clamp(1.25rem, 6vw, 3rem);
  background: color-mix(in oklab, var(--hs-bg) 88%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hscroll__progress button {
  padding: 0.4rem 0;
  border: 0;
  background: none;
  color: var(--hs-fg);
  font-family: var(--hs-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0.4;
  transition: opacity 0.3s ease;
}
.hscroll__progress button:hover { opacity: 0.75; }
.hscroll__progress button:focus-visible {
  outline: 2px solid var(--hs-fg);
  outline-offset: 3px;
  opacity: 1;
}
/* The active state is carried by opacity and an accent underline rather than
   by accent text: the gold is unreadable on the light end of the ramp
   (1.74:1), while --hs-fg is contrast-safe at every stop by construction. */
.hscroll__progress button[aria-current="true"] {
  opacity: 1;
  box-shadow: inset 0 -2px 0 var(--hs-accent);
}

.hscroll__bar {
  flex: 1;
  height: 2px;
  background: var(--hs-line);
}
.hscroll__bar span {
  display: block;
  height: 100%;
  background: var(--hs-accent);
  transform: scaleX(0);
  transform-origin: left center;
}

/* No flight below the horizontal breakpoint or under reduced motion, so the
   strip that made room for it would just be dead space. */
.beat--lead { display: none; }
@media (any-hover: hover) and (any-pointer: fine) and (min-width: 640px) and (prefers-reduced-motion: no-preference) {
  .beat--lead { display: block; }
}

/* ── Small-screen rhythm ─────────────────────────────────────────────── */
/* The asymmetry of the desktop mosaic is kept by alternating widths and
   indents rather than by absolute positions. */
@media not all and (any-hover: hover) and (any-pointer: fine) and (min-width: 640px) {
  .hs-photo--h2,
  .hs-photo--r2,
  .hs-photo--s2 { width: 78%; margin-left: 22%; }
  .hs-photo--h3,
  .hs-photo--r1 { width: 88%; }
  .beat--intro .hs-photo { width: 100%; }
}

/* ── Desktop: the horizontal run ─────────────────────────────────────── */
/* Gated on reduced-motion as well as width, so the query matches the
   matchMedia condition in hscroll.js exactly — one source of truth for
   "is this section horizontal right now". */
@media (any-hover: hover) and (any-pointer: fine) and (min-width: 640px) and (prefers-reduced-motion: no-preference) {
  .hscroll { height: 100vh; }

  .hscroll__track {
    display: flex;
    /* Explícito, aunque sea el valor por defecto de flex: es la propiedad
       que garantiza que los beats no se apilen. Junto con width:max-content
       y el flex:none de abajo, el track no puede comprimirse ni envolver por
       angosta que quede la ventana. */
    flex-wrap: nowrap;
    align-items: stretch;
    width: max-content;
    height: 100vh;
    padding: 0;
    will-change: transform;
  }

  .beat {
    position: relative;
    flex: none;
    height: 100vh;
    padding: 0;
    margin: 0;
  }

  /* Anchos en anchos-de-viewport. Track total = 5.5 pantallas
     (100+90+115+115+130), de las que 4.5 son recorrido.

     La relación gesto:recorrido ya NO es 1:1: la fija `PACE` en hscroll.js,
     porque a 1:1 el contenido pasaba demasiado rápido para apreciarlo.

     Añadir ancho aquí alarga el recorrido y, por tanto, también el scroll —
     el pin se deriva de esta medida multiplicada por PACE— y además MUEVE la
     posición final de todo lo que venga después en el track. Ver la nota de
     .beat--salon, cuyo ancho está calculado justamente a partir de eso. */
  /* Exactly one screen: the width the finished cover image occupies as it is
     carried off. It no longer has to make room for the growth as well — that
     happens on the approach, before this pin opens — so the strip is only as
     long as the exit, and the intro beat's left edge meets the picture's
     right edge with nothing in between. */
  .beat--lead { width: 100vw; }
  .beat--intro { width: 90vw; }
  .beat--hospedaje { width: 115vw; }
  .beat--restaurante { width: 115vw; }

  /* Salón lleva cola: 105vw dejaban la tarjeta de reserva pegada al borde
     derecho justo cuando el recorrido se acaba, que es el peor sitio posible
     para lo único de la sección en lo que se puede hacer clic.

     El ancho sale de una cuenta, no del ojo. Al final del recorrido el track
     se ha desplazado toda su distancia, así que la posición en pantalla de la
     tarjeta queda fijada por lo que mide este beat:

       posición de la tarjeta dentro del track = 100+90+115+115 + 62 = 482vw
       desplazamiento total                    = (420 + W) - 100 = 320+W vw
       borde izquierdo en pantalla al final    = 482 - (320+W) = 162-W vw
       centro (la tarjeta mide ~30vw)          = 177-W vw

     Igualando ese centro al medio de la pantalla y despejando W:

         W = 112vw + (ancho de la tarjeta / 2)

     Y esa mitad NO es una constante en vw. --hs-card-w es un clamp con techo
     de 440px, así que en pantallas grandes la tarjeta deja de crecer con el
     viewport: a 1024px mide 30vw, pero a 1920px ya son 23vw y a 2560px, 17vw.
     Un ancho fijo —130vw— sólo acertaba en la resolución para la que se
     calculó y corría la tarjeta cada vez más a la izquierda cuanto mayor era
     la pantalla. Por eso el beat se calcula en vez de fijarse: así la tarjeta
     queda centrada en cualquier resolución.

     El espacio que queda detrás de ella no es relleno: es donde el recorrido
     aterriza. La sección ya tenía esa función en el beat de salida que se
     quitó; ahora la cumple sosteniendo la tarjeta. */
  .beat--salon { width: calc(112vw + var(--hs-card-w) / 2); }

  .beat--intro {
    display: grid;
    place-items: center;
    /* The marquee lines are width:max-content and carry their own drift, so
       without this they run out of the intro and collide with the outline
       title of the next beat — two layers of giant type on top of each
       other, which reads as a rendering fault rather than as depth. */
    overflow: hidden;
  }

  .hs-eyebrow {
    position: absolute;
    top: 8vh;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    white-space: nowrap;
  }

  .hs-marquee {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: grid;
    align-content: center;
    gap: 2vh;
    margin: 0;
    overflow: visible;
  }
  .hs-marquee__line { font-size: clamp(4rem, 9vw, 11rem); }

  .beat--intro .hs-photo {
    position: relative;
    z-index: 1;
    width: 38vw;
    margin: 0;
  }
  .beat--intro .hs-photo picture { height: auto; aspect-ratio: 16 / 10; }

  /* Outline backdrop, riding slower than the photographs — that difference is
     what puts it behind them in depth rather than merely behind them in
     z-order. The differential is small (0.82, so 0.18) on purpose: with the
     parallax now measured per beat it is bounded at roughly ±280px, which
     stays inside the slack its own block leaves it. A stronger one drifted
     the word into the next block. Set to 11vw for the same reason — the
     longest of the three, RESTAURANTE, needs to fit its beat with room to
     move. */
  .beat__backdrop {
    position: absolute;
    top: 20vh;
    /* Centred in its own beat (hscroll.js pairs this with xPercent: -50)
       rather than pinned near its left edge. Left-anchored, all of the slack
       sat on one side, so the parallax only had 4vw of room before the word
       reached back into the previous block; centred, each title has half the
       difference between its own width and its beat's on either side, which
       is more than the drift can use. */
    left: 50%;
    z-index: 0;
    margin: 0;
    font-size: 11vw;
    line-height: 0.85;
    color: transparent;
    -webkit-text-stroke: 1px var(--hs-fg);
    opacity: 0.28;
    white-space: nowrap;
  }

  .hs-photo {
    position: absolute;
    z-index: 1;
    margin: 0;
  }
  .hs-photo picture { height: calc(100% - 26px); }

  .beat__subtitle {
    position: absolute;
    z-index: 2;
    width: 22vw;
    margin: 0;
    font-size: clamp(1.4rem, 2.1vw, 2.2rem);
  }

  /* Hospedaje — the wide frame leads, then a small duotone low, the line, and
     a mid frame to close. Tops are deliberately uneven. */
  .hs-photo--h1 { left: 10vw; top: 12vh; width: 26vw; height: 60vh; }
  .hs-photo--h2 { left: 42vw; top: 56vh; width: 15vw; height: 32vh; }
  .beat--hospedaje .beat__subtitle { left: 62vw; top: 30vh; }
  .hs-photo--h3 { left: 90vw; top: 22vh; width: 21vw; height: 44vh; }

  /* Restaurante — same grammar, rhythm reversed: the line arrives before the
     large frame instead of after it. */
  .hs-photo--r1 { left: 8vw; top: 50vh; width: 17vw; height: 34vh; }
  .hs-photo--r2 { left: 30vw; top: 16vh; width: 14vw; height: 28vh; }
  .beat--restaurante .beat__subtitle { left: 49vw; top: 34vh; }
  .hs-photo--r3 { left: 78vw; top: 18vh; width: 30vw; height: 66vh; }

  /* Salón — the payoff, where the card appears. */
  .hs-photo--s1 { left: 8vw; top: 14vh; width: 28vw; height: 58vh; }
  .hs-photo--s2 { left: 41vw; top: 58vh; width: 16vw; height: 30vh; }

  .hs-card {
    position: absolute;
    z-index: 2;
    /* 24vw dejaba la tarjeta en ~245px a 1023px de ancho: el título partía en
       dos ("¿Organizas / algo?") y cada ítem de la lista se quebraba. El
       clamp la mantiene legible en pantallas chicas sin dejarla crecer hasta
       parecer un panel en monitores grandes.

       El valor vive en --hs-card-w, arriba: el ancho del último beat se
       calcula a partir de él.

       El centrado vertical va con top/bottom + margin-block:auto, y NO con
       transform: translateY(-50%). hscroll.js escribe transform —y también la
       propiedad translate— sobre esta tarjeta al revelarla, así que cualquier
       centrado apoyado en ellas lo pisa el primer fotograma de la animación.
       Con las dos anclas a 0 y una altura definida, el margen automático
       reparte el sobrante y centra sin tocar nada que GSAP vaya a sobrescribir. */
    left: 62vw;
    top: 0;
    bottom: 0;
    height: fit-content;
    margin-block: auto;
    width: var(--hs-card-w);
    padding: 34px 36px;
  }
  .hs-card__cta { display: inline-block; }

  .hscroll__progress {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  /* Only the track and the parallax layers are promoted. Promoting the eight
     photographs as well would hand the compositor eight large textures for no
     gain. */
  .hscroll__topo,
  .beat__backdrop,
  .hs-marquee__line { will-change: transform; }
}

/* ── Reduced motion ──────────────────────────────────────────────────── */
/* A pinned section with continuous lateral movement is the exact pattern that
   triggers vestibular discomfort, so this is a hard fallback rather than a
   softened version: no pin, no parallax, no drifting marquees. */
@media (prefers-reduced-motion: reduce) {
  .hs-marquee__line { transform: none !important; }
  .hs-photo picture { clip-path: none !important; }
  .hs-photo img { transform: none !important; }
  .beat__subtitle .mark { --hs-mark: 0% !important; }
  .hscroll__topo { display: none; }
  .hs-card__cta { transition: none; }
}

/* ── Approach, before the pin opens ──────────────────────────────────── */
/* This section's own first stop is near-black, and it enters the viewport a
   full screen before its pin engages. That left a hard black band creeping up
   from the bottom edge for 450px of scrolling — visible underneath the marquee
   strip, and starting well before the facade photograph even begins to grow.
   The order read backwards: the horizontal section announced itself in the
   darkest possible way, and only afterwards did the picture that is supposed
   to introduce it start to assemble.

   Holding the approach at the story's own background removes the seam
   entirely: the section arrives invisibly, the facade grows over it, and the
   switch to the real stop 0 happens at the moment the pin opens — by which
   point the facade is full-screen and covers it. The visitor never sees the
   change, only its result.

   hscroll.js clears the inline --hs-bg it would otherwise be holding, so this
   rule is what applies while the class is on, and it stops writing the ramp
   for the duration. */
.hscroll.is-approach {
  /* --st-light, the story panel's own starting colour. Only the first frame
     uses it: hscroll.js then syncs this variable to whatever .story actually
     computes to, every frame of the approach, because that panel is itself
     fading to near-black across the same stretch. A fixed value here was the
     first attempt and it reproduced the original bug with the colours
     swapped — a hard edge between a cream band and a darkening one. */
  --hs-bg: #efeae3;
  --hs-fg: #1a1714;
}

/* ── Título de la sección en móvil ───────────────────────────────────── */
/* Reemplaza al marquee, que a este ancho se sale de la pantalla. Vive fuera
   de toda animación: es tipografía quieta, para no volver a cargar el hilo
   principal en el formato donde menos margen hay. */
.hs-title-m { display: none; }

@media not all and (any-hover: hover) and (any-pointer: fine) and (min-width: 640px) {
  .hs-marquee { display: none; }

  .hs-title-m {
    display: grid;
    justify-items: start;
    margin: 0 0 clamp(1.75rem, 5vh, 2.5rem);
    font-family: "Clash Display", var(--hs-sans);
    font-weight: 600;
    font-size: clamp(2.5rem, 13.5vw, 4.25rem);
    line-height: 0.86;
    letter-spacing: -0.025em;
    text-transform: uppercase;
  }

  /* Filete corto sobre la primera línea: da comienzo al bloque y lo separa
     del borde superior sin gastar altura. */
  .hs-title-m::before {
    content: "";
    width: 2.75rem;
    height: 2px;
    margin-bottom: clamp(0.9rem, 2.5vh, 1.4rem);
    background: var(--hs-accent);
  }

  .hs-title-m__l1 { opacity: 0.55; }

  /* La palabra que carga el sentido, en el acento de la sección. */
  .hs-title-m__l2 { color: var(--hs-accent); }

  /* Tercera línea en contraste deliberado: serif itálica, minúscula y
     desplazada. Es lo que hace que el bloque se lea como un título compuesto
     y no como tres renglones del mismo tamaño. */
  .hs-title-m__l3 {
    margin-top: 0.12em;
    margin-left: 0.55em;
    font-family: var(--hs-serif);
    font-weight: 300;
    font-size: 0.82em;
    letter-spacing: -0.01em;
    text-transform: none;
  }
  .hs-title-m__l3 i { font-style: italic; }
  .hs-title-m__l3 b {
    color: var(--hs-accent);
    font-weight: inherit;
    font-style: normal;
  }
}

/* ── Subtítulo bajo la foto (escritorio) ─────────────────────────────── */
/* Espejo del título móvil de arriba. En una pantalla angosta el marquee no
   entra y .hs-title-m hace de título; acá el marquee sí entra y hace de
   título, así que el mismo texto baja a subtítulo bajo la foto.

   Mismo lenguaje visual — Clash Display en versal, la palabra que carga el
   sentido en el acento, la cola en serif itálica minúscula, filete de acento
   — pero en una línea y a escala de apoyo, no de titular. Se repiten tres
   declaraciones en vez de compartir el bloque con .hs-title-m a propósito:
   ese vive dentro de la media query de móvil y sacarlo de ahí para
   compartirlo tocaría un componente que ya está verificado. */
.hs-subtitle-d { display: none; }

@media (any-hover: hover) and (any-pointer: fine) and (min-width: 640px) {
  /* La foto era el unico hijo en flujo del beat, asi que como se repartian
     las filas implicitas daba igual. Con el subtitulo son dos, y por defecto
     las filas se estiran hasta llenar la pantalla: la foto queda centrada en
     la mitad de arriba y el subtitulo 250px mas abajo, suelto en medio de la
     nada. Empaquetarlas al centro deja que mande el margen del subtitulo.
     Con un solo hijo el resultado es identico al anterior, asi que esto no
     cambia nada donde el beat no lleva subtitulo. */
  .beat--intro { align-content: center; }

  .hs-subtitle-d {
    position: relative;
    /* Sobre el marquee, igual que la foto: si no, las dos líneas gigantes de
       atrás le pasan por encima. */
    z-index: 1;
    display: inline-flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.3em;
    margin: clamp(1.5rem, 3.4vh, 2.75rem) 0 0;
    font-family: "Clash Display", var(--hs-sans);
    font-weight: 600;
    font-size: clamp(1.35rem, 2.3vw, 2.35rem);
    line-height: 1;
    letter-spacing: -0.02em;
    text-transform: uppercase;
    white-space: nowrap;
  }

  /* Acá el filete va al costado, no encima: el bloque es una línea, y arriba
     ya está el borde inferior de la foto ocupando ese papel. */
  .hs-subtitle-d::before {
    content: "";
    align-self: center;
    width: clamp(1.75rem, 3vw, 3rem);
    height: 2px;
    margin-right: 0.45em;
    background: var(--hs-accent);
  }

  .hs-subtitle-d__q { opacity: 0.55; }
  .hs-subtitle-d__a { color: var(--hs-accent); }

  .hs-subtitle-d__t {
    font-family: var(--hs-serif);
    font-weight: 300;
    font-size: 0.92em;
    letter-spacing: -0.01em;
    text-transform: none;
  }
  .hs-subtitle-d__t i { font-style: italic; }
  .hs-subtitle-d__t b {
    color: var(--hs-accent);
    font-weight: inherit;
    font-style: normal;
  }
}