/* ═══════════════════════════════════════════════════════════════════════════
   GRIT IA · piel compartida (portada + las dos películas)
   Tokens de Grit: verde-negro, marfil, terracota, salvia, cerúleo. Cada color
   vive DOS veces: en hex (lo sólido) y como tripleta -rgb (los rgba() y el
   canvas, que lee estos tokens con getComputedStyle). Ningún color se escribe
   a mano fuera de este bloque. El ACENTO lo fija cada página en su :root.
   ═══════════════════════════════════════════════════════════════════════════ */
:root{
  --fondo:#121a15;        --fondo-rgb:18,26,21;
  --fondo2:#182319;       --fondo2-rgb:24,35,25;     /* superficie de tarjeta / pantalla */
  --fondo0:#0b100d;       --fondo0-rgb:11,16,13;     /* el fondo de los paneles */
  --aire:#080c0a;         --aire-rgb:8,12,10;        /* el borde del aire, en la película */
  --marfil:#e9e3d6;       --marfil-rgb:233,227,214;
  --marfil-lo:#aaa89e;    --marfil-lo-rgb:170,168,158;
  --linea:#33403a;        --linea-rgb:51,64,58;
  --linea-fuerte:#54655c; --linea-fuerte-rgb:84,101,92;
  --salvia:#9fb58f;       --salvia-rgb:159,181,143;
  --terracota:#e0764a;    --terracota-rgb:224,118,74;
  --cielo:#7fb0d6;        --cielo-rgb:127,176,214;
  --ok:#3fbf7f;           --ok-rgb:63,191,127;
  --espera:#e0a100;       --espera-rgb:224,161,0;
  --alarma:#e04b3a;       --alarma-rgb:224,75,58;
  --marca:#EF9F27;        --marca-rgb:239,159,39;    /* el dorado de RIA Labs: no cambia de piel */
  --eclipse-fondo:#07060f; --eclipse-acento:#ffc670; --eclipse-brillo:#fff8ea;
  --acento:var(--terracota); --acento-rgb:var(--terracota-rgb);
  --border:rgba(var(--linea-fuerte-rgb),.36);
  --border-soft:rgba(var(--linea-rgb),.6);
  --display:'Geist','Helvetica Neue',system-ui,sans-serif;
  --sans:'Space Grotesk','Helvetica Neue',system-ui,sans-serif;
  --mono:'Geist Mono','SFMono-Regular',Menlo,Consolas,monospace;
  --mudo:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='%23fff'/%3E%3Cpath d='M17 9.5l4 5M21 9.5l-4 5' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  --suena:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 9h4l5-4v14l-5-4H4z' fill='%23fff'/%3E%3Cpath d='M16.5 9a4.2 4.2 0 0 1 0 6M19 6.5a7.6 7.6 0 0 1 0 11' stroke='%23fff' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:auto}
body{
  background:var(--fondo); color:var(--marfil);
  font-family:var(--sans); font-weight:300;
  overflow-x:clip; -webkit-font-smoothing:antialiased;
}
::selection{background:var(--acento); color:var(--fondo)}
a{color:var(--acento); text-decoration:none}
.mono{font-family:var(--mono); font-variant-ligatures:none}
img{max-width:100%}

/* granulado sutil */
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:3; 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 baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

/* ── tipografía de la casa ── */
.kicker{
  font-family:var(--mono); font-size:11px; font-weight:400;
  letter-spacing:.3em; text-transform:uppercase; color:var(--acento);
}
.kicker i{font-style:normal; padding:0 .9em; color:var(--linea-fuerte)}
h1{
  font-family:var(--display); font-weight:300; font-size:clamp(2.5rem,6.6vw,5.4rem); line-height:1.04;
  letter-spacing:-.025em; margin:22px 0 0;
}
h1 b{font-weight:600; color:var(--marfil)}
h2{
  font-family:var(--display); font-weight:300; font-size:clamp(1.8rem,4vw,2.9rem); line-height:1.14;
  letter-spacing:-.02em; max-width:19em;
}
h2 b{font-weight:600}
.lede{
  color:var(--marfil-lo); font-size:clamp(1rem,1.5vw,1.16rem); line-height:1.75;
  font-weight:300; max-width:40em; margin-top:22px;
}
.lede b{color:var(--marfil); font-weight:500}

/* ── documento ── */
section{position:relative; padding:clamp(80px,13vh,160px) 6vw}
.wrap{max-width:1180px; margin:0 auto; position:relative; z-index:2}
.rule{height:1px; background:linear-gradient(90deg,transparent,var(--border) 18%,var(--border) 82%,transparent); max-width:1180px; margin:0 auto}
.num{font-family:var(--mono); font-size:11px; color:var(--marfil-lo); letter-spacing:.3em; margin-bottom:14px}
footer{
  border-top:1px solid var(--border-soft); padding:34px 6vw 44px;
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:14px;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; color:var(--marfil-lo);
}
footer a{color:var(--marfil-lo)}
footer a:hover{color:var(--acento)}
footer .lockup{height:26px; width:auto; display:block; opacity:.92}
footer .frase{font-family:var(--sans); font-weight:300; font-size:11px; letter-spacing:.04em; text-transform:none; color:var(--marfil-lo)}
@media(max-width:640px){footer{justify-content:center; text-align:center}}

/* el sello: HOY / EN DESARROLLO / A MEDIDA */
.sello{
  display:inline-flex; align-items:center; gap:.6em;
  font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  padding:5px 12px; border-radius:20px; border:1px solid var(--border-soft); white-space:nowrap;
}
.sello::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor; box-shadow:0 0 8px currentColor; flex:none}
.sello.hoy{color:var(--ok); border-color:rgba(var(--ok-rgb),.4)}
.sello.dev{color:var(--espera); border-color:rgba(var(--espera-rgb),.42)}
.sello.medida{color:var(--cielo); border-color:rgba(var(--cielo-rgb),.4)}

/* fichas del documento */
.caps{display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:12px; margin-top:40px}
.cap{
  border:1px solid var(--border-soft); border-radius:14px; padding:20px 22px;
  background:linear-gradient(160deg, rgba(var(--fondo2-rgb),.6), rgba(var(--fondo0-rgb),.32));
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.cap h4{flex:1; font-weight:400; font-size:.96rem; line-height:1.4; color:var(--marfil)}
.cap .via{display:block; margin-top:4px; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; color:var(--marfil-lo); text-transform:uppercase}
.doc .rem{margin-top:30px; color:var(--marfil-lo); font-size:.95rem; line-height:1.7; max-width:44em}
.doc .rem b{color:var(--marfil); font-weight:500}
.actores{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:16px; margin-top:44px}
.actor{
  border:1px solid var(--border-soft); border-radius:14px; padding:26px 26px 24px;
  background:linear-gradient(160deg, rgba(var(--fondo2-rgb),.6), rgba(var(--fondo0-rgb),.32));
}
.actor .who{font-family:var(--mono); font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:var(--acento); margin-bottom:13px; display:block}
.actor p{color:var(--marfil-lo); font-size:.93rem; line-height:1.66}
.actor p b{color:var(--marfil); font-weight:500}
.cta{
  display:inline-block; padding:15px 38px; border:1px solid var(--acento); border-radius:40px;
  color:var(--acento); font-family:var(--mono); font-size:11.5px; letter-spacing:.26em; text-transform:uppercase;
  transition:background .4s, color .4s, box-shadow .4s;
}
.cta:hover{background:var(--acento); color:var(--fondo); box-shadow:0 0 40px rgba(var(--acento-rgb),.32)}
.cta.suave{border-color:var(--border-soft); color:var(--marfil-lo)}
.cta.suave:hover{background:transparent; color:var(--marfil); border-color:var(--acento); box-shadow:none}
@media(max-width:760px){ .cap{flex-direction:column; align-items:flex-start; gap:10px} }

/* ═══════════════════════════════════════════════════════════════════════════
   LA PELÍCULA — el contenedor alto con el panel pegado.
   🔴 Si cambia esta altura, cambiar -1300/-1100 en scripts/capturar.sh.
   ═══════════════════════════════════════════════════════════════════════════ */
.film{position:relative; padding:0; height:1400vh}
@media(max-width:760px){.film{height:1200vh}}
.pin{position:sticky; top:0; height:100svh; overflow:hidden; background:var(--fondo)}
#peli{position:absolute; inset:0; width:100%; height:100%; z-index:0; display:block}
.pin .veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(ellipse 84% 66% at 50% 48%, transparent 40%, rgba(var(--fondo-rgb),.38) 82%, var(--fondo) 100%),
    linear-gradient(180deg, rgba(var(--fondo-rgb),.66), transparent 20%, transparent 66%, rgba(var(--fondo-rgb),.82));
}
.brandbar{
  position:absolute; top:0; left:0; right:0; z-index:4;
  display:flex; align-items:center; justify-content:space-between;
  padding:24px 6vw; font-family:var(--mono); font-size:11px;
  letter-spacing:.24em; color:var(--marfil-lo);
}
.brandbar .l{display:flex; align-items:center; gap:12px}
.brandbar .l a{color:var(--marfil-lo)}
.brandbar .led{width:8px; height:8px; border-radius:50%; background:var(--acento); box-shadow:0 0 10px rgba(var(--acento-rgb),.7); animation:respira 3.2s ease-in-out infinite}
@keyframes respira{50%{opacity:.4; box-shadow:0 0 3px rgba(var(--acento-rgb),.3)}}
.brandbar a{color:var(--marfil-lo); transition:color .4s}
.brandbar a:hover{color:var(--acento)}
.brandbar .logo{height:18px; width:auto; display:block; opacity:.9}

/* el título del preludio */
.titulo{
  position:absolute; inset:0; z-index:3; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:0 6vw;
  will-change:opacity,transform; pointer-events:none;
}
.titulo .sub{margin-top:26px; color:var(--marfil-lo); font-size:clamp(1rem,1.6vw,1.2rem); line-height:1.7; max-width:36em; font-weight:300}
.titulo .sub b{color:var(--marfil); font-weight:500}
.titulo .word{margin-bottom:26px}
.titulo .logo-proy{height:clamp(30px,4.6vw,52px); width:auto; display:block; margin:0 auto 26px; opacity:.95}
.word{display:flex; align-items:center; justify-content:center; gap:14px}
.word .led{width:clamp(10px,1.2vw,14px); height:clamp(10px,1.2vw,14px); border-radius:50%; background:var(--acento); box-shadow:0 0 16px rgba(var(--acento-rgb),.75); flex:none}
.word .nom{font-family:var(--mono); font-weight:400; font-size:clamp(.95rem,1.7vw,1.25rem); letter-spacing:.22em; text-transform:uppercase; color:var(--marfil)}
.word .nom b{font-weight:500; color:var(--acento)}
/* el botón de reproducir: el único elemento del título que se puede tocar */
.titulo .play{
  pointer-events:auto; margin-top:34px; display:inline-flex; align-items:center; gap:14px;
  padding:16px 34px 16px 26px; border:1px solid rgba(var(--acento-rgb),.6); border-radius:40px;
  background:rgba(var(--fondo0-rgb),.55); color:var(--marfil); cursor:pointer;
  font-family:var(--mono); font-size:11.5px; letter-spacing:.26em; text-transform:uppercase;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  transition:background .4s, color .4s, box-shadow .4s, border-color .4s;
}
.titulo .play::before{content:''; width:0; height:0; border-left:12px solid var(--acento); border-top:7px solid transparent; border-bottom:7px solid transparent}
.titulo .play:hover{background:var(--acento); color:var(--fondo); box-shadow:0 0 40px rgba(var(--acento-rgb),.35)}
.titulo .play:hover::before{border-left-color:var(--fondo)}

/* fichas: por umbral de progreso, abajo a la izquierda */
.ficha{
  position:absolute; z-index:4; left:6vw; bottom:13vh; width:min(440px,82vw);
  padding:22px 26px 24px; border-radius:8px;
  border:1px solid var(--border);
  background:linear-gradient(155deg, rgba(var(--fondo2-rgb),.9), rgba(var(--fondo-rgb),.8));
  backdrop-filter:blur(16px) saturate(1.2); -webkit-backdrop-filter:blur(16px) saturate(1.2);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  opacity:0; transform:translateY(24px); will-change:opacity,transform;
}
.ficha::before{content:''; position:absolute; left:0; top:18px; bottom:18px; width:2px; background:var(--acento); box-shadow:0 0 10px rgba(var(--acento-rgb),.6)}
.ficha .k{font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--acento); text-transform:uppercase; display:block; margin-bottom:14px}
.ficha h3{font-family:var(--display); font-weight:300; font-size:clamp(1.3rem,2.3vw,1.72rem); line-height:1.2; letter-spacing:-.02em; color:var(--marfil)}
.ficha h3 b{font-weight:600}
.ficha p{margin-top:12px; color:var(--marfil-lo); font-size:.92rem; line-height:1.62}
.ficha p b{color:var(--marfil); font-weight:500}
.ficha .dato{display:block; margin-top:14px; font-family:var(--mono); font-size:10px; letter-spacing:.14em; color:var(--marfil-lo); line-height:1.7; text-transform:uppercase}
.ficha .dato i{font-style:normal; color:var(--espera)}
.ficha.prologo{bottom:30vh}
.ficha.derecha{left:auto; right:6vw}
/* Sapiens: las fichas viven a la DERECHA (la película se diferencia también en dónde se lee) */
body.fichas-derecha .ficha{left:auto; right:6vw}
body.fichas-derecha .ficha::before{left:auto; right:0}
@media(max-width:760px){
  .ficha{left:5vw; right:5vw; width:auto; bottom:9vh; padding:18px 18px 20px}
  .ficha p{font-size:.9rem; line-height:1.6}
  .ficha.prologo{bottom:4vh}
  .ficha.derecha{left:5vw; right:5vw}
  body.fichas-derecha .ficha{left:5vw; right:5vw}
}

/* los momentos de marca */
.marca{
  position:absolute; inset:0; z-index:6; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:26px; pointer-events:none;
  opacity:0; visibility:hidden; will-change:opacity,transform;
}
.marca .ria-svg{width:min(300px,42vw); height:auto; display:block}
.marca-linea{font-family:var(--mono); font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:var(--marca); opacity:.85; text-align:center}
.final{justify-content:flex-start; gap:0; padding:0 6vw}
.final .hueco{height:calc(38vh + 24vmin); flex:none}
.final .marcaGrande{font-family:var(--display); font-weight:300; font-size:clamp(2.2rem,7vw,4.4rem); letter-spacing:.14em; color:var(--eclipse-brillo); line-height:1; text-shadow:0 0 44px rgba(255,158,48,.35)}
.final .marcaGrande b{font-weight:600; letter-spacing:.04em; margin-right:.3em}
.final .marca-linea{margin-top:16px; color:var(--eclipse-acento); opacity:.9}
.final .frase{margin-top:32px; font-family:var(--mono); font-size:clamp(1rem,2.2vw,1.5rem); letter-spacing:.06em; color:var(--eclipse-brillo); text-align:center; max-width:32em; line-height:1.45; text-shadow:0 0 30px rgba(255,198,112,.35)}
.final .firma{margin-top:16px; font-family:var(--mono); font-size:10px; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,248,234,.62); text-align:center}
.final .acciones{pointer-events:auto; margin-top:30px; display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.final .acciones a{
  display:inline-block; padding:12px 26px; border:1px solid rgba(255,198,112,.55); border-radius:40px;
  color:var(--eclipse-brillo); font-family:var(--mono); font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  transition:background .4s, color .4s;
}
.final .acciones a:hover{background:var(--eclipse-acento); color:var(--eclipse-fondo)}
.final .cuenta{margin-top:14px; font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:rgba(255,248,234,.5); text-transform:uppercase}
@media(max-width:760px){
  .marca .ria-svg{width:58vw}
  .marca-linea{font-size:9.5px; letter-spacing:.26em}
  .final .hueco{height:calc(38vh + 20vmin)}
  .final .frase{margin-top:22px}
}

/* instrumentos: barra, marcas, HUD */
.barra{position:absolute; top:0; left:0; height:2px; z-index:6; width:0;
  background:linear-gradient(90deg,rgba(var(--acento-rgb),.55),var(--acento)); box-shadow:0 0 12px rgba(var(--acento-rgb),.55)}
.marcas{position:absolute; z-index:5; top:0; left:0; right:0; height:2px; pointer-events:none}
.marcas i{position:absolute; top:0; width:1px; height:6px; background:rgba(var(--marfil-rgb),.35)}
.marcas i.v{height:9px; background:rgba(var(--marca-rgb),.7)}
.hud{
  position:absolute; z-index:5; top:72px; left:6vw; right:6vw;
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  font-family:var(--mono); font-size:11px; letter-spacing:.24em;
  color:var(--marfil-lo); pointer-events:none;
}
.hud .l{display:flex; flex-direction:column; gap:6px}
.hud .tray{font-size:9.5px; letter-spacing:.3em; color:var(--marfil-lo); opacity:.8}
.hud .acto{color:var(--acento); text-transform:uppercase}
.hud, .brandbar{transition:opacity .5s ease}
.hud .reloj{
  color:var(--marfil); font-size:15px; letter-spacing:.1em; font-variant-numeric:tabular-nums;
  white-space:nowrap; padding:6px 12px; border:1px solid var(--border-soft); border-radius:4px;
  background:rgba(var(--fondo0-rgb),.55);
}
.hud .reloj::before{content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--acento); margin-right:10px; vertical-align:2px; box-shadow:0 0 8px rgba(var(--acento-rgb),.7); animation:respira 1.6s steps(1) infinite}
@media(max-width:760px){
  .hud{top:58px; font-size:9.5px; letter-spacing:.18em}
  .hud .reloj{font-size:12px; padding:5px 9px}
  .hud .tray{font-size:8.5px}
  .brandbar{padding:18px 5vw; font-size:9.5px; letter-spacing:.18em}
  .titulo .kicker{font-size:9.5px; letter-spacing:.2em; max-width:24em; line-height:1.9}
  .titulo .kicker i{display:none}
  .titulo .kicker span{display:block}
  .titulo .sub{margin-top:20px}
}
@media(max-width:520px){ .brandbar .r{display:none} }

/* los dos interruptores: reproducir / pausa (abajo a la izquierda) y sonido (abajo a la derecha) */
.son, .ctl{
  position:absolute; z-index:7; bottom:34px;
  display:flex; align-items:center; gap:9px; padding:9px 16px 9px 13px;
  background:rgba(var(--fondo0-rgb),.6); border:1px solid var(--border-soft); border-radius:4px;
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  font-family:var(--mono); font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; color:var(--marfil-lo); cursor:pointer;
  transition:color .4s, border-color .4s, opacity .5s;
}
.son{right:6vw}
.ctl{left:6vw}
.son:hover, .ctl:hover{color:var(--marfil); border-color:var(--border)}
.son.nuevo{color:var(--marfil); border-color:rgba(var(--acento-rgb),.4)}
.son .ico{width:13px; height:13px; flex:none; background:currentColor; -webkit-mask:var(--mudo) center/contain no-repeat; mask:var(--mudo) center/contain no-repeat}
.son[aria-pressed="true"]{color:var(--acento); border-color:rgba(var(--acento-rgb),.45)}
.son[aria-pressed="true"] .ico{-webkit-mask-image:var(--suena); mask-image:var(--suena)}
.ctl .ico{width:0; height:0; border-left:10px solid currentColor; border-top:6px solid transparent; border-bottom:6px solid transparent; flex:none}
.ctl[aria-pressed="true"]{color:var(--acento); border-color:rgba(var(--acento-rgb),.45)}
.ctl[aria-pressed="true"] .ico{border:0; width:9px; height:12px; border-left:3px solid currentColor; border-right:3px solid currentColor}
@media(max-width:760px){ .son{right:5vw; bottom:26px} .ctl{left:5vw; bottom:26px} .son .txt, .ctl .txt{display:none} .son, .ctl{padding:8px 11px} }
@media (prefers-reduced-motion:reduce){ .son, .ctl{display:none} }

.scrollcue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%); z-index:4;
  font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--marfil-lo);
  display:flex; flex-direction:column; align-items:center; gap:10px; transition:opacity .6s;
}
.scrollcue::after{content:''; width:1px; height:44px; background:linear-gradient(180deg,var(--acento),transparent); animation:cae 2.2s ease-in-out infinite}
@keyframes cae{0%{transform:scaleY(0); transform-origin:top}55%{transform:scaleY(1); transform-origin:top}56%{transform-origin:bottom}100%{transform:scaleY(0); transform-origin:bottom}}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important}
  .film{height:auto}
  .pin{position:relative; height:100svh}
  .ficha{display:none}
}