:root{
  --bg:#F5F7F2;--ink:#0B4F43;--green:#037A62;--deep:#0B4F43;--leaf:#2BB673;
  --mint:#DFF0E6;--line:#D6E0D6;--orange:#F2B670;--orange-bg:#FFF8EE;
  --gray:#8E9892;--gray-bg:#ECEFEA;--muted:#4F6B63;
  --red:#E85D5D;--red-bg:#FCECEC;--red-deep:#B23B3B;--yellow:#F2B670;--yellow-bg:#FFF8EE;
  --ease:cubic-bezier(.2,.8,.2,1);
  --font:'Jost',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--bg)}
body{font-family:var(--font);color:var(--ink);-webkit-font-smoothing:antialiased}
.topbar{position:fixed;inset:0 0 auto 0;height:4px;background:var(--mint);z-index:10}
.topbar i{display:block;height:100%;width:0;background:var(--green);transition:width .5s var(--ease)}

#stage{position:absolute;left:50%;top:50%;width:1920px;height:1080px;transform-origin:0 0;background:var(--bg);overflow:hidden}
.slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility 0s .5s}
.slide.active{opacity:1;visibility:visible;transition-delay:0s}
.slide>*{position:absolute}
h1,h2,h3,h4,p{margin:0}

.hd{left:80px;top:34px}
.logo-full{width:165px;height:70px;background:url('assets/logo-green.png') -18.8px -18.4px/203px auto no-repeat}
.rule{left:80px;right:80px;top:124px;height:0;border:0;border-top:2px solid var(--line);margin:0}
h1{left:80px;top:138px;font-size:72px;font-weight:700;letter-spacing:-.01em;line-height:1.1;color:var(--deep)}
.sub{left:80px;top:226px;font-size:34px;color:var(--muted)}

.rv{opacity:0}
.slide.active .rv{animation:rise .7s var(--ease) var(--d,0s) both}
@keyframes rise{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes glow{50%{box-shadow:0 0 0 8px rgba(43,182,115,.25)}}

.tile{width:96px;height:96px;background:#fff;border:2px solid var(--line);border-radius:22px;display:grid;place-items:center;box-shadow:0 2px 8px rgba(11,79,67,.06);flex:none}
.tile img{display:block;width:64px;height:52px;object-fit:contain}

.closing{left:80px;width:1760px;height:100px;border-radius:26px;background:var(--deep);color:#fff;font-size:42px;font-weight:600;display:grid;place-items:center;text-align:center;padding:0 40px;letter-spacing:-.005em}
.slide.active .closing{animation:rise .7s var(--ease) var(--d,0s) both,glow 2.8s ease-in-out 3s infinite}
.note{left:80px;font-size:25px;color:var(--muted)}
.tag-prop{display:inline-block;background:var(--orange);color:var(--deep);font-weight:700;font-size:19px;letter-spacing:.06em;padding:3px 14px;border-radius:12px;vertical-align:middle;margin-left:14px}

/* tiers */
.tier{display:flex;align-items:center;justify-content:center;font-weight:700;border-radius:18px;border:3px solid}
.tier.g{background:var(--mint);border-color:var(--green);color:var(--deep)}
.tier.y{background:var(--yellow-bg);border-color:var(--yellow);color:#8a5a14}
.tier.r{background:var(--red-bg);border-color:var(--red);color:var(--red-deep)}

/* ---------- 1 · portada ---------- */
.s1 h1{top:300px;font-size:168px;letter-spacing:-.02em;line-height:1}
.s1 .tp-sub{left:80px;top:500px;font-size:54px;font-weight:500;color:var(--green);line-height:1.15}
.s1 .tp-line{left:80px;top:650px;font-size:36px;color:var(--muted)}
.s1 .chip{left:80px;top:740px;display:flex;align-items:center;gap:18px;height:84px;padding:0 36px;border-radius:999px;background:var(--orange-bg);border:3px dashed var(--orange);font-size:34px;font-weight:600}
.s1 .chip b{width:20px;height:20px;border-radius:50%;background:var(--orange)}
.s1 .meter{left:1200px;top:300px;width:640px;display:flex;flex-direction:column;gap:24px}
.s1 .meter .tier{height:150px;justify-content:space-between;padding:0 40px;font-size:46px}
.s1 .meter .tier span{font-size:34px;font-weight:500;opacity:.85}
.s1 .meter .tier.g{height:150px}
.s1 .big-ring{left:1200px;top:870px;font-size:26px;color:var(--muted);width:640px}

/* ---------- 2 · flujo ---------- */
.flow{left:80px;top:330px;width:1760px;height:360px;display:flex;align-items:stretch;gap:0}
.step{flex:1;background:#fff;border:2px solid var(--line);border-radius:26px;padding:34px 26px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;padding-top:70px;gap:22px;text-align:center;box-shadow:0 2px 8px rgba(11,79,67,.06)}
.step .n{width:72px;height:72px;border-radius:50%;background:var(--mint);border:3px solid var(--green);display:grid;place-items:center;font-size:36px;font-weight:700}
.step h3{font-size:40px;font-weight:700;line-height:1.1}
.step p{font-size:25px;color:var(--muted);line-height:1.2}
.step.key{background:var(--deep);border-color:var(--deep);color:#fff}
.step.key .n{background:var(--leaf);border-color:#fff;color:#fff}
.step.key p{color:#cfe8dd}
.slide.active .step.key{animation:rise .7s var(--ease) var(--d,0s) both,glow 2.8s ease-in-out 3s infinite}
.arrow{flex:none;width:56px;display:grid;place-items:center}
.arrow svg{width:36px;height:36px;stroke:var(--green);stroke-width:4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.s2 .closing{top:790px}
.s2 .tick{left:80px;top:720px;width:1760px;font-size:27px;color:var(--muted);text-align:center}

/* ---------- 3 · preguntas ---------- */
.qs{left:80px;top:250px;width:1130px;display:flex;flex-direction:column;gap:16px}
.q{height:116px;background:#fff;border:2px solid var(--line);border-radius:22px;display:flex;align-items:center;gap:22px;padding:0 24px;box-shadow:0 2px 8px rgba(11,79,67,.06)}
.q .n{width:56px;height:56px;border-radius:50%;background:var(--mint);border:3px solid var(--green);display:grid;place-items:center;font-size:30px;font-weight:700;flex:none}
.q .t{flex:1;min-width:0;font-size:29px;font-weight:500;line-height:1.15}
.q .t small{display:block;font-size:22px;font-weight:400;color:var(--muted);margin-top:3px}
.q .w{flex:none;width:130px;height:68px;border-radius:16px;background:var(--orange-bg);border:3px dashed var(--orange);display:grid;place-items:center;font-size:38px;font-weight:700}
.side{left:1250px;top:250px;width:590px;height:644px;display:flex;flex-direction:column;gap:16px}
.max{height:150px;background:var(--deep);color:#fff;border-radius:22px;display:flex;align-items:center;justify-content:center;gap:24px}
.max b{font-size:96px;line-height:1;color:#fff}
.max span{font-size:28px;line-height:1.15;color:#cfe8dd}
.side .tier{flex:1;justify-content:space-between;padding:0 34px;font-size:40px}
.side .tier span{font-size:36px;font-weight:600;font-feature-settings:'tnum' 1}
.s3 .note{top:930px;width:1760px;display:flex;align-items:center;gap:14px}
.s3 .note .tag-prop{margin:0}
.s3 .legend{left:80px;top:990px;font-size:25px;color:var(--muted)}

/* ---------- 4 · dato ---------- */
.arch{left:80px;top:250px;width:1760px;height:470px;display:flex;align-items:stretch}
.node{flex:1;background:#fff;border:2px solid var(--line);border-radius:26px;padding:28px 26px;display:flex;flex-direction:column;gap:14px;box-shadow:0 2px 8px rgba(11,79,67,.06);min-width:0}
.node .top{display:flex;align-items:center;gap:18px}
.node .tile{width:80px;height:80px;border-radius:20px;box-shadow:none}
.node h3{font-size:38px;font-weight:700;line-height:1.1}
.node p{font-size:26px;color:var(--muted);line-height:1.25}
.node ul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.node li{position:relative;padding-left:26px;font-size:25px;line-height:1.2;color:var(--ink)}
.node li::before{content:"";position:absolute;left:0;top:.45em;width:13px;height:13px;border-radius:50%;background:var(--leaf)}
.node code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.84em;background:var(--mint);padding:1px 8px;border-radius:8px}
.node.truth{background:var(--mint);border:3px solid var(--green)}
.node.truth code{background:#fff}
.node .badge{align-self:flex-start;margin-top:auto;font-size:22px;font-weight:700;letter-spacing:.04em;padding:4px 14px;border-radius:12px;background:var(--orange);color:var(--deep)}
.node .badge.ok{background:var(--leaf);color:#fff}
.arch .arrow{width:52px}
.s4 .strike{left:80px;top:750px;width:1760px;height:100px;border-radius:26px;background:var(--orange-bg);border:3px dashed var(--orange);display:flex;align-items:center;justify-content:center;gap:20px;font-size:34px;font-weight:500;color:var(--deep)}
.s4 .strike svg{width:44px;height:44px;flex:none;stroke:#c47a1c;stroke-width:4;fill:none;stroke-linecap:round}
.s4 .closing{top:880px}

/* ---------- 5 · mutaciones ---------- */
.cols3{left:80px;top:240px;width:1760px;height:520px;display:grid;grid-template-columns:1fr 1fr 1.15fr;gap:24px}
.mc{background:#fff;border:2px solid var(--line);border-radius:26px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 8px rgba(11,79,67,.06)}
.mc h4{height:78px;display:flex;align-items:center;justify-content:center;gap:14px;font-size:36px;font-weight:700;color:#fff;background:var(--green)}
.mc.up h4{background:var(--red)}
.mc.red h4{background:var(--deep)}
.mc ul{margin:0;padding:24px 28px;list-style:none;display:flex;flex-direction:column;gap:16px}
.mc li{position:relative;padding-left:30px;font-size:27px;line-height:1.22;color:var(--ink)}
.mc li::before{content:"";position:absolute;left:0;top:.42em;width:14px;height:14px;border-radius:50%;background:var(--leaf)}
.mc.up li::before{background:var(--red)}
.mc li small{display:block;font-size:22px;color:var(--muted);margin-top:2px}
.mc code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82em;background:var(--mint);padding:1px 7px;border-radius:8px}
.mc.red{border:3px solid var(--red);background:var(--red-bg)}
.mc.red li::before{background:var(--red)}
.mc.red li.open{background:var(--orange-bg);border:2.5px dashed var(--orange);border-radius:16px;padding:12px 16px 12px 44px}
.mc.red li.open::before{left:16px;top:1em;background:var(--orange)}
.mc.red li.open b{display:inline-block;font-size:18px;letter-spacing:.06em;background:var(--orange);padding:2px 10px;border-radius:10px;margin-right:8px}
.val{left:80px;top:790px;width:1760px;height:230px;background:#fff;border:2px solid var(--line);border-left:12px solid var(--gray);border-radius:20px;padding:20px 34px;display:flex;flex-direction:column;gap:8px}
.val h4{font-size:30px;font-weight:700;display:flex;align-items:center;gap:14px}
.val h4 em{font-style:normal;font-size:18px;font-weight:700;letter-spacing:.06em;background:var(--gray-bg);border:2px dotted var(--gray);padding:2px 12px;border-radius:12px;color:#4B5550}
.val ul{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:6px 40px}
.val li{position:relative;padding-left:24px;font-size:24px;line-height:1.22;color:var(--muted)}
.val li::before{content:"";position:absolute;left:0;top:.5em;width:11px;height:11px;border-radius:3px;background:var(--gray);transform:rotate(45deg)}
.val li b{color:var(--ink);font-weight:600}

/* ---------- 6 · checklist ---------- */
.check{left:80px;top:240px;width:1760px;display:flex;flex-direction:column;gap:14px}
.ck{height:104px;background:#fff;border:2px solid var(--line);border-radius:20px;display:flex;align-items:center;gap:24px;padding:0 28px;box-shadow:0 2px 8px rgba(11,79,67,.06)}
.ck .box{width:44px;height:44px;border-radius:12px;border:3px solid var(--green);background:#fff;flex:none}
.ck .t{flex:1;min-width:0;font-size:29px;font-weight:500;line-height:1.18}
.ck code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.84em;background:var(--mint);padding:1px 7px;border-radius:8px}
.ck .t small{display:block;font-size:22px;font-weight:400;color:var(--muted)}
.ck .own{flex:none;width:430px;text-align:right;font-size:25px;font-weight:600;color:var(--green);line-height:1.15}
.ck.open{background:var(--orange-bg);border:2.5px dashed var(--orange)}
.ck.open .box{border-color:var(--orange);border-style:dashed}
.ck.open .own{color:#a86a14}
.ck .own em{display:block;font-style:normal;font-size:18px;font-weight:700;letter-spacing:.06em;color:var(--deep)}
.s6 .closing{top:950px;height:80px;font-size:30px;font-weight:500}

/* nav dots */
.dots{position:absolute;left:0;right:0;bottom:12px;display:flex;justify-content:center;gap:12px;z-index:5}
.dots button{width:12px;height:12px;padding:0;border-radius:50%;border:2px solid var(--green);background:transparent;cursor:pointer}
.dots button.on{background:var(--green)}

body.static *,body.static *::before,body.static *::after{animation:none!important;transition:none!important}
body.static .rv{opacity:1}