/* Un solo escenario a pantalla completa: los 239 fotogramas cubren la pantalla durante dos capítulos.
   Capítulo 01 (portada): texto a la izquierda, el dispositivo se desplaza a la derecha.
   Capítulo 02 (multiplataforma): el dispositivo pasa a la izquierda y el texto entra por la derecha.
   Tema único claro: el tono marfil de los propios fotogramas; el azul sale del fondo del celular. */
:root{
  --paper:#ECE9E2; --ink:#0B0C0F; --ink-muted:#4A4F5A; --rule:rgba(11,12,15,.22);
  --primary:#2450D6; --primary-soft:rgba(36,80,214,.38);
  --font:"Outfit", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0; background:var(--paper)}
html{scroll-behavior:smooth}
body{overflow-x:hidden; font-family:var(--font); color:var(--ink); -webkit-font-smoothing:antialiased}
a{color:inherit; text-decoration:none}
:focus-visible{outline:1px solid var(--primary); outline-offset:6px; border-radius:4px}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} }

/* pista de scroll y escenario fijo */
.track{position:relative; height:720vh; height:720svh}
.stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:var(--paper)}
.stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block; opacity:0; transition:opacity .6s ease}
.stage canvas.is-ready{opacity:1}
.anchor{position:absolute; left:0; top:62%; width:1px; height:1px}

/* velos de lectura: aclaran solo el lado donde está el texto */
.veil{position:absolute; inset:0; pointer-events:none; z-index:1; opacity:0; will-change:opacity}
.veil.l{background:linear-gradient(90deg, rgba(236,233,226,.92) 0%, rgba(236,233,226,.6) 28%, rgba(236,233,226,0) 52%)}
.veil.r{background:linear-gradient(270deg, rgba(236,233,226,.92) 0%, rgba(236,233,226,.6) 28%, rgba(236,233,226,0) 52%)}

/* cabecera */
.top{position:fixed; z-index:20; left:0; right:0; top:0; display:flex; align-items:center; justify-content:space-between; gap:24px; padding:clamp(22px,3.6vw,40px) clamp(16px,3.3vw,40px) 0}
.brand{display:flex; align-items:center; gap:12px; font-weight:500; font-size:clamp(19px,2vw,25px); letter-spacing:.02em}
/* nombre ZarNex como logotipo: versión oscura sobre fondo claro, clara sobre el cierre oscuro */
.brand-name{position:relative; display:block; height:clamp(17px,1.65vw,22px); aspect-ratio:667/96}
.brand-name .wm{position:absolute; inset:0; width:100%; height:100%; transition:opacity .4s ease}
.brand-name .wm-light{opacity:0}
.top.on-dark .brand-name .wm-dark{opacity:0}
.top.on-dark .brand-name .wm-light{opacity:1}
.brand-mark{width:clamp(32px,3vw,42px); height:clamp(32px,3vw,42px); flex-shrink:0; display:block; border-radius:22%; object-fit:cover; box-shadow:0 0 0 1px rgba(11,12,15,.06), 0 6px 18px -8px rgba(36,80,214,.55)}
.nav{display:flex; align-items:center; gap:clamp(24px,3.8vw,48px)}
.nav a{position:relative; font-size:12.5px; font-weight:400; letter-spacing:.14em; text-transform:uppercase; opacity:.78; transition:opacity .2s ease}
.nav a:hover, .nav a.on{opacity:1}
.nav a.on::after{content:""; position:absolute; left:50%; top:calc(100% + 10px); width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--primary)}
.menu{display:grid; gap:7px; width:26px; padding:8px 0; background:none; border:0; cursor:pointer}
.menu i{display:block; height:1px; background:var(--ink)}
.menu i:last-child{width:70%; justify-self:end}

/* capítulos de texto */
.ch{position:absolute; z-index:3; top:50%; will-change:opacity,transform,filter}
.ch-1{left:clamp(16px,5.2vw,62px); transform:translateY(-50%); max-width:min(660px, 48vw)}
.ch-1 h1{font-size:clamp(40px,4.8vw,70px)}
.ch-2{right:clamp(16px,5.2vw,62px); transform:translateY(-50%); width:min(500px, 38vw); opacity:0; pointer-events:none}
.eyebrow{display:flex; align-items:center; gap:14px; font-size:11px; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--primary); margin-bottom:clamp(22px,3.4vh,34px)}
.eyebrow b{font-weight:500; color:var(--ink)}
.eyebrow i{display:block; width:28px; height:1px; background:var(--primary-soft)}
h1,h2{margin:0; font-weight:300; letter-spacing:-.015em; line-height:1.06}
h1{font-size:clamp(44px,6vw,84px)}
h2{font-size:clamp(40px,4.6vw,68px)}
h1 em,h2 em{font-style:normal; color:var(--primary)}
.alt{display:block; margin-top:16px; font-size:12px; font-weight:400; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-muted)}
.rule{width:42px; height:1px; background:var(--rule); margin:clamp(24px,3.8vh,40px) 0}
.ch p{margin:0; font-weight:300; font-size:clamp(15px,1.25vw,17px); line-height:1.65; color:var(--ink-muted); max-width:32ch}
/* línea de formación en "Detrás de ZarNex" */
.ch .cred{display:flex; gap:10px; align-items:baseline; margin-top:22px; font-size:13px; line-height:1.5; color:var(--ink-muted); max-width:34ch}
.ch .cred::before{content:""; flex:0 0 6px; height:6px; border-radius:50%; background:var(--primary); transform:translateY(-1px)}
.cta{display:inline-flex; align-items:center; gap:20px; margin-top:clamp(30px,4.6vh,52px); font-size:13px; letter-spacing:.2em; text-transform:uppercase}
.cta .ring{width:52px; height:52px; border-radius:50%; border:1px solid var(--primary-soft); display:grid; place-items:center; color:var(--primary); transition:border-color .25s ease, background .25s ease}
.cta .ring svg{width:18px; height:18px; transition:transform .25s ease}
.cta:hover .ring{border-color:var(--primary); background:rgba(36,80,214,.07)}
.cta:hover .ring svg{transform:translateX(3px)}

/* pie del escenario: indicador de scroll y contador de capítulo */
.scroll{position:absolute; z-index:3; left:clamp(16px,5.2vw,62px); bottom:clamp(24px,5vh,48px); display:grid; justify-items:start; gap:14px; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--ink-muted)}
.scroll .line{position:relative; width:1px; height:40px; margin-left:19px; background:linear-gradient(transparent, var(--rule))}
.scroll .line::after{content:""; position:absolute; left:-2px; bottom:-2px; width:5px; height:5px; border-radius:50%; background:var(--primary); animation:drop 2.4s ease-in-out infinite}
@keyframes drop{0%,100%{transform:translateY(-34px); opacity:0}30%{opacity:1}70%{transform:translateY(0); opacity:1}}
@media (prefers-reduced-motion: reduce){ .scroll .line::after{animation:none} }
.count{position:absolute; z-index:3; right:clamp(16px,3.3vw,40px); bottom:clamp(24px,5vh,48px); display:flex; align-items:center; gap:14px; font-size:11px; letter-spacing:.2em; font-variant-numeric:tabular-nums; color:var(--ink-muted)}
.count b{font-weight:500; color:var(--ink)}
.count .bar{width:clamp(80px,9vw,140px); height:1px; background:var(--rule); overflow:hidden}
.count .bar i{display:block; height:100%; width:0; background:var(--primary)}

@media (max-width:960px){
  .nav{display:none; position:absolute; left:16px; right:16px; top:calc(100% + 14px); flex-direction:column; align-items:flex-start; gap:0; padding:8px 20px; background:rgba(246,244,239,.96); border:1px solid rgba(11,12,15,.08); border-radius:14px; backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px)}
  .top.open .nav{display:flex}
  .nav a{padding:14px 0; width:100%}
  .nav a.on::after{left:auto; right:0; top:50%; margin:-2px 0 0}
}
@media (max-width:820px), (orientation:portrait) and (max-width:1200px){
  .veil.l,.veil.r{background:linear-gradient(0deg, rgba(236,233,226,.97) 0%, rgba(236,233,226,.82) 36%, rgba(236,233,226,0) 60%)}
  .ch{top:auto; bottom:max(64px, calc(env(safe-area-inset-bottom,0px) + 56px)); left:clamp(16px,6vw,56px); right:clamp(16px,6vw,56px); width:auto; max-width:620px; transform:none}
  h1{font-size:clamp(36px,8.6vw,72px)}
  h2{font-size:clamp(34px,8vw,64px)}
  .ch p{font-size:clamp(15px,2vw,18px)}
  .rule{margin:18px 0}
  .cta{margin-top:22px}
  .eyebrow{margin-bottom:16px}
  .scroll{display:none}
  .count{left:clamp(16px,6vw,56px); right:clamp(16px,6vw,56px); bottom:max(24px, env(safe-area-inset-bottom,0px)); justify-content:space-between}
  .count .bar{flex:1}
}

/* capítulo 03: nuestro equipo — segunda escena de fotogramas, mismo lenguaje */
.team-track{position:relative; height:460vh; height:460svh; background:#D6D6D4}
.team-stage{position:sticky; top:0; height:100vh; height:100svh; overflow:hidden; background:#D6D6D4}
.team-stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.team-stage .veil.r{background:linear-gradient(270deg, rgba(214,214,212,.9) 0%, rgba(214,214,212,.55) 26%, rgba(214,214,212,0) 46%)}
.ch-3{right:clamp(16px,5.2vw,62px); transform:translateY(-50%); width:min(420px, 30vw); opacity:0; pointer-events:none}
.team-stage .count{left:auto}
@media (max-width:820px), (orientation:portrait) and (max-width:1200px){
  .team-stage .veil.r{background:linear-gradient(0deg, rgba(214,214,212,.97) 0%, rgba(214,214,212,.8) 30%, rgba(214,214,212,0) 52%)}
  .ch-3{width:auto}
  .team-stage .count{left:clamp(16px,6vw,56px)}
}
/* portátiles y pantallas bajas en horizontal: tipografía y márgenes según la altura */
@media (orientation:landscape) and (max-height:720px){
  h1{font-size:clamp(34px,min(6vw,10.5vh),72px)}
  h2{font-size:clamp(30px,min(4.6vw,9vh),60px)}
  .rule{margin:clamp(14px,3vh,28px) 0}
  .cta{margin-top:clamp(16px,3.4vh,36px)}
  .eyebrow{margin-bottom:clamp(12px,2.4vh,24px)}
  .top{padding-top:clamp(14px,3vh,28px)}
}
@media (orientation:landscape) and (max-height:480px){
  .scroll{display:none}
  .ch p{font-size:14px; line-height:1.5}
  .cta .ring{width:42px; height:42px}
}