/* IAPRENDE · estilos (separados de index.html el 2026-10-16) */
:root{color-scheme:dark;box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
--bg:#000;--chrome:#0e0e0e;--panel:#1d1d1f;--steel:#333336;--slate:#6e6e73;--ash:#86868b;--text:#f5f5f7;--blue:#0071e3;--link:#2997ff;--ok:#30d158;--bad:#ff453a;
--sf:'SF Pro Display','SF Pro Text',Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 60px)}
body{background:var(--bg);color:var(--text);font-family:var(--sf);font-size:17px;line-height:1.47;letter-spacing:-.374px;-webkit-font-smoothing:antialiased}
a{color:var(--link);text-decoration:none}
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;height:44px;background:rgba(0,0,0,.8);backdrop-filter:blur(20px);display:flex;align-items:center;justify-content:space-between;padding:0 max(16px,4vw);font-size:14px;letter-spacing:-.12px}
nav b{font-size:14px;font-weight:600}nav .l{display:flex;gap:22px;color:rgba(255,255,255,.8)}nav .l a{color:inherit}
.stats{display:flex;gap:14px;color:var(--text)}
.pill{display:inline-block;border:0;cursor:pointer;font:400 14px/16px var(--sf);letter-spacing:-.12px;padding:11px 20px;border-radius:170px;background:var(--blue);color:#fff}
.pill.o{background:transparent;color:var(--text);box-shadow:0 0 0 1px var(--slate)}
.pill:disabled{opacity:.4;cursor:default}
.hero{text-align:center;padding:96px 20px 80px;max-width:1000px;margin:auto}
.hero small{font-size:19px;font-weight:600;letter-spacing:.228px}
h1{font-size:clamp(44px,9vw,96px);line-height:1.04;font-weight:600;letter-spacing:-.015em;margin:12px 0 20px}
.hero p{font-size:clamp(19px,2.4vw,26px);color:var(--ash);max-width:680px;margin:0 auto 32px;line-height:1.24}
.hero .row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
section{max-width:1100px;margin:auto;padding:48px 20px}
h2{font-size:clamp(32px,5vw,56px);line-height:1.07;font-weight:600;letter-spacing:-.84px;margin-bottom:12px}
.sub{color:var(--ash);margin-bottom:32px;max-width:640px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.tile{background:var(--panel);border-radius:28px;padding:28px 24px;cursor:pointer;border:0;color:var(--text);text-align:left;font-family:var(--sf);box-shadow:0 0 0 1px transparent}
.tile.on{box-shadow:0 0 0 1px var(--link)}
.tile .ic{font-size:44px;line-height:1}
.tile h3{font-size:28px;font-weight:600;line-height:1.1;letter-spacing:.196px;margin:20px 0 6px}
.tile p{font-size:14px;color:var(--ash);letter-spacing:-.224px}
.bar{height:4px;background:var(--steel);border-radius:4px;margin-top:20px;overflow:hidden}.bar i{display:block;height:100%;background:var(--blue)}
.panel{background:var(--panel);border-radius:28px;padding:40px 16px 48px;text-align:center;background:linear-gradient(#1d1d1f,#000 288px)}
.panel h2{margin-bottom:4px}
.path{display:flex;flex-direction:column;align-items:center;gap:22px;margin-top:32px}
.node{width:76px;height:76px;border-radius:50%;border:0;cursor:pointer;font-size:28px;background:var(--blue);color:#fff;font-family:var(--sf);font-weight:600}
.node.done{background:var(--ok);color:#000}.node.lock{background:var(--steel);color:var(--slate);cursor:not-allowed}
.nl{font-size:14px;color:var(--ash);margin-top:-14px;letter-spacing:-.224px}
.leyendo{outline:2px solid var(--link);outline-offset:4px;border-radius:6px}
::highlight(voz){background:#ffd60a;color:#000}
.lvl{margin:24px 0 4px;padding:6px 18px;border-radius:980px;background:var(--panel);color:var(--text);font-size:14px;font-weight:600;letter-spacing:.4px;text-transform:uppercase}
.feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px}
.feat div{background:var(--panel);border-radius:28px;padding:28px 24px;text-align:left}
.feat h3{font-size:28px;font-weight:600;line-height:1;letter-spacing:.196px;margin-bottom:10px}
.feat p{font-size:14px;color:var(--ash)}
.big{background:var(--panel);border-radius:28px;padding:32px 20px}
#m{position:fixed;inset:0;background:rgba(0,0,0,.75);backdrop-filter:blur(12px);z-index:9;display:none;align-items:center;justify-content:center;padding:16px}
#m.on{display:flex}
.card{background:var(--panel);border-radius:28px;max-width:560px;width:100%;padding:32px 24px;max-height:90%;overflow:auto}
.card h3{font-size:32px;font-weight:600;line-height:1.13;margin-bottom:12px}
.card p{color:#d2d2d7;margin-bottom:20px}
.q{font-weight:600;margin-bottom:12px}
.opt{display:block;width:100%;text-align:left;margin-bottom:10px;padding:14px 18px;border-radius:20px;border:0;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--slate);color:var(--text);font:400 17px var(--sf);cursor:pointer}
.opt.ok{box-shadow:0 0 0 2px var(--ok)}.opt.bad{box-shadow:0 0 0 2px var(--bad)}
.opt:disabled{cursor:default}
#m .card p.hl{animation:hl 1.4s ease-out}@keyframes hl{0%{background:rgba(41,151,255,.22)}100%{background:transparent}}
.fb{font-size:14px;min-height:22px;margin:6px 0 16px;color:var(--ash)}
footer{text-align:center;color:var(--ash);font-size:14px;padding:48px 20px 64px;letter-spacing:-.12px}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:12px}
.chip{border:0;border-radius:20px;padding:10px 16px;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--slate);color:var(--text);font:400 15px var(--sf);cursor:pointer}
.chip.ok{box-shadow:0 0 0 2px var(--ok);opacity:.6}
#grid{display:grid;gap:6px;justify-content:center;margin:0 auto 20px}
.cell{width:clamp(44px,12vw,64px);aspect-ratio:1;border-radius:14px;background:#000;display:flex;align-items:center;justify-content:center;font-size:28px}
.cell.w{background:var(--steel)}
.lab{text-align:center}
#prog{min-height:44px;font-size:24px;margin-bottom:16px;letter-spacing:6px;color:var(--ash)}
.row2{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-bottom:12px}
.ach{background:var(--panel);border-radius:28px;padding:24px;text-align:left}.ach.off h3{color:var(--ash)}.ach .lk{font-size:14px;color:var(--ash);margin-top:10px}.ach .ic{font-size:36px}
.av{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:36px;flex:none}
.crew{display:flex;justify-content:center;gap:14px;margin-bottom:24px}.crew .av{width:72px;height:72px;font-size:42px;animation:bob 3s ease-in-out infinite}
.crew{margin-bottom:16px}.crew .av:nth-child(2){animation-delay:.5s}.crew .av:nth-child(3){animation-delay:1s}.crew .av:nth-child(4){animation-delay:1.5s}
@keyframes bob{50%{transform:translateY(-8px)}}
.mc,.mrow{display:flex;align-items:center;gap:14px;margin-bottom:16px;text-align:left}.mc{justify-content:center;margin-top:8px}
.bub{background:rgba(255,255,255,.08);border-radius:20px;padding:10px 16px;font-size:15px;max-width:380px;letter-spacing:-.2px}
.av{overflow:hidden}.av img{width:100%;height:100%;object-fit:cover;display:block}
#m{display:none;align-items:flex-start;background:var(--bg);backdrop-filter:none;overflow:auto;padding:calc(env(safe-area-inset-top,0px) + 12px) 16px 48px}
#m.on{display:block}
#m .card{max-width:720px;margin:12px auto;max-height:none;overflow:visible;padding:36px 28px}
#m .card h3{font-size:clamp(32px,6vw,48px);letter-spacing:-.5px}#m .card p{font-size:19px}
.tb{display:flex;justify-content:space-between;font-size:14px;margin-bottom:20px;color:var(--ash)}
#lg{position:fixed;inset:0;background:rgba(0,0,0,.92);backdrop-filter:blur(20px);z-index:20;display:none;align-items:center;justify-content:center;padding:16px}#lg.on{display:flex}
.inp{display:block;width:100%;margin:0 0 10px;padding:14px 22px;border-radius:980px;border:0;background:rgba(255,255,255,.04);box-shadow:0 0 0 1px var(--slate);color:var(--text);font:400 17px var(--sf);outline:none}
.inp:focus{box-shadow:0 0 0 2px var(--blue)}
.fl{display:block;text-align:left;font-size:14px;font-weight:600;color:var(--text);margin:12px 0 6px 6px}
button.av{border:0;cursor:pointer;padding:0;opacity:.45}button.av.sel{opacity:1;box-shadow:0 0 0 3px var(--link)}
.chip:disabled{opacity:.3;cursor:default}
.who{display:flex;align-items:center;gap:8px}
.bub{background:none;padding:0;border-radius:0;font-size:17px;color:var(--ash)}
#m .card{background:none;padding:12px 4px}
#m .card p::before{content:var(--l1,"CONCEPTO");display:block;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--link);margin-bottom:6px}
#m .card .q{font-size:22px;margin-top:32px}
#m .card .q::before{content:var(--l2,"PONLO A PRUEBA");display:block;font-size:13px;font-weight:600;letter-spacing:.08em;color:var(--link);margin-bottom:6px}
.skip{position:absolute;left:-999px;top:0}.skip:focus{left:8px;top:8px;z-index:50;background:#fff;color:#000;padding:8px 16px;border-radius:980px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:3px solid #2997ff;outline-offset:3px}
.nb{background:transparent;color:var(--text);border:1px solid var(--slate);border-radius:980px;padding:2px 10px;font:inherit;cursor:pointer}
#ap{position:fixed;top:calc(env(safe-area-inset-top,0px) + 50px);right:12px;z-index:30;background:var(--panel);border-radius:20px;padding:14px;width:min(320px,92vw);box-shadow:0 0 0 1px var(--steel)}
#ap button{margin:4px 4px 4px 0}
.opt.ok::after{content:" ✓";color:var(--ok)}.opt.bad::after{content:" ✗";color:var(--bad)}
body.hc{--ash:#e5e5ea;--slate:#c7c7cc;--steel:#8e8e93;--link:#64d2ff;--panel:#000}
body.hc .tile,body.hc .big,body.hc .feat div,body.hc .ach,body.hc #m .card,body.hc .panel,body.hc #ap{box-shadow:0 0 0 2px #fff}
body.dys,body.dys *{font-family:Verdana,Tahoma,"Trebuchet MS",sans-serif!important;letter-spacing:.03em!important;word-spacing:.1em}
body.rm *{animation:none!important;transition:none!important}
@media(prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}
@media(max-width:640px){nav .l{display:none}}
/* --- Íconos, animaciones y ajustes de la auditoría (2026-10-13) --- */
.i{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}
nav{height:56px}html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 68px)}#ap{top:calc(env(safe-area-inset-top,0px) + 62px)}
nav b{font-size:15px;letter-spacing:-.2px;white-space:nowrap}nav b span{color:var(--link)}
.stats{align-items:center;gap:8px}
.nb{min-height:44px;min-width:44px;padding:0 12px;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.nb .i{font-size:18px}
.st{display:inline-flex;align-items:center;gap:4px;font-size:14px;font-weight:600;white-space:nowrap;padding:0 4px}
.st .i{font-size:16px}.st.xp .i{color:#0a84ff;fill:#0a84ff}.st.fire .i{color:#ff9f0a;fill:rgba(255,159,10,.25)}
.st.bump{animation:bump .5s cubic-bezier(.3,1.6,.5,1)}@keyframes bump{40%{transform:scale(1.25)}}
#us{display:inline-flex;align-items:center;gap:8px;white-space:nowrap}
.pill{padding:14px 22px;min-height:44px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform .15s,background-color .2s,box-shadow .2s}
.pill:not(:disabled):active{transform:scale(.96)}.pill.o:not(:disabled):hover{box-shadow:0 0 0 1px var(--text)}.pill:not(.o):not(:disabled):hover{background:#0077ed}
.pill .i{font-size:18px}
.chip{min-height:44px;min-width:44px}
.hero{padding-top:48px}
@keyframes float{50%{transform:translateY(-8px)}}
.node{transition:transform .2s}.node:not(:disabled):hover{filter:brightness(1.12)}
.node.lock{background:#2c2c2e;color:#a1a1a6}.node .i{font-size:30px;stroke-width:2.6}
.node.now{animation:ring 2.2s ease-out infinite}@keyframes ring{0%{box-shadow:0 0 0 0 rgba(0,113,227,.55)}80%,100%{box-shadow:0 0 0 18px rgba(0,113,227,0)}}
#pt .i{color:var(--link);margin-right:10px;vertical-align:-.1em}
.tile{transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}.tile:hover{transform:translateY(-4px)}
.badge{width:52px;height:52px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--c) 18%,transparent);color:var(--c)}
.badge .i{font-size:26px}
.ach{transition:transform .25s}.ach:not(.off):hover{transform:translateY(-4px)}
.ach.off .badge{--c:#86868b!important;filter:none;opacity:1}.ach .lk{display:flex;align-items:center;gap:6px}
.feat .badge{margin-bottom:18px}
.cell{transition:background-color .2s}.cell .i{font-size:clamp(24px,7vw,34px)}.cell .rb{color:#0a84ff;animation:pop .3s ease-out}.cell .gl{color:var(--ok);transform-origin:20% 90%;animation:wave 2.4s ease-in-out infinite}
@keyframes pop{0%{transform:scale(.6)}70%{transform:scale(1.12)}}@keyframes wave{50%{transform:rotate(-8deg)}}
.cell.w{background:#3a3a3c;box-shadow:inset 0 -3px 0 rgba(0,0,0,.35)}.cell:not(.w){background:#0b0b0c;box-shadow:inset 0 0 0 1px #2c2c2e}
#prog{letter-spacing:0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;font-size:15px}
#prog .i{font-size:20px;padding:6px;box-sizing:content-box;border-radius:10px;background:rgba(10,132,255,.14);color:var(--link);animation:pop .25s ease-out}
.tb{align-items:center;gap:12px}.tb>a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:40%}.who{white-space:nowrap;min-width:0}
.ib{padding:0;width:44px}
html.js .reveal{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1)}html.js .reveal:not(.in){opacity:0;transform:translateY(24px)}
body.rm .reveal{opacity:1!important;transform:none!important}
@media(prefers-reduced-motion:reduce){html.js .reveal{opacity:1!important;transform:none!important}}
@media(max-width:640px){
 nav{padding:0 12px}.stats{gap:4px}.tx,.cn{display:none}
 section{padding:32px 16px}.hero{padding:32px 16px 48px}
 .grid{grid-template-columns:1fr;gap:12px}
 .tile{display:grid;grid-template-columns:56px 1fr;column-gap:14px;align-items:center;padding:16px;border-radius:22px}
 .tile .av{grid-row:1/4;width:56px;height:56px}.tile h3{font-size:20px;margin:0}.tile p{margin:0}.tile p+p{display:none}.tile .bar{grid-column:2;margin-top:8px}
 .feat,#ach{grid-template-columns:1fr 1fr;gap:12px}
 .feat div,.ach{padding:18px 16px;border-radius:22px}.feat h3{font-size:19px;line-height:1.15}.feat .badge,.ach .badge{width:44px;height:44px;border-radius:13px;margin-bottom:12px}
 .ach h3{font-size:16px!important}
 .path{gap:14px}.node{width:60px;height:60px;font-size:22px}.nl{margin-top:-8px}
 .panel{padding:28px 12px 36px}
 .hero small{font-size:15px;display:block;text-wrap:balance}footer{padding:32px 16px 40px}.hero p{margin-bottom:24px}
 section{padding:28px 16px}.sub{margin-bottom:20px}.path{gap:12px;margin-top:24px}.big{padding:24px 12px}
}

[hidden]{display:none!important}

/* --- Escenas animadas al estilo Duolingo (2026-10-16) --- */
.esc{position:relative;margin:0 auto;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.esc img{display:block;height:auto;max-width:none}
.esc .base{width:100%;transform-origin:50% 92%;animation:respira 3.6s ease-in-out infinite}
.esc .pz{position:absolute;width:var(--w);pointer-events:none;animation:flota 3.2s ease-in-out var(--d,0s) infinite}
.esc .pz.b{animation:brilla 2.4s ease-in-out var(--d,0s) infinite}
@keyframes respira{0%,100%{transform:scale(1,1)}50%{transform:scale(1.012,.988)}}
@keyframes flota{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-12%) rotate(-5deg)}}
@keyframes brilla{0%,100%{transform:scale(.65) rotate(0);opacity:.55}50%{transform:scale(1.15) rotate(25deg);opacity:1}}
.esc.salta .base{animation:salto .7s cubic-bezier(.3,1.5,.5,1)}
.esc.salta .pz{animation:sale .7s cubic-bezier(.3,1.5,.5,1)}
@keyframes salto{0%{transform:scale(1)}20%{transform:scale(1.05,.93)}55%{transform:translateY(-5%) scale(.97,1.04)}80%{transform:translateY(0) scale(1.02,.98)}100%{transform:scale(1)}}
@keyframes sale{45%{transform:translateY(-35%) scale(1.3) rotate(10deg)}}
#crew .esc{width:min(480px,90%,calc(30vh * 1.61))}#por-que .esc{width:min(560px,100%);margin-bottom:28px}#lab .esc{width:min(440px,92%);margin-bottom:20px}
@media(max-width:640px){#crew .esc{width:min(360px,92%)}}
.mrow.lb{margin:4px 0 18px;gap:10px}.mrow.lb .bub{position:relative;font-size:16px}

/* Meta diaria, celebración y perfil (2026-10-16) */
.meta{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;max-width:420px;margin:14px auto 0;padding:10px 16px;border:2px solid var(--steel);border-bottom-width:4px;border-radius:16px;font-weight:800;color:var(--text)}
.meta .i{font-size:22px;color:#ff9600}.meta .bar{flex:1 1 100%;margin:2px 0 0;height:12px}.meta.ok{border-color:var(--ok-b);background:var(--ok-bg);color:var(--ok-t)}.meta.ok .i{color:#e0a500}
#cel{position:fixed;inset:0;pointer-events:none;z-index:40;overflow:hidden;display:none}#cel.on{display:block}
#cel i{position:absolute;top:-16px;width:10px;height:16px;border-radius:3px;animation:cae 2s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes cae{to{transform:translate(var(--x),105vh) rotate(var(--r));opacity:.9}}
#cel .tst{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 28px);transform:translateX(-50%);display:flex;align-items:center;gap:12px;background:var(--panel);border:2px solid var(--ok-b);border-bottom-width:5px;border-radius:20px;padding:12px 20px 12px 12px;box-shadow:0 10px 30px rgba(0,0,0,.12);animation:tsin .55s cubic-bezier(.3,1.6,.5,1)}
#cel .tst .av{width:52px;height:52px;animation:brinco .9s cubic-bezier(.3,1.6,.5,1) .15s}#cel .tst b{display:block;font-weight:900;font-size:19px;color:var(--ok-t)}#cel .tst span{font-weight:700;color:var(--ash);font-size:15px}
#cel .tst.big{border-color:#ffc800}#cel .tst.big b{color:#9a6a00}
@keyframes tsin{from{transform:translate(-50%,140%) scale(.8)}}@keyframes brinco{40%{transform:translateY(-14px) scale(1.06,.94)}}
#cel.calma .tst,#cel.calma .tst .av{animation:none}
#pf{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 94%,transparent);z-index:20;display:none;align-items:center;justify-content:center;padding:16px}#pf.on{display:flex}
#pf .card{max-width:460px;border:2px solid var(--steel);border-radius:24px;text-align:left}
.pfs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:6px}.pfs div{border:2px solid var(--steel);border-radius:14px;padding:8px 4px;text-align:center}.pfs b{display:block;font-size:22px;font-weight:900;color:var(--ok)}.pfs span{font-size:12.5px;font-weight:700;color:var(--ash)}
.pill.o.sel{border-color:var(--sel-b);background:var(--sel-bg)}.pfb{gap:6px}
/* Portada en capas (Canva): personajes, tableta e íconos se mueven por separado */
.esc-capas{aspect-ratio:813/505}
.esc-capas .pz{z-index:2}
.esc-capas .robotin{transform-origin:50% 90%;animation:robotin 3.8s ease-in-out infinite}
@keyframes robotin{0%,100%{transform:translateX(0) rotate(0)}25%{transform:translateX(-2.5%) rotate(-1.5deg)}50%{transform:translateX(0) rotate(0)}75%{transform:translateX(2.5%) rotate(1.5deg)}}
.esc-capas.salta .robotin{animation:brinca .75s cubic-bezier(.3,1.5,.5,1) .12s}
.esc-capas .cp{position:absolute;height:auto;max-width:none;pointer-events:none}
.esc-capas .tab{position:absolute;inset:0;animation:tabflota 4.5s ease-in-out infinite}
@keyframes tabflota{0%,100%{transform:translateY(0)}50%{transform:translateY(-1.6%)}}
.esc-capas .ic{transform-origin:50% 60%;animation:icpop 6s cubic-bezier(.3,1.6,.5,1) infinite}
.esc-capas .i2{animation-delay:.35s}.esc-capas .i3{animation-delay:.7s}.esc-capas .i4{animation-delay:1.05s}
@keyframes icpop{0%,12%,100%{transform:scale(1) rotate(0)}5%{transform:scale(1.22) rotate(-6deg)}9%{transform:scale(.94) rotate(3deg)}}
.esc-capas .pj{transform-origin:50% 100%;animation:baila var(--t,3.4s) ease-in-out var(--d,0s) infinite}
.esc-capas .p-bolt{--t:3.1s;--d:0s}.esc-capas .p-neuri{--t:3.7s;--d:.5s}.esc-capas .p-leo{--t:2.9s;--d:.9s}.esc-capas .p-nova{--t:3.4s;--d:.3s}
@keyframes baila{0%,100%{transform:translateY(0) rotate(0) scale(1,1)}30%{transform:translateY(-1.5%) rotate(-1.2deg) scale(.99,1.01)}65%{transform:translateY(.4%) rotate(.8deg) scale(1.01,.99)}}
.esc-capas.salta .pj{animation:brinca .75s cubic-bezier(.3,1.5,.5,1) var(--s,0s)}
.esc-capas.salta .p-bolt{--s:0s}.esc-capas.salta .p-neuri{--s:.08s}.esc-capas.salta .p-leo{--s:.16s}.esc-capas.salta .p-nova{--s:.24s}
@keyframes brinca{0%{transform:scale(1)}20%{transform:scale(1.04,.94)}50%{transform:translateY(-9%) scale(.97,1.04)}80%{transform:translateY(0) scale(1.03,.97)}100%{transform:scale(1)}}
.esc-capas.salta .ic{animation:icpop2 .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes icpop2{40%{transform:scale(1.35) rotate(8deg)}}

/* --- Tema juguetón, inspirado en Duolingo (2026-10-16). Colores con contraste WCAG AA. Modo oscuro: body.dark --- */
@font-face{font-family:Nunito;font-style:normal;font-weight:400 900;font-display:swap;src:url(fuentes/nunito-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{color-scheme:light;--bg:#fff;--chrome:#fff;--panel:#fff;--soft:#f7f7f7;--steel:#e5e5e5;--slate:#afafaf;--ash:#6b6b6b;--text:#3c3c3c;
--blue:#2f7d00;--blue-d:#225c00;--blue-h:#2b7300;--link:#0f74b5;--ok:#2f7d00;--bad:#c4122d;--fresh:#58cc02;--node:#46a302;--node-d:#357a01;
--ok-bg:#d7ffb8;--ok-b:#58cc02;--ok-t:#2b6e00;--bad-bg:#ffdfe0;--bad-b:#ff8b8f;--bad-t:#c4122d;--sel-bg:#ddf4ff;--sel-b:#84d8ff;
--sf:Nunito,ui-rounded,"SF Pro Rounded",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
body{letter-spacing:0;font-weight:500}
nav{background:var(--chrome);backdrop-filter:none;border-bottom:2px solid var(--steel)}nav .l{color:var(--ash);font-weight:700}nav .l a:hover{color:var(--text)}
nav b{font-weight:900;font-size:19px;color:var(--node)}nav b span{color:var(--link)}
h1,h2{font-weight:900;letter-spacing:-.02em}.hero small{font-weight:800;color:var(--link)}
.pill{font:800 15px/1 var(--sf);text-transform:uppercase;letter-spacing:.05em;border-radius:16px;background:var(--blue);color:#fff;border:0;border-bottom:4px solid var(--blue-d);padding:13px 22px 11px}
.pill:not(.o):not(:disabled):hover{background:var(--blue-h)}
.pill:not(:disabled):active{transform:translateY(2px);border-bottom-width:2px;margin-top:2px}
.pill.o{background:var(--panel);color:var(--link);box-shadow:none;border:2px solid var(--steel);border-bottom-width:4px}
.pill.o:not(:disabled):hover{background:var(--soft);box-shadow:none}
.nb{border:2px solid var(--steel);border-radius:14px;font-weight:700}
.st{font-weight:900}.st.xp .i{color:#1899d6;fill:#1899d6}.st.fire .i{color:#ff9600;fill:rgba(255,150,0,.3)}
.tile,.feat div,.ach,.big{background:var(--panel);border:2px solid var(--steel);border-bottom-width:4px;border-radius:20px;box-shadow:none}
.tile.on{border-color:var(--sel-b);background:var(--sel-bg);box-shadow:none}.tile h3,.feat h3{font-weight:900}
.tile:hover{transform:translateY(-3px)}
.panel{background:var(--panel);border:2px solid var(--steel);border-radius:24px}
.bar{height:14px;border-radius:8px;background:var(--steel)}.bar i{background:var(--fresh);border-radius:8px}
.node{background:var(--node);color:#fff;font-weight:900;box-shadow:0 6px 0 var(--node-d)}
.node.done{background:#ffc800;color:#7a4f00;box-shadow:0 6px 0 #e0a500}
.node.lock{background:var(--steel);color:#4b4b4b;box-shadow:0 6px 0 #cfcfcf}
.node.now{animation:ring2 2.2s ease-out infinite}@keyframes ring2{0%{box-shadow:0 6px 0 var(--node-d),0 0 0 0 rgba(88,204,2,.55)}80%,100%{box-shadow:0 6px 0 var(--node-d),0 0 0 18px rgba(88,204,2,0)}}
.node:not(:disabled):active{box-shadow:0 2px 0 var(--node-d)}
.nl{font-weight:700;margin-top:-8px}
.lvl{background:var(--soft);border:2px solid var(--steel);color:var(--ash);font-weight:900}
.badge{color:color-mix(in srgb,var(--c) 62%,#000);background:color-mix(in srgb,var(--c) 22%,transparent);border-radius:16px}
.ach.off .badge{--c:#8a8a8a!important}
.mc .bub,.bub{background:var(--panel);border:2px solid var(--steel);border-radius:16px;padding:10px 14px;color:var(--text);font-weight:700}
#m{background:var(--bg)}#m .card{background:none}.card{background:var(--panel)}.card p{color:var(--text)}
#m .card h3,.card h3{font-weight:900}#m .card p::before,#m .card .q::before{color:var(--link);font-weight:900}
.q{font-weight:800}
.opt,.chip{background:var(--panel);box-shadow:none;border:2px solid var(--steel);border-bottom-width:4px;border-radius:16px;color:var(--text);font-weight:700}
.opt:not(:disabled):hover,.chip:not(:disabled):hover{background:var(--soft)}
.opt:not(:disabled):active,.chip:not(:disabled):active{border-bottom-width:2px;margin-top:2px}
.opt.ok,.chip.ok{background:var(--ok-bg);border-color:var(--ok-b);color:var(--ok-t);box-shadow:none;opacity:1}
.opt.bad{background:var(--bad-bg);border-color:var(--bad-b);color:var(--bad-t);box-shadow:none}
.opt.ok::after{color:var(--ok-t)}.opt.bad::after{color:var(--bad-t)}
.fb{font-weight:700}
#lg{background:color-mix(in srgb,var(--bg) 94%,transparent)}#lg .card{border:2px solid var(--steel);border-radius:24px}
.inp{background:var(--soft);box-shadow:none;border:2px solid var(--steel);border-radius:16px;color:var(--text);font-weight:600}
.inp:focus{border-color:var(--link);box-shadow:none}
#ap{background:var(--panel);border:2px solid var(--steel);box-shadow:0 8px 24px rgba(0,0,0,.08)}
.cell:not(.w){background:var(--soft);box-shadow:inset 0 0 0 2px var(--steel)}.cell.w{background:#4b4b4b;box-shadow:inset 0 -4px 0 rgba(0,0,0,.3)}
.cell .rb{color:var(--link)}.cell .gl{color:var(--ok)}#prog .i{background:var(--sel-bg);color:var(--link)}
footer{color:var(--ash)}
/* Modo oscuro (opción del panel de accesibilidad) */
body.dark{color-scheme:dark;--bg:#131f24;--chrome:#131f24;--panel:#1a2a31;--soft:#22343c;--steel:#37464f;--slate:#52656d;--ash:#b4c2c8;--text:#f1f7fb;
--blue:#2f7d00;--blue-d:#1f5300;--link:#49c0f8;--ok-bg:#1f3b10;--ok-b:#58a700;--ok-t:#a5ed6e;--bad-bg:#3d1a1d;--bad-b:#ee5555;--bad-t:#ff9ea1;--sel-bg:#1a3a4a;--sel-b:#3f8fb3}
body.dark .node.lock{color:#d0d8dc;box-shadow:0 6px 0 #263238}body.dark .cell.w{background:#6b7c84}
/* Alto contraste sobre el tema claro */
body.hc{--ash:#222;--slate:#000;--steel:#000;--link:#00508f;--text:#000;--panel:#fff;--soft:#fff}
body.hc .tile,body.hc .big,body.hc .feat div,body.hc .ach,body.hc .panel,body.hc #ap,body.hc .opt,body.hc .chip,body.hc .pill.o{border-color:#000;box-shadow:none}
body.dark.hc{--ash:#e5e5ea;--slate:#fff;--steel:#fff;--link:#8fdcff;--text:#fff;--panel:#000;--soft:#000;--bg:#000}
body.dark.hc .tile,body.dark.hc .big,body.dark.hc .feat div,body.dark.hc .ach,body.dark.hc .panel,body.dark.hc #ap,body.dark.hc .opt,body.dark.hc .chip,body.dark.hc .pill.o{border-color:#fff}

/* Cómo nació IAPRENDE (16/10/2026) */
.hq{margin:0 0 28px;background:var(--panel);border:2px solid var(--steel);border-bottom-width:4px;border-radius:20px;padding:24px 26px;position:relative}
.hq blockquote{margin:0;font-size:clamp(20px,2.6vw,26px);font-weight:800;line-height:1.35;color:var(--text)}
.hq figcaption{margin-top:12px;font-size:15px;font-weight:800;color:var(--link)}

/* Constancia de término (2026-10-17): caja en «Tus logros», diálogo, diseño e impresión */
.cbx{margin-top:24px;background:var(--panel);border:2px solid var(--steel);border-radius:28px;padding:24px;display:flex;gap:20px;align-items:center;flex-wrap:wrap;text-align:left}
.cbx .badge{flex:none}.cbx div.tx{flex:1;min-width:220px}.cbx h3{font-size:21px;margin-bottom:4px}.cbx p{font-size:15px;color:var(--ash)}
.cbx .bar{height:12px;border-radius:6px;background:var(--steel);overflow:hidden;margin-top:10px}.cbx .bar i{display:block;height:100%;background:var(--ok,#58cc02);border-radius:6px}
#ct{position:fixed;inset:0;background:color-mix(in srgb,var(--bg) 94%,transparent);z-index:21;display:none;align-items:center;justify-content:center;padding:16px;overflow:auto}#ct.on{display:flex}
#ct .card{max-width:860px;width:100%;border:2px solid var(--steel);border-radius:24px;text-align:left;max-height:100%;overflow:auto}
.cert{--g:#46a302;--b:#0f74b5;background:#fff;color:#3c3c3c;border-radius:18px;padding:10px;font-family:Nunito,system-ui,sans-serif;margin:14px 0;aspect-ratio:1.414/1;container-type:inline-size}
.cert .in{height:100%;border:3px solid var(--g);border-radius:12px;outline:2px solid #ffc800;outline-offset:-10px;padding:4% 6%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;position:relative}
.cert .lg{font-weight:900;font-size:5.2cqw;letter-spacing:-.01em;line-height:1}.cert .lg b{color:var(--b);font-weight:900}.cert .lg span{color:var(--g)}
.cert .ti{font-weight:900;letter-spacing:.22em;font-size:2.1cqw;color:var(--b);margin-top:1.2cqw}
.cert .ot{font-size:1.9cqw;color:#6b6b6b}.cert .nm{font-weight:900;font-size:5cqw;color:#3c3c3c;border-bottom:3px solid #58cc02;padding:0 3cqw .4cqw;max-width:90%;overflow-wrap:anywhere;line-height:1.15}
.cert .ds{font-size:1.85cqw;line-height:1.35;max-width:82%}.cert .rt{display:flex;flex-wrap:wrap;justify-content:center;gap:.8cqw;max-width:90%}
.cert .rt span{border:2px solid #e5e5e5;border-radius:99px;padding:.3cqw 1.3cqw;font-weight:800;font-size:1.45cqw}
.cert .ft{display:flex;justify-content:space-between;align-items:flex-end;width:100%;font-size:1.5cqw}.cert .ft b{display:block;font-size:1.8cqw;color:#3c3c3c}
.cert .sl{width:9cqw;height:9cqw;border-radius:50%;background:#ffc800;box-shadow:0 0 0 .6cqw #fff3c4;display:flex;align-items:center;justify-content:center;color:#5a4300;font-weight:900;font-size:1.3cqw;line-height:1.1}
.cert .cav{display:flex;gap:.8cqw}.cert .cav span{width:4.2cqw;height:4.2cqw;border-radius:50%;overflow:hidden;display:inline-block}.cert .cav img{width:100%;height:100%;object-fit:cover}
.cert .nt{font-size:1.25cqw;color:#8a8a8a}
@media print{@page{size:A4 landscape;margin:0}
 body.imp>*:not(#ct){display:none!important}body.imp #ct{position:static;display:block;background:#fff;padding:0}
 body.imp #ct .card{border:0;padding:0;max-width:none;max-height:none;overflow:visible;box-shadow:none}body.imp #ct .card>*:not(.cert){display:none!important}
 body.imp .cert{margin:0;border-radius:0;width:297mm;height:210mm;aspect-ratio:auto;padding:8mm;-webkit-print-color-adjust:exact;print-color-adjust:exact}}