/* drifted.lol · diseno del sitio: dock flotante, tipografia gigante, scroll con historia, placa de UID */
@property --a{syntax:'<angle>';inherits:false;initial-value:0deg}
:root{--n0:#090f27;--n1:#1b1a54;--n2:#5b639a;--n3:#9c98cb;--tx:#eeedff;--hi:#ecebff;--n0r:9,15,39;--n1r:27,26,84;--n2r:91,99,154;--n3r:156,152,203;--ac:#b9a8ff;--line:rgba(var(--n3r),.18);--ease:cubic-bezier(.2,.8,.2,1);--spring:cubic-bezier(.34,1.56,.64,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:90px;-webkit-text-size-adjust:100%}
html,body{overflow-x:clip}
body{background:var(--n0);color:var(--tx);font:16px/1.6 "Figtree",system-ui,sans-serif;-webkit-font-smoothing:antialiased;min-height:100vh;padding-bottom:110px}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
[hidden]{display:none!important}
::selection{background:var(--n2);color:#fff}
h1,h2,h3,h4,.display{font-family:"Bricolage Grotesque",sans-serif;font-weight:800;letter-spacing:-.045em;line-height:1}
.mono,.kicker{font-family:"JetBrains Mono",ui-monospace,Consolas,monospace}
.kicker{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--n3)}
.h2{font-size:clamp(2.4rem,6.4vw,5.2rem);letter-spacing:-.05em;line-height:.96;margin:14px 0 0}
.h2 em{font-style:normal;background:linear-gradient(100deg,var(--n3),#fff 45%,var(--n2));-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{color:var(--n3);font-size:clamp(1rem,1.5vw,1.2rem);max-width:34em}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,40px)}

/* ---------- fondo ---------- */
.v2-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:radial-gradient(120% 80% at 50% -10%,#151a4c 0%,var(--n0) 62%)}
.v2-orb{position:absolute;border-radius:50%;animation:orb 28s ease-in-out infinite alternate;will-change:transform}
.o1{width:62vw;height:62vw;left:-16vw;top:-14vw;background:radial-gradient(circle,#5b639a,transparent 66%);opacity:.5}
.o2{width:52vw;height:52vw;right:-14vw;top:18vh;background:radial-gradient(circle,#2a2b8a,transparent 66%);opacity:.8;animation-duration:34s}
.o3{width:42vw;height:42vw;left:28vw;bottom:-22vw;background:radial-gradient(circle,#9c98cb,transparent 66%);opacity:.26;animation-duration:40s}
@keyframes orb{to{transform:translate3d(9vw,7vh,0) scale(1.18)}}
.v2-stars{position:absolute;inset:0;opacity:.85}
.v2-grain{position:absolute;inset:-25%;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1.1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
.fx-page{position:fixed;inset:0;z-index:9998;pointer-events:none}

/* ---------- barra superior + progreso ---------- */
.v2-prog{position:fixed;top:0;left:0;right:0;height:2px;z-index:70;transform-origin:0 50%;transform:scaleX(var(--p,0));background:linear-gradient(90deg,var(--n2),var(--ac),#fff)}
.v2-top{position:fixed;inset:0 0 auto 0;z-index:60;display:flex;justify-content:space-between;align-items:center;padding:16px clamp(16px,3vw,36px);pointer-events:none;transition:background .3s,backdrop-filter .3s}
.v2-top>*{pointer-events:auto}
.v2-top.is-scrolled{background:linear-gradient(180deg,rgba(var(--n0r),.94),rgba(var(--n0r),0))}
.v2-brand{display:flex;align-items:center;gap:9px;font:800 1.2rem "Bricolage Grotesque";letter-spacing:-.04em;color:var(--tx)}
.v2-brand .mark{transition:transform .5s var(--spring)}.v2-brand:hover .mark{transform:translateX(5px) rotate(-6deg)}
.v2-top__r{display:flex;align-items:center;gap:10px}
.v2-link{padding:9px 16px;border-radius:99px;font-weight:700;font-size:.9rem;color:var(--n3);transition:color .2s,background .2s}.v2-link:hover{color:var(--tx);background:rgba(var(--n3r),.12)}
.v2-chip{padding:9px 16px;border-radius:99px;font-weight:800;font-size:.9rem;background:var(--hi);color:var(--n0);transition:transform .25s var(--spring)}.v2-chip:hover{transform:scale(1.06)}

/* ---------- dock ---------- */
.dock{position:fixed;left:0;right:0;margin:0 auto;width:max-content;max-width:calc(100vw - 16px);bottom:16px;z-index:65;display:flex;align-items:flex-end;gap:6px;padding:8px 10px;border-radius:24px;background:rgba(var(--n0r),.9);border:1px solid var(--line);box-shadow:0 24px 70px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.07);animation:dockIn .9s var(--ease) .5s both}
@keyframes dockIn{from{opacity:0;transform:translateY(40px) scale(.9)}}
.dock__item{--s:1;position:relative;display:grid;place-items:center;width:46px;height:46px;border-radius:14px;color:var(--n3);transform-origin:50% 100%;transform:translateY(calc((1 - var(--s))*16px)) scale(var(--s));transition:transform .2s var(--ease),color .2s,background .2s}
.dock__item svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dock__item:hover{color:var(--tx);background:rgba(var(--n3r),.14)}
.dock__item.is-on{color:var(--tx)}.dock__item.is-on::after{content:"";position:absolute;bottom:-6px;width:4px;height:4px;border-radius:50%;background:var(--ac);box-shadow:0 0 8px var(--ac)}
.dock__tip{position:absolute;bottom:calc(100% + 14px);left:50%;transform:translate(-50%,6px);padding:5px 10px;border-radius:9px;background:rgba(var(--n0r),.96);border:1px solid var(--line);font:600 .7rem "JetBrains Mono",monospace;color:var(--tx);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s}
.dock__item:hover .dock__tip{opacity:1;transform:translate(-50%,0)}
.dock__sep{width:1px;height:26px;background:var(--line);margin:0 4px;align-self:center}
.dock__item--cta{width:auto;padding:0 20px;background:var(--hi);color:var(--n0);font:800 .92rem "Figtree",sans-serif;border-radius:15px;margin-left:2px}
.dock__item--cta:hover{background:#fff;color:var(--n0)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:92px;z-index:90;transform:translate(-50%,20px);opacity:0;padding:11px 20px;border-radius:99px;background:var(--hi);color:var(--n0);font-weight:800;font-size:.9rem;box-shadow:0 14px 40px rgba(0,0,0,.5);transition:transform .45s var(--spring),opacity .3s}
.toast.is-in{opacity:1;transform:translate(-50%,0)}

/* ---------- reveal ---------- */
[data-reveal]{opacity:0;transform:translateY(34px);filter:blur(8px);transition:opacity .9s var(--ease),transform .9s var(--ease),filter .9s var(--ease);transition-delay:var(--d,0ms)}
[data-reveal].is-in{opacity:1;transform:none;filter:none}
[data-mag]{transform:translate(var(--tx,0),var(--ty,0));transition:transform .3s var(--ease)}

/* ---------- botones ---------- */
.btn-big{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 28px;border-radius:99px;background:var(--hi);color:var(--n0);font:800 1.02rem "Figtree",sans-serif;overflow:hidden;isolation:isolate}
.btn-big::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.9) 50%,transparent 70%) -140% 0/260% 100% no-repeat;transition:background-position .7s var(--ease)}
.btn-big:hover::after{background-position:140% 0}
.btn-big svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--spring)}.btn-big:hover svg{transform:translateX(4px)}
.btn-big[disabled]{opacity:.6;cursor:wait}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;border-radius:99px;border:1px solid var(--line);background:rgba(var(--n1r),.4);font-weight:700;font-size:.92rem;color:var(--tx);transition:background .2s,border-color .2s,transform .25s var(--spring)}
.btn-ghost:hover{background:rgba(var(--n3r),.16);border-color:var(--n3);transform:translateY(-2px)}

/* ---------- hero ---------- */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;padding:clamp(96px,16vh,150px) 20px 70px}
.pill{display:inline-flex;align-items:center;gap:9px;padding:8px 16px;border-radius:99px;border:1px solid var(--line);background:rgba(var(--n1r),.45);font:500 .74rem "JetBrains Mono",monospace;letter-spacing:.06em;color:var(--n3);animation:fadeUp .9s var(--ease) .1s both}
.dot{width:7px;height:7px;border-radius:50%;background:#7be0b0;animation:ping 2s infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(123,224,176,.6)}100%{box-shadow:0 0 0 10px rgba(123,224,176,0)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}}
.mega{font-size:clamp(3.1rem,10.8vw,8.8rem);line-height:.92;letter-spacing:-.058em;margin-top:24px}
.mega .line{display:block}
.w{display:inline-block;opacity:0;transform:translateY(46%) rotate(5deg);filter:blur(12px);animation:wIn 1s var(--ease) forwards;animation-delay:calc(var(--i)*80ms + 250ms)}
@keyframes wIn{to{opacity:1;transform:none;filter:none}}
.roll{display:inline-block;height:1.02em;overflow:hidden;vertical-align:bottom;text-align:left;padding-right:.04em}
.roll__col{display:flex;flex-direction:column}
.roll__col b{display:block;height:1.02em;line-height:1.02;font-weight:800;background:linear-gradient(100deg,var(--n3),#fff 40%,var(--n2) 70%,var(--n3)) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s linear infinite}
@keyframes shine{to{background-position:-300% 0}}
.hero .lede{margin:24px auto 0;animation:fadeUp 1s var(--ease) .75s both}

.claim2{position:relative;display:flex;align-items:center;gap:8px;width:min(580px,100%);margin:34px auto 0;padding:7px 7px 7px 26px;border-radius:99px;background:rgba(var(--n0r),.88);animation:fadeUp 1s var(--ease) .9s both;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.claim2::before{content:"";position:absolute;inset:-2px;border-radius:inherit;padding:2px;background:conic-gradient(from var(--a),var(--n3),var(--n1) 22%,var(--ac) 50%,var(--n1) 78%,var(--n3));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:spinA 5s linear infinite;pointer-events:none}
@keyframes spinA{to{--a:360deg}}
.claim2 .pre{color:var(--n2);font-weight:700;font-size:1.05rem;white-space:nowrap}
.claim2 input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--tx);font:700 1.1rem "Figtree",sans-serif;padding:13px 4px}
.claim2 input::placeholder{color:var(--n2)}
.claim2 .btn-big{padding:14px 24px}
.claim-hint{min-height:1.5em;margin-top:12px;font:500 .8rem "JetBrains Mono",monospace;color:var(--n2);transition:color .2s}.claim-hint.ok{color:#7be0b0}.claim-hint.bad{color:#ff8fa3}

/* ---------- tarjetas de perfil flotantes ---------- */
.stack{position:relative;width:min(1000px,100%);height:470px;margin:54px auto 0;--px:0;--py:0;perspective:1200px}
.pc{position:absolute;left:50%;top:0;width:280px;margin-left:-140px;translate:calc(var(--px)*var(--dp,10)*1px) calc(var(--py)*var(--dp,10)*.7px);transition:translate .35s var(--ease),rotate .5s var(--spring),scale .5s var(--spring)}
.pc--c{--dp:8;z-index:3;width:310px;margin-left:-155px;top:0}
.pc--l{--dp:20;z-index:2;rotate:-8deg;left:calc(50% - 285px);top:48px}
.pc--r{--dp:20;z-index:2;rotate:8deg;left:calc(50% + 285px);top:48px}
.pc:hover{z-index:5;rotate:0deg;scale:1.04}
.pc__in{position:relative;border-radius:30px;background:#05060f;overflow:hidden;isolation:isolate;box-shadow:0 40px 90px rgba(0,0,0,.6);animation:bob 7s ease-in-out infinite}
.pc--l .pc__in{animation-delay:-2.4s}.pc--r .pc__in{animation-delay:-4.8s}
@keyframes bob{50%{transform:translateY(-14px)}}
.pc__in::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;background:conic-gradient(from var(--a),var(--ac),transparent 30%,var(--ac) 55%,transparent 80%,var(--ac));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:spinA 6s steps(180) infinite;z-index:3;pointer-events:none}
.pc__fx{position:absolute;inset:0;z-index:0}
.pc__body{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:9px;padding:30px 20px 24px;text-align:center}
.pc__av{position:relative;display:grid;place-items:center;width:74px;height:74px;border-radius:50%;font:800 1.8rem "Bricolage Grotesque";background:radial-gradient(circle at 30% 25%,var(--ac),var(--n2) 60%,var(--n1));color:#fff;box-shadow:0 0 30px color-mix(in srgb,var(--ac) 45%,transparent)}
.pc__av::before{content:"";position:absolute;inset:-6px;border-radius:50%;background:conic-gradient(var(--ac),transparent 30%,var(--ac) 60%,transparent 90%,var(--ac));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));animation:spin 3.4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.pc__name{font-size:1.55rem;margin-top:8px;color:#fff}
.pc__meta{display:flex;gap:7px}.pc__meta span{padding:3px 10px;border-radius:99px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);font:600 .68rem "JetBrains Mono",monospace;color:#cfd3f5}.pc__meta .on{color:#7be0b0}
.pc__bio{color:#b6bbe6;font-size:.88rem}
.pc__badges{display:flex;gap:6px;margin:2px 0 4px}
.pc__link{width:100%;padding:11px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.09);font-weight:700;font-size:.88rem;transition:background .2s,transform .25s var(--spring)}
.pc__link:hover{background:color-mix(in srgb,var(--ac) 26%,transparent);transform:translateY(-2px)}

.scrollcue{position:absolute;bottom:26px;left:50%;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:8px;font:500 .68rem "JetBrains Mono",monospace;letter-spacing:.2em;text-transform:uppercase;color:var(--n2);animation:fadeUp 1s var(--ease) 1.6s both}
.scrollcue i{width:1px;height:34px;background:linear-gradient(var(--n3),transparent);transform-origin:top;animation:cue 2s ease-in-out infinite}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* ---------- franjas que corren ---------- */
.strips{padding:60px 0 20px;overflow:hidden;transform:rotate(-2deg);margin:0 -4vw}
.strip{display:flex;width:max-content;align-items:center;gap:34px;white-space:nowrap;animation:marq 55s linear infinite}
.strip--b .bdg::after{display:none}
.strip--b .bdg .sh{animation:none!important}
/* lo que esta fuera de pantalla no anima: cada seccion marca data-vis="0" cuando no se ve (home.js) */
[data-vis="0"] *,[data-vis="0"] *::before,[data-vis="0"] *::after{animation-play-state:paused!important}
.strip--b{margin-top:22px;animation-duration:70s;animation-direction:reverse;gap:30px}
@keyframes marq{to{transform:translateX(-50%)}}
.strip--a span{font:800 clamp(3rem,8.5vw,7rem) "Bricolage Grotesque";letter-spacing:-.05em;line-height:1;color:rgba(var(--n3r),.2);transition:color .3s}
.strip--a span:hover{color:rgba(var(--n3r),.6)}
.strip--a i{font-style:normal;font-size:2rem;color:var(--ac)}

/* ---------- scroll con historia (story) ---------- */
.story{position:relative;padding-top:130px;padding-bottom:40px}
.story__intro{max-width:760px}
/* El telefono se disena a 340px de ancho y escala entero con --u (1 "pixel de diseno").
 * --pw (ancho real) sale del ancho Y del alto de la pantalla, asi siempre entra completo. */
.story__grid{display:grid;grid-template-columns:minmax(300px,460px) 1fr;gap:clamp(30px,6vw,90px);margin-top:50px;align-items:start}
.story__stage{--vh:1vh;--ar:17.2;--pw:clamp(220px,min(26vw,calc((100*var(--vh) - 200px)*9/var(--ar))),400px);--u:calc(var(--pw)/340);position:sticky;top:max(76px,calc(50*var(--vh) - var(--pw)*var(--ar)/18 - 24px));padding-bottom:20px}
@supports (height:100svh){.story__stage{--vh:1svh}}
.phone{position:relative;width:var(--pw);max-width:100%;margin:0 auto;aspect-ratio:9/var(--ar);border-radius:calc(46*var(--u));padding:calc(10*var(--u));background:linear-gradient(160deg,#2b2f6e,#0b0e2e);border:1px solid rgba(255,255,255,.14);box-shadow:0 calc(60*var(--u)) calc(120*var(--u)) rgba(0,0,0,.65),0 0 calc(100*var(--u)) rgba(var(--n2r),.28)}
.phone::before{content:"";position:absolute;top:calc(18*var(--u));left:50%;translate:-50% 0;width:calc(84*var(--u));height:calc(22*var(--u));border-radius:99px;background:#02030a;z-index:8}
.live{position:relative;height:100%;border-radius:calc(37*var(--u));overflow:hidden;background:#05060f;isolation:isolate;--ac:#b9a8ff}
.live__bg{position:absolute;inset:0;z-index:0}
.live__bg .fx-canvas{animation:cvIn .8s ease both}
@keyframes cvIn{from{opacity:0}}
.live__card{position:relative;z-index:1;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(11*var(--u));padding:calc(46*var(--u)) calc(22*var(--u)) calc(26*var(--u));text-align:center}
.live__av{position:relative;display:grid;place-items:center;width:calc(82*var(--u));height:calc(82*var(--u));border-radius:50%;font:800 calc(32*var(--u)) "Bricolage Grotesque";background:radial-gradient(circle at 30% 25%,var(--ac),var(--n2) 60%,var(--n1));color:#fff}
.live__av::before{content:"";position:absolute;inset:calc(-7*var(--u));border-radius:50%;background:conic-gradient(var(--ac),transparent 30%,var(--ac) 60%,transparent 90%,var(--ac));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2px));animation:spin 3.4s linear infinite}
.live__name{font-size:calc(30.4*var(--u));margin-top:calc(6*var(--u));color:#fff}
.live__meta{display:flex;gap:calc(7*var(--u))}.live__meta span{padding:calc(3*var(--u)) calc(11*var(--u));border-radius:99px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);font:600 calc(10.9*var(--u)) "JetBrains Mono",monospace;color:#cfd3f5}.live__meta .on{color:#7be0b0}
.live__bio{min-height:1.4em;color:#b6bbe6;font-size:calc(14.7*var(--u))}
.live__badges{display:flex;flex-wrap:wrap;justify-content:center;gap:calc(7*var(--u));min-height:calc(34*var(--u))}
.live__badges .bdg{--bs:calc(34*var(--u))!important;animation:bpop .55s var(--spring) both}
@keyframes bpop{from{opacity:0;transform:scale(.2) rotate(-40deg)}}
.live__link{width:100%;padding:calc(12*var(--u));border-radius:calc(15*var(--u));border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.09);font-weight:700;font-size:calc(14.4*var(--u))}
.live__player{display:flex;align-items:center;gap:calc(10*var(--u));width:100%;padding:calc(10*var(--u)) calc(12*var(--u));border-radius:calc(16*var(--u));background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.14);text-align:left;font-size:calc(12.8*var(--u));font-weight:700;transform:translateY(0);transition:opacity .6s,transform .6s var(--ease)}
.live__player small{display:block;color:#aab0e6;font-weight:500;font-size:calc(11.2*var(--u))}
.live__cover{width:calc(36*var(--u));height:calc(36*var(--u));border-radius:calc(10*var(--u));background:conic-gradient(from 200deg,var(--ac),var(--n2),var(--n1),var(--ac))}
.eq2{margin-left:auto;display:flex;gap:calc(3*var(--u));align-items:flex-end;height:calc(20*var(--u))}.eq2 i{width:calc(4*var(--u));background:var(--ac);border-radius:2px;animation:eq 1s ease-in-out infinite alternate}
.eq2 i:nth-child(2){animation-delay:-.3s}.eq2 i:nth-child(3){animation-delay:-.6s}.eq2 i:nth-child(4){animation-delay:-.15s}
@keyframes eq{from{height:20%}to{height:100%}}
.live.is-gated .live__player{opacity:0;transform:translateY(14px)}
.live__gate{position:absolute;inset:0;z-index:7;display:grid;place-items:center;background:rgba(5,6,15,.55);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);font:800 calc(18.4*var(--u)) "Bricolage Grotesque";letter-spacing:-.02em;transition:opacity .6s,visibility .6s;cursor:pointer}
.live__gate span{animation:gatePulse 2.2s ease-in-out infinite}
@keyframes gatePulse{50%{opacity:.45;letter-spacing:.04em}}
.live:not(.is-gated) .live__gate{opacity:0;visibility:hidden;pointer-events:none}
.story__cap{margin-top:22px;text-align:center;font:500 .76rem "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--n3);min-height:1.4em}
.story__steps{padding-bottom:20vh}
.step{min-height:78vh;display:flex;flex-direction:column;justify-content:center;gap:16px;opacity:.28;transition:opacity .5s;padding:20px 0}
.step.is-active{opacity:1}
.step__n{font:500 .8rem "JetBrains Mono",monospace;letter-spacing:.2em;color:var(--ac)}
.step h3{font-size:clamp(2rem,4.4vw,3.4rem);letter-spacing:-.05em;line-height:.98}
.step p{color:var(--n3);max-width:30em}
.opts{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.opt{padding:9px 16px;border-radius:99px;border:1px solid var(--line);background:rgba(var(--n1r),.4);font-weight:700;font-size:.86rem;color:var(--n3);transition:all .25s var(--ease)}
.opt:hover{color:var(--tx);border-color:var(--n3);transform:translateY(-2px)}
.opt.on{background:var(--hi);color:var(--n0);border-color:transparent}
.opts-label{margin-top:10px;font:500 .7rem "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--n2)}
.opt--sw{width:32px;height:32px;padding:0;background:var(--c);border:2px solid transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.opt--sw:hover{border-color:var(--n3);transform:translateY(-2px) scale(1.08)}
.opt--sw.on{background:var(--c);border-color:#fff;transform:scale(1.12)}
.bhost .bdg::after{display:none}

/* ---------- muro de insignias ---------- */
.walls{padding-top:130px;padding-bottom:40px}
.filters{display:flex;flex-wrap:wrap;gap:8px;margin:34px 0 30px}
.bwall{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.bcard{--tc:var(--n3);position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:26px 24px;border-radius:26px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(var(--n1r),.55),rgba(var(--n0r),.6));overflow:hidden;transition:opacity .35s,scale .35s var(--ease),border-color .3s}
.bcard::before{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),color-mix(in srgb,var(--tc) 28%,transparent),transparent 65%);opacity:0;transition:opacity .3s;pointer-events:none}
.bcard:hover{border-color:color-mix(in srgb,var(--tc) 60%,transparent)}.bcard:hover::before{opacity:1}
.bcard.t-rare{--tc:#4f8cff}.bcard.t-epic{--tc:#a66bff}.bcard.t-legendary{--tc:#ffb83a}.bcard.t-special{--tc:#ff4f84}
.bcard.is-off{opacity:0;scale:.86;pointer-events:none}
.bcard h4{font-size:1.25rem;margin-top:2px}
.bcard p{color:var(--n3);font-size:.9rem;line-height:1.45}
.tier{padding:3px 10px;border-radius:99px;font:600 .64rem "JetBrains Mono",monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--tc);border:1px solid color-mix(in srgb,var(--tc) 45%,transparent);background:color-mix(in srgb,var(--tc) 10%,transparent)}

/* ---------- placa de UID ---------- */
.plate-sec{display:grid;grid-template-columns:1fr minmax(320px,520px);gap:clamp(30px,6vw,90px);align-items:center;padding-top:140px;padding-bottom:40px}
.plate-ctl{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;align-items:center}
.plate-in{width:150px;padding:13px 18px;border-radius:99px;border:1px solid var(--line);background:rgba(var(--n0r),.7);color:var(--tx);font:700 1.05rem "JetBrains Mono",monospace;outline:0;transition:border-color .2s}.plate-in:focus{border-color:var(--n3)}
.plate{position:relative;width:100%;padding:16px 24px 18px;border-radius:22px;background:linear-gradient(160deg,#f3f1ff,#cdc9f0 55%,#b2aee0);color:#14143e;box-shadow:0 40px 90px rgba(0,0,0,.55),inset 0 0 0 4px #14143e,inset 0 0 0 6px rgba(255,255,255,.55);overflow:hidden;isolation:isolate;rotate:-2deg;transition:rotate .6s var(--spring)}
.plate:hover{rotate:0deg}
.plate__top,.plate__bot{display:flex;justify-content:space-between;font:700 .72rem "JetBrains Mono",monospace;letter-spacing:.3em;color:#3a3a8a;padding:2px 14px}
.plate__num{display:flex;justify-content:center;gap:clamp(2px,1vw,8px);font:800 clamp(3.2rem,9vw,6.4rem) "Bricolage Grotesque";line-height:1;margin:8px 0 6px;letter-spacing:-.04em}
.dg{display:block;height:1em;overflow:hidden;width:.66em;text-align:center}
.dg__col{display:flex;flex-direction:column;height:11em;transition:transform 1s var(--ease)}.dg__col i{display:block;height:1em;font-style:normal;line-height:1}
.dg.is-zero{opacity:.22}
.plate__screw{position:absolute;width:11px;height:11px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#8c88c4 70%);box-shadow:inset 0 0 0 1px rgba(20,20,62,.4)}
.plate__screw.s1{left:14px;top:50%}.plate__screw.s2{right:14px;top:50%}.s3,.s4{display:none}
.plate__shine{position:absolute;inset:0;z-index:2;background:linear-gradient(112deg,transparent 40%,rgba(255,255,255,.85) 50%,transparent 60%) -160% 0/260% 100% no-repeat;mix-blend-mode:overlay;animation:plateShine 5.5s ease-in-out infinite;pointer-events:none}
@keyframes plateShine{0%,55%{background-position:-160% 0}100%{background-position:160% 0}}
.plate--sm{max-width:380px;margin:0 auto}.plate--sm .plate__num{font-size:clamp(2.8rem,10vw,4.6rem)}

/* ---------- ruta (como funciona) ---------- */
.road-sec{padding-top:140px;padding-bottom:40px}
.road{position:relative;margin-top:50px}
.road svg{display:block;width:100%;height:auto;overflow:visible}
.road__bed{fill:none;stroke:rgba(var(--n1r),.9);stroke-width:46;stroke-linecap:round}
.road__edge{fill:none;stroke:rgba(var(--n3r),.28);stroke-width:50;stroke-linecap:round;opacity:.45}
.road__dash{fill:none;stroke:var(--n3);stroke-width:3;stroke-dasharray:14 16;animation:dashMove 1.2s linear infinite;opacity:.85}
@keyframes dashMove{to{stroke-dashoffset:-30}}
.road__skid{fill:none;stroke:rgba(255,255,255,.4);stroke-width:2;stroke-linecap:round}
.road__car{color:var(--tx)}
.road__car .glow{filter:drop-shadow(0 0 10px rgba(185,168,255,.7))}
.spark{position:absolute;pointer-events:none;color:#ffb347;font-size:12px;text-shadow:0 0 8px #ff7a2e;animation:sparkOut .7s ease-out forwards}
@keyframes sparkOut{to{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.2)}}
.road__steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:-10px}
.rstep{padding:26px;border-radius:26px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(var(--n1r),.5),rgba(var(--n0r),.55));opacity:.45;transform:translateY(8px);transition:opacity .5s,transform .6s var(--spring),border-color .4s}
.rstep.is-on{opacity:1;transform:none;border-color:var(--n3)}
.rstep .num{font:800 3.4rem "Bricolage Grotesque";letter-spacing:-.05em;line-height:1;color:rgba(var(--n3r),.32)}
.rstep h3{font-size:1.5rem;margin:12px 0 6px}.rstep p{color:var(--n3);font-size:.95rem}

/* ---------- FAQ ---------- */
.faq{padding-top:140px;padding-bottom:40px}
.faq__list{margin-top:36px;max-width:820px}
.qa{border-bottom:1px solid var(--line)}
.qa__q{display:flex;justify-content:space-between;align-items:center;gap:20px;width:100%;padding:26px 0;text-align:left;font:800 clamp(1.15rem,2.4vw,1.55rem) "Bricolage Grotesque";letter-spacing:-.035em;color:var(--tx)}
.qa__q i{position:relative;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);transition:transform .5s var(--spring),background .3s,border-color .3s}
.qa__q i::before,.qa__q i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;background:var(--n3);translate:-50% -50%;transition:rotate .4s var(--ease)}.qa__q i::after{rotate:90deg}
.qa.is-open .qa__q i{transform:rotate(180deg);background:var(--hi);border-color:transparent}.qa.is-open .qa__q i::before,.qa.is-open .qa__q i::after{background:var(--n0)}.qa.is-open .qa__q i::after{rotate:0deg}
.qa__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s var(--ease)}.qa.is-open .qa__a{grid-template-rows:1fr}
.qa__a>div{overflow:hidden}.qa__a p{padding:0 0 26px;color:var(--n3);max-width:38em}
.qa__a a{color:var(--tx);font-weight:700;border-bottom:1px solid var(--n2)}

/* ---------- cierre ---------- */
.final{position:relative;margin:120px auto 0;width:min(1180px,calc(100% - 28px));min-height:620px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:90px 20px;border-radius:44px;overflow:hidden;border:1px solid var(--line);background:linear-gradient(180deg,rgba(var(--n1r),.55),rgba(var(--n0r),.85));isolation:isolate}
.final__fx{position:absolute;inset:0;z-index:-1}
.final__mega{font-size:clamp(5rem,19vw,15rem);line-height:.86;letter-spacing:-.07em;background:linear-gradient(100deg,var(--n3),#fff 35%,var(--n2) 65%,var(--n3)) 0 0/300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
.final .lede{margin:18px auto 0}
.final .claim2{animation:none}

/* ---------- pie ---------- */
.foot{position:relative;margin-top:90px;padding:40px clamp(18px,4vw,40px) 30px;overflow:hidden}
.foot__mega{font:800 clamp(4rem,22vw,19rem) "Bricolage Grotesque";letter-spacing:-.07em;line-height:.8;text-align:center;color:transparent;white-space:nowrap;background:linear-gradient(180deg,rgba(var(--n3r),.5),transparent 78%);-webkit-background-clip:text;background-clip:text;user-select:none}
.foot__row{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;max-width:1180px;margin:30px auto 0;color:var(--n2);font-size:.9rem}
.foot__row div{display:flex;flex-wrap:wrap;gap:10px 24px}.foot__row a{transition:color .2s}.foot__row a:hover{color:var(--tx)}

/* ---------- cajon de registro / login ---------- */
.scrim{position:fixed;inset:0;z-index:80;background:rgba(5,7,22,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .4s,visibility .4s}
.scrim.is-on{opacity:1;visibility:visible}
.drawer{position:fixed;top:0;right:0;bottom:0;z-index:85;width:min(480px,100vw);display:flex;flex-direction:column;padding:34px clamp(22px,4vw,40px) 26px;background:linear-gradient(180deg,rgba(18,19,66,.97),rgba(8,12,34,.99));border-left:1px solid var(--line);box-shadow:-40px 0 120px rgba(0,0,0,.6);transform:translateX(104%);transition:transform .65s var(--ease);overflow-y:auto}
.drawer.is-on{transform:none}
.drawer__x{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);font-size:1.3rem;line-height:1;color:var(--n3);transition:all .25s var(--spring)}.drawer__x:hover{color:var(--tx);border-color:var(--n3);rotate:90deg}
.seg{position:relative;display:inline-flex;align-self:flex-start;padding:4px;border-radius:99px;border:1px solid var(--line);background:rgba(var(--n0r),.55)}
.seg button{position:relative;z-index:1;padding:9px 18px;border-radius:99px;font-weight:800;font-size:.86rem;color:var(--n3);transition:color .3s}.seg button.on{color:var(--n0)}
.seg__ind{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;border-radius:99px;background:var(--hi);transition:left .45s var(--spring),width .45s var(--spring)}
.drawer .kicker{margin-top:34px}
.drawer__title{font-size:clamp(2.2rem,5vw,3rem);letter-spacing:-.05em;margin:10px 0 0}
.drawer__sub{color:var(--n3);margin:8px 0 6px}
.fld{margin-top:22px}
.fld label{display:block;font:600 .7rem "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--n3)}
.fld__row{display:flex;align-items:center;gap:6px;border-bottom:2px solid var(--line);transition:border-color .3s;margin-top:4px}
.fld__row:focus-within{border-color:var(--ac)}
.fld__pre{color:var(--n2);font-weight:700;font-size:1.15rem;white-space:nowrap}
.fld input{flex:1;min-width:0;background:none;border:0;outline:0;color:var(--tx);font:700 1.25rem "Figtree",sans-serif;padding:12px 0}
.fld__eye{font:700 .74rem "JetBrains Mono",monospace;color:var(--n3);padding:6px 4px}.fld__eye:hover{color:var(--tx)}
.tick{width:22px;height:22px;flex:none}.tick path{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;transition:stroke-dashoffset .5s var(--ease)}
.tick.ok path{stroke:#7be0b0;stroke-dashoffset:0}.tick.bad path{stroke:#ff8fa3;stroke-dashoffset:0}
.hint{display:block;min-height:1.4em;margin-top:7px;font:500 .78rem "JetBrains Mono",monospace;color:var(--n2)}.hint.ok{color:#7be0b0}.hint.bad{color:#ff8fa3}
.meter{display:flex;gap:5px;margin-top:10px}.meter i{flex:1;height:4px;border-radius:2px;background:rgba(var(--n3r),.18);transition:background .3s}
.meter[data-s="1"] i:nth-child(-n+1){background:#ff8fa3}.meter[data-s="2"] i:nth-child(-n+2){background:#ffb347}.meter[data-s="3"] i:nth-child(-n+3){background:#c8e86b}.meter[data-s="4"] i{background:#7be0b0}
.err{min-height:1.4em;margin-top:14px;color:#ff8fa3;font-size:.9rem}
.err.shake{animation:shake .45s}
@keyframes shake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.drawer .btn-big{width:100%;margin-top:6px;padding:18px}
.invited{margin:2px 0 10px;padding:10px 14px;border-radius:14px;border:1px solid rgba(var(--n3r),.3);background:rgba(var(--n3r),.1);color:var(--tx);font-size:.9rem;font-weight:700}
.alt{margin-top:18px}
.alt__or{display:flex;align-items:center;gap:14px;margin-bottom:14px;color:var(--n2);font:600 .74rem "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase}
.alt__or::before,.alt__or::after{content:"";flex:1;height:1px;background:var(--line)}
.btn-discord{display:flex;align-items:center;justify-content:center;gap:11px;padding:16px;border-radius:99px;background:#5865f2;color:#fff;font:800 1rem "Figtree",sans-serif;transition:transform .25s var(--spring),background .2s}
.btn-discord:hover{background:#4752c4;transform:translateY(-2px)}
.btn-discord svg{width:22px;height:22px;fill:currentColor}
.alt .hint{display:block;margin-top:10px;text-align:center}
.drawer__foot{margin-top:auto;padding-top:22px;font-size:.78rem;color:var(--n2);text-align:center}.drawer__foot a{color:var(--n3);text-decoration:underline}
.success{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:30px;text-align:center;background:linear-gradient(180deg,rgba(18,19,66,.99),rgba(8,12,34,1));animation:fadeUp .6s var(--ease)}
.success h3{font-size:2.2rem;letter-spacing:-.05em}.success p{color:var(--n3)}
.success .plate{margin-top:6px}
.confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6}

/* ---------- panel (dashboard) ---------- */
.dash{padding-top:130px;padding-bottom:40px}
.dash h1{font-size:clamp(2.6rem,7vw,5.6rem);letter-spacing:-.055em;line-height:.95;margin-top:14px}
.dash h1 .wave{display:inline-block;transform-origin:70% 70%;animation:wave 2.2s ease-in-out infinite}
@keyframes wave{0%,60%,100%{transform:rotate(0)}10%{transform:rotate(16deg)}20%{transform:rotate(-8deg)}30%{transform:rotate(14deg)}40%{transform:rotate(-4deg)}50%{transform:rotate(10deg)}}
.dgrid{display:grid;grid-template-columns:repeat(12,1fr);gap:16px;margin-top:44px}
.dcard{position:relative;padding:30px;border-radius:30px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(var(--n1r),.55),rgba(var(--n0r),.6));overflow:hidden}
.dcard h3{font-size:1.5rem;letter-spacing:-.04em}.dcard>p{color:var(--n3);margin-top:6px;font-size:.95rem}
.c7{grid-column:span 7}.c5{grid-column:span 5}.c12{grid-column:span 12}
.copyrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:20px}
.dstats{display:inline-block;padding:10px 2px;font:600 .78rem "JetBrains Mono",monospace;letter-spacing:.04em;color:var(--n3)}
a.dstats:hover{color:var(--tx);text-decoration:underline}
.linkbox{flex:1;min-width:200px;padding:15px 20px;border-radius:16px;border:1px dashed var(--n2);font:700 1.1rem "JetBrains Mono",monospace;word-break:break-all}
.lock-grid{display:flex;flex-wrap:wrap;gap:16px 14px;margin-top:22px}
.lock{position:relative;filter:grayscale(1) brightness(.8);opacity:.5;transition:all .3s}.lock:hover,.lock.has{filter:none;opacity:1}
.btn-sm{display:inline-flex;align-items:center;gap:8px;padding:12px 22px;border-radius:99px;background:var(--hi);color:var(--n0);font:800 .92rem "Figtree",sans-serif;transition:transform .25s var(--spring)}.btn-sm:hover{transform:translateY(-2px) scale(1.03)}
.dlinked{display:flex;align-items:center;gap:14px;margin-top:20px}
.dlinked[hidden]{display:none}
.dlinked img{width:52px;height:52px;border-radius:50%;border:2px solid var(--line);background:var(--n1)}
.dlinked b{display:block;font-size:1.05rem}.dlinked small{color:var(--n3)}
/* actividad de Discord: interruptor y vista previa */
.dact{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.dact[hidden]{display:none}
.switch{display:flex;align-items:flex-start;gap:14px;cursor:pointer}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch>i{position:relative;flex:none;width:46px;height:26px;margin-top:2px;border-radius:99px;background:rgba(var(--n1r),.9);border:1px solid var(--line);transition:background .25s,border-color .25s}
.switch>i::after{content:"";position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:var(--n3);transition:transform .3s var(--spring),background .25s}
.switch input:checked+i{background:var(--ac);border-color:transparent}
.switch input:checked+i::after{transform:translateX(20px);background:#fff}
.switch input:focus-visible+i{outline:2px solid var(--n3);outline-offset:3px}
.switch b{display:block;font-size:1rem}.switch small{display:block;margin-top:3px;max-width:46em;color:var(--n3);font-size:.86rem;line-height:1.45}
.actnow{display:flex;align-items:center;gap:14px;margin-top:16px;padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:rgba(var(--n0r),.55)}
.actnow[hidden]{display:none}
.actnow img{width:56px;height:56px;border-radius:12px;object-fit:cover;background:var(--n1)}
.actnow img[hidden]{display:none}
.actnow small{display:block;font:500 .68rem "JetBrains Mono",monospace;letter-spacing:.14em;text-transform:uppercase;color:var(--ac)}
.actnow b{display:block;margin-top:3px;font-size:1.05rem}.actnow span{display:block;color:var(--n3);font-size:.88rem}
/* cartel de bienvenida (primer ingreso) */
.welcome{position:fixed;left:50%;top:50%;z-index:85;width:min(480px,calc(100vw - 32px));padding:34px clamp(22px,5vw,38px) 30px;border-radius:30px;background:linear-gradient(180deg,rgba(18,19,66,.98),rgba(8,12,34,.99));border:1px solid var(--line);box-shadow:0 40px 120px rgba(0,0,0,.65),0 0 90px rgba(var(--n2r),.3);opacity:0;visibility:hidden;transform:translate(-50%,-46%) scale(.95);transition:opacity .4s,transform .55s var(--spring),visibility .4s}
.welcome.is-on{opacity:1;visibility:visible;transform:translate(-50%,-50%)}
.welcome h2{font-size:clamp(2rem,6vw,2.7rem);letter-spacing:-.05em;line-height:1;margin:10px 0 12px}
.welcome p:not(.kicker){color:var(--n3);font-size:1rem;line-height:1.5}
.welcome__btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:24px}
.edprev{position:relative;height:150px;margin-top:20px;border-radius:18px;overflow:hidden;background:#05060f;border:1px solid var(--line);display:grid;place-items:center}
.edprev b{position:relative;z-index:1;font:800 1.7rem "Bricolage Grotesque";letter-spacing:-.04em}
.soonchip{position:absolute;top:22px;right:22px;padding:5px 12px;border-radius:99px;border:1px solid var(--line);font:600 .66rem "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase;color:var(--n3)}
.rows{margin-top:18px}.rows div{display:flex;justify-content:space-between;gap:16px;padding:14px 0;border-top:1px solid var(--line);color:var(--n3)}.rows b{color:var(--tx);font-weight:700;text-align:right;word-break:break-all}
/* primeros pasos e invitaciones */
.goprog,.refbar{height:8px;margin-top:18px;border-radius:99px;background:rgba(var(--n1r),.9);overflow:hidden}
.goprog i,.refbar i{display:block;height:100%;width:0;border-radius:inherit;background:linear-gradient(90deg,var(--n2),var(--ac));transition:width .9s var(--ease)}
.golist{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:20px}
.golist a{display:flex;align-items:flex-start;gap:12px;padding:14px 16px;border-radius:18px;border:1px solid var(--line);background:rgba(var(--n0r),.45);transition:border-color .2s,transform .25s var(--spring),background .2s}
.golist a:hover{border-color:var(--n3);transform:translateY(-2px);background:rgba(var(--n3r),.1)}
.golist i,.tiers i{flex:none;display:grid;place-items:center;width:26px;height:26px;margin-top:1px;border-radius:50%;border:1.5px solid var(--n2);font:800 .72rem "JetBrains Mono",monospace;font-style:normal;color:var(--n3)}
.golist li.done i,.tiers li.done i{background:var(--ac);border-color:transparent;color:var(--n0)}
.golist li.done a{opacity:.55}
.golist b{display:block;font-size:.98rem}.golist small{display:block;margin-top:2px;color:var(--n3);font-size:.82rem;line-height:1.4}
.tiers{list-style:none;display:grid;gap:8px;margin-top:16px}
.tiers li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(var(--n0r),.4);font-size:.92rem;color:var(--n3)}
.tiers li.next{border-color:var(--ac);color:var(--tx)}.tiers li.done{color:var(--tx)}
#rCount{margin-top:10px}
.mini{list-style:none;display:grid;gap:8px;margin-top:16px}
.mini:empty{display:none}
.mini li{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(var(--n0r),.4)}
.mini i{flex:none;width:22px;text-align:center;font:800 .9rem "JetBrains Mono",monospace;font-style:normal;color:var(--ac)}
.mini a{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700}.mini a:hover{text-decoration:underline}
.mini span{flex:none;color:var(--n3);font:600 .76rem "JetBrains Mono",monospace}
/* seguridad */
.sec2{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:16px;margin-top:22px}
.sec2__box{padding:22px;border-radius:22px;border:1px solid var(--line);background:rgba(var(--n0r),.45)}
.sec2 h4{font-size:1.1rem;letter-spacing:-.03em}
.hint2{margin:6px 0 14px;color:var(--n3);font-size:.88rem;line-height:1.45}
.lab2{display:block;margin:12px 0 6px;font-weight:700;font-size:.86rem}
.in2{width:100%;min-height:46px;padding:11px 16px;border-radius:14px;border:1px solid var(--line);background:rgba(var(--n1r),.6);color:var(--tx);font:inherit;font-size:16px;outline:0;transition:border-color .2s,box-shadow .2s}
.in2:focus{border-color:var(--n3);box-shadow:0 0 0 3px rgba(var(--n3r),.18)}
.msg2{min-height:1.4em;margin:12px 0;font-size:.86rem;color:var(--n3)}.msg2.ok{color:#7be0b0}.msg2.bad{color:#ff8fa3}
.btn-danger{border-color:rgba(255,122,150,.45);color:#ffb3c2}.btn-danger:hover{background:rgba(255,122,150,.14);border-color:#ff7a96}
.sec2 .btn-sm:disabled,.sec2 .btn-ghost:disabled{opacity:.5;cursor:wait}
.dash .stagger>*{opacity:0;transform:translateY(30px);animation:stagIn .9s var(--ease) forwards;animation-delay:calc(var(--i)*110ms + 150ms)}
@keyframes stagIn{to{opacity:1;transform:none}}

/* ---------- ranking ---------- */
.lb{padding-top:130px;padding-bottom:40px;max-width:860px}
.lb h1{font-size:clamp(2.6rem,7vw,5.2rem);letter-spacing:-.055em;line-height:.95;margin-top:14px}
.lb .lede{margin-top:16px}
.lb-tabs{display:flex;flex-wrap:wrap;gap:8px;margin-top:32px}
.lb-tab{padding:11px 20px;border-radius:99px;border:1px solid var(--line);background:rgba(var(--n1r),.4);font-weight:800;font-size:.92rem;color:var(--n3);transition:all .2s}
.lb-tab:hover{color:var(--tx);border-color:var(--n3)}.lb-tab.on{background:var(--hi);color:var(--n0);border-color:transparent}
.lb-sub{margin-top:16px;color:var(--n3);font-size:.95rem;min-height:1.4em}
.lb-list{list-style:none;display:grid;gap:10px;margin-top:18px}
.lb-row{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(var(--n1r),.5),rgba(var(--n0r),.55));transition:transform .25s var(--spring),border-color .2s,background .2s}
.lb-row:hover{transform:translateY(-2px);border-color:var(--n3)}
.lb-row.me{border-color:var(--ac);box-shadow:0 0 0 1px var(--ac) inset}
.lb-rank{flex:none;width:34px;text-align:center;font:800 1.15rem "JetBrains Mono",monospace;color:var(--n3)}
.lb-row.top1 .lb-rank{color:#ffd45e;font-size:1.5rem}.lb-row.top2 .lb-rank{color:#d7dcf0;font-size:1.35rem}.lb-row.top3 .lb-rank{color:#e8a06b;font-size:1.25rem}
.lb-row.top1{border-color:rgba(255,212,94,.5);background:linear-gradient(160deg,rgba(255,212,94,.12),rgba(var(--n0r),.55))}
.lb-av{flex:none;display:grid;place-items:center;width:48px;height:48px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 30% 25%,var(--ac),#1b1a54 70%);font:800 1.2rem "Bricolage Grotesque";color:#fff}
.lb-av img{width:100%;height:100%;object-fit:cover}
.lb-t{flex:1;min-width:0}
.lb-t b{display:flex;align-items:center;gap:8px;font-size:1.02rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-t b em{flex:none;padding:1px 8px;border-radius:99px;background:var(--ac);color:var(--n0);font:800 .64rem "JetBrains Mono",monospace;font-style:normal;letter-spacing:.06em;text-transform:uppercase}
.lb-t small{display:block;color:var(--n3);font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-val{flex:none;text-align:right;font:800 1.25rem "Bricolage Grotesque";letter-spacing:-.03em}
.lb-val small{display:block;color:var(--n3);font:600 .64rem "JetBrains Mono",monospace;letter-spacing:.12em;text-transform:uppercase}
.lb-skel{height:78px;border-radius:22px;border:1px solid var(--line);background:linear-gradient(90deg,rgba(var(--n1r),.35),rgba(var(--n3r),.14),rgba(var(--n1r),.35)) 0 0/200% 100%;animation:lbSkel 1.3s linear infinite}
@keyframes lbSkel{to{background-position:-200% 0}}
.lb-empty{padding:34px 22px;border-radius:22px;border:1px dashed var(--n2);text-align:center;color:var(--n3)}
.lb-foot{margin-top:28px;color:var(--n2);font-size:.84rem;line-height:1.5}.lb-foot b{color:var(--n3)}

/* ---------- legales ---------- */
.legal{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(24px,5vw,70px);max-width:1080px;margin:0 auto;padding:130px clamp(18px,4vw,40px) 40px;align-items:start}
.toc{position:sticky;top:96px}
.toc nav{display:flex;flex-direction:column;margin-top:14px;border-left:1px solid var(--line)}
.toc a{padding:7px 0 7px 16px;margin-left:-1px;border-left:2px solid transparent;color:var(--n2);font-size:.88rem;font-weight:600;transition:all .25s}
.toc a:hover{color:var(--tx)}.toc a.on{color:var(--tx);border-left-color:var(--ac)}
.legal__body{padding:clamp(24px,4vw,48px);border-radius:32px;border:1px solid var(--line);background:linear-gradient(160deg,rgba(var(--n1r),.5),rgba(var(--n0r),.55))}
.legal__body h1{font-size:clamp(2.4rem,6vw,4.4rem);letter-spacing:-.055em}
.legal__body .updated{color:var(--n3);margin:12px 0 28px;font:500 .8rem "JetBrains Mono",monospace}
.legal__body .intro{color:var(--n3);font-size:1.08rem}
.legal__body h2{font-size:1.6rem;margin:46px 0 10px;letter-spacing:-.04em;scroll-margin-top:96px}
.legal__body p,.legal__body li{color:#cfcde8}.legal__body p{margin:10px 0}
.legal__body ul{margin:10px 0 10px 1.2rem}.legal__body li{margin:6px 0}
.legal__body a{color:var(--tx);font-weight:700;border-bottom:1px solid var(--n2)}
.legal__body .note{margin-top:40px;padding:18px 20px;border-radius:18px;border:1px solid var(--line);background:rgba(var(--n1r),.4);color:var(--n3);font-size:.95rem}

/* ---------- responsive ---------- */
@media(max-width:980px){
  .story__grid{grid-template-columns:minmax(240px,320px) 1fr;gap:clamp(24px,4vw,44px)}
  .plate-sec{grid-template-columns:1fr}
  .dgrid .c7,.dgrid .c5{grid-column:span 12}
  .legal{grid-template-columns:1fr}.toc{position:static}.toc nav{flex-direction:row;flex-wrap:wrap;border-left:0;gap:6px}.toc a{border:1px solid var(--line);border-radius:99px;padding:6px 12px;margin:0}.toc a.on{border-color:var(--ac)}
}
/* celular en vertical: el telefono queda fijo arriba y ocupa como mucho ~46% del alto de la pantalla */
@media(max-width:760px) and (min-height:521px){
  .story__grid{grid-template-columns:1fr;gap:10px}
  .story__stage{--ar:16;--pw:clamp(190px,min(62vw,calc(46*var(--vh)*9/var(--ar))),320px);top:64px;z-index:5;padding-bottom:10px;background:linear-gradient(180deg,rgba(var(--n0r),.985) 82%,transparent)}
  .story__cap{margin-top:8px;font-size:.66rem}
  .step{min-height:62vh;opacity:.4;justify-content:flex-start;padding-top:8px}
}
/* celular en horizontal: muy poca altura, el telefono va al costado del texto */
@media(max-width:980px) and (max-height:520px) and (orientation:landscape){
  .story__grid{grid-template-columns:minmax(130px,230px) 1fr;gap:28px}
  .story__stage{--ar:17.2;--pw:clamp(130px,calc((100*var(--vh) - 140px)*9/var(--ar)),260px);top:60px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding-bottom:0}
  .step{min-height:84vh;opacity:.28}.step.is-active{opacity:1}
}
/* telefonos y pantallas tactiles: menos efectos de fondo (el grano animado y los planetas que se mueven pesan mucho y hacen que se trabe) */
@media(pointer:coarse),(max-width:760px){
  .v2-grain{display:none}
  .v2-orb{animation:none;will-change:auto}
}
@media(max-width:760px){
  /* el encabezado tiene que tapar lo que pasa por detras (sino los titulos se ven encima del logo) */
  .v2-top.is-scrolled{background:linear-gradient(180deg,rgba(var(--n0r),.99) 62%,rgba(var(--n0r),.9));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
  .v2-brand{min-height:44px}
  body{padding-bottom:96px}
  .hero{padding-top:92px}
  .stack{height:420px;margin-top:40px}
  .pc--l,.pc--r{display:none}.pc{width:290px;margin-left:-145px}.pc--c{width:290px;margin-left:-145px}
  .road__steps{grid-template-columns:1fr}
  .dock{bottom:10px;padding:6px 8px;gap:2px}.dock__item{width:42px;height:42px}.dock__item.no-m{display:none}.dock__sep{display:none}.dock__tip{display:none}.dock__item--cta{width:auto;padding:0 16px}
  .toast{bottom:78px}
  .v2-link{display:none}
  .final{min-height:520px;border-radius:32px}
  .claim2{padding-left:18px}.claim2 .pre{font-size:.9rem}.claim2 input{font-size:1rem}.claim2 .btn-big{padding:13px 18px}
  .rstep{padding:20px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  [data-reveal],.w,.dash .stagger>*{opacity:1!important;transform:none!important;filter:none!important}
  .plate__shine{display:none}
}