/* Plomada — el hero de scroll.
   Estándar de scrub-pipeline.md. La página clara vive en site.css; esto es
   solo el recorrido y su salida al Yeso. */

:root {
  --canvas: #0e1114;              /* Plomo tirado a la tormenta. Nunca negro puro */
  --brasa: #c8873c;               /* el ámbar de las ventanas del plano final */
  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-suave: cubic-bezier(.4,0,.2,1);
  --tshadow: 0 1px 2px rgba(5,5,10,.95), 0 3px 12px rgba(5,5,10,.78), 0 10px 44px rgba(5,5,10,.8);
}

html, body { overflow-x: hidden; overflow-x: clip; }

/* ── El hero fijado ─────────────────────────────────────────────────── */
.hero { position: relative; height: 900vh; background: var(--canvas); }
.escena {
  position: sticky; top: 0;
  height: 100vh; overflow: hidden;
  background: var(--canvas);
}

.escena video, .poster {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.escena video {
  opacity: 0;
  transition: opacity .7s var(--ease-suave);
  will-change: transform;          /* capa propia: sus repintados no arrastran la página */
  transform: translateZ(0);
}
.escena.video-listo video { opacity: 1; }
.poster { background: center/cover no-repeat; }

/* Scrim base: ningún fotograma queda crudo detrás del texto */
.scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 45%, rgba(10,10,18,0) 35%, rgba(10,10,18,.62) 100%);
}
/* Grano fijo: la portada de una empresa que promete material real no se ve digital limpia */
.grano {
  position: absolute; inset: 0; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── El anillo de carga ─────────────────────────────────────────────── */
.anillo {
  position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%);
  width: 34px; height: 34px; color: rgba(239,241,239,.5);
  transition: opacity .5s var(--ease-suave);
}
.anillo circle { transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset .12s linear; }
.escena.video-listo .anillo, .escena.video-falla .anillo { opacity: 0; }

.chevron {
  position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);
  font-family: var(--dato); font-size: .64rem; letter-spacing: .2em;
  color: rgba(239,241,239,.5); text-transform: uppercase;
}

/* ── La plomada: el elemento distintivo ─────────────────────────────────
   Cuelga sobre el metraje y NO se mueve. Pasa la tormenta, arrancan el
   techo, y sigue exactamente vertical. La marca ejecutada, no dibujada. */
.plomo-hero {
  position: absolute; left: 9%; top: 0; height: 100%;
  pointer-events: none; z-index: 3;
  opacity: .5;
}
.plomo-hero .hilo {
  position: absolute; left: 50%; top: 0; width: 1px; height: 62%;
  background: linear-gradient(to bottom, rgba(239,241,239,0), rgba(239,241,239,.55));
  transform: translateX(-50%);
}
.plomo-hero .peso {
  position: absolute; left: 50%; top: 62%; transform: translateX(-50%);
}
@media (max-width: 1100px) { .plomo-hero { display: none; } }

/* ── Las bandas de texto ────────────────────────────────────────────── */
.banda {
  position: absolute; inset: 0;
  /* Columna, no grid: con place-items cada hijo era una fila propia y
     titular, subtítulo y botón se repartían los 100vh en vez de agruparse. */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 0 6vw; text-align: center;
  opacity: 0; pointer-events: none;
  text-shadow: var(--tshadow);
  color: #eff1ef;
}
.banda::before {
  content: ""; position: absolute; inset: -4%; pointer-events: none;
  opacity: calc(.25 + .75 * var(--k, 1));
  background: radial-gradient(ellipse 74% 62% at 50% 50%,
    rgba(5,5,10,.68) 0%, rgba(5,5,10,.46) 46%, rgba(5,5,10,0) 76%);
}
.banda .linea {
  position: relative;
  font-family: var(--titular); font-weight: 700;
  font-size: clamp(1.9rem, 4.4vw, 3.9rem); line-height: 1.1;
  letter-spacing: -.02em; max-width: 22ch; margin: 0;
}
.banda .sub {
  position: relative; font-family: var(--texto);
  font-size: clamp(1rem, 1.5vw, 1.24rem); line-height: 1.5;
  max-width: 42ch; margin: 22px auto 0; color: rgba(239,241,239,.86);
}
.banda .acciones { position: relative; margin-top: 30px; }

/* Palabras y caracteres para las entradas */
.w { display: inline-block; white-space: pre; }
.c { display: inline-block; will-change: transform, opacity; }

/* (a) Scatter — las letras se posan */
.ent-scatter .c {
  --kc: clamp(0, (var(--k,0) - var(--th,0)) * 2.6, 1);
  opacity: var(--kc);
  transform: translate(calc((1 - var(--kc)) * var(--jx,0px)), calc((1 - var(--kc)) * var(--jy,0px)))
             rotate(calc((1 - var(--kc)) * var(--jr,0deg)));
}
/* (b) Grid snap — alinean como hiladas de teja */
.ent-grid .c {
  --kc: clamp(0, (var(--k,0) - var(--th,0)) * 3, 1);
  opacity: var(--kc);
  transform: translateX(calc((1 - var(--kc)) * var(--jx,0px)));
}
/* (c) Blur-to-sharp — el foco llega con el empuje macro */
.ent-blur .nitido { opacity: var(--k,0); }
.ent-blur .suave {
  position: absolute; inset: 0; filter: blur(11px);
  opacity: calc(1 - var(--k,0));
}
/* (d) Word-punch — el golpe cae con la teja */
.ent-punch .w {
  --kc: clamp(0, (var(--k,0) - var(--th,0)) * 3, 1);
  --ks: clamp(0, (var(--k,0) - var(--th,0) - var(--sd,.1)) * var(--ss,3.2), 1);
  opacity: var(--kc);
  transform: scale(calc(0.62 + (0.38 + var(--ov,.12)) * var(--kc) - var(--ov,.12) * var(--ks)));
}
.ent-punch .w.em { --ov: .24; --sd: .16; --ss: 2.6; }
/* (f) Drift-down — las palabras caen como el frente de tormenta */
.ent-drift .w {
  --kc: clamp(0, (var(--k,0) - var(--th,0)) * 2.8, 1);
  opacity: var(--kc);
  transform: translateY(calc((1 - var(--kc)) * -26px));
}
/* (e) Rise escalonado — el cierre */
.ent-rise .w {
  --kc: clamp(0, (var(--k,0) - var(--th,0)) * 3, 1);
  opacity: var(--kc);
  transform: translateY(calc((1 - var(--kc)) * 20px));
}
.ent-rise .sub { --ks: clamp(0, (var(--k,0) - .62) * 4, 1); opacity: var(--ks); }
.ent-rise .acciones { --kb: clamp(0, (var(--k,0) - .76) * 5, 1); opacity: var(--kb); }

/* ── Hero estático: teléfonos, tablets en vertical, movimiento reducido ── */
.estatico { display: none; position: relative; min-height: 100svh; }
.estatico .fondo { position: absolute; inset: 0; background: center/cover no-repeat; }
.estatico .capa {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, rgba(10,12,16,.36) 0%, rgba(10,12,16,.72) 62%, rgba(10,12,16,.92) 100%);
}
.estatico .dentro {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  min-height: 100svh; padding: 0 26px 54px; color: #eff1ef; text-shadow: var(--tshadow);
}
/* No es h1: el único h1 de la página es el oculto del principio, porque el
   hero estático está en display:none en escritorio y ahí no cuenta. */
.estatico .titular-estatico {
  font-family: var(--titular); font-weight: 700; line-height: 1.06; letter-spacing: -.02em;
  font-size: clamp(2.1rem, 9vw, 3.1rem); max-width: 15ch; margin: 0 0 16px;
}
.estatico p { max-width: 34ch; color: rgba(239,241,239,.88); margin: 0 0 26px; }

/* Las cinco compuertas. Idénticas carácter por carácter a GATES en hero.js */
@media (max-width: 720px),
       (orientation: portrait) and (max-width: 1024px),
       (orientation: portrait) and (pointer: coarse),
       (orientation: landscape) and (pointer: coarse) and (max-height: 560px),
       (prefers-reduced-motion: reduce) {
  .hero { display: none; }
  .estatico { display: block; }
}

/* Pantallas bajas pero con scrub: los adornos pequeños no caben */
@media (max-height: 560px) { .anillo, .chevron, .plomo-hero { display: none; } }

/* ── La prueba de los veinte ────────────────────────────────────────── */
.prueba20 { margin-top: 44px; max-width: 560px; }
.prueba20 .rejilla20 {
  display: grid; grid-template-columns: repeat(10, 1fr); gap: 6px; margin-bottom: 18px;
}
.prueba20 .t {
  aspect-ratio: 9/16; background: var(--obra); opacity: .28;
  transition: opacity .45s var(--ease-suave), background-color .45s var(--ease-suave);
}
.prueba20 .t.muerto { opacity: .07; }
.prueba20 .t.gana { opacity: 1; background: var(--brasa); }
.prueba20 button {
  font-family: var(--dato); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase;
  padding: 13px 20px; border: 1px solid var(--plomo); background: transparent;
  color: var(--plomo); cursor: pointer; touch-action: none;
  transition: background-color .2s var(--ease-suave), color .2s var(--ease-suave);
}
.prueba20 button:hover { background: var(--plomo); color: var(--yeso); }
.prueba20 .barra { height: 2px; background: rgba(20,24,26,.14); margin-top: 14px; }
.prueba20 .barra i { display: block; height: 100%; width: 0; background: var(--tiza); }
.prueba20 .resultado {
  margin-top: 16px; font-size: .97rem; color: var(--obra);
  opacity: 0; transition: opacity .6s var(--ease-suave);
}
.prueba20 .resultado.visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .prueba20 .t, .prueba20 .resultado, .prueba20 button { transition: none; }
}

/* Movimiento reducido: nada se mueve, todo se ve */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; transition-delay: 0 !important;
  }
}
body.pausado *, body.pausado *::before, body.pausado *::after { animation-play-state: paused !important; }

/* ── Piezas que el HTML nuevo necesita ──────────────────────────────── */

/* Solo para lectores de pantalla: el texto repartido en <span> es ilegible
   para ellos, así que cada banda lleva la frase entera aquí. */
.solo-lectores {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.saltar {
  position: absolute; left: -9999px; z-index: 100;
  background: var(--plomo); color: var(--yeso);
  padding: 12px 18px; font-family: var(--dato); font-size: .78rem;
}
.saltar:focus { left: 12px; top: 12px; }

.marca-hero {
  position: absolute; left: 26px; top: 22px; z-index: 4; margin: 0;
  font-family: var(--titular); font-weight: 700; font-size: 1.1rem;
  letter-spacing: -.02em; color: #eff1ef; text-shadow: var(--tshadow);
}

/* El botón sobre el metraje: claro sobre oscuro, y sin sombra de texto,
   que en un botón se lee como suciedad. */
.boton.claro {
  background: var(--yeso); color: var(--plomo); border-color: var(--yeso);
  text-shadow: none;
}
.boton.claro:hover { background: var(--accent); border-color: var(--accent); color: var(--yeso); }

/* El hero es oscuro; la página sale al Yeso. La primera sección clara
   no lleva filete arriba, para que la salida sea un corte limpio. */
.hero + .estatico + .nav, .estatico + .nav { border-top: 0; }
main > section:first-child { border-top: 0; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (pointer: coarse) {
  .boton, .prueba20 button {
    min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  }
}