/* ═══════════════════════════════════════════════════
   FLOUXIA — hoja de estilo única
   Paleta, tipografía y ritmo del sitio cinematográfico
   ═══════════════════════════════════════════════════ */

:root {
  /* Color */
  --bg:        #000205;
  --deep:      #04101F;
  --blue:      #0B63FF;
  --cyan:      #22E8FF;
  --white:     #EAF2FF;
  /* Los grises van medidos contra el fondo, no a ojo. Estaban en .58 y .30:
     el segundo daba 2,33:1 de contraste, muy por debajo del 4,5:1 que se
     considera legible, y es el que llevan el pie, los iconos y los rótulos
     pequeños. Ahora .74 y .54 → 9,9:1 y 5,5:1. */
  --dim:       rgba(234, 242, 255, .82);
  --faint:     rgba(234, 242, 255, .60);
  --hairline:  rgba(234, 242, 255, .12);

  /* Tipografía */
  --display: 'Sora', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;

  /* Ritmo */
  --wrap: 1360px;
  --pad:  clamp(20px, 5vw, 72px);
  --sec:  clamp(96px, 16vh, 200px);

  /* Curvas */
  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

body.is-loading { overflow: hidden; height: 100vh; }

img, canvas, svg { display: block; max-width: 100%; }
h1, h2, h3, p, dl, dd, dt, ol, ul { margin: 0; }
ol, ul { list-style: none; padding: 0; }

::selection { background: var(--blue); color: var(--white); }

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

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* Contenido solo para lectores de pantalla. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.mono {
  font-family: var(--mono);
  font-weight: 400;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ── Tipografía display ───────────────────────────── */

.display {
  font-family: var(--display);
  font-weight: 700;
  line-height: .88;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.display em {
  font-style: normal;
  color: var(--cyan);
}
.display--xl { font-size: clamp(3rem, 9.2vw, 9.5rem); font-weight: 800; }
.display--lg { font-size: clamp(2.5rem, 7vw, 6.6rem); }
.display--md { font-size: clamp(2.1rem, 5.2vw, 4.8rem); }

.eyebrow {
  font-size: clamp(.62rem, 1.1vw, .74rem);
  color: var(--cyan);
  letter-spacing: .24em;
  margin-bottom: clamp(16px, 2.4vw, 28px);
}

.lede {
  font-size: clamp(1rem, 1.55vw, 1.32rem);
  line-height: 1.55;
  color: var(--dim);
  max-width: 30ch;
  font-weight: 300;
}

.sec-head { margin-bottom: clamp(56px, 9vh, 120px); }

/* ── Botones ──────────────────────────────────────── */

.btn {
  --btn-fg: var(--white);
  display: inline-flex;
  align-items: center;
  gap: .8em;
  padding: 1.05em 1.7em;
  font-family: var(--mono);
  font-size: clamp(.66rem, .92vw, .78rem);
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--btn-fg);
  border: 1px solid var(--hairline);
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: background .5s var(--ease), border-color .5s var(--ease),
              color .5s var(--ease), transform .5s var(--ease);
}
.btn__arrow { transition: transform .5s var(--ease); }
.btn:hover  { transform: translateY(-2px); }
.btn:hover .btn__arrow { transform: translateX(5px); }

.btn--primary {
  border-color: rgba(34, 232, 255, .38);
  background: linear-gradient(100deg, rgba(11, 99, 255, .22), rgba(34, 232, 255, .10));
  box-shadow: 0 0 0 0 rgba(34, 232, 255, .28);
}
.btn--primary:hover {
  border-color: var(--cyan);
  background: linear-gradient(100deg, rgba(11, 99, 255, .40), rgba(34, 232, 255, .20));
  box-shadow: 0 8px 42px -8px rgba(34, 232, 255, .45);
}

.btn--ghost:hover { border-color: rgba(234, 242, 255, .42); }
.btn--sm { padding: .78em 1.25em; }

/* ── Precarga ─────────────────────────────────────── */

.preloader {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  background: var(--bg);
  transition: opacity .8s var(--ease), visibility .8s;
}
.preloader__inner { width: min(340px, 68vw); text-align: center; }

.preloader__word {
  font-size: clamp(1.5rem, 3.6vw, 2.4rem);
  font-weight: 800;
  letter-spacing: .34em;
  text-indent: .34em;
  margin-bottom: 26px;
  background: linear-gradient(92deg, var(--white), var(--cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.preloader__bar {
  height: 1px;
  background: var(--hairline);
  overflow: hidden;
}
.preloader__fill {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--blue), var(--cyan));
  box-shadow: 0 0 12px var(--cyan);
  transition: width .25s linear;
}
.preloader__pct {
  margin-top: 14px;
  font-size: .64rem;
  color: var(--faint);
}
body:not(.is-loading) .preloader { opacity: 0; visibility: hidden; }

/* ── Header ───────────────────────────────────────── */

.site-head {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 2.4vw, 30px) var(--pad);
  transition: background .5s var(--ease), backdrop-filter .5s var(--ease),
              border-color .5s var(--ease);
  border-bottom: 1px solid transparent;
}
/* Al salir del hero gana fondo para no chocar con el contenido. */
.site-head.is-stuck {
  background: rgba(0, 2, 5, .72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: var(--hairline);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  text-decoration: none;
}
/* Navegación numerada: el índice va en cian y siempre visible, el
   rótulo se enciende al pasar. */
.site-nav {
  display: flex;
  gap: clamp(16px, 2.2vw, 34px);
  font-size: .62rem;
}
.site-nav a {
  display: inline-flex;
  align-items: baseline;
  gap: .6em;
  color: var(--dim);
  text-decoration: none;
  transition: color .4s var(--ease);
}
.site-nav a:hover { color: var(--white); }
.site-nav i {
  font-style: normal;
  font-size: .82em;
  color: var(--cyan);
  opacity: .75;
}

/* La palabra ES la marca aquí. En Sora, que es la display del sitio y la que
   más se acerca al geométrico del logo. Nada de versales ni de letra
   espaciada: el logo escribe "FlouXia", con la caja alta en la X, y esa es la
   forma canónica. Escribirlo de otra manera en el sitio es lo primero que
   delata a una marca improvisada. */
.brand__word {
  font-family: var(--display);
  font-size: 1.12rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.brand__word--alt { color: var(--cyan); }

/* ── HERO ─────────────────────────────────────────── */

/* El alto de más es el recorrido del sticky: cuánto se scrollea con el hero
   clavado. Estaba en 200vh (100 de recorrido) cuando durante ese tramo las
   manos bajaban y el haz se vertía. Congelados los dos, ese recorrido pasó a
   ser scroll muerto —dedazos sin que la pantalla cambie— y se siente como si
   la página se hubiera quedado pegada. Lo único que sigue dependiendo de él
   es el desvanecido del texto, que ocurre entre el 52 % y el 78 %. */
.hero { position: relative; height: 150vh; }

.hero__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
}

.scrub__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* La copia de la constelación dentro del hero. Sin `z-index`: entre
   hermanos posicionados manda el orden del DOM, y en `index.html` va
   después del velo y antes del texto, que es exactamente donde tiene que
   estar. No captura el cursor: quien lo escucha es la ventana. */
.hero__cielo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(260deg, var(--bg) 4%, rgba(0, 2, 5, .82) 26%, rgba(0, 2, 5, .12) 52%, transparent 70%),
    linear-gradient(to top, var(--bg) 1%, transparent 32%);
  pointer-events: none;
}

/* --k lo escribe main.js; la posición se queda en CSS para que el
   layout móvil no dependa del JS. */
.hero__copy {
  position: absolute;
  right: var(--pad);
  top: 50%;
  transform: translateY(-50%) scale(var(--k, 1));
  max-width: min(52ch, 47vw);
  will-change: transform, opacity;
}
/* El titular debe caber en el tercio oscuro, sin invadir las manos. */
.hero__copy .display--xl { font-size: clamp(2.4rem, 5.7vw, 6.2rem); }
.hero__copy .lede { margin: clamp(22px, 3vh, 34px) 0 clamp(30px, 4vh, 44px); }

.scroll-cue {
  position: absolute;
  left: var(--pad);
  top: 50%;
  transform: translateY(-50%) scale(var(--k, 1));
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: .56rem;
  color: var(--faint);
  writing-mode: vertical-rl;
}
.scroll-cue__line {
  width: 1px;
  height: 68px;
  background: linear-gradient(var(--cyan), transparent);
  animation: cue 2.4s var(--ease) infinite;
}
@keyframes cue {
  0%, 100% { transform: scaleY(.4); transform-origin: top; opacity: .4; }
  50%      { transform: scaleY(1);  transform-origin: top; opacity: 1; }
}

/* ── EL FLUJO DESCIENDE ───────────────────────────── */

.flow { padding-block: var(--sec); position: relative; }

.flow__grid {
  --flow-gap: clamp(28px, 5vw, 72px);
  --rail-w: clamp(48px, 7vw, 96px);
  display: grid;
  grid-template-columns: var(--rail-w) 1fr;
  gap: var(--flow-gap);
}

.flow__rail { position: relative; }
.flow__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.flow__path {
  stroke: var(--cyan);
  stroke-width: 1.6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 6px rgba(34, 232, 255, .55));
}

.flow__steps {
  display: flex;
  flex-direction: column;
  gap: clamp(72px, 13vh, 168px);
  padding-block: clamp(20px, 5vh, 60px);
}

.step {
  position: relative;
  max-width: 60ch;
  opacity: .24;
  transform: translateY(14px);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}
.step.is-on { opacity: 1; transform: none; }

.step::before {
  content: "";
  position: absolute;
  top: .55em;
  left: calc(-1 * (var(--flow-gap) + var(--rail-w) / 2));
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  border-radius: 50%;
  background: var(--bg);
  border: 1px solid var(--faint);
  transition: background .6s var(--ease), border-color .6s var(--ease),
              box-shadow .6s var(--ease), transform .6s var(--ease);
}
.step.is-on::before {
  background: var(--cyan);
  border-color: var(--cyan);
  box-shadow: 0 0 0 4px rgba(34, 232, 255, .16), 0 0 18px rgba(34, 232, 255, .8);
  transform: scale(1.18);
}

.step__n {
  display: block;
  font-size: .66rem;
  color: var(--cyan);
  margin-bottom: 14px;
}
.step__t {
  font-size: clamp(1.5rem, 3.5vw, 3.1rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.03em;
}
.step__d {
  margin-top: 16px;
  color: var(--dim);
  font-weight: 300;
  font-size: clamp(.94rem, 1.25vw, 1.12rem);
  max-width: 44ch;
}

/* ── PILARES ──────────────────────────────────────── */

.pillars { padding-block: var(--sec); }
.pillars__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: clamp(24px, 3vw, 44px);
}
.pillar {
  padding: clamp(30px, 3.6vw, 48px);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  background: linear-gradient(170deg, rgba(4, 16, 31, .85), rgba(0, 2, 5, .5));
  transition: border-color .6s var(--ease), transform .6s var(--ease), background .6s var(--ease);
}
.pillar:hover {
  border-color: rgba(34, 232, 255, .34);
  transform: translateY(-4px);
  background: linear-gradient(170deg, rgba(4, 16, 31, 1), rgba(0, 2, 5, .6));
}
.pillar__n { display: block; font-size: .64rem; color: var(--cyan); margin-bottom: clamp(40px, 7vw, 84px); }
.pillar__t {
  font-size: clamp(1.25rem, 1.9vw, 1.7rem);
  font-weight: 600;
  letter-spacing: -.025em;
  line-height: 1.12;
}
.pillar__d { margin-top: 14px; color: var(--dim); font-weight: 300; font-size: .98rem; }

/* ── EL EMBUDO — mucho entra, poco sale ──────────── */

.embudo { padding-block: var(--sec); overflow: hidden; position: relative; }

.embudo__corrientes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}
.embudo > .wrap, .embudo__escena { position: relative; z-index: 1; }

/* Tres tiempos en una línea: lo que llega, la máquina, lo que sale. La
   columna de entrada pesa más que la de salida a propósito — de eso trata
   la sección: entra mucho, sale poco. */
.embudo__escena {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, .85fr);
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
  padding-inline: var(--pad);
  max-width: var(--wrap);
  margin-inline: auto;
}

.embudo__entra { display: grid; gap: clamp(8px, 1.1vw, 14px); }

.entra {
  display: flex;
  align-items: center;
  gap: .8em;
  padding: .85em 1.1em;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  background: rgba(4, 16, 31, .55);
  font-size: clamp(.78rem, 1.05vw, .95rem);
  font-weight: 300;
  color: var(--dim);
  opacity: 0;
  transform: translateX(-14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease),
              color .5s var(--ease), border-color .5s var(--ease);
}
.embudo.is-in .entra { opacity: 1; transform: none; }
/* Entran escalonadas, como una marea que va llegando. */
.embudo.is-in .entra:nth-child(2) { transition-delay: .07s; }
.embudo.is-in .entra:nth-child(3) { transition-delay: .14s; }
.embudo.is-in .entra:nth-child(4) { transition-delay: .21s; }
.embudo.is-in .entra:nth-child(5) { transition-delay: .28s; }
.embudo.is-in .entra:nth-child(6) { transition-delay: .35s; }
.entra svg { width: 1.5em; height: 1.5em; flex: none; color: var(--faint); }

/* El núcleo es la marca: las mismas manos del hero, cerrando el círculo. */
.embudo__nucleo { display: grid; justify-items: center; gap: 14px; }
.nucleo__marca {
  width: clamp(150px, 20vw, 250px);
  height: auto;
  filter: drop-shadow(0 0 60px rgba(34, 232, 255, .35));
}
.nucleo__pie { font-size: .58rem; color: var(--cyan); letter-spacing: .34em; }

.embudo__sale { display: grid; gap: clamp(12px, 1.6vw, 22px); }

.sale {
  padding: clamp(14px, 1.6vw, 22px) clamp(16px, 1.8vw, 26px);
  border: 1px solid rgba(34, 232, 255, .22);
  border-radius: 14px;
  background: linear-gradient(120deg, rgba(11, 99, 255, .10), transparent 70%);
  opacity: 0;
  transform: translateX(14px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.embudo.is-in .sale { opacity: 1; transform: none; }
.embudo.is-in .sale:nth-child(2) { transition-delay: .12s; }
.embudo.is-in .sale:nth-child(3) { transition-delay: .24s; }
.sale__t {
  font-size: clamp(1rem, 1.5vw, 1.32rem);
  font-weight: 700;
  letter-spacing: -.02em;
}
.sale__d {
  margin-top: 5px;
  font-size: clamp(.78rem, .95vw, .9rem);
  font-weight: 300;
  color: var(--dim);
}

/* ── QUÉ CONECTAMOS — marquesina ──────────────────── */

.marquee { padding-block: var(--sec) 0; overflow: hidden; }
.marquee__rows {
  margin-top: clamp(-20px, -2vh, -8px);
  display: grid;
  gap: clamp(10px, 1.6vw, 22px);
  padding-bottom: clamp(56px, 8vh, 104px);
}
.marquee__row {
  display: flex;
  width: max-content;
  animation: desliza 46s linear infinite;
}
.marquee__row--rev { animation-direction: reverse; animation-duration: 58s; }
/* Cada fila lleva dos pistas idénticas; al desplazar el 50% el corte
   cae sobre la copia y el bucle es invisible. */
@keyframes desliza { to { transform: translateX(-50%); } }

.marquee__pista { display: flex; align-items: center; flex: none; }
.marquee__item {
  font-size: clamp(1.6rem, 4vw, 3.4rem);
  font-weight: 600;
  letter-spacing: -.03em;
  white-space: nowrap;
  color: var(--white);
}
.marquee__row--rev .marquee__item { color: var(--dim); }
.marquee__pista i {
  font-style: normal;
  color: var(--cyan);
  font-size: clamp(1rem, 2.2vw, 1.9rem);
  padding-inline: clamp(16px, 2.4vw, 40px);
  transform: translateY(-.1em);
}

/* ── INTEGRACIONES ────────────────────────────────── */

.integraciones { padding-block: var(--sec); }
.integraciones__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(20px, 3vw, 32px); margin-top: clamp(40px, 6vh, 60px); }
.integracion { padding: clamp(24px, 3vw, 32px); border: 1px solid var(--hairline); border-radius: 4px; background: rgba(34, 232, 255, .04); display: flex; flex-direction: column; gap: 12px; }
.integracion__header { display: flex; flex-direction: column; gap: 8px; }
.integracion__tag { font-size: .56rem; padding: 4px 8px; border-left: 2px solid; width: fit-content; }
.integracion__nombre { font-size: clamp(1.05rem, 2vw, 1.3rem); font-weight: 600; margin: 0; color: var(--white); }
.integracion__desc { font-size: clamp(.92rem, 1.1vw, .98rem); color: var(--dim); margin: 0; line-height: 1.6; }
.integracion__casos { font-size: .82rem; color: var(--faint); margin: 0; margin-top: auto; }

/* ── CASOS ────────────────────────────────────────── */

.cases { padding-block: var(--sec); }
.cases__list { display: grid; }

.case {
  display: flex;
  flex-direction: column;
  padding-block: clamp(44px, 6vw, 84px);
  border-top: 1px solid var(--hairline);
}
.case:last-child { border-bottom: 1px solid var(--hairline); }

.case__n {
  display: block;
  font-size: .64rem;
  color: var(--faint);
  margin-bottom: clamp(20px, 3vw, 34px);
}
.case__tag { font-size: .62rem; color: var(--cyan); margin-bottom: 14px; }
.case__t {
  font-size: clamp(1.7rem, 3.6vw, 3.2rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -.03em;
  margin-bottom: clamp(16px, 2vw, 28px);
}
.case__pitch {
  font-size: clamp(1rem, 1.2vw, 1.1rem);
  color: var(--dim);
  font-weight: 300;
  max-width: 52ch;
  margin-bottom: clamp(20px, 2.4vw, 32px);
}
.case__result {
  font-size: clamp(.92rem, 1.1vw, 1rem);
  color: var(--cyan);
  font-weight: 500;
  margin: 0;
}

/* ── CIERRE ───────────────────────────────────────── */

.closing {
  padding-block: clamp(120px, 22vh, 260px);
  position: relative;
  background: radial-gradient(90% 70% at 50% 118%, rgba(11, 99, 255, .22), transparent 62%);
}
.closing__inner { text-align: center; display: grid; justify-items: center; }
.closing .lede { margin-top: clamp(26px, 4vh, 40px); max-width: 44ch; }
.closing__cta {
  margin-top: clamp(36px, 5vh, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.closing__form {
  margin-top: clamp(54px, 8vh, 84px);
  max-width: 42ch;
}
.closing__form-label {
  font-size: clamp(.88rem, 1vw, .96rem);
  color: var(--faint);
  margin-bottom: clamp(16px, 2.4vh, 24px);
}
.form {
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.6vh, 16px);
}
.form input {
  padding: clamp(10px, 1.2vw, 14px) clamp(12px, 1.6vw, 18px);
  border: 1px solid var(--hairline);
  border-radius: 2px;
  background: rgba(234, 242, 255, .04);
  color: var(--white);
  font-family: var(--display);
  font-size: .94rem;
  transition: border-color .2s, background-color .2s;
}
.form input::placeholder {
  color: var(--faint);
}
.form input:focus {
  outline: none;
  border-color: var(--cyan);
  background: rgba(234, 242, 255, .08);
}
.form button {
  margin-top: clamp(4px, 1vh, 8px);
}

/* ── Footer ───────────────────────────────────────── */

.site-foot { border-top: 1px solid var(--hairline); padding-block: 30px; }
.site-foot__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-size: .58rem;
  color: var(--faint);
}

/* El aviso de datos: tiene que poder leerse, pero no compite con nada. */
.site-foot__legal {
  margin-top: 18px;
  font-size: .72rem;
  line-height: 1.6;
  font-weight: 300;
  color: var(--faint);
  max-width: 68ch;
}

/* ── Constelación ─────────────────────────────────── */

/* DETRÁS del contenido, no delante. Estaba en z-index 5, o sea flotando
   sobre toda la página: sus puntos y sus líneas se pintaban ENCIMA del texto
   y le quitaban contraste —se veían rayas cruzando los párrafos—. Por muy
   claro que se ponga un gris, no gana contra líneas dibujadas sobre él.
   Con -1 queda sobre el fondo de la página pero bajo todo lo que se lee. */
.constelacion {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
  /* Sin mix-blend-mode a propósito: dependía de cómo el navegador componga
     las capas y con aceleración por GPU podía no aplicarse, dejando el
     efecto invisible. La luz se suma dentro del propio lienzo. */
}

/* ── Grano ────────────────────────────────────────── */

.grain {
  position: fixed;
  inset: -50%;
  z-index: 150;
  pointer-events: none;
  opacity: .05;
  background-image: 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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 6s steps(5) infinite;
}
@keyframes grain {
  0%   { transform: translate(0, 0); }
  20%  { transform: translate(-6%, 4%); }
  40%  { transform: translate(4%, -6%); }
  60%  { transform: translate(-4%, -4%); }
  80%  { transform: translate(6%, 5%); }
  100% { transform: translate(0, 0); }
}

/* ── Reveals ──────────────────────────────────────── */

.reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ── Responsive ───────────────────────────────────── */

@media (max-width: 860px) {
  /* En móvil el hero NO se queda clavado: mide lo que mide su contenido y
     sube con la página. El sticky necesita alto de más para tener recorrido,
     y ese recorrido se gastaba en desvanecer el texto ANTES de avanzar — al
     bajar, primero desaparecía el titular con la pantalla quieta y solo
     después se movía la página. En un teléfono eso no se lee como una
     transición, se lee como que algo va mal.
     Sin recorrido, `progresoSeccion` devuelve 0, el texto se queda entero y
     el hero simplemente se va hacia arriba. */
  .hero { height: auto; }
  /* En móvil el texto va DEBAJO de las manos, no encima. Antes iba anclado al
     borde inferior y su altura lo empujaba hacia arriba hasta taparlas justo
     por donde nacen los dedos. `--manos-fin` lo escribe el JS: es dónde acaba
     la imagen de verdad, con el encuadre ya calculado. Así el texto se
     recoloca solo si cambia el encuadre, sin números mágicos que se queden
     viejos —que es de donde vienen la mitad de los descuadres de este sitio. */
  .hero__copy {
    left: var(--pad);
    right: var(--pad);
    max-width: none;
    top: calc(var(--manos-fin, 46vh) + clamp(14px, 3vh, 30px));
    bottom: auto;
    transform: scale(var(--k, 1));
    transform-origin: left top;
  }
  /* El velo apagaba el 44 % inferior de la pantalla al 78 %, y desde que el
     texto va debajo, ese 44 % son las manos: se veían oscuras justo por las
     palmas y las muñecas. Tenía sentido cuando el texto iba ENCIMA de la
     imagen y había que rescatar el contraste; ahora no hay nada que rescatar
     ahí, porque debajo de la imagen ya es fondo.

     Así que arranca donde acaban las manos y no antes. Los 70 px previos son
     el único solape, para que el canto de la imagen no aparezca de golpe. */
  .hero__scrim {
    background: linear-gradient(to bottom,
      transparent calc(var(--manos-fin, 46vh) - 70px),
      rgba(0, 2, 5, .55) var(--manos-fin, 46vh),
      var(--bg) calc(var(--manos-fin, 46vh) + 30px));
  }
  .scroll-cue { display: none; }
  .step__d { max-width: none; }

  /* El embudo se pone de pie: entra arriba, la marca en medio, sale abajo.
     El lienzo NO se apaga —el flujo es la mitad de lo que cuenta la sección—:
     `medir()` detecta que está apilado y traza las corrientes de arriba abajo,
     entrando por lo alto de la marca y saliendo por abajo.

     El hueco entre bloques es mayor que en ancho a propósito: es el tramo por
     el que viaja el haz. Con el hueco de escritorio no había sitio para verlo. */
  .embudo__escena {
    grid-template-columns: 1fr;
    gap: clamp(54px, 13vw, 96px);
    justify-items: center;
  }
  .embudo__entra, .embudo__sale { width: 100%; }
  /* Apiladas entran desde arriba, no desde el costado: el gesto acompaña al
     sentido en el que ahora baja el flujo. */
  .entra { transform: translateY(-10px); }
  .sale  { transform: translateY(10px); }
  .embudo.is-in .entra,
  .embudo.is-in .sale { transform: none; }
  .site-nav { display: none; }          /* en móvil manda el CTA */
}

@media (max-width: 520px) {
  .display--xl { font-size: clamp(2.5rem, 12vw, 4rem); }
  .btn { padding: 1em 1.35em; }
}

/* ── Accesibilidad: movimiento reducido ───────────── */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .hero { height: auto; }
  .hero__sticky { position: relative; height: 92vh; min-height: 560px; }
  .reveal { opacity: 1; transform: none; }
  .step { opacity: 1; transform: none; }
  .grain { animation: none; }
  /* La marquesina se detiene y muestra solo la primera pista. */
  .marquee__row { animation: none; }
  .marquee__pista:nth-child(2) { display: none; }
  .marquee__rows { overflow-x: auto; }
}