/* Layout: cuaderno de estudio — papel azulado, tinta índigo, resaltador amarillo solo para marcar lo importante.
   Dos colores de herramienta (Claude cobre, ChatGPT verde) codifican "en qué app pasa esto". */
:root{
  --paper:#F6F7FB; --card:#FFFFFF; --ink:#1A2040; --muted:#5A6283; --line:#DCE0EC; --line2:#C9CEDF;
  --accent:#3144CF; --accent-ink:#FFFFFF; --accent-soft:#E7EAFB; --hi:#FFE470; --hi-ink:#3A3000;
  --claude:#BF5B33; --claude-soft:#F8E9E2; --gpt:#127A65; --gpt-soft:#DFF2EC; --gem:#2563C9; --gem-soft:#E3ECFB;
  --ok:#1C7F47; --ok-soft:#E1F3E8; --bad:#BC3A33; --bad-soft:#F9E4E2; --warn:#9A6514; --warn-soft:#FBF0DA;
  --screen:#FBFBFD; --screen-side:#F0F1F6; --shadow:0 1px 2px rgba(26,32,64,.06),0 8px 24px rgba(26,32,64,.07);
  --f-display:"Bricolage Grotesque","Avenir Next","Segoe UI",system-ui,sans-serif;
  --f-body:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
  --r:14px; --r-sm:9px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#0F1220; --card:#171B2C; --ink:#E7E9F4; --muted:#9BA2BF; --line:#272C42; --line2:#343A55;
  --accent:#8E9CFF; --accent-ink:#0F1220; --accent-soft:#232A4D; --hi:#E5C84A; --hi-ink:#211B00;
  --claude:#E3916A; --claude-soft:#3A2419; --gpt:#45C2A4; --gpt-soft:#132F29; --gem:#7FA8F0; --gem-soft:#16233D;
  --ok:#55C988; --ok-soft:#14301F; --bad:#F07068; --bad-soft:#3A1B1A; --warn:#E3AE55; --warn-soft:#352812;
  --screen:#141829; --screen-side:#1B2034; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  color-scheme:dark}}
:root[data-theme="dark"]{
  --paper:#0F1220; --card:#171B2C; --ink:#E7E9F4; --muted:#9BA2BF; --line:#272C42; --line2:#343A55;
  --accent:#8E9CFF; --accent-ink:#0F1220; --accent-soft:#232A4D; --hi:#E5C84A; --hi-ink:#211B00;
  --claude:#E3916A; --claude-soft:#3A2419; --gpt:#45C2A4; --gpt-soft:#132F29; --gem:#7FA8F0; --gem-soft:#16233D;
  --ok:#55C988; --ok-soft:#14301F; --bad:#F07068; --bad-soft:#3A1B1A; --warn:#E3AE55; --warn-soft:#352812;
  --screen:#141829; --screen-side:#1B2034; --shadow:0 1px 2px rgba(0,0,0,.3),0 8px 24px rgba(0,0,0,.25);
  color-scheme:dark}

*{box-sizing:border-box}
html,body{background:var(--paper);color:var(--ink)}
body{font-family:var(--f-body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--paper)}
h1,h2,h3,h4{font-family:var(--f-display);line-height:1.15;text-wrap:balance;margin:0;letter-spacing:-.01em}
h1{font-size:clamp(2rem,5.2vw,3.4rem);font-weight:700}
h2{font-size:clamp(1.5rem,3.4vw,2.1rem);font-weight:700}
h3{font-size:1.25rem;font-weight:650}
p{margin:0}
a{color:var(--accent)}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:6px}
mark,.mk{background:linear-gradient(transparent 55%,var(--hi) 55%);color:inherit;padding:0 .1em}
code,.mono{font-family:var(--f-mono);font-size:.88em}
.wrap{max-width:1160px;margin:0 auto}
.eyebrow{font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:700}
.muted{color:var(--muted)}
.row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.btn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--line2);background:var(--card);padding:10px 18px;border-radius:999px;font-weight:700;text-decoration:none;color:var(--ink);transition:transform .12s,border-color .12s,background .12s}
.btn:hover{border-color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.pri:hover{filter:brightness(1.08)}
.btn.sm{padding:6px 12px;font-size:.88rem}
.btn.ghost{background:transparent}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;font-weight:700;padding:3px 10px;border-radius:999px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.chip.claude{background:var(--claude-soft);color:var(--claude)}
.chip.gpt{background:var(--gpt-soft);color:var(--gpt)}
.chip.both{background:var(--accent-soft);color:var(--accent)}
.chip.ok{background:var(--ok-soft);color:var(--ok)}
.chip.lock{background:var(--line);color:var(--muted)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.tdot{display:inline-block;width:9px;height:9px;border-radius:50%;background:currentColor}

/* ---------- top bar ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);margin:0 calc(-1*max(16px,env(safe-area-inset-left,0px))) 0 calc(-1*max(16px,env(safe-area-inset-left,0px)));padding:10px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px))}
.top .wrap{display:flex;align-items:center;gap:14px}
.logo{font-family:var(--f-display);font-weight:800;font-size:1.35rem;letter-spacing:-.03em;text-decoration:none;color:var(--ink);display:flex;align-items:center;gap:8px}
.logo i{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--accent);color:var(--accent-ink);font-style:normal;font-size:1rem}
.logo b{color:var(--accent)}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{padding:6px 12px;border-radius:999px;text-decoration:none;color:var(--muted);font-weight:700;font-size:.92rem}
.nav a.on,.nav a:hover{color:var(--ink);background:var(--card)}
.pring{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.85rem;color:var(--muted)}
.pring svg{width:30px;height:30px}
@media (max-width:720px){.nav a.hide-sm{display:none}.pring span{display:none}}

/* ---------- landing ---------- */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:center;padding-block:56px 40px}
.hero h1 .tc{color:var(--claude)} .hero h1 .tg{color:var(--gpt)}
.hero .lead{font-size:1.18rem;color:var(--muted);margin-top:18px;max-width:34em}
.hero .row{margin-top:26px}
.proof{display:flex;gap:22px;flex-wrap:wrap;margin-top:28px;font-size:.92rem;color:var(--muted)}
.proof b{display:block;font-family:var(--f-display);font-size:1.6rem;color:var(--ink);line-height:1}
@media (max-width:900px){.hero{grid-template-columns:1fr;padding-block:32px 24px;gap:28px}}
.sec{padding-block:48px;border-top:1px solid var(--line)}
.sec>.wrap>h2{margin-bottom:8px}
.sec .intro{color:var(--muted);max-width:40em;margin-bottom:28px}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px}
.feat>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.feat h3{margin-bottom:6px}
.feat p{color:var(--muted);font-size:.96rem}
.feat svg{width:40px;height:40px;margin-bottom:10px}
.stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
@media (max-width:560px){.stages{grid-template-columns:1fr}}
.stage h3{font-size:1.05rem;display:flex;gap:8px;align-items:baseline}
.stage h3 small{font-family:var(--f-body);font-size:.78rem;color:var(--muted);font-weight:700}
.stage ol{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:8px}
.stage li{display:flex;gap:10px;align-items:baseline;background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;font-weight:700;font-size:.95rem}
.stage li span{font-family:var(--f-mono);font-size:.78rem;color:var(--accent);min-width:1.6em}
.stage li em{display:block;font-style:normal;font-weight:400;color:var(--muted);font-size:.85rem}
.price{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center}
@media (max-width:800px){.price{grid-template-columns:1fr}}
.pcard{background:var(--card);border:2px solid var(--accent);border-radius:20px;padding:28px;box-shadow:var(--shadow)}
.pcard .amt{font-family:var(--f-display);font-size:2.6rem;font-weight:800;line-height:1;margin:10px 0 4px}
.pcard ul{padding-left:1.1em;margin:16px 0 22px;display:grid;gap:6px}
.faq details{border-bottom:1px solid var(--line);padding:14px 0}
.faq summary{font-weight:700;cursor:pointer}
.faq details p{color:var(--muted);margin-top:8px}
.foot{padding-block:32px;color:var(--muted);font-size:.9rem;border-top:1px solid var(--line)}

/* ---------- modal ---------- */
.modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:16px;background:rgba(10,12,25,.55)}
.mbox{background:var(--card);border-radius:20px;max-width:420px;width:100%;padding:26px;box-shadow:var(--shadow);position:relative}
.mbox h2{font-size:1.5rem;margin-bottom:4px}
.tabs{display:flex;background:var(--paper);border-radius:999px;padding:4px;margin:16px 0}
.tabs button{flex:1;border:0;background:transparent;padding:8px;border-radius:999px;font-weight:700;color:var(--muted)}
.tabs button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.fld{display:grid;gap:4px;margin-bottom:12px}
.fld label{font-weight:700;font-size:.88rem}
.fld input,.fld select,.fld textarea{font:inherit;padding:10px 12px;border-radius:var(--r-sm);border:1.5px solid var(--line2);background:var(--paper);color:var(--ink);width:100%}
.fld textarea{min-height:64px;resize:vertical}
.x{position:absolute;top:12px;right:12px;border:0;background:transparent;font-size:1.4rem;color:var(--muted);width:36px;height:36px;border-radius:50%}
.msg{font-size:.9rem;padding:8px 12px;border-radius:var(--r-sm);margin-top:8px}
.msg.err{background:var(--bad-soft);color:var(--bad)} .msg.ok{background:var(--ok-soft);color:var(--ok)}
.demo-band{background:var(--hi);color:var(--hi-ink);text-align:center;font-weight:700;font-size:.85rem;padding:6px 12px;margin:0 calc(-1*max(16px,env(safe-area-inset-left,0px)));}

/* ---------- dashboard ---------- */
.dash-head{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;padding-block:32px 8px;align-items:end}
@media (max-width:800px){.dash-head{grid-template-columns:1fr}}
.bigbar{height:12px;background:var(--line);border-radius:99px;overflow:hidden;margin-top:10px}
.bigbar i{display:block;height:100%;background:var(--accent);border-radius:99px;transition:width .6s}
.cont{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;gap:14px;align-items:center;text-decoration:none;color:var(--ink);box-shadow:var(--shadow)}
.cont .n{font-family:var(--f-display);font-size:2.2rem;font-weight:800;color:var(--accent);line-height:1}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px;margin-top:12px}
.mcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px;text-decoration:none;color:var(--ink);display:grid;gap:6px;transition:border-color .15s,transform .15s}
.mcard:hover{border-color:var(--accent);transform:translateY(-2px)}
.mcard .num{font-family:var(--f-mono);font-size:.8rem;color:var(--accent);font-weight:700}
.mcard h3{font-size:1.1rem}
.mcard p{color:var(--muted);font-size:.9rem}
.mcard .row{justify-content:space-between;margin-top:4px}
.mcard.locked{opacity:.78}
.stage-t{margin-top:30px;display:flex;align-items:baseline;gap:12px}
.stage-t span{color:var(--muted);font-size:.9rem}

/* ---------- module page ---------- */
.mhead{padding-block:28px 12px;display:grid;grid-template-columns:auto 1fr;gap:6px 22px;align-items:start}
.mhead .big{font-family:var(--f-display);font-weight:800;font-size:clamp(3.2rem,8vw,5.2rem);line-height:.85;color:var(--accent);letter-spacing:-.04em}
.mhead .sub{color:var(--muted);font-size:1.1rem;margin-top:6px}
.objs{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px;padding:0;list-style:none}
.objs li{font-size:.88rem;background:var(--card);border:1px solid var(--line);border-radius:999px;padding:4px 12px}
@media (max-width:600px){.mhead{grid-template-columns:1fr}}
.mm-wrap{background:var(--card);border:1px solid var(--line);border-radius:var(--r);margin:14px 0 22px}
.mm-wrap>summary{padding:14px 18px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:10px}
.mm-wrap>summary .chip{margin-left:auto}
.mm{padding:4px 18px 22px;overflow-x:auto}
.mm-center{margin:0 auto;width:max-content;max-width:100%;font-family:var(--f-display);font-weight:800;font-size:1.15rem;background:var(--accent);color:var(--accent-ink);padding:10px 20px;border-radius:999px;position:relative}
.mm-center::after{content:"";position:absolute;left:50%;top:100%;height:18px;border-left:2px solid var(--line2)}
.mm-branches{display:grid;grid-template-columns:repeat(var(--n),minmax(150px,1fr));gap:12px;margin-top:18px;padding-top:18px;border-top:2px solid var(--line2);position:relative;min-width:calc(var(--n)*150px)}
.mm-b{position:relative;display:grid;gap:8px;align-content:start}
.mm-b::before{content:"";position:absolute;left:50%;top:-18px;height:18px;border-left:2px solid var(--line2)}
.mm-bl{text-align:center;font-weight:800;background:var(--accent-soft);color:var(--accent);border-radius:10px;padding:8px 10px;font-size:.95rem}
.mm-b ul{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.mm-b li{font-size:.86rem;border:1.5px dashed var(--line2);border-radius:8px;padding:5px 8px;text-align:center;background:var(--paper)}
@media (max-width:700px){
  .mm-branches{grid-template-columns:1fr;min-width:0;border-top:0;padding-top:0;border-left:2px solid var(--line2);margin-left:18px;padding-left:16px}
  .mm-b::before{left:-16px;top:18px;width:16px;height:0;border-left:0;border-top:2px solid var(--line2)}
  .mm-center{margin:0}
  .mm-center::after{left:20px}
  .mm-bl{text-align:left}
  .mm-b ul{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .mm-b li{text-align:left}
}

.mlayout{display:grid;grid-template-columns:250px 1fr;gap:28px;align-items:start;padding-bottom:60px}
.rail{position:sticky;top:calc(env(safe-area-inset-top,0px) + 70px);display:grid;gap:4px}
.rail button{display:flex;gap:10px;align-items:center;text-align:left;border:0;background:transparent;padding:9px 12px;border-radius:10px;font-weight:700;font-size:.92rem;color:var(--muted);width:100%}
.rail button .st{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid var(--line2);display:grid;place-items:center;font-size:.7rem;color:var(--card)}
.rail button.done .st{background:var(--ok);border-color:var(--ok)}
.rail button.on{background:var(--card);color:var(--ink);box-shadow:var(--shadow)}
.rail button.on .st{border-color:var(--accent)}
.rail button.done.on .st{border-color:var(--ok)}
@media (max-width:900px){
  .mlayout{grid-template-columns:1fr}
  .rail{position:static;display:flex;overflow-x:auto;gap:6px;padding-bottom:6px;margin-inline:-4px}
  .rail button{width:auto;white-space:nowrap;background:var(--card);border:1px solid var(--line)}
}
.pane{min-width:0}
.lesson{display:grid;gap:18px;max-width:46rem}
.lesson>h2{margin-bottom:2px}
.lesson .pp{font-size:1.04rem}
.lesson h4{font-size:1.15rem;margin-top:8px}
.lesson ul.l{margin:0;padding-left:1.2em;display:grid;gap:6px}
.pager{display:flex;justify-content:space-between;gap:12px;margin-top:32px;padding-top:20px;border-top:1px solid var(--line);flex-wrap:wrap}

/* blocks */
.co{border-radius:var(--r);padding:14px 18px;border:1px solid var(--line);background:var(--card);display:grid;gap:4px}
.co b.t{font-family:var(--f-display);font-size:1rem}
.co.tip{background:var(--ok-soft);border-color:transparent}.co.tip b.t{color:var(--ok)}
.co.warn{background:var(--warn-soft);border-color:transparent}.co.warn b.t{color:var(--warn)}
.co.info{background:var(--accent-soft);border-color:transparent}.co.info b.t{color:var(--accent)}
.co.now{background:var(--card);border:1.5px dashed var(--line2)}.co.now b.t{color:var(--muted);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-family:var(--f-body)}
.analogy{border-left:4px solid var(--hi);padding:6px 0 6px 16px;font-size:1.06rem}
.analogy::before{content:attr(data-label);display:block;font-size:.75rem;letter-spacing:.09em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:s}
.steps li{display:grid;grid-template-columns:34px 1fr;gap:12px;counter-increment:s}
.steps li::before{content:counter(s);width:34px;height:34px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;font-family:var(--f-display)}
.steps b{display:block}
.steps span{color:var(--muted);font-size:.96rem}
.ex{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ex-h{display:flex;gap:10px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ex-h b{font-family:var(--f-display)}
.ex-b{padding:16px;display:grid;gap:12px}
.bub{border-radius:14px;padding:12px 14px;font-size:.95rem;max-width:92%;white-space:pre-wrap}
.bub.u{justify-self:end;background:var(--accent-soft);border-bottom-right-radius:4px;font-family:var(--f-mono);font-size:.86rem}
.bub.u.bad{background:var(--bad-soft)}
.bub.a{background:var(--paper);border:1px solid var(--line);border-bottom-left-radius:4px}
.bub .lab{display:block;font-family:var(--f-body);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ex-note{font-size:.92rem;color:var(--muted);border-top:1px dashed var(--line2);padding-top:10px}
.cmp{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
.cmp table{border-collapse:collapse;width:100%;min-width:520px;font-size:.93rem}
.cmp th,.cmp td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
.cmp th{font-family:var(--f-display);font-size:.95rem;background:var(--paper)}
.cmp th.c{color:var(--claude)} .cmp th.g{color:var(--gpt)}
.cmp tr:last-child td{border-bottom:0}
.cmp td:first-child{font-weight:700}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.flip{perspective:900px;border:0;background:transparent;padding:0;min-height:140px;text-align:left;display:block;width:100%}
.flip .in{display:block;position:relative;width:100%;height:100%;min-height:130px;transition:transform .5s;transform-style:preserve-3d}
.flip[aria-pressed="true"] .in{transform:rotateY(180deg)}
.flip .f,.flip .bk{position:absolute;inset:0;backface-visibility:hidden;border-radius:var(--r);padding:14px;display:flex;flex-direction:column;justify-content:center}
.flip .f{background:var(--card);border:1.5px solid var(--line2);font-family:var(--f-display);font-weight:700;font-size:1.1rem}
.flip .f small{display:block;font-family:var(--f-body);font-weight:400;font-size:.75rem;color:var(--muted);margin-top:6px}
.flip .bk{background:var(--accent);color:var(--accent-ink);transform:rotateY(180deg);font-size:.9rem;overflow:auto}
.chk,.try{border-radius:var(--r);padding:16px 18px}
.chk{background:var(--card);border:1.5px solid var(--line2)}
.chk .eyebrow{margin-bottom:4px}
.opts{display:grid;gap:8px;margin-top:10px}
.opt{display:flex;gap:10px;align-items:flex-start;text-align:left;border:1.5px solid var(--line2);background:var(--card);border-radius:10px;padding:10px 12px;font-size:.96rem;width:100%}
.opt .k{flex:none;width:24px;height:24px;border-radius:50%;background:var(--paper);display:grid;place-items:center;font-weight:800;font-size:.78rem;border:1.5px solid var(--line2)}
.opt:hover:not([disabled]){border-color:var(--accent)}
.opt.right{border-color:var(--ok);background:var(--ok-soft)} .opt.right .k{background:var(--ok);color:var(--card);border-color:var(--ok)}
.opt.wrong{border-color:var(--bad);background:var(--bad-soft)} .opt.wrong .k{background:var(--bad);color:var(--card);border-color:var(--bad)}
.opt[disabled]{cursor:default}
.fb{margin-top:10px;font-size:.94rem;border-radius:10px;padding:10px 12px;background:var(--paper)}
.fb b{display:block}
.fb.ok b{color:var(--ok)} .fb.no b{color:var(--bad)}
.try{background:var(--hi);color:var(--hi-ink)}
.try .eyebrow{color:var(--hi-ink);opacity:.75}
.try pre{white-space:pre-wrap;font-family:var(--f-mono);font-size:.85rem;background:rgba(255,255,255,.55);border-radius:10px;padding:10px 12px;margin:10px 0}
:root[data-theme="dark"] .try pre{background:rgba(0,0,0,.18)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .try pre{background:rgba(0,0,0,.18)}}
.try .row .btn{background:rgba(255,255,255,.7);border-color:transparent;color:var(--hi-ink)}

/* prompt lab */
.lab{background:var(--card);border:1.5px solid var(--accent);border-radius:var(--r);padding:18px;display:grid;gap:14px}
.lab-g{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:760px){.lab-g{grid-template-columns:1fr}}
.lab .presets{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.lab .presets button{border:1px solid var(--line2);background:var(--paper);border-radius:999px;font-size:.78rem;padding:3px 10px}
.lab-out{font-family:var(--f-mono);font-size:.84rem;white-space:pre-wrap;background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:12px;min-height:200px}
.lab-out .p-rol{color:var(--claude)}.lab-out .p-ctx{color:var(--gpt)}.lab-out .p-tar{color:var(--accent)}
.meter{height:10px;border-radius:99px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;transition:width .3s,background .3s}

/* sorter */
.sorter{background:var(--card);border:1.5px solid var(--line2);border-radius:var(--r);padding:18px;display:grid;gap:12px}
.sorter .task{font-family:var(--f-display);font-size:1.25rem;font-weight:700;min-height:3.2em}
.sorter .row .btn.c{border-color:var(--claude);color:var(--claude)}
.sorter .row .btn.g{border-color:var(--gpt);color:var(--gpt)}

/* quiz */
.quiz{display:grid;gap:16px;max-width:46rem}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.qcard h3{font-size:1.08rem;font-family:var(--f-body);font-weight:700;line-height:1.4}
.qcard .qn{font-family:var(--f-mono);font-size:.78rem;color:var(--accent);font-weight:700}
.score{border-radius:var(--r);padding:20px;display:grid;gap:8px;text-align:center}
.score b{font-family:var(--f-display);font-size:2.8rem;line-height:1}
.score.pass{background:var(--ok-soft);color:var(--ok)} .score.fail{background:var(--warn-soft);color:var(--warn)}
.qprog{height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.qprog i{display:block;height:100%;background:var(--accent);transition:width .3s}

/* lock */
.lockbox{background:var(--card);border:2px dashed var(--line2);border-radius:var(--r);padding:28px;text-align:center;display:grid;gap:12px;justify-items:center;max-width:40rem}

/* global map */
.gmap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:24px;align-items:start;padding-block:12px 40px}
.gmap svg{width:100%;height:auto;display:block}
.gmap .node{cursor:pointer}
.gmap .node circle{transition:r .2s}
.gmap .node:hover circle.m,.gmap .node.sel circle.m{stroke-width:4}
.gdetail{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;position:sticky;top:90px;display:grid;gap:10px}
.gdetail ul{margin:0;padding-left:1.1em;display:grid;gap:4px;font-size:.94rem}
.gtree{display:none}
@media (max-width:860px){.gmap{grid-template-columns:1fr}.gsvg{display:none}.gtree{display:grid;gap:10px}.gdetail{position:static}}
.gtree details{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 14px}
.gtree summary{font-weight:700;cursor:pointer}
.gtree .sg{border-left:3px solid var(--accent);padding-left:12px;display:grid;gap:8px}
.gtree .sg>b{font-family:var(--f-display)}

/* certificate */
.cert{background:var(--card);border:2px solid var(--ink);border-radius:6px;padding:clamp(20px,5vw,56px);text-align:center;display:grid;gap:14px;max-width:820px;margin:24px auto;position:relative;outline:8px solid var(--card);box-shadow:0 0 0 9px var(--line2)}
.cert h1{font-size:clamp(1.8rem,5vw,3rem)}
.cert .name{font-family:var(--f-display);font-size:clamp(1.6rem,5vw,2.6rem);font-weight:700;border-bottom:2px solid var(--line2);padding-bottom:6px;width:min(100%,520px);justify-self:center}
@media print{.top,.noprint,.demo-band{display:none!important}.cert{box-shadow:none;margin:0}}

/* ---------- animated player ---------- */
.pl{border-radius:18px;overflow:hidden;border:1px solid var(--line2);background:var(--card);box-shadow:var(--shadow)}
.pl-screen{position:relative;aspect-ratio:16/10;max-width:100%;background:var(--screen);overflow:hidden;font-family:var(--f-body);font-size:13px;line-height:1.45}
@media (max-width:560px){.pl-screen{aspect-ratio:4/5}}
.pl-top{height:38px;display:flex;align-items:center;gap:8px;padding:0 12px;border-bottom:1px solid var(--line);background:var(--card)}
.pl-top .lights{display:flex;gap:5px}.pl-top .lights i{width:9px;height:9px;border-radius:50%;background:var(--line2)}
.pl-top b{font-family:var(--f-display);font-size:13px;display:flex;align-items:center;gap:6px}
.pl[data-tool="claude"] .brandc{color:var(--claude)} .pl[data-tool="chatgpt"] .brandc{color:var(--gpt)} .pl[data-tool="notebook"] .brandc,.pl[data-tool="gemini"] .brandc{color:var(--gem)}
.pl-model{margin-left:auto;font-size:11.5px;border:1px solid var(--line2);border-radius:999px;padding:2px 10px;color:var(--muted)}
.pl-body{position:absolute;inset:38px 0 0 0;display:flex}
.pl-side{width:150px;background:var(--screen-side);border-right:1px solid var(--line);padding:10px 8px;display:flex;flex-direction:column;gap:3px;font-size:12px;transition:transform .3s}
.pl-side .it{padding:6px 8px;border-radius:7px;color:var(--muted);font-weight:700;display:flex;gap:6px;align-items:center}
.pl-side .it.new{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.pl-side .hist{margin-top:8px;display:grid;gap:5px;padding:0 8px}
.pl-side .hist i{display:block;height:7px;border-radius:4px;background:var(--line)}
.pl-side .grow{flex:1}
.pl-main{flex:1;display:flex;flex-direction:column;min-width:0}
.pl-chat{flex:1;overflow:hidden;padding:14px 16px;display:flex;flex-direction:column;gap:10px;justify-content:flex-end}
.pl-msg{max-width:85%;padding:8px 11px;border-radius:12px;animation:pin .3s ease-out;white-space:pre-wrap;word-wrap:break-word}
.pl-msg.u{align-self:flex-end;background:var(--accent-soft);border-bottom-right-radius:3px}
.pl-msg.a{align-self:flex-start;background:var(--card);border:1px solid var(--line);border-bottom-left-radius:3px}
.pl-msg.a .who{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;margin-bottom:3px}
.pl-msg.think{align-self:flex-start;color:var(--muted);font-style:italic;display:flex;gap:8px;align-items:center;background:transparent;border:0;padding:2px 4px}
.spin{width:12px;height:12px;border-radius:50%;border:2px solid var(--line2);border-top-color:var(--accent);animation:sp 1s linear infinite}
.dots i{display:inline-block;width:5px;height:5px;margin:0 1px;border-radius:50%;background:var(--muted);animation:bl 1s infinite}
.dots i:nth-child(2){animation-delay:.15s}.dots i:nth-child(3){animation-delay:.3s}
.pl-file{display:inline-flex;gap:6px;align-items:center;background:var(--card);border:1px solid var(--line2);border-radius:8px;padding:4px 8px;font-size:11.5px;font-weight:700;animation:pin .3s}
.pl-file i{width:16px;height:20px;border-radius:3px;background:var(--bad);display:inline-block}
.pl-src{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.pl-src span{font-size:10.5px;border-radius:999px;padding:2px 8px;background:var(--paper);border:1px solid var(--line);animation:pin .3s}
.pl-comp{margin:0 14px 12px;border:1.5px solid var(--line2);border-radius:14px;background:var(--card);padding:8px 10px;display:grid;gap:6px}
.pl-files{display:flex;gap:6px;flex-wrap:wrap}
.pl-files:empty{display:none}
.pl-in{min-height:20px;color:var(--ink);white-space:pre-wrap}
.pl-in:empty::before{content:attr(data-ph);color:var(--muted)}
.pl-in.typing::after{content:"";display:inline-block;width:1.5px;height:1em;background:var(--ink);vertical-align:-2px;animation:bl .8s infinite}
.pl-tools{display:flex;gap:6px;align-items:center}
.pl-tools .tb{width:26px;height:26px;border-radius:50%;border:1px solid var(--line2);display:grid;place-items:center;color:var(--muted);font-size:14px}
.pl-tools .tb.send{margin-left:auto;background:var(--ink);color:var(--card);border-color:var(--ink)}
.pl[data-tool="claude"] .pl-tools .tb.send{background:var(--claude);border-color:var(--claude)}
.pl[data-tool="chatgpt"] .pl-tools .tb.send{background:var(--gpt);border-color:var(--gpt)}
.pl[data-tool="notebook"] .pl-tools .tb.send,.pl[data-tool="gemini"] .pl-tools .tb.send{background:var(--gem);border-color:var(--gem)}
.pl-tools .tb.lbl{width:auto;padding:0 9px;border-radius:999px;font-size:11px;font-weight:700}
.pl-panel{width:0;overflow:hidden;border-left:1px solid var(--line);background:var(--card);transition:width .45s ease;flex:none}
.pl-panel.open{width:44%}
.pl-panel .ph{padding:9px 12px;border-bottom:1px solid var(--line);font-weight:800;display:flex;gap:6px;align-items:center;font-size:12px;white-space:nowrap}
.pl-panel .ph small{font-weight:700;color:var(--muted);margin-left:auto;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em}
.pl-panel .pb{padding:12px;display:grid;gap:7px;font-size:12px}
.pl-panel .pb>*{animation:pin .35s both}
.pl-panel .ln{height:auto;border-radius:4px}
.pl-panel table{border-collapse:collapse;width:100%;font-size:11px}
.pl-panel td{border:1px solid var(--line);padding:3px 5px}
.pl-panel tr:first-child td{font-weight:800;background:var(--paper)}
.pl-panel .bar{display:grid;grid-template-columns:70px 1fr;gap:6px;align-items:center;font-size:10.5px}
.pl-panel .bar i{display:block;height:12px;border-radius:3px;background:var(--accent)}
.pl-panel .slide{border:1px solid var(--line2);border-radius:6px;padding:8px;aspect-ratio:16/9;font-weight:800;font-family:var(--f-display);display:flex;align-items:flex-end;background:linear-gradient(135deg,var(--accent-soft),var(--paper))}
.pl-panel .img{aspect-ratio:1;border-radius:8px;background:radial-gradient(circle at 30% 30%,var(--hi),transparent 45%),radial-gradient(circle at 70% 65%,var(--accent),transparent 50%),linear-gradient(160deg,var(--gpt-soft),var(--claude-soft))}
.pl-panel pre{margin:0;font-family:var(--f-mono);font-size:10.5px;white-space:pre-wrap}
@media (max-width:560px){
  .pl-side{position:absolute;inset:0 auto 0 0;z-index:3;transform:translateX(-102%);box-shadow:var(--shadow)}
  .pl.side-open .pl-side{transform:none}
  .pl-panel.open{position:absolute;inset:0;width:auto;z-index:4}
  .pl-screen{font-size:12.5px}
}
.pl-cursor{position:absolute;left:0;top:0;width:20px;height:20px;z-index:6;pointer-events:none;transition:transform .7s cubic-bezier(.4,.1,.2,1);transform:translate(70%,80%)}
.pl-cursor svg{width:20px;height:20px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.pl-ring{position:absolute;z-index:5;border:2.5px solid var(--hi);border-radius:10px;pointer-events:none;opacity:0;transition:opacity .25s;box-shadow:0 0 0 4px color-mix(in srgb,var(--hi) 35%,transparent)}
.pl-ring.on{opacity:1;animation:pulse 1.2s infinite}
.pl-tag{position:absolute;z-index:7;background:var(--ink);color:var(--card);font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:7px;pointer-events:none;opacity:0;transition:opacity .25s;white-space:nowrap}
.pl-tag.on{opacity:1}
.pl-cap{min-height:66px;padding:12px 16px;font-size:1rem;line-height:1.45;display:flex;align-items:center;border-top:1px solid var(--line);background:var(--card)}
.pl-cap span{animation:pin .3s}
.pl-ctrl{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);background:var(--paper)}
.pl-ctrl button{border:0;background:var(--card);border:1px solid var(--line2);border-radius:999px;height:34px;min-width:34px;padding:0 12px;font-weight:700;font-size:.85rem;display:inline-flex;align-items:center;gap:6px}
.pl-ctrl button.play{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.pl-ctrl button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent);border-color:var(--accent)}
.pl-bar{flex:1;height:6px;background:var(--line);border-radius:99px;overflow:hidden;min-width:40px}
.pl-bar i{display:block;height:100%;width:0;background:var(--accent);transition:width .4s}
.pl-start{position:absolute;inset:0;z-index:9;display:grid;place-items:center;background:color-mix(in srgb,var(--screen) 70%,transparent);backdrop-filter:blur(2px);border:0;width:100%}
.pl-start span{display:grid;justify-items:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:1.05rem;color:var(--ink);padding:0 20px;text-align:center}
.pl-start i{width:64px;height:64px;border-radius:50%;background:var(--accent);display:grid;place-items:center;box-shadow:var(--shadow)}
.pl-start i::after{content:"";border-left:20px solid var(--accent-ink);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
@media (max-width:560px){.pl-ctrl .hide-sm{display:none}}
@keyframes pin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sp{to{transform:rotate(360deg)}}
@keyframes bl{50%{opacity:.25}}
@keyframes pulse{50%{box-shadow:0 0 0 9px color-mix(in srgb,var(--hi) 10%,transparent)}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--ink);color:var(--card);padding:10px 18px;border-radius:999px;font-weight:700;z-index:70;font-size:.9rem;max-width:calc(100% - 32px)}
.loading{padding:80px 0;text-align:center;color:var(--muted)}

/* ---------- admin ---------- */
.adm-tabs{max-width:560px;margin:16px 0 20px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:16px}
.kpis>div{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;display:grid;gap:2px}
.kpis span{font-size:.82rem;color:var(--muted);font-weight:700}
.kpis b{font-family:var(--f-display);font-size:1.8rem;line-height:1.1;font-variant-numeric:tabular-nums}
.kpis small{color:var(--muted);font-size:.8rem}
.adm-g{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
@media (max-width:820px){.adm-g{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:18px;min-width:0}
.card h3{margin-bottom:10px}
.vbars{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;height:180px;align-items:end}
.vbars>div{display:grid;grid-template-rows:1fr auto auto;height:100%;align-items:end;text-align:center;gap:3px}
.vbars i{display:block;background:var(--accent);border-radius:6px 6px 2px 2px;min-height:2px}
.vbars b{font-size:.72rem;font-variant-numeric:tabular-nums}
.vbars span{font-size:.75rem;color:var(--muted)}
.rows{list-style:none;margin:0;padding:0;display:grid}
.rows li{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.94rem}
.rows li:last-child{border-bottom:0}
.rows li>span:first-child{min-width:0;overflow-wrap:anywhere}
.rows small{display:block;color:var(--muted);font-size:.8rem}
.hbars{display:grid;gap:8px}
.hbars>div{display:grid;grid-template-columns:minmax(120px,240px) 1fr 52px;gap:10px;align-items:center;font-size:.86rem}
.hbars span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb{position:relative;height:12px;background:var(--paper);border-radius:99px;overflow:hidden}
.hb i{position:absolute;left:0;top:0;bottom:0;border-radius:99px}
.hb i.t,.lg.t{background:var(--accent-soft)} .hb i.a,.lg.a{background:var(--accent)}
.lg{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-2px;margin-right:4px}
.hbars b{text-align:right;font-variant-numeric:tabular-nums}
.adm-t td{vertical-align:middle}
.sw{display:inline-flex;gap:5px;align-items:center;font-size:.82rem;font-weight:700;color:var(--muted)}
.imp{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:4px;font-size:.88rem}
.imp .ok{color:var(--ok)} .imp .bad{color:var(--bad)}
#edj{width:100%;min-height:420px;font-family:var(--f-mono);font-size:.8rem;border:1.5px solid var(--line2);border-radius:var(--r-sm);padding:12px;background:var(--paper);color:var(--ink)}
.cbox{display:inline-flex;gap:6px;align-items:center;font-size:.85rem;flex-wrap:wrap}
@media (max-width:720px){.top .nav{gap:2px;min-width:0}.top .nav a{padding:6px 8px;font-size:.88rem}.pring{display:none}.logo{font-size:1.15rem}.logo i{width:26px;height:26px}}

/* ---------- idiomas, legal, auditoría ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lsel{position:relative;display:inline-flex;align-items:center;height:34px;padding:0 10px;border:1.5px solid var(--line2);border-radius:999px;background:var(--card);font-size:.8rem;font-weight:800;color:var(--ink);cursor:pointer}
.lsel select{position:absolute;inset:0;opacity:0;cursor:pointer;font-size:16px}
.lsel:focus-within{outline:3px solid var(--accent);outline-offset:2px}
.top .subnav{display:none;gap:18px;padding-top:8px;font-size:.88rem;font-weight:700}
.subnav a{color:var(--muted);text-decoration:none}
@media (max-width:720px){.top .subnav{display:flex}}
.cta-note{font-size:.88rem;margin-top:10px}
.bens{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px}
.bens li{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px 16px 16px 46px;position:relative;font-weight:700}
.bens li::before{content:"";position:absolute;left:16px;top:18px;width:18px;height:18px;border-radius:50%;background:var(--ok-soft);box-shadow:inset 0 0 0 5px var(--ok-soft),inset 0 0 0 9px var(--ok)}
.pcard .amt small{font-size:1rem;font-weight:700;color:var(--muted)}
.coffee{display:inline-block;background:linear-gradient(transparent 55%,var(--hi) 55%);font-weight:700;margin-top:4px}
.foot-g{display:grid;grid-template-columns:1fr auto;gap:12px 24px;align-items:start}
.foot-g nav{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:flex-end;font-size:.9rem}
.foot-g nav a{color:var(--ink)}
.foot-g .brands{grid-column:1/-1;font-size:.82rem}
@media (max-width:700px){.foot-g{grid-template-columns:1fr}.foot-g nav{justify-content:flex-start}}
.sel{user-select:all}
.legal{max-width:46rem;padding-block:28px 40px;display:grid;gap:22px}
.legal article{display:grid;gap:12px}
.legal article h1{font-size:clamp(1.7rem,4vw,2.3rem)}
.legal article h2{font-size:1.2rem;margin-top:10px}
.legal article ul{margin:0;padding-left:1.2em;display:grid;gap:6px}
.legal .regret{display:grid;gap:10px}
.legal-note{font-size:.8rem;color:var(--muted);margin-top:12px;text-align:center}
.langs i{display:inline-block;font-style:normal;font-weight:800;font-size:.68rem;padding:0 5px;margin-right:3px;border-radius:5px;background:var(--line);color:var(--muted)}
.langs i.on{background:var(--ok-soft);color:var(--ok)}
.guest{margin-bottom:14px}
@media (max-width:420px){.lsel{padding:0 7px;font-size:.7rem;height:30px}.top .nav a{padding:6px 6px}.top .btn.sm{padding:5px 9px}.logo span{font-size:1.05rem}}

.hero h1 .tgm{color:var(--gem)} .chip.gem{background:var(--gem-soft);color:var(--gem)} .cmp th.gm{color:var(--gem)}