/* ===== Recorrido (técnica de dewuiz.pro adaptada a la marca) ===== */
:root{--mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;--hair:rgb(255 255 255 / .18);--glass:rgb(17 17 17 / .78);--c:#F2C200;--ct:#F2C200;--ink:#FFFFFF;--ink-2:#C9C9C4;--muted:#8a8a86;transition:--c 1s ease,--ct 1s ease}
@property --c{syntax:"<color>";inherits:true;initial-value:#F2C200}
@property --ct{syntax:"<color>";inherits:true;initial-value:#F2C200}
html,body{overflow-x:clip}
#lines{position:fixed;inset:0;z-index:0;width:100%;height:100%;display:block;transition:opacity .6s}
.past #lines{opacity:0}
.no3d body{background:linear-gradient(var(--hair) 1px,transparent 1px) 0 0/56px 56px,linear-gradient(90deg,var(--hair) 1px,transparent 1px) 0 0/56px 56px,var(--negro)}
.track{height:640vh;height:640svh}

/* Carga */
.boot{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--negro);transition:opacity .8s ease,visibility .8s}
.boot.done{opacity:0;visibility:hidden}
.boot-bar{position:relative;display:block;width:180px;height:2px;background:var(--hair)}
.boot-bar i{position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--amarillo);transform-origin:left center;transform:scaleX(0)}
.boot b{font:500 .84rem/1 var(--mono);letter-spacing:.2em;color:var(--amarillo)}

/* Barra superior fija */
.progress{position:fixed;z-index:32;left:0;right:0;top:0;height:3px;pointer-events:none}
.progress span{display:block;height:100%;background:var(--c);transform-origin:left center;transform:scaleX(0)}
.bar{position:fixed;z-index:30;top:0;left:0;right:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:calc(12px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) 22px max(16px,env(safe-area-inset-left,0px));background:linear-gradient(to bottom,rgb(17 17 17 / .92) 0%,rgb(17 17 17 / .6) 55%,transparent 100%);color:var(--blanco)}
.menu-btn{justify-self:start;display:inline-flex;align-items:center;gap:10px;padding:8px 0;border:0;background:none;color:inherit;font:500 .78rem/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;cursor:pointer}
.burger{display:block;width:18px;height:8px;border-top:2px solid var(--amarillo);border-bottom:2px solid var(--amarillo)}
.bar .logo{justify-self:center}
.bar-cta{justify-self:end;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;background:var(--wa);color:var(--negro);font:700 .8rem/1 var(--display);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px))}
.bar-cta svg{width:18px;height:18px}
.menu{position:fixed;inset:0;z-index:40;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(24px,5vh,48px);padding:calc(72px + env(safe-area-inset-top,0px)) 16px 40px;background:rgb(17 17 17 / .97);color:var(--blanco)}
.menu[hidden]{display:none!important}
.menu nav{display:flex;flex-direction:column;align-items:center;gap:clamp(4px,1.4vh,14px)}
.menu nav a{display:flex;align-items:baseline;gap:18px;font-family:var(--display);font-weight:800;text-transform:uppercase;font-size:clamp(2.4rem,8vw,4.6rem);line-height:1.05;text-decoration:none;color:var(--blanco);transition:color .3s}
.menu nav a em{font:500 .74rem/1 var(--mono);letter-spacing:.2em;color:var(--muted);width:2.2em;text-align:right;font-style:normal}
.menu nav a:hover{color:var(--amarillo)}
.close{position:absolute;top:calc(14px + env(safe-area-inset-top,0px));right:16px;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--hair);border-radius:50%;background:transparent;color:var(--blanco);font:300 1.8rem/1 var(--body);cursor:pointer}

/* Capas de texto sobre la figura */
.hud{position:relative;z-index:5}
.ov{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}
.ov.on{opacity:1;visibility:visible}
.past .ov{opacity:0;visibility:hidden}
.ov a,.ov button{pointer-events:auto}
.k{margin:0;font:500 .8rem/1.4 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:8px}
.ov .btn{border-radius:0;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
.ov .btn-linea{clip-path:none}

/* 00 · Portada */
.hero-ov{align-items:center;justify-content:center;text-align:center;gap:clamp(8px,2.2vh,16px);padding:calc(84px + env(safe-area-inset-top,0px)) 16px calc(clamp(96px,17vh,150px) + env(safe-area-inset-bottom,0px))}
.hero-ov>*{zoom:var(--hz,1)}
.hero-ov::before{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:min(900px,120vw);height:min(560px,80vh);transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgb(17 17 17 / .85),rgb(17 17 17 / .45) 60%,transparent);pointer-events:none}
.name{margin:0;font-family:var(--display);font-weight:800;font-size:clamp(2.6rem,min(11vw,18vh),7.5rem);line-height:.95;letter-spacing:.02em;text-transform:uppercase;color:var(--amarillo);text-wrap:balance}
.headline{margin:0;max-width:30ch;font:500 clamp(1.15rem,min(2.3vw,4vh),1.7rem)/1.3 var(--body);color:var(--blanco);text-wrap:balance}
.sub{margin:0;max-width:48ch;font:400 clamp(.95rem,2.4vh,1.1rem)/1.5 var(--body);color:var(--ink-2)}

/* 01–04 · Pasos */
.step{align-items:flex-start;justify-content:flex-end;padding:calc(90px + env(safe-area-inset-top,0px)) 16px calc(84px + env(safe-area-inset-bottom,0px))}
.capbox{position:relative;width:min(540px,100%);padding:22px 24px 24px;background:var(--glass);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:inset 0 0 0 1px var(--hair);transform:translateY(14px);transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.ov.on .capbox{transform:none}
.capbox::before,.capbox::after{content:"";position:absolute;width:16px;height:16px;border:0 solid var(--c)}
.capbox::before{left:0;top:0;border-left-width:3px;border-top-width:3px}
.capbox::after{right:0;bottom:0;border-right-width:3px;border-bottom-width:3px}
.cap-k{display:flex;align-items:center;gap:14px;margin:0;font:500 .8rem/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--ct)}
.cap-k span:first-child{color:var(--ink-2)}
.cap-k i{flex:1;height:1px;background:var(--hair)}
.capbox h2{margin:14px 0 10px;font-size:clamp(1.9rem,3.6vw,2.9rem);color:var(--amarillo)}
.capbox p.txt{margin:0;font:400 1.1rem/1.55 var(--body);color:var(--ink-2)}
.capbox p.txt b{color:var(--blanco)}

/* 05 · Cierre */
.outro{align-items:center;justify-content:center;text-align:center;gap:16px;padding:calc(96px + env(safe-area-inset-top,0px)) 16px calc(96px + env(safe-area-inset-bottom,0px))}
.outro::before{content:"";position:absolute;left:50%;top:50%;z-index:-1;width:min(820px,120vw);height:min(520px,80vh);transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgb(17 17 17 / .88),rgb(17 17 17 / .45) 60%,transparent);pointer-events:none}
.outro h2{margin:0;max-width:20ch;font-size:clamp(2rem,4.8vw,3.8rem);color:var(--amarillo)}
.outro .numero-ov{font:500 1rem/1 var(--mono);letter-spacing:.14em;color:var(--blanco)}
.nextp{margin-top:10px;font:500 .78rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--blanco);text-decoration:none;border-bottom:1px solid var(--hair);padding-bottom:6px}
.nextp:hover{color:var(--amarillo);border-color:var(--amarillo)}

/* Etiquetas pegadas a la figura */
.tag{position:fixed;left:0;top:0;z-index:6;margin:16px 0 0 16px;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .5s,visibility .5s;font:500 .8rem/1.4 var(--mono);color:var(--blanco);background:rgb(17 17 17 / .88);box-shadow:inset 0 0 0 1px var(--hair);padding:7px 10px;white-space:nowrap;will-change:transform}
.tag.on{opacity:1;visibility:visible}
.past .tag{opacity:0;visibility:hidden}
.tag::before{content:"";position:absolute;left:-21px;top:-21px;width:9px;height:9px;border-radius:50%;border:1px solid var(--c);background:var(--negro)}
.tag::after{content:"";position:absolute;left:-12px;top:-12px;width:17px;height:1px;background:var(--c);transform:rotate(45deg);transform-origin:0 0}
.no3d .tag::before,.no3d .tag::after{display:none}
.tag b{color:var(--c);font-weight:500}
.tag.ok b{color:var(--wa)}
.tag.wa{display:flex;flex-direction:column;gap:2px;background:var(--wa);color:var(--negro);box-shadow:none}
.tag.wa small{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.tag.wa span{font:500 .95rem/1.3 var(--body)}

/* Medidor lateral, etiqueta inferior y pista */
.meter{position:fixed;z-index:20;left:max(22px,env(safe-area-inset-left,0px));top:50%;height:min(42vh,340px);width:20px;transform:translateY(-50%);transition:opacity .5s}
.m-line{position:absolute;left:9px;top:0;bottom:0;width:1px;background:var(--hair)}
.m-line i{position:absolute;inset:0;background:var(--amarillo);transform-origin:center top;transform:scaleY(0)}
.tick-m{position:absolute;left:3px;width:13px;height:13px;margin-top:-6px;padding:0;border:1px solid var(--hair);background:var(--negro);cursor:pointer;transform:rotate(45deg);transition:background .3s,border-color .3s}
.tick-m span{position:absolute;left:22px;top:50%;transform:translateY(-50%) rotate(-45deg);transform-origin:0 50%;white-space:nowrap;font:500 .7rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--blanco);opacity:0;transition:opacity .3s;pointer-events:none}
.tick-m:hover span,.tick-m:focus-visible span{opacity:1}
.tick-m.cur{background:var(--c);border-color:var(--c)}
.hudbar{position:fixed;z-index:20;left:0;right:0;bottom:0;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:0 18px calc(16px + env(safe-area-inset-bottom,0px)) 18px;pointer-events:none;font:500 .74rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2);transition:opacity .5s}
.hudbar .sec{color:var(--blanco)}
.scroll-cue{position:fixed;z-index:20;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;pointer-events:none;font:500 .74rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--blanco);transition:opacity .5s}
.scroll-cue i{position:relative;display:block;width:1px;height:34px;background:var(--hair);overflow:hidden}
.scroll-cue i::after{content:"";position:absolute;left:0;top:-40%;width:1px;height:40%;background:var(--amarillo);animation:drip 1.6s ease-in-out infinite}
.scroll-cue.off,.scroll-cue.clash{opacity:0}
.past .meter,.past .hudbar,.past .scroll-cue{opacity:0;pointer-events:none}
@keyframes drip{to{top:100%}}

/* Contenido después del recorrido */
.content{position:relative;z-index:8;background:var(--negro);border-top:3px solid var(--amarillo)}
.wa-float{z-index:35}

@media (min-width:761px){.step{padding-left:max(72px,env(safe-area-inset-left,0px))}}
@media (max-width:760px){
  .meter{display:none}.hudbar .geo{display:none}.hudbar{justify-content:flex-start}
  .step{align-items:stretch;padding-bottom:calc(52px + env(safe-area-inset-bottom,0px))}
  .capbox{width:100%;padding:18px 18px 20px}.capbox h2{font-size:2rem;margin:12px 0 8px}.capbox p.txt{font-size:1.02rem}
  .tag{font-size:.7rem}
  .scroll-cue{bottom:calc(40px + env(safe-area-inset-bottom,0px))}
  .bar .logo small{display:none}.bar-cta span{display:none}.bar-cta{padding:0 10px}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}