/* ============ Quantrix Code ============ */
:root{
  --bg:#030712; --bg2:#0b1120; --card:#0f1729; --card2:#16213a; --line:#1f2d4d; --line2:#2b3d66;
  --text:#e9efff; --muted:#8a9bc4; --dim:#5b6b92;
  --cyan:#22d3ee; --violet:#a855f7; --green:#34d399; --amber:#fbbf24; --red:#f87171; --pink:#f472b6;
  --c:var(--cyan); --c2:var(--violet);
  --ok:#34d399; --ok-bg:rgba(52,211,153,.12); --no:#f87171; --no-bg:rgba(248,113,113,.12);
  --radius:18px; --font:'Space Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --grad:linear-gradient(135deg,var(--cyan),var(--violet));
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;overflow-x:clip}
body{background:var(--bg);color:var(--text);font:16px/1.6 var(--font);min-height:100vh;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;color:inherit}
:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.bg-grid{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 500px at 85% -10%,rgba(168,85,247,.18),transparent 60%),
    radial-gradient(800px 500px at -10% 10%,rgba(34,211,238,.14),transparent 60%),
    linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px) 0 0/40px 40px,
    linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px) 0 0/40px 40px;}

/* ---------- Barra superior ---------- */
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:20px;padding:10px 20px;background:rgba(7,11,20,.78);backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:19px;letter-spacing:-.2px}
.brand b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin-left:3px}
.nav{display:flex;gap:4px;margin-left:12px}
.nav a{padding:7px 14px;border-radius:10px;color:var(--muted);font-weight:500;font-size:15px}
.nav a:hover{color:var(--text);background:var(--card)}
.nav a.on{color:var(--text);background:var(--card2)}
.stats{display:flex;gap:8px;margin-left:auto}
.pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;background:var(--card);border:1px solid var(--line);font-size:14px}
.pill i{font-style:normal}
.pro-pill{background:var(--grad);border:0;color:#0b0620;font-weight:700;letter-spacing:.5px}
.tabbar{display:none}

main{max-width:1040px;margin:0 auto;padding:28px 20px 90px;outline:none}
.narrow{max-width:720px;margin:0 auto}

h1{font-size:clamp(28px,5vw,46px);line-height:1.08;letter-spacing:-1px;margin:8px 0 12px}
h2{font-size:22px;letter-spacing:-.3px;margin:34px 0 14px}
h3{margin:0}
.sub{color:var(--muted);font-size:17px;margin:0 0 22px}
.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font:600 12px var(--mono);letter-spacing:1.5px;text-transform:uppercase;color:var(--c)}
.muted{color:var(--muted)}
.small{font-size:13px;color:var(--muted)}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:14px;padding:14px 24px;font-weight:700;font-size:16px;background:var(--grad);color:#08051a;box-shadow:0 5px 0 #4b2a8a,0 10px 30px -10px rgba(168,85,247,.6);transition:transform .08s,box-shadow .08s,filter .15s;text-align:center}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(3px);box-shadow:0 2px 0 #4b2a8a}
.btn[disabled]{opacity:.4;cursor:not-allowed;filter:grayscale(.5)}
.btn.block{width:100%}
.btn.ghost{background:var(--card);color:var(--text);border:1px solid var(--line2);box-shadow:0 4px 0 var(--line)}
.btn.ok{background:var(--ok);color:#03241a;box-shadow:0 5px 0 #138a62}
.btn.no{background:var(--no);color:#2a0606;box-shadow:0 5px 0 #a33a3a}
.btn.gold{background:linear-gradient(135deg,#fde68a,#f59e0b);color:#2b1700;box-shadow:0 5px 0 #a16207}
.btn.sm{padding:9px 16px;font-size:14px;border-radius:12px}

/* ---------- Tarjetas ---------- */
.card{background:linear-gradient(180deg,rgba(22,33,58,.7),rgba(15,23,41,.85));border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.bar{height:8px;background:var(--card2);border-radius:99px;overflow:hidden}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--c),var(--c2));border-radius:99px;transition:width .4s cubic-bezier(.2,.8,.2,1)}

/* ---------- Inicio ---------- */
.hero{display:grid;grid-template-columns:1.25fr .9fr;gap:28px;align-items:center;margin-bottom:12px}
.hero .lead{font-size:18px;color:var(--muted);max-width:560px}
.hero-stats{display:flex;gap:26px;margin:22px 0 26px;flex-wrap:wrap}
.hero-stats div b{display:block;font-size:28px;letter-spacing:-.5px}
.hero-stats div span{font-size:13px;color:var(--muted)}
.terminal{background:#05080f;border:1px solid var(--line2);border-radius:16px;overflow:hidden;box-shadow:0 30px 80px -30px rgba(34,211,238,.35)}
.terminal .tb{display:flex;gap:6px;padding:10px 14px;background:var(--card);border-bottom:1px solid var(--line)}
.terminal .tb i{width:11px;height:11px;border-radius:50%;background:#ff5f57}.terminal .tb i:nth-child(2){background:#febc2e}.terminal .tb i:nth-child(3){background:#28c840}
.terminal pre{margin:0;border:0;border-radius:0;background:transparent;min-height:240px;font-size:13px;white-space:pre-wrap;word-break:break-word}
.cursor{display:inline-block;width:8px;height:16px;background:var(--cyan);vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}

.today{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center}
.ring{--p:0;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--green) calc(var(--p)*1%),var(--card2) 0);position:relative;flex:none}
.ring::before{content:'';position:absolute;inset:7px;border-radius:50%;background:var(--card)}
.ring b{position:relative;font-size:14px}

.tracks{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.track{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:var(--radius);background:var(--card);border:1px solid var(--line);transition:transform .15s,border-color .15s}
.track:hover{transform:translateY(-3px);border-color:var(--c)}
.track::after{content:'';position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,var(--c),transparent 70%);opacity:.18}
.track .ticon{font-size:40px;line-height:1}
.track h3{font-size:21px;margin-top:6px}
.track p{margin:0 0 10px;color:var(--muted);font-size:14px;flex:1}
.track .meta{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);margin-top:8px}

.c-red{--c:#22d3ee;--c2:#3b82f6}
.c-py{--c:#facc15;--c2:#3b82f6}
.c-lnx{--c:#34d399;--c2:#14b8a6}
.c-sec{--c:#f472b6;--c2:#a855f7}

.pro-banner{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center;margin-top:34px;padding:26px;border-radius:22px;background:radial-gradient(600px 200px at 0 0,rgba(168,85,247,.35),transparent),linear-gradient(135deg,#1a1033,#0f1729);border:1px solid #3b2a6b}
.pro-banner h3{font-size:24px}
.pro-banner ul{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--muted);font-size:14px}
.pro-banner li::before{content:'✓ ';color:var(--green)}

/* ---------- Ruta (mapa de niveles) ---------- */
.back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:14px;margin-bottom:8px}
.back:hover{color:var(--text)}
.track-head{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:center;margin-bottom:10px}
.track-head .ticon{font-size:52px;width:84px;height:84px;display:grid;place-items:center;border-radius:24px;background:var(--card2);border:1px solid var(--line2)}
.track-head h1{margin:0 0 4px}
.track-head .sub{margin:0}
.level-tabs{display:flex;gap:8px;overflow-x:auto;padding:4px 0 12px;margin:16px 0 8px;scrollbar-width:none}
.level-tabs a{flex:none;padding:8px 16px;border-radius:99px;border:1px solid var(--line2);background:var(--card);font-size:14px;color:var(--muted);font-weight:600}
.level-tabs a.cur{color:var(--text);border-color:var(--c)}
.level-tabs a.done{color:var(--ok)}
.level{margin:30px 0 10px;scroll-margin-top:80px}
.level-card{display:grid;grid-template-columns:auto 1fr auto;gap:18px;align-items:center;padding:22px;border-radius:22px;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 22%,transparent),color-mix(in srgb,var(--c2) 18%,transparent)),var(--card);border:1px solid color-mix(in srgb,var(--c) 45%,var(--line))}
.level-card .num{width:62px;height:62px;border-radius:18px;display:grid;place-items:center;font:700 26px var(--mono);background:rgba(0,0,0,.35);border:1px solid rgba(255,255,255,.12)}
.level-card h2{margin:0;font-size:24px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.level-card p{margin:2px 0 8px;color:#c6d2ee;font-size:14px}
.level-card.locked{filter:saturate(.35);opacity:.8}
.tag{font:700 11px var(--mono);letter-spacing:1px;padding:3px 8px;border-radius:99px;background:var(--grad);color:#0b0620}
.module{margin:34px 0 4px;display:flex;align-items:center;gap:12px}
.module::before,.module::after{content:'';flex:1;height:1px;background:var(--line2)}
.module div{text-align:center;max-width:72%}
.module b{display:block;font-size:17px}
.module span{font-size:13px;color:var(--muted)}
.path{display:flex;flex-direction:column;align-items:center;gap:22px;padding:24px 0 6px}
.node{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;background:none;border:0;padding:0;width:170px;transform:translateX(var(--x,0))}
.node .disc{width:76px;height:76px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:var(--card2);border:3px solid var(--line2);box-shadow:0 6px 0 #0a1020;transition:transform .12s}
.node:hover:not(.locked) .disc{transform:translateY(-3px)}
.node .lbl{font-size:13px;color:var(--muted);text-align:center;line-height:1.25}
.node.done .disc{background:linear-gradient(135deg,var(--c),var(--c2));border-color:transparent;color:#05101a;box-shadow:0 6px 0 color-mix(in srgb,var(--c2) 55%,#000)}
.node.open .disc{border-color:var(--c);box-shadow:0 6px 0 #0a1020,0 0 0 8px color-mix(in srgb,var(--c) 18%,transparent);animation:pulse 2s infinite}
.node.open .lbl{color:var(--text);font-weight:600}
.node.locked{cursor:default}.node.locked .disc{opacity:.4}
.node.pro .disc{border-style:dashed}
.node.quiz .disc{border-radius:22px;font-size:26px}
.node.exam .disc{width:94px;height:94px;border-radius:28px;font-size:38px}
.node .bubble{position:absolute;top:-36px;white-space:nowrap;background:var(--text);color:var(--bg);font:700 12px var(--mono);padding:5px 10px;border-radius:10px;letter-spacing:1px;animation:bob 1.6s ease-in-out infinite;z-index:2}
.node .bubble::after{content:'';position:absolute;left:50%;bottom:-5px;transform:translateX(-50%) rotate(45deg);width:10px;height:10px;background:var(--text)}
@keyframes pulse{0%,100%{box-shadow:0 6px 0 #0a1020,0 0 0 6px color-mix(in srgb,var(--c) 22%,transparent)}50%{box-shadow:0 6px 0 #0a1020,0 0 0 14px color-mix(in srgb,var(--c) 5%,transparent)}}
@keyframes bob{50%{transform:translateY(-4px)}}

/* ---------- Intro de lección / resultados ---------- */
.intro{text-align:center;padding-top:10px}
.intro .big{font-size:64px;line-height:1}
.chips{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;margin:6px 0 20px}
.chip{padding:5px 12px;border-radius:99px;background:var(--card2);border:1px solid var(--line2);font-size:13px;color:var(--muted)}
.goals{text-align:left;margin:0 0 22px}
.goals ul{margin:8px 0 0;padding-left:0;list-style:none}
.goals li{padding:9px 0 9px 30px;position:relative;border-top:1px solid var(--line)}
.goals li:first-child{border-top:0}
.goals li::before{content:'◆';position:absolute;left:6px;color:var(--c)}

/* ---------- Reproductor ---------- */
.player{max-width:720px;margin:0 auto}
.ptop{display:flex;align-items:center;gap:14px;margin-bottom:22px;position:sticky;top:58px;z-index:5;padding:10px 0;background:linear-gradient(var(--bg) 70%,transparent)}
.ptop .bar{flex:1;height:14px}
.x{background:none;border:0;color:var(--muted);font-size:24px;line-height:1;padding:4px 6px}
.x:hover{color:var(--text)}
.combo{font:700 14px var(--mono);color:var(--amber);min-width:56px;text-align:right}
.step{animation:in .28s cubic-bezier(.2,.8,.2,1)}
@keyframes in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.step h2{margin:10px 0 18px;font-size:clamp(22px,3.4vw,28px);line-height:1.25}
.prose{font-size:17px}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 14px;padding-left:22px}
.prose li{margin-bottom:6px}
.prose strong,.note strong{color:#fff}
code{font:.9em var(--mono);background:rgba(34,211,238,.08);border:1px solid rgba(34,211,238,.18);color:#7ee7f7;padding:1px 6px;border-radius:6px;word-break:break-word}
pre{margin:14px 0;padding:16px 18px;background:#05080f;border:1px solid var(--line2);border-radius:14px;overflow-x:auto;font:14.5px/1.6 var(--mono);color:#b9f6ff;white-space:pre}
.note{margin:14px 0;padding:14px 16px;border-radius:14px;border:1px solid var(--line2);background:var(--card)}
.note>b{display:block;font-size:13px;letter-spacing:.4px;margin-bottom:4px}
.note.key{border-color:rgba(59,130,246,.5);background:rgba(59,130,246,.09)}.note.key>b{color:#93c5fd}
.note.ex{border-color:rgba(20,184,166,.45);background:rgba(20,184,166,.08)}.note.ex>b{color:#5eead4}
.note.tip{border-color:rgba(52,211,153,.45);background:rgba(52,211,153,.08)}.note.tip>b{color:#6ee7b7}
.note.warn{border-color:rgba(251,191,36,.45);background:rgba(251,191,36,.08)}.note.warn>b{color:#fcd34d}
.note.lab{border-color:rgba(168,85,247,.55);background:linear-gradient(135deg,rgba(168,85,247,.14),rgba(34,211,238,.06))}.note.lab>b{color:#d8b4fe}
.note .pl{white-space:pre-line}
.tablewrap{overflow-x:auto;margin:14px 0;border:1px solid var(--line2);border-radius:14px}
table{border-collapse:collapse;width:100%;font-size:15px}
th,td{padding:10px 12px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
tr:last-child td{border-bottom:0}
th{background:var(--card2);font-size:13px;letter-spacing:.3px;color:var(--muted)}

.opts{display:grid;gap:10px;margin:20px 0}
.opt{position:relative;text-align:left;background:var(--card);border:2px solid var(--line2);border-radius:14px;padding:14px 16px 14px 50px;font-size:16px;box-shadow:0 4px 0 var(--line);transition:border-color .12s,transform .08s}
.opt .k{position:absolute;left:14px;top:14px;width:24px;height:24px;border-radius:7px;border:1px solid var(--line2);display:grid;place-items:center;font:600 12px var(--mono);color:var(--muted)}
.opt:hover:not([disabled]){border-color:var(--c)}
.opt:active:not([disabled]){transform:translateY(2px)}
.opt.ok{border-color:var(--ok);background:var(--ok-bg)}
.opt.no{border-color:var(--no);background:var(--no-bg);animation:shake .35s}
.opt.sel{border-color:#60a5fa;background:rgba(96,165,250,.12)}
.opt[disabled]{cursor:default}
.opt.mono{font-family:var(--mono);font-size:15px;white-space:pre-wrap}
.match .opt,.pool .opt{padding-left:16px}
@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.blank{display:inline-block;min-width:64px;border-bottom:2px dashed var(--c);color:var(--amber);text-align:center}
.blank.ok{border-color:var(--ok);color:var(--ok)}.blank.no{border-color:var(--no);color:var(--no)}
.term{display:flex;align-items:center;gap:10px;background:#05080f;border:2px solid var(--line2);border-radius:14px;padding:14px 16px;margin:20px 0 8px}
.term:focus-within{border-color:var(--c)}
.term .prompt{color:var(--green);font:600 16px var(--mono);white-space:nowrap}
.term input{flex:1;min-width:0;background:none;border:0;outline:0;color:#e9fbff;font:16px var(--mono)}
.hint{min-height:22px;font-size:14px;color:var(--amber)}
.match{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:20px 0}
.match>div{display:grid;gap:10px;align-content:start}
.match .opt{padding:12px 14px;font-size:15px}
.placed{list-style:none;padding:0;margin:16px 0;counter-reset:o}
.placed li{counter-increment:o;position:relative;padding:11px 14px 11px 46px;margin-bottom:8px;border-radius:12px;border:1px solid var(--ok);background:var(--ok-bg);white-space:pre-wrap}
.placed li::before{content:counter(o);position:absolute;left:12px;top:11px;width:24px;height:24px;border-radius:7px;background:var(--ok);color:#03241a;display:grid;place-items:center;font:700 12px var(--mono)}
.pool .opt{white-space:pre-wrap}

.sheetbar{position:sticky;bottom:0;margin:22px -20px 0;padding:16px 20px calc(16px + env(safe-area-inset-bottom));background:var(--bg2);border-top:1px solid var(--line);animation:up .25s;z-index:4}
.sheetbar.ok{background:#06241a;border-color:#145c43}
.sheetbar.no{background:#2a0d10;border-color:#6b2128}
.sheetbar .fbt{font-weight:700;font-size:18px;margin-bottom:4px}
.sheetbar.ok .fbt{color:var(--ok)}.sheetbar.no .fbt{color:var(--no)}
.sheetbar .why{font-size:15px;color:#d5def5;margin-bottom:14px}
.sheetbar pre{margin:0 0 12px;font-size:13px}
@keyframes up{from{transform:translateY(30px);opacity:0}to{transform:none;opacity:1}}
.floatxp{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);font:700 26px var(--mono);color:var(--amber);pointer-events:none;animation:fx 1s forwards;z-index:50}
@keyframes fx{to{transform:translate(-50%,-150%);opacity:0}}

.result{text-align:center;padding-top:20px}
.result .big{font-size:84px;line-height:1;animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.3)}}
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}
.tile{padding:14px;border-radius:16px;background:var(--card);border:1px solid var(--line2)}
.tile b{display:block;font:700 24px var(--mono)}
.tile span{font-size:12px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase}
.recap{text-align:left;margin:0 0 22px}
.recap ul{margin:8px 0 0;padding-left:20px}
.recap li{margin-bottom:6px}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:40}

/* ---------- Perfil ---------- */
.profile-head{display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:center}
.avatar{width:86px;height:86px;border-radius:26px;display:grid;place-items:center;font-size:42px;background:var(--grad)}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:22px 0}
.kpi{padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.kpi b{display:block;font:700 26px var(--mono)}
.kpi span{font-size:13px;color:var(--muted)}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.badge{padding:16px;border-radius:16px;background:var(--card);border:1px solid var(--line);text-align:center}
.badge .bi{font-size:34px}
.badge b{display:block;font-size:14px;margin-top:4px}
.badge span{font-size:12px;color:var(--muted)}
.badge.off{opacity:.35;filter:grayscale(1)}
.rows{display:grid;gap:10px}
.row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line)}
.switch{width:46px;height:26px;border-radius:99px;background:var(--line2);border:0;position:relative;flex:none}
.switch::after{content:'';position:absolute;left:3px;top:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:left .15s}
.switch.on{background:var(--green)}.switch.on::after{left:23px}

/* ---------- Modal / toast ---------- */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(3,6,12,.75);backdrop-filter:blur(6px)}
.modal[hidden],.toast[hidden]{display:none}
.sheet{width:100%;max-width:440px;padding:28px;border-radius:24px;background:var(--card);border:1px solid var(--line2);text-align:center;animation:pop .3s cubic-bezier(.2,1.4,.4,1)}
.sheet h3{font-size:24px;margin:8px 0 4px}
.sheet ul{text-align:left;color:#cdd8f3;padding-left:0;list-style:none;margin:16px 0}
.sheet li{padding:6px 0 6px 28px;position:relative}
.sheet li::before{content:'✓';position:absolute;left:4px;color:var(--green);font-weight:700}
.price{font:700 42px var(--mono);margin:6px 0}
.price small{font:400 15px var(--font);color:var(--muted)}
.sheet .btn{width:100%;margin-top:10px}
.toast{position:fixed;left:50%;bottom:90px;transform:translateX(-50%);z-index:70;display:flex;gap:12px;align-items:center;padding:14px 18px;border-radius:16px;background:var(--card2);border:1px solid var(--line2);box-shadow:0 20px 50px -10px #000;animation:up .3s;max-width:92vw}
.toast .ti{font-size:30px}
.toast b{display:block}
.toast span{font-size:13px;color:var(--muted)}
.loading{text-align:center;padding:80px 0;color:var(--muted)}
.loading::before{content:'';display:block;width:34px;height:34px;margin:0 auto 14px;border-radius:50%;border:3px solid var(--line2);border-top-color:var(--cyan);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Móvil ---------- */
@media (max-width:820px){
  .hero{grid-template-columns:1fr}
  .hero .terminal{display:none}
  .nav{display:none}
  .top{padding:10px 16px}
  main{padding:20px 16px 110px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:20;background:rgba(7,11,20,.94);backdrop-filter:blur(14px);border-top:1px solid var(--line);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:11px;color:var(--muted);padding:6px 0;border-radius:12px}
  .tabbar a i{font-style:normal;font-size:20px}
  .tabbar a.on{color:var(--text);background:var(--card)}
  body.playing .tabbar{display:none}
  body.playing main{padding-bottom:30px}
  .level-card{grid-template-columns:auto 1fr}
  .level-card .lc-act{grid-column:1/-1}
  .pro-banner{grid-template-columns:1fr}
  .today{grid-template-columns:auto 1fr}
  .today .btn{grid-column:1/-1}
  .match .opt{padding:10px;font-size:14px}
  .ptop{top:52px}
  .sheetbar{margin:22px -16px 0;padding-left:16px;padding-right:16px}
  .node{width:130px}
  .brand span{font-size:17px}
  .track-head{grid-template-columns:56px 1fr;gap:14px;align-items:start}
  .track-head .ticon{width:56px;height:56px;font-size:30px;border-radius:16px}
  .track-head h1{font-size:28px}
  .track-head .sub{font-size:14px}
  .hero-stats{gap:18px;flex-wrap:nowrap}
  .hero-stats div b{font-size:22px}
  .hero-stats div span{font-size:11px}
  .level-card{padding:16px;gap:12px}
  .level-card .num{width:44px;height:44px;font-size:20px;border-radius:14px}
  .level-card h2{font-size:20px}
  .stats{gap:6px}.pill{padding:4px 9px}
}
@media (max-width:420px){ .brand span{display:none} }
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ================= QuantoryxCode: marca, fondos y bienvenida ================= */
#rain{position:fixed;inset:0;z-index:-2;width:100%;height:100%;opacity:.45;pointer-events:none;transition:opacity .4s}
body.playing #rain{opacity:.08}
.logo{height:16px;width:auto;display:block}
.logo-q{display:none;height:26px;width:26px}
.me{display:grid;place-items:center;min-width:34px;height:34px;border-radius:99px;overflow:hidden;background:var(--card2);border:1px solid var(--line2);font-weight:700;font-size:14px}
.me img{width:34px;height:34px;object-fit:cover}
.me .enter{padding:0 14px;font-size:13px;font-weight:600}
body.welcome .top,body.welcome .tabbar{display:none}
body.welcome main{padding-top:36px}

/* Inicio con la Tierra detrás de la terminal */
.hero{position:relative;isolation:isolate}
.hero::before{content:'';position:absolute;z-index:-1;right:-140px;top:-90px;width:min(820px,85vw);aspect-ratio:1168/784;background:url(assets/earth.webp) center/cover no-repeat;-webkit-mask-image:radial-gradient(closest-side,#000 45%,transparent);mask-image:radial-gradient(closest-side,#000 45%,transparent);opacity:.8;pointer-events:none}
.terminal{background:rgba(3,7,18,.82);backdrop-filter:blur(4px)}

/* Banner del robot en rutas y perfil */
.track-head{position:relative;isolation:isolate;padding:28px 0 8px}
.track-head::before{content:'';position:absolute;z-index:-1;inset:-30px -20px -10px 42%;background:url(assets/robot.webp) right 35%/cover no-repeat;-webkit-mask-image:linear-gradient(90deg,transparent,#000 45%,#000 75%,transparent),linear-gradient(transparent,#000 25%,#000 70%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 45%,#000 75%,transparent),linear-gradient(transparent,#000 25%,#000 70%,transparent);mask-composite:intersect;opacity:.42;pointer-events:none}
.profile-banner{height:150px;margin:-10px 0 -60px;border-radius:24px;background:linear-gradient(180deg,transparent 30%,var(--bg)),url(assets/robot-sm.webp) center 30%/cover no-repeat;opacity:.9}
.acct{position:relative;margin-bottom:18px;background:rgba(15,23,41,.85);backdrop-filter:blur(6px)}
.acct .who{display:flex;align-items:center;gap:12px}
.acct .who img{width:40px;height:40px;border-radius:50%}
.acct .who b,.acct .who .small{display:block}

/* Bienvenida */
.hello{position:relative;min-height:calc(100vh - 140px);display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:20px;isolation:isolate}
.hello-bg{grid-column:2;grid-row:1;align-self:stretch;min-height:560px;border-radius:28px;background:url(assets/welcome.webp) center 18%/cover no-repeat;box-shadow:0 40px 120px -40px rgba(251,191,36,.35),0 0 0 1px rgba(255,255,255,.06);-webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.hello-in{grid-column:1;grid-row:1;max-width:560px}
.hello-logo{width:min(460px,100%);height:auto;margin-bottom:22px;filter:drop-shadow(0 0 24px rgba(34,211,238,.35))}
.hello-tag{font:600 13px var(--mono);letter-spacing:10px;color:#fcd34d;margin:0 0 6px}
.hello h1{font-size:clamp(30px,4.6vw,50px)}
.hello .lead{font-size:18px;color:#c3cde6;margin:0 0 26px}
.btn.google{background:#fff;color:#1f1f1f;box-shadow:0 5px 0 #b9c0cf,0 18px 40px -12px rgba(255,255,255,.35);padding:15px 26px;font-size:17px}
.btn.google svg{flex:none}
.hello .small{margin:14px 0 6px}
.linkbtn{background:none;border:0;color:var(--cyan);font-weight:600;padding:6px 0}
.linkbtn:hover{text-decoration:underline}

@media (max-width:820px){
  .hero::before{right:-40%;top:-40px;width:150vw;opacity:.45}
  .track-head::before{inset:-20px -16px -10px 20%;background-image:url(assets/robot-sm.webp);opacity:.35}
  .hello{grid-template-columns:1fr;min-height:calc(100vh - 70px);align-items:end;padding-bottom:24px}
  .hello-bg{grid-column:1;position:fixed;inset:0;z-index:-1;min-height:0;border-radius:0;box-shadow:none;background-image:linear-gradient(180deg,rgba(3,7,18,.15) 0%,rgba(3,7,18,.35) 40%,rgba(3,7,18,.96) 72%),url(assets/welcome-sm.webp);background-size:cover;background-position:center top;-webkit-mask-image:none;mask-image:none}
  .hello-in{text-align:center;margin:0 auto}
  .hello-logo{width:min(300px,86%)}
  .hello-tag{letter-spacing:7px}
  .btn.google{width:100%}
}
@media (max-width:420px){ .logo{display:none} .logo-q{display:block} }

.tico{display:block;object-fit:contain;filter:drop-shadow(0 4px 14px rgba(0,0,0,.45))}
.big .tico{margin:0 auto}
.track .ticon .tico{margin-bottom:2px}

/* Ventana de pago: compacta, con X y desplazable */
.sheet{position:relative;max-height:calc(100dvh - 32px);overflow-y:auto;overscroll-behavior:contain}
.sheet.pay{max-width:400px;padding:22px 22px 18px}
.sheet.pay .pay-ico{font-size:32px;line-height:1}
.sheet.pay h3{font-size:21px;margin:6px 0 2px}
.sheet.pay .price{font-size:34px;margin:4px 0 2px}
.sheet.pay ul{margin:10px 0 12px;font-size:14px}
.sheet.pay li{padding:3px 0 3px 24px}
.sheet.pay .btn{margin-top:8px;padding:11px 18px}
.closex{position:absolute;top:10px;right:10px;width:36px;height:36px;border-radius:50%;border:1px solid var(--line2);background:var(--card2);color:var(--text);font-size:18px;line-height:1;display:grid;place-items:center;z-index:2}
.closex:hover{background:var(--line2)}
#paypal-box{max-width:320px;margin:6px auto 0}
.sheet.pay .closex{position:sticky;top:0;float:right;margin:-8px -8px 0 0}