/* =====================================================================
ESTRAIK (antes Lexiluna y Quizi Verbal) · diseño "Papel crema" (guía de estilo MindMarket)
Lienzo crema, Inter grande, un solo verde de marca, bordes muy redondeados,
sin sombras ni degradados. Distribución: barra lateral (app) y héroe centrado (portada).
Se carga después de los estilos base. No toca contenido ni lógica.
===================================================================== */
:root{
color-scheme:light;
--cream:#F8F3E8; --white:#FFFFFF; --sand:#E7DDCA; --hair:#CDD5E0;
--ink-b:#162137; --gray:#43536C; --grass:#C6E9B0; --sky:#B5D9FF; --coral:#FFB9AC; --sun-y:#FFF1A8; --violet:#D3C6FF; --focus:#1C65C8;
--bg:var(--cream); --bg-line:transparent; --paper:var(--white); --margin:transparent;
--ink:var(--ink-b); --ink2:var(--gray); --line:var(--ink-b); --field:var(--white);
--on-bg:var(--ink-b); --on-bg2:var(--gray);
--sun:var(--grass); --btn:var(--coral); --btn-ink:var(--ink-b); --btn-deep:transparent; --lime:var(--grass);
--a0:var(--coral); --a1:var(--sky); --a2:var(--sun-y); --a3:var(--grass); --a4:var(--violet); --a5:#C9E5FF; --a6:#FFD2AE; --a7:#B9B4A4;
--good:#17653C; --bad:#B02B27;
--good-soft:#E3F4D6; --bad-soft:#FFE0DA; --warn-soft:#FFF6B3;
--f-display:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif; --f-body:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
--f-serif:"Inter",system-ui,sans-serif; --f-mono:"Inter",system-ui,sans-serif;
--r-card:40px; --r-tile:32px; --r-field:22px; --r-pill:999px;
--bd:2px solid var(--ink-b); --sh:none;
--gut:clamp(16px,4vw,40px); --gap-m:28px; --gap-l:clamp(72px,10vw,128px);
}
/* sin sombras ni degradados en reposo */
*,*::before,*::after{text-shadow:none!important}
html{background:var(--cream)}
body{background:var(--cream)!important;background-image:none!important;color:var(--ink);font-family:var(--f-body);font-weight:400;font-size:17px;line-height:1.5;letter-spacing:0;padding:0}
body::before,body::after{display:none}
::selection{background:var(--grass);color:var(--ink-b)}
h1,h2,h3{font-family:var(--f-display);font-weight:500;letter-spacing:-.03em;line-height:1.1;color:var(--ink)}
.eyebrow{font:500 .86rem var(--f-body);letter-spacing:0;text-transform:none;color:var(--gray)}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:12px}
.tabs[hidden],main[hidden]{display:none!important}
/* ---------- cabecera ---------- */
.top{background:var(--white);border-radius:var(--r-pill);padding:10px 16px 10px 18px;gap:12px 20px;align-items:center}
.logo{gap:12px}
.logo h1{font:500 1.35rem var(--f-display);letter-spacing:-.02em;color:var(--ink);line-height:1}
.logo h1 em{font:inherit;font-style:normal;color:inherit;background:none;padding:0;border:0;transform:none}
.badge{background:none;color:var(--gray);font:400 .8rem var(--f-body);padding:0;border:0;transform:none;border-radius:0}
.mark{width:40px;height:40px;border-radius:12px}
.brandchip{background:var(--cream);color:var(--ink);border:0;border-radius:var(--r-pill);padding:8px 16px;min-height:0;font:500 .92rem var(--f-body)}
.top-login{font:500 .95rem var(--f-body);color:var(--ink);background:var(--white);border:1.5px solid var(--ink);border-radius:var(--r-pill);padding:9px 18px 9px 20px;display:none;align-items:center;gap:10px}
.top-login::after{content:"";width:10px;height:10px;border-radius:50%;background:#5A9FE8;flex:none}
@media (hover:hover) and (pointer:fine){.top-login:hover{background:var(--grass)}}
.lp-nav button{background:transparent;border:0;color:var(--ink);font:500 .95rem var(--f-body);padding:10px 16px;border-radius:var(--r-pill)}
@media (hover:hover) and (pointer:fine){.lp-nav button:hover{background:var(--cream);color:var(--ink)}}
/* ---------- pestañas ---------- */
.tabs{gap:8px;background:var(--white);border:0;padding:10px;border-radius:var(--r-card)}
.tab{font:500 1rem var(--f-body);color:var(--ink);background:transparent;border:0;border-radius:var(--r-pill);padding:12px 20px;text-transform:none;letter-spacing:0;transform:none;transition:background .18s ease,transform .12s ease}
@media (hover:hover) and (pointer:fine){.tab:hover{background:var(--cream)}}
.tab[aria-selected="true"]{background:var(--grass);color:var(--ink);font-weight:600}
.tab:active{transform:scale(.97)}
/* ---------- botones ---------- */
.btn{font:500 1rem var(--f-body);letter-spacing:0;background:var(--coral);color:var(--ink);border:0;border-radius:var(--r-pill);padding:13px 24px;transition:transform .15s ease,background .2s ease}
.btn:hover:not(:disabled){background:#FFA797;transform:none}
.btn:active:not(:disabled){transform:scale(.97)}
.btn.ghost{background:var(--white);color:var(--ink);border:1.5px solid var(--ink)}
.btn.ghost:hover:not(:disabled){background:var(--cream)}
.btn.small{padding:8px 16px;font-size:.9rem}
.btn.big{font-size:1.15rem;padding:17px 32px}
.btn.danger{background:var(--bad);color:#fff}
.btn:disabled{opacity:.45}
/* ---------- paneles y formularios ---------- */
.panel{background:var(--white);color:var(--ink);border:0;border-radius:var(--r-card);padding:clamp(22px,3vw,32px);gap:18px}
.panel h2{font-size:1.6rem}
.muted,.panel .muted{color:var(--gray)}
.on-bg-muted{color:var(--gray)}
label.f,div.f>span:first-child{font-weight:500;color:var(--ink)}
input[type=text],input[type=password],input[type=email],input[type=number],textarea,select{font:400 1rem var(--f-body);color:var(--ink);background:var(--white);border:1.5px solid var(--ink);border-radius:var(--r-field);padding:13px 18px}
input::placeholder,textarea::placeholder{color:#8a8c86}
input[type=text]:focus,input[type=password]:focus,textarea:focus,select:focus{border-color:var(--focus);outline:3px solid rgba(28,101,200,.25);outline-offset:0}
.panel input[type=text],.panel input[type=password],.panel select,.panel textarea,.lp-card input[type=text]{background:var(--cream)}
.mono{font-family:var(--f-body);font-variant-numeric:tabular-nums}
.chk input,.orow input[type=radio],input[type=checkbox]{accent-color:var(--ink)}
.bar,.tbar,.xpbar{background:var(--cream);border:0;height:12px;border-radius:99px}
.bar>i,.tbar>i,.xpbar>i{background:var(--grass)!important;border-radius:99px}
.bar.good>i{background:var(--grass)!important}
.tbar>i.low{background:var(--coral)!important}
.pill{background:var(--cream);color:var(--ink);border:0;font-weight:500}
.pill.open{background:var(--good-soft);color:#17653C}.pill.closed{background:var(--warn-soft);color:#5B4A00}
.note{background:var(--warn-soft);color:var(--ink);border:0;border-radius:24px;padding:14px 20px}
.note.ok{background:var(--good-soft)}.note.err{background:var(--bad-soft)}
.toast{background:var(--ink);color:#fff;border:0;border-radius:var(--r-pill);font:500 .98rem var(--f-body);padding:14px 26px}
.foot{color:var(--gray)}.foot a{color:var(--ink)}
.ovl{background:var(--cream);border:0;border-radius:0}
a{color:inherit}
/* ---------- inicio del estudiante ---------- */
.lv-mini{background:var(--white);border:0;border-radius:var(--r-card);color:var(--ink);padding:18px 26px;gap:18px}
.lv-mini .eyebrow{color:var(--ink);font-weight:500}
.lv-mini .bar,.lvl-b .bar{background:var(--cream);height:12px}
.chip,.chip.streak{font:500 .88rem var(--f-body);background:var(--cream);color:var(--ink);border:0;border-radius:99px;padding:6px 14px}
.chip.streak{background:#FFD7CF}
.chip.pts{background:var(--good-soft);color:#17653C}
.chip.tm{background:var(--white);color:var(--ink);border:1.5px solid var(--ink)}
.chip.tm.low{background:var(--coral);color:var(--ink);border-color:var(--coral)}
.unl{background:var(--white);border:0;border-radius:var(--r-field);color:var(--ink)}
.h-sec h2{color:var(--ink);font-size:clamp(1.9rem,3.6vw,2.6rem);letter-spacing:-.04em;text-shadow:none}
.tgrid{gap:20px}
.tt-tile{background:var(--white)!important;color:var(--ink)!important;border:0;border-left:0;border-radius:var(--r-tile);padding:22px;gap:6px;min-height:170px;transition:transform .2s ease,background .2s ease}
@media (hover:hover) and (pointer:fine){.tt-tile:hover{background:var(--white)!important;transform:translateY(-4px)}}
.tt-tile:active{transform:scale(.98)}
.tt-tile .glyph{width:52px;height:52px;display:grid;place-items:center;border-radius:18px;background:var(--c,var(--a1));color:var(--ink);font-size:1.6rem;margin-bottom:8px;filter:none}
.tt-tile .glyph svg{width:26px;height:26px}
.tt-tile .tn{color:var(--ink);font:500 1.3rem var(--f-display);letter-spacing:-.02em}
.tt-tile .td{color:var(--gray);font-weight:400;opacity:1}
.tt-tile .tm{background:var(--cream);color:var(--ink);font:500 .82rem var(--f-body);padding:4px 12px;border-radius:99px;margin-top:auto;align-self:flex-start}
.tt-tile.is-locked{background:var(--sand)!important;filter:none;opacity:1}
.tt-tile.is-locked .glyph{background:rgba(255,255,255,.55);color:var(--gray)}
.tt-tile.is-locked .tn,.tt-tile.is-locked .td{color:#43536C}
.tt-tile.is-locked .tm{background:rgba(255,255,255,.6);color:#43536C}
.tt-tile.cx{--c:var(--grass)}
/* ---------- lotes ---------- */
.lots{gap:18px}
.lot{background:var(--white);color:var(--ink);border:0;border-left:0;border-radius:28px;padding:18px;transition:transform .2s ease}
@media (hover:hover) and (pointer:fine){.lot:hover{transform:translateY(-3px)}}
.lot .ln{font:500 1.15rem var(--f-display)}
.lot .ls{color:var(--gray)}
.lot .lstars{color:#E0A100;text-shadow:none}
.lot .lb{font:500 .8rem var(--f-body);color:var(--gray)}
.lot.done{background:var(--good-soft)}
.lot.locked{background:var(--sand);border:0;color:#43536C}
.lot.locked .ls,.lot.locked .lstars{color:#43536C}
/* lotes: botón de regreso, cabecera del tema y tarjetas (bloque 1, 25/10) */
.btn.back{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:var(--white);color:var(--ink);border:1.5px solid var(--ink);padding:9px 18px 9px 14px}
.btn.back .ic{width:18px;height:18px;transition:transform .2s ease}
@media (hover:hover) and (pointer:fine){.btn.back:hover:not(:disabled){background:var(--ink);color:var(--white)}.btn.back:hover .ic{transform:translateX(-3px)}}
.hub-head{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px 22px;background:var(--white);border-radius:var(--r-card);padding:22px 26px}
.hub-head h2{font-size:clamp(1.7rem,3.2vw,2.3rem);letter-spacing:-.04em;margin:0}
.hub-head p{margin:4px 0 0}
.hub-ico{width:60px;height:60px;border-radius:20px;display:grid;place-items:center;background:var(--c,var(--tint-blue));color:var(--ink)}
.hub-ico .ic{width:28px;height:28px}
.hub-ico.c0{--c:#FFD1D5}.hub-ico.c1{--c:#C2E2FF}.hub-ico.c2{--c:#F9E8A7}.hub-ico.c3{--c:#B3EECD}.hub-ico.c4{--c:#DDD4FF}.hub-ico.c5{--c:#B3EEF4}.hub-ico.c6{--c:#FED7BA}.hub-ico.c7{--c:#E7DBC3}
.hub-meta{display:grid;gap:8px;min-width:210px;font-size:.92rem;color:var(--gray)}
.hub-meta b{color:var(--ink);font-weight:600}
.hub-bar{display:block;height:10px;border-radius:99px;background:var(--cream);overflow:hidden}
.hub-bar i{display:block;height:100%;border-radius:inherit;background:var(--grass)}
@media (max-width:700px){.hub-head{grid-template-columns:auto minmax(0,1fr);padding:18px}.hub-meta{grid-column:1/-1;min-width:0}.hub-ico{width:48px;height:48px;border-radius:16px}}
.lots{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.lot{min-height:118px;gap:4px}
.lot:not(.locked):not(.done){box-shadow:inset 0 0 0 1.5px var(--hair)}
.lot.locked,.lot.locked:hover{background:transparent!important;box-shadow:inset 0 0 0 1.5px #CFC8B6;transform:none;cursor:default}
.lot.locked .lstars{font-size:.88rem}
/* ---------- juego ---------- */
.qcard{background:var(--white);border:0;border-radius:var(--r-card);color:var(--ink);padding:clamp(26px,4vw,48px);font:500 clamp(1.5rem,3.4vw,2.3rem)/1.2 var(--f-display);letter-spacing:-.025em}
.qcard::before{display:none}
.tiles{gap:16px}
.tile{background:var(--white)!important;color:var(--ink)!important;border:2px solid transparent;border-radius:var(--r-tile);font:500 1.08rem/1.3 var(--f-body);padding:16px 22px;min-height:76px;gap:16px;transition:transform .15s ease,border-color .15s ease,background .15s ease}
.tile .shape{background:var(--cream);color:var(--ink);border:0;border-radius:50%;width:40px;height:40px;font-family:var(--f-display)}
.tile.t0 .shape{background:#FFD7CF}.tile.t1 .shape{background:#C9E5FF}.tile.t2 .shape{background:#FBF39A}.tile.t3 .shape{background:#D5EEC3}
@media (hover:hover) and (pointer:fine){.tile:hover:not(:disabled){transform:translateY(-3px);border-color:var(--ink)}}
.tile:active:not(:disabled){transform:scale(.98)}
.tile.sel{outline:0;border-color:var(--ink)}
.tile.dim{opacity:.45}
.tile.right{outline:0;background:var(--good-soft)!important;border-color:var(--good)}
.tile.wrong{background:var(--bad-soft)!important;border-color:var(--bad)}
.tile.right::after,.tile.wrong::after{border:0;color:#fff;font-weight:700}
.tile.right::after{background:var(--good)}.tile.wrong::after{background:var(--bad)}
.fb{background:var(--white);color:var(--ink);border:0;border-left:0;border-radius:var(--r-card);padding:24px 28px}
.fb.ok{background:var(--good-soft)}.fb.no{background:var(--bad-soft)}
.fb h3{font-size:1.4rem}
.gain{background:var(--warn-soft);color:var(--ink);border:0;font-weight:600}
.passage{background:var(--white);color:var(--ink);border:0;border-left:0;border-radius:var(--r-card);padding:24px 28px}
.sumgrid{gap:16px}
.stat{background:var(--white);border:0;border-radius:28px;padding:18px 22px}
.stat b{font:500 2rem var(--f-display);letter-spacing:-.04em;color:var(--ink)}
.stat span{color:var(--gray);font-weight:400;text-transform:none;letter-spacing:0}
.bigpts{font-family:var(--f-display);font-weight:500;color:var(--ink);background:none;-webkit-text-fill-color:currentColor;filter:none}
.stars3 span{color:var(--sand)}.stars3 span.on{color:#E0A100;text-shadow:none}
.mi{background:var(--white);color:var(--ink);border:2px solid transparent;border-radius:22px}
.mi.sel{border-color:var(--sky);background:#E4F2FE}.mi.done{border-color:var(--good);background:var(--good-soft)}.mi.bad{border-color:var(--bad);background:var(--bad-soft)}
.blank{background:var(--cream);color:var(--ink);border-bottom-color:var(--ink)}
.blank.fill{background:#E4F2FE}.blank.ok{background:var(--good-soft)}.blank.no{background:var(--bad-soft)}
.cchip{background:var(--white);color:var(--ink);border:1.5px solid var(--ink);font:500 .98rem var(--f-body)}
@media (hover:hover) and (pointer:fine){.cchip:hover:not(:disabled){background:var(--grass)}}
.tok,.ordi{background:var(--white);color:var(--ink);border:1.5px solid var(--hair);border-radius:20px}
.tok.ok,.ordi.ok{background:var(--good-soft);border-color:var(--good)}.tok.no,.ordi.no{background:var(--bad-soft);border-color:var(--bad)}
.review{border:1.5px solid var(--hair);background:var(--white);border-radius:24px}
.codebox{font-family:var(--f-display);font-weight:500;letter-spacing:.1em;color:var(--ink);text-shadow:none}
.av,.team{background:var(--white);color:var(--ink);border:2px solid transparent;border-radius:24px}
.av[aria-pressed="true"],.team[aria-pressed="true"]{border-color:var(--ink);background:var(--grass)}
.rankrow{background:var(--white);border:0;border-radius:20px}
.rankrow.me{background:var(--good-soft);outline:0}
.pod .blk{border-radius:28px 28px 0 0;color:var(--ink);font-family:var(--f-display)}
.pod.p1 .blk{background:var(--sun-y)}.pod.p2 .blk{background:var(--sand)}.pod.p3 .blk{background:#FFD6CC}
.qr{background:#fff;border:0;border-radius:20px}
.qed{background:var(--cream);border:0;border-radius:24px}
.codeblk{background:var(--cream);color:var(--ink);border:0;border-radius:20px}
.rank th{font-weight:500;color:var(--gray);text-transform:none;letter-spacing:0;border-bottom:1.5px solid var(--hair)}
.rank td{border-bottom:1px solid var(--hair)}
.srow{border-top:1px solid var(--hair)}
/* ---------- Mi progreso ---------- */
.pg-hero{background:var(--grass);color:var(--ink);border:0;border-left:0;border-radius:var(--r-card);padding:clamp(26px,4vw,48px)}
.pg-hero *{color:var(--ink)}
.pg-main h2{font:500 clamp(2rem,4.6vw,3.6rem)/1 var(--f-display);letter-spacing:-.05em}
.pg-hero .xpbar{background:rgba(255,255,255,.55)}.pg-hero .xpbar>i{background:var(--ink)!important}
.pg-hero .chip{background:var(--white)}
.mis{background:var(--cream);border:0;border-radius:24px}.mis.done{background:var(--good-soft)}
.wd b{background:var(--cream);border:1.5px solid var(--ink);color:var(--ink)}
.wd.on b{background:var(--grass)}.wd.now b{outline:3px solid var(--focus)}
.pth{background:var(--cream);border:0;border-left:0;border-radius:24px;padding:16px 20px}
.ld{background:var(--white);border:1.5px solid var(--hair);color:var(--gray)}
.ld.s1{background:#E7B28A;border-color:#E7B28A;color:var(--ink)}.ld.s2{background:#D9DEE6;border-color:#D9DEE6;color:var(--ink)}.ld.s3{background:var(--sun-y);border-color:var(--sun-y);color:var(--ink)}
.ld.open{border-style:dashed;border-color:var(--ink);color:var(--ink)}
.tier{background:var(--cream);color:var(--ink);font-weight:500}
.ptab{background:var(--cream);color:var(--ink);border:0;font:500 .9rem var(--f-body)}
.ptab[aria-pressed="true"]{background:var(--ink);color:#fff}
.bdg2{background:var(--cream);border:0;border-top:0;border-radius:28px}
.bdg2.off{opacity:.55}
.rar{background:var(--white);color:var(--ink)}
.uTopic{background:var(--cream);border:0;border-radius:24px}
/* docente: barra de desbloqueo y lista de temas (bloque 1, 25/10) */
.u-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;background:var(--cream);border-radius:24px;padding:18px 20px}
.u-sum{flex:1 1 260px;display:grid;gap:10px}
.u-sum p{margin:0;font-size:.98rem}.u-sum b{font-size:1.35rem;font-weight:600}
.u-meter{display:block;height:10px;border-radius:99px;background:var(--white);overflow:hidden}
.u-meter i{display:block;height:100%;background:var(--grass);border-radius:inherit;transition:width .35s ease}
.u-acts{display:flex;flex-wrap:wrap;gap:8px}
.btn.u-danger.is-confirm{background:var(--bad);border-color:var(--bad);color:#fff}
.u-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0}
.u-legend .uchip{min-width:26px;height:26px;font-size:.78rem;pointer-events:none;display:inline-grid;place-items:center}
.u-legend .uchip+.uchip{margin-left:8px}
.u-list{display:grid;border:1.5px solid var(--hair);border-radius:24px;overflow:hidden}
.u-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px 18px;padding:14px 18px}
.u-row .uchips{grid-column:1/-1;grid-row:2;padding-left:48px}
.u-row+.u-row{border-top:1px solid var(--hair)}
.u-row:nth-child(even){background:#FBF9F3}
.u-name{display:flex;align-items:center;gap:12px;min-width:0}
.u-name strong{display:block;font-weight:600;font-size:.97rem}
.u-cnt{display:block;font-size:.8rem;color:var(--gray)}
.u-ic{flex:none;width:36px;height:36px;border-radius:12px;display:grid;place-items:center;background:var(--tint-blue)}
.u-ic .ic{width:18px;height:18px}
.uchips{gap:5px}
.uchip{min-width:34px;height:34px;border-radius:11px;padding:0 4px}
.u-seg{display:inline-flex;border:1.5px solid var(--ink);border-radius:99px;overflow:hidden;justify-self:end}
.u-sb{font:500 .8rem var(--f-body);background:var(--white);color:var(--ink);border:0;padding:7px 12px;cursor:pointer;white-space:nowrap}
.u-sb+.u-sb{border-left:1.5px solid var(--ink)}
.u-sb:hover:not(:disabled){background:var(--cream)}
.u-sb:disabled{color:#6f716b;background:#F4F2EC;cursor:default}
.u-sb:focus-visible{outline:3px solid #1C65C8;outline-offset:-3px}
@media (max-width:520px){.u-row .uchips{padding-left:0}}
@media (max-width:420px){.u-row{grid-template-columns:minmax(0,1fr)}.u-seg{justify-self:start}.u-acts .btn{flex:1 1 auto}}
.uchip{background:var(--white);border:1.5px solid var(--hair);color:var(--ink);font:500 .9rem var(--f-body)}
.uchip.on{background:var(--grass);border-color:var(--grass);color:var(--ink)}
.bdg{background:var(--warn-soft);color:var(--ink)}
/* ---------- pie ---------- */
.site-foot{background:var(--sun-y);color:var(--ink);margin-top:var(--gap-m)}
.site-foot *{color:var(--ink)}
.sf-links a{color:var(--ink);text-decoration:underline;text-underline-offset:4px;border:0}
.proj{background:var(--cream)}
#printv{--ink:#111;--paper:#fff;color:#111}
#printv .panel,#printv .qcard,#printv .tile,#printv .stat{background:#fff!important;color:#111!important}
/* =====================================================================
DISTRIBUCIÓN
===================================================================== */
/* --- app (sesión iniciada): barra lateral --- */
body:not(.is-gate) .shell{max-width:1360px;margin-inline:auto;padding:var(--gut) var(--gut) 72px;gap:var(--gap-m)}
body:not(.is-gate) main.stack{display:flex;flex-direction:column;gap:var(--gap-m)}
@media (min-width:960px){
body:not(.is-gate) .shell{display:grid;grid-template-columns:260px minmax(0,1fr);grid-template-rows:auto auto 1fr;column-gap:56px;row-gap:16px;align-content:start;align-items:start;min-height:calc(100vh - 230px)}
body:not(.is-gate) .top{grid-column:1;grid-row:1;position:sticky;top:var(--gut);border-radius:var(--r-card);padding:22px;flex-direction:column;align-items:flex-start;gap:10px}
body:not(.is-gate) .top .logo{flex-direction:column;align-items:flex-start;gap:12px}
body:not(.is-gate) .tabs{grid-column:1;grid-row:2;position:sticky;top:calc(var(--gut) + 170px);flex-direction:column;align-items:stretch;width:100%}
body:not(.is-gate) .tab{text-align:left;padding:14px 20px;font-size:1.05rem}
body:not(.is-gate) main.stack{grid-column:2;grid-row:1 / span 3;min-width:0;max-width:1000px;width:100%}
}
@media (max-width:959px){
body:not(.is-gate) .shell{padding-bottom:116px}
body:not(.is-gate) .tabs{position:fixed;left:var(--gut);right:var(--gut);bottom:calc(12px + env(safe-area-inset-bottom,0px));z-index:60;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin:0;padding:8px;border:1.5px solid var(--hair);border-radius:var(--r-pill)}
body:not(.is-gate) .tab{padding:11px 6px;font-size:.82rem;text-align:center;white-space:nowrap}
}
#view-practice .lv-mini{padding:20px 28px}
#view-practice .tgrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:20px}
#view-practice .tgrid>.tt-tile.cx{grid-column:1/-1}
#view-practice>:is(.hud,.tbar,.qcard,.tiles,.fb,.passage,.gapt,.match,.ord,.chips){max-width:860px;width:100%}
#view-practice .tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
@media (max-width:640px){#view-practice .tiles{grid-template-columns:1fr}}
#view-progress:not([hidden]){display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap-m);align-items:start}
#view-progress>*{grid-column:1/-1}
@media (min-width:1100px){
#view-progress>.panel:nth-child(3){grid-column:span 6;order:3}
#view-progress>.panel:nth-child(5){grid-column:span 6;order:4}
#view-progress>.panel:nth-child(4){order:5}
#view-progress>.panel:nth-child(6){order:6}
#view-progress>.panel:nth-child(7){grid-column:span 4;order:7}
#view-progress>.panel:nth-child(8){grid-column:span 8;order:8}
#view-progress>.panel:nth-child(9){order:9}
#view-progress>.panel:has(>.pth){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
#view-progress>.panel:has(>.pth)>:not(.pth){grid-column:1/-1}
#view-teacher:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap-m);align-items:start}
#view-teacher>#t-unlock,#view-teacher>#t-sessions,#view-teacher>#t-live,#view-teacher>#t-course,#view-teacher>#t-roster{grid-column:1/-1}
}
#view-progress .pg-stats{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
@media (max-width:640px){#view-progress .pg-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* --- portada: píldora flotante, titular enorme centrado --- */
body.is-gate .shell{max-width:1280px;margin-inline:auto;padding:0 var(--gut);gap:0}
body.is-gate .top{position:relative;margin:20px 0 0;padding:10px 12px 10px 18px;background:var(--white);box-shadow:none;clip-path:none;border-radius:var(--r-pill);flex-wrap:nowrap}
body.is-gate .logo .badge{display:none}
body.is-gate .logo h1{font-size:1.3rem;color:var(--ink)}
body.is-gate .top-login{display:inline-flex}
body.is-gate .lp-nav{margin-left:auto}
body.is-gate .lp-nav+.top-login{margin-left:0}
body.is-gate .mark{width:40px;height:40px;border-radius:12px;box-shadow:none}
#welcome{display:flex;flex-direction:column;gap:var(--gap-l);padding:clamp(40px,7vw,96px) 0 var(--gap-l);max-width:none;margin:0;background:none;border:0;border-radius:0}
.qz-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);column-gap:clamp(32px,5vw,72px);row-gap:clamp(20px,2.4vw,32px);align-items:start}
.qz-intro{display:contents}
.qz-title{grid-column:1/-1;text-align:center;font:500 clamp(2.5rem,6.8vw,6rem)/.96 var(--f-display);letter-spacing:-.06em;color:var(--ink);max-width:none;margin:0 auto clamp(12px,2vw,28px)}
.qz-sub{grid-column:1;grid-row:2;color:var(--ink);font-size:clamp(1.15rem,1.7vw,1.4rem);line-height:1.5;max-width:30em;margin:0}
.qz-checks{grid-column:1;grid-row:3;margin:0;gap:14px;align-self:start}
.qz-checks li{color:var(--ink);font-size:1.1rem}
.qz-checks li svg{color:var(--ink);background:var(--grass);border-radius:50%;padding:4px;width:28px;height:28px}
.panel.lp-card{grid-column:2;grid-row:2 / span 3;position:relative;top:auto;padding:clamp(22px,3vw,34px);border-radius:var(--r-card)}
.wl-n,.qz-n{background:var(--grass);color:var(--ink)}
.wl-course{background:var(--cream);border:2px solid transparent;border-radius:24px;color:var(--ink)}
.wl-course b{color:var(--ink);font-family:var(--f-display)}
.wl-course span{color:var(--gray);font-weight:400}
@media (hover:hover) and (pointer:fine){.wl-course:hover{border-color:var(--ink)}}
.wl-course[aria-pressed="true"]{background:var(--grass);border-color:var(--ink)}
.wl-course[aria-pressed="true"] b,.wl-course[aria-pressed="true"] span{color:var(--ink)}
.wl-count{background:var(--cream);border:0;color:var(--ink);font-weight:500}
.ck{background:var(--cream);border:0;border-radius:24px}
.ck-box{background:var(--white);border:2px solid var(--ink);border-radius:8px}
.ck-tx a{color:#1C65C8;font-weight:500;text-decoration:underline}
@media (max-width:899px){
.qz-top{grid-template-columns:minmax(0,1fr)}
.qz-sub,.qz-checks,.panel.lp-card{grid-column:1;grid-row:auto}
.qz-title{text-align:left;margin-inline:0}
}
@media (max-width:640px){
body.is-gate .top{flex-wrap:wrap;border-radius:32px}
body.is-gate .top-login{margin-left:auto;padding:8px 14px;font-size:.85rem;white-space:nowrap}
}
/* secciones */
.qz-sec h2{font:500 clamp(2.1rem,5vw,4.2rem)/1 var(--f-display);letter-spacing:-.05em;color:var(--ink);text-align:left;margin:0 0 clamp(24px,3vw,44px)}
.qz-tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
.qz-tiles>.qz-tile{grid-column:span 6;min-height:300px;border:0;border-radius:var(--r-card);color:var(--ink)}
@media (min-width:1000px){
.qz-tiles>.qz-tile:nth-child(1){grid-column:span 7}.qz-tiles>.qz-tile:nth-child(2){grid-column:span 5}
.qz-tiles>.qz-tile:nth-child(3){grid-column:span 5}.qz-tiles>.qz-tile:nth-child(4){grid-column:span 7}
}
@media (max-width:640px){.qz-tiles>.qz-tile{grid-column:1/-1;min-height:0}}
.qz-tile.t-blue{background:var(--sky)}.qz-tile.t-indigo{background:var(--violet)}.qz-tile.t-yellow{background:var(--sun-y)}.qz-tile.t-pink{background:#FFD6CC}
.qz-tile h3{color:var(--ink);font:500 clamp(1.5rem,2.4vw,2rem) var(--f-display);letter-spacing:-.03em}
.qz-tile p{color:var(--ink)}
.qz-mock{background:var(--white);color:var(--ink);border-radius:28px 28px 0 0}
#welcome>.qz-sec[aria-labelledby="lp-h-topics"]{background:var(--sand);box-shadow:0 0 0 100vmax var(--sand)!important;clip-path:inset(0 -100vmax);padding:clamp(40px,6vw,80px) 0;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:var(--gap-m) clamp(32px,5vw,72px);align-items:start}
#welcome>.qz-sec[aria-labelledby="lp-h-topics"] h2{margin:0}
@media (max-width:900px){#welcome>.qz-sec[aria-labelledby="lp-h-topics"]{grid-template-columns:minmax(0,1fr)}}
.qz-chips{gap:12px;justify-content:flex-start}
.qz-chip{background:var(--white);color:var(--ink);border:0;padding:14px 22px;font:500 1.05rem var(--f-body);border-radius:99px}
.qz-chip svg{color:var(--ink)}
.qz-steps{gap:clamp(24px,4vw,64px)}
.qz-steps li{background:transparent;border:0;padding:0;color:var(--ink);gap:10px}
.qz-steps .qz-n{align-self:flex-start;width:auto;height:auto;background:transparent;color:var(--ink);font:500 clamp(4.5rem,10vw,8rem)/.9 var(--f-display);letter-spacing:-.06em;margin-bottom:6px}
.qz-steps strong{color:var(--ink);font:500 clamp(1.5rem,2.6vw,2.1rem) var(--f-display);letter-spacing:-.03em}
.qz-steps p{color:var(--ink);font-size:1.1rem;line-height:1.55}
@media (max-width:640px){.qz-steps{grid-template-columns:minmax(0,1fr)}}
@media (min-width:1000px){
#welcome{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:20px;row-gap:var(--gap-l)}
#welcome>.qz-sec,#welcome>.qz-top{grid-column:1/-1}
#welcome>.qz-trust{grid-column:1/span 7}
#welcome>.qz-contact{grid-column:8/span 5}
}
.qz-trust{background:var(--white);color:var(--ink);border:0;border-radius:var(--r-card);padding:clamp(26px,3.6vw,48px)}
.qz-trust h2,.qz-contact h2{font-size:clamp(1.9rem,3.6vw,2.8rem);color:var(--ink)}
.qz-trust-list strong{font:500 1.25rem var(--f-display)}
.qz-trust p,.qz-trust-list p{color:var(--ink)}
.qz-trust .small a{color:#1C65C8}
.qz-contact{background:var(--grass);color:var(--ink);border:0;border-radius:var(--r-card);padding:clamp(26px,3.6vw,48px);display:flex;flex-direction:column;justify-content:center}
.qz-contact p{color:var(--ink);font-size:1.15rem}
.qz-contact a,.qz-contact mark{color:var(--ink)}
mark.pend{background:var(--warn-soft);color:#5B4A00}
.site-foot{margin-top:0}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body.is-gate .logo h1 em{color:var(--ink)}
body.is-gate{background:var(--cream);color:var(--ink)}
.site-foot .sf-brand strong,.site-foot .sf-brand p,.site-foot .sf-copy{color:var(--ink)}
/* =====================================================================
ILUSTRACIONES Y ANIMACIONES (SVG propios + un grabado de dominio público)
===================================================================== */
.qz-art{grid-column:1;grid-row:4;align-self:end;max-width:560px;width:100%;margin-top:clamp(8px,2vw,24px)}
.qz-art svg,.side-art svg{display:block;width:100%;height:auto;overflow:visible}
@media (max-width:899px){.qz-art{grid-column:1;grid-row:auto;max-width:460px;margin-inline:auto}}
.side-art{display:none}
@media (min-width:960px){body:not(.is-gate) .side-art{display:block;grid-column:1;grid-row:3;align-self:start;position:sticky;top:calc(var(--gut) + 170px + 230px);margin-top:12px;max-width:220px}}
@media (min-width:960px) and (max-height:760px){body:not(.is-gate) .side-art{display:none}}
body.is-gate .side-art{display:none}
body.is-gate{overflow-x:clip}
/* franja de palabras que se desplaza */
.qz-marquee{grid-column:1/-1;width:100vw;margin-inline:calc(50% - 50vw);overflow:hidden;background:var(--ink-b);color:var(--cream);padding:clamp(18px,2.4vw,30px) 0}
.qz-marquee-in{display:flex;width:max-content;animation:qz-slide 48s linear infinite}
.qz-marquee-in span{font:500 clamp(1.7rem,3.8vw,3.2rem)/1 var(--f-display);letter-spacing:-.04em;white-space:nowrap;padding-inline:clamp(14px,2vw,26px);display:inline-flex;align-items:center;gap:clamp(28px,4vw,52px)}
.qz-marquee-in span::after{content:"";width:.36em;height:.36em;border-radius:50%;background:var(--grass);flex:none}
.qz-marquee-in span:nth-child(4n+2)::after{background:var(--coral)}
.qz-marquee-in span:nth-child(4n+3)::after{background:var(--sun-y)}
.qz-marquee-in span:nth-child(4n)::after{background:var(--sky)}
@keyframes qz-slide{to{transform:translateX(-50%)}}
/* grabado de las vocales dentro de la banda de temas */
#welcome>.qz-sec[aria-labelledby="lp-h-topics"] .qz-chips{grid-column:2;grid-row:1 / span 2}
.qz-fig{grid-column:1;margin:0;display:flex;flex-direction:column;gap:12px;align-self:start}
.qz-fig img{display:block;width:100%;height:auto;border-radius:32px;transform:rotate(-2deg);transition:transform .4s cubic-bezier(.3,1.4,.5,1)}
@media (hover:hover) and (pointer:fine){.qz-fig:hover img{transform:rotate(1deg) scale(1.02)}}
.qz-fig figcaption{font-size:.88rem;color:#43536C;line-height:1.4;max-width:30em}
@media (max-width:900px){#welcome>.qz-sec[aria-labelledby="lp-h-topics"] .qz-chips,.qz-fig{grid-column:1;grid-row:auto}}
/* movimiento de los personajes */
.a-bob1,.a-bob2,.a-pop1,.a-pop2,.a-pop3,.a-tw{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
.a-bob1{animation:a-bob 4.6s ease-in-out infinite}
.a-bob2{animation:a-bob 3.9s ease-in-out -1.4s infinite}
.a-pop1{animation:a-pop 3.4s ease-in-out infinite}
.a-pop2{animation:a-pop 3.4s ease-in-out -1.1s infinite}
.a-pop3{animation:a-wob 3s ease-in-out infinite}
.a-tw{animation:a-tw 2.6s ease-in-out infinite}
.a-tw.t2{animation-delay:-.9s}.a-tw.t3{animation-delay:-1.7s}
/* entrada escalonada del héroe */
.qz-title{animation:a-rise .7s cubic-bezier(.22,.8,.3,1) both}
.qz-sub{animation:a-rise .7s .08s cubic-bezier(.22,.8,.3,1) both}
.qz-checks{animation:a-rise .7s .16s cubic-bezier(.22,.8,.3,1) both}
.qz-art{animation:a-rise .8s .24s cubic-bezier(.22,.8,.3,1) both}
}
@keyframes a-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
@keyframes a-pop{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
@keyframes a-wob{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
@keyframes a-tw{0%,100%{transform:scale(1) rotate(0);opacity:1}50%{transform:scale(.55) rotate(45deg);opacity:.75}}
@keyframes a-rise{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.qz-marquee-in{animation:none}.qz-marquee{overflow-x:auto}}
/* ---------- panel de ingreso desplegable ---------- */
.qz-cta{grid-column:1;grid-row:4;margin-top:clamp(4px,1vw,12px)}
#lp-toggle{display:inline-flex;align-items:center;gap:14px}
#lp-toggle::after{content:"";width:9px;height:9px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:translateY(-2px) rotate(45deg);transition:transform .25s ease}
#lp-toggle[aria-expanded="true"]::after{transform:translateY(2px) rotate(225deg)}
.panel.lp-card{display:none}
.qz-top.open .panel.lp-card{display:flex;animation:a-rise .45s cubic-bezier(.22,.8,.3,1) both}
/* cerrado: la ilustración ocupa la columna derecha; abierto: baja bajo el botón */
.qz-art{grid-column:2;grid-row:2 / span 3;align-self:center;max-width:none;margin:0}
.qz-top.open .qz-art{grid-column:1;grid-row:5;align-self:end;max-width:560px;margin-top:clamp(8px,2vw,24px)}
@media (max-width:899px){
.qz-title{order:0}.qz-sub{order:1}.qz-checks{order:2}.qz-cta{order:3;grid-column:1;grid-row:auto}.panel.lp-card{order:4}
.qz-art,.qz-top.open .qz-art{order:5;grid-column:1;grid-row:auto;max-width:460px;margin-inline:auto}
}
.qz-marquee{background:var(--violet);color:var(--ink-b)}
.qz-marquee-in span::after{background:var(--ink-b)!important;opacity:.55}
@media (min-width:900px){
.qz-top{grid-template-rows:auto auto auto auto 1fr;align-content:start}
.panel.lp-card{grid-row:2 / span 4}
.qz-art{grid-row:2 / span 4}
.qz-top.open .qz-art{grid-row:5}
}
.pg-main .eyebrow,.pg-hero .eyebrow,.pg-xp,.pg-next{color:var(--ink)!important}
/* =====================================================================
PANELES DE LA PORTADA: un solo sistema (misma forma, altura y espacio)
===================================================================== */
:root{--r-card:36px;--r-tile:28px;--tint-blue:#D3E8FF;--tint-violet:#E0D8FF;--tint-yellow:#FEF4CE;--tint-pink:#FFDDD4;--tint-green:#D6F8E4}
.qz-sec h2{margin:0 0 clamp(24px,3vw,40px)}
/* Elige cómo practicar: 4 tarjetas iguales, ilustración arriba y texto abajo */
.qz-tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
@media (max-width:1099px){.qz-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.qz-tiles{grid-template-columns:minmax(0,1fr)}}
.qz-tiles>.qz-tile{grid-column:auto!important;min-height:0;background:var(--white);border:0;border-radius:var(--r-card);padding:14px 14px 28px;display:flex;flex-direction:column-reverse;justify-content:flex-end;gap:22px;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
.qz-tile.t-blue{--tint:var(--tint-blue);background:var(--white)}.qz-tile.t-indigo{--tint:var(--tint-violet);background:var(--white)}
.qz-tile.t-yellow{--tint:var(--tint-yellow);background:var(--white)}.qz-tile.t-pink{--tint:var(--tint-pink);background:var(--white)}
.qz-tile-h{padding:0 14px;display:flex;flex-direction:column;gap:8px}
.qz-tile h3{font:500 1.4rem/1.15 var(--f-display);letter-spacing:-.03em;color:var(--ink)}
.qz-tile p{color:var(--gray);font-size:1rem;line-height:1.5;margin:0}
.qz-tile .qz-mock{margin:0;height:200px;min-height:0;padding:0;border-radius:var(--r-tile);background:var(--tint);display:grid;place-items:center;align-content:center;overflow:hidden;transition:transform .35s ease}
@media (hover:hover) and (pointer:fine){.qz-tiles>.qz-tile:hover{transform:translateY(-8px)}.qz-tile:hover .qz-mock{transform:scale(1.03)}}
.qz-mock .m-row{display:flex;gap:10px;justify-content:center}
.qz-mock .m-row svg{width:34px;height:34px}
.qz-mock .m-podium{display:flex;align-items:flex-end;gap:8px;height:130px;width:78%}
.qz-mock .m-podium span{flex:1;border-radius:14px 14px 0 0;display:grid;place-items:start center;padding-top:8px;font:500 1.1rem var(--f-display);color:var(--ink)}
.qz-mock .m-podium span:nth-child(1){background:#C9BFF2}.qz-mock .m-podium span:nth-child(2){background:#FFE98A}.qz-mock .m-podium span:nth-child(3){background:#F6C4B8}
.qz-mock{position:relative}
.qz-mock .m-ring{width:112px;height:112px}
.qz-mock .m-clock{position:absolute;inset:0;margin:auto;width:34px;height:34px}
.qz-mock .m-medals{display:flex;gap:14px}
.qz-mock .m-medals span{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:2px solid var(--ink)}
.qz-mock .m-medals span svg{width:30px;height:30px}
/* Doce temas: banda con etiquetas y el grabado dentro de una tarjeta de color */
#welcome>.qz-sec[aria-labelledby="lp-h-topics"]{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:stretch}
.qz-chips{align-content:flex-start}
.qz-chip{padding:14px 22px;font-size:1.05rem;transition:transform .25s cubic-bezier(.3,1.5,.5,1),background .2s}
@media (hover:hover) and (pointer:fine){.qz-chip:hover{transform:translateY(-3px) rotate(-1.5deg);background:var(--tint-green)}}
.qz-fig{background:var(--tint-violet);border-radius:var(--r-card);padding:14px 14px 20px;margin:0;gap:14px;align-self:start}
.qz-fig img{border-radius:var(--r-tile);transform:none!important;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.08);background:#fff}
.qz-fig figcaption{padding:0 10px;font-size:.9rem;color:#43536C}
/* Así funciona: tres tarjetas iguales con número en círculo */
.qz-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
@media (max-width:760px){.qz-steps{grid-template-columns:minmax(0,1fr)}}
.qz-steps li{background:var(--white);border-radius:var(--r-card);padding:clamp(24px,3vw,34px);gap:14px;align-items:flex-start}
.qz-steps .qz-n{align-self:flex-start;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;margin:0 0 6px;font:500 1.9rem/1 var(--f-display);letter-spacing:-.04em;color:var(--ink);background:var(--tint-blue)}
.qz-steps li:nth-child(2) .qz-n{background:var(--tint-yellow)}.qz-steps li:nth-child(3) .qz-n{background:var(--tint-pink)}
.qz-steps strong{font:500 1.5rem var(--f-display);letter-spacing:-.03em}
.qz-steps p{color:var(--gray);font-size:1.05rem}
/* Datos y contacto: dos tarjetas de la misma altura y el mismo relleno */
@media (min-width:1000px){#welcome>.qz-trust{grid-column:1/span 7}#welcome>.qz-contact{grid-column:8/span 5}}
#welcome>.qz-trust,#welcome>.qz-contact{align-self:stretch;padding:clamp(26px,3.4vw,40px);border-radius:var(--r-card)}
.qz-trust-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 32px}
@media (max-width:640px){.qz-trust-list{grid-template-columns:minmax(0,1fr)}}
.qz-trust-list p{color:var(--gray)}
.qz-contact{background:var(--tint-green)}
.qz-contact p{font-size:1.1rem;line-height:1.55}
/* aparición escalonada al llegar a cada sección */
html.js .rv:not(.in) :is(.qz-tile,.qz-steps li,.qz-chip,.qz-fig){opacity:0;transform:translateY(28px)}
.rv.in :is(.qz-tile,.qz-steps li,.qz-chip,.qz-fig){opacity:1;animation:a-rise .65s cubic-bezier(.22,.8,.3,1) both}
.rv.in .qz-tile:nth-child(2),.rv.in .qz-steps li:nth-child(2){animation-delay:.1s}
.rv.in .qz-tile:nth-child(3),.rv.in .qz-steps li:nth-child(3){animation-delay:.2s}
.rv.in .qz-tile:nth-child(4){animation-delay:.3s}
.rv.in .qz-chip:nth-child(3n+2){animation-delay:.06s}.rv.in .qz-chip:nth-child(3n){animation-delay:.12s}
@media (prefers-reduced-motion:reduce){html.js .rv:not(.in) :is(.qz-tile,.qz-steps li,.qz-chip,.qz-fig){opacity:1;transform:none}}
/* =====================================================================
MÁS MOVIMIENTO
===================================================================== */
.a-blink{transform-box:fill-box;transform-origin:center}
.a-wave{transform-box:view-box;transform-origin:242px 232px}
#lp-toggle{transition:transform .2s ease,background .2s ease}
@media (prefers-reduced-motion:no-preference){
.a-blink{animation:a-blink 5.2s infinite}.a-blink.b2{animation-delay:-2.3s}
.a-wave{animation:a-wave 4.2s ease-in-out infinite}
.qz-mock .m-row svg{animation:m-star 2.4s ease-in-out infinite}
.qz-mock .m-row:nth-child(2) svg{animation-delay:.3s}.qz-mock .m-row:nth-child(3) svg{animation-delay:.6s}
.qz-mock .m-row svg:nth-child(2){animation-delay:.15s}.qz-mock .m-row svg:nth-child(3){animation-delay:.3s}
.qz-mock .m-podium span{transform-origin:bottom;animation:m-rise 3.4s ease-in-out infinite}
.qz-mock .m-podium span:nth-child(2){animation-delay:-.6s}.qz-mock .m-podium span:nth-child(3){animation-delay:-1.2s}
.qz-mock .ring-fg{animation:m-ring 4s ease-in-out infinite alternate}
.qz-mock .m-clock{animation:a-wob 3s ease-in-out infinite}
.qz-mock .m-medals span{animation:a-bob 3.4s ease-in-out infinite}
.qz-mock .m-medals span:nth-child(2){animation-delay:-.7s}.qz-mock .m-medals span:nth-child(3){animation-delay:-1.4s}
@media (hover:hover) and (pointer:fine){#lp-toggle:hover{transform:translateY(-2px)}}
}
@keyframes a-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
@keyframes a-wave{0%,55%,100%{transform:rotate(0)}65%{transform:rotate(-16deg)}75%{transform:rotate(7deg)}85%{transform:rotate(-12deg)}}
@keyframes m-star{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.25) rotate(12deg)}}
@keyframes m-rise{0%,100%{transform:scaleY(.78)}45%,70%{transform:scaleY(1)}}
@keyframes m-ring{from{stroke-dashoffset:138}to{stroke-dashoffset:30}}
@media (min-width:901px){
#welcome>.qz-sec[aria-labelledby="lp-h-topics"]{grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-rows:auto 1fr;align-items:start}
#welcome>.qz-sec[aria-labelledby="lp-h-topics"] h2{grid-column:1;grid-row:1}
#welcome>.qz-sec[aria-labelledby="lp-h-topics"] .qz-chips{grid-column:1;grid-row:2}
#welcome>.qz-sec[aria-labelledby="lp-h-topics"] .qz-fig{grid-column:2;grid-row:1 / span 2;align-self:center}
}
/* despliegue del panel de ingreso: entra y sale con suavidad */
.qz-trust,.qz-trust p,.qz-trust .small,.qz-contact,.qz-contact p{text-align:left}
.qz-top.open .panel.lp-card{animation:a-in .5s cubic-bezier(.22,.9,.3,1) both;transform-origin:top center}
.qz-top.open.closing .panel.lp-card{animation:a-out .26s ease-in both}
.qz-top.open .qz-art{animation:a-rise2 .6s .1s cubic-bezier(.22,.8,.3,1) both}
@keyframes a-in{from{opacity:0;transform:translateY(-14px) scale(.96)}60%{opacity:1}to{opacity:1;transform:none}}
@keyframes a-out{to{opacity:0;transform:translateY(-10px) scale(.96)}}
@keyframes a-rise2{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
/* =====================================================================
INTERIOR (estudiante y docente): un solo lenguaje con la portada
===================================================================== */
/* insignias arriba, en una fila que se desliza */
#view-progress>.panel:nth-child(6){order:-1;grid-column:1/-1}
#view-progress>.panel:nth-child(6) .badges2{display:flex;grid-template-columns:none;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 10px;scrollbar-width:thin}
#view-progress>.panel:nth-child(6) .bdg2{flex:0 0 200px;scroll-snap-align:start}
#view-progress>.panel:nth-child(6) .ptabs{flex-wrap:wrap;gap:8px}
/* tarjetas de números con tonos pastel */
.sumgrid .stat:nth-child(1){background:var(--tint-blue)}.sumgrid .stat:nth-child(2){background:var(--tint-yellow)}
.sumgrid .stat:nth-child(3){background:var(--tint-pink)}.sumgrid .stat:nth-child(4){background:var(--tint-green)}
.sumgrid .stat span{color:#43536C}
/* temas del estudiante: tinte propio en el ícono */
.tt-tile.c0{--c:#FFD6CC}.tt-tile.c1{--c:#D3E8FF}.tt-tile.c2{--c:#FEF4CE}.tt-tile.c3{--c:#D6F8E4}
.tt-tile.c4{--c:#E0D8FF}.tt-tile.c5{--c:#C9ECF7}.tt-tile.c6{--c:#FFE1C4}.tt-tile.c7{--c:#E7E3D6}
.tt-tile.cx{--c:#D6F8E4}
/* panel docente plegable */
#view-teacher>.panel{interpolate-size:allow-keywords;overflow:hidden;transition:height .45s cubic-bezier(.22,.8,.3,1)}
#view-teacher>.panel.is-folded{height:84px}
#view-teacher>.panel>h2,#view-teacher>.panel>.qhead h2,#view-teacher>.panel>h3{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;user-select:none}
#view-teacher>.panel>h2::after,#view-teacher>.panel>.qhead h2::after,#view-teacher>.panel>h3::after{content:"";flex:none;width:12px;height:12px;border-right:2.5px solid var(--ink);border-bottom:2.5px solid var(--ink);transform:translateY(-3px) rotate(225deg);transition:transform .35s ease}
#view-teacher>.panel.is-folded>h2::after,#view-teacher>.panel.is-folded>.qhead h2::after,#view-teacher>.panel.is-folded>h3::after{transform:translateY(-3px) rotate(45deg)}
#view-teacher>.panel>h2:hover,#view-teacher>.panel>h3:hover{color:#000}
@media (min-width:1100px){
#view-teacher>.panel:not(.is-folded){grid-column:1/-1!important}
#view-teacher>.panel.is-folded{grid-column:span 1!important}
}
@media (prefers-reduced-motion:reduce){#view-teacher>.panel,#view-teacher>.panel>h2::after{transition:none}}
#view-teacher>.panel>:not(h2):not(h3):not(.qhead){transition:opacity .3s ease .12s}
#view-teacher>.panel.is-folded>:not(h2):not(h3):not(.qhead){visibility:hidden;opacity:0;transition:opacity .15s ease,visibility 0s .15s}
#view-teacher>.panel.is-folded{padding-top:26px;padding-bottom:0}
/* barras plegadas alineadas (bloque 4, 25/10): título a todo el ancho con la flecha a la derecha,
y los controles de la cabecera (filtro, Excel, impresión) ocultos mientras el panel está plegado */
#view-teacher>.panel>.qhead{flex-wrap:wrap;row-gap:12px}
#view-teacher>.panel>.qhead h2{flex:1 1 auto;margin:0}
#view-teacher>.panel>.qhead>.row{flex:0 1 auto}
#view-teacher>.panel.is-folded>.qhead>:not(h2){display:none}
#view-teacher>.panel>h2,#view-teacher>.panel>.qhead h2,#view-teacher>.panel>h3{min-height:32px;line-height:1.15}
/* tablas y tarjetas con desplazamiento horizontal: se arrastran con el ratón desde cualquier punto */
.hs-ok{cursor:grab}
.hs-ok.hs-drag{cursor:grabbing;user-select:none;scroll-snap-type:none!important;scroll-behavior:auto!important}
.hs-ok.hs-drag *{pointer-events:none}
.bdg2{background:var(--cream)}
.bdg2.r-r{background:var(--tint-blue)}.bdg2.r-e{background:var(--tint-violet)}.bdg2.r-l{background:var(--tint-yellow)}
.bdg2.off{opacity:.8;filter:saturate(.6)}
/* ventanas emergentes (acceso docente y textos legales): tarjeta centrada con fondo atenuado */
#login,#privacy{inset:auto;top:50%;left:50%;z-index:80;width:min(520px,calc(100vw - 32px));max-height:min(88vh,880px);border-radius:var(--r-card);background:var(--white);padding:clamp(24px,3.2vw,36px);transform:translate(-50%,-50%)}
#privacy{width:min(820px,calc(100vw - 32px))}
#login:not([hidden]),#privacy:not([hidden]){box-shadow:0 0 0 100vmax rgba(22,33,55,.46)!important;animation:modal-in .4s cubic-bezier(.22,.9,.3,1) both}
@keyframes modal-in{from{opacity:0;transform:translate(-50%,-46%) scale(.96)}to{opacity:1;transform:translate(-50%,-50%)}}
#login .qhead,#privacy .qhead{position:sticky;top:-6px;background:var(--white);z-index:2;padding-bottom:8px}
@media (prefers-reduced-motion:reduce){#login:not([hidden]),#privacy:not([hidden]){animation:none}}
/* =====================================================================
PANEL DE INGRESO SIN SALTOS
Escritorio: el panel ocupa la MISMA celda que la ilustración (se cruzan con un fundido), así el diseño no se mueve.
Celular: el panel crece hacia abajo con altura animada.
===================================================================== */
@media (min-width:900px){
.panel.lp-card{display:flex!important;grid-column:2;grid-row:2 / span 4;opacity:0;visibility:hidden;pointer-events:none;transform:translateY(14px) scale(.985);animation:none!important;transition:opacity .32s ease,transform .45s cubic-bezier(.22,.9,.3,1),visibility 0s .45s}
.qz-top.open .panel.lp-card{opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:.06s,.06s,0s}
.qz-art,.qz-top.open .qz-art{grid-column:2;grid-row:2 / span 4;align-self:center;max-width:none;margin:0;animation:a-rise .8s .24s cubic-bezier(.22,.8,.3,1) both}
.qz-art svg{transition:opacity .28s ease,transform .45s ease}
.qz-top.open .qz-art svg{opacity:0;transform:scale(.96)}
}
@media (max-width:899px){
.panel.lp-card{display:flex!important;max-height:0;opacity:0;visibility:hidden;overflow:hidden;padding-top:0;padding-bottom:0;animation:none!important;transition:max-height .5s cubic-bezier(.22,.9,.3,1),opacity .3s ease,padding .4s ease,visibility 0s .5s}
.qz-top.open .panel.lp-card{max-height:1500px;opacity:1;visibility:visible;padding-top:clamp(22px,3vw,34px);padding-bottom:clamp(22px,3vw,34px);transition-delay:0s}
.qz-top.open .qz-art{animation:a-rise .8s .24s cubic-bezier(.22,.8,.3,1) both}
}
/* =====================================================================
ASÍ FUNCIONA CON ALMA: cada paso trae su escena animada
===================================================================== */
.qz-steps li{position:relative;padding:14px 14px 30px;gap:0;transition:transform .35s cubic-bezier(.3,1.4,.5,1)}
@media (hover:hover) and (pointer:fine){.qz-steps li:hover{transform:translateY(-6px)}}
.qz-step-art{width:100%;height:176px;border-radius:var(--r-tile);background:var(--tint-blue);display:grid;place-items:center;margin-bottom:22px;overflow:hidden}
.qz-steps li:nth-child(2) .qz-step-art{background:var(--tint-yellow)}.qz-steps li:nth-child(3) .qz-step-art{background:var(--tint-pink)}
.qz-step-art svg{width:74%;height:auto;max-height:152px;overflow:visible}
.qz-steps .qz-n{position:absolute;top:28px;left:28px;z-index:2;width:42px;height:42px;margin:0;font-size:1.2rem;background:var(--white);border:2px solid var(--ink)}
.qz-steps li:nth-child(2) .qz-n,.qz-steps li:nth-child(3) .qz-n{background:var(--white)}
.qz-steps strong,.qz-steps p{padding:0 14px;margin:0}
.qz-steps strong{margin-bottom:8px}
.s-pin circle{fill:#162137}
.s-star{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
.s-pin circle{opacity:.2;animation:s-dot 4s ease-in-out infinite}
.s-pin circle:nth-child(2){animation-delay:.25s}.s-pin circle:nth-child(3){animation-delay:.5s}
.s-pin circle:nth-child(4){animation-delay:.75s}.s-pin circle:nth-child(5){animation-delay:1s}.s-pin circle:nth-child(6){animation-delay:1.25s}
.s-ok{animation:s-ok 4s ease-in-out infinite}
.s-tick{stroke-dasharray:40;animation:s-tick 4s ease-in-out infinite}
.s-hop{animation:s-hop 4.4s ease-in-out infinite}
.s-star{animation:a-tw 2.4s ease-in-out infinite}
}
@keyframes s-dot{0%,12%{opacity:.2}24%,78%{opacity:1}92%,100%{opacity:.2}}
@keyframes s-ok{0%,38%{fill:#fff}52%,88%{fill:#D6F8E4}100%{fill:#fff}}
@keyframes s-tick{0%,40%{stroke-dashoffset:40}58%,88%{stroke-dashoffset:0}100%{stroke-dashoffset:40}}
@keyframes s-hop{0%{transform:translate(0,0);opacity:1}22%{transform:translate(58px,-28px)}46%,78%{transform:translate(116px,-58px);opacity:1}90%{transform:translate(116px,-58px);opacity:0}91%{transform:translate(0,0);opacity:0}100%{transform:translate(0,0);opacity:1}}
/* Doce temas: ilustración propia (libro con vocales que flotan) en lugar del grabado */
.qz-fig{padding:clamp(14px,2vw,26px)}
.qz-fig svg{display:block;width:100%;height:auto;overflow:visible}
.v-b{transform-box:fill-box;transform-origin:center}
@media (prefers-reduced-motion:no-preference){
.v-b{animation:a-bob 3.8s ease-in-out infinite}
.v-b.b2{animation-delay:-.6s}.v-b.b3{animation-delay:-1.2s}.v-b.b4{animation-delay:-1.8s}.v-b.b5{animation-delay:-2.4s}
.qz-fig:hover .v-b{animation-duration:1.6s}
}
/* panel de ingreso más compacto y dibujo alineado arriba */
.panel.lp-card{gap:12px;padding:clamp(20px,2.4vw,28px)}
.lp-card .lp-card-h h3{font-size:1.35rem}
.lp-card .wl-sec{gap:8px}
.lp-card .wl-sec h3{font-size:1rem}
.lp-card .wl-course{min-height:58px;border-radius:20px}
.lp-card .wl-course b{font-size:1.3rem}
.lp-card .wl-fields{gap:10px}
.lp-card input[type=text]{padding:10px 16px}
.lp-card .small.muted{font-size:.82rem;line-height:1.35;margin:0}
.lp-card .ck{padding:9px 14px;gap:10px;border-radius:18px}
.lp-card .ck-tx{font-size:.84rem;line-height:1.3}
.lp-card .wl-go{padding:13px 24px;font-size:1.05rem}
@media (min-width:900px){.qz-art,.qz-top.open .qz-art{align-self:start;margin-top:8px}}
/* =====================================================================
FORMULARIO DE INGRESO COMO VENTANA CENTRADA (nada de la portada se mueve)
===================================================================== */
.panel.lp-card{display:flex!important;position:fixed;left:50%;top:50%;z-index:80;width:min(540px,calc(100vw - 32px));max-height:min(90vh,820px);overflow:auto;margin:0;padding:clamp(20px,2.6vw,30px);grid-column:auto;grid-row:auto;
opacity:0;visibility:hidden;pointer-events:none;transform:translate(-50%,-46%) scale(.96);animation:none!important;
transition:opacity .28s ease,transform .42s cubic-bezier(.22,.9,.3,1),visibility 0s .42s}
.qz-top.open .panel.lp-card{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,-50%);box-shadow:0 0 0 100vmax rgba(22,33,55,.46)!important;transition-delay:0s}
.lp-card .lp-card-h{display:flex;align-items:center;justify-content:space-between;gap:12px}
.qz-art,.qz-top.open .qz-art{grid-column:2;grid-row:2 / span 4;align-self:center;max-width:none;margin:0;animation:a-rise .8s .24s cubic-bezier(.22,.8,.3,1) both}
.qz-art svg,.qz-top.open .qz-art svg{opacity:1;transform:none;transition:none}
@media (max-width:899px){
.qz-art,.qz-top.open .qz-art{grid-column:1;grid-row:auto;max-width:460px;margin-inline:auto}
.panel.lp-card{max-height:min(92vh,860px);padding-top:clamp(20px,2.6vw,30px);padding-bottom:clamp(20px,2.6vw,30px)}
.qz-top.open .panel.lp-card{max-height:min(92vh,860px)}
}
@media (prefers-reduced-motion:reduce){.panel.lp-card{transition:none}}
/* la animación de entrada de la vista no debe dejar un transform activo (rompe las ventanas fijas) */
main.lp,#welcome,main.stack{animation-fill-mode:backwards!important}
/* =====================================================================
MI PROGRESO: primero la insignia de rango, segundo las medallas ganadas
===================================================================== */
#view-progress>.pg-hero{order:0}
#view-progress>.panel:nth-child(6){order:1;grid-column:1/-1}
#view-progress>.pg-stats{order:2}
#view-progress>.panel{order:3}
@media (min-width:1100px){
#view-progress>.panel:nth-child(3){order:3}#view-progress>.panel:nth-child(5){order:4}#view-progress>.panel:nth-child(4){order:5}
#view-progress>.panel:nth-child(6){order:1}#view-progress>.panel:nth-child(7){order:7}#view-progress>.panel:nth-child(8){order:8}#view-progress>.panel:nth-child(9){order:9}
}
/* =====================================================================
BARRA SUPERIOR DE LA PORTADA: pegajosa, se compacta y marca la sección activa
===================================================================== */
:root{--ease-out:cubic-bezier(.22,.8,.3,1);--ease-spring:cubic-bezier(.3,1.5,.5,1);--t-press:120ms;--t-hover:220ms}
body.is-gate .top{position:sticky;top:12px;z-index:50;margin:16px 0 0;min-height:64px;padding:10px 12px 10px 20px;border:1px solid transparent;
transition:padding .25s var(--ease-out),min-height .25s var(--ease-out),border-color .25s ease;animation:a-drop .5s var(--ease-out) backwards}
body.is-gate.is-scrolled .top{min-height:54px;padding-block:6px;border-color:#E7E2D3}
body.is-gate .logo h1{font-size:1.4rem;transition:font-size .25s var(--ease-out)}
body.is-gate .mark{transition:width .25s var(--ease-out),height .25s var(--ease-out)}
body.is-gate.is-scrolled .logo h1{font-size:1.2rem}
body.is-gate.is-scrolled .mark{width:34px;height:34px}
.lp-nav button{position:relative}
.lp-nav button.is-active{background:var(--cream);font-weight:600}
.top-login::after{animation:a-dot 2.6s ease-in-out infinite}
@keyframes a-drop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes a-dot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.5);opacity:.55}}
@media (max-width:640px){
body.is-gate .top{flex-wrap:nowrap;border-radius:var(--r-pill);padding:8px 8px 8px 14px;min-height:56px;gap:8px}
body.is-gate .logo{gap:8px;min-width:0}
body.is-gate .logo h1{font-size:1.15rem;white-space:nowrap}
body.is-gate.is-scrolled .logo h1{font-size:1.05rem}
body.is-gate .mark{width:34px;height:34px}
body.is-gate .top-login{margin-left:auto;padding:8px 14px 8px 16px;font-size:.84rem;white-space:nowrap}
}
@media (prefers-reduced-motion:reduce){body.is-gate .top{animation:none}.top-login::after{animation:none}}
/* =====================================================================
BOTONES: un solo sistema de movimiento para toda la web
===================================================================== */
.btn,.tab,.chip,.cchip,.tt-tile,.lot,.tile,.team,.av,.ptab,.uchip,.mi,.wl-course,.qz-chip,.top-login,.lp-nav button,.brandchip,.tok,.ordi{
transition:transform var(--t-hover) var(--ease-spring),background-color var(--t-hover) ease,border-color var(--t-hover) ease,color var(--t-hover) ease,opacity var(--t-hover) ease;-webkit-tap-highlight-color:transparent}
.ck{transition:background-color var(--t-hover) ease,border-color var(--t-hover) ease,transform var(--t-hover) var(--ease-spring)}
@media (hover:hover) and (pointer:fine){
.btn:hover:not(:disabled){transform:translateY(-2px)}
.top-login:hover{transform:translateY(-2px)}
.tab:hover{transform:translateX(0)}
.tile:hover:not(:disabled),.mi:hover,.av:hover,.team:hover,.tok:hover,.ordi:hover{transform:translateY(-3px)}
.cchip:hover:not(:disabled),.ptab:hover,.uchip:hover{transform:translateY(-2px)}
.ck:hover{transform:translateY(-1px)}
.top-login:hover::after{animation-duration:1.1s}
}
.btn:active:not(:disabled),.tab:active,.tt-tile:active,.lot:active,.tile:active:not(:disabled),.cchip:active:not(:disabled),.ptab:active,.uchip:active,.mi:active,.av:active,.team:active,.wl-course:active,.qz-chip:active,.top-login:active,.lp-nav button:active,.chip:active,.ck:active,.tok:active,.ordi:active{
transform:scale(.96);transition-duration:var(--t-press)}
.btn:disabled{transform:none!important}
/* flecha que se adelanta en el botón de entrada y en el principal del formulario */
.wl-go{display:inline-flex;align-items:center;justify-content:center;gap:10px}
.wl-go::after{content:"";width:9px;height:9px;border-right:2.5px solid currentColor;border-top:2.5px solid currentColor;transform:rotate(45deg);transition:transform var(--t-hover) var(--ease-spring)}
@media (hover:hover) and (pointer:fine){.wl-go:hover:not(:disabled)::after{transform:translateX(4px) rotate(45deg)}#lp-toggle:hover::after{transform:translateY(1px) rotate(45deg)}}
/* ocupado: el botón se atenúa y un punto pulsa, sin cambiar su ancho */
.btn:disabled.wl-go::after{display:none}
.wl-go:disabled::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;animation:a-dots .8s ease-in-out infinite alternate}
@keyframes a-dots{from{transform:scale(.6);opacity:.4}to{transform:scale(1.15);opacity:1}}
/* casillas: la palomita aparece con un pequeño rebote */
.ck input:checked+.ck-box{animation:ck-pop .32s var(--ease-spring)}
.ck-box{background:var(--white)}
.ck input:checked+.ck-box{background:#5ECF93;border-color:#17653C}
@keyframes ck-pop{0%{transform:scale(.8)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
/* enfoque por teclado: el anillo entra con suavidad */
:focus-visible{animation:a-ring .25s var(--ease-out)}
@keyframes a-ring{from{outline-offset:9px;outline-color:transparent}to{outline-offset:3px}}
@media (prefers-reduced-motion:reduce){.ck input:checked+.ck-box,:focus-visible,.wl-go:disabled::before{animation:none}}
/* =====================================================================
DOCE TEMAS: tarjetas de palabras que se voltean (en lugar del libro de vocales)
===================================================================== */
.qz-flip{padding:clamp(16px,2.2vw,28px)}
.fc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(10px,1.4vw,16px)}
.fc{perspective:800px;aspect-ratio:1/1.08}
.fc-in{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.fc-f,.fc-b{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border:2px solid var(--ink);border-radius:24px;backface-visibility:hidden;-webkit-backface-visibility:hidden;font:500 clamp(1.05rem,1.9vw,1.5rem) var(--f-display);letter-spacing:-.02em;color:var(--ink);text-align:center;padding:6px}
.fc-b{transform:rotateY(180deg)}
.fc-b small{font:400 .72rem/1.2 var(--f-body);letter-spacing:0;color:#43536C}
.fc.f1 .fc-f{background:#FFD6CC}.fc.f1 .fc-b{background:#fff}
.fc.f2 .fc-f{background:#D3E8FF}.fc.f2 .fc-b{background:#fff}
.fc.f3 .fc-f{background:#FEF4CE}.fc.f3 .fc-b{background:#fff}
.fc.f4 .fc-f{background:#D6F8E4}.fc.f4 .fc-b{background:#fff}
.fc.f5 .fc-f{background:#fff}.fc.f5 .fc-b{background:#FFD6CC}
.fc.f6 .fc-f{background:#fff}.fc.f6 .fc-b{background:#D3E8FF}
@media (prefers-reduced-motion:no-preference){
.fc-in{animation:fc-flip 8s ease-in-out infinite}
.fc.f2 .fc-in{animation-delay:-1.3s}.fc.f3 .fc-in{animation-delay:-2.6s}.fc.f4 .fc-in{animation-delay:-3.9s}.fc.f5 .fc-in{animation-delay:-5.2s}.fc.f6 .fc-in{animation-delay:-6.5s}
@media (hover:hover) and (pointer:fine){.fc:hover .fc-in{animation:none;transform:rotateY(180deg);transition:transform .6s var(--ease-spring)}}
}
@keyframes fc-flip{0%,30%{transform:rotateY(0)}42%,78%{transform:rotateY(180deg)}90%,100%{transform:rotateY(360deg)}}
/* =====================================================================
RECURSOS DE LA CARPETA PROYECTO LL: imagen del estado vacío y sonido
===================================================================== */
.note.note-img{display:grid;grid-template-columns:minmax(150px,230px) minmax(0,1fr);gap:clamp(14px,2.4vw,28px);align-items:center;background:#FAF2DB;border-radius:var(--r-card);padding:12px clamp(16px,2.4vw,28px) 12px 12px}
.note-img img{display:block;width:100%;height:auto;border-radius:calc(var(--r-card) - 8px)}
.note-img p{margin:0;font-size:1.05rem;line-height:1.5}
@media (max-width:640px){.note.note-img{grid-template-columns:1fr;padding:12px}.note-img img{max-height:200px;object-fit:contain}.note-img p{padding:4px 8px 8px}}
/* =====================================================================
BARRA SUPERIOR CON PERSONALIDAD (estilo "pegatina": borde de tinta como los dibujos)
===================================================================== */
body.is-gate .top,body.is-gate.is-scrolled .top{background:var(--white);border:2px solid var(--ink)}
body.is-gate .top::after{content:"";position:absolute;left:30px;right:30px;bottom:4px;height:4px;border-radius:4px;background:#5ECF93;transform-origin:left center;transform:scaleX(var(--sp,0));transition:transform .12s linear;pointer-events:none}
body.is-gate .logo h1{font-weight:600;letter-spacing:-.03em}
body.is-gate .logo h1 em{display:inline-block;background:var(--tint-yellow);padding:0 .3em;border-radius:.45em;transform:rotate(-3deg);margin-left:.08em;transition:transform .35s var(--ease-spring)}
body.is-gate .logo:hover h1 em{transform:rotate(2deg) scale(1.06)}
body.is-gate .mark{transition:transform .4s var(--ease-spring),width .25s var(--ease-out),height .25s var(--ease-out)}
body.is-gate .logo:hover .mark{transform:rotate(-10deg) scale(1.1)}
@media (prefers-reduced-motion:no-preference){body.is-gate .mark{animation:a-wiggle 1.2s .5s var(--ease-spring) both}}
@keyframes a-wiggle{0%{transform:rotate(0)}30%{transform:rotate(-14deg) scale(1.1)}60%{transform:rotate(8deg)}100%{transform:rotate(0)}}
/* enlaces con punto de color propio; el activo se pinta con su color */
.lp-nav button{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 13px;border:2px solid transparent;font-weight:500}
.lp-nav button::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--d,#B9B4A4);transition:transform .3s var(--ease-spring)}
.lp-nav button:nth-child(1){--c:var(--tint-blue);--d:#6FB1F5}
.lp-nav button:nth-child(2){--c:var(--tint-yellow);--d:#F2C230}
.lp-nav button:nth-child(3){--c:var(--tint-pink);--d:#F28B7A}
@media (hover:hover) and (pointer:fine){.lp-nav button:hover{background:var(--c,var(--cream))}.lp-nav button:hover::before{transform:scale(1.5)}}
.lp-nav button.is-active{background:var(--c,var(--cream));border-color:var(--ink);font-weight:600}
.lp-nav button.is-active::before{transform:scale(1.25)}
/* Acceso docente: botón amarillo pastel con borde de tinta */
body.is-gate .top-login{background:var(--tint-yellow);border:2px solid var(--ink);font-weight:600;color:var(--ink)}
body.is-gate .top-login::after{background:#1C65C8}
@media (hover:hover) and (pointer:fine){body.is-gate .top-login:hover{background:#FFE98A}}
@media (max-width:640px){body.is-gate .top::after{left:22px;right:22px}body.is-gate .logo h1 em{padding:0 .22em}}
body.is-gate .top::after{bottom:-2px;left:32px;right:32px;height:4px}
/* =====================================================================
BARRA SUPERIOR v3: sobria y elegante, con movimiento fino
(indicador que se desliza entre enlaces, flecha en el botón, entrada escalonada)
===================================================================== */
body.is-gate .top,body.is-gate.is-scrolled .top{background:var(--white);border:1px solid #E4DFCF;transition:padding .3s var(--ease-out),min-height .3s var(--ease-out),border-color .3s ease,transform .4s var(--ease-out)}
body.is-gate.is-scrolled .top{border-color:#D6D0BE}
body.is-gate .top::after{bottom:-1px;left:36px;right:36px;height:2px;background:var(--ink);opacity:.75}
/* marca: texto limpio, sin resaltado */
body.is-gate .logo h1{font-weight:600;letter-spacing:-.035em}
body.is-gate .logo h1 em{background:none;padding:0;border-radius:0;transform:none;margin:0;display:inline;font-weight:600}
body.is-gate .logo:hover h1 em{transform:none}
body.is-gate .logo:hover .mark{transform:rotate(-8deg) scale(1.06)}
/* enlaces: solo texto; un indicador crema se desliza hacia el enlace señalado o activo */
.lp-nav{position:relative;display:none}
@media (min-width:1000px){body.is-gate .lp-nav{display:flex;gap:2px}}
.lp-nav button,.lp-nav button.is-active{position:relative;z-index:1;background:transparent!important;border:0;padding:10px 18px;font-weight:500;color:#43536C;transition:color .25s ease}
.lp-nav button::before{content:none;display:none}
.lp-nav button:hover,.lp-nav button.is-active{color:var(--ink)}
.lp-nav button.is-active{font-weight:600}
.nav-ind{position:absolute;left:0;top:0;z-index:0;border-radius:999px;background:var(--cream);opacity:0;pointer-events:none;transition:transform .5s var(--ease-spring),width .5s var(--ease-spring),height .3s ease,opacity .25s ease}
/* Acceso docente: botón oscuro con flecha que avanza */
body.is-gate .top-login{background:var(--ink);color:#fff;border:0;padding:11px 20px 11px 22px;font-weight:500;gap:12px;transition:transform var(--t-hover) var(--ease-spring),background-color .25s ease}
body.is-gate .top-login::after{content:"";width:8px;height:8px;border-radius:0;background:none;border-right:2px solid currentColor;border-top:2px solid currentColor;transform:rotate(45deg);animation:none;opacity:1;transition:transform .3s var(--ease-spring)}
@media (hover:hover) and (pointer:fine){body.is-gate .top-login:hover{background:#43536C;color:#fff}body.is-gate .top-login:hover::after{transform:translateX(5px) rotate(45deg)}}
body.is-gate .top-login:active{transform:scale(.96)}
/* entrada: la barra baja y los elementos aparecen uno tras otro */
@media (prefers-reduced-motion:no-preference){
body.is-gate .top{animation:a-drop .6s var(--ease-out) backwards}
body.is-gate .logo{animation:a-fadein .5s .15s var(--ease-out) backwards}
body.is-gate .lp-nav button{animation:a-fadein .5s var(--ease-out) backwards}
body.is-gate .lp-nav button:nth-child(2){animation-delay:.22s}body.is-gate .lp-nav button:nth-child(3){animation-delay:.3s}body.is-gate .lp-nav button:nth-child(4){animation-delay:.38s}
body.is-gate .top-login{animation:a-fadein .5s .45s var(--ease-out) backwards}
body.is-gate .mark{animation:none}
}
@keyframes a-fadein{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:640px){body.is-gate .top::after{left:26px;right:26px}body.is-gate .top-login{padding:9px 14px 9px 16px;gap:8px}}
/* =====================================================================
MÁS IMÁGENES (carpeta Proyecto LL, Pixabay): Quiz en vivo y Contacto
===================================================================== */
.panel-img{display:grid;grid-template-columns:minmax(0,1fr) minmax(180px,300px);gap:clamp(20px,3vw,40px);align-items:center;padding:clamp(22px,3vw,32px)}
.panel-img .pi-art{grid-column:2;grid-row:1;width:100%;height:auto;max-height:340px;object-fit:cover;border-radius:var(--r-tile);display:block}
.panel-img .pi-main{grid-column:1;grid-row:1;display:flex;flex-direction:column;gap:18px;min-width:0}
@media (max-width:760px){.panel-img{grid-template-columns:1fr}.panel-img .pi-art{grid-column:1;grid-row:1;max-height:200px}.panel-img .pi-main{grid-column:1;grid-row:2}}
.qz-contact-img{display:block;width:100%;height:clamp(150px,18vw,230px);object-fit:cover;border-radius:var(--r-tile);margin-bottom:22px}
.qz-contact{justify-content:flex-start}
/* =====================================================================
MENÚ LATERAL DEL ESTUDIANTE: imágenes bajo las pestañas
===================================================================== */
@media (min-width:960px){
}
/* panel de Tareas (vacío) con imagen, versión compacta */
.panel-img.sm{grid-template-columns:1fr;align-items:start}
.panel-img.sm .pi-art{grid-column:1;grid-row:1;max-height:170px}
.panel-img.sm .pi-main{grid-column:1;grid-row:2}
.note.note-img{background:var(--white)}
div.f{display:flex;flex-direction:column;gap:3px;min-width:0}
div.f>strong{font:500 1.15rem var(--f-display);letter-spacing:-.02em}
/* =====================================================================
PIEZAS INTEGRADAS (3D renderizado a PNG transparente + ilustración recortada)
===================================================================== */
/* aviso de "aún no hay lotes": el joven se apoya en la base de la tarjeta, asomando por arriba */
.note.note-img{position:relative;display:block;background:var(--tint-yellow);border-radius:var(--r-card);margin-top:34px;min-height:150px;padding:24px 28px 24px calc(clamp(150px,19vw,240px) + 30px);overflow:visible}
.note-img img{position:absolute;left:clamp(14px,2vw,26px);bottom:0;width:clamp(150px,19vw,240px);height:auto;max-height:none;border-radius:0;transform-origin:50% 100%}
.note-img p{margin:0;font-size:1.08rem;line-height:1.55;max-width:46em}
@media (max-width:640px){.note.note-img{margin-top:120px;padding:96px 20px 22px}.note-img img{left:50%;transform:translateX(-50%);width:200px;bottom:auto;top:-110px}}
/* paneles con pieza 3D: círculo pastel detrás y flotación suave */
.pi-pop{position:relative;display:grid;place-items:center;aspect-ratio:1;width:100%;max-width:230px;justify-self:center;max-height:none!important;border-radius:0!important}
.pi-pop::before{content:"";position:absolute;inset:6%;border-radius:50%;background:var(--tint-yellow)}
.pi-pop img{position:relative;width:78%;height:auto;display:block}
.panel-img.sm .pi-pop{max-width:130px;justify-self:start}
.panel-img.sm .pi-pop::before{background:var(--tint-blue)}
.panel-img.sm .pi-pop img{width:58%}
@media (prefers-reduced-motion:no-preference){.pi-pop img{animation:a-bob 4.2s ease-in-out infinite}.panel-img.sm .pi-pop img{animation-duration:5s}}
/* búho estudiante bajo el menú (SVG propio, dúo tono sin contorno): respira, parpadea y se inclina al pasar el mouse */
.side-owl{display:none}
@media (min-width:960px){
body:not(.is-gate) .side-owl{display:block;position:sticky;grid-column:1;grid-row:3;align-self:start;top:calc(var(--gut) + 170px + 210px);margin-top:18px;aspect-ratio:1/.9}
body:not(.is-gate) .tabs:has(#tab-teacher:not([hidden]))~.side-owl{top:calc(var(--gut) + 170px + 290px)}
}
@media (min-width:960px) and (max-height:820px){body:not(.is-gate) .side-owl{display:none}}
body.is-gate .side-owl{display:none}
.side-owl::before{content:"";position:absolute;left:6%;top:4%;width:88%;aspect-ratio:1;border-radius:50%;background:var(--tint-yellow)}
.side-owl::after{content:"";position:absolute;left:20%;bottom:3%;width:60%;height:7%;border-radius:50%;background:var(--sand)}
.side-owl .ow{position:absolute;left:12%;top:10%;width:76%;height:auto;z-index:1;overflow:visible}
.side-owl .ow-body{transform-box:fill-box;transform-origin:50% 100%;transition:transform 400ms var(--ease-spring)}
.side-owl .ow-eyes{transform-box:fill-box;transform-origin:50% 50%}
.side-owl .ss-star{position:absolute;z-index:2}
.side-owl .s1{right:10%;top:4%;width:24px;height:24px}
.side-owl .s2{left:6%;bottom:26%;width:16px;height:16px}
@media (hover:hover) and (pointer:fine){.side-owl:hover .ow-body{transform:rotate(-6deg)}}
@media (prefers-reduced-motion:no-preference){
.side-owl .ow{animation:ow-breathe 4s ease-in-out infinite;transform-origin:50% 100%}
.side-owl .ow-eyes{animation:ow-blink 5s infinite}
.side-owl .ss-star{animation:a-tw 2.6s ease-in-out infinite}
.side-owl .s2{animation-delay:-1.2s}
}
@keyframes ow-breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}
@keyframes ow-blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@media (prefers-reduced-motion:reduce){.side-owl .ow-body{transition:none}.side-owl:hover .ow-body{transform:none}}
/* búho (bloque 2, 25/10): sigue el cursor con la mirada, reacciona al pasar encima y mira a los lados si no hay actividad.
Todo con transform y apagado con "reducir movimiento" (el JS tampoco actúa en ese caso). */
.side-owl .ow-pupils{transition:transform .18s ease-out}
.side-owl .ow-wl,.side-owl .ow-wr{transform-box:fill-box}
.side-owl .ow-wl{transform-origin:85% 15%}.side-owl .ow-wr{transform-origin:15% 15%}
@media (prefers-reduced-motion:no-preference){
.side-owl.is-hover .ow-body{transform:translateY(-7px) rotate(-5deg)}
.side-owl.is-hover .ow-eyes{animation:none;transform:scale(1.07)}
.side-owl.is-hover .ow-wl{animation:ow-flap-l .5s ease-in-out 2}
.side-owl.is-hover .ow-wr{animation:ow-flap-r .5s ease-in-out 2}
.side-owl.is-hover .ss-star{animation:ow-spark .7s ease-out}
.side-owl.is-idle .ow-pupils{animation:ow-look 7s ease-in-out infinite}
.side-owl.is-idle .ow-body{animation:ow-tilt 7s ease-in-out infinite}
}
@keyframes ow-flap-l{50%{transform:rotate(-18deg)}}
@keyframes ow-flap-r{50%{transform:rotate(18deg)}}
@keyframes ow-spark{0%{transform:scale(1)}40%{transform:scale(1.5) rotate(20deg)}100%{transform:scale(1)}}
@keyframes ow-look{0%,12%,100%{transform:translate(0,0)}22%,40%{transform:translate(-5px,1px)}52%,70%{transform:translate(5px,1px)}80%,90%{transform:translate(0,-2px)}}
@keyframes ow-tilt{0%,15%,100%{transform:rotate(0)}25%,40%{transform:rotate(-3deg)}55%,70%{transform:rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.side-owl .ow-pupils{transition:none;transform:none!important}}
/* =====================================================================
COMPLEMENTO (Tarea 2): pasteles con más vida, pie violeta,
bloqueados con el color de su tema y formas planas de fondo
===================================================================== */
:root{
--grass:#9BE9BB; --sky:#9AD4FF; --coral:#F89A92; --sun-y:#FDDB7C; --violet:#C2B1F8;
--a0:#F89A92; --a1:#9AD4FF; --a2:#FDDB7C; --a3:#9BE9BB; --a4:#C2B1F8; --a5:#A5E4F3; --a6:#FFC48E;
--tint-blue:#DCEEFE; --tint-violet:#DDD4FF; --tint-yellow:#FEF4CE; --tint-pink:#FEE4E6; --tint-green:#D6F8E4;
--good-soft:#D1F8E1; --warn-soft:#FFF3D0; --bad-soft:#FFE2DF;
--gray:#43536C;
}
/* colores por tema y letras de respuesta */
.tt-tile.c0{--c:#FFD1D5}.tt-tile.c1{--c:#C2E2FF}.tt-tile.c2{--c:#F9E8A7}.tt-tile.c3{--c:#B3EECD}
.tt-tile.c4{--c:#DDD4FF}.tt-tile.c5{--c:#B3EEF4}.tt-tile.c6{--c:#FED7BA}.tt-tile.c7{--c:#E7DBC3}
.tt-tile.cx{--c:#B3EECD}
.tile.t0 .shape{background:#FFD1D5}.tile.t1 .shape{background:#C2E2FF}.tile.t2 .shape{background:#F9E8A7}.tile.t3 .shape{background:#B3EECD}
/* tarjetas que se voltean */
.fc.f1 .fc-f{background:#FFD1D5}.fc.f2 .fc-f{background:#C2E2FF}.fc.f3 .fc-f{background:#F9E8A7}.fc.f4 .fc-f{background:#B3EECD}
.fc.f5 .fc-b{background:#FFD1D5}.fc.f6 .fc-b{background:#C2E2FF}
/* mosaico de modos de la portada */
.qz-tile.t-blue{--tint:#C2E2FF}.qz-tile.t-indigo{--tint:#DDD4FF}.qz-tile.t-yellow{--tint:#F9E8A7}.qz-tile.t-pink{--tint:#FFD1D5}
/* ilustraciones: rellenos más vivos sin tocar app.js */
svg [fill="#FFB9AC" i]{fill:#FF9F8E} svg [fill="#A9D3FF" i]{fill:#8FD0FF} svg [fill="#86B9EE" i]{fill:#5FB4F5}
svg [fill="#FFEE9C" i]{fill:#FFE266} svg [fill="#CFC0FF" i]{fill:#C3B0FF} svg [fill="#C2E6AA" i]{fill:#9FE69B}
svg [fill="#D6F8E4" i]{fill:#C3F0BD} svg [fill="#C9BFF2" i]{fill:#C3B0FF} svg [fill="#FFD7B8" i]{fill:#FFC9A0}
@keyframes s-ok{0%,38%{fill:#fff}52%,88%{fill:#C3F0BD}100%{fill:#fff}}
/* banda de "Doce temas": azul pastel a todo el ancho con ::before */
html{overflow-x:clip}
#welcome>.qz-sec[aria-labelledby="lp-h-topics"]{position:relative;isolation:isolate;background:transparent!important;clip-path:none}
#welcome>.qz-sec[aria-labelledby="lp-h-topics"]::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:#CDE6FB;z-index:-1}
/* pie de página violeta pastel, exactamente del ancho de la ventana */
.site-foot{background:#DDD4FF!important;color:#162137;margin-inline:0!important;padding-inline:var(--gut)!important}
.site-foot a{color:#162137;text-decoration:underline;text-underline-offset:4px}
/* vista estudiante y docente: bloqueados con el pastel de su tema */
.tt-tile.is-locked{background:color-mix(in srgb,var(--c) 62%,#fff)!important}
.tt-tile.is-locked .glyph{background:#fff;color:#162137}
.tt-tile.is-locked .tn{color:#162137}
.tt-tile.is-locked .td{color:#354358}
.tt-tile.is-locked .tm{background:#fff;color:#162137}
.lot.locked{background:#E7DEFF}
.lot.locked,.lot.locked .ls,.lot.locked .lstars{color:#354358}
.lv-mini{background:var(--tint-blue)}
.lv-mini .bar{background:#fff}
.tab[aria-selected="true"]{background:var(--grass)}
/* dos formas planas de color detrás del contenido */
body:not(.is-gate)::before,body:not(.is-gate)::after{content:"";display:block;position:fixed;border-radius:50%;pointer-events:none;z-index:0}
body:not(.is-gate)::before{width:min(46vw,620px);aspect-ratio:1;top:calc(min(46vw,620px) * -.32);right:calc(min(46vw,620px) * -.28);background:#FEF4CE;opacity:.7}
body:not(.is-gate)::after{width:min(40vw,540px);aspect-ratio:1;bottom:calc(min(40vw,540px) * -.34);left:calc(min(40vw,540px) * -.3);background:#DCEEFE;opacity:.65}
body:not(.is-gate) .shell,body:not(.is-gate) .site-foot{position:relative;z-index:1}
@media (max-width:760px){
body:not(.is-gate)::before{width:62vw;top:-34vw;right:-30vw}
body:not(.is-gate)::after{width:58vw;bottom:-32vw;left:-30vw}
}
@media (prefers-reduced-motion:no-preference){
body:not(.is-gate)::before{animation:bg-sway 9s ease-in-out infinite}
body:not(.is-gate)::after{animation:bg-sway 11s ease-in-out -4s infinite}
}
@keyframes bg-sway{0%,100%{transform:translateY(0)}50%{transform:translateY(18px)}}
/* si el script falla, la página aparece igual aunque "reducir movimiento" apague las animaciones */
@media (prefers-reduced-motion:reduce){body:not(.ready) .shell,body:not(.ready) .site-foot{animation:qvShow 1ms 3s forwards!important}}/* corrección: en celular y tablet la banda de temas va en una sola columna */
@media (max-width:900px){
#welcome>.qz-sec[aria-labelledby="lp-h-topics"]{grid-template-columns:minmax(0,1fr)}
#welcome>.qz-sec[aria-labelledby="lp-h-topics"] .qz-chips,#welcome>.qz-sec[aria-labelledby="lp-h-topics"] .qz-fig{grid-column:1;grid-row:auto}
}/* contraste: títulos de los textos legales en tinta (el azul pastel no llega a 4,5:1 sobre blanco) */
#privacy h3{color:var(--ink)}
/* =====================================================================
ESPACIOS DE PUBLICIDAD (Tarea 3): apagados por defecto (anuncios:false en config.js).
Apagados no se dibujan (o llevan hidden). Encendidos reservan una altura fija para que nada salte.
===================================================================== */
.ad-slot[hidden]{display:none!important}
.ad-slot{position:relative;display:flex;align-items:center;justify-content:center;width:100%;max-width:728px;height:90px;margin:8px auto;background:var(--white);border:1px dashed var(--sand);border-radius:var(--r-tile);overflow:hidden;contain:layout size}
.ad-slot .ad-lbl{position:absolute;top:6px;left:14px;font:500 .72rem var(--f-body);letter-spacing:.02em;color:var(--gray)}
#view-progress>.ad-slot{order:999;grid-column:1/-1}
.ad-progress{max-width:300px;height:250px}
.site-foot .ad-foot{margin:0 auto 18px;background:rgba(255,255,255,.6);border-color:#C3B0FF}
@media (max-width:760px){.ad-slot,.ad-progress{max-width:320px;height:100px}}
/* =====================================================================
CORRECCIÓN: el contenido ya no "desaparece" al bajar.
Antes cada sección de la portada (.rv) y sus tarjetas estaban en opacidad 0 hasta entrar en pantalla,
con dos animaciones encadenadas: al desplazarse, la zona inferior se veía vacía casi un segundo.
Ahora el contenido siempre es visible; solo queda un leve desplazamiento al llegar.
===================================================================== */
.js .rv,.js .rv.in{opacity:1!important}
html.js .rv:not(.in) :is(.qz-tile,.qz-steps li,.qz-chip,.qz-fig){opacity:1;transform:translateY(16px)}
.rv.in :is(.qz-tile,.qz-steps li,.qz-chip,.qz-fig){opacity:1;animation-name:a-lift}
@keyframes a-lift{from{transform:translateY(16px)}to{transform:none}}
@media (prefers-reduced-motion:reduce){.js .rv,html.js .rv:not(.in) :is(.qz-tile,.qz-steps li,.qz-chip,.qz-fig){transform:none}}/* CORRECCIÓN (24/10): la banda de "Doce temas" heredaba una sombra de 100vmax color arena con !important
que, sin el recorte (clip-path), tapaba toda la portada. El fondo de la banda lo pone solo el ::before. */
#welcome>.qz-sec[aria-labelledby="lp-h-topics"]{box-shadow:none!important}
/* =====================================================================
MARCA ESTRAIK: logo («E» con flecha) y palabra «ESTRAIK» iguales en todo el sitio
===================================================================== */
.mark{border-radius:13px;flex:none}
body .logo h1.lx-word,.site-foot .lx-word{font-family:var(--f-display);font-weight:600;letter-spacing:-.035em;color:var(--ink)}
body .logo h1.lx-word em,body.is-gate .logo h1.lx-word em,.site-foot .lx-word em{font:inherit;font-style:normal;color:#5A3FB0;background:none;padding:0;margin:0;border:0;transform:none;display:inline}
.lx-mark{display:inline-block;flex:none;width:1.15em;height:1.15em;vertical-align:-.2em;margin-right:.45em;border-radius:.3em}
.qhead h2 .lx-mark{width:30px;height:30px;vertical-align:-7px;margin-right:12px}
/* «ESTRAIK» va en mayúsculas: algo de aire entre letras */
body .logo h1.lx-word,.site-foot .lx-word,body.is-gate .logo h1.lx-word{letter-spacing:.03em}
/* el título de una ventana recibe el foco al abrirla (para lectores de pantalla); sin anillo, porque no es un control */
.qhead h2[tabindex="-1"]:focus{outline:none}
/* =====================================================================
ESPACIO DEL NOMBRE (bloque 3, 25/10): tarjeta del logo con formas planas de color,
lema en cápsula y el nombre siempre visible en celular
===================================================================== */
.tl-short{display:none}
@media (max-width:480px){.top-login .tl-long{display:none}.top-login .tl-short{display:inline}}
body.is-gate .logo{flex:0 1 auto;min-width:max-content}
body:not(.is-gate) .top{overflow:hidden;isolation:isolate}
@media (max-width:959px){body:not(.is-gate) .top{position:relative}}
body:not(.is-gate) .top::before,body:not(.is-gate) .top::after{content:"";position:absolute;border-radius:50%;z-index:-1;pointer-events:none}
body:not(.is-gate) .top::before{width:118px;height:118px;right:-40px;top:-46px;background:var(--tint-yellow)}
body:not(.is-gate) .top::after{width:46px;height:46px;right:34px;bottom:-22px;background:var(--tint-violet)}
body:not(.is-gate) .logo .mark{width:46px;height:46px;transition:transform .35s var(--ease-spring)}
body:not(.is-gate) .logo h1.lx-word{font-size:1.55rem;line-height:1.05}
body:not(.is-gate) .logo .badge{display:inline-flex;align-items:center;gap:6px;margin-top:6px;background:var(--cream);color:var(--ink);font:500 .74rem var(--f-body);letter-spacing:.01em;padding:4px 11px 4px 9px;border-radius:99px}
body:not(.is-gate) .logo .badge::before{content:"";width:6px;height:6px;border-radius:50%;background:#5ECF93;flex:none}
@media (hover:hover) and (pointer:fine){.logo[data-totop]:hover .mark{transform:rotate(-8deg) scale(1.06)}}
@media (max-width:959px){
body:not(.is-gate) .top{padding:12px 18px 12px 14px;border-radius:var(--r-pill)}
body:not(.is-gate) .logo .mark{width:44px;height:44px}
body:not(.is-gate) .logo h1.lx-word{font-size:1.3rem}
body:not(.is-gate) .logo .badge{margin-top:4px;padding:2px 9px 2px 7px;font-size:.7rem}
body:not(.is-gate) .top::before{width:84px;height:84px;right:-24px;top:-40px}
body:not(.is-gate) .top::after{display:none}
}
@media (prefers-reduced-motion:reduce){body:not(.is-gate) .logo .mark{transition:none}.logo[data-totop]:hover .mark{transform:none}}
/* =====================================================================
MI PERFIL (bloque 5, 25/10): tarjeta con iniciales, etiquetas de curso, rango y XP,
estado de sincronización discreto y "Mis datos" con enlaces y acciones separados
===================================================================== */
.pf>h3{margin:0}
.pf-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:16px 20px;background:var(--cream);border-radius:28px;padding:20px 22px}
.pf-av{width:68px;height:68px;border-radius:24px;display:grid;place-items:center;background:var(--violet);color:var(--ink);font:600 1.5rem var(--f-display);letter-spacing:-.02em}
.pf-name{margin:0 0 8px;font:600 clamp(1.25rem,2.2vw,1.55rem)/1.15 var(--f-display);letter-spacing:-.03em;color:var(--ink);overflow-wrap:anywhere}
.pf-tags{display:flex;flex-wrap:wrap;gap:6px}
.pf-tag{font:500 .8rem var(--f-body);background:var(--white);color:var(--ink);padding:4px 11px;border-radius:99px}
.pf-tag.t-rk{background:var(--tint-blue)}.pf-tag.t-xp{background:var(--tint-yellow)}
.pf-team{margin:0;min-width:160px;font-size:.88rem}
.pf-team select{background:var(--white)}
.pf-sync{display:flex;align-items:center;gap:10px;margin:0;font-size:.9rem;color:var(--gray)}
.pf-dot{flex:none;width:10px;height:10px;border-radius:50%;background:#E0A100}
.pf-sync.ok .pf-dot{background:#3F9A45}
.pf-links{display:flex;flex-wrap:wrap;gap:4px 18px}
.pf-link{font:500 .92rem var(--f-body);color:var(--ink);background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:5px;text-decoration-thickness:2px}
.pf-link:hover{text-decoration-color:var(--ink)}
.pf-acts{display:flex;flex-wrap:wrap;gap:8px;padding-top:16px;border-top:1px solid var(--hair)}
.btn.pf-danger{border-color:#B3261E;color:#9A1F18}
.btn.pf-danger:hover:not(:disabled){background:#FCE8E6}
.btn.pf-danger.is-confirm{background:#B3261E;color:#fff}
@media (max-width:640px){
.pf-card{grid-template-columns:auto minmax(0,1fr);padding:16px}
.pf-av{width:54px;height:54px;border-radius:18px;font-size:1.2rem}
.pf-team{grid-column:1/-1;min-width:0}
}
/* logo y nombre: llevan al inicio */
[data-totop]{cursor:pointer;border-radius:16px}
/* rueda del ratón: solo las ventanas que se desplazan por sí mismas retienen la rueda; el resto de paneles,
el menú lateral y el búho la pasan a la página (antes overflow:hidden + overscroll-behavior:contain la bloqueaban) */
.panel:not(.ovl):not(.lp-card),.top,.tabs,.side-owl,.side-art{overscroll-behavior:auto}
/* =====================================================================
DOCENTE: resumen arriba, accesos compactos y luego el desbloqueo
===================================================================== */
#view-teacher>#t-sum{order:0;grid-column:1/-1!important;height:auto!important;padding:0;background:transparent;border:0;box-shadow:none}
#view-teacher>#t-sum::before{display:none}
#view-teacher>#t-live{order:1}
#view-teacher>#t-course{order:2}
#view-teacher>#t-roster{order:3}
#view-teacher>#t-sessions{order:4}
#view-teacher>#t-new{order:5}
#view-teacher>#t-rand{order:6}
#view-teacher>#t-brand{order:7}
#view-teacher>#t-unlock{order:10}
.ts-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.ts-k{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0;padding:16px 18px;border:1.5px solid var(--hair);border-radius:24px;background:var(--white);color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:transform .2s ease,border-color .2s ease}
.ts-k:nth-child(1){background:var(--tint-violet)}.ts-k:nth-child(2){background:var(--tint-green)}.ts-k:nth-child(3){background:var(--tint-blue)}.ts-k:nth-child(4){background:var(--tint-yellow)}
.ts-k b{font:600 1.55rem/1.1 var(--f-display);letter-spacing:-.02em}
.ts-k span{font-weight:600;font-size:.95rem}
.ts-k small{font-size:.8rem;color:#43536C}
.ts-k:hover{border-color:var(--ink);transform:translateY(-2px)}
@media (prefers-reduced-motion:reduce){.ts-k,.ts-k:hover{transition:none;transform:none}}
@media (max-width:700px){.ts-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.ts-k{padding:12px 14px;border-radius:20px}.ts-k b{font-size:1.25rem}}
/* accesos plegados: rejilla compacta (3 columnas en pantallas anchas) */
@media (min-width:960px){
#view-teacher:not([hidden]){grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
#view-teacher>.panel.is-folded{grid-column:span 2!important}
#view-teacher>.panel:not(.is-folded){grid-column:1/-1!important}
}
@media (min-width:700px) and (max-width:959px){
#view-teacher:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;align-items:start}
#view-teacher>.panel.is-folded{grid-column:span 1}
#view-teacher>.panel:not(.is-folded){grid-column:1/-1}
}
#view-teacher>.panel.is-folded{height:68px;padding:18px 22px 0;border-radius:24px}
#view-teacher>.panel.is-folded>h2,#view-teacher>.panel.is-folded>.qhead h2,#view-teacher>.panel.is-folded>h3{font-size:1.08rem;min-height:30px}
#view-teacher>.panel.is-folded>h2::after,#view-teacher>.panel.is-folded>.qhead h2::after,#view-teacher>.panel.is-folded>h3::after{width:9px;height:9px;border-width:2px}
@media (max-width:699px){#view-teacher:not([hidden]){gap:10px}}
#view-teacher>.panel{scroll-margin-top:16px}
/* Cerrar sesión: siempre a la vista (menú lateral en computadora, barra superior en celular) */
.top-out{display:inline-flex;align-items:center;gap:8px;font:500 .9rem var(--f-body);color:var(--ink);background:var(--white);border:1.5px solid var(--ink);border-radius:var(--r-pill);padding:8px 16px 8px 13px;cursor:pointer;white-space:nowrap;position:relative;z-index:1;transition:background-color .2s ease,transform .2s ease}
.top-out[hidden],body.is-gate .top-out{display:none}
.top-out svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media (hover:hover) and (pointer:fine){.top-out:hover{background:var(--tint-pink)}}
.top-out:active{transform:scale(.96)}
@media (prefers-reduced-motion:reduce){.top-out{transition:none}.top-out:active{transform:none}}
@media (max-width:959px){body:not(.is-gate) .top{display:flex;align-items:center;gap:12px}body:not(.is-gate) .top-out{margin-left:auto}}
@media (max-width:420px){.top-out{padding:8px 12px}.top-out span{font-size:.82rem}}
@media (max-width:340px){.top-out span{display:none!important}.top-out{padding:9px}}
/* la tarjeta del logo crece ~46 px con el botón: el menú, el búho y la ilustración fijos bajan lo mismo para no montarse */
@media (min-width:960px){
body:not(.is-gate) .tabs{top:calc(var(--gut) + 216px)}
body:not(.is-gate) .side-art{top:calc(var(--gut) + 216px + 230px)}
body:not(.is-gate) .side-owl{top:calc(var(--gut) + 216px + 210px)}
body:not(.is-gate) .tabs:has(#tab-teacher:not([hidden]))~.side-owl{top:calc(var(--gut) + 216px + 290px)}
}
@media (max-width:959px){body:not(.is-gate) .top{flex-wrap:nowrap}body:not(.is-gate) .top .logo{min-width:0}}
.top-out .to-s{display:none}
@media (max-width:420px){.top-out .to-l{display:none}.top-out .to-s{display:inline}body:not(.is-gate) .top .badge{white-space:nowrap}}
/* =====================================================================
(base de piel de apoyo, 28/10/2026): solo piel. Crema durazno, tinta azul marino, pasteles suaves,
contornos de 3px y sombras duras tipo "sticker". Fredoka (titulos) y Nunito (texto), alojadas en vendor/.
No cambia estructura, distribucion, tamanos de seccion ni textos. Respaldo: tema.css.bak
===================================================================== */
:root{
--cream:#FFF1DC; --white:#FFFFFF; --sand:#FFE3BD; --hair:#EBD9BC;
--ink-b:#162137; --gray:#5B6F8A; --focus:#1C65C8;
--coral:#FF9484; --sky:#7DBDF2; --sun-y:#F9E8A7; --grass:#86DDBB; --violet:#B8A8F0; --peach:#FFAE72;
--bg:#FFF1DC; --ink:#162137; --ink2:#5B6F8A; --line:#162137;
--sun:#F9E8A7; --btn:#F9E8A7; --btn-ink:#162137; --lime:#86DDBB;
--a0:#FF9484; --a1:#7DBDF2; --a2:#F9E8A7; --a3:#86DDBB; --a4:#B8A8F0; --a5:#86D8E6; --a6:#FFAE72; --a7:#B9C6E6;
--good:#17653C; --bad:#B02B27; --good-soft:#DDF6EB; --bad-soft:#FFE2DF; --warn-soft:#FFF0BF;
--tint-blue:#BCDFF9; --tint-violet:#D9D0F7; --tint-yellow:#FFE59A; --tint-pink:#FFC9BE; --tint-green:#B8EBD5;
--f-display:"Fredoka","Trebuchet MS",system-ui,sans-serif; --f-body:"Nunito",system-ui,sans-serif;
--f-serif:"Fredoka","Nunito",system-ui,sans-serif; --f-mono:"Fredoka","Nunito",system-ui,sans-serif;
--r-card:24px; --r-tile:20px; --r-field:16px; --r-pill:999px;
--bd:3px solid #162137; --sh:0 5px 0 #162137; --sh-card:0 7px 0 #162137; --sh-sm:0 4px 0 #162137;
--pop:cubic-bezier(.3,1.6,.5,1);
}
/* ---------- fondo: crema con puntitos, garabatos y dos manchas suaves ---------- */
html{background-color:#FFF1DC;background-image:url("data:image/svg+xml,"),url("data:image/svg+xml,");background-size:420px 420px,26px 26px}
body,body.is-gate{background:transparent!important;background-image:none!important;color:var(--ink);font-family:var(--f-body);font-weight:700}
body.is-gate::before,body:not(.is-gate)::before,body.is-gate::after,body:not(.is-gate)::after{content:"";display:block;position:fixed;border-radius:50%;pointer-events:none;z-index:-1;aspect-ratio:auto;opacity:1}
body.is-gate::before,body:not(.is-gate)::before{width:520px;height:520px;left:-180px;top:-120px;right:auto;bottom:auto;background:radial-gradient(circle,rgba(255,148,132,.38),transparent 68%)}
body.is-gate::after,body:not(.is-gate)::after{width:560px;height:560px;right:-200px;bottom:-160px;left:auto;top:auto;background:radial-gradient(circle,rgba(125,189,242,.42),transparent 68%)}
@media (max-width:760px){
body.is-gate::before,body:not(.is-gate)::before{width:340px;height:340px;left:-130px;top:-90px}
body.is-gate::after,body:not(.is-gate)::after{width:360px;height:360px;right:-140px;bottom:-110px}
}
::selection{background:var(--sun-y);color:var(--ink-b)}
/* ---------- tipografia ---------- */
h1,h2,h3{font-family:var(--f-display);font-weight:700;letter-spacing:-.005em;color:var(--ink)}
.eyebrow{font:800 .86rem var(--f-body);color:var(--gray)}
.qz-title{font-weight:700;letter-spacing:-.02em}
.qz-sec h2{font-weight:700;letter-spacing:-.02em}
.qz-steps .qz-n,.qz-steps strong,.qz-tile h3,.qz-trust-list strong,.stat b,.tt-tile .tn,.lot .ln,.hub-head h2,.h-sec h2,.pg-main h2,.fb h3,.wl-course b,div.f>strong,.pf-name,.pf-av,.qz-marquee-in span{font-weight:700;letter-spacing:-.01em}
body .logo h1.lx-word,.site-foot .lx-word,body.is-gate .logo h1.lx-word{font-weight:700;letter-spacing:.03em}
.btn,.tab,.chip,.pill,.qz-chip,.cchip,.ptab,.uchip,.lp-nav button,.top-login,.brandchip,.toast,.tile,.tier,.rar,.badge,.gain,.pf-tag,.pf-link,.u-sb,.tt-tile .tm,.lot .lb,.stat span,.wl-course span,.tt-tile .td,.muted,label.f,div.f>span:first-child{font-weight:700}
.btn,.tab,.chip,.cchip,.ptab,.uchip,.toast,.gain,.tier,.rar{font-family:var(--f-display)}
.eyebrow,.rank th{text-transform:none;letter-spacing:0}
.rank th{font-family:var(--f-display);font-weight:700;color:var(--ink);border-bottom:3px solid var(--ink-b)}
.rank td{border-bottom:2px solid var(--hair)}
/* ---------- tarjetas: contorno 3px y sombra dura ---------- */
.panel,.lv-mini,.hub-head,.qcard,.fb,.passage,.lot,.tt-tile,.qz-tiles>.qz-tile,.qz-steps li,.qz-trust,.qz-contact,.pg-hero,.pf-card,.note.note-img,.tabs,.qz-fig,.unl{
border:var(--bd);box-shadow:var(--sh-card);border-radius:var(--r-card)}
.stat,.mis,.pth,.rankrow,.bdg2,.mi,.tok,.ordi,.review,.uTopic,.qed,.codeblk,.wl-course,.av,.team,.ck,.u-bar,.note,.cchip,.qr{
border:var(--bd);box-shadow:var(--sh-sm)}
.stat,.bdg2,.mis,.pth,.uTopic,.qed,.u-bar,.wl-course,.note{border-radius:var(--r-tile)}
.qz-mock,.qz-step-art{border:var(--bd);box-shadow:none;border-radius:var(--r-tile)}
.u-list{border:var(--bd);border-radius:var(--r-tile)}
.u-row+.u-row{border-top:2px solid var(--hair)}
.u-row:nth-child(even){background:#FFF8EC}
.pth{border-left:10px solid var(--c,var(--ink-b))}
.panel{background:#fff}
#view-teacher>#t-sum{border:0;box-shadow:none}
.qz-top.open .panel.lp-card,#login:not([hidden]),#privacy:not([hidden]){box-shadow:0 7px 0 #162137,0 0 0 100vmax rgba(22,33,55,.5)!important}
.ovl{background:var(--cream)}
.note{background:var(--warn-soft)}.note.ok{background:var(--good-soft)}.note.err{background:var(--bad-soft)}
.note.note-img{background:var(--tint-yellow);border-radius:var(--r-card);box-shadow:var(--sh-card)}
.lv-mini{background:var(--tint-blue)}
.lv-mini .eyebrow{color:var(--ink)}
.unl{background:#fff;border-radius:var(--r-tile);box-shadow:var(--sh-sm)}
.ck{background:#fff}
.ck-box{border:3px solid var(--ink-b);border-radius:8px;background:#fff}
.ck input:checked+.ck-box{background:var(--grass);border-color:var(--ink-b)}
.wl-course{background:#fff}
.wl-course[aria-pressed="true"]{background:var(--grass);border-color:var(--ink-b)}
@media (hover:hover) and (pointer:fine){.wl-course:hover{border-color:var(--ink-b);transform:translateY(-2px) rotate(-1deg)}}
.pf-card{background:#fff}
.pf-av{border:var(--bd);background:var(--violet)}
.pf-tag{border:2px solid var(--ink-b)}
.pf-link{text-decoration-color:var(--ink-b)}
.pf-acts{border-top:3px dashed var(--ink-b)}
.btn.pf-danger{border-color:var(--ink-b);color:#8E1F2C}
.btn.pf-danger.is-confirm{background:var(--coral);color:var(--ink-b)}
/* ---------- cabecera y pestanas ---------- */
.top,body.is-gate .top,body.is-gate.is-scrolled .top,body:not(.is-gate) .top{background:#fff;border:var(--bd);box-shadow:var(--sh-card)}
body.is-gate .top::after{background:var(--coral);opacity:1;height:5px;bottom:-4px;border-radius:5px}
body:not(.is-gate) .top::before{background:var(--tint-yellow)}
body:not(.is-gate) .top::after{background:var(--tint-blue)}
.brandchip{background:var(--tint-yellow);border:3px solid var(--ink-b);box-shadow:var(--sh-sm);color:var(--ink)}
body:not(.is-gate) .logo .badge{background:var(--tint-pink);border:2px solid var(--ink-b);color:var(--ink);font-family:var(--f-body);font-weight:800}
body:not(.is-gate) .logo .badge::before{background:var(--ink-b)}
.lp-nav button,.lp-nav button.is-active{color:var(--ink);font-weight:800}
.nav-ind{background:var(--tint-yellow);border:3px solid var(--ink-b)}
.tabs{background:#fff}
.tab{background:transparent;color:var(--ink);border:3px solid transparent;border-radius:var(--r-pill);font-weight:700}
@media (hover:hover) and (pointer:fine){.tab:hover{background:var(--tint-yellow);transform:translateY(-2px) rotate(-1deg)}}
.tab[aria-selected="true"]{background:var(--sun-y);color:var(--ink);border-color:var(--ink-b);box-shadow:var(--sh-sm)}
.tab:active{transform:translateY(3px);box-shadow:none}
@media (max-width:959px){body:not(.is-gate) .tabs{border:var(--bd);box-shadow:var(--sh)}}
/* ---------- botones ---------- */
.btn{font:700 1rem var(--f-display);background:var(--sun-y);color:var(--ink);border:var(--bd);border-radius:var(--r-pill);box-shadow:var(--sh)}
.btn.ghost,.btn.back{background:#fff;color:var(--ink);border:var(--bd)}
.btn.small{box-shadow:var(--sh-sm)}
.btn.danger{background:var(--coral);color:var(--ink);border:var(--bd)}
.btn.u-danger.is-confirm{background:var(--coral);border-color:var(--ink-b);color:var(--ink)}
.btn:disabled{opacity:.5;box-shadow:none;transform:none}
body.is-gate .top-login{background:var(--sun-y);color:var(--ink);border:var(--bd);box-shadow:var(--sh-sm);font-weight:700}
.top-login{font-family:var(--f-display)}
@media (hover:hover) and (pointer:fine){
.btn:hover:not(:disabled){transform:translateY(-3px) rotate(-1deg);box-shadow:0 8px 0 #162137;background:var(--sun-y)}
.btn.ghost:hover:not(:disabled),.btn.back:hover:not(:disabled){background:#fff;color:var(--ink)}
.btn.danger:hover:not(:disabled){background:var(--coral)}
.btn.small:hover:not(:disabled){box-shadow:0 6px 0 #162137}
body.is-gate .top-login:hover{background:var(--sun-y);color:var(--ink);transform:translateY(-3px) rotate(-1deg);box-shadow:0 7px 0 #162137}
}
.btn:active:not(:disabled){transform:translateY(5px);box-shadow:0 0 0 #162137}
.btn.small:active:not(:disabled){transform:translateY(3px);box-shadow:0 1px 0 #162137}
body.is-gate .top-login:active{transform:translateY(3px);box-shadow:0 1px 0 #162137}
.btn,.top-login,.tab,.tile,.tt-tile,.lot,.cchip,.ptab,.uchip,.qz-chip,.wl-course,.av,.team,.bdg2,.brandchip{
transition:transform var(--t-hover) var(--pop),box-shadow .12s ease,background-color .2s ease,border-color .2s ease,color .2s ease,opacity .2s ease}
/* ---------- formularios ---------- */
input[type=text],input[type=password],input[type=email],input[type=number],textarea,select{font:700 1rem var(--f-body);color:var(--ink);background:#fff;border:3px solid var(--ink-b);border-radius:var(--r-field)}
.panel input[type=text],.panel input[type=password],.panel select,.panel textarea,.lp-card input[type=text]{background:#fff}
input::placeholder,textarea::placeholder{color:var(--gray)}
input[type=text]:focus,input[type=password]:focus,textarea:focus,select:focus{border-color:var(--ink-b);outline:4px solid rgba(125,189,242,.6);outline-offset:0}
.chk input,.orow input[type=radio],input[type=checkbox]{accent-color:var(--coral)}
/* ---------- barras, fichas y avisos ---------- */
.bar,.tbar,.xpbar{height:16px;border:3px solid var(--ink-b);background:#fff;border-radius:99px;overflow:hidden}
.bar>i,.tbar>i,.xpbar>i,.bar.good>i{background:var(--grass)!important;border-radius:0}
.tbar>i{background:var(--sun-y)!important}.tbar>i.low{background:var(--coral)!important}
.hub-bar,.u-meter{height:16px;border:3px solid var(--ink-b);background:#fff}
.hub-bar i,.u-meter i{background:var(--grass)}
.lv-mini .bar,.lvl-b .bar{background:#fff;height:16px}
.chip,.chip.streak{background:#fff;color:var(--ink);border:2px solid var(--ink-b)}
.chip.streak{background:var(--peach)}
.chip.pts{background:var(--grass);color:var(--ink)}
.chip.tm{background:#fff}
.chip.tm.low{background:var(--coral);color:var(--ink);border-color:var(--ink-b)}
.pill{background:#fff;color:var(--ink);border:2px solid var(--ink-b)}
.pill.open{background:var(--good-soft);color:#0F5A44}.pill.closed{background:var(--warn-soft);color:#5E4300}
.tier,.rar{background:#fff;color:var(--ink);border:2px solid var(--ink-b)}
.badge{background:var(--coral);color:var(--ink);border:2px solid var(--ink-b)}
.bdg,.gain{background:var(--ink-b);color:var(--sun-y);border:0}
.toast{background:var(--coral);color:var(--ink);border:var(--bd);box-shadow:var(--sh);font:700 1rem var(--f-display);border-radius:var(--r-pill)}
.foot,.on-bg-muted,.muted,.panel .muted{color:var(--gray)}
.foot a{color:var(--ink)}
mark.pend{background:var(--warn-soft);color:#5E4300}
.ck-tx a,.qz-trust .small a{color:#1C65C8}
/* ---------- inicio del estudiante y lotes ---------- */
.tt-tile{background:var(--c,var(--a1))!important;color:var(--ink)!important;box-shadow:var(--sh-card)}
.tt-tile.c0{--c:#FF9484}.tt-tile.c1{--c:#7DBDF2}.tt-tile.c2{--c:#F9E8A7}.tt-tile.c3{--c:#86DDBB}
.tt-tile.c4{--c:#B8A8F0}.tt-tile.c5{--c:#86D8E6}.tt-tile.c6{--c:#FFAE72}.tt-tile.c7{--c:#B9C6E6}.tt-tile.cx{--c:#86DDBB}
.hub-ico.c0{--c:#FF9484}.hub-ico.c1{--c:#7DBDF2}.hub-ico.c2{--c:#F9E8A7}.hub-ico.c3{--c:#86DDBB}
.hub-ico.c4{--c:#B8A8F0}.hub-ico.c5{--c:#86D8E6}.hub-ico.c6{--c:#FFAE72}.hub-ico.c7{--c:#B9C6E6}
.hub-ico{border:var(--bd);box-shadow:var(--sh-sm)}
.tt-tile .glyph{background:#fff;border:3px solid var(--ink-b);border-radius:16px}
.tt-tile .tn,.tt-tile .td{color:var(--ink)}
.tt-tile .td{opacity:1}
.tt-tile .tm{background:#fff;color:var(--ink);border:2px solid var(--ink-b)}
.tt-tile.is-locked{background:color-mix(in srgb,var(--c) 55%,#fff)!important;border-style:dashed;box-shadow:none}
.tt-tile.is-locked .glyph{background:#fff;color:var(--ink)}
.tt-tile.is-locked .tn,.tt-tile.is-locked .td{color:var(--ink)}
.tt-tile.is-locked .tm{background:#fff;color:var(--ink)}
@media (hover:hover) and (pointer:fine){
.tt-tile:hover{background:var(--c,var(--a1))!important;transform:translateY(-5px) rotate(-1.5deg);box-shadow:0 11px 0 #162137}
.tt-tile.is-locked:hover{background:color-mix(in srgb,var(--c) 55%,#fff)!important;transform:rotate(-1deg);box-shadow:none}
.tgrid>.tt-tile:nth-child(even):hover,.lots>.lot:nth-child(even):hover{transform:translateY(-5px) rotate(1.5deg)}
}
.tt-tile:active{transform:translateY(5px);box-shadow:0 2px 0 #162137}
.lot{background:#fff;color:var(--ink);border-radius:var(--r-card);box-shadow:0 6px 0 #162137}
.lot:not(.locked):not(.done){box-shadow:0 6px 0 #162137}
.lot .ls,.lot .lb{color:var(--gray)}
.lot.done{background:var(--tint-green)}
.lot.done .ls,.lot.done .lb{color:var(--ink)}
.lot.locked,.lot.locked:hover{background:rgba(22,33,55,.06)!important;border:3px dashed rgba(22,33,55,.55);box-shadow:none;transform:none}
.lot.locked,.lot.locked .ls,.lot.locked .lstars,.lot.locked .lb{color:#3F5470}
@media (hover:hover) and (pointer:fine){.lot:not(.locked):hover{transform:translateY(-4px) rotate(-1.5deg);box-shadow:0 10px 0 #162137}}
.lot:not(.locked):active{transform:translateY(5px);box-shadow:0 1px 0 #162137}
/* ---------- juego ---------- */
.qcard{box-shadow:0 8px 0 #162137;font-weight:700;color:var(--ink)}
.tile{background:#fff!important;color:var(--ink)!important;border:var(--bd);border-radius:var(--r-tile);box-shadow:var(--sh);font:800 1.08rem/1.3 var(--f-body)}
.tile.t0{background:var(--coral)!important}.tile.t1{background:var(--sky)!important}.tile.t2{background:var(--sun-y)!important}.tile.t3{background:var(--grass)!important}
.tile .shape,.tile.t0 .shape,.tile.t1 .shape,.tile.t2 .shape,.tile.t3 .shape{background:#fff;color:var(--ink);border:3px solid var(--ink-b);border-radius:50%;font-family:var(--f-display)}
@media (hover:hover) and (pointer:fine){.tile:hover:not(:disabled){transform:translateY(-4px) rotate(-1deg);border-color:var(--ink-b);box-shadow:0 9px 0 #162137}}
.tile:active:not(:disabled){transform:translateY(5px);box-shadow:0 1px 0 #162137}
.tile.sel{outline:0;border-color:var(--ink-b);box-shadow:0 0 0 4px #fff,0 0 0 7px var(--ink-b),var(--sh)}
.tile.dim{opacity:.45}
.tile.right{outline:0;border-color:var(--ink-b);box-shadow:0 0 0 4px #fff,0 0 0 7px var(--ink-b),0 5px 0 7px var(--ink-b)}
.tile.wrong{border-color:var(--ink-b);border-style:dashed}
.tile.right::after,.tile.wrong::after{border:3px solid var(--ink-b)}
.tile.right::after{background:var(--grass);color:var(--ink)}.tile.wrong::after{background:var(--coral);color:var(--ink)}
.fb.ok{background:var(--tint-green)}.fb.no{background:var(--tint-pink)}
.passage{background:#fff;box-shadow:var(--sh)}
.stat{background:#fff}
.stat b{font-family:var(--f-display);font-weight:700}
.stat span{color:var(--gray);text-transform:none;letter-spacing:0}
.sumgrid .stat:nth-child(1){background:var(--tint-blue)}.sumgrid .stat:nth-child(2){background:var(--tint-yellow)}
.sumgrid .stat:nth-child(3){background:var(--tint-pink)}.sumgrid .stat:nth-child(4){background:var(--tint-green)}
.sumgrid .stat span{color:var(--ink)}
.bigpts{font-family:var(--f-display);font-weight:700;color:var(--coral);-webkit-text-stroke:2px var(--ink-b);paint-order:stroke fill}
.stars3 span{color:#fff;-webkit-text-stroke:2px var(--ink-b)}
.stars3 span.on{color:var(--sun-y)}
.mi{background:#fff;color:var(--ink);border:var(--bd);border-radius:var(--r-field)}
.mi.sel{background:var(--tint-blue);border-color:var(--ink-b)}.mi.done{background:var(--good-soft);border-color:var(--ink-b)}.mi.bad{background:var(--bad-soft);border-color:var(--ink-b)}
.blank{background:var(--cream);color:var(--ink);border-bottom-color:var(--ink-b)}
.blank.fill{background:var(--tint-blue)}.blank.ok{background:var(--good-soft)}.blank.no{background:var(--bad-soft)}
.cchip{background:#fff;color:var(--ink);border:var(--bd);border-radius:var(--r-pill);font-weight:700}
@media (hover:hover) and (pointer:fine){.cchip:hover:not(:disabled){background:var(--grass)}}
.tok,.ordi{background:#fff;color:var(--ink);border:var(--bd);border-radius:var(--r-field)}
.tok.ok,.ordi.ok{background:var(--good-soft);border-color:var(--ink-b)}.tok.no,.ordi.no{background:var(--bad-soft);border-color:var(--ink-b)}
.review{background:#fff;border-radius:var(--r-tile)}
.codebox{font-family:var(--f-display);font-weight:700;color:var(--ink)}
.qed,.codeblk{background:var(--cream);color:var(--ink)}
.av,.team{background:#fff;color:var(--ink);border-radius:var(--r-tile)}
.av[aria-pressed="true"],.team[aria-pressed="true"]{background:var(--tint-pink);border-color:var(--ink-b);box-shadow:0 0 0 4px var(--coral),0 4px 0 4px var(--ink-b)}
@media (hover:hover) and (pointer:fine){.av:hover,.team:hover{transform:translateY(-3px) rotate(-3deg)}}
.rankrow{background:#fff;border-radius:var(--r-field)}
.rankrow.me{background:var(--warn-soft)}
.pod .blk{border:var(--bd);border-bottom:0;border-radius:var(--r-tile) var(--r-tile) 0 0;font-family:var(--f-display);color:var(--ink)}
.pod.p1 .blk{background:var(--sun-y)}.pod.p2 .blk{background:#C9D3EA}.pod.p3 .blk{background:var(--peach)}
.qr{background:#fff;border-radius:var(--r-field)}
/* ---------- Mi progreso ---------- */
.pg-hero{background:linear-gradient(135deg,#46688F,#162137);color:#fff;box-shadow:0 8px 0 #162137}
.pg-hero,.pg-hero *{color:#fff}
.pg-main .eyebrow,.pg-hero .eyebrow,.pg-xp,.pg-next{color:#fff!important}
.pg-main .eyebrow{color:var(--sun-y)!important}
.pg-main h2{font-family:var(--f-display);font-weight:700}
.pg-hero .xpbar{background:#fff}.pg-hero .xpbar>i{background:var(--sun-y)!important}
.pg-hero .chip,.pg-hero .chip *{background:#fff;color:var(--ink-b)}
.pg-hero .chip svg{background:transparent}
.mis{background:var(--tint-blue)}.mis.done{background:var(--tint-green)}
.wd b{background:#fff;border:3px solid var(--ink-b);color:var(--ink)}.wd.on b{background:var(--grass)}
.wd.now b{outline:3px solid var(--coral)}
.pth{background:#fff}
.ld{background:#fff;border:3px solid var(--ink-b);color:var(--ink)}
.ld.s1{background:#E8A87A;border-color:var(--ink-b)}.ld.s2{background:#C9D3EA;border-color:var(--ink-b)}.ld.s3{background:var(--sun-y);border-color:var(--ink-b)}
.ld.open{border-style:dashed;border-color:var(--ink-b)}
.ptab{background:#fff;color:var(--ink);border:3px solid var(--ink-b);border-radius:var(--r-pill);font-weight:700}
.ptab[aria-pressed="true"]{background:var(--ink-b);color:#fff}
.bdg2{background:#fff}
.bdg2.r-r{background:var(--tint-blue)}.bdg2.r-e{background:var(--tint-violet)}.bdg2.r-l{background:var(--tint-yellow)}
.bdg2.off{background:#EEF1F6;border-color:#8795AD;box-shadow:none;opacity:.85;filter:none}
.uTopic{background:var(--cream)}
.uchip{background:#fff;border:3px solid var(--ink-b);border-radius:12px;color:var(--ink);font-family:var(--f-display);font-weight:700}
.uchip.on{background:var(--grass);border-color:var(--ink-b);color:var(--ink)}
.u-bar{background:var(--cream)}
.u-sb{background:#fff;color:var(--ink);font-weight:700}
.u-sb:disabled{background:#F6EDDD;color:#4A5F7C}
.u-seg{border:3px solid var(--ink-b)}.u-sb+.u-sb{border-left:3px solid var(--ink-b)}
.u-ic{border:2px solid var(--ink-b)}
/* ---------- portada ---------- */
.qz-sub,.qz-checks li,.qz-steps p,.qz-contact p,.qz-trust p,.qz-trust-list p,.qz-tile p{color:var(--ink)}
.qz-tile.t-blue{--tint:#7DBDF2}.qz-tile.t-indigo{--tint:#B8A8F0}.qz-tile.t-yellow{--tint:#F9E8A7}.qz-tile.t-pink{--tint:#FF9484}
.qz-mock .m-podium span{color:var(--ink);border:3px solid var(--ink-b);border-bottom:0}
.qz-mock .m-podium span:nth-child(1){background:var(--violet)}.qz-mock .m-podium span:nth-child(2){background:var(--sun-y)}.qz-mock .m-podium span:nth-child(3){background:var(--coral)}
.qz-mock .m-medals span{border:3px solid var(--ink-b)}
.qz-checks li svg{background:var(--grass);border:2px solid var(--ink-b);color:var(--ink)}
.qz-chip{background:#fff;color:var(--ink);border:var(--bd);box-shadow:var(--sh-sm);font-weight:700}
.qz-chip svg{color:var(--ink)}
@media (hover:hover) and (pointer:fine){.qz-chip:hover{background:var(--tint-green);transform:translateY(-3px) rotate(-1.5deg)}}
.qz-step-art{background:var(--tint-blue)}
.qz-steps li:nth-child(2) .qz-step-art{background:var(--tint-yellow)}.qz-steps li:nth-child(3) .qz-step-art{background:var(--tint-pink)}
.qz-steps .qz-n,.qz-steps li:nth-child(2) .qz-n,.qz-steps li:nth-child(3) .qz-n{background:#fff;border:3px solid var(--ink-b)}
.qz-steps li{background:#fff}
.qz-trust{background:#fff}
.qz-contact{background:var(--tint-green)}
.qz-fig{background:var(--tint-violet)}
.fc-f,.fc-b{border:3px solid var(--ink-b);color:var(--ink);font-weight:700}
.fc.f1 .fc-f{background:var(--coral)}.fc.f2 .fc-f{background:var(--sky)}.fc.f3 .fc-f{background:var(--sun-y)}.fc.f4 .fc-f{background:var(--grass)}
.fc.f5 .fc-b{background:var(--coral)}.fc.f6 .fc-b{background:var(--sky)}
.fc-b small{color:var(--ink)}
.qz-marquee{background:var(--violet);color:var(--ink-b);border-block:3px solid var(--ink-b)}
#welcome>.qz-sec[aria-labelledby="lp-h-topics"]::before{background:#C5E3FA;border-block:3px solid var(--ink-b)}
.site-foot{background:#DDD4FF!important;color:var(--ink);border-top:3px solid var(--ink-b)}
.site-foot a{color:var(--ink)}
#privacy h3{color:var(--ink)}
.side-owl::before{background:var(--tint-yellow);border:3px solid var(--ink-b)}
.side-owl::after{background:rgba(22,33,55,.15)}
.pi-pop::before{background:var(--tint-yellow);border:3px solid var(--ink-b)}
.panel-img.sm .pi-pop::before{background:var(--tint-blue)}
.ad-slot{border:3px dashed var(--ink-b);background:#fff}
/* ---------- movimiento: entrada "pop" y rebote ---------- */
@keyframes pop2{0%{transform:scale(.7) rotate(-4deg);opacity:0}70%{transform:scale(1.05) rotate(1deg);opacity:1}100%{transform:none;opacity:1}}
@keyframes star-bounce{0%{transform:scale(0) rotate(-40deg)}100%{transform:none}}
@media (prefers-reduced-motion:no-preference){
.tt-tile,.lot,.bdg2,.qcard,.tile,.stat{animation:pop2 .45s var(--pop) backwards}
.tgrid>:nth-child(2n),.lots>:nth-child(2n){animation-delay:.05s}.tgrid>:nth-child(3n),.lots>:nth-child(3n){animation-delay:.1s}.tgrid>:nth-child(4n),.lots>:nth-child(4n){animation-delay:.15s}
.tile:nth-child(2){animation-delay:.06s}.tile:nth-child(3){animation-delay:.12s}.tile:nth-child(4){animation-delay:.18s}
.stars3 span.on{animation:star-bounce .6s var(--pop) both}.stars3 span.on:nth-child(2){animation-delay:.12s}.stars3 span.on:nth-child(3){animation-delay:.24s}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media print{html{background-image:none}body::before,body::after{display:none}}
/* contraste: el texto "Por jugar" (amarillo oscuro, 5,5:1 sobre blanco) */
.lot .lstars{color:#8F5F00}
.lot.locked .lstars{color:#3F5470}
/* estrellas (SVG): contorno de tinta; apagadas en blanco hueso, encendidas en mantequilla */
.stars3 span{color:#F4EAD8}
.stars3 span.on{color:var(--sun-y)}
.stars3 span svg{stroke:var(--ink-b);stroke-width:1.6px;stroke-linejoin:round}
.tile.dim{opacity:.6}
/* =====================================================================
COMPENSACION DE CONTORNOS: los bordes de 3px no deben agrandar las cajas ni mover la distribucion;
se resta el borde al relleno (padding) de las piezas principales.
===================================================================== */
.btn{padding:10px 21px}
.btn.small{padding:5px 13px}
.btn.big{padding:14px 29px}
.btn.back{padding:7px 16px 7px 12px}
.wl-go{padding:10px 21px}
.lp-card .wl-go{padding:10px 21px}
body.is-gate .top-login{padding:8px 17px 8px 19px}
body.is-gate .top,body.is-gate.is-scrolled .top{padding:8px 10px 8px 18px}
body.is-gate.is-scrolled .top{padding-block:4px}
body:not(.is-gate) .top{padding:19px}
.tabs{padding:7px}
.tab{padding:9px 17px}
body:not(.is-gate) .tab{padding:11px 17px}
@media (max-width:959px){
body:not(.is-gate) .top{padding:9px 15px 9px 11px}
body:not(.is-gate) .tabs{padding:5px}
body:not(.is-gate) .tab{padding:8px 3px}
}
@media (max-width:640px){
body.is-gate .top{padding:5px 5px 5px 11px}
body.is-gate .top-login{padding:6px 11px 6px 13px}
}
.panel{padding:calc(clamp(22px,3vw,32px) - 3px)}
.panel.lp-card,.lp-card.panel{padding:calc(clamp(20px,2.6vw,30px) - 3px)}
.panel-img{padding:calc(clamp(22px,3vw,32px) - 3px)}
.lv-mini{padding:17px 25px}
.hub-head{padding:19px 23px}
.qcard{padding:calc(clamp(26px,4vw,48px) - 3px)}
.fb,.passage{padding:21px 25px}
.stat{padding:15px 19px}
.lot{padding:15px}
.tt-tile{padding:19px}
.qz-tiles>.qz-tile{padding:11px 11px 25px}
.qz-steps li{padding:11px 11px 27px}
#welcome>.qz-trust,#welcome>.qz-contact{padding:calc(clamp(26px,3.4vw,40px) - 3px)}
.pg-hero{padding:calc(clamp(26px,4vw,48px) - 3px)}
.pf-card{padding:17px 19px}
.qz-chip{padding:11px 19px}
.qz-fig{padding:calc(clamp(14px,2vw,26px) - 3px)}
.chip,.chip.streak{padding:4px 12px}
.wl-course{min-height:0}
.note{padding:11px 17px}
@media (max-width:640px){.pf-card{padding:13px}}
.qz-marquee{padding:calc(clamp(18px,2.4vw,30px) - 3px) 0}
/* contraste: el texto secundario sobre fondos de color va en tinta */
.bdg2 .muted,.bdg2 .small,.mis .muted,.mis .small,.stat .muted,.lv-mini .muted,.fb .muted,.note .muted,.qz-contact .muted,.u-bar .muted,.pth .muted,.uTopic .muted,.pf-card .muted{color:var(--ink)}
/* =====================================================================
OLAS 2 (28/10/2026): fondo marino en capas, tinta #162137, acentos vivos, contornos de 3px y sombras duras.
Solo piel: no cambia estructura, orden ni textos. Respaldo: tema.css.bak (original).
Solo se animan transform y opacity.
===================================================================== */
:root{
--cream:#E8F7F5; --sand:#CDD5E0; --hair:#CDD5E0; --field:#E8F7F5;
--ink-b:#162137; --ink:#162137; --ink2:#3F6A6C; --gray:#3F6A6C; --line:#162137; --focus:#162137;
--coral:#FF6B6B; --sky:#2DB7E8; --sun-y:#FDDB7C; --grass:#4ADE80; --violet:#22D3C5; --peach:#FF8A3D;
--sun:#FDDB7C; --btn:#FDDB7C; --btn-ink:#162137; --lime:#4ADE80; --sea:#0E5A5F;
--a0:#FF8A3D; --a1:#2DB7E8; --a2:#F7B83D; --a3:#4ADE80; --a4:#22D3C5; --a5:#7FD8F5; --a6:#FDDB7C; --a7:#8FC3BC;
--good:#17653C; --bad:#B02B27; --good-soft:#D1F8E1; --bad-soft:#FFE2DF; --warn-soft:#FEF4CE;
--tint-blue:#CDEFFA; --tint-violet:#C8F3EE; --tint-yellow:#FEF4CE; --tint-pink:#FFE2C9; --tint-green:#D1F8E1;
--bd:3px solid #162137; --sh:0 5px 0 #162137; --sh-card:0 7px 0 #162137; --sh-sm:0 4px 0 #162137;
--eo:cubic-bezier(.23,1,.32,1); --pop:cubic-bezier(.23,1,.32,1);
--bub:url("data:image/svg+xml,");
--olas:url("data:image/svg+xml,");
}
/* ---------- fondo marino en capas (detras de todo el contenido) ---------- */
html{background:radial-gradient(70% 50% at 85% 0%,#1A8E8E 0%,transparent 60%),linear-gradient(180deg,#0A4A50 0%,#0E5A5F 50%,#13727A 100%) fixed;background-color:#0A4A50;background-size:auto}
body,body.is-gate{background:transparent!important;background-image:none!important;padding-bottom:96px}
html::before{content:"";position:fixed;left:0;right:0;top:-520px;bottom:0;z-index:-1;pointer-events:none;background:var(--bub) repeat;background-size:520px 520px;animation:sube 70s linear infinite;will-change:transform}
@keyframes sube{from{transform:translateY(520px)}to{transform:translateY(0)}}
body.is-gate::before,body:not(.is-gate)::before{display:none}
body.is-gate::after,body:not(.is-gate)::after{content:"";display:block;position:fixed;left:0;right:auto;top:auto;bottom:0;width:calc(100% + 1200px);height:190px;border-radius:0;aspect-ratio:auto;background:var(--olas) repeat-x;background-size:1200px 100%;opacity:.95;z-index:-1;pointer-events:none;animation:olaA 60s linear infinite;will-change:transform}
@keyframes olaA{to{transform:translateX(-1200px)}}
html::after{content:"";position:fixed;left:0;bottom:0;width:calc(100% + 1200px);height:120px;z-index:-1;pointer-events:none;background:var(--olas) repeat-x;background-size:1200px 100%;opacity:.7;animation:olaB 42s linear infinite reverse;will-change:transform}
@keyframes olaB{to{transform:translateX(-1200px)}}
@media (prefers-reduced-motion:reduce){html::before,html::after,body.is-gate::after,body:not(.is-gate)::after{animation:none!important}}
@media print{html::before,html::after,body::after{display:none!important}}
/* ---------- texto directo sobre el fondo marino: blanco ---------- */
.qz-title,.qz-sub,.qz-checks li,.h-sec h2,.qz-sec h2{color:#fff}
.on-bg-muted,.on-bg-muted.small,.foot,.foot a{color:#D4F1EE}
.qz-trust h2,.qz-contact h2,#welcome>.qz-sec[aria-labelledby="lp-h-topics"] h2{color:var(--ink)}
:focus-visible{outline:3px solid #FDDB7C;outline-offset:3px}
.panel :focus-visible,.top :focus-visible,.tabs :focus-visible,.qz-trust :focus-visible,.qz-contact :focus-visible,.qz-tile :focus-visible,.site-foot :focus-visible,#welcome>.qz-sec[aria-labelledby="lp-h-topics"] :focus-visible{outline-color:#162137}
::selection{background:#FDDB7C;color:#162137}
/* ---------- colores vivos por tema, respuestas y tarjetas ---------- */
.tt-tile.c0{--c:#FF8A3D}.tt-tile.c1{--c:#2DB7E8}.tt-tile.c2{--c:#F7B83D}.tt-tile.c3{--c:#4ADE80}
.tt-tile.c4{--c:#22D3C5}.tt-tile.c5{--c:#7FD8F5}.tt-tile.c6{--c:#FDDB7C}.tt-tile.c7{--c:#8FC3BC}.tt-tile.cx{--c:#FDDB7C}
.hub-ico.c0{--c:#FF8A3D}.hub-ico.c1{--c:#2DB7E8}.hub-ico.c2{--c:#F7B83D}.hub-ico.c3{--c:#4ADE80}
.hub-ico.c4{--c:#22D3C5}.hub-ico.c5{--c:#7FD8F5}.hub-ico.c6{--c:#FDDB7C}.hub-ico.c7{--c:#8FC3BC}
.tile.t0{background:#FF8A3D!important}.tile.t1{background:#2DB7E8!important}.tile.t2{background:#F7B83D!important}.tile.t3{background:#4ADE80!important}
.qz-tile.t-blue{--tint:#2DB7E8}.qz-tile.t-indigo{--tint:#22D3C5}.qz-tile.t-yellow{--tint:#F7B83D}.qz-tile.t-pink{--tint:#FF8A3D}
.qz-mock .m-podium span:nth-child(1){background:#22D3C5}.qz-mock .m-podium span:nth-child(2){background:#FDDB7C}.qz-mock .m-podium span:nth-child(3){background:#FF8A3D}
.fc.f1 .fc-f{background:#FF8A3D}.fc.f2 .fc-f{background:#2DB7E8}.fc.f3 .fc-f{background:#F7B83D}.fc.f4 .fc-f{background:#4ADE80}
.fc.f5 .fc-b{background:#FF8A3D}.fc.f6 .fc-b{background:#2DB7E8}
.pod.p1 .blk{background:#FDDB7C}.pod.p2 .blk{background:#BFE8E4}.pod.p3 .blk{background:#FF8A3D}
.stars3 span.on{color:#F7B83D}
.bigpts{color:#FDDB7C}
.lv-mini{background:#fff}
.sumgrid .stat:nth-child(3){background:var(--tint-pink)}
.fb.no{background:var(--bad-soft)}
.badge,body:not(.is-gate) .logo .badge{background:#22D3C5;color:var(--ink)}
body:not(.is-gate) .logo .badge::before{background:var(--ink)}
.toast{background:#FDDB7C;color:var(--ink)}
.top::after,body.is-gate .top::after{background:#22D3C5}
body:not(.is-gate) .top::before{background:#FEF4CE}
body:not(.is-gate) .top::after{background:#C8F3EE}
.nav-ind{background:#FDDB7C}
.qz-marquee{background:#22D3C5;color:var(--ink)}
.qz-marquee-in span::after{background:var(--ink)!important;opacity:.55}
#welcome>.qz-sec[aria-labelledby="lp-h-topics"]::before{background:#CDEFFA}
.site-foot{background:#22D3C5!important;color:var(--ink)}
.side-owl::before{background:#FEF4CE}
.pi-pop::before{background:#FEF4CE}
.pg-hero{background:linear-gradient(135deg,#0F7478,#0B4A50);box-shadow:0 8px 0 #162137}
.pf-av{background:#22D3C5}
.pod .blk,.fc-b small{color:var(--ink)}
.tile.dim{opacity:.75}
/* ---------- estados elegidos: amarillo con aro turquesa (el rojo/coral solo para errores) ---------- */
.wl-course[aria-pressed="true"]{background:#FDDB7C;border-color:var(--ink);box-shadow:0 0 0 4px #22D3C5,0 4px 0 4px var(--ink)}
.av[aria-pressed="true"],.team[aria-pressed="true"],.team.sel,.team.on{background:#FDDB7C!important;color:var(--ink)!important;border-color:var(--ink)!important;box-shadow:0 0 0 4px #22D3C5,0 4px 0 4px var(--ink)!important}
.tile.sel{box-shadow:0 0 0 4px #FDDB7C,0 0 0 8px #22D3C5,var(--sh)}
.mi.sel{background:#FDDB7C;border-color:var(--ink);box-shadow:0 0 0 3px #22D3C5}
.ptab[aria-pressed="true"]{background:#FDDB7C;color:var(--ink);box-shadow:0 0 0 3px #22D3C5}
.ck input:checked+.ck-box{background:#FDDB7C;border-color:var(--ink)}
.wd.on b{background:#4ADE80}
.wd.now b{outline:3px solid #22D3C5}
.chk input,.orow input[type=radio],input[type=checkbox]{accent-color:#22D3C5}
input[type=text]:focus,input[type=password]:focus,textarea:focus,select:focus{border-color:var(--ink);outline:4px solid rgba(34,211,197,.55);outline-offset:0}
.tab:hover,.qz-chip:hover{background-color:#FEF4CE}
.av:hover,.team:hover{background-color:#fff}
/* ---------- temas y lotes bloqueados: vidrio translucido ---------- */
.tt-tile.is-locked,.tt-tile.is-locked:hover{background:rgba(255,255,255,.07)!important;border:3px dashed rgba(255,255,255,.4);box-shadow:none;color:#E6F7F5!important;transform:none}
.tt-tile.is-locked .tn,.tt-tile.is-locked .td,.tt-tile.is-locked .glyph{color:#E6F7F5}
.tt-tile.is-locked .glyph{background:rgba(255,255,255,.14);border:2px dashed rgba(255,255,255,.4)}
.tt-tile.is-locked .tm{background:rgba(255,255,255,.14);color:#E6F7F5;border:2px dashed rgba(255,255,255,.4)}
.lot.locked,.lot.locked:hover{background:rgba(255,255,255,.07)!important;border:3px dashed rgba(255,255,255,.4);box-shadow:none;transform:none}
.lot.locked,.lot.locked .ln,.lot.locked .ls,.lot.locked .lstars,.lot.locked .lb{color:#E6F7F5}
/* ---------- barra de pestanas fija abajo (ya existia en tu diseno): capsula oscura con la activa en amarillo ---------- */
@media (max-width:959px){
body:not(.is-gate) .tabs{background:rgba(8,48,52,.94);border:3px solid rgba(255,255,255,.25);box-shadow:none;border-radius:999px}
body:not(.is-gate) .tab{background:transparent;color:#D4F1EE;border:3px solid transparent;box-shadow:none}
body:not(.is-gate) .tab[aria-selected="true"]{background:#FDDB7C;color:#162137;border-color:#FDDB7C;box-shadow:none}
}
/* ---------- movimiento suave: solo transform y opacity ---------- */
.btn,.top-login,.tab,.tile,.tt-tile,.lot,.cchip,.ptab,.uchip,.qz-chip,.wl-course,.av,.team,.bdg2,.brandchip,.chip,.mi,.tok,.ordi,.lp-nav button,.ck{
transition:transform .2s var(--eo),opacity .2s var(--eo)}
@media (hover:hover) and (pointer:fine){
.btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 7px 0 #162137}
.btn.small:hover:not(:disabled){box-shadow:0 6px 0 #162137}
body.is-gate .top-login:hover{transform:translateY(-2px);box-shadow:0 6px 0 #162137}
.tab:hover{transform:translateY(-2px)}
.wl-course:hover{transform:translateY(-2px)}
.tt-tile:hover,.tgrid>.tt-tile:nth-child(even):hover{transform:translateY(-3px);box-shadow:0 10px 0 #162137}
.tt-tile.is-locked:hover{transform:none;box-shadow:none}
.lot:not(.locked):hover,.lots>.lot:nth-child(even):hover{transform:translateY(-3px);box-shadow:0 9px 0 #162137}
.tile:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 8px 0 #162137}
.av:hover,.team:hover{transform:translateY(-2px)}
.qz-chip:hover{transform:translateY(-2px)}
}
.btn:active:not(:disabled),.btn.small:active:not(:disabled),body.is-gate .top-login:active{transform:scale(.97) translateY(3px);box-shadow:0 1px 0 #162137;transition-duration:.06s}
.tab:active,.tt-tile:active,.lot:not(.locked):active,.tile:active:not(:disabled){transform:scale(.97);transition-duration:.06s}
@keyframes pop2{from{transform:translateY(12px);opacity:0}to{transform:none;opacity:1}}
@keyframes star-bounce{from{transform:scale(.7);opacity:0}to{transform:none;opacity:1}}
@keyframes nudge{20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}to{transform:none}}
@keyframes acierto{0%{transform:scale(.98)}45%{transform:scale(1.03)}to{transform:scale(1)}}
@media (prefers-reduced-motion:no-preference){
.tt-tile,.lot,.bdg2,.qcard,.tile,.stat{animation:pop2 .4s var(--eo) backwards}
.tgrid>:nth-child(2),.lots>:nth-child(2){animation-delay:40ms}.tgrid>:nth-child(3),.lots>:nth-child(3){animation-delay:80ms}
.tgrid>:nth-child(4),.lots>:nth-child(4){animation-delay:120ms}.tgrid>:nth-child(5),.lots>:nth-child(5){animation-delay:160ms}
.tgrid>:nth-child(6),.lots>:nth-child(6){animation-delay:200ms}.tgrid>:nth-child(7),.lots>:nth-child(7){animation-delay:240ms}
.tgrid>:nth-child(8),.lots>:nth-child(8){animation-delay:280ms}.tgrid>:nth-child(9),.lots>:nth-child(9){animation-delay:320ms}
.tgrid>:nth-child(10),.lots>:nth-child(10){animation-delay:360ms}.tgrid>:nth-child(11),.lots>:nth-child(11){animation-delay:400ms}
.tgrid>:nth-child(12),.lots>:nth-child(12){animation-delay:440ms}
.tile:nth-child(2){animation-delay:40ms}.tile:nth-child(3){animation-delay:80ms}.tile:nth-child(4){animation-delay:120ms}.tile:nth-child(5){animation-delay:160ms}
.tile.wrong{animation:nudge .36s var(--eo) both}
.tile.right{animation:acierto .5s var(--eo) both}
.stars3 span.on{animation:star-bounce .4s var(--eo) both}
.stars3 span.on:nth-child(2){animation-delay:80ms}.stars3 span.on:nth-child(3){animation-delay:160ms}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
/* texto secundario dentro de tarjetas blancas: gris oscuro (no el claro del fondo marino) */
.panel .on-bg-muted,.hub-head .on-bg-muted,.hub-head p,.lv-mini .on-bg-muted,.note .on-bg-muted,.unl .on-bg-muted{color:var(--gray)}
.btn.small.ghost,.btn.small.ghost.back{background:#fff;color:var(--ink);border:var(--bd);box-shadow:var(--sh-sm)}
.btn.small.ghost:active:not(:disabled){transform:scale(.97) translateY(3px);box-shadow:0 1px 0 #162137}
@media (hover:hover) and (pointer:fine){.btn.small.ghost:hover:not(:disabled),.btn.small.ghost.back:hover:not(:disabled){background:#fff;color:var(--ink);transform:translateY(-2px);box-shadow:0 6px 0 #162137}}
.tile.dim{opacity:1;filter:saturate(.4) brightness(1.08)}
/* contraste: rotulo del panel de rango en blanco; puntaje grande en tinta */
.pg-main .eyebrow{color:#fff!important}
.bigpts{color:var(--ink);-webkit-text-stroke:0}
/* =====================================================================
PAPEL CREMA x OLAS 2 (28/10/2026): los colores del tema original (crema, tarjetas blancas, tinta #162137,
pasteles verde/azul/coral/amarillo/violeta) con todo lo de Olas 2 (contornos, sombras sticker, tipografias,
olas, burbujas, animaciones y barra movil). Solo cambia el color; nada de estructura.
===================================================================== */
:root{
--cream:#F8F3E8; --sand:#E7DDCA; --hair:#CDD5E0; --field:#FFFFFF;
--ink-b:#162137; --ink:#162137; --ink2:#43536C; --gray:#43536C; --line:#162137; --focus:#1C65C8;
--coral:#F89A92; --sky:#9AD4FF; --sun-y:#FDDB7C; --grass:#9BE9BB; --violet:#C2B1F8; --peach:#FFC48E;
--sun:#FDDB7C; --btn:#FDDB7C; --btn-ink:#162137; --lime:#9BE9BB;
--a0:#FFD1D5; --a1:#C2E2FF; --a2:#F9E8A7; --a3:#B3EECD; --a4:#DDD4FF; --a5:#B3EEF4; --a6:#FED7BA; --a7:#E7DBC3;
--good:#17653C; --bad:#B02B27; --good-soft:#D1F8E1; --bad-soft:#FFE2DF; --warn-soft:#FFF3D0;
--tint-blue:#DCEEFE; --tint-violet:#DDD4FF; --tint-yellow:#FEF4CE; --tint-pink:#FEE4E6; --tint-green:#D6F8E4;
--bub:url("data:image/svg+xml,");
--olas:url("data:image/svg+xml,");
}
/* ---------- fondo en capas, ahora en crema ---------- */
html{background:radial-gradient(70% 50% at 85% 0%,#FFF6C8 0%,transparent 60%),linear-gradient(180deg,#F8F3E8 0%,#F8F3E8 50%,#F0E9D9 100%) fixed;background-color:#F8F3E8;background-size:auto}
/* ---------- texto directo sobre el fondo: tinta ---------- */
.qz-title,.qz-sub,.qz-checks li,.h-sec h2,.qz-sec h2{color:var(--ink)}
.on-bg-muted,.on-bg-muted.small,.foot,.foot a{color:var(--gray)}
.foot a{color:var(--ink)}
.qz-trust h2,.qz-contact h2,#welcome>.qz-sec[aria-labelledby="lp-h-topics"] h2{color:var(--ink)}
:focus-visible{outline:3px solid #1C65C8;outline-offset:3px}
.panel :focus-visible,.top :focus-visible,.tabs :focus-visible,.qz-trust :focus-visible,.qz-contact :focus-visible,.qz-tile :focus-visible,.site-foot :focus-visible,#welcome>.qz-sec[aria-labelledby="lp-h-topics"] :focus-visible{outline-color:#1C65C8}
::selection{background:#9BE9BB;color:#162137}
/* ---------- colores por tema, respuestas y tarjetas (pasteles originales) ---------- */
.tt-tile.c0{--c:#FFD1D5}.tt-tile.c1{--c:#C2E2FF}.tt-tile.c2{--c:#F9E8A7}.tt-tile.c3{--c:#B3EECD}
.tt-tile.c4{--c:#DDD4FF}.tt-tile.c5{--c:#B3EEF4}.tt-tile.c6{--c:#FED7BA}.tt-tile.c7{--c:#E7DBC3}.tt-tile.cx{--c:#B3EECD}
.hub-ico.c0{--c:#FFD1D5}.hub-ico.c1{--c:#C2E2FF}.hub-ico.c2{--c:#F9E8A7}.hub-ico.c3{--c:#B3EECD}
.hub-ico.c4{--c:#DDD4FF}.hub-ico.c5{--c:#B3EEF4}.hub-ico.c6{--c:#FED7BA}.hub-ico.c7{--c:#E7DBC3}
.tile.t0{background:#FED7BA!important}.tile.t1{background:#C2E2FF!important}.tile.t2{background:#F9E8A7!important}.tile.t3{background:#B3EECD!important}
.qz-tile.t-blue{--tint:#C2E2FF}.qz-tile.t-indigo{--tint:#DDD4FF}.qz-tile.t-yellow{--tint:#F9E8A7}.qz-tile.t-pink{--tint:#FFD1D5}
.qz-mock .m-podium span:nth-child(1){background:#C9BFF2}.qz-mock .m-podium span:nth-child(2){background:#FFE98A}.qz-mock .m-podium span:nth-child(3){background:#F6C4B8}
.fc.f1 .fc-f{background:#FFD1D5}.fc.f2 .fc-f{background:#C2E2FF}.fc.f3 .fc-f{background:#F9E8A7}.fc.f4 .fc-f{background:#B3EECD}
.fc.f5 .fc-b{background:#FFD1D5}.fc.f6 .fc-b{background:#C2E2FF}
.pod.p1 .blk{background:#FDDB7C}.pod.p2 .blk{background:#E7DDCA}.pod.p3 .blk{background:#FFD6CC}
.stars3 span.on{color:#FDDB7C}
.stars3 span{color:#FFFFFF}
.bigpts{color:var(--ink)}
.badge,body:not(.is-gate) .logo .badge{background:#C2B1F8;color:var(--ink)}
.toast{background:#FDDB7C;color:var(--ink)}
.top::after,body.is-gate .top::after{background:#5ECF93}
body:not(.is-gate) .top::before{background:#FEF4CE}
body:not(.is-gate) .top::after{background:#DDD4FF}
.nav-ind{background:#FDDB7C}
.qz-marquee{background:#C2B1F8;color:var(--ink)}
#welcome>.qz-sec[aria-labelledby="lp-h-topics"]::before{background:#CDE6FB}
.site-foot{background:#DDD4FF!important;color:var(--ink)}
.side-owl::before{background:#FEF4CE}
.pi-pop::before{background:#FEF4CE}
.pf-av{background:#C2B1F8}
.tab:hover,.qz-chip:hover{background-color:#FEF4CE}
.qz-chip:hover{background-color:#D6F8E4}
/* panel de rango: verde pastel con tinta, como el original */
.pg-hero{background:#9BE9BB;box-shadow:0 8px 0 #162137}
.pg-hero,.pg-hero *{color:var(--ink)}
.pg-main .eyebrow,.pg-hero .eyebrow,.pg-xp,.pg-next{color:var(--ink)!important}
.pg-hero .xpbar{background:#fff}.pg-hero .xpbar>i{background:var(--ink)!important}
.pg-hero .chip,.pg-hero .chip *{background:#fff;color:var(--ink)}
/* ---------- estados elegidos: amarillo con aro azul (el coral/rojo solo para errores) ---------- */
.wl-course[aria-pressed="true"]{background:#FDDB7C;border-color:var(--ink);box-shadow:0 0 0 4px #1C65C8,0 4px 0 4px var(--ink)}
.av[aria-pressed="true"],.team[aria-pressed="true"],.team.sel,.team.on{background:#FDDB7C!important;color:var(--ink)!important;border-color:var(--ink)!important;box-shadow:0 0 0 4px #1C65C8,0 4px 0 4px var(--ink)!important}
.tile.sel{box-shadow:0 0 0 4px #FDDB7C,0 0 0 8px #1C65C8,var(--sh)}
.mi.sel{background:#FDDB7C;border-color:var(--ink);box-shadow:0 0 0 3px #1C65C8}
.ptab[aria-pressed="true"]{background:#FDDB7C;color:var(--ink);box-shadow:0 0 0 3px #1C65C8}
.ck input:checked+.ck-box{background:#FDDB7C;border-color:var(--ink)}
.wd.on b{background:#9BE9BB}
.wd.now b{outline:3px solid #1C65C8}
.chk input,.orow input[type=radio],input[type=checkbox]{accent-color:#1C65C8}
input[type=text]:focus,input[type=password]:focus,textarea:focus,select:focus{border-color:var(--ink);outline:4px solid rgba(28,101,200,.35);outline-offset:0}
.av:hover,.team:hover{background-color:#fff}
/* ---------- bloqueados: vidrio translucido sobre crema ---------- */
.tt-tile.is-locked,.tt-tile.is-locked:hover{background:rgba(22,33,55,.06)!important;border:3px dashed rgba(22,33,55,.4);box-shadow:none;color:var(--ink)!important;transform:none}
.tt-tile.is-locked .tn,.tt-tile.is-locked .td,.tt-tile.is-locked .glyph{color:var(--ink)}
.tt-tile.is-locked .glyph{background:rgba(22,33,55,.08);border:2px dashed rgba(22,33,55,.4)}
.tt-tile.is-locked .tm{background:rgba(22,33,55,.08);color:var(--ink);border:2px dashed rgba(22,33,55,.4)}
.lot.locked,.lot.locked:hover{background:rgba(22,33,55,.06)!important;border:3px dashed rgba(22,33,55,.4);box-shadow:none;transform:none}
.lot.locked,.lot.locked .ln,.lot.locked .ls,.lot.locked .lstars,.lot.locked .lb{color:var(--ink)}
/* ---------- barra de pestanas fija abajo: capsula de tinta con la activa en amarillo ---------- */
@media (max-width:959px){
body:not(.is-gate) .tabs{background:rgba(22,33,55,.95);border:3px solid rgba(255,255,255,.2)}
body:not(.is-gate) .tab{color:#F8F3E8}
body:not(.is-gate) .tab[aria-selected="true"]{background:#FDDB7C;color:#162137;border-color:#FDDB7C}
}
/* sin burbujas: se apaga la capa de burbujas del fondo (quedan degradado y olas) */
html::before{display:none!important;animation:none!important}
/* =====================================================================
LOGOTIPO NUEVO (ESTRAIK con la A en flecha) y amarillo mas suave
- El logotipo es un SVG propio (trazo grueso redondeado, currentColor); el texto del h1 queda solo para lectores de pantalla.
- El amarillo deja de ser el color de seleccion y de hover: ahora el boton principal es verde pastel y lo
seleccionado va en azul claro con aro azul. El amarillo queda para estrellas, podio, un tema y las chispas del logo.
===================================================================== */
.wordmark{display:block;flex:none;width:auto;color:var(--ink)}
.logo .wordmark{height:44px}
body:not(.is-gate) .logo .wordmark{height:62px}
body.is-gate .logo .wordmark{height:52px}
.sf-brand .wordmark{height:56px}
.logo .lx-word,.sf-brand .lx-word{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:640px){body.is-gate .logo .wordmark{height:38px}}
:root{--sun:#9BE9BB;--sun-y:#9BE9BB;--btn:#9BE9BB;--warn-soft:#FEF4CE;--tint-yellow:#FEF4CE;--sel:#C9E5FF;--hov:#E4F2FE}
html{background:radial-gradient(70% 50% at 85% 0%,#E4F2FE 0%,transparent 60%),linear-gradient(180deg,#F8F3E8 0%,#F8F3E8 50%,#F0E9D9 100%) fixed;background-color:#F8F3E8}
.tab[aria-selected="true"]{background:var(--sel);color:var(--ink)}
.tab:hover,.tab:hover:not([aria-selected="true"]){background-color:var(--hov)}
.nav-ind{background:#DCEEFE}
.lp-nav button.is-active{background:transparent}
.wl-course[aria-pressed="true"]{background:var(--sel)}
.av[aria-pressed="true"],.team[aria-pressed="true"],.team.sel,.team.on{background:var(--sel)!important}
.tile.sel{box-shadow:0 0 0 4px #C9E5FF,0 0 0 8px #1C65C8,var(--sh)}
.mi.sel{background:var(--sel)}
.ptab[aria-pressed="true"]{background:var(--sel)}
.ck input:checked+.ck-box{background:var(--sel)}
.toast{background:#9BE9BB}
.ld.s3{background:#FDDB7C}
body:not(.is-gate) .top::before{background:#DCEEFE}
@media (hover:hover) and (pointer:fine){
.btn:hover:not(:disabled),body.is-gate .top-login:hover{background:#B2F3CC}
.btn.ghost:hover:not(:disabled),.btn.back:hover:not(:disabled),.btn.small.ghost:hover:not(:disabled){background:#fff}
.btn.danger:hover:not(:disabled){background:var(--coral)}
}
@media (max-width:959px){
body:not(.is-gate) .tab[aria-selected="true"]{background:#B5DDFF;color:#162137;border-color:#B5DDFF}
}
/* =====================================================================
ARMONIA DE COLOR (28/10/2026): paleta derivada del logo, en OKLCH.
- Tinta = azul marino del logo (#162137); neutros calidos y tintados; ambar solo como chispa (estrellas, podio, logo).
- Pasteles de una misma familia (L ~0.90, C ~0.06-0.075; tonos: rosa 12, durazno 58, mantequilla 95, menta 160, agua 205, cielo 245, lila 295).
- Accion principal: menta; seleccion: cielo claro con aro azul; errores: coral/rojo; texto secundario teñido de azul.
===================================================================== */
:root{
--ink:#162137; --ink-b:#162137; --ink2:#43536C; --gray:#43536C; --line:#162137;
--cream:#F8F3E8; --sand:#E7DDCA; --hair:#CDD5E0; --focus:#1C65C8;
--sun:#9BE9BB; --sun-y:#9BE9BB; --btn:#9BE9BB; --grass:#9BE9BB; --lime:#9BE9BB;
--sky:#C2E2FF; --violet:#C2B1F8; --coral:#F89A92; --peach:#FED7BA;
--good:#17653C; --bad:#B02B27; --good-soft:#D1F8E1; --bad-soft:#FFE2DF; --warn-soft:#FFF3D0;
--tint-blue:#DCEEFE; --tint-violet:#ECE8FE; --tint-yellow:#FEF4CE; --tint-pink:#FEE4E6; --tint-green:#D6F8E4;
--sel:#C9E5FF; --hov:#E4F2FE; --amber:#F7B83D;
}
/* superficies del navegador con la paleta: seleccion, cursor, barra de desplazamiento */
::selection{background:#C9E5FF;color:#162137}
input,textarea,select{caret-color:#1C65C8}
html{scrollbar-color:#B8C3D4 transparent;scrollbar-width:thin}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:#B8C3D4;border-radius:99px;border:3px solid #F8F3E8}
::-webkit-scrollbar-track{background:transparent}
/* texto secundario sobre pasteles: del color de la tinta, no gris */
.tt-tile .td,.tt-tile .tm,.qz-tile p,.stat span,.fc-b small{color:#162137}
.muted,.panel .muted,.foot,.on-bg-muted{color:#43536C}
/* tamaño del logotipo (imagen propia con fondo transparente) */
.logo .wordmark{height:50px}
body.is-gate .logo .wordmark{height:60px}
body:not(.is-gate) .logo .wordmark{height:72px}
.sf-brand .wordmark{height:64px}
@media (max-width:640px){body.is-gate .logo .wordmark{height:44px}}
@media (max-width:959px){body:not(.is-gate) .logo .wordmark{height:54px}}
/* un solo contorno de tinta alrededor de la tarjeta de explicacion (sin borde izquierdo de color) */
.fb.ok,.fb.no,.fb{border-left-color:var(--ink)}
/* celular: el lema "Razonamiento Verbal" se oculta en la barra de la app para que el logo no choque con "Salir" */
@media (max-width:640px){body:not(.is-gate) .logo .badge{display:none}body:not(.is-gate) .logo .wordmark{height:50px}}
/* =====================================================================
LOGOTIPO (foco con plumilla) y CONTROLES CON LOS COLORES ORIGINALES (28/10/2026)
- Botones: coral con tinta (como el diseño original); seleccionado: verde pastel; hover de pestañas: crema.
- Sin aros azules ni amarillos en lo seleccionado. El resto de la paleta armonica se mantiene.
===================================================================== */
.lx-mark,.qhead h2 .lx-mark{width:auto;height:32px;border-radius:0;vertical-align:-9px}
.logo .wordmark{height:46px}
body.is-gate .logo .wordmark{height:56px}
body:not(.is-gate) .logo .wordmark{height:54px}
.sf-brand .wordmark{height:56px}
@media (max-width:959px){body:not(.is-gate) .logo .wordmark{height:46px}}
@media (max-width:640px){body.is-gate .logo .wordmark{height:40px}body:not(.is-gate) .logo .wordmark{height:42px}}
:root{--sun:#B4EBA3;--sun-y:#FFA390;--btn:#FFA390;--grass:#B4EBA3;--lime:#B4EBA3;--sel:#B4EBA3;--hov:#F5F1E4}
/* boton principal: coral con tinta */
.btn,.btn:hover:not(:disabled){background:#FFA390;color:var(--ink)}
@media (hover:hover) and (pointer:fine){.btn:hover:not(:disabled){background:#FFA797}}
.btn.ghost,.btn.back,.btn.small.ghost,.btn.ghost:hover:not(:disabled),.btn.back:hover:not(:disabled),.btn.small.ghost:hover:not(:disabled){background:#fff;color:var(--ink)}
.btn.danger,.btn.danger:hover:not(:disabled){background:#B02B27;color:#fff}
.btn.u-danger.is-confirm,.btn.pf-danger.is-confirm{background:#B02B27;border-color:var(--ink);color:#fff}
.toast{background:var(--ink);color:#fff}
.gain,.bdg{background:var(--warn-soft);color:var(--ink)}
.tbar>i{background:#B4EBA3!important}.tbar>i.low{background:#FFA390!important}
/* acceso docente de la portada: oscuro con texto blanco, como el original */
body.is-gate .top-login,body.is-gate .top-login:hover{background:var(--ink);color:#fff}
@media (hover:hover) and (pointer:fine){body.is-gate .top-login:hover{background:#43536C;color:#fff}}
/* seleccion: verde pastel con contorno de tinta (sin aros) */
.tab[aria-selected="true"]{background:#B4EBA3;color:var(--ink)}
.tab:hover:not([aria-selected="true"]),.tab:hover{background-color:#F5F1E4}
.tab[aria-selected="true"]:hover{background-color:#B4EBA3}
.nav-ind{background:#F5F1E4;border:3px solid var(--ink)}
.wl-course[aria-pressed="true"]{background:#B4EBA3;border-color:var(--ink);box-shadow:var(--sh-sm)}
.av[aria-pressed="true"],.team[aria-pressed="true"],.team.sel,.team.on{background:#B4EBA3!important;color:var(--ink)!important;border-color:var(--ink)!important;box-shadow:var(--sh-sm)!important}
.tile.sel{box-shadow:var(--sh)}
.mi.sel{background:#E5F3FF;border-color:var(--ink);box-shadow:none}
.ptab[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.ck input:checked+.ck-box{background:#7BC27A;border-color:#17653C}
.wd.now b{outline:3px solid var(--ink)}
.chk input,.orow input[type=radio],input[type=checkbox]{accent-color:var(--ink)}
input[type=text]:focus,input[type=password]:focus,textarea:focus,select:focus{border-color:var(--ink);outline:3px solid rgba(28,101,200,.3);outline-offset:0}
@media (max-width:959px){
body:not(.is-gate) .tab[aria-selected="true"]{background:#B4EBA3;color:var(--ink);border-color:#B4EBA3}
}
/* logotipo nuevo (ESTRAIK recto, con chispas, sonrisa y estrella): alturas por pantalla */
.logo .wordmark{height:56px}
body.is-gate .logo .wordmark{height:58px}
body:not(.is-gate) .logo .wordmark{height:86px}
.sf-brand .wordmark{height:72px}
@media (max-width:959px){body:not(.is-gate) .logo .wordmark{height:56px}}
@media (max-width:640px){body.is-gate .logo .wordmark{height:46px}body:not(.is-gate) .logo .wordmark{height:50px}}
.lx-mark,.qhead h2 .lx-mark{width:auto;height:34px;border-radius:0;vertical-align:-10px}
/* logotipo un poco mas grande en la barra superior de la portada */
body.is-gate .logo .wordmark{height:68px}
@media (max-width:640px){body.is-gate .logo .wordmark{height:50px}}
/* =====================================================================
EQUILIBRIO DEL LOGOTIPO (28/10/2026): tamano, aire y alineacion acordes al resto de la pagina
- Portada: el logotipo es la pieza de marca de la barra; mas aire arriba y a los lados para que las chispas no toquen el borde.
- Barra lateral: logotipo y rotulo alineados a la izquierda con la misma separacion entre ellos que el resto de la tarjeta.
- Pie: logotipo y texto alineados por la linea base, sin saltos.
===================================================================== */
body.is-gate .top{padding:10px 14px 10px 28px}
body.is-gate .logo .wordmark{height:74px;margin-block:-2px}
body.is-gate .lp-nav button{padding-block:12px}
body:not(.is-gate) .logo{align-items:flex-start;gap:6px}
body:not(.is-gate) .logo .wordmark{height:74px;margin-left:-4px}
body:not(.is-gate) .logo-tx{gap:0}
body:not(.is-gate) .logo .badge{margin-top:2px}
.sf-brand{align-items:center;gap:18px}
.sf-brand .wordmark{height:76px}
.sf-brand p{margin:0}
@media (max-width:959px){body:not(.is-gate) .logo .wordmark{height:58px;margin-left:0}}
@media (max-width:640px){body.is-gate .top{padding:6px 8px 6px 16px}body.is-gate .logo .wordmark{height:52px}body:not(.is-gate) .logo .wordmark{height:52px}}
body.is-gate.is-scrolled .logo .wordmark{height:62px;margin-block:0}
body.is-gate .logo .wordmark{transition:transform .25s var(--eo)}
/* =====================================================================
DISEÑO «FOTO» (desde 28/10/2026). Va después del tema anterior y lo reemplaza en piel:
base suave compartida + colores y portada de Foto + ilustraciones. Cambiar de paleta = editar el bloque :root --k-* de Foto.
===================================================================== */
/* =====================================================================
BASE "SUAVE" COMPARTIDA POR LAS SKINS DE PRUEBA (foto y noche)
Solo piel: se carga DESPUES de tema.css. Quita contornos gruesos y sombras duras del diseno actual
y los cambia por bordes finos, sombras difusas y esquinas muy redondeadas.
Todo el color sale de las variables --k-* que define cada skin.
===================================================================== */
:root{
--ink:var(--k-ink); --ink-b:var(--k-ink); --ink2:var(--k-ink2); --gray:var(--k-ink2); --line:var(--k-line);
--f-display:var(--k-display); --f-body:var(--k-body);
--focus:var(--k-focus); --cream:var(--k-surface2); --hair:var(--k-line);
--good:var(--k-good); --bad:var(--k-bad); --good-soft:var(--k-good-soft); --bad-soft:var(--k-bad-soft);
--white:var(--k-surface); --r-card:30px; --r-tile:24px; --r-field:16px;
--bd:1px solid var(--k-line); --sh:var(--k-shadow-sm); --sh-sm:var(--k-shadow-sm); --sh-card:var(--k-shadow);
}
html{background:var(--k-bg) fixed;background-color:var(--k-bg-solid)}
body,body.is-gate{color:var(--k-ink)}
body.is-gate::after,body:not(.is-gate)::after,html::before,html::after{display:none!important;animation:none!important}
h1,h2,h3{font-family:var(--k-display);color:var(--k-ink);font-weight:600;letter-spacing:-.02em}
body{font-family:var(--k-body);font-weight:500}
/* ---------- tarjetas ---------- */
.panel,.lv-mini,.hub-head,.qcard,.fb,.passage,.lot,.qz-tiles>.qz-tile,.qz-steps li,.qz-trust,.qz-contact,.pf-card,.note.note-img,.tabs,.qz-fig,.unl,.top,body.is-gate .top,body.is-gate.is-scrolled .top,body:not(.is-gate) .top{
border:1px solid var(--k-line)!important;box-shadow:var(--k-shadow)!important;border-radius:var(--r-card)!important;background:var(--k-surface)!important;color:var(--k-ink)}
.stat,.mis,.pth,.rankrow,.bdg2,.mi,.tok,.ordi,.review,.uTopic,.qed,.codeblk,.wl-course,.av,.team,.ck,.u-bar,.note,.qr{
border:1px solid var(--k-line)!important;box-shadow:none!important;border-radius:var(--r-tile)!important;background:var(--k-surface2)!important;color:var(--k-ink)}
.top,body.is-gate .top{border-radius:999px!important}
body:not(.is-gate) .top{border-radius:30px!important}
.tabs{border-radius:30px!important}
.qz-mock,.qz-step-art,.u-list{border:0!important;box-shadow:none!important;border-radius:var(--r-tile)!important}
.panel.lp-card,#login,#privacy{background:var(--k-surface)!important}
.qz-top.open .panel.lp-card,#login:not([hidden]),#privacy:not([hidden]){box-shadow:0 30px 80px -20px rgba(0,0,0,.45),0 0 0 100vmax var(--k-overlay)!important}
.ovl{background:var(--k-bg-solid)}
.muted,.panel .muted,.small.muted,.foot,.on-bg-muted,.qz-sub{color:var(--k-ink2)}
.u-row:nth-child(even){background:var(--k-surface2)}
.u-list{border:1px solid var(--k-line)!important}
/* ---------- botones: pildora, sin sombra dura ---------- */
.btn{font:600 .98rem var(--k-display);background:var(--k-primary);color:var(--k-primary-ink);border:1px solid transparent!important;border-radius:999px;padding:12px 26px;box-shadow:var(--k-shadow-sm)!important;letter-spacing:0}
.btn.small{padding:8px 18px;font-size:.88rem}
.btn.big{padding:16px 34px;font-size:1.05rem}
.btn.ghost,.btn.back,.btn.small.ghost{background:var(--k-surface)!important;color:var(--k-ink)!important;border:1px solid var(--k-line)!important;box-shadow:none!important}
.btn.danger,.btn.u-danger.is-confirm,.btn.pf-danger.is-confirm{background:var(--k-bad)!important;color:#fff!important;border-color:transparent!important}
.btn:disabled{opacity:.45;box-shadow:none!important}
@media (hover:hover) and (pointer:fine){
.btn:hover:not(:disabled){background:var(--k-primary-hover);color:var(--k-primary-ink);transform:translateY(-2px);box-shadow:var(--k-shadow)!important}
.btn.ghost:hover:not(:disabled),.btn.back:hover:not(:disabled),.btn.small.ghost:hover:not(:disabled){background:var(--k-hover)!important;color:var(--k-ink)!important;transform:translateY(-2px);box-shadow:none!important}
}
.btn:active:not(:disabled){transform:scale(.97);box-shadow:none!important}
body.is-gate .top-login,body.is-gate .top-login:hover{background:var(--k-primary)!important;color:var(--k-primary-ink)!important;border:1px solid transparent!important;box-shadow:none!important;font-family:var(--k-display);font-weight:600}
@media (hover:hover) and (pointer:fine){body.is-gate .top-login:hover{background:var(--k-primary-hover)!important}}
.toast{background:var(--k-ink);color:var(--k-surface);border:0;box-shadow:var(--k-shadow)!important}
.top-out{background:var(--k-surface2)!important;color:var(--k-ink)!important;border:1px solid var(--k-line-strong)!important;border-radius:999px;box-shadow:none!important}
@media (hover:hover) and (pointer:fine){.top-out:hover{background:var(--k-hover)!important}}
.gain,.bdg{background:var(--k-surface2)!important;color:var(--k-ink)!important;border:1px solid var(--k-line)!important}
/* ---------- pestanas y navegacion ---------- */
.tab{background:transparent;color:var(--k-ink2);border:1px solid transparent!important;border-radius:999px;font-family:var(--k-display);font-weight:500;padding:11px 18px;box-shadow:none!important}
@media (hover:hover) and (pointer:fine){.tab:hover,.tab:hover:not([aria-selected="true"]){background-color:var(--k-hover);color:var(--k-ink);transform:none}}
.tab[aria-selected="true"],.tab[aria-selected="true"]:hover{background:var(--k-sel);color:var(--k-sel-ink);box-shadow:none!important}
.lp-nav button,.lp-nav button.is-active{color:var(--k-ink2)!important;font-family:var(--k-display);font-weight:500}
.lp-nav button:hover,.lp-nav button.is-active{color:var(--k-ink)!important}
.wl-n,.qz-n{background:var(--k-sel);color:var(--k-sel-ink)}
.nav-ind{background:var(--k-hover);border:0!important}
.brandchip{background:var(--k-surface2);border:1px solid var(--k-line)!important;box-shadow:none!important;color:var(--k-ink)}
body.is-gate .top::after{display:none}
body:not(.is-gate) .top::before,body:not(.is-gate) .top::after{background:var(--k-hover)}
@media (max-width:959px){
body:not(.is-gate) .tabs{background:var(--k-bar)!important;border:1px solid var(--k-bar-line)!important;box-shadow:0 18px 40px -12px rgba(0,0,0,.45)!important;border-radius:999px!important}
body:not(.is-gate) .tab{color:var(--k-bar-ink);border:1px solid transparent!important}
body:not(.is-gate) .tab[aria-selected="true"]{background:var(--k-bar-sel)!important;color:var(--k-bar-sel-ink)!important;border-color:transparent!important}
}
/* ---------- formularios ---------- */
input[type=text],input[type=password],input[type=email],input[type=number],textarea,select,.panel input[type=text],.panel input[type=password],.panel select,.panel textarea,.lp-card input[type=text]{
font:500 1rem var(--k-body);color:var(--k-ink);background:var(--k-field)!important;border:1px solid var(--k-line-strong)!important;border-radius:var(--r-field);padding:13px 16px;box-shadow:none}
input::placeholder,textarea::placeholder{color:var(--k-ink2);opacity:.8}
input[type=text]:focus,input[type=password]:focus,textarea:focus,select:focus{border-color:var(--k-focus)!important;outline:3px solid var(--k-focus-ring);outline-offset:0}
.ck-box{background:var(--k-field);border:1.5px solid var(--k-line-strong);border-radius:7px}
.ck input:checked+.ck-box{background:var(--k-sel);border-color:var(--k-sel)}
.ck-tx a,.qz-trust .small a{color:var(--k-link)}
.chk input,.orow input[type=radio],input[type=checkbox]{accent-color:var(--k-sel)}
:focus-visible{outline:2.5px solid var(--k-focus);outline-offset:3px}
/* ---------- barras, fichas ---------- */
.bar,.tbar,.xpbar,.hub-bar,.u-meter{height:10px;border:0!important;background:var(--k-track)!important;border-radius:99px;box-shadow:none}
.bar>i,.tbar>i,.xpbar>i,.hub-bar i,.u-meter i,.bar.good>i{background:var(--k-fill)!important;border-radius:99px}
.tbar>i.low{background:var(--k-bad)!important}
.lv-mini .bar,.lvl-b .bar{height:10px;background:var(--k-track)!important}
.chip,.chip.streak,.chip.pts,.chip.tm,.pill,.tier,.rar,.badge,.pf-tag{background:var(--k-surface2);color:var(--k-ink);border:1px solid var(--k-line)!important;font-family:var(--k-body);font-weight:600;box-shadow:none}
.chip.pts,.pill.open{background:var(--k-good-soft);color:var(--k-good);border-color:transparent!important}
.chip.tm.low{background:var(--k-bad-soft);color:var(--k-bad)}
.pill.closed{background:var(--k-warn-soft);color:var(--k-warn)}
.note{background:var(--k-warn-soft)!important;border-color:transparent!important}.note.ok{background:var(--k-good-soft)!important}.note.err{background:var(--k-bad-soft)!important}
.note.note-img{background:var(--k-surface)!important}
.rank th{color:var(--k-ink2);border-bottom:1px solid var(--k-line);font-family:var(--k-body);font-weight:600}
.rank td{border-bottom:1px solid var(--k-line)}
/* ---------- inicio del estudiante, lotes ---------- */
.tt-tile{background:var(--c,var(--k-tile1))!important;color:var(--k-tile-ink)!important;border:0!important;box-shadow:var(--k-shadow)!important;border-radius:var(--r-card)!important}
.tt-tile.c0{--c:var(--k-tile0)}.tt-tile.c1{--c:var(--k-tile1)}.tt-tile.c2{--c:var(--k-tile2)}.tt-tile.c3{--c:var(--k-tile3)}
.tt-tile.c4{--c:var(--k-tile4)}.tt-tile.c5{--c:var(--k-tile5)}.tt-tile.c6{--c:var(--k-tile6)}.tt-tile.c7{--c:var(--k-tile7)}.tt-tile.cx{--c:var(--k-tile3)}
.hub-ico.c0{--c:var(--k-tile0)}.hub-ico.c1{--c:var(--k-tile1)}.hub-ico.c2{--c:var(--k-tile2)}.hub-ico.c3{--c:var(--k-tile3)}
.hub-ico.c4{--c:var(--k-tile4)}.hub-ico.c5{--c:var(--k-tile5)}.hub-ico.c6{--c:var(--k-tile6)}.hub-ico.c7{--c:var(--k-tile7)}
.hub-ico{border:0;box-shadow:none;background:var(--c);color:var(--k-tile-ink)}
.tt-tile .glyph{background:var(--k-glyph);border:0;border-radius:18px;color:var(--k-tile-ink)}
.tt-tile .tn{color:var(--k-tile-ink);font-family:var(--k-display);font-weight:600}
.tt-tile .td{color:var(--k-tile-ink);opacity:.82;font-weight:500}
.tt-tile .tm{background:var(--k-glyph);color:var(--k-tile-ink);border:0;font-weight:600}
@media (hover:hover) and (pointer:fine){.tt-tile:hover{background:var(--c,var(--k-tile1))!important;transform:translateY(-4px);box-shadow:var(--k-shadow-hover)!important}.tt-tile.is-locked:hover{box-shadow:none!important;transform:none}}
.tt-tile:active{transform:scale(.985);box-shadow:var(--k-shadow)!important}
.tt-tile.is-locked,.tt-tile.is-locked:hover{background:var(--k-locked)!important;border:1px dashed var(--k-line-strong)!important;box-shadow:none!important;color:var(--k-ink2)!important}
.tt-tile.is-locked .tn,.tt-tile.is-locked .td,.tt-tile.is-locked .glyph,.tt-tile.is-locked .tm{color:var(--k-ink2);background:transparent}
.lot{box-shadow:var(--k-shadow-sm)!important;border-radius:26px!important}
.lot .ls,.lot .lb{color:var(--k-ink2)}
.lot .lstars{color:var(--k-warn)}
.lot.done{background:var(--k-good-soft)!important}
.lot.locked,.lot.locked:hover{background:var(--k-locked)!important;border:1px dashed var(--k-line-strong)!important;box-shadow:none!important;color:var(--k-ink2)}
.lot.locked,.lot.locked .ln,.lot.locked .ls,.lot.locked .lstars,.lot.locked .lb{color:var(--k-ink2)}
@media (hover:hover) and (pointer:fine){.lot:not(.locked):hover{transform:translateY(-3px);box-shadow:var(--k-shadow-hover)!important}}
.lot:not(.locked):active{transform:scale(.985)}
/* ---------- juego ---------- */
.qcard{box-shadow:var(--k-shadow)!important;font-weight:600;color:var(--k-ink)}
.tile{background:var(--k-surface)!important;color:var(--k-ink)!important;border:1px solid var(--k-line)!important;border-radius:var(--r-tile);box-shadow:var(--k-shadow-sm)!important;font:600 1.05rem/1.3 var(--k-body)}
.tile.t0{background:var(--k-ans0)!important}.tile.t1{background:var(--k-ans1)!important}.tile.t2{background:var(--k-ans2)!important}.tile.t3{background:var(--k-ans3)!important}
.tile,.tile.t0,.tile.t1,.tile.t2,.tile.t3{color:var(--k-ans-ink)!important}
.tile .shape,.tile.t0 .shape,.tile.t1 .shape,.tile.t2 .shape,.tile.t3 .shape{background:var(--k-glyph);color:var(--k-ans-ink);border:0;border-radius:50%;font-family:var(--k-display)}
@media (hover:hover) and (pointer:fine){.tile:hover:not(:disabled){transform:translateY(-3px);box-shadow:var(--k-shadow)!important}}
.tile:active:not(:disabled){transform:scale(.985)}
.tile.sel{box-shadow:0 0 0 2.5px var(--k-focus)!important}
.tile.dim{opacity:.55;filter:none}
.tile.right{box-shadow:0 0 0 2.5px var(--k-good)!important}
.tile.wrong{box-shadow:0 0 0 2.5px var(--k-bad)!important;border-style:solid}
.tile.right::after,.tile.wrong::after{border:0;color:#fff}
.tile.right::after{background:var(--k-good)}.tile.wrong::after{background:var(--k-bad)}
.fb{box-shadow:var(--k-shadow-sm)!important}
.fb.ok{background:var(--k-good-soft)!important}.fb.no{background:var(--k-bad-soft)!important}
.fb.ok,.fb.no,.fb{border-left:1px solid var(--k-line)!important}
.stat{background:var(--k-surface2)!important}
.sumgrid .stat:nth-child(1){background:var(--k-tile1)!important}.sumgrid .stat:nth-child(2){background:var(--k-tile2)!important}
.sumgrid .stat:nth-child(3){background:var(--k-tile0)!important}.sumgrid .stat:nth-child(4){background:var(--k-tile3)!important}
.sumgrid .stat,.sumgrid .stat b,.sumgrid .stat span{color:var(--k-tile-ink)!important;border-color:transparent!important}
.stat b{font-family:var(--k-display);font-weight:600}
.bigpts{color:var(--k-ink);-webkit-text-stroke:0}
.stars3 span{color:var(--k-track)}.stars3 span svg{stroke:none}.stars3 span.on{color:var(--k-star)}
.mi.sel,.mi.done{background:var(--k-sel-soft)!important;border-color:var(--k-focus)!important;box-shadow:none!important}
.cchip{background:var(--k-surface);color:var(--k-ink);border:1px solid var(--k-line)!important;box-shadow:none!important;border-radius:999px}
.tok,.ordi{background:var(--k-surface2)!important}.tok.ok,.ordi.ok{background:var(--k-good-soft)!important}.tok.no,.ordi.no{background:var(--k-bad-soft)!important}
.av[aria-pressed="true"],.team[aria-pressed="true"],.wl-course[aria-pressed="true"]{background:var(--k-sel)!important;color:var(--k-sel-ink)!important;border-color:var(--k-sel)!important;box-shadow:none!important}
.wl-course[aria-pressed="true"] b,.wl-course[aria-pressed="true"] span{color:var(--k-sel-ink)!important}
.wl-course b{color:var(--k-ink)}
.rankrow.me{background:var(--k-sel-soft)!important}
.pod .blk{border:0;color:var(--k-tile-ink);border-radius:20px 20px 0 0}
.pod.p1 .blk{background:var(--k-tile2)}.pod.p2 .blk{background:var(--k-tile1)}.pod.p3 .blk{background:var(--k-tile0)}
/* ---------- progreso ---------- */
.pg-hero{background:var(--k-hero)!important;color:#fff;border:0!important;box-shadow:var(--k-shadow)!important}
.pg-hero,.pg-hero *{color:#fff}
.pg-main .eyebrow,.pg-hero .eyebrow,.pg-xp,.pg-next{color:rgba(255,255,255,.86)!important}
.pg-hero .xpbar{background:rgba(255,255,255,.25)!important}.pg-hero .xpbar>i{background:#fff!important}
.pg-hero .chip,.pg-hero .chip *{background:rgba(255,255,255,.92);color:#14213A;border:0!important}
.mis.done,.bdg2.r-r,.bdg2.r-e,.bdg2.r-l{background:var(--k-surface2)!important}
.mis.done{background:var(--k-good-soft)!important}
.bdg2.off{opacity:.6}
.wd b{background:var(--k-surface2);border:1px solid var(--k-line)!important;color:var(--k-ink)}.wd.on b{background:var(--k-good-soft)}.wd.now b{outline:2px solid var(--k-focus)}
.ptab{background:var(--k-surface2);color:var(--k-ink);border:1px solid var(--k-line)!important;box-shadow:none!important;border-radius:999px;font-family:var(--k-body);font-weight:600}
.ptab[aria-pressed="true"]{background:var(--k-sel);color:var(--k-sel-ink);border-color:var(--k-sel)!important}
.uchip{background:var(--k-surface2);border:1px solid var(--k-line)!important;color:var(--k-ink);border-radius:12px;font-family:var(--k-body)}.uchip.on{background:var(--k-good-soft);color:var(--k-good);border-color:transparent!important}
.u-seg{border:1px solid var(--k-line)!important}.u-sb{background:var(--k-surface);color:var(--k-ink)}.u-sb+.u-sb{border-left:1px solid var(--k-line)!important}
/* ---------- portada: secciones ---------- */
.qz-sec h2{color:var(--k-ink)}
.qz-tiles>.qz-tile{background:var(--k-surface)!important}
.qz-tile h3{color:var(--k-ink)}.qz-tile p{color:var(--k-ink2)}
.qz-tile.t-blue{--tint:var(--k-tile1)}.qz-tile.t-indigo{--tint:var(--k-tile4)}.qz-tile.t-yellow{--tint:var(--k-tile2)}.qz-tile.t-pink{--tint:var(--k-tile0)}
.qz-steps li{background:var(--k-surface)!important}.qz-steps p,.qz-steps strong{color:var(--k-ink)}
.qz-steps .qz-n,.qz-steps li:nth-child(2) .qz-n,.qz-steps li:nth-child(3) .qz-n{background:var(--k-surface)!important;border:1px solid var(--k-line)!important;color:var(--k-ink)}
.qz-step-art{background:var(--k-tile1)}.qz-steps li:nth-child(2) .qz-step-art{background:var(--k-tile2)}.qz-steps li:nth-child(3) .qz-step-art{background:var(--k-tile0)}
.qz-chip{background:var(--k-surface)!important;color:var(--k-ink);border:1px solid var(--k-line)!important;box-shadow:none!important;border-radius:999px;font-family:var(--k-body);font-weight:600}
@media (hover:hover) and (pointer:fine){.qz-chip:hover{background:var(--k-hover)!important;transform:translateY(-2px)}}
.qz-trust{background:var(--k-surface)!important}.qz-contact{background:var(--k-tile3)!important;color:var(--k-tile-ink)}
.qz-contact h2,.qz-contact p,.qz-contact a{color:var(--k-tile-ink)}
.qz-fig{background:var(--k-tile4)!important}
.fc-f,.fc-b{border:0!important;box-shadow:none;color:var(--k-tile-ink)}
.fc.f1 .fc-f{background:var(--k-tile0)}.fc.f2 .fc-f{background:var(--k-tile1)}.fc.f3 .fc-f{background:var(--k-tile2)}.fc.f4 .fc-f{background:var(--k-tile3)}
.fc.f5 .fc-b{background:var(--k-tile0)}.fc.f6 .fc-b{background:var(--k-tile1)}
.fc-b small{color:var(--k-tile-ink)}
.qz-marquee{background:var(--k-marquee);color:var(--k-marquee-ink);border-block:0!important}
#welcome>.qz-sec[aria-labelledby="lp-h-topics"]::before{background:var(--k-band);border-block:0!important}
.site-foot{background:var(--k-footer)!important;color:var(--k-footer-ink);border-top:0!important}
.site-foot,.site-foot *,.site-foot a{color:var(--k-footer-ink)}
.qz-checks li svg{background:var(--k-good-soft);border:0;color:var(--k-good)}
.side-owl::before,.pi-pop::before{background:var(--k-hover);border:0}
.ad-slot{border:1px dashed var(--k-line-strong)!important;background:var(--k-surface)}
::selection{background:var(--k-sel);color:var(--k-sel-ink)}
input,textarea,select{caret-color:var(--k-focus)}
/* ---------- portada: marco de portada con escena (estilo editorial), texto grande sobre la imagen ---------- */
#welcome>.qz-top{position:relative;overflow:hidden;border-radius:42px;padding:clamp(28px,5vw,68px);min-height:min(640px,78vh);align-content:end;
background:var(--k-scrim),var(--k-scene) center bottom/cover no-repeat;box-shadow:var(--k-shadow-hover);margin-bottom:0}
#welcome>.qz-top .qz-title{text-align:left;margin:0 0 clamp(14px,2vw,26px);color:#fff;font-family:var(--k-display);font-weight:500;font-size:clamp(2.4rem,5.4vw,4.6rem);line-height:1.03;letter-spacing:-.035em;max-width:15ch}
#welcome>.qz-top .qz-sub{color:rgba(255,255,255,.9);font-size:clamp(1.02rem,1.5vw,1.22rem);max-width:30em}
#welcome>.qz-top .qz-checks li{color:#fff}
#welcome>.qz-top .qz-checks li svg{background:rgba(255,255,255,.2);color:#fff;border:0}
#welcome>.qz-top #lp-toggle{background:#fff;color:#14213A;border:0!important;box-shadow:0 10px 30px -12px rgba(0,0,0,.5)!important}
@media (hover:hover) and (pointer:fine){#welcome>.qz-top #lp-toggle:hover{background:#F1F4FA;color:#14213A}}
#welcome>.qz-top #lp-toggle::after{border-color:#14213A}
#welcome>.qz-top .qz-art{background:rgba(255,255,255,.94);border-radius:32px;padding:clamp(14px,2vw,26px);box-shadow:0 30px 60px -24px rgba(0,0,0,.55);align-self:end;justify-self:end;max-width:460px}
@media (max-width:899px){#welcome>.qz-top{border-radius:30px;min-height:0}#welcome>.qz-top .qz-art{justify-self:center}}
body.is-gate .shell{max-width:1340px}
body.is-gate .top{margin-bottom:14px}
/* =====================================================================
SKIN "FOTO" (prueba): portada editorial con escena de atardecer, tarjetas claras de esquinas muy redondeadas,
sombras difusas, botones en pildora oscura. Inspirada en la imagen de referencia (hero con marco redondeado,
barra blanca flotante, texto grande blanco sobre la imagen). Escena dibujada en SVG propio (sin fotos de terceros).
===================================================================== */
/* logotipos (claro en la barra, oscuro/blanco en el pie) */
.logo .wordmark{height:54px;margin:0}
body.is-gate .logo .wordmark{height:58px;margin-block:0}
body:not(.is-gate) .logo .wordmark{height:62px}
.sf-brand .wordmark{height:44px}
@media (max-width:640px){body.is-gate .logo .wordmark{height:46px}body:not(.is-gate) .logo .wordmark{height:46px}}
:root{
--k-display:"Lexend","Trebuchet MS",system-ui,sans-serif; --k-body:"Inter",system-ui,sans-serif;
--k-ink:#14213A; --k-ink2:#51607A;
--k-bg:linear-gradient(180deg,#DCE6F3 0%,#EFE9E6 55%,#F6F1E8 100%); --k-bg-solid:#EFE9E6;
--k-surface:#FFFFFF; --k-surface2:#F6F3ED; --k-field:#FFFFFF;
--k-line:rgba(20,33,58,.08); --k-line-strong:rgba(20,33,58,.24);
--k-shadow:0 18px 40px -22px rgba(20,33,58,.38),0 2px 6px rgba(20,33,58,.05);
--k-shadow-sm:0 8px 20px -14px rgba(20,33,58,.35); --k-shadow-hover:0 28px 52px -24px rgba(20,33,58,.45);
--k-primary:#14213A; --k-primary-ink:#FFFFFF; --k-primary-hover:#26365A;
--k-sel:#14213A; --k-sel-ink:#FFFFFF; --k-sel-soft:#E3EBF7; --k-hover:#EDF1F7;
--k-focus:#2F5DB8; --k-focus-ring:rgba(47,93,184,.25); --k-link:#2F5DB8;
--k-good:#2B7046; --k-good-soft:#E1F0E4; --k-bad:#AE3F36; --k-bad-soft:#FBE4E0; --k-warn:#8A6410; --k-warn-soft:#FBF1D3;
--k-track:#E3E7EE; --k-fill:#5A8F66; --k-star:#E7A92B;
--k-tile0:#F8DDD2; --k-tile1:#D5E4F6; --k-tile2:#F6EBC7; --k-tile3:#D6E9D3; --k-tile4:#E3DDF4; --k-tile5:#CFEAE8; --k-tile6:#F9E0C4; --k-tile7:#E8E3D8;
--k-tile-ink:#14213A; --k-glyph:rgba(255,255,255,.62); --k-locked:rgba(20,33,58,.05);
--k-ans0:#F8DDD2; --k-ans1:#D5E4F6; --k-ans2:#F6EBC7; --k-ans3:#D6E9D3; --k-ans-ink:#14213A;
--k-bar:#14213A; --k-bar-line:rgba(255,255,255,.12); --k-bar-ink:#D8DFEC; --k-bar-sel:#FFFFFF; --k-bar-sel-ink:#14213A;
--k-overlay:rgba(14,22,40,.5);
--k-scrim:linear-gradient(90deg,rgba(14,22,40,.6) 0%,rgba(14,22,40,.24) 48%,rgba(14,22,40,0) 82%),linear-gradient(0deg,rgba(14,22,40,.25) 0%,rgba(14,22,40,0) 40%);
--k-hero:linear-gradient(90deg,rgba(14,22,40,.86),rgba(14,22,40,.68)),var(--k-scene) center/cover;
--k-marquee:#14213A; --k-marquee-ink:#F3EEE4; --k-band:#DDE7F4; --k-footer:#14213A; --k-footer-ink:#E8ECF4;
--k-scene:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900' preserveAspectRatio='xMidYMid slice'%3E%3Cdefs%3E%3ClinearGradient id='s' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%236F8FBF'/%3E%3Cstop offset='.45' stop-color='%23A9B9D6'/%3E%3Cstop offset='.75' stop-color='%23EBC6B4'/%3E%3Cstop offset='1' stop-color='%23F3D9B4'/%3E%3C/linearGradient%3E%3CradialGradient id='g' cx='.72' cy='.66' r='.42'%3E%3Cstop offset='0' stop-color='%23FFF1D0' stop-opacity='.95'/%3E%3Cstop offset='1' stop-color='%23FFF1D0' stop-opacity='0'/%3E%3C/radialGradient%3E%3ClinearGradient id='h1' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2395AE8C'/%3E%3Cstop offset='1' stop-color='%236F8F6A'/%3E%3C/linearGradient%3E%3ClinearGradient id='h2' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%2377A058'/%3E%3Cstop offset='1' stop-color='%2342703F'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='1600' height='900' fill='url(%23s)'/%3E%3Crect width='1600' height='900' fill='url(%23g)'/%3E%3Cellipse cx='300' cy='170' rx='190' ry='32' fill='%23fff' opacity='.3'/%3E%3Cellipse cx='420' cy='200' rx='140' ry='24' fill='%23fff' opacity='.25'/%3E%3Cellipse cx='1180' cy='120' rx='230' ry='30' fill='%23fff' opacity='.28'/%3E%3Cpath d='M0 640C220 560 420 590 640 640S1080 700 1280 610 1500 580 1600 610V900H0Z' fill='url(%23h1)'/%3E%3Cpath d='M0 770C260 700 520 710 780 770S1260 830 1600 730V900H0Z' fill='url(%23h2)'/%3E%3C/svg%3E");
}
/* globos del dibujo de la portada sobre tarjeta clara */
:root{--hb-bub:#EAF0FA;--hb-ink:#14213A;--hb-line:rgba(20,33,58,.14)}
/* portada con la ilustracion del escritorio de noche: el titular va dentro de la mancha crema del centro */
#welcome>.qz-top{background:url("assets/img/banner-escritorio.webp") center/cover no-repeat;grid-template-columns:minmax(0,1fr);align-content:center;
padding-left:clamp(24px,27%,400px);padding-right:clamp(24px,23%,340px);min-height:min(640px,78vh)}
#welcome>.qz-top .qz-title{color:var(--k-ink);max-width:14ch}
#welcome>.qz-top .qz-sub,#welcome>.qz-top .qz-checks li{color:var(--k-ink2)}
#welcome>.qz-top .qz-checks li svg{background:#fff;color:var(--k-good);box-shadow:var(--k-shadow-sm)}
#welcome>.qz-top #lp-toggle{background:var(--k-primary);color:var(--k-primary-ink);box-shadow:var(--k-shadow-sm)!important}
@media (hover:hover) and (pointer:fine){#welcome>.qz-top #lp-toggle:hover{background:var(--k-primary-hover);color:var(--k-primary-ink)}}
#welcome>.qz-top #lp-toggle::after{border-color:var(--k-primary-ink)}
#welcome>.qz-top .qz-art{display:none}
@media (max-width:899px){#welcome>.qz-top{background:linear-gradient(rgba(246,243,236,.86),rgba(246,243,236,.86)),url("assets/img/banner-escritorio.webp") center/cover no-repeat;padding-inline:22px}}
/* Ilustraciones de personajes y escenas (aportadas por el autor): "Asi funciona" y "Elige como practicar". Comun a todas las skins. */
.qz-mock img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 42%;transition:transform .6s var(--eo,cubic-bezier(.23,1,.32,1))}
@media (hover:hover) and (pointer:fine){.qz-tile:hover .qz-mock img{transform:scale(1.05)}}
.qz-step-art,.qz-steps li:nth-child(2) .qz-step-art,.qz-steps li:nth-child(3) .qz-step-art{background:#F6F3EC!important;overflow:hidden;height:196px;padding:0}
.qz-step-art img{display:block;width:100%;height:100%;object-fit:cover;object-position:center 42%;transition:transform .6s var(--eo,cubic-bezier(.23,1,.32,1))}
@media (hover:hover) and (pointer:fine){.qz-steps li:hover .qz-step-art img{transform:scale(1.05)}}
@media (prefers-reduced-motion:reduce){.qz-mock img,.qz-step-art img{transition:none}}
/* la imagen ocupa exactamente su marco (con width/height en el HTML, el alto ya no desborda la tarjeta) */
.qz-mock,.qz-step-art{position:relative}
.qz-mock img{position:absolute;inset:0;width:100%;height:100%}
.qz-step-art img{position:absolute;inset:0;width:100%;height:100%}
/* el pie oscuro llega hasta el final de la página (el tema anterior dejaba 96px de fondo debajo); en celular se conserva para que el pie no tape la barra inferior */
@media (min-width:960px){body,body.is-gate{padding-bottom:0}}
/* el pie queda por debajo de la barra inferior del celular (antes podía taparla en pantallas cortas como resultados) */
body:not(.is-gate) .site-foot{z-index:0}
/* textos del pie oscuro en claro (el tema anterior los pintaba en tinta y quedaban invisibles) */
.site-foot .sf-brand strong,.site-foot .sf-brand p,.site-foot .sf-copy{color:var(--k-footer-ink)}
/* en pantallas táctiles el «hover pegado» del tema anterior pintaba el botón de coral */
@media (hover:none),(pointer:coarse){.btn:hover:not(:disabled){background:var(--k-primary);color:var(--k-primary-ink)}}
/* ---------- barra superior pegada al borde (no flotante), a todo el ancho ---------- */
body.is-gate .shell{padding-top:0}
body.is-gate .top,body.is-gate.is-scrolled .top{position:sticky;top:0;z-index:60;margin:0 calc(50% - 50vw) 14px!important;width:100vw;min-height:72px;
padding:10px max(24px,calc((100vw - 1340px)/2 + 32px))!important;border-radius:0!important;
border:0!important;border-bottom:1px solid var(--k-line)!important;box-shadow:none!important;background:#fff!important;animation:none}
body.is-gate.is-scrolled .top{box-shadow:0 10px 24px -18px rgba(20,33,58,.45)!important}
@media (max-width:640px){body.is-gate .top,body.is-gate.is-scrolled .top{min-height:60px;padding:6px 16px!important}}
@media (max-width:959px){
body:not(.is-gate){padding-top:0}
body:not(.is-gate) .top{position:sticky;top:0;z-index:55;margin:0 calc(50% - 50vw) 12px!important;width:100vw;
padding:8px max(16px,env(safe-area-inset-left,0px))!important;border-radius:0!important;border:0!important;
border-bottom:1px solid var(--k-line)!important;box-shadow:none!important;background:#fff!important}
}
html,body{overflow-x:clip}
body.is-gate.is-scrolled .logo .wordmark{height:58px}
@media (max-width:640px){body.is-gate .logo .wordmark,body.is-gate.is-scrolled .logo .wordmark{height:44px}}
/* ---------- imágenes de portada en alta resolución (WebP ampliado y afinado) ---------- */
#welcome>.qz-top{background-image:url("assets/img/hero-escritorio.webp")}
@media (max-width:899px){#welcome>.qz-top{background-image:linear-gradient(rgba(246,243,236,.86),rgba(246,243,236,.86)),url("assets/img/hero-movil.webp")}}
/* ---------- nombre de la barra pegado al extremo izquierdo ---------- */
body.is-gate .top,body.is-gate.is-scrolled .top{padding-left:clamp(16px,1.6vw,24px)!important;padding-right:clamp(16px,1.6vw,24px)!important}
/* ---------- logo de la barra un poco más pequeño y centrado en vertical (las letras, no las chispas) ---------- */
body.is-gate .logo .wordmark,body.is-gate.is-scrolled .logo .wordmark{height:50px;transform:translateY(-11%)}
@media (max-width:640px){body.is-gate .logo .wordmark,body.is-gate.is-scrolled .logo .wordmark{height:38px}}
/* ---------- portada: imagen integrada al fondo, de borde a borde (sin cuadro) ---------- */
#welcome>.qz-top{border-radius:0!important;box-shadow:none!important;border:0!important;margin:-110px calc(50% - 50vw) 0!important;width:auto;max-width:none;min-height:0;
padding:clamp(60px,9vh,110px) 24px clamp(120px,16vh,170px) max(24px,calc(50vw - 300px))!important;background-position:center top;
}
@media (max-width:899px){#welcome>.qz-top{margin-top:-54px!important;padding:56px 24px 110px!important;
background-image:linear-gradient(rgba(246,243,236,.5),rgba(246,243,236,.78)),url("assets/img/hero-movil.webp");background-position:22% center;background-size:auto 100%}}
@media (min-width:641px) and (max-width:899px){#welcome>.qz-top{margin-top:-63px!important}}
/* sin franja vacía entre la portada y la cinta de temas (el hueco era el gap --gap-l de #welcome) */
#welcome>.qz-top+.qz-marquee{margin-top:calc(-1 * var(--gap-l))}
/* en PC la portada ocupa la primera pantalla y la imagen va de borde a borde (sin difuminados).
En pantallas muy anchas se recorta un poco arriba y abajo: el encuadre 40% mantiene la luna, la planta y la laptop */
@media (min-width:900px){
#welcome>.qz-top{--hh:max(calc(100svh - 72px),640px);min-height:var(--hh);padding-top:clamp(40px,7vh,100px)!important;padding-bottom:clamp(40px,7vh,100px)!important;
background:url("assets/img/hero-escritorio.webp") center 40%/cover no-repeat!important}
/* el texto y el botón empiezan a la derecha de la laptop de la imagen (su borde está a ~36% del ancho de la imagen),
así no se confunden con ella en pantallas medianas; en pantallas grandes casi no se mueve */
#welcome>.qz-top{--iw:max(100vw,var(--hh) * 1.7769);padding-left:max(24px,calc(50vw - 300px),calc(50vw - var(--iw) * .141 + 28px))!important}
/* halo claro detrás del texto: se lee aunque pase sobre la laptop (pantallas bajas) */
#welcome>.qz-top p,#welcome>.qz-top li,#welcome>.qz-top li *{text-shadow:0 0 4px #FBF5EE,0 0 12px rgba(251,245,238,.95),0 0 22px rgba(251,245,238,.8)!important}}
/* ---------- acceso docente: entrada más suave y campos con foco visible ---------- */
@keyframes modal-in2{from{opacity:0;transform:translate(-50%,-48%) scale(.985)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
#login:not([hidden]),#privacy:not([hidden]){animation:modal-in2 .28s cubic-bezier(.2,.8,.2,1) both}
#login .f input{transition:border-color .2s ease,box-shadow .2s ease}
#login .f input:focus{outline:0;border-color:var(--k-focus,#2F5DB8)!important;box-shadow:0 0 0 4px rgba(47,93,184,.16)!important}
@media (prefers-reduced-motion:reduce){#login:not([hidden]),#privacy:not([hidden]){animation:none}}
/* =====================================================================
ESTUDIANTE Y DOCENTE, PULIDO (29/10/2026): barra de nivel, acceso directo a temas,
«Tu rendimiento», insignias tipo medalla, ver contraseña, resumen docente y tarjeta de cuenta.
Respaldo previo: respaldo-antes-estudiante-20261029/
===================================================================== */
/* ---------- barra de nivel (Practicar) ---------- */
#view-practice .lv-pro{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:18px;width:100%;
padding:18px 22px!important;background:var(--k-surface)!important;border:1px solid var(--k-line)!important;box-shadow:var(--k-shadow-sm)!important;text-align:left;
transition:transform .2s cubic-bezier(.23,1,.32,1),box-shadow .2s ease}
@media (hover:hover) and (pointer:fine){#view-practice .lv-pro:hover{transform:translateY(-2px);box-shadow:var(--k-shadow)!important}}
#view-practice .lv-pro:active{transform:scale(.99)}
#view-practice .lv-pro .emb-s{display:block;line-height:0;filter:drop-shadow(0 6px 10px rgba(20,33,58,.18))}
#view-practice .lv-pro .lvl-b{display:flex;flex-direction:column;gap:8px;min-width:0}
.lv-pro .lv-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px}
.lv-pro .lv-rk{display:flex;flex-direction:column;min-width:0}
.lv-pro .lv-rk small{font:600 .72rem/1.2 var(--k-body);letter-spacing:.08em;text-transform:uppercase;color:var(--k-ink2)}
.lv-pro .lv-rk strong{font:600 1.12rem/1.25 var(--k-display);color:var(--k-ink);letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lv-pro .lv-xp{font:500 .85rem/1.2 var(--k-body);color:var(--k-ink2);white-space:nowrap;font-variant-numeric:tabular-nums}
.lv-pro .lv-xp b{font-weight:700;color:var(--k-ink)}
#view-practice .lv-pro .lv-bar{position:relative;display:block;height:14px!important;border-radius:999px;background:var(--k-track)!important;overflow:hidden}
#view-practice .lv-pro .lv-bar i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--rk),var(--rk2))!important;
box-shadow:inset 0 -2px 0 rgba(0,0,0,.08);transition:width .6s cubic-bezier(.23,1,.32,1)}
.lv-pro .lv-hint{font-size:.82rem;color:var(--k-ink2)}
#view-practice .lv-pro .chip.streak{align-self:center;white-space:nowrap}
@media (max-width:520px){
#view-practice .lv-pro{grid-template-columns:auto minmax(0,1fr);gap:4px 14px;padding:16px!important}
#view-practice .lv-pro .emb-s svg{width:46px;height:auto}
#view-practice .lv-pro .chip.streak{grid-column:2;justify-self:start;margin-top:6px}
.lv-pro .lv-rk strong{font-size:1rem}
}
/* ---------- ir directo a un tema ---------- */
.qk{display:flex;flex-direction:column;gap:12px;min-width:0}
.qk-head h2{margin:0;font-size:1.25rem}
.qk-sug{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));gap:12px}
.qk-go{display:flex;align-items:center;gap:14px;min-width:0;padding:14px 16px;border-radius:22px;border:1px solid var(--k-line);background:var(--k-surface);
color:var(--k-ink);font:inherit;text-align:left;cursor:pointer;box-shadow:var(--k-shadow-sm);transition:transform .2s cubic-bezier(.23,1,.32,1),box-shadow .2s ease}
.qk-go>.ic{width:20px;height:20px;flex:none;margin-left:auto;color:var(--k-ink2);transition:transform .2s ease}
@media (hover:hover) and (pointer:fine){.qk-go:hover{transform:translateY(-2px);box-shadow:var(--k-shadow)}.qk-go:hover>.ic{transform:translateX(3px)}}
.qk-go:active{transform:scale(.98)}
.qk-gi{display:grid;place-items:center;width:46px;height:46px;flex:none;border-radius:14px;background:var(--k-tile1);color:var(--k-ink)}
.qk-gi .ic{width:22px;height:22px}
.qk-go.is-err .qk-gi{background:var(--k-tile0)}
.qk-gt{display:flex;flex-direction:column;min-width:0}
.qk-gt small{font:600 .7rem/1.2 var(--k-body);letter-spacing:.08em;text-transform:uppercase;color:var(--k-ink2)}
.qk-gt strong{font:600 1.02rem/1.3 var(--k-display);color:var(--k-ink)}
.qk-gt span{font-size:.82rem;color:var(--k-ink2)}
.qk-row{display:flex;gap:8px;overflow-x:auto;scroll-snap-type:x proximity;padding:2px 2px 8px;margin:0 -2px;scrollbar-width:thin;overscroll-behavior-x:contain}
.qk-pill{position:relative;display:inline-flex;align-items:center;gap:8px;flex:none;scroll-snap-align:start;padding:9px 16px 9px 10px;border-radius:999px;
border:1px solid var(--k-line);background:var(--k-surface);color:var(--k-ink);font:500 .9rem var(--k-body);white-space:nowrap;cursor:pointer;transition:background .15s ease,transform .15s ease}
.qk-pi{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--k-surface2)}
.qk-pi .ic{width:15px;height:15px}
.qk-pill.c0 .qk-pi{background:var(--k-tile0)}.qk-pill.c1 .qk-pi{background:var(--k-tile1)}.qk-pill.c2 .qk-pi{background:var(--k-tile2)}.qk-pill.c3 .qk-pi{background:var(--k-tile3)}
.qk-pill.c4 .qk-pi{background:var(--k-tile4)}.qk-pill.c5 .qk-pi{background:var(--k-tile5)}.qk-pill.c6 .qk-pi{background:var(--k-tile6)}.qk-pill.c7 .qk-pi{background:var(--k-tile7)}
.qk-pp{width:18px;height:18px;border-radius:50%;flex:none;background:conic-gradient(var(--k-fill) calc(var(--p)*1%),var(--k-track) 0);
-webkit-mask:radial-gradient(circle,transparent 5px,#000 5.5px);mask:radial-gradient(circle,transparent 5px,#000 5.5px)}
.qk-pill.is-locked{color:var(--k-ink2);background:var(--k-surface2)}
@media (hover:hover) and (pointer:fine){.qk-pill:hover{background:var(--k-hover)}}
.qk-pill:active{transform:scale(.97)}
.qk-go:focus-visible,.qk-pill:focus-visible,.lv-pro:focus-visible{outline:3px solid var(--k-focus);outline-offset:3px}
/* temas más compactos en celular: dos por fila, sin la descripción larga (menos desplazamiento) */
@media (max-width:640px){
#view-practice .tgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
#view-practice .tgrid>.tt-tile{padding:14px!important;min-height:0!important;border-radius:22px!important;gap:6px}
#view-practice .tgrid>.tt-tile .glyph{width:40px!important;height:40px!important;margin-bottom:2px}
#view-practice .tgrid>.tt-tile .glyph .ic{width:20px;height:20px}
#view-practice .tgrid>.tt-tile .tn{font-size:.98rem!important;line-height:1.25}
#view-practice .tgrid>.tt-tile .td{display:none}
#view-practice .tgrid>.tt-tile .tm{font-size:.74rem!important;padding:4px 8px!important;white-space:normal;line-height:1.3}
#view-practice .tgrid>.tt-tile.cx{grid-column:1/-1}
#view-practice .tgrid>.tt-tile.cx .td{display:block}
}
@media (prefers-reduced-motion:reduce){.lv-pro,.qk-go,.qk-pill,.qk-go>.ic,#view-practice .lv-pro .lv-bar i{transition:none!important}.lv-pro:hover,.qk-go:hover{transform:none!important}}
/* ---------- Mi progreso: tu rendimiento (la racha conserva su tarjeta) ---------- */
#view-progress>.pg-perf{order:2;grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(150px,.55fr);gap:14px;
padding:22px;border-radius:30px;background:var(--k-surface);border:1px solid var(--k-line);box-shadow:var(--k-shadow-sm)}
.pg-perf .pp-title{grid-column:1/-1;margin:0;font:600 1.15rem var(--k-display);color:var(--k-ink)}
.pg-perf small{display:block;font:600 .72rem/1.2 var(--k-body);letter-spacing:.08em;text-transform:uppercase;color:var(--k-ink2)}
.pp-acc{display:flex;align-items:center;gap:18px;padding:16px 18px;border-radius:24px;background:var(--k-tile3);min-width:0}
.pp-acc .ring{flex:none}
.pp-empty{display:grid;place-items:center;width:92px;height:92px;flex:none;border-radius:50%;background:rgba(255,255,255,.6);font:600 1.6rem var(--k-display)}
.pp-acc-tx{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.pp-acc-tx strong{font:600 2rem/1.05 var(--k-display);letter-spacing:-.02em;color:var(--k-ink);font-variant-numeric:tabular-nums}
.pp-acc-tx>span{font-size:.88rem;color:var(--k-ink)}
.pp-acc-tx em{font-style:normal;font-size:.82rem;color:var(--k-ink2)}
.pp-split{display:block;height:8px;border-radius:999px;background:rgba(174,63,54,.22);overflow:hidden;margin:2px 0}
.pp-split i{display:block;height:100%;border-radius:inherit;background:var(--k-good)}
.pp-acts{display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:24px;background:var(--k-tile1);min-width:0}
.pp-acts>strong{font:600 2rem/1.05 var(--k-display);letter-spacing:-.02em;color:var(--k-ink)}
.pp-acts ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.pp-acts li{display:grid;grid-template-columns:minmax(0,5.5em) minmax(0,1fr) auto;align-items:center;gap:8px;font-size:.8rem;color:var(--k-ink)}
.pp-acts li>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-mb{display:block;height:6px;border-radius:999px;background:rgba(255,255,255,.75);overflow:hidden}
.pp-mb i{display:block;height:100%;border-radius:inherit;background:var(--k-ink)}
.pp-acts li b{font-variant-numeric:tabular-nums;min-width:1.5em;text-align:right}
.pp-none{font-size:.85rem;color:var(--k-ink2)}
#view-progress .pg-perf .pp-streak{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:4px;margin:0;padding:16px 18px;border-radius:24px;background:var(--k-tile6)!important;border:0!important;box-shadow:none!important;animation:none}
@media (max-width:860px){#view-progress>.pg-perf{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.pp-acc{grid-column:1/-1}}
@media (max-width:520px){
#view-progress>.pg-perf{padding:16px;gap:10px;border-radius:26px}
.pp-acc{gap:14px;padding:14px}.pp-acc .ring{width:76px;height:76px}.pp-acc-tx strong{font-size:1.7rem}
.pp-acts,#view-progress .pg-perf .pp-streak{padding:14px}
.pp-acts li{grid-template-columns:minmax(0,1fr) auto}.pp-acts li .pp-mb{display:none}
}
/* ---------- insignias tipo medalla ---------- */
#view-progress .bdg3{position:relative;display:flex!important;flex-direction:column;align-items:center!important;text-align:center;gap:6px!important;
padding:20px 14px 16px!important;border-radius:24px!important;background:var(--k-surface)!important;border:1px solid var(--k-line)!important;box-shadow:var(--k-shadow-sm)!important;opacity:1!important;filter:none!important;
--m1:#C98B5A;--m2:#F2C9A2;--m3:#8A5532;--mg:rgba(201,139,90,.28)}
#view-progress .bdg3.r-r{--m1:#3D6CB8;--m2:#A9C6F2;--m3:#264A85;--mg:rgba(61,108,184,.26)}
#view-progress .bdg3.r-e{--m1:#6C5BB5;--m2:#C7BCF4;--m3:#463A85;--mg:rgba(108,91,181,.28)}
#view-progress .bdg3.r-l{--m1:#D99A16;--m2:#FFE38A;--m3:#94650A;--mg:rgba(231,169,43,.38)}
.bdg3 .bmed{position:relative;display:grid;place-items:center;width:76px;height:76px;margin-bottom:4px}
.bdg3 .bmed::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 210deg,var(--m1),var(--m2),var(--m1),var(--m3),var(--m1));box-shadow:0 10px 22px -10px var(--mg)}
.bdg3 .bmed::after{content:"";position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0%,var(--m2) 140%);box-shadow:inset 0 2px 4px rgba(0,0,0,.08)}
#view-progress .bdg3 .bi{position:relative;z-index:1;display:grid!important;place-items:center;width:auto!important;height:auto!important;background:none!important;box-shadow:none!important;color:var(--m3)!important;filter:none!important;opacity:1!important}
.bdg3 .bi .ic{width:30px;height:30px}
.bdg3 .block{position:absolute;z-index:2;right:-2px;bottom:-2px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--k-ink);color:#fff;border:2px solid var(--k-surface)}
.bdg3 .block .ic{width:13px;height:13px}
#view-progress .bdg3.off .bmed::before{background:conic-gradient(#C9CFDA,#E7EAF0,#C9CFDA);box-shadow:none}
#view-progress .bdg3.off .bmed::after{background:#F1F3F7}
#view-progress .bdg3.off .bi{color:#8793A8!important}
#view-progress .bdg3.off strong{color:var(--k-ink)}
.bdg3 strong{font:600 .98rem/1.25 var(--k-display)}
.bdg3 .small.muted{font-size:.8rem;line-height:1.35;color:var(--k-ink2)!important}
#view-progress .bdg3 .rar{margin:0}
.bdg3 .bwon{display:inline-flex;align-items:center;gap:5px;margin-top:auto;padding:4px 10px;border-radius:999px;background:var(--k-good-soft);color:var(--k-good);font:600 .75rem var(--k-body)}
.bdg3 .bwon .ic{width:12px;height:12px}
.bdg3 .bprog{display:flex;align-items:center;gap:8px;width:100%;margin-top:auto}
#view-progress .bdg3 .bprog .bar{flex:1;height:6px!important;margin:0}
.bdg3 .bprog .mono{font-size:.75rem;color:var(--k-ink2)}
@media (hover:hover) and (pointer:fine){#view-progress .bdg3.is-won{transition:transform .25s cubic-bezier(.23,1,.32,1)}#view-progress .bdg3.is-won:hover{transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){#view-progress .bdg3.is-won:hover{transform:none}}
/* ---------- ver u ocultar contraseña (acceso docente) ---------- */
#login .pw-f{display:flex;flex-direction:column;gap:4px}
#login .pw-f>label{font-weight:700;font-size:.9rem;line-height:1.5;color:var(--k-ink)}
#login .pw-wrap{position:relative;display:block}
#login .pw-wrap input{width:100%;padding-right:52px!important}
#login .pw-eye{position:absolute;top:50%;right:6px;transform:translateY(-50%);display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:12px;background:transparent;color:var(--k-ink2);cursor:pointer}
#login .pw-eye svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#login .pw-eye .pw-off,#login .pw-eye[aria-pressed="true"] .pw-on{display:none}
#login .pw-eye[aria-pressed="true"] .pw-off{display:block}
@media (hover:hover) and (pointer:fine){#login .pw-eye:hover{background:var(--k-hover);color:var(--k-ink)}}
#login .pw-eye:focus-visible{outline:3px solid var(--k-focus);outline-offset:1px}
/* ---------- docente: el resumen ya no recorta las tarjetas al pasar el ratón ---------- */
#view-teacher>#t-sum{overflow:visible!important}
#t-sum .ts-grid{gap:14px;padding:4px 0}
#t-sum .ts-k{position:relative;border:1px solid var(--k-line)!important;box-shadow:var(--k-shadow-sm);transition:transform .22s cubic-bezier(.23,1,.32,1),box-shadow .22s ease,border-color .22s ease!important}
#t-sum .ts-k b{font-variant-numeric:tabular-nums}
@media (hover:hover) and (pointer:fine){#t-sum .ts-k:hover{transform:translateY(-3px);box-shadow:var(--k-shadow-hover);border-color:var(--k-line-strong)!important}}
#t-sum .ts-k:active{transform:scale(.98)}
#t-sum .ts-k:focus-visible{outline:3px solid var(--k-focus);outline-offset:3px}
@media (prefers-reduced-motion:reduce){#t-sum .ts-k:hover,#t-sum .ts-k:active{transform:none}}
/* ---------- tarjeta de cuenta (logo + nombre + cerrar sesión) ---------- */
.top-who{display:none;margin:0}
@media (min-width:960px){
body:not(.is-gate) .top{align-items:stretch!important;gap:14px!important;padding:24px 20px 20px!important;text-align:center}
body:not(.is-gate) .top .logo{align-items:center!important;gap:10px!important;justify-content:center}
body:not(.is-gate) .top .logo .logo-tx{display:flex;flex-direction:column;align-items:center}
body:not(.is-gate) .top .badge{margin:0 auto}
body:not(.is-gate) .top-who:not([hidden]){display:flex;flex-direction:column;align-items:center;gap:2px;padding:12px 8px 0;border-top:1px solid var(--k-line);min-width:0}
.top-who small{font:600 .7rem/1.2 var(--k-body);letter-spacing:.08em;text-transform:uppercase;color:var(--k-ink2)}
.top-who strong{font:600 .95rem/1.3 var(--k-display);color:var(--k-ink);max-width:100%;overflow-wrap:anywhere}
body:not(.is-gate) .top-out{justify-content:center;width:100%;margin:0!important;padding:10px 16px!important}
}
.qk-go>.qk-chev{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){.qk-go:hover>.qk-chev{transform:rotate(180deg) translateX(-3px)}}
@media (max-width:640px){.qk-row{scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:40px}.qk-row::-webkit-scrollbar{display:none}}
.pp-acc .ring text{display:none}
#view-progress .pg-perf .pp-streak b{font:600 2rem/1.05 var(--k-display);letter-spacing:-.02em;color:var(--k-ink)}
#view-progress .pg-perf .pp-streak span{font:600 .72rem/1.2 var(--k-body);letter-spacing:.08em;text-transform:uppercase;color:var(--k-ink2)}
.qk-sug{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
@media (min-width:960px){.qk-row{flex-wrap:wrap;overflow:visible;padding-bottom:2px}}
@media (min-width:960px){
body:not(.is-gate) .top{gap:12px!important;padding:20px 18px 18px!important}
.top-who strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:normal}
body:not(.is-gate) .tabs{top:calc(var(--gut) + var(--top-h,262px))}
body:not(.is-gate) .side-owl{top:calc(var(--gut) + var(--top-h,262px) + 210px)}
body:not(.is-gate) .side-art{top:calc(var(--gut) + var(--top-h,262px) + 230px)}
body:not(.is-gate) .tabs:has(#tab-teacher:not([hidden]))~.side-owl{top:calc(var(--gut) + var(--top-h,262px) + 290px)}
}
.pp-acc .ring .ring-bg{stroke:rgba(255,255,255,.85)!important}.pp-acc .ring .ring-fg{stroke:var(--k-good)!important;stroke-linecap:round}
/* ---------- búho del menú: se despide suave antes de que el pie lo empuje (29/10) ---------- */
@media (min-width:960px){
body:not(.is-gate) .side-owl{transition:opacity .28s ease,transform .28s cubic-bezier(.23,1,.32,1)}
body.owl-away:not(.is-gate) .side-owl{opacity:0;transform:translateY(10px) scale(.97);pointer-events:none}
}
@media (prefers-reduced-motion:reduce){body:not(.is-gate) .side-owl{transition:opacity .2s linear}body.owl-away:not(.is-gate) .side-owl{transform:none}}
/* ---------- tu camino de aventura: títulos e íconos con contraste ---------- */
.pth .pth-t{display:inline-flex;align-items:center;gap:10px;min-width:0}
.pth .pth-t strong{font:600 1.05rem/1.25 var(--k-display);color:var(--k-ink);letter-spacing:-.01em}
.pth .pth-ic{display:grid;place-items:center;width:34px;height:34px;flex:none;border-radius:11px;background:var(--k-tile1);color:var(--k-ink)}
.pth .pth-ic .ic{width:18px;height:18px;color:var(--k-ink)!important;stroke:var(--k-ink)!important;fill:none;opacity:1!important}
.pth.c0 .pth-ic{background:var(--k-tile0)}.pth.c1 .pth-ic{background:var(--k-tile1)}.pth.c2 .pth-ic{background:var(--k-tile2)}.pth.c3 .pth-ic{background:var(--k-tile3)}
.pth.c4 .pth-ic{background:var(--k-tile4)}.pth.c5 .pth-ic{background:var(--k-tile5)}.pth.c6 .pth-ic{background:var(--k-tile6)}.pth.c7 .pth-ic{background:var(--k-tile7)}
.pth>.qhead:first-child{align-items:center;margin-bottom:4px}
/* ---------- borrar mis datos: disponible, pero sin protagonismo ---------- */
.pf-more{margin-top:14px;border-top:1px solid var(--k-line);padding-top:10px}
.pf-more>summary{display:inline-flex;align-items:center;gap:6px;cursor:pointer;list-style:none;font:500 .82rem var(--k-body);color:var(--k-ink2);padding:6px 2px;border-radius:8px}
.pf-more>summary::-webkit-details-marker{display:none}
.pf-more>summary::after{content:"";width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s ease}
.pf-more[open]>summary::after{transform:rotate(225deg) translateY(-1px)}
.pf-more>summary:hover{color:var(--k-ink)}
.pf-more>summary:focus-visible,.pf-del-link:focus-visible{outline:3px solid var(--k-focus);outline-offset:2px}
.pf-more>p{margin:6px 0 8px;max-width:52ch}
.pf-del-link{border:0;background:none;padding:4px 0;font:600 .85rem var(--k-body);color:var(--k-bad);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.pf-del-link.is-confirm{padding:8px 14px;border-radius:999px;background:var(--k-bad);color:#fff;text-decoration:none}
@media (prefers-reduced-motion:reduce){.pf-more>summary::after{transition:none}}
/* ---------- respuesta (acierto / error): movimiento suave, sin vibración (30/10/2026) ---------- */
@keyframes resp-error{0%{transform:none}40%{transform:scale(.993)}100%{transform:none}}
@keyframes resp-acierto{0%{transform:none}40%{transform:scale(1.006)}100%{transform:none}}
@keyframes resp-aviso{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
.tile.wrong{animation:resp-error .42s cubic-bezier(.23,1,.32,1) both}
.tile.right{animation:resp-acierto .5s cubic-bezier(.23,1,.32,1) both}
.fb{animation:resp-aviso .35s cubic-bezier(.23,1,.32,1) both}
.tile{transition:background-color .25s ease,border-color .25s ease,color .25s ease}}
@media (prefers-reduced-motion:reduce){.tile.wrong,.tile.right,.fb{animation:none}}
/* ---------- opciones de respuesta: blancas con la letra en color; verde/rojo solo para acierto/error (30/10/2026) ----------
Antes cada opción tenía fondo pastel (rosa, azul, amarillo, verde) y el verde/rosa se confundían con acierto/error */
.tile,.tile.t0,.tile.t1,.tile.t2,.tile.t3{background:var(--k-surface)!important;border:1.5px solid rgba(20,33,58,.10)!important}
.tile .shape{color:var(--k-ink)!important;font-weight:700}
.tile.t0 .shape{background:#F3D9CF}.tile.t1 .shape{background:#D3E2F5}.tile.t2 .shape{background:#F2E5BE}.tile.t3 .shape{background:#E2DCF3}
@media (hover:hover) and (pointer:fine){.tile:hover:not(:disabled){border-color:rgba(47,93,184,.45)!important}}
.tile.sel{border-color:var(--k-focus)!important;box-shadow:0 0 0 1px var(--k-focus)!important}
.tile.dim{opacity:.5}
.tile.right{background:var(--k-good-soft)!important;border-color:var(--k-good)!important;box-shadow:none!important}
.tile.wrong{background:var(--k-bad-soft)!important;border-color:var(--k-bad)!important;box-shadow:none!important}
.tile.right .shape{background:var(--k-good)!important;color:#fff!important}
.tile.wrong .shape{background:var(--k-bad)!important;color:#fff!important}
/* al responder, la pantalla del juego se vuelve a dibujar: sin animación de entrada en pregunta y opciones (evita el "flash")
y las opciones no elegidas se atenúan al instante */
.qcard,.tiles .tile:not(.right):not(.wrong){animation:none!important}
.tile.dim{opacity:.45;transition:none!important}
/* ===== Mejoras 30/10/2026: seguridad y errores (panel docente) ===== */
#t-sec .ts-k{cursor:default}
#t-sec .sec-grid{margin:12px 0}
.ts-alert{display:block;width:100%;text-align:left;margin-top:12px;cursor:pointer;font:inherit;color:inherit}
.wl-minor{margin:4px 2px 0}
#view-teacher td.nw{white-space:nowrap}
/* ===== Mejoras 30/10/2026: estudiantes (repaso, metas, simulacro, vitrina) ===== */
.nudge{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#FFF6DF;border:1px solid #F1D9A0;color:var(--k-ink,#14213A);border-radius:20px;padding:12px 16px;margin:4px 0 6px;font-size:.95rem}
.nudge>svg{width:22px;height:22px;flex:none;color:#C26A12}
.nudge span{flex:1 1 220px}
.nudge.ok{background:#E8F5EC;border-color:#BFE0CA}
.nudge.ok>svg{color:#2B7046}
.wk-set{align-items:flex-end;margin-top:10px;gap:14px}
.wk.rem{margin-top:14px}
.sim .tile.sel{outline:3px solid var(--k-focus,#2F5DB8);outline-offset:2px}
.sim .chip.tm.low{background:#AE3F36;color:#fff}
.sim-nav{display:flex;flex-wrap:wrap;gap:6px}
.sim-n{min-width:36px;height:36px;border-radius:999px;border:1px solid var(--line,#d5dbe6);background:#fff;color:#14213A;font:600 .85rem/1 inherit;cursor:pointer}
.sim-n.on{background:#DCEBFF;border-color:#9DBDF0}
.sim-n.cur{outline:2px solid #14213A;outline-offset:1px}
.sim-rev{gap:12px}
.sim-item{border:1px solid var(--line,#e2e6ee);border-radius:18px;padding:12px 14px;background:#fff}
.sim-item p{margin:6px 0}
.sim-q{font-weight:600}
.bshow{margin-top:6px;border:1px solid var(--line,#d5dbe6);background:#fff;color:#14213A;border-radius:999px;padding:5px 10px;font:600 .78rem/1.2 inherit;cursor:pointer}
.bshow.on{background:#14213A;color:#fff;border-color:#14213A}
.vt-wrap{margin:12px 0 4px}
.vitrina{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:8px}
.vt{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border:1px solid var(--line,#e2e6ee);border-radius:18px;padding:10px 6px;background:#fff}
.vt.empty{border-style:dashed;color:#51607A;background:transparent}
.vt-i{font-size:1.6rem;line-height:1}
.vt-i svg{width:28px;height:28px}
.vt-n{font-size:.8rem;font-weight:600}
@media (prefers-reduced-motion:reduce){.sim-n,.bshow{transition:none}}
.wk-set .f{min-width:190px}
/* ===== Mejoras 30/10/2026: docentes (grupos, inactivos, reportes, banco de preguntas) ===== */
.gr-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin:10px 0 14px}
.gr-card{border:1px solid var(--line,#e2e6ee);border-radius:22px;padding:14px;background:#fff;display:flex;flex-direction:column;gap:8px}
.gr-q{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px;border-top:1px dashed var(--line,#e2e6ee);padding-top:6px}
.gr-q details{flex-basis:100%}
.gr-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 12px;max-height:280px;overflow:auto;padding:8px;border:1px solid var(--line,#e2e6ee);border-radius:16px;background:#fff;margin:8px 0}
.gr-st{display:flex;align-items:center;gap:6px;font-size:.92rem;padding:3px 0;cursor:pointer}
.gr-st input{width:18px;height:18px;flex:none}
.rp-view{margin-top:12px;border:1px solid var(--line,#e2e6ee);border-radius:22px;padding:14px;background:#fff}
.rp-view h4{margin:14px 0 6px}
.qb-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.qb-row{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line,#e2e6ee);border-radius:18px;padding:10px 12px;background:#fff;flex-wrap:wrap}
.qb-ck input{width:18px;height:18px;margin-top:3px}
.qb-tx{flex:1 1 260px;display:flex;flex-direction:column;gap:3px;min-width:0;overflow-wrap:anywhere}
.qb-file{cursor:pointer}
/* =====================================================================
VENTANA «ENTRA A PRACTICAR» Y ACCESO DOCENTE (31/10/2026)
Entrada suave: el fondo se oscurece y la ventana sube un poco, sin que el texto de la portada se transparente
por encima. En celular la ventana queda pegada arriba, así al abrirse el teclado no salta ni tapa tu nombre.
===================================================================== */
.panel.lp-card{transform:translate(-50%,-48%) scale(.985);transition:opacity .2s ease-out,transform .34s cubic-bezier(.2,.9,.3,1),visibility 0s .34s}
.qz-top.open .panel.lp-card{transform:translate(-50%,-50%)}
.lp-card #lp-card-t:focus{outline:0}
.lp-card input[type=text],.lp-card input[type=password]{animation:none!important;transition:border-color .18s ease,box-shadow .18s ease,background-color .18s ease}
.lp-card input[type=text]:focus,.lp-card input[type=password]:focus{outline:0!important;background:#fff;box-shadow:0 0 0 4px rgba(47,93,184,.16)}
@media (max-width:899px){
.panel.lp-card{top:max(12px,env(safe-area-inset-top));max-height:calc(100dvh - 24px);transform:translate(-50%,16px);overscroll-behavior:contain;scroll-padding:24px}
.qz-top.open .panel.lp-card{max-height:calc(100dvh - 24px);transform:translate(-50%,0)}
}
@media (prefers-reduced-motion:reduce){.panel.lp-card,.qz-top.open .panel.lp-card{transition:none}}
#login .pw-forgot{align-self:flex-end;margin-top:2px;padding:4px 2px;border:0;background:none;font:inherit;font-size:.86rem;font-weight:600;color:var(--k-focus,#2F5DB8);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;cursor:pointer;border-radius:6px}
#login .pw-forgot[aria-expanded="true"]{text-decoration:none}
@media (hover:hover) and (pointer:fine){#login .pw-forgot:hover{text-decoration-thickness:2px}}
#login .pw-rec{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:-4px;padding:14px 16px;border-radius:16px;background:var(--k-hover,#EEF2F8)}
#login .pw-rec[hidden]{display:none}
#login .pw-rec p{margin:0;line-height:1.45;font-weight:400;color:var(--k-ink,#162137)}
#login .pw-rec #lg-recmsg:empty{display:none}
/* Mi progreso (31/10/2026): «Mi perfil» sube justo debajo de «Tu rendimiento», antes de Misiones y Próximas metas */
#view-progress>.panel.pf{order:2;grid-column:1/-1}
@media (min-width:900px){#view-progress>.panel:nth-child(7):not(.pf){grid-column:1/-1}}
/* =====================================================================
PREFERENCIAS (mejoras 16, 17 y 18). prefs.js pone en : data-tema, data-contraste, data-letra,
data-lectura y data-mov. Todo el color sale de los tokens --k-*: el modo oscuro solo los redefine
y corrige las pocas piezas con color fijo.
===================================================================== */
/* botón ⚙ del encabezado */
.top-prefs{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:8px 14px;border-radius:999px;border:1px solid var(--k-line-strong);background:var(--k-surface2);color:var(--k-ink);font:600 .9rem var(--k-display);cursor:pointer;flex:0 0 auto}
.top-prefs svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (hover:hover) and (pointer:fine){.top-prefs:hover{background:var(--k-hover)}}
@media (max-width:900px){.top-prefs .tp-l{display:none}.top-prefs{padding:8px;width:44px;justify-content:center}}
/* ventana de preferencias */
#prefs{max-width:620px}
#prefs .pf-intro{margin:0 0 6px}
.pf-set{border:0;margin:0;padding:0;min-width:0}
.pf-set legend{font:600 1rem var(--k-display);color:var(--k-ink);padding:0;margin:14px 0 8px}
.pf-seg{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.pf-opt{position:relative;display:block;cursor:pointer}
.pf-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pf-opt>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:8px 10px;border-radius:16px;border:1px solid var(--k-line-strong);background:var(--k-surface2);color:var(--k-ink);font-weight:600;text-align:center;line-height:1.2;transition:background-color .15s,border-color .15s}
.pf-opt small{font-weight:500;font-size:.76rem;color:var(--k-ink2)}
.pf-opt input:checked+span{background:var(--k-sel);color:var(--k-sel-ink);border-color:var(--k-sel)}
.pf-opt input:checked+span small{color:inherit;opacity:.85}
.pf-opt input:focus-visible+span{outline:3px solid var(--k-focus);outline-offset:2px}
.pf-a{font-family:var(--k-display);font-weight:700;line-height:1}
.pf-sw{display:flex;align-items:center;gap:14px;margin-top:14px;padding:12px 14px;border-radius:16px;border:1px solid var(--k-line-strong);background:var(--k-surface2);cursor:pointer;position:relative}
.pf-sw input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pf-sw-t{flex:1;display:flex;flex-direction:column;gap:2px;font:600 1rem var(--k-display);color:var(--k-ink)}
.pf-sw-t small{font:500 .82rem var(--k-body);color:var(--k-ink2);line-height:1.35}
.pf-sw-k{flex:0 0 auto;width:48px;height:28px;border-radius:999px;background:var(--k-track);position:relative;transition:background-color .2s}
.pf-sw-k::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s var(--ease-out,ease)}
.pf-sw input:checked~.pf-sw-k{background:var(--k-good)}
.pf-sw input:checked~.pf-sw-k::after{transform:translateX(20px)}
.pf-sw input:focus-visible~.pf-sw-k{outline:3px solid var(--k-focus);outline-offset:2px}
.pf-note{margin:8px 0 0}
.pf-acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
/* 17. tamaño de letra (todo el diseño usa rem, así crece en proporción) */
html[data-letra="2"]{font-size:112.5%}
html[data-letra="3"]{font-size:125%}
html[data-letra="4"]{font-size:137.5%}
/* 17. letra fácil de leer: Lexend (ya incluida en el sitio) con un poco más de aire */
html[data-lectura="facil"]{--k-body:"Lexend","Trebuchet MS",system-ui,sans-serif;--k-display:"Lexend","Trebuchet MS",system-ui,sans-serif;--f-body:var(--k-body);--f-display:var(--k-display)}
html[data-lectura="facil"] body{letter-spacing:.02em;word-spacing:.08em}
html[data-lectura="facil"] p,html[data-lectura="facil"] li{line-height:1.65}
html[data-lectura="facil"] input,html[data-lectura="facil"] button,html[data-lectura="facil"] textarea,html[data-lectura="facil"] select{font-family:var(--k-body)}
/* 18. menos movimiento: sin animaciones ni transiciones (por elección o porque el dispositivo lo pide) */
html[data-mov="menos"] *,html[data-mov="menos"] *::before,html[data-mov="menos"] *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
html[data-mov="menos"]{scroll-behavior:auto!important}
/* 16. modo oscuro */
html[data-tema="oscuro"]{color-scheme:dark;
--k-ink:#E8EDF6; --k-ink2:#AAB5C9;
--k-bg:linear-gradient(180deg,#0D1524 0%,#111A2B 55%,#131B2B 100%); --k-bg-solid:#111A2B;
--k-surface:#18233A; --k-surface2:#1F2B45; --k-field:#141E33;
--k-line:rgba(232,237,246,.10); --k-line-strong:rgba(232,237,246,.26);
--k-shadow:0 18px 40px -22px rgba(0,0,0,.75),0 2px 6px rgba(0,0,0,.25);
--k-shadow-sm:0 8px 20px -14px rgba(0,0,0,.7); --k-shadow-hover:0 28px 52px -24px rgba(0,0,0,.8);
--k-primary:#E8EDF6; --k-primary-ink:#0E1626; --k-primary-hover:#C9D3E5;
--k-sel:#E8EDF6; --k-sel-ink:#0E1626; --k-sel-soft:#26395C; --k-hover:#24324E;
--k-focus:#8DB4FF; --k-focus-ring:rgba(141,180,255,.35); --k-link:#9DC1FF;
--k-good:#7FD39A; --k-good-soft:#1C3A2A; --k-bad:#FF9D92; --k-bad-soft:#47241F; --k-warn:#F2C76B; --k-warn-soft:#3D3118;
--k-track:#2C3A56; --k-fill:#6FB582; --k-star:#F2B843;
--k-tile0:#4A302B; --k-tile1:#233A5B; --k-tile2:#473D1F; --k-tile3:#25412D; --k-tile4:#352F53; --k-tile5:#1F4645; --k-tile6:#4B3622; --k-tile7:#38352E;
--k-tile-ink:#EEF2F8; --k-glyph:rgba(255,255,255,.16); --k-locked:rgba(255,255,255,.05);
--k-ans0:#4A302B; --k-ans1:#233A5B; --k-ans2:#473D1F; --k-ans3:#25412D; --k-ans-ink:#EEF2F8;
--k-bar:#0B1220; --k-bar-line:rgba(255,255,255,.10); --k-bar-ink:#C9D3E5; --k-bar-sel:#E8EDF6; --k-bar-sel-ink:#0E1626;
--k-overlay:rgba(3,6,12,.66);
--k-marquee:#0B1220; --k-marquee-ink:#E8EDF6; --k-band:#16223A; --k-footer:#0B1220; --k-footer-ink:#D8DFEC;
--hb-bub:#24324E; --hb-ink:#E8EDF6; --hb-line:rgba(232,237,246,.18);
--tint-blue:#233A5B; --tint-violet:#352F53; --tint-yellow:#473D1F; --tint-pink:#4A302B; --tint-green:#25412D;
--warn-soft:#3D3118; --sel:#26395C; --hov:#24324E}
html[data-tema="oscuro"] body{background:transparent;color:var(--k-ink)}
html[data-tema="oscuro"] input[type=text],html[data-tema="oscuro"] input[type=password],html[data-tema="oscuro"] input[type=email],html[data-tema="oscuro"] input[type=number],html[data-tema="oscuro"] input[type=search],html[data-tema="oscuro"] input[type=date],html[data-tema="oscuro"] input[type=time],html[data-tema="oscuro"] textarea,html[data-tema="oscuro"] select{background:var(--k-field)!important;color:var(--k-ink)!important;border-color:var(--k-line-strong)!important}
html[data-tema="oscuro"] ::placeholder{color:#7F8BA2}
html[data-tema="oscuro"] a{color:var(--k-link)}
html[data-tema="oscuro"] .wordmark{filter:invert(1) hue-rotate(180deg) brightness(1.1)}
html[data-tema="oscuro"] .sf-brand .wordmark{filter:none}
html[data-tema="oscuro"] #welcome>.qz-top{background-image:linear-gradient(rgba(13,21,36,.55),rgba(13,21,36,.7)),url("assets/img/hero-escritorio.webp")!important}
@media (max-width:899px){html[data-tema="oscuro"] #welcome>.qz-top{background-image:linear-gradient(rgba(13,21,36,.7),rgba(13,21,36,.84)),url("assets/img/hero-movil.webp")!important}}
html[data-tema="oscuro"] img:not(.wordmark){filter:brightness(.92)}
/* 16. alto contraste (claro y oscuro) */
html[data-contraste="alto"]{--k-ink2:var(--k-ink);--k-line:rgba(20,33,58,.55);--k-line-strong:#14213A;--k-surface2:#FFFFFF;--k-bg:#FFFFFF;--k-bg-solid:#FFFFFF;--k-focus:#0B3FA8;--k-link:#0B3FA8;--k-good:#14552C;--k-bad:#8E1F16}
html[data-contraste="alto"][data-tema="oscuro"]{--k-ink:#FFFFFF;--k-line:rgba(255,255,255,.6);--k-line-strong:#FFFFFF;--k-surface:#000000;--k-surface2:#0B0B0B;--k-field:#000000;--k-bg:#000000;--k-bg-solid:#000000;--k-focus:#FFD84D;--k-link:#9FD0FF;--k-good:#8EF0AE;--k-bad:#FFB0A6}
html[data-contraste="alto"] a{text-decoration:underline!important;text-underline-offset:3px}
html[data-contraste="alto"] :focus-visible{outline-width:4px!important}
html[data-contraste="alto"] .muted,html[data-contraste="alto"] .small.muted,html[data-contraste="alto"] .hint{color:var(--k-ink)!important;opacity:1!important}
html[data-tema="oscuro"] body.is-gate .top{background:var(--k-surface)!important}
@media (max-width:899px){body.is-gate .top-prefs{margin-left:auto}}
html[data-tema="oscuro"] .fc-f,html[data-tema="oscuro"] .fc-b{background:var(--k-surface2)}
html[data-tema="oscuro"] .qz-step-art{background:var(--k-surface2)!important}
html[data-tema="oscuro"] #welcome>.qz-top p,html[data-tema="oscuro"] #welcome>.qz-top li,html[data-tema="oscuro"] #welcome>.qz-top li *{text-shadow:none!important}
html[data-tema="oscuro"] .skip{background:var(--k-surface);color:var(--k-ink)}
/* 20. recorrido de bienvenida */
.ovl.tour{max-width:440px;text-align:center;padding:clamp(24px,4vw,36px)!important}
.tour-art{width:88px;height:88px;margin:4px auto 14px;border-radius:28px;display:grid;place-items:center;background:var(--k-tile1);color:var(--k-tile-ink)}
.tour-art .ic{width:44px;height:44px}
.tour-step{margin:0;font:600 .8rem var(--k-body);letter-spacing:.06em;text-transform:uppercase;color:var(--k-ink2)}
.tour h2{margin:6px 0 10px;font-size:1.5rem}
.tour-d{margin:0 auto;max-width:34ch;line-height:1.55;color:var(--k-ink)}
.tour-dots{display:flex;justify-content:center;gap:8px;margin:18px 0}
.tour-dots i{width:8px;height:8px;border-radius:99px;background:var(--k-track);transition:width .25s var(--ease-out,ease),background-color .25s}
.tour-dots i.on{width:24px;background:var(--k-ink)}
.tour-acts{display:flex;justify-content:center;flex-wrap:wrap;gap:8px}
.tour-acts .btn:last-child{min-width:140px}
/* Preferencias y recorrido: ventanas centradas como «Acceso docente» */
#prefs,#tour{inset:auto;top:50%;left:50%;z-index:80;width:min(580px,calc(100vw - 32px));max-height:min(90vh,900px);max-height:min(90dvh,900px);border-radius:var(--r-card)!important;background:var(--k-surface)!important;padding:clamp(22px,3.2vw,34px)!important;transform:translate(-50%,-50%);border:1px solid var(--k-line)!important}
#tour{width:min(440px,calc(100vw - 32px))}
#prefs:not([hidden]),#tour:not([hidden]){box-shadow:0 30px 80px -20px rgba(0,0,0,.45),0 0 0 100vmax var(--k-overlay)!important;animation:modal-in2 .28s cubic-bezier(.2,.8,.2,1) both}
#prefs h2:focus,#tour h2:focus,#privacy h2:focus,#login h2:focus{outline:0}
/* 19. siluetas de carga y pantallas vacías */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skel-b{display:block;border-radius:12px;background:linear-gradient(90deg,var(--k-track) 0%,var(--k-surface2) 45%,var(--k-track) 90%);background-size:220% 100%;animation:skel 1.3s ease-in-out infinite}
@keyframes skel{from{background-position:120% 0}to{background-position:-120% 0}}
.skel{display:flex;flex-direction:column;gap:14px;margin-top:12px}
.skel-row{display:flex;align-items:center;gap:14px}
.skel-col{flex:1;display:flex;flex-direction:column;gap:8px}
.skel-col .skel-b{height:14px}
.skel-col .sk-sm{height:10px;opacity:.75}
.sk-ic{flex:0 0 auto;width:44px;height:44px;border-radius:14px}
.boot-skel{display:none}
html[data-sesion] body:not(.ready) .boot-skel{display:block;max-width:1180px;margin:0 auto;padding:16px}
.bs-top{height:64px;border-radius:999px;margin-bottom:20px}
.bs-grid{display:grid;grid-template-columns:240px 1fr;gap:20px}
.bs-side{height:420px;border-radius:30px}
.bs-main{display:flex;flex-direction:column;gap:18px}
.bs-hero{height:120px;border-radius:30px}
.bs-row{display:flex;gap:10px;flex-wrap:wrap}.bs-row span{width:130px;height:36px;border-radius:999px}
.bs-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}.bs-cards span{height:180px;border-radius:26px}
@media (max-width:899px){.bs-grid{grid-template-columns:1fr}.bs-side{display:none}.bs-cards{grid-template-columns:1fr 1fr}}
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:22px 16px;border:1px dashed var(--k-line-strong);border-radius:22px;background:var(--k-surface2);color:var(--k-ink2)}
.empty p{margin:0;max-width:46ch;line-height:1.5}
.empty-art{width:60px;height:60px;border-radius:20px;display:grid;place-items:center;background:var(--k-tile1);color:var(--k-tile-ink)}
.empty-art .ic{width:30px;height:30px}
html[data-mov="menos"] .skel-b{animation:none}
@media (prefers-reduced-motion:reduce){.skel-b{animation:none}}
/* modo oscuro: piezas con color fijo que quedaban con poco contraste (revisión con axe, mejora 21) */
html[data-tema="oscuro"] .ts-k small,html[data-tema="oscuro"] .vt-n{color:var(--k-ink2)!important}
.pf-av{color:#14213A!important}
html[data-tema="oscuro"] #t-purge{color:#2A0E0B!important}
html[data-tema="oscuro"] .ok,html[data-tema="oscuro"] .note.ok{color:var(--k-good)!important}
html[data-tema="oscuro"] .ts-alert,html[data-tema="oscuro"] .ts-alert strong,html[data-tema="oscuro"] [role="alert"],html[data-tema="oscuro"] [role="alert"] strong,html[data-tema="oscuro"] .note.err{color:var(--k-bad)!important}
/* botón dentro del título de cada panel docente (pliega y despliega) */
.fold-b{display:block;width:100%;margin:0;padding:0;border:0;background:none;font:inherit;color:inherit;letter-spacing:inherit;text-align:inherit;cursor:pointer;border-radius:10px}
.fold-b:focus-visible{outline:3px solid var(--k-focus);outline-offset:4px}
/* Inglés (mejora 22): oculta la página un instante mientras carga la traducción (máximo 1,5 s) */
html[data-i18n="cargando"] body{visibility:hidden}
/* Modo oscuro: la barra superior dentro de la app (celular y escritorio) y las letras A–E de las opciones */
html[data-tema="oscuro"] .top,html[data-tema="oscuro"] body:not(.is-gate) .top{background:var(--k-surface)!important}
html[data-tema="oscuro"] .tile .shape{color:#14213A!important}
/* =====================================================================
Vista del estudiante (31/10/2026): menú lateral sin solaparse, espacios y lugares fijos para publicidad.
===================================================================== */
@media (min-width:960px){
/* --top-h y --tabs-h los mide app.js con la altura real de cada tarjeta */
body:not(.is-gate) .tabs{top:calc(var(--gut) + var(--top-h,262px))!important}
body:not(.is-gate) .side-owl,body:not(.is-gate) .tabs:has(#tab-teacher:not([hidden]))~.side-owl{top:calc(var(--gut) + var(--top-h,262px) + var(--tabs-h,170px) + 18px)!important}
body:not(.is-gate) .shell{column-gap:48px;row-gap:16px}
/* En escritorio los temas ya están en la cuadrícula de abajo: no se repiten como píldoras */
#view-practice .qk-row{display:none}
#view-practice .qk-sug{max-width:640px}
}
/* Espacios de publicidad (apagados mientras config.js tenga anuncios:false). Tamaños estándar:
- en el contenido: 728x90 en escritorio, 320x100 en celular
- Mi progreso: 300x250
- menú lateral (solo escritorio ancho): 250x250, ocupa el lugar del búho
- pie de página: 728x90
Siempre con la palabra «Publicidad» encima y separados de botones y del menú, para evitar toques sin querer.
Nunca dentro de un quiz, un simulacro ni en la pantalla de resultados. */
.ad-slot{margin:28px auto;border-radius:16px;background:var(--k-surface,#fff);border:1px dashed var(--k-line-strong,#CFC8B4)}
.ad-slot .ad-lbl{top:-20px;left:0;width:100%;text-align:center;color:var(--k-ink2,#5B6478);font-size:.7rem;letter-spacing:.08em;text-transform:uppercase}
.ad-slot{overflow:visible}
#view-practice>.ad-slot,#view-progress>.ad-slot{margin-top:36px;margin-bottom:28px}
.ad-side{display:none}
@media (min-width:1200px) and (min-height:840px){
body.has-ads:not(.is-gate) .side-owl{display:none!important}
body:not(.is-gate) .ad-side:not([hidden]){display:flex;grid-column:1;grid-row:3;align-self:start;position:sticky;top:calc(var(--gut) + var(--top-h,262px) + var(--tabs-h,170px) + 40px);width:250px;height:250px;max-width:250px;margin:24px auto 0}
}
.site-foot .ad-foot{margin:28px auto 34px;background:rgba(255,255,255,.06);border:1px dashed rgba(255,255,255,.3)}
.site-foot .ad-foot .ad-lbl{color:rgba(255,255,255,.7)}
@media (max-width:959px){
/* La barra inferior fija no tapa el último anuncio ni el pie de página */
body:not(.is-gate) .site-foot{padding-bottom:calc(110px + env(safe-area-inset-bottom,0px))}
/* El nombre del rango se lee completo */
.lv-pro .lv-rk strong{white-space:normal;overflow:visible;text-overflow:clip}
}
/* Pie de página ordenado en columnas: marca · Sobre ESTRAIK · Información legal */
.site-foot .sf-links::before{content:attr(aria-label);display:block;width:100%;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;opacity:.65;margin-bottom:2px}
.site-foot .sf-copy{border-top:1px solid rgba(255,255,255,.12);padding-top:16px;margin-top:6px}
@media (min-width:900px){
.site-foot .sf-in{display:grid!important;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1.3fr);gap:24px 48px;align-items:start;max-width:1120px;margin-inline:auto}
.site-foot .sf-links{display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:9px!important;margin:0!important}
.site-foot .sf-copy{grid-column:1/-1;text-align:left}
}
/* Menú lateral como UNA sola columna fija (31/10/2026): tarjeta, menú y búho/anuncio se mueven juntos y nunca se enciman.
En celular y en la portada la envoltura no existe para el diseño (display:contents). */
.side-col{display:contents}
@media (min-width:960px){
body:not(.is-gate) .side-col{grid-column:1;grid-row:1 / span 3;align-self:start;position:sticky;top:var(--gut);display:flex;flex-direction:column;gap:16px;min-width:0}
body:not(.is-gate) .side-col>.top,body:not(.is-gate) .side-col>.tabs,body:not(.is-gate) .side-col>.side-owl,body:not(.is-gate) .side-col>.ad-side{position:relative!important;top:auto!important;grid-column:auto;grid-row:auto}
body:not(.is-gate) .side-col>.side-owl{display:block!important;margin-top:8px;width:var(--owl-w,100%);max-width:100%;align-self:center}
html.owl-sin-lugar body:not(.is-gate) .side-col>.side-owl{display:none!important}
body:not(.is-gate) .side-col>.ad-side:not([hidden]){margin:28px auto 0}
}
@media (min-width:960px) and (max-height:839px){body:not(.is-gate) .side-col>.ad-side{display:none!important}}
/* Mi progreso (31/10/2026): «Mi perfil» va dentro de la tarjeta del rango; misiones a la izquierda y
metas + recordatorio + tareas a la derecha, para que no queden huecos. Reemplaza el orden antiguo por posición. */
#view-progress>*{order:0!important;grid-column:1/-1!important}
#view-progress>.ad-slot{order:999!important}
.pg-hero{display:grid!important;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(18px,3vw,36px);align-items:center}
.pg-hero .pg-id{grid-column:1/-1;display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:18px;border-bottom:1px solid rgba(255,255,255,.18)}
.pg-hero .pf-av{width:48px;height:48px;border-radius:16px;font-size:1.05rem;border:0;color:#14213A!important}
.pg-hero .pg-who{flex:1 1 160px;min-width:0}
.pg-hero .pf-name{margin:0;font-size:1.1rem;font-weight:700;line-height:1.2;overflow-wrap:anywhere}
.pg-hero .pg-cur{font-size:.8rem;opacity:.85}
.pg-hero .pg-team{display:flex;align-items:center;gap:8px;font-size:.78rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.pg-hero .pg-team select{min-width:150px;padding:8px 12px;border-radius:12px;border:0;background:rgba(255,255,255,.92);color:#14213A!important;font:600 .9rem var(--k-body,inherit);text-transform:none;letter-spacing:0}
.pg-hero .pg-team select option{color:#14213A}
.pg-hero .pf-sync{margin-top:12px;font-size:.85rem;color:inherit;opacity:.9}
.pg-hero .pf-sync .pf-dot{flex:0 0 auto}
@media (max-width:640px){.pg-hero{grid-template-columns:1fr}.pg-hero .pg-emb{justify-self:center}.pg-hero .pg-team{width:100%}.pg-hero .pg-team select{flex:1}}
.pg-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--gap-m,20px);align-items:start}
.pg-duo>.panel,.pg-side>.panel{margin:0}
.pg-side{display:flex;flex-direction:column;gap:var(--gap-m,20px);min-width:0}
@media (max-width:899px){.pg-duo{grid-template-columns:1fr}}
.pg-bdg .vt-wrap{margin:4px 0 14px}
/* Las dos columnas terminan a la misma altura: el último panel de cada una se estira */
.pg-duo{align-items:stretch}
.pg-side>.panel:last-child{flex:1 1 auto}
.pg-side>.panel:last-child .empty{height:calc(100% - 44px);display:flex;flex-direction:column;justify-content:center}
@media (max-width:640px){.pg-hero .pg-emb svg{width:84px;height:auto}.pg-hero .pg-id{margin-bottom:12px;padding-bottom:12px}}
/* Insignias: una sola fila que se desliza (con flechas en computadora), en vez de una lista larguísima */
.pg-bdg .bdg-rail{position:relative;display:flex;align-items:center;gap:8px}
.pg-bdg .badges2{display:flex!important;grid-template-columns:none!important;gap:14px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 12px;scrollbar-width:thin;flex:1 1 auto;min-width:0}
.pg-bdg .bdg2{flex:0 0 200px;scroll-snap-align:start}
.pg-bdg .bdg-nav{flex:0 0 40px;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--k-line,#E4DFCF);background:var(--k-surface,#fff);color:var(--k-ink,#14213A);cursor:pointer}
.pg-bdg .bdg-nav svg{width:18px;height:18px}
.pg-bdg .bdg-nav.next svg{transform:scaleX(-1)}
.pg-bdg .bdg-nav:hover{background:var(--k-surface-2,#F3EFE4)}
@media (max-width:759px){.pg-bdg .bdg-nav{display:none}.pg-bdg .bdg2{flex-basis:170px}}
/* Modo oscuro: textos que quedaban claros sobre fondos pastel */
html[data-tema="oscuro"] .top .badge,html[data-tema="oscuro"] .top .badge *{color:#14213A!important}
html[data-tema="oscuro"] .top .badge::before{background:#14213A!important}
html[data-tema="oscuro"] .wl-n{color:#14213A!important}
html[data-tema="oscuro"] .nudge{background:var(--k-surface-2,#1E2A44)!important;color:var(--k-ink)!important;border-color:var(--k-line,rgba(255,255,255,.12))!important}
html[data-tema="oscuro"] .nudge>span,html[data-tema="oscuro"] .nudge>span *{color:inherit}
html[data-tema="oscuro"] .vt-i{color:var(--k-ink2)!important}
html[data-tema="oscuro"] .m-podium>span>span,html[data-tema="oscuro"] .m-podium span{color:#14213A!important}
@media (min-width:1200px) and (min-height:840px){html body.has-ads:not(.is-gate) .side-col>.side-owl{display:none!important}}
html body:not(.is-gate) .side-col>.side-owl,html body:not(.is-gate) .side-col>.tabs:has(#tab-teacher:not([hidden]))~.side-owl{top:auto!important}
/* Insignias: botón para verlas todas hacia abajo (cuadrícula) en vez de la fila deslizable */
.pg-bdg .bdg-more{display:flex;justify-content:center;margin-top:6px}
.pg-bdg.is-grid .bdg-nav{display:none}
.pg-bdg.is-grid .badges2{flex-wrap:wrap!important;overflow:visible!important;display:grid!important;grid-template-columns:repeat(auto-fill,minmax(180px,1fr))!important}
.pg-bdg.is-grid .bdg2{flex:none}
/* Portada: sin botón Preferencias (está dentro de la app). El modo claro/oscuro se cambia con el sol/luna del pie. */
body.is-gate .top-prefs{display:none!important}
.sf-bottom{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sf-bottom p{margin:0}
.theme-tg{position:relative;display:inline-flex;align-items:center;gap:4px;padding:4px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(255,255,255,.08);cursor:pointer;flex:0 0 auto}
.theme-tg svg{width:32px;height:32px;padding:6px;border-radius:50%;fill:none;stroke:rgba(255,255,255,.75);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:background .2s ease,stroke .2s ease}
.theme-tg .tg-sun{background:#FFD45C;stroke:#14213A}
.theme-tg .tg-sun circle{fill:#14213A}
html[data-tema="oscuro"] .theme-tg .tg-sun{background:transparent;stroke:rgba(255,255,255,.75)}
html[data-tema="oscuro"] .theme-tg .tg-sun circle{fill:none}
html[data-tema="oscuro"] .theme-tg .tg-moon{background:#C9D6FF;stroke:#14213A;fill:#14213A}
.theme-tg:focus-visible{outline:3px solid #FFD45C;outline-offset:3px}
@media (hover:hover) and (pointer:fine){.theme-tg:hover{background:rgba(255,255,255,.16)}}