:root{
  --bg:#000000; --p1:#181818; --p2:#1F1F1F; --p3:#272727; --p4:#313131;
  --ink:#f4f6fa; --mut:#9a9a9a; --soft:#c9c9c9;
  --line:rgba(255,255,255,.09); --line2:rgba(255,255,255,.16);
  --lima:#b4f03a; --limat:rgba(180,240,58,.12); --onlima:#141a05;
  --blue:#3d7bff; --bluel:#9db9ff; --bluet:rgba(61,123,255,.16);
  --amber:#ffa31a; --ambert:rgba(255,163,26,.14);
  --ease:cubic-bezier(.32,.72,0,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'Poppins',system-ui,sans-serif;font-size:16px;line-height:24px;-webkit-font-smoothing:antialiased;overflow-x:clip}
h1,h2,h3,h4,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
h1,h2,h3{letter-spacing:-.02em;text-wrap:balance;font-weight:600}
p,li{text-wrap:pretty}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--bluel);outline-offset:2px;border-radius:4px}
.mono{font-family:'Geist Mono',ui-monospace,monospace}
.wrap{max-width:1280px;margin:0 auto;padding:0 80px}
.skip{position:absolute;left:16px;top:-80px;z-index:120;background:var(--lima);color:var(--onlima);padding:8px 16px;border-radius:8px;font-weight:600}
.skip:focus{top:8px}

/* ---------- Telón entre páginas ---------- */
.curtain{position:fixed;inset:0;z-index:110;background:var(--p1);display:grid;place-items:center;clip-path:inset(0 0 0 0);transition:clip-path .9s var(--ease);pointer-events:none}
.curtain .mark{width:56px;height:56px;border-radius:16px;transition:transform .9s var(--ease),opacity .6s var(--ease)}
.curtain .mark svg{width:32px;height:32px}
.curtain.open{clip-path:inset(0 0 100% 0)}
.curtain.open .mark{transform:translateY(-48px);opacity:0}
.curtain.close{clip-path:inset(100% 0 0 0);transition:none}
.curtain.close.go{clip-path:inset(0 0 0 0);transition:clip-path .7s var(--ease)}

/* Intro de la portada */
.intro{position:fixed;inset:0;z-index:115;background:#000;display:grid;place-items:center;clip-path:inset(0 0 0 0);transition:clip-path 1.1s var(--ease)}
.intro.out{clip-path:inset(0 0 100% 0)}
.intro .word{display:flex;gap:2px;font-size:72px;line-height:1;font-weight:700;letter-spacing:-.04em}
.intro .word span{display:inline-block;opacity:0;transform:translateY(64px);filter:blur(12px);animation:letter 1s var(--ease) forwards}
.intro .dot{width:16px;height:16px;border-radius:9999px;background:var(--lima);align-self:flex-end;margin:0 0 12px 8px;opacity:0;transform:scale(0);animation:pop .8s var(--ease) .9s forwards}
.intro .bar{position:absolute;left:50%;bottom:96px;width:160px;height:2px;margin-left:-80px;background:var(--p3);border-radius:2px;overflow:hidden}
.intro .bar i{display:block;height:100%;width:100%;background:var(--lima);transform:scaleX(0);transform-origin:left;animation:load 1.4s var(--ease) .2s forwards}
@keyframes letter{to{opacity:1;transform:none;filter:blur(0)}}
@keyframes pop{to{opacity:1;transform:scale(1)}}
@keyframes load{to{transform:scaleX(1)}}

.progress{position:fixed;top:0;left:0;right:0;height:2px;z-index:80;background:var(--lima);transform-origin:left;transform:scaleX(0)}
@supports (animation-timeline:scroll()){
  .progress{animation:grow linear both;animation-timeline:scroll(root)}
  @keyframes grow{to{transform:scaleX(1)}}
}

/* ---------- Nav isla ---------- */
.navw{position:fixed;top:0;left:0;right:0;z-index:70;display:flex;justify-content:center;padding:0 16px;pointer-events:none}
.pill{pointer-events:auto;margin-top:24px;width:max-content;height:56px;display:flex;align-items:center;gap:24px;padding:8px 8px 8px 16px;border-radius:9999px;background:rgba(24,24,24,.72);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border:1px solid var(--line2);transform:translateY(-96px);opacity:0;transition:transform 1s var(--ease),opacity 1s var(--ease)}
.ready .pill{transform:none;opacity:1}
.brand{display:inline-flex;align-items:center;gap:8px;font-size:18px;line-height:28px;font-weight:700;letter-spacing:-.02em}
.mark{width:28px;height:28px;border-radius:8px;background:var(--lima);display:grid;place-items:center;transition:transform .7s var(--ease)}
.brand:hover .mark{transform:rotate(-12deg) scale(1.06)}
.mark svg{width:16px;height:16px;fill:none;stroke:var(--onlima);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.links{display:flex;gap:4px}
.lnk{font-size:14px;line-height:20px;font-weight:500;color:var(--mut);padding:8px 12px;border-radius:9999px;transition:color .5s var(--ease),background-color .5s var(--ease)}
.lnk:hover{color:var(--ink);background:rgba(255,255,255,.08)}
.lnk[aria-current]{color:var(--ink);background:rgba(255,255,255,.1)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px 24px;border-radius:12px;border:1px solid transparent;font-size:16px;line-height:24px;font-weight:600;cursor:pointer;transition:transform .7s var(--ease),background-color .5s var(--ease),border-color .5s var(--ease),box-shadow .7s var(--ease)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.5;cursor:default;transform:none}
.btn-p{background:var(--lima);color:var(--onlima)}
.btn-p:hover{background:#c6f562;box-shadow:0 12px 40px rgba(180,240,58,.25)}
.btn-s{background:transparent;border-color:var(--line2)}
.btn-s:hover{background:rgba(255,255,255,.06);border-color:var(--bluel)}
.btn-sm{min-height:40px;padding:8px 16px;font-size:14px;line-height:20px;border-radius:9999px}
.btn .ph{font-size:16px;transition:transform .7s var(--ease)}
.btn:hover .ph-arrow-right{transform:translateX(4px)}
.burger{display:none;position:relative;width:40px;height:40px;border-radius:9999px;border:1px solid var(--line2);background:transparent;cursor:pointer;padding:0}
.burger i{position:absolute;left:11px;width:16px;height:2px;border-radius:2px;background:var(--ink);transition:transform .7s var(--ease),top .7s var(--ease)}
.burger i:nth-child(1){top:14px}.burger i:nth-child(2){top:22px}
.burger.on i:nth-child(1){top:18px;transform:rotate(45deg)}
.burger.on i:nth-child(2){top:18px;transform:rotate(-45deg)}
.ov{position:fixed;inset:0;z-index:65;background:rgba(0,0,0,.8);backdrop-filter:blur(64px);-webkit-backdrop-filter:blur(64px);display:flex;flex-direction:column;justify-content:center;gap:16px;padding:32px;opacity:0;visibility:hidden;transition:opacity .7s var(--ease),visibility .7s}
.ov.on{opacity:1;visibility:visible}
.ov a{font-size:30px;line-height:36px;font-weight:600;letter-spacing:-.02em;opacity:0;transform:translateY(48px);transition:transform .8s var(--ease),opacity .8s var(--ease)}
.ov.on a{opacity:1;transform:none}
.ov.on a:nth-child(2){transition-delay:.1s}.ov.on a:nth-child(3){transition-delay:.15s}.ov.on a:nth-child(4){transition-delay:.2s}

/* ---------- Reveal ---------- */
.rv{opacity:0;transform:translateY(64px);filter:blur(12px);transition:opacity 1s var(--ease),transform 1s var(--ease),filter 1s var(--ease)}
.rv.in{opacity:1;transform:none;filter:blur(0)}
.d1{transition-delay:.1s}.d2{transition-delay:.2s}.d3{transition-delay:.3s}

/* ---------- Comunes ---------- */
.sec{padding:96px 0;position:relative}
.alt{background:var(--p1)}
.head{display:flex;flex-direction:column;gap:16px;max-width:680px}
.head.c{align-items:center;text-align:center;margin:0 auto}
.eyebrow{font-size:12px;line-height:16px;color:var(--lima);letter-spacing:.08em;text-transform:uppercase}
.h2{font-size:48px;line-height:1;font-weight:700;letter-spacing:-.03em}
.lead{font-size:18px;line-height:28px;color:var(--mut)}
.grad{background:linear-gradient(90deg,#FFFFFF,#9B9B9B);-webkit-background-clip:text;background-clip:text;color:transparent}
.tag{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;font-size:12px;line-height:16px;font-weight:500;padding:4px 8px;border-radius:9999px;background:rgba(255,255,255,.08);color:var(--soft);transition:background-color .6s var(--ease),color .6s var(--ease)}
.tag.l{background:var(--limat);color:var(--lima)}
.tag.b{background:var(--bluet);color:var(--bluel)}
.tag.a{background:var(--ambert);color:var(--amber)}
.ico{width:48px;height:48px;border-radius:12px;background:var(--p3);display:grid;place-items:center;color:var(--lima);font-size:24px;flex:none}

/* Chat y citas (portada y capítulos) */
.msg{max-width:88%;opacity:0;transform:translateY(16px);filter:blur(6px);transition:opacity .7s var(--ease),transform .7s var(--ease),filter .7s var(--ease)}
.msg.in{opacity:1;transform:none;filter:none}
.msg.q{align-self:flex-end;background:var(--p4);padding:12px 16px;border-radius:16px 16px 4px 16px;font-size:14px;line-height:20px}
.msg.a{align-self:flex-start;display:flex;flex-direction:column;gap:12px;font-size:14px;line-height:20px}
.who{display:flex;align-items:center;gap:8px;font-size:12px;line-height:16px;color:var(--mut)}
.who .mark{width:20px;height:20px;border-radius:6px}
.who .mark svg{width:12px;height:12px}
.caret{display:inline-block;width:8px;height:16px;margin-left:2px;vertical-align:-3px;background:var(--lima);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.cites{display:flex;flex-wrap:wrap;gap:8px}
.cite{display:inline-flex;align-items:center;gap:8px;font-family:'Geist Mono',ui-monospace,monospace;font-size:12px;line-height:16px;font-weight:500;padding:4px 12px 4px 4px;border-radius:9999px;background:var(--limat);color:var(--lima);border:1px solid transparent;cursor:pointer;opacity:0;transform:scale(.9);transition:opacity .6s var(--ease),transform .6s var(--ease),background-color .5s var(--ease),border-color .5s var(--ease)}
.cite.in{opacity:1;transform:none}
.cite:hover{background:rgba(180,240,58,.2)}
.cite.on{border-color:var(--lima)}
.cite em,.ref{font-style:normal;width:16px;height:16px;border-radius:9999px;background:var(--lima);color:var(--onlima);display:inline-grid;place-items:center;font-size:12px;line-height:16px;font-family:'Geist Mono',monospace}
.ref{vertical-align:2px;margin:0 2px;transform:scale(0);transition:transform .6s var(--ease)}
.ref.in{transform:none}
.nofound{display:inline-flex;align-items:center;gap:8px;padding:12px 16px;border-radius:12px;background:var(--ambert);color:var(--amber);border:1px solid rgba(255,163,26,.3)}
.sk{display:flex;flex-direction:column;gap:8px;min-width:240px}
.sk i{display:block;height:12px;border-radius:4px;background:linear-gradient(90deg,var(--p3),var(--p4),var(--p3));background-size:200% 100%;animation:shim 1.4s linear infinite}
.sk i:nth-child(2){width:72%}
@keyframes shim{to{background-position:-200% 0}}

/* Página de documento */
.page{position:relative;width:100%;max-width:360px;aspect-ratio:.77;background:#f4f2ec;border-radius:8px;padding:32px 24px;display:flex;flex-direction:column;gap:8px;box-shadow:0 32px 64px rgba(0,0,0,.5);transform-origin:50% 100%;transition:transform .9s var(--ease),opacity .9s var(--ease),filter .9s var(--ease)}
.page.swap{transform:perspective(900px) rotateX(18deg) translateY(24px) scale(.94);opacity:0;filter:blur(6px)}
.page .ttl{font-size:12px;line-height:16px;font-weight:600;color:#1b1b1b;margin-bottom:8px}
.page .l{display:block;height:8px;border-radius:2px;background:#d9d6cc}
.page .l.s{width:62%}.page .l.m{width:84%}
.page .hl{position:relative;font-size:12px;line-height:16px;color:#1b1b1b;padding:8px;margin:4px -8px;border-radius:4px}
.page .hl::before{content:"";position:absolute;inset:0;border-radius:4px;background:rgba(180,240,58,.55);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--ease) .35s}
.page .hl.on::before{transform:scaleX(1)}
.page .hl span{position:relative}
.page .pg{margin-top:auto;font-size:12px;line-height:16px;color:#77736a;text-align:right}

.noanim,.noanim *{transition:none!important}

/* Barras */
.track{flex:1;height:4px;border-radius:4px;background:var(--p4);overflow:hidden}
.track i{display:block;height:100%;width:100%;background:var(--lima);transform:scaleX(0);transform-origin:left;transition:transform 2.4s var(--ease)}

/* ---------- Historia por capítulos ---------- */
.story{display:grid;grid-template-columns:1fr 1.15fr;gap:64px;position:relative}
.steps{position:relative;z-index:2}
.step{min-height:100vh;display:flex;flex-direction:column;justify-content:center;gap:16px;padding:96px 0;opacity:.25;filter:blur(2px);transition:opacity .9s var(--ease),filter .9s var(--ease)}
.step.on{opacity:1;filter:none}
.step .cap{display:inline-flex;align-items:center;gap:12px;font-size:12px;line-height:16px;color:var(--lima);letter-spacing:.08em;text-transform:uppercase}
.step .cap::before{content:"";width:24px;height:2px;border-radius:2px;background:var(--lima);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .1s}
.step.on .cap::before{transform:scaleX(1)}
.step h2{font-size:48px;line-height:1;font-weight:700;letter-spacing:-.03em;max-width:520px}
.step p{font-size:18px;line-height:28px;color:var(--mut);max-width:440px}
.stagew{position:sticky;top:0;height:100vh;display:flex;align-items:center}
.stage{position:relative;width:100%;aspect-ratio:1/1;max-height:calc(100vh - 160px);background:var(--p1);border:1px solid var(--line);border-radius:24px;overflow:hidden}
.scene{position:absolute;inset:0;padding:32px;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.94) translateY(24px);filter:blur(12px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);pointer-events:none}
.scene.on{opacity:1;transform:none;filter:none;pointer-events:auto}
.scene.past{transform:scale(1.04) translateY(-24px)}
.counter{position:absolute;left:24px;top:24px;z-index:3;display:flex;align-items:center;gap:8px;font-size:12px;line-height:16px;color:var(--mut)}
.counter b{color:var(--ink);font-weight:500;display:inline-block;min-width:16px}
.dots{position:absolute;right:24px;top:24px;z-index:3;display:flex;gap:4px}
.dots i{width:8px;height:8px;border-radius:9999px;background:var(--p4);transition:background-color .7s var(--ease),width .7s var(--ease)}
.dots i.on{background:var(--lima);width:24px}

/* Cabecera de historia */
.shero{min-height:80vh;display:flex;align-items:flex-end;padding:160px 0 64px;position:relative;overflow:hidden}
.shero .h1{font-size:72px;line-height:1;font-weight:700;letter-spacing:-.04em;max-width:680px;padding-bottom:8px}
.shero .h1 .ln{display:block;overflow:hidden}
.shero .h1 .ln span{display:inline-block;transform:translateY(110%);transition:transform 1.2s var(--ease)}
.ready .shero .h1 .ln span{transform:none}
.ready .shero .h1 .ln:nth-child(2) span{transition-delay:.12s}
.shero .scroll{display:inline-flex;align-items:center;gap:12px;margin-top:32px;font-size:14px;line-height:20px;color:var(--mut)}
.shero .scroll i{width:24px;height:40px;border:1px solid var(--line2);border-radius:9999px;position:relative}
.shero .scroll i::after{content:"";position:absolute;left:50%;top:8px;width:4px;height:8px;margin-left:-2px;border-radius:4px;background:var(--lima);animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}70%{transform:translateY(16px);opacity:0}100%{opacity:0}}
.fade-in{opacity:0;transform:translateY(32px);filter:blur(8px);transition:opacity 1s var(--ease) .4s,transform 1s var(--ease) .4s,filter 1s var(--ease) .4s}
.ready .fade-in{opacity:1;transform:none;filter:none}

/* Siguiente capítulo */
.next{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px;padding:64px;border-radius:24px;background:var(--p1);border:1px solid var(--line)}
.next h2{font-size:36px;line-height:40px;font-weight:700;letter-spacing:-.03em;max-width:560px}
.next .row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Footer ---------- */
footer{padding:48px 0;border:1px solid transparent;border-top-color:var(--line)}
.frow{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;font-size:14px;line-height:20px;color:var(--mut)}
.frow nav{display:flex;flex-wrap:wrap;gap:24px}
.frow a{transition:color .5s var(--ease)}
.frow a:hover{color:var(--ink)}

/* ---------- Responsive ---------- */
@media (max-width:1024px){
  .wrap{padding:0 32px}
  .story{grid-template-columns:1fr;gap:0}
  .stagew{order:-1;top:0;height:auto;z-index:3;padding:96px 0 16px;background:var(--bg)}
  .stage{max-width:560px;margin:0 auto}
  .stage{aspect-ratio:4/3;max-height:none}
  .steps{z-index:1}
  .step{min-height:80vh;padding:48px 0;justify-content:flex-start}
  .step h2{font-size:36px;line-height:40px}
  .shero .h1{font-size:60px}
}
@media (max-width:760px){
  .wrap{padding:0 16px}
  .links,.pill .btn-sm{display:none}
  .burger{display:block}
  .pill{gap:16px}
  .h2{font-size:36px;line-height:40px}
  .shero .h1{font-size:48px}
  .sec{padding:64px 0}
  .stage{aspect-ratio:1/1}
  .scene{padding:48px 16px 16px}
  .stagew{padding-top:88px}
  .step{min-height:70vh}
  .step h2{font-size:30px;line-height:36px}
  .step p{font-size:16px;line-height:24px}
  .next{padding:32px 24px}
  .next h2{font-size:30px;line-height:36px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  html{scroll-behavior:auto}
}