/* ==========================================================
   LOTTO GOAL — hoja de estilos
   Paleta tomada del logo: oro, rojo cinta, negro estadio
   ========================================================== */
:root{
  --ink:#06070b; --ink2:#0b0d14; --card:#11131c; --card2:#161926;
  --line:rgba(255,194,26,.26);
  --gold1:#fff0a3; --gold2:#ffc21a; --gold3:#e8960c; --gold4:#8f5300;
  --red:#d3121b; --red2:#8e0a12; --red3:#ff4b4f;
  --grass:#0d4a22; --green:#1fa84f; --green2:#128a3c;
  --text:#f4f1e8; --mut:#a9a79d;
  --gold-grad:linear-gradient(180deg,#fff0a3 0%,#ffc21a 52%,#e08a00 100%);
  --f-display:'Barlow Condensed','Arial Narrow',Impact,sans-serif;
  --f-body:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --r:22px; --wrapw:1240px;
  --nav-h:76px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--f-body);font-size:17px;line-height:1.6;overflow-x:hidden;top:0!important}
img{max-width:100%;height:auto;display:block}
svg{display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
ul,ol{margin:0;padding:0;list-style:none}
h1,h2,h3,h4,p,figure,dl,dd{margin:0}
h1,h2,h3,h4{font-family:var(--f-display);font-weight:800;line-height:1.02;text-transform:uppercase;letter-spacing:.01em}
::selection{background:var(--gold2);color:#111}
.wrap{width:min(var(--wrapw),100% - 40px);margin-inline:auto}
.gold{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.red{color:var(--red3)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--gold2);outline-offset:3px;border-radius:8px}

/* ---------- Google Translate: ocultar su interfaz ---------- */
.goog-te-banner-frame,.skiptranslate>iframe,#goog-gt-tt,.goog-te-balloon-frame,.VIpgJd-ZVi9od-ORHb-OEVmcd{display:none!important}
.goog-text-highlight{background:none!important;box-shadow:none!important}
font{background:none!important;box-shadow:none!important}

/* ---------- Splash ---------- */
#splash{position:fixed;inset:0;z-index:1000;background:radial-gradient(ellipse at 50% 40%,#1b1405 0%,#06070b 70%);display:grid;place-items:center;animation:splashOut .7s ease 3.6s forwards}
#splash.gone{display:none}
.splash-inner{position:relative;width:240px;height:300px;display:grid;place-items:end center}
.splash-ball{position:absolute;bottom:34px;left:50%;width:78px;height:78px;margin-left:-39px;animation:splashBounce 1.1s cubic-bezier(.3,.7,.4,1) infinite,splashSpin 1.1s linear infinite;filter:drop-shadow(0 8px 14px rgba(0,0,0,.6))}
.splash-shadow{position:absolute;bottom:20px;left:50%;width:70px;height:12px;margin-left:-35px;border-radius:50%;background:rgba(0,0,0,.6);filter:blur(5px);animation:splashShadow 1.1s cubic-bezier(.3,.7,.4,1) infinite}
.splash-logo{position:absolute;top:0;left:50%;width:220px;height:220px;margin-left:-110px;opacity:0;transform:scale(.8);animation:splashLogo .9s ease .6s forwards}
@keyframes splashBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-70px)}}
@keyframes splashSpin{to{rotate:360deg}}
@keyframes splashShadow{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(.55);opacity:.3}}
@keyframes splashLogo{to{opacity:1;transform:scale(1)}}
@keyframes splashOut{to{opacity:0;visibility:hidden}}

/* ---------- Progreso ---------- */
#progress{position:fixed;left:0;right:0;top:0;height:0;z-index:90;pointer-events:none}
.progress-line{position:absolute;left:0;top:0;height:3px;width:var(--p,0%);background:linear-gradient(90deg,var(--red),var(--gold2));box-shadow:0 0 12px rgba(255,194,26,.6)}
.progress-ball{position:absolute;top:-3px;left:var(--p,0%);width:18px;height:18px;margin-left:-9px;rotate:calc(var(--pn,0)*3600deg);filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}

/* ---------- Botones ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:.85em 1.5em;border-radius:999px;border:1.5px solid transparent;font-family:var(--f-display);font-weight:800;font-size:1.1rem;letter-spacing:.06em;text-transform:uppercase;line-height:1;transition:transform .2s,box-shadow .25s,background .25s,border-color .25s;overflow:hidden;white-space:nowrap}
.btn svg{width:1.3em;height:1.3em}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-gold{background:var(--gold-grad);color:#201300;box-shadow:0 6px 24px rgba(255,194,26,.35),inset 0 -3px 0 rgba(143,83,0,.35)}
.btn-gold::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.65) 50%,transparent 65%);transform:translateX(-120%);animation:shine 3.8s ease-in-out infinite}
.btn-gold:hover{box-shadow:0 10px 34px rgba(255,194,26,.55),inset 0 -3px 0 rgba(143,83,0,.35)}
.btn-gold[disabled]{opacity:.45;pointer-events:none;filter:grayscale(.5)}
@keyframes shine{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.btn-ghost{border-color:rgba(255,194,26,.6);color:var(--gold1);background:rgba(255,194,26,.05)}
.btn-ghost:hover{background:rgba(255,194,26,.14);border-color:var(--gold2)}
.btn-outline{border-color:var(--line);color:var(--gold1);background:rgba(255,194,26,.04);font-size:1rem;padding:.8em 1.1em;white-space:normal;text-align:center}
.btn-outline:hover{border-color:var(--gold2);background:rgba(255,194,26,.12)}
.btn-lg{font-size:1.3rem;padding:1em 1.8em}
.btn-sm{font-size:1rem;padding:.7em 1.2em}
.btn-block{width:100%}

/* ---------- Navegación ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:80;height:var(--nav-h);display:flex;align-items:center;transition:background .3s,box-shadow .3s,height .3s}
.nav.solid{background:rgba(6,7,11,.82);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line),0 12px 30px rgba(0,0,0,.4);height:66px}
.nav-in{width:min(1360px,100% - 32px);margin-inline:auto;display:flex;align-items:center;gap:18px}
.brand img{width:56px;height:56px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6));transition:transform .3s}
.nav.solid .brand img{width:48px;height:48px}
.brand:hover img{transform:rotate(-6deg) scale(1.08)}
.menu{display:flex;gap:4px;margin-left:auto}
.menu a{font-family:var(--f-display);font-weight:700;font-size:1.05rem;letter-spacing:.07em;text-transform:uppercase;padding:.55em .85em;border-radius:999px;color:#e6e2d4;position:relative;transition:color .2s}
.menu a::after{content:"";position:absolute;left:.85em;right:.85em;bottom:.25em;height:2px;background:var(--gold2);transform:scaleX(0);transition:transform .25s;transform-origin:left}
.menu a:hover,.menu a.on{color:var(--gold1)}
.menu a:hover::after,.menu a.on::after{transform:scaleX(1)}
.nav-tools{display:flex;align-items:center;gap:10px}
.lang{position:relative}
.lang-btn{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.5em .8em;font-family:var(--f-display);font-weight:700;font-size:1rem;letter-spacing:.05em}
.lang-btn:hover{border-color:var(--gold2)}
.lang-pop{position:absolute;right:0;top:calc(100% + 10px);width:290px;background:#0e1018;border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.7);padding:10px;z-index:5}
.lang-pop input{width:100%;background:#171a26;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:.65em .8em;color:var(--text);font:inherit;font-size:.95rem}
.lang-pop ul{max-height:300px;overflow:auto;margin-top:8px;display:grid;gap:2px;scrollbar-width:thin;scrollbar-color:var(--gold3) transparent}
.lang-pop li button{width:100%;display:flex;justify-content:space-between;align-items:center;text-align:left;background:none;border:0;padding:.55em .7em;border-radius:8px;font-size:.95rem}
.lang-pop li button:hover,.lang-pop li button[aria-selected=true]{background:rgba(255,194,26,.14);color:var(--gold1)}
.lang-pop li small{color:var(--mut);font-size:.78rem;text-transform:uppercase;letter-spacing:.06em}
.burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.05);position:relative}
.burger span{position:absolute;left:11px;right:11px;height:2px;background:var(--gold1);border-radius:2px;transition:transform .3s,opacity .2s}
.burger span:nth-child(1){top:15px}.burger span:nth-child(2){top:21px}.burger span:nth-child(3){top:27px}
.burger[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded=true] span:nth-child(2){opacity:0}
.burger[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:center;padding:calc(var(--nav-h) + 12px) 0 64px;overflow:hidden;isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;background:
  radial-gradient(ellipse 70% 55% at 70% 38%,rgba(255,194,26,.2),transparent 70%),
  radial-gradient(ellipse 80% 60% at 20% 20%,rgba(211,18,27,.18),transparent 70%),
  linear-gradient(#05060a,#0a0c14 55%,#07110a)}
.beam{position:absolute;top:-20%;width:34vw;height:140%;background:linear-gradient(180deg,rgba(255,244,200,.34),rgba(255,244,200,0) 70%);clip-path:polygon(46% 0,54% 0,100% 100%,0 100%);filter:blur(8px);transform-origin:50% 0;mix-blend-mode:screen;opacity:.55}
.b1{left:-8vw;animation:sweepA 9s ease-in-out infinite alternate}
.b2{right:-6vw;animation:sweepB 11s ease-in-out infinite alternate}
.b3{left:34vw;width:26vw;opacity:.3;animation:sweepA 13s ease-in-out infinite alternate-reverse}
@keyframes sweepA{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@keyframes sweepB{from{transform:rotate(16deg)}to{transform:rotate(-12deg)}}
.pitch{position:absolute;left:-20%;right:-20%;bottom:-6%;height:46%;background:
  repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 80px,transparent 80px 160px),
  linear-gradient(180deg,transparent,rgba(31,168,79,.28));
  transform:perspective(500px) rotateX(58deg);transform-origin:50% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 40%);mask-image:linear-gradient(180deg,transparent,#000 40%)}
.pitch::before{content:"";position:absolute;left:0;right:0;top:35%;height:2px;background:rgba(255,255,255,.25)}
.pitch::after{content:"";position:absolute;left:50%;top:35%;width:240px;height:240px;margin-left:-120px;border-radius:50%;border:2px solid rgba(255,255,255,.22)}
#heroFx,#hireFx{position:absolute;inset:0;width:100%;height:100%}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:20px;align-items:center}
.hero-logo{width:min(250px,60%);height:auto;margin-bottom:-4px;filter:drop-shadow(0 18px 40px rgba(255,170,0,.35));animation:floaty 6s ease-in-out infinite;margin-left:-14px}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.kicker{display:flex;align-items:center;gap:14px;font-family:var(--f-display);font-weight:700;font-size:1.25rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold1)}
.kicker span{flex:0 0 38px;height:2px;background:linear-gradient(90deg,transparent,var(--gold2))}
.kicker span:last-child{background:linear-gradient(270deg,transparent,var(--gold2))}
.hero-title{font-size:clamp(3.4rem,7vw,5.6rem);line-height:.9;margin:.16em 0 .2em;letter-spacing:.005em}
.hero-title span{display:inline-block;animation:titleIn .8s cubic-bezier(.2,.8,.2,1) both}
.hero-title span:nth-child(2){animation-delay:.12s}.hero-title span:nth-child(3){animation-delay:.24s}
@keyframes titleIn{from{opacity:0;transform:translateY(40px) rotate(2deg)}to{opacity:1;transform:none}}
.lead{font-size:clamp(1.05rem,1.5vw,1.28rem);color:#d9d5c6;max-width:34em}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;margin:1.3em 0 1.6em}
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:560px}
.pillars li{display:grid;gap:2px;padding-top:2px}
.pillars i{width:46px;height:46px;border-radius:50%;border:2px solid var(--gold2);display:grid;place-items:center;margin-bottom:8px;background:rgba(255,194,26,.07)}
.pillars i svg{width:22px;height:22px;fill:none;stroke:var(--gold2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pillars b{font-family:var(--f-display);text-transform:uppercase;font-size:1.25rem;letter-spacing:.06em}
.pillars span{font-size:.88rem;color:var(--mut);line-height:1.35}

.hero-stage{position:relative;height:min(660px,74vh);min-height:480px;--mx:0;--my:0}
.hero-stage>[data-depth]{transform:translate(calc(var(--mx)*var(--d,0)*1px),calc(var(--my)*var(--d,0)*1px))}
.stage-glow{position:absolute;right:-6%;top:6%;width:84%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,rgba(255,194,26,.38),rgba(211,18,27,.14) 55%,transparent 70%);filter:blur(10px);animation:pulse 5s ease-in-out infinite}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.07);opacity:1}}
.stage-kicker{position:absolute;right:-14%;top:2%;width:122%;max-width:none;filter:drop-shadow(0 30px 40px rgba(0,0,0,.6))}
.flying-ball{position:absolute;right:11%;top:21%;width:44px;height:44px;animation:fly 4.6s cubic-bezier(.3,.1,.5,1) infinite;filter:drop-shadow(0 6px 8px rgba(0,0,0,.5))}
@keyframes fly{0%{transform:translate(0,0) scale(1);rotate:0deg;opacity:0}6%{opacity:1}55%{transform:translate(-40px,-190px) scale(.5);opacity:1}100%{transform:translate(-140px,-120px) scale(.1);rotate:900deg;opacity:0}}
.phone{position:absolute;left:0;bottom:0;width:min(250px,40%);aspect-ratio:9/18.4;border-radius:34px;padding:14px 12px 12px;background:linear-gradient(160deg,#16192a,#080a12);border:3px solid #3a3d4d;box-shadow:0 0 0 2px #15171f,0 36px 70px rgba(0,0,0,.7),0 0 60px rgba(255,194,26,.18);transform:translate(calc(var(--mx)*var(--d)*1px),calc(var(--my)*var(--d)*1px)) rotate(-4deg);display:flex;flex-direction:column;align-items:center;text-align:center}
.phone-notch{width:34%;height:12px;border-radius:0 0 12px 12px;background:#000;margin:-14px 0 4px}
.phone-logo{width:70px;height:70px;object-fit:contain}
.phone-round{font-family:var(--f-display);font-weight:700;font-size:.95rem;letter-spacing:.1em;margin-top:2px}
.phone-title{font-family:var(--f-display);font-weight:800;font-size:.9rem;line-height:1.1;color:var(--gold2);margin:4px 0 8px;letter-spacing:.04em}
.phone-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;width:100%}
.phone-grid span{position:relative;aspect-ratio:1;border-radius:50%;background:#0b0d16;border:1.5px solid rgba(255,194,26,.25);transition:border-color .3s,box-shadow .3s}
.phone-grid img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.phone-grid em{position:absolute;right:-3px;bottom:-3px;width:17px;height:17px;border-radius:50%;background:var(--green);color:#fff;font-style:normal;font-weight:800;font-size:13px;line-height:17px;text-align:center;transition:transform .3s,background .3s}
.phone-grid span.sel{border-color:var(--gold2);box-shadow:0 0 14px rgba(255,194,26,.55)}
.phone-grid span.sel em{background:var(--gold2);color:#201300;transform:scale(1.12) rotate(360deg)}
.phone-cta{margin-top:auto;width:100%;padding:.75em;border-radius:12px;background:linear-gradient(180deg,#27c25f,#128a3c);font-family:var(--f-display);font-weight:800;letter-spacing:.07em;font-size:1.05rem;box-shadow:0 5px 0 #0b5f27;animation:cta 2.2s ease-in-out infinite}
@keyframes cta{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
.ticket{position:absolute;right:0;bottom:-6px;width:min(160px,26%);padding:12px 10px 10px;background:linear-gradient(180deg,#f4ecd4,#e2d6b4);color:#2b2414;text-align:center;border-radius:6px;transform:translate(calc(var(--mx)*var(--d)*1px),calc(var(--my)*var(--d)*1px)) rotate(6deg);box-shadow:0 24px 40px rgba(0,0,0,.6);display:grid;justify-items:center;gap:3px;-webkit-mask:radial-gradient(circle 6px at 0 12px,#0000 98%,#000) left/51% 24px repeat-y,radial-gradient(circle 6px at 100% 12px,#0000 98%,#000) right/51% 24px repeat-y;mask:radial-gradient(circle 6px at 0 12px,#0000 98%,#000) left/51% 24px repeat-y,radial-gradient(circle 6px at 100% 12px,#0000 98%,#000) right/51% 24px repeat-y}
.ticket img{width:58px;height:58px;object-fit:contain}
.ticket b{font-family:var(--f-display);font-size:1.05rem;letter-spacing:.08em}
.ticket small{font-size:.58rem;line-height:1.2;letter-spacing:.05em;font-weight:600}
.ticket-balls{display:flex;gap:2px}.ticket-balls svg{width:12px;height:12px}
.qr{width:70px;height:70px;image-rendering:pixelated;background:#fff;border-radius:3px}
.scroll-cue{position:absolute;left:50%;bottom:24px;width:28px;height:46px;margin-left:-14px;border:2px solid rgba(255,194,26,.7);border-radius:16px}
.scroll-cue span{position:absolute;left:50%;top:8px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--gold2);animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0);opacity:1}80%{transform:translateY(20px);opacity:0}100%{opacity:0}}

/* ---------- Ticker ---------- */
.ticker{position:relative;overflow:hidden;background:linear-gradient(90deg,var(--red2),var(--red),var(--red2));border-block:2px solid var(--gold2);transform:rotate(-1deg) scale(1.02);margin:-14px 0 14px;z-index:3;box-shadow:0 10px 40px rgba(0,0,0,.6)}
.ticker-track{display:flex;align-items:center;gap:34px;width:max-content;padding:14px 0;animation:marq 38s linear infinite}
.ticker span{font-family:var(--f-display);font-weight:800;font-size:1.6rem;letter-spacing:.1em;white-space:nowrap;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.ticker svg{width:28px;height:28px;flex:none;animation:spin 5s linear infinite}
@keyframes marq{to{transform:translateX(-50%)}}
@keyframes spin{to{rotate:360deg}}

/* ---------- Secciones ---------- */
.sec{position:relative;padding:clamp(72px,10vw,132px) 0}
.sec-alt{background:linear-gradient(180deg,#090b12,#0d0f18 50%,#090b12)}
.sec-head{text-align:center;max-width:860px;margin:0 auto clamp(36px,5vw,64px)}
.sec-head-sm{margin-top:clamp(64px,8vw,110px)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:1.1rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold2);margin-bottom:.7em}
.eyebrow::before,.eyebrow::after{content:"";width:30px;height:2px;background:linear-gradient(90deg,transparent,var(--gold2))}
.eyebrow::after{transform:scaleX(-1)}
.eyebrow-red{color:var(--red3)}.eyebrow-red::before,.eyebrow-red::after{background:linear-gradient(90deg,transparent,var(--red3))}
.sec-head h2,.split-copy h2,.solution-copy h2,.pen-copy h2{font-size:clamp(2.3rem,5.4vw,4.4rem)}
.sub{margin-top:1em;color:#c9c5b6;font-size:1.1rem}
.banner{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:clamp(32px,4vw,56px);padding:18px 26px;border:1.5px solid var(--line);border-radius:18px;background:linear-gradient(90deg,rgba(255,194,26,.05),rgba(255,194,26,.12),rgba(255,194,26,.05));font-family:var(--f-display);font-weight:700;font-size:clamp(1.15rem,2.3vw,1.7rem);text-transform:uppercase;letter-spacing:.04em;text-align:center}
.banner svg{width:30px;height:30px;flex:none;fill:none;stroke:var(--gold2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Reveal */
.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
.reveal[data-split]{opacity:1;transform:none}

/* ---------- Versus ---------- */
.versus{display:grid;grid-template-columns:1fr auto 1fr;gap:0;align-items:stretch;margin-bottom:clamp(36px,5vw,64px)}
.vs-card{padding:28px 26px 30px;border-radius:var(--r);border:1px solid rgba(255,255,255,.1);background:var(--card);text-align:center}
.vs-card h3{font-size:1.9rem;letter-spacing:.04em}
.vs-tag{margin:.3em 0 1.2em;color:var(--mut);font-family:var(--f-display);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.vs-card ul{margin-top:1.4em;display:grid;gap:8px;font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.07em;font-size:1.1rem}
.vs-old{filter:grayscale(1);opacity:.78}
.vs-new{border:1.5px solid var(--gold2);background:linear-gradient(180deg,#26090b,#12060a);box-shadow:0 0 70px rgba(255,194,26,.17),inset 0 0 40px rgba(211,18,27,.1)}
.vs-new h3{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.vs-new .vs-tag{color:#e8e2cd}
.vs-new li{color:var(--gold1)}
.vs-badge{align-self:center;z-index:2;margin-inline:-26px;width:76px;height:76px;border-radius:50%;display:grid;place-items:center;background:#0a0b10;border:3px solid var(--gold2);font-family:var(--f-display);font-weight:900;font-size:1.9rem;color:var(--gold2);box-shadow:0 0 30px rgba(255,194,26,.5);animation:pulse 2.6s ease-in-out infinite}
.balls-pyramid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;width:min(300px,100%);margin:0 auto}
.balls-pyramid b{grid-column:span 2;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 30%,#fff,#cfd0d6 60%,#8e909b);color:#222;font-family:var(--f-display);font-size:1.7rem;box-shadow:0 8px 14px rgba(0,0,0,.5)}
.balls-pyramid b:nth-child(1){grid-column:3/5}
.balls-pyramid b:nth-child(2){grid-column:2/4}.balls-pyramid b:nth-child(3){grid-column:4/6}
.balls-pyramid b:nth-child(4){grid-column:1/3}.balls-pyramid b:nth-child(5){grid-column:3/5}.balls-pyramid b:nth-child(6){grid-column:5/7}
.face-wall{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;max-width:420px;margin:0 auto}
.face-wall img{aspect-ratio:1;object-fit:cover;border-radius:50%;border:1.5px solid rgba(255,194,26,.4);background:#0b0d16;transform:scale(1);transition:transform .35s;transform-origin:center}
.face-wall img:hover{transform:translateY(-6px) scale(1.08)}
.feat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.feat-row li{padding:24px 20px;border-radius:var(--r);background:var(--card);border:1px solid rgba(255,255,255,.08);transition:transform .3s,border-color .3s,box-shadow .3s}
.feat-row li:hover{transform:translateY(-6px);border-color:var(--gold2);box-shadow:0 20px 40px rgba(0,0,0,.5),0 0 30px rgba(255,194,26,.14)}
.feat-row i,.rows i,.puzzle i,.xp-list i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:2px solid var(--gold2);background:rgba(255,194,26,.07);margin-bottom:14px;flex:none}
.feat-row svg,.rows svg,.puzzle svg,.xp-list svg,.ch-body svg{width:26px;height:26px;fill:none;stroke:var(--gold2);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.feat-row i svg use,.xp-list i svg use{fill:initial}
.feat-row h4{font-size:1.35rem;color:var(--gold1);margin-bottom:.35em;letter-spacing:.03em}
.feat-row p{color:#c9c5b6;font-size:.98rem;line-height:1.5}

/* ---------- Split / problema ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,5vw,70px);align-items:center}
.split-rev{grid-template-columns:.95fr 1.05fr}
.split-img{position:relative;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.split-img img{width:100%}
.split-copy h2{margin-bottom:.5em}
.pain{display:grid;gap:0;margin:1.2em 0 1.6em}
.pain li{display:grid;gap:2px;padding:16px 0 16px 18px;border-bottom:1px solid rgba(211,18,27,.55);position:relative}
.pain li::before{content:"";position:absolute;left:0;top:20px;bottom:20px;width:4px;border-radius:4px;background:var(--red)}
.pain b{font-family:var(--f-display);font-size:1.5rem;text-transform:uppercase;color:var(--red3);letter-spacing:.04em}
.pain span{color:#d4d0c3}
.result{display:flex;align-items:center;gap:16px;padding:16px 20px;border:1.5px solid var(--red);border-radius:16px;background:rgba(211,18,27,.1);font-family:var(--f-display);font-weight:800;font-size:1.5rem;text-transform:uppercase;color:var(--red3);letter-spacing:.03em}
.result small{display:block;color:#fff;font-size:1.05rem;letter-spacing:.1em}
.result svg{width:42px;height:42px;fill:none;stroke:var(--red3);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.note-paper{position:absolute;left:6%;bottom:6%;width:46%;padding:14px 16px;background:#efe6ca;color:#3a2f18;font-family:var(--f-display);font-weight:700;font-size:1.05rem;line-height:1.35;text-transform:uppercase;transform:rotate(-3deg);box-shadow:0 14px 30px rgba(0,0,0,.6);letter-spacing:.03em}
.note-paper b{display:block;margin-top:.4em;color:#c0141b;font-size:1.15rem}
.solution{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,70px);align-items:center;margin-top:clamp(70px,9vw,130px);padding-top:clamp(50px,6vw,90px);border-top:1px solid var(--line)}
.nos{display:grid;gap:10px;margin:1.3em 0}
.nos li{display:flex;align-items:center;gap:14px;font-family:var(--f-display);font-weight:700;font-size:1.6rem;text-transform:uppercase;letter-spacing:.04em}
.nos i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:2px solid var(--gold2);color:var(--gold2);font-style:normal;font-size:1.1rem}
.only{font-family:var(--f-display);font-weight:800;font-size:2rem;text-transform:uppercase;padding-top:.6em;border-top:1px solid var(--line)}
.impact{display:grid;gap:12px}
.impact li{padding:18px 22px;border-radius:18px;border:1px solid var(--line);background:linear-gradient(90deg,rgba(255,194,26,.1),rgba(255,194,26,.02));display:grid;gap:2px;transition:transform .3s,border-color .3s}
.impact li:hover{transform:translateX(8px);border-color:var(--gold2)}
.impact b{font-family:var(--f-display);font-size:1.45rem;text-transform:uppercase;color:var(--gold2);letter-spacing:.03em}
.impact span{color:#d4d0c3}

/* ---------- Demo ---------- */
.demo-sec{background:radial-gradient(ellipse 60% 50% at 50% 0%,rgba(255,194,26,.1),transparent 70%),linear-gradient(180deg,var(--ink),#0a0d12)}
.demo{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:start}
.demo-panel{padding:24px;border-radius:28px;border:1.5px solid var(--line);background:linear-gradient(180deg,#14161f,#0b0c12);box-shadow:0 40px 90px rgba(0,0,0,.6)}
.demo-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.demo-top h3{font-size:1.9rem}
.demo-round{font-size:.85rem;color:var(--mut);text-transform:uppercase;letter-spacing:.08em}
.demo-round b{color:var(--gold2)}
.slots{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.slot{position:relative;aspect-ratio:1;border-radius:50%;border:2px dashed rgba(255,255,255,.28);display:grid;place-items:center;color:rgba(255,255,255,.5);font-size:1.6rem;background:rgba(255,255,255,.02);padding:0;transition:border-color .25s,transform .25s}
.slot.fill{border:2.5px solid var(--gold2);overflow:hidden;box-shadow:0 0 16px rgba(255,194,26,.45);animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
.slot.fill img{width:100%;height:100%;object-fit:cover}
.slot .x{position:absolute;right:4px;top:4px;width:20px;height:20px;border-radius:50%;background:rgba(0,0,0,.75);color:#fff;font-size:.8rem;line-height:20px;text-align:center;opacity:0;transition:opacity .2s}
.slot.fill:hover .x,.slot.fill:focus-visible .x{opacity:1}
.slot:not(.fill):hover{border-color:var(--gold2)}
@keyframes pop{from{transform:scale(.4)}to{transform:scale(1)}}
.demo-count{margin:14px 0 4px;text-align:center;font-family:var(--f-display);font-weight:700;font-size:1.2rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut)}
.demo-count b{color:var(--gold2);font-size:1.5rem}
.demo-count.full b{color:#4ee38a}
.search{display:flex;align-items:center;gap:10px;margin:12px 0 4px;padding:.7em 1em;border:1px solid rgba(255,255,255,.18);border-radius:14px;background:rgba(255,255,255,.04);color:var(--mut)}
.search input{flex:1;background:none;border:0;outline:0;color:var(--text);font:inherit;font-size:1rem;min-width:0}
.search:focus-within{border-color:var(--gold2)}
.list-title{font-size:1.2rem;margin:18px 0 10px;letter-spacing:.06em}
.plist{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-height:420px;overflow:auto;padding:2px 4px 4px 2px;scrollbar-width:thin;scrollbar-color:var(--gold3) transparent}
.pcard{position:relative;display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center;padding:12px;border-radius:14px;border:1px solid rgba(255,255,255,.1);background:#141722;text-align:left;transition:transform .2s,border-color .2s,background .2s}
.pcard:hover{transform:translateY(-3px);border-color:rgba(255,194,26,.6)}
.pcard .pf{width:54px;height:54px;border-radius:50%;overflow:hidden;border:2px solid rgba(255,255,255,.18);grid-row:span 2}
.pcard .pf img{width:100%;height:100%;object-fit:cover}
.pcard b{font-family:var(--f-display);font-size:1.2rem;text-transform:uppercase;line-height:1.05;letter-spacing:.02em;align-self:end}
.pcard small{color:var(--mut);font-size:.78rem;align-self:start;line-height:1.3}
.pcard small i{font-style:normal;color:var(--gold2);font-weight:700}
.pcard .ck{position:absolute;right:8px;top:8px;width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.4);transition:all .25s}
.pcard.on{border-color:var(--gold2);background:linear-gradient(160deg,#2a2208,#161309)}
.pcard.on .pf{border-color:var(--gold2)}
.pcard.on .ck{background:var(--gold2);border-color:var(--gold2);box-shadow:inset 0 0 0 4px #1d1604}
.pcard[disabled]{opacity:.38;pointer-events:none}
.demo-actions{display:grid;grid-template-columns:1fr 1fr 1.1fr;gap:10px;margin-top:18px}
.demo-actions .btn{font-size:1rem}
.demo-side{position:sticky;top:90px;display:grid;gap:12px}
.ticket-big{position:relative;padding:26px 22px 20px;background:linear-gradient(180deg,#f6efd9,#e0d3ae);color:#2a2313;border-radius:10px;text-align:center;display:grid;justify-items:center;gap:6px;box-shadow:0 30px 60px rgba(0,0,0,.6);transform:rotate(1.5deg);transition:transform .5s;-webkit-mask:radial-gradient(circle 8px at 0 16px,#0000 98%,#000) left/51% 32px repeat-y,radial-gradient(circle 8px at 100% 16px,#0000 98%,#000) right/51% 32px repeat-y;mask:radial-gradient(circle 8px at 0 16px,#0000 98%,#000) left/51% 32px repeat-y,radial-gradient(circle 8px at 100% 16px,#0000 98%,#000) right/51% 32px repeat-y}
.ticket-big.printed{animation:print .9s cubic-bezier(.3,1.3,.5,1)}
@keyframes print{0%{transform:translateY(-120px) rotate(-6deg);opacity:0}100%{transform:rotate(1.5deg);opacity:1}}
.ticket-big img{width:92px;height:92px;object-fit:contain}
.tb-round{font-family:var(--f-display);font-size:1.5rem;letter-spacing:.1em}
.tb-title{font-size:.72rem;font-weight:700;letter-spacing:.06em}
.tb-list{width:100%;columns:2;column-gap:14px;text-align:left;font-family:var(--f-display);font-weight:700;font-size:1rem;text-transform:uppercase;letter-spacing:.03em;counter-reset:n;border-block:1px dashed rgba(0,0,0,.4);padding:10px 4px;margin:6px 0}
.tb-list li{counter-increment:n;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tb-list li::before{content:counter(n,decimal-leading-zero) " ";color:#a2191f}
.tb-list li.empty{counter-increment:none;columns:1;color:#7a6f52;text-transform:none;font-family:var(--f-body);font-weight:500;font-size:.9rem;white-space:normal}
.tb-list li.empty::before{content:""}
.ticket-big .qr{width:110px;height:110px}
.tb-foot{font-size:.65rem;font-weight:600;letter-spacing:.04em}
.tb-foot span{color:#a2191f;font-weight:800}
.demo-note{font-size:.8rem;color:var(--mut);text-align:center}

/* ---------- Cómo funciona ---------- */
.how{overflow:hidden}
.how-lines{position:absolute;inset:6% 2%;width:96%;height:88%;fill:none;stroke:rgba(255,255,255,.07);stroke-width:2;vector-effect:non-scaling-stroke}
.how-lines *{vector-effect:non-scaling-stroke;stroke-dasharray:2400;stroke-dashoffset:2400;transition:stroke-dashoffset 3.2s ease}
.how.drawn .how-lines *{stroke-dashoffset:0}
.steps{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:26px;counter-reset:s}
.steps::before{content:"";position:absolute;left:12%;right:12%;top:46px;height:2px;background:repeating-linear-gradient(90deg,var(--gold2) 0 10px,transparent 10px 20px);opacity:.6}
.step{position:relative;text-align:center}
.step-n{position:relative;z-index:2;display:grid;place-items:center;width:52px;height:52px;margin:0 auto -26px;border-radius:50%;background:var(--gold-grad);color:#201300;font-family:var(--f-display);font-weight:900;font-size:1.7rem;box-shadow:0 6px 20px rgba(255,194,26,.45);transform:translateY(-4px)}
.step-img{position:relative;width:min(240px,100%);aspect-ratio:1;margin:0 auto 22px;border-radius:50%;border:3px solid var(--gold2);overflow:hidden;box-shadow:0 0 0 8px rgba(255,194,26,.08),0 24px 50px rgba(0,0,0,.6);transition:transform .4s}
.step:hover .step-img{transform:scale(1.05) rotate(-2deg)}
.step-img img{width:100%;height:100%;object-fit:cover}
.step h3{font-size:1.65rem;color:var(--gold2);margin-bottom:.35em}
.step p{color:#d4d0c3;max-width:15em;margin-inline:auto;line-height:1.45}
.goal-ball{position:absolute;left:8%;bottom:6%;width:56px;height:56px;opacity:0;filter:drop-shadow(0 6px 8px rgba(0,0,0,.6))}
.goal-flash{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.2);font-family:var(--f-display);font-weight:900;font-size:3.4rem;color:var(--gold1);text-shadow:0 0 24px #ff9d00,0 4px 0 #8f5300;opacity:0;white-space:nowrap}
.step.shoot .goal-ball{animation:shot 1.5s cubic-bezier(.3,.1,.4,1) forwards}
.step.shoot .goal-flash{animation:flash 1.1s ease .95s forwards}
@keyframes shot{0%{opacity:1;transform:translate(0,0) scale(1.2);rotate:0deg}85%{opacity:1;transform:translate(110px,-110px) scale(.55);rotate:900deg}100%{opacity:0;transform:translate(112px,-112px) scale(.5);rotate:960deg}}
@keyframes flash{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}25%{opacity:1;transform:translate(-50%,-50%) scale(1.15)}75%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-60%) scale(1.2)}}

/* ---------- Mecánica ---------- */
.mech{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding-top:26px}
.mech-card{position:relative;padding:44px 20px 26px;text-align:center;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,#14161f,#0b0c12);transition:transform .35s,box-shadow .35s,border-color .35s}
.mech-card:hover{transform:translateY(-8px);border-color:var(--gold2);box-shadow:0 26px 50px rgba(0,0,0,.55),0 0 36px rgba(255,194,26,.16)}
.mech-card .step-n{position:absolute;top:-26px;left:50%;margin:0 0 0 -26px;transform:none}
.mech-card img{height:150px;width:auto;margin:0 auto 18px;mix-blend-mode:screen;object-fit:contain}
.mech-card h3{font-size:1.5rem;color:var(--gold2);padding-bottom:.45em;margin-bottom:.55em;border-bottom:1px solid var(--line)}
.mech-card p{color:#d4d0c3;line-height:1.45}

/* ---------- Premios ---------- */
.prizes{background:radial-gradient(ellipse 50% 40% at 85% 30%,rgba(255,194,26,.12),transparent 70%),var(--ink)}
.prize-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:26px;align-items:start}
.prize-table{border:1.5px solid var(--gold2);border-radius:20px;overflow:hidden;background:#0b0c12;box-shadow:0 30px 70px rgba(0,0,0,.55)}
.pt-head,.pt-row,.pt-total{display:grid;grid-template-columns:1.1fr 1.5fr 1fr;align-items:center;gap:10px;padding:0 18px}
.pt-head{padding-block:14px;background:#141620;font-family:var(--f-display);font-weight:700;font-size:1rem;letter-spacing:.07em;text-transform:uppercase;color:#d8d4c6;border-bottom:1px solid var(--line)}
.pt-head span:last-child{text-align:right}
.pt-row{position:relative;padding-block:12px;border-bottom:1px solid rgba(255,255,255,.07);font-family:var(--f-display);font-weight:700;font-size:1.35rem;overflow:hidden}
.pt-row .tier{display:flex;align-items:center;gap:12px}
.pt-row .orb{width:26px;height:26px;border-radius:50%;box-shadow:inset -4px -5px 8px rgba(0,0,0,.4),inset 3px 3px 6px rgba(255,255,255,.4)}
.pt-row .pct{position:relative;z-index:1}
.pt-row .pct::before{content:"";position:absolute;left:-8px;top:50%;height:70%;width:var(--w,0%);max-width:calc(100% + 8px);transform:translateY(-50%);background:linear-gradient(90deg,rgba(255,194,26,.35),rgba(255,194,26,0));border-radius:4px;z-index:-1;transition:width 1.2s cubic-bezier(.2,.8,.2,1)}
.pt-row .pct span{margin-left:10px}
.pt-row .amt{text-align:right;color:var(--gold1);font-size:1.2rem}
.pt-row:first-of-type{background:linear-gradient(90deg,rgba(255,194,26,.22),rgba(255,194,26,.05))}
.pt-total{padding-block:16px;background:#141620;font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.3rem}
.pt-total b{color:var(--gold2);font-size:1.7rem}
.pt-total span:last-child{text-align:right;color:var(--gold1)}
.winners{position:relative;border-radius:20px;overflow:hidden;border:1.5px solid var(--line)}
.winners img{width:100%;aspect-ratio:1300/498;object-fit:cover}
.winners::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(6,7,11,.92))}
.win-over{position:absolute;left:0;right:0;bottom:12px;z-index:2;text-align:center;font-family:var(--f-display);text-transform:uppercase}
.win-over small{display:block;font-size:1.2rem;font-weight:800;letter-spacing:.14em;color:#fff}
.win-over b{display:block;font-size:clamp(2.6rem,6vw,4.2rem);line-height:1;font-weight:900;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 4px 12px rgba(255,150,0,.5))}
.calc{margin-top:16px;padding:22px;border:1px solid var(--line);border-radius:20px;background:var(--card);display:grid;gap:16px}
.calc label,.fld{display:grid;grid-template-columns:1fr auto;gap:6px 10px;font-family:var(--f-display);font-weight:700;font-size:1.1rem;letter-spacing:.05em;text-transform:uppercase;color:#d8d4c6}
.calc output,.fld output{color:var(--gold2);font-size:1.25rem}
.calc input[type=range],.fld input[type=range]{grid-column:1/-1}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:8px;border-radius:8px;background:linear-gradient(90deg,var(--gold2) var(--fill,50%),rgba(255,255,255,.14) var(--fill,50%));outline:0}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;border-radius:50%;background:var(--gold-grad);border:3px solid #201300;box-shadow:0 0 0 3px var(--gold2),0 4px 10px rgba(0,0,0,.5);cursor:grab}
input[type=range]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--gold2);border:3px solid #201300;box-shadow:0 0 0 3px var(--gold2);cursor:grab}
.calc-sum{font-size:1rem;color:#d4d0c3;text-transform:none}
.calc-sum b{font-family:var(--f-display);font-size:1.3rem}
.rtp-notes{margin-top:14px;display:grid;gap:8px;color:#c9c5b6;font-size:.95rem}
.rtp-notes b{color:var(--gold2)}

/* ---------- Por qué + experiencia ---------- */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-top:30px}
.why-card{position:relative;padding:44px 22px 24px;border-radius:var(--r);border:1px solid var(--line);background:linear-gradient(180deg,#13151e,#0a0b11);text-align:center;transition:transform .3s,border-color .3s}
.why-card:hover{transform:translateY(-6px);border-color:var(--gold2)}
.why-ico{position:absolute;left:50%;top:-30px;width:60px;height:60px;margin-left:-30px;border-radius:50%;display:grid;place-items:center;background:#0a0b11;border:2px solid var(--gold2)}
.why-ico svg{width:30px;height:30px;fill:none;stroke:var(--gold2);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.why-card h3{font-size:2.1rem;color:var(--gold2)}
.why-card>small{display:block;font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:#e7e2d1;margin-bottom:14px}
.why-media{height:200px;border-radius:14px;overflow:hidden;margin-bottom:16px;background:#0b0d16;display:grid;place-items:center}
.why-media>img{width:100%;height:100%;object-fit:cover}
.mini-phone{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;padding:12px;width:130px;border-radius:20px;background:#05060a;border:2px solid #3a3d4d;transform:rotate(-5deg)}
.mini-phone img{aspect-ratio:1;border-radius:50%;object-fit:cover;border:1.5px solid var(--gold2)}
.cal-card{display:grid;justify-items:center;gap:2px;padding:20px 26px;border-radius:14px;background:#0a0b11;border:2px solid #3a3d4d;border-top:14px solid var(--gold2);font-family:var(--f-display);font-weight:800;text-transform:uppercase;font-size:1.5rem;line-height:1.1;animation:floaty 5s ease-in-out infinite}
.cal-spin{width:34px;height:34px;margin-top:6px;fill:none;stroke:var(--gold2);stroke-width:2.2;stroke-linecap:round;animation:spin 4s linear infinite}
.why-card ul{display:grid;gap:8px;text-align:left}
.why-card li{position:relative;padding-left:30px;color:#d4d0c3;line-height:1.4}
.why-card li::before{content:"";position:absolute;left:0;top:2px;width:20px;height:20px;border-radius:50%;border:2px solid var(--gold2);background:radial-gradient(circle,var(--gold2) 38%,transparent 42%)}
.xp{display:grid;grid-template-columns:.9fr 1.1fr;gap:28px;align-items:center}
.xp-list{display:grid;gap:14px}
.xp-list li{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;align-items:center;padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:var(--card)}
.xp-list i{grid-row:span 2;margin:0}
.xp-list h4{font-size:1.6rem}
.xp-list p{color:#c9c5b6;line-height:1.4}
.xp-live{position:relative;border-radius:22px;overflow:hidden;border:2px solid rgba(255,255,255,.14);box-shadow:0 30px 70px rgba(0,0,0,.6)}
.xp-live img{width:100%}
.live-pill{position:absolute;left:16px;top:16px;padding:.3em .9em;border-radius:6px;background:var(--red);font-family:var(--f-display);font-weight:800;letter-spacing:.08em;animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.55}}
.gol-pill{position:absolute;right:16px;top:50%;display:flex;align-items:center;gap:10px;padding:.5em 1em;border-radius:14px;background:rgba(0,0,0,.72);border:1px solid var(--line);font-family:var(--f-display);font-weight:900;font-size:1.6rem;color:var(--gold1);animation:bob 2.6s ease-in-out infinite}
.gol-pill svg{width:34px;height:34px;animation:spin 3s linear infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* ---------- Penalti ---------- */
.pen-sec{background:radial-gradient(ellipse 70% 60% at 70% 50%,rgba(31,168,79,.2),transparent 70%),linear-gradient(180deg,#0a0d12,#07100a);overflow:hidden}
.pen{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(24px,5vw,60px);align-items:center}
.pen-score{display:flex;gap:14px;margin:1.4em 0 .8em}
.pen-score div{min-width:110px;padding:12px 18px;border-radius:16px;border:1px solid var(--line);background:var(--card);text-align:center}
.pen-score small{display:block;font-family:var(--f-display);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.pen-score b{font-family:var(--f-display);font-size:2.6rem;line-height:1;color:var(--gold2)}
.pen-msg{min-height:2.2em;font-family:var(--f-display);font-weight:800;font-size:1.7rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.6em}
.pen-field{position:relative;aspect-ratio:16/11;border-radius:24px;overflow:hidden;border:1.5px solid var(--line);background:
  radial-gradient(ellipse at 50% 0%,rgba(255,244,200,.12),transparent 55%),
  repeating-linear-gradient(90deg,#0f5a29 0 60px,#0d4f24 60px 120px);box-shadow:0 36px 80px rgba(0,0,0,.6)}
.pen-field::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#07110a 0%,transparent 34%)}
.goalpost{position:absolute;left:12%;right:12%;top:12%;height:46%;border:7px solid #f2f2f2;border-bottom:0;border-radius:6px 6px 0 0;box-shadow:0 0 30px rgba(255,255,255,.25)}
.net{position:absolute;inset:0;background:
  repeating-linear-gradient(45deg,rgba(255,255,255,.22) 0 1.5px,transparent 1.5px 14px),
  repeating-linear-gradient(-45deg,rgba(255,255,255,.22) 0 1.5px,transparent 1.5px 14px),rgba(0,0,0,.35)}
.keeper{position:absolute;left:50%;bottom:0;width:70px;height:96px;margin-left:-35px;transition:transform .45s cubic-bezier(.2,.8,.3,1),rotate .45s;transform-origin:50% 100%;z-index:2}
.keeper i{position:absolute;left:12px;top:0;width:46px;height:46px;border-radius:50%;background:linear-gradient(#ffd9b3,#e9b182);box-shadow:inset 0 10px 0 #2b1b0b}
.keeper b{position:absolute;left:0;right:0;top:40px;bottom:0;border-radius:18px 18px 6px 6px;background:linear-gradient(180deg,var(--red),var(--red2));box-shadow:-34px -10px 0 -10px var(--gold2),34px -10px 0 -10px var(--gold2)}
.keeper::after{content:"";position:absolute;left:-30px;right:-30px;top:44px;height:14px;border-radius:8px;background:#ffd9b3;opacity:.0}
.zones{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:1fr 1fr;z-index:3}
.zones button{background:none;border:1px dashed transparent;transition:background .2s,border-color .2s}
.zones button:hover{background:rgba(255,194,26,.22);border-color:var(--gold2)}
.zones.lock{pointer-events:none}
.pen-spot{position:absolute;left:50%;bottom:9%;width:10px;height:10px;margin-left:-5px;border-radius:50%;background:#fff;opacity:.6}
.pen-ball{position:absolute;left:50%;bottom:10%;width:58px;height:58px;margin-left:-29px;z-index:4;filter:drop-shadow(0 10px 8px rgba(0,0,0,.5));transition:transform .7s cubic-bezier(.25,.6,.3,1),opacity .3s;pointer-events:none}
.pen-flash{position:absolute;inset:0;display:grid;place-items:center;z-index:5;pointer-events:none;font-family:var(--f-display);font-weight:900;font-size:clamp(3rem,10vw,6.5rem);text-transform:uppercase;opacity:0;text-shadow:0 6px 0 rgba(0,0,0,.4)}
.pen-flash.show{animation:flash2 1.3s ease forwards}
.pen-flash.goal{color:var(--gold1);text-shadow:0 0 30px #ff9d00,0 6px 0 #8f5300}
.pen-flash.miss{color:var(--red3)}
@keyframes flash2{0%{opacity:0;transform:scale(.3)}22%{opacity:1;transform:scale(1.15)}75%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.1) translateY(-14px)}}

/* ---------- Canales ---------- */
.channels{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ch{position:relative;border-radius:var(--r);overflow:hidden;border:1.5px solid var(--line);aspect-ratio:4/5;background:#0b0c12;transition:transform .4s,box-shadow .4s}
.ch:hover{transform:translateY(-8px);box-shadow:0 30px 60px rgba(0,0,0,.6),0 0 40px rgba(255,194,26,.18)}
.ch-img{position:absolute;inset:0}
.ch-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.ch:hover .ch-img img{transform:scale(1.07)}
.ch::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,7,11,.35) 0%,transparent 28%,rgba(6,7,11,.94) 74%)}
.ch-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px;text-align:center}
.ch-body i{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 10px;border-radius:50%;border:2px solid var(--gold2);background:rgba(6,7,11,.8)}
.ch-body h3{font-size:2.2rem;color:var(--gold2)}
.ch-body p{color:#e5e1d2}

/* ---------- Retail ---------- */
.rows{display:grid;gap:12px;margin:1.4em 0}
.rows li{display:flex;gap:16px;align-items:center;padding:14px 18px;border-radius:18px;border:1px solid var(--line);background:var(--card);transition:transform .3s,border-color .3s}
.rows li:hover{transform:translateX(8px);border-color:var(--gold2)}
.rows i{margin:0}
.rows b{display:block;font-family:var(--f-display);font-size:1.4rem;color:var(--gold2);text-transform:uppercase;letter-spacing:.03em}
.rows span{color:#d4d0c3;line-height:1.4;display:block}
.tagline{font-family:var(--f-display);font-weight:800;font-size:1.6rem;text-transform:uppercase;padding:14px 20px;border:1.5px solid var(--line);border-radius:16px}

/* ---------- Tecnología ---------- */
.tech-map{position:relative;display:grid;grid-template-columns:1fr 1fr 1fr;grid-template-rows:auto auto;gap:26px 150px;max-width:1080px;margin:0 auto;align-items:center}
.tech-wires{position:absolute;inset:0;width:100%;height:100%;fill:none;stroke:var(--gold2);stroke-width:2;stroke-dasharray:6 8;opacity:.6;vector-effect:non-scaling-stroke;animation:dash 1.4s linear infinite;pointer-events:none}
.tech-wires path{vector-effect:non-scaling-stroke}
@keyframes dash{to{stroke-dashoffset:-28}}
.t-card{position:relative;z-index:2;padding:22px 20px;border-radius:20px;border:1.5px solid var(--line);background:linear-gradient(180deg,#14161f,#0b0c12);text-align:center;transition:transform .3s,border-color .3s,box-shadow .3s}
.t-card:hover{transform:translateY(-6px);border-color:var(--gold2);box-shadow:0 0 36px rgba(255,194,26,.2)}
.t-card svg{width:54px;height:54px;margin:0 auto 10px;fill:none;stroke:var(--gold2);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.t-card>b{display:grid;place-items:center;width:62px;height:62px;margin:0 auto 10px;border-radius:50%;border:3px solid var(--gold2);font-family:var(--f-display);font-weight:900;font-size:1.5rem;color:var(--gold2);animation:spin 14s linear infinite;border-style:dashed}
.t-card h3{font-size:1.5rem;color:var(--gold2);margin-bottom:.35em}
.t-card p{color:#d4d0c3;font-size:.95rem;line-height:1.4}
.t-a{grid-column:1;grid-row:1}.t-b{grid-column:1;grid-row:2}
.t-core{grid-column:2;grid-row:1/3;padding:34px 24px;border-color:var(--gold2);background:radial-gradient(circle at 50% 0%,rgba(255,194,26,.18),#0b0c12 70%);box-shadow:0 0 50px rgba(255,194,26,.2);animation:pulseBox 3s ease-in-out infinite}
.t-core svg{width:78px;height:78px}
@keyframes pulseBox{0%,100%{box-shadow:0 0 30px rgba(255,194,26,.15)}50%{box-shadow:0 0 64px rgba(255,194,26,.4)}}
.t-c{grid-column:3;grid-row:1}.t-d{grid-column:3;grid-row:2}

/* ---------- Puzzle (configurable) ---------- */
.puzzle{display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.pz{grid-column:span 2;padding:26px 22px;border-radius:22px;border:1.5px solid var(--gold2);background:linear-gradient(180deg,#14161f,#0b0c12);text-align:center;transition:transform .3s,box-shadow .3s;position:relative}
.pz:nth-child(4){grid-column:2/4}.pz:nth-child(5){grid-column:4/6}
.pz:hover{transform:translateY(-6px) rotate(-.6deg);box-shadow:0 0 40px rgba(255,194,26,.2)}
.pz i{margin:0 auto 12px;width:62px;height:62px}
.pz i svg{width:32px;height:32px}
.pz h3{font-size:1.7rem;color:var(--gold2);margin-bottom:.4em}
.pz p{color:#d4d0c3;line-height:1.45}

/* ---------- Cumplimiento ---------- */
.shields{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;padding-top:6px}
.shield{padding:30px 22px 26px;text-align:center;border-radius:24px;border:1.5px solid var(--line);background:linear-gradient(180deg,#14161f,#0a0b11);transition:transform .3s,box-shadow .3s}
.shield:hover{transform:translateY(-8px);box-shadow:0 0 44px rgba(255,194,26,.2)}
.sh-badge{--bg:linear-gradient(160deg,#13204a,#0a1020);position:relative;isolation:isolate;width:170px;height:190px;margin:0 auto 20px;display:grid;place-content:center;justify-items:center;gap:2px;background:var(--gold-grad);clip-path:polygon(50% 0,100% 18%,100% 70%,50% 100%,0 70%,0 18%);font-family:var(--f-display);text-transform:uppercase;font-weight:800}
.sh-badge::before{content:"";position:absolute;inset:4px;z-index:-1;background:var(--bg);clip-path:polygon(50% 0,100% 18%,100% 70%,50% 100%,0 70%,0 18%)}
.shield:nth-child(2) .sh-badge,.shield:nth-child(3) .sh-badge{--bg:linear-gradient(160deg,#2a1e05,#0b0803)}
.sh-badge span{font-size:2.2rem;line-height:1}
.sh-badge sup{font-size:.9rem}
.sh-badge small{font-size:1.2rem;letter-spacing:.08em;color:var(--gold2)}
.sh-badge em{font-style:normal;color:var(--gold2);letter-spacing:.2em}
.sh-badge svg{width:42px;height:42px;fill:none;stroke:var(--gold2);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.sh-badge .sh-globe{stroke-width:1.5;width:46px;height:46px;animation:spin 18s linear infinite}
.shield h3{font-size:1.6rem;margin-bottom:.4em}
.shield p{color:#d4d0c3;line-height:1.45}
.adv{display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch}
.adv-col{padding:26px;border-radius:var(--r);border:1px solid rgba(255,255,255,.1);background:var(--card);overflow:hidden}
.adv-col h3{font-size:1.8rem;padding:.4em .8em;border-radius:10px;margin-bottom:16px;text-align:center}
.adv-old{filter:grayscale(1);opacity:.78}
.adv-old h3{background:#23252e}
.adv-new{border-color:var(--gold2);box-shadow:0 0 60px rgba(255,194,26,.12)}
.adv-new h3{background:var(--gold-grad);color:#201300}
.adv-new img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;margin-bottom:16px}
.adv ol{counter-reset:a;display:grid;gap:8px}
.adv li{counter-increment:a;display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.1);font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:1.15rem}
.adv li::before{content:counter(a);display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#444753;font-size:1rem}
.adv-new li::before{background:var(--gold2);color:#201300}
.adv-old .vs-badge{display:none}

/* ---------- FAQ ---------- */
.faq-wrap{max-width:900px}
.faq{display:grid;gap:12px}
.faq details{border:1px solid var(--line);border-radius:16px;background:var(--card);transition:border-color .3s,background .3s}
.faq details[open]{border-color:var(--gold2);background:linear-gradient(90deg,rgba(255,194,26,.08),var(--card))}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-family:var(--f-display);font-weight:700;font-size:1.4rem;text-transform:uppercase;letter-spacing:.03em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--gold2);color:var(--gold2);font-size:1.5rem;line-height:1;transition:transform .3s,background .3s}
.faq details[open] summary::after{transform:rotate(45deg);background:var(--gold2);color:#201300}
.faq p{padding:0 22px 20px;color:#d4d0c3;max-width:46em}

/* ---------- Contratar ---------- */
.hire{overflow:hidden;background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(211,18,27,.25),transparent 70%),radial-gradient(ellipse 60% 50% at 80% 100%,rgba(255,194,26,.16),transparent 70%),#07080d}
.hire-bg{position:absolute;inset:0;pointer-events:none}
.hire .wrap{position:relative}
.hire-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:24px;align-items:start;position:relative}
.hire-form{padding:clamp(20px,3vw,34px);border-radius:28px;border:1.5px solid var(--line);background:rgba(11,12,18,.9);backdrop-filter:blur(8px);display:grid;gap:22px;box-shadow:0 40px 90px rgba(0,0,0,.6)}
.hire-form fieldset{border:0;padding:0;margin:0;display:grid;gap:14px;min-width:0}
.hire-form legend{display:flex;align-items:center;gap:12px;padding:0;margin-bottom:12px;font-family:var(--f-display);font-weight:800;font-size:1.5rem;text-transform:uppercase;letter-spacing:.05em}
.hire-form legend span{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--gold-grad);color:#201300;font-weight:900}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip input{position:absolute;opacity:0;pointer-events:none}
.chip span{display:inline-flex;align-items:center;gap:8px;padding:.6em 1.1em;border-radius:999px;border:1.5px solid rgba(255,255,255,.2);background:rgba(255,255,255,.04);font-family:var(--f-display);font-weight:700;font-size:1.1rem;letter-spacing:.05em;text-transform:uppercase;cursor:pointer;transition:all .2s;user-select:none}
.chip span:hover{border-color:var(--gold2)}
.chip input:checked+span{background:var(--gold-grad);border-color:var(--gold2);color:#201300;box-shadow:0 4px 18px rgba(255,194,26,.3)}
.chip input:checked+span::before{content:"✓"}
.chip input:focus-visible+span{outline:3px solid var(--gold2);outline-offset:3px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.fld input[type=text],.fld input[type=email],.fld select,.fld textarea{grid-column:1/-1;width:100%;padding:.8em 1em;border-radius:12px;border:1.5px solid rgba(255,255,255,.18);background:#12141d;color:var(--text);font:inherit;font-size:1rem;letter-spacing:normal;text-transform:none;font-weight:400}
.fld textarea{resize:vertical}
.fld input:focus,.fld select:focus,.fld textarea:focus{border-color:var(--gold2);outline:0;box-shadow:0 0 0 3px rgba(255,194,26,.2)}
.fld input.bad{border-color:var(--red3)}
.form-err{padding:12px 16px;border-radius:12px;background:rgba(211,18,27,.15);border:1px solid var(--red3);color:#ffb3b5}
.hire-sum{position:sticky;top:90px;padding:26px 22px;border-radius:24px;border:1.5px solid var(--gold2);background:linear-gradient(180deg,#1a1405,#0b0a07);text-align:center;box-shadow:0 0 60px rgba(255,194,26,.14)}
.hire-sum img{width:100px;height:100px;object-fit:contain;margin:-8px auto 4px;animation:floaty 5s ease-in-out infinite}
.hire-sum h3{font-size:1.6rem;margin-bottom:.8em}
.hire-sum dl{display:grid;gap:10px;text-align:left}
.hire-sum dl div{display:grid;gap:2px;padding-bottom:10px;border-bottom:1px solid rgba(255,194,26,.2)}
.hire-sum dt{font-family:var(--f-display);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold2);font-size:.95rem}
.hire-sum dd{color:#ece8d9;font-size:.98rem;line-height:1.4}
.sum-foot{margin-top:14px;font-size:.82rem;color:var(--mut)}
.hire-ok{position:absolute;inset:0;z-index:5;display:grid;align-content:center;justify-items:center;gap:14px;text-align:center;padding:30px;border-radius:28px;border:2px solid var(--gold2);background:radial-gradient(circle at 50% 0,#2a2006,#0b0a07 70%);box-shadow:0 40px 100px rgba(0,0,0,.8)}
.hire-ok h3{font-size:clamp(2rem,4vw,3rem)}
.hire-ok pre{max-width:520px;width:100%;margin:0;padding:16px;border-radius:14px;background:rgba(0,0,0,.45);border:1px solid var(--line);color:#e9e5d6;font:500 .9rem/1.6 var(--f-body);text-align:left;white-space:pre-wrap}
.ok-ball{width:76px;height:76px;animation:okBounce 1s ease-in-out infinite,splashSpin 2.4s linear infinite}
@keyframes okBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ---------- Footer ---------- */
.footer{padding:60px 0 28px;background:#040509;border-top:2px solid var(--gold2)}
.foot-grid{display:grid;grid-template-columns:1.2fr 1.2fr .8fr;gap:30px;align-items:start}
.foot-logo{width:130px;height:130px;object-fit:contain}
.foot-tag{font-family:var(--f-display);font-weight:700;font-size:1.4rem;text-transform:uppercase;color:var(--gold1);margin-top:6px}
.footer h4{font-size:1.3rem;color:var(--gold2);margin-bottom:.6em}
.footer p{color:#c9c5b6;font-size:.98rem}
.footer a:hover{color:var(--gold1);text-decoration:underline}
.foot-legal{margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem;color:var(--mut);text-align:center}

/* ---------- Efectos y utilidades ---------- */
#fxBurst{position:fixed;inset:0;width:100%;height:100%;z-index:500;pointer-events:none}
#toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:600;padding:.8em 1.3em;border-radius:999px;background:#12141d;border:1.5px solid var(--gold2);box-shadow:0 14px 40px rgba(0,0,0,.7);font-size:.95rem;max-width:calc(100% - 32px);text-align:center}

/* ==================== Responsive ==================== */
@media (max-width:1180px){
  .menu{display:none}
  .burger{display:block}
  .nav-tools{margin-left:auto}
  .menu.open{display:grid;position:fixed;left:12px;right:12px;top:calc(var(--nav-h) - 4px);padding:14px;border-radius:20px;background:rgba(8,9,14,.97);border:1px solid var(--line);box-shadow:0 30px 60px rgba(0,0,0,.7);gap:2px;margin:0}
  .menu.open a{font-size:1.3rem;padding:.7em 1em}
  .hero-grid{grid-template-columns:1fr}
  .hero-copy{text-align:center;display:grid;justify-items:center}
  .hero-logo{margin-left:0;width:min(320px,70%)}
  .pillars{margin-inline:auto}
  .hero-stage{height:540px;max-width:640px;width:100%;margin:10px auto 0}
  .stage-kicker{right:-6%;width:110%}
  .demo{grid-template-columns:1fr}
  .demo-side{position:static;max-width:420px;margin:0 auto;width:100%}
  .prize-grid,.pen,.xp,.split,.split-rev,.solution{grid-template-columns:1fr}
  .split-rev .split-img{order:2}
  .hire-grid{grid-template-columns:1fr}
  .hire-sum{position:static}
}
@media (max-width:900px){
  .feat-row,.mech{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr);gap:40px 20px}
  .steps::before{display:none}
  .why,.shields,.channels{grid-template-columns:1fr}
  .ch{aspect-ratio:4/4.4}
  .puzzle{grid-template-columns:repeat(2,1fr)}
  .pz,.pz:nth-child(4),.pz:nth-child(5){grid-column:auto}
  .pz:nth-child(5){grid-column:1/-1}
  .tech-map{grid-template-columns:1fr;gap:16px}
  .tech-wires{display:none}
  .t-a,.t-b,.t-c,.t-d,.t-core{grid-column:1;grid-row:auto}
  .t-core{order:-1}
  .versus,.adv{grid-template-columns:1fr}
  .vs-badge{margin:-22px auto}
  .foot-grid{grid-template-columns:1fr 1fr}
  .plist{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  body{font-size:16px}
  .wrap{width:calc(100% - 32px)}
  .hero{padding-bottom:70px}
  .hero-stage{height:430px}
  .phone{width:44%;aspect-ratio:auto;border-radius:26px;padding:10px 8px 8px}
  .phone-logo{width:48px;height:48px}.phone-title{font-size:.68rem}.phone-round{font-size:.75rem}
  .phone-grid{gap:4px}.phone-grid em{width:13px;height:13px;font-size:10px;line-height:13px}
  .phone-cta{font-size:.8rem;padding:.55em}
  .ticket{width:30%;padding:8px 6px}
  .ticket img{width:38px;height:38px}.ticket small{font-size:.46rem}.qr{width:52px;height:52px}
  .stage-kicker{width:132%;right:-22%;top:0}
  .pillars{grid-template-columns:1fr;max-width:300px;text-align:left}
  .pillars li{grid-template-columns:auto 1fr;column-gap:12px;align-items:center}
  .pillars i{grid-row:span 2;margin:0}
  .cta-row .btn{width:100%}
  .feat-row,.mech,.steps,.row2{grid-template-columns:1fr}
  .slots{grid-template-columns:repeat(4,1fr);gap:8px}
  .plist{grid-template-columns:1fr}
  .demo-actions{grid-template-columns:1fr}
  .demo-panel{padding:16px;border-radius:22px}
  .pt-head{font-size:.8rem;grid-template-columns:.9fr 1.4fr 1fr}
  .pt-row,.pt-total{grid-template-columns:.9fr 1.4fr 1fr;padding-inline:12px;font-size:1.1rem}
  .pt-row .amt{font-size:1rem}
  .puzzle{grid-template-columns:1fr}
  .pz:nth-child(5){grid-column:auto}
  .foot-grid{grid-template-columns:1fr}
  .note-paper{font-size:.85rem;width:54%}
  .xp-list li{grid-template-columns:auto 1fr}
  .gol-pill{font-size:1.1rem;right:8px}.gol-pill svg{width:24px;height:24px}
  .pen-score{justify-content:center}.pen-copy{text-align:center}
  .brand img{width:46px;height:46px}
  .nav-tools .btn{display:none}
  .lang-pop{right:-52px;width:min(290px,calc(100vw - 32px))}
}