/* Escuela de la Casa · sistema visual v3 (26/09/2026)
   Paleta de oficio mexicano: talavera, terracota, cempasúchil, jade, rosa mexicano, papel.
   Tipos: Fraunces (títulos) + Nunito (texto y botones). Escala 1.25. Espaciado base 4px. */
:root{
  --paper:#FBF6EC;--paper-2:#F4EBDB;--card:#FFFFFF;--ink:#221B14;--ink-soft:#5B5046;--line:#E6DAC6;
  --talavera:#1E4FA0;--talavera-deep:#123A7C;--talavera-tint:#E4ECF9;
  --terracota:#B84A26;--terracota-deep:#8A3316;--terracota-tint:#F9E4D9;
  --cempasuchil:#F2A516;--cempasuchil-deep:#B97800;--cempasuchil-tint:#FDF0CC;
  --jade:#1B7F65;--jade-deep:#115A47;--jade-tint:#DBF1E8;
  --rosa:#D23F78;--rosa-deep:#9E2556;--rosa-tint:#FBE2EC;
  --axo:#F6B6C8;--axo-belly:#FCD9E3;
  --on-accent:#FFFFFF;--ok:#1B7F65;--bad:#B3261E;
  --av-nino5:#FDE3A6;--av-shirt-nino5:#1E4FA0;--av-joven16:#CFE0F7;--av-shirt-joven16:#1B7F65;
  --av-adulto:#DBF1E8;--av-shirt-adulto:#B84A26;--av-mayor80:#FBE2EC;--av-shirt-mayor80:#123A7C;
  --display:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Nunito",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  --r-sm:10px;--r:16px;--r-lg:24px;--r-xl:32px;
  --shadow:0 1px 0 rgba(34,27,20,.04),0 8px 24px -12px rgba(34,27,20,.18);
  --tile:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44' viewBox='0 0 44 44'%3E%3Cg fill='%231E4FA0'%3E%3Cpath d='M22 4c6 7 6 11 0 18-6-7-6-11 0-18zM22 40c6-7 6-11 0-18-6 7-6 11 0 18zM4 22c7-6 11-6 18 0-7 6-11 6-18 0zM40 22c-7-6-11-6-18 0 7 6 11 6 18 0z'/%3E%3Cpath d='M0 0h6L0 6zM44 0h-6l6 6zM0 44h6l-6-6zM44 44h-6l6-6z'/%3E%3C/g%3E%3Ccircle cx='22' cy='22' r='3' fill='%23F2A516'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --paper:#17130E;--paper-2:#201A13;--card:#231D16;--ink:#F4ECDF;--ink-soft:#C3B7A6;--line:#3B3228;
  --talavera:#86A9F0;--talavera-deep:#B9CDF7;--talavera-tint:#1B2640;
  --terracota:#F08E67;--terracota-deep:#F6B79E;--terracota-tint:#3A2118;
  --cempasuchil:#F6BC45;--cempasuchil-deep:#F9D48A;--cempasuchil-tint:#382A0F;
  --jade:#5ECBA8;--jade-deep:#9BE0C8;--jade-tint:#12302A;
  --rosa:#F07FA9;--rosa-deep:#F6B0CA;--rosa-tint:#3A1726;
  --axo:#E9A2B6;--axo-belly:#F3C4D2;--on-accent:#17130E;--ok:#5ECBA8;--bad:#F2867E;
  --av-nino5:#4A3A14;--av-joven16:#1B2640;--av-adulto:#12302A;--av-mayor80:#3A1726;
  --shadow:0 1px 0 rgba(0,0,0,.2),0 10px 28px -14px rgba(0,0,0,.6)}}
:root[data-theme="dark"]{--paper:#17130E;--paper-2:#201A13;--card:#231D16;--ink:#F4ECDF;--ink-soft:#C3B7A6;--line:#3B3228;--talavera:#86A9F0;--talavera-deep:#B9CDF7;--talavera-tint:#1B2640;--terracota:#F08E67;--terracota-deep:#F6B79E;--terracota-tint:#3A2118;--cempasuchil:#F6BC45;--cempasuchil-deep:#F9D48A;--cempasuchil-tint:#382A0F;--jade:#5ECBA8;--jade-deep:#9BE0C8;--jade-tint:#12302A;--rosa:#F07FA9;--rosa-deep:#F6B0CA;--rosa-tint:#3A1726;--on-accent:#17130E;--ok:#5ECBA8;--bad:#F2867E}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:var(--talavera);text-underline-offset:3px;text-decoration-thickness:1.5px}
a:hover{color:var(--talavera-deep)}
:focus-visible{outline:3px solid var(--cempasuchil);outline-offset:3px;border-radius:6px}
.wrap{max-width:1140px;margin:0 auto;padding:0 var(--s4)}
.lectura{max-width:720px}
.skip{position:absolute;left:-999px}.skip:focus{left:8px;top:8px;background:var(--card);padding:8px 12px;z-index:99}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.i{width:1.25em;height:1.25em;vertical-align:-.25em;flex:none}
.mark{width:1.1em;height:1.1em}.mark.bien{color:var(--ok)}.mark.mal{color:var(--bad)}.mark.alerta{color:var(--cempasuchil-deep)}

/* ---------- Tipografía ---------- */
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.12;letter-spacing:-.01em;margin:0 0 .4em;font-optical-sizing:auto}
h1{font-size:clamp(2.05rem,6.4vw,3.6rem)}
h2{font-size:clamp(1.55rem,4.2vw,2.3rem)}
h3{font-size:1.28rem;line-height:1.22}
h1 em,h2 em{font-style:italic;color:var(--terracota)}
p{margin:0 0 1em}
.lead{font-size:clamp(1.08rem,2.4vw,1.25rem);color:var(--ink-soft);max-width:36em;line-height:1.55}
.kicker{display:inline-flex;align-items:center;gap:8px;font:800 .78rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--terracota);margin:0 0 var(--s3)}
.kicker a{color:inherit;text-decoration:none}.kicker a:hover{text-decoration:underline}
.muted{color:var(--ink-soft)}.small{font-size:.9rem}
.eyebrow-dot{width:8px;height:8px;border-radius:50%;background:currentColor;display:inline-block}

/* ---------- Encabezado ---------- */
.top{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:1px solid var(--line)}
.top .row{display:flex;align-items:center;gap:var(--s4);min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);margin-right:auto}
.brand .logo{width:38px;height:38px;flex:none}
.brand b{display:block;font:700 1.12rem/1.05 var(--display)}
.brand small{display:block;font:800 .64rem/1.2 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--terracota);margin-top:3px}
.nav{display:flex;gap:4px;align-items:center}
.nav a{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:12px;text-decoration:none;font-weight:800;color:var(--ink);font-size:.98rem}
.nav a:hover{background:var(--paper-2);color:var(--ink)}
.nav a[aria-current="page"]{color:var(--talavera);background:var(--talavera-tint)}
.nav .tutor-link{background:var(--talavera);color:var(--on-accent);box-shadow:0 3px 0 var(--talavera-deep)}
.nav .tutor-link:hover{background:var(--talavera);color:var(--on-accent);transform:translateY(-1px)}
.hud{display:flex;gap:6px;align-items:center;text-decoration:none;color:var(--ink);font-weight:800;font-size:.92rem}
.hud .chip{display:inline-flex;align-items:center;gap:4px;min-height:36px;padding:0 10px;border-radius:999px;background:var(--card);border:1.5px solid var(--line)}
.hud .chip .i{width:18px;height:18px}
.hud .c-fuego{color:var(--terracota)}.hud .c-xp{color:var(--cempasuchil-deep)}.hud .c-ins{color:var(--talavera)}
.hud .chip span{color:var(--ink)}
.hud .c-xp .lbl{color:var(--ink)}
@media(max-width:820px){
  .top .row{flex-wrap:wrap;row-gap:0;padding-top:8px}
  .nav{order:3;width:calc(100% + 32px);margin:0 -16px;padding:4px 12px 8px;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--line)}
  .nav::-webkit-scrollbar{display:none}
  .nav a{white-space:nowrap;padding:0 12px;font-size:.95rem}
  .hud .lbl{display:none}
}

/* ---------- Botones ---------- */
.btn{--b:var(--terracota);--bd:var(--terracota-deep);display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border:0;border-radius:16px;background:var(--b);color:var(--on-accent);font:800 1.02rem/1.1 var(--sans);letter-spacing:.01em;text-decoration:none;cursor:pointer;box-shadow:0 4px 0 var(--bd);transition:transform .12s ease,box-shadow .12s ease,filter .12s;position:relative;top:0}
.btn:hover{color:var(--on-accent);filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 5px 0 var(--bd)}
.btn:active{transform:translateY(4px);box-shadow:0 0 0 var(--bd)}
.btn .i{width:20px;height:20px}
.btn.azul{--b:var(--talavera);--bd:var(--talavera-deep)}
.btn.jade{--b:var(--jade);--bd:var(--jade-deep)}
.btn.oro{--b:var(--cempasuchil);--bd:var(--cempasuchil-deep);color:#221B14}
.btn.ghost{background:var(--card);color:var(--talavera);box-shadow:0 4px 0 var(--line);border:2px solid var(--line)}
.btn.ghost:hover{color:var(--talavera-deep)}
.btn.small{min-height:44px;padding:0 18px;font-size:.95rem;border-radius:14px}
.btn.big{min-height:60px;padding:0 30px;font-size:1.1rem;border-radius:18px}
.btn:disabled{opacity:.55;cursor:wait;transform:none}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin:var(--s5) 0}
@media(max-width:520px){.cta .btn{flex:1 1 100%}}

/* ---------- Secciones y bandas de color ---------- */
section{position:relative}
.band{padding:var(--s8) 0}
.band.tight{padding:var(--s7) 0}
.band.talavera{background:var(--talavera);color:#fff}
.band.talavera h2,.band.talavera h3{color:#fff}
.band.talavera .lead,.band.talavera .muted{color:#DCE6F8}
.band.oro{background:var(--cempasuchil-tint)}
.band.jade{background:var(--jade-tint)}
.band.rosa{background:var(--rosa-tint)}
.band.papel{background:var(--paper-2)}
.band.tile{background:var(--talavera-tint)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .band.talavera{background:#16264A}}
.sec-head{display:flex;align-items:flex-end;gap:var(--s4);margin-bottom:var(--s5)}
.sec-head .badge-ic{flex:none;width:56px;height:56px;border-radius:18px;display:grid;place-items:center;background:var(--card);color:var(--terracota);box-shadow:0 4px 0 var(--line)}
.sec-head .badge-ic .i{width:30px;height:30px}
.sec-head h2{margin:0}
.sec-head p{margin:.2em 0 0;color:var(--ink-soft)}

/* ---------- Héroe ---------- */
.hero{padding:0 0 var(--s7);background:var(--paper);overflow:hidden}
.picado{display:block;width:100%;height:58px;opacity:.95}
.hero .grid{display:grid;gap:var(--s5);align-items:center;padding-top:var(--s5)}
@media(min-width:880px){.hero .grid{grid-template-columns:1.08fr .92fr;gap:var(--s7)}}
.hero h1{margin-bottom:.35em}
.hero .lead{margin-bottom:0}
.trust{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:var(--s4);padding:0;list-style:none;font-weight:700;color:var(--ink-soft);font-size:.95rem}
.trust li{display:inline-flex;align-items:center;gap:6px}
.trust .i{color:var(--jade)}
.stage{position:relative;max-width:520px;margin:0 auto;width:100%}
.hero-art{display:block;width:100%;height:auto}
.stage .mascota{position:absolute;width:30%;left:-2%;bottom:2%;filter:drop-shadow(0 6px 0 rgba(0,0,0,.08))}
.globo{position:absolute;left:-2%;top:30%;background:var(--card);border:2px solid var(--ink);border-radius:18px 18px 18px 4px;padding:8px 14px;font:800 .95rem/1.25 var(--sans);box-shadow:3px 3px 0 var(--ink);max-width:62%}
.globo small{display:block;font-weight:600;color:var(--ink-soft)}
@media(max-width:520px){.globo{font-size:.85rem;left:0;top:26%}}
@media(max-width:879px){.stage{max-width:380px}}

/* Mascota */
.mascota{display:block}
.mascota .saluda{transform-origin:82px 84px;animation:saluda 2.4s ease-in-out 1s 2}
@keyframes saluda{0%,100%{transform:rotate(0)}20%,60%{transform:rotate(-18deg)}40%,80%{transform:rotate(8deg)}}
.flota{animation:flota 4s ease-in-out infinite}
@keyframes flota{50%{transform:translateY(-6px)}}

/* ---------- Cifras ---------- */
.cifras{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4);margin:0;padding:0;list-style:none}
@media(min-width:760px){.cifras{grid-template-columns:repeat(5,1fr)}}
.cifras li{border-top:2px solid rgba(255,255,255,.35);padding-top:var(--s3)}
.cifras b{display:block;font:700 clamp(2rem,5vw,2.8rem)/1 var(--display);color:var(--cempasuchil)}
.cifras span{font-weight:700;color:#E4ECF9;font-size:.95rem}

/* ---------- Caminos ---------- */
.caminos{display:grid;gap:var(--s4)}
@media(min-width:880px){.caminos{grid-template-columns:1.25fr 1fr;grid-template-rows:auto auto}.caminos .c1{grid-row:span 2}}
.camino{--c:var(--talavera);--ct:var(--talavera-tint);display:grid;grid-template-columns:1fr auto;gap:var(--s3);align-items:start;padding:var(--s5);border-radius:var(--r-lg);background:var(--ct);color:var(--ink);text-decoration:none;border:2px solid transparent;transition:transform .18s ease,border-color .18s,box-shadow .18s;position:relative;overflow:hidden}
.camino:hover{transform:translateY(-3px);border-color:var(--c);color:var(--ink);box-shadow:0 6px 0 var(--c)}
.camino .num{font:700 .8rem var(--sans);letter-spacing:.14em;color:var(--c);text-transform:uppercase}
.camino h3{font-size:clamp(1.4rem,3vw,1.9rem);margin:.25em 0 .35em}
.camino p{color:var(--ink-soft);margin:0 0 var(--s4)}
.camino .spot{width:120px;height:96px}
.camino.c1 .spot{width:180px;height:144px}
.camino .ir{display:inline-flex;align-items:center;gap:8px;font-weight:800;color:var(--c)}
.camino .ir .i{transition:transform .18s}.camino:hover .ir .i{transform:translateX(4px)}
.camino.c2{--c:var(--jade);--ct:var(--jade-tint)}
.camino.c3{--c:var(--terracota);--ct:var(--cempasuchil-tint)}
.camino ul{list-style:none;padding:0;margin:0 0 var(--s4);display:flex;flex-wrap:wrap;gap:6px}
.camino li{background:var(--card);border-radius:999px;padding:4px 12px;font-weight:700;font-size:.88rem;display:inline-flex;gap:6px;align-items:center}
.camino li .i{color:var(--c);width:16px;height:16px}
@media(max-width:560px){.camino{grid-template-columns:1fr}.camino .spot,.camino.c1 .spot{order:-1;width:110px;height:88px}}

/* ---------- Personajes (modo por edad) ---------- */
.personajes{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s3)}
@media(min-width:880px){.personajes{grid-template-columns:repeat(4,1fr);gap:var(--s4)}}
.personaje{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:var(--s4) var(--s3) var(--s4);background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);text-decoration:none;color:var(--ink);font:inherit;cursor:pointer;box-shadow:0 4px 0 var(--line);transition:transform .15s,border-color .15s,box-shadow .15s}
.personaje:hover{transform:translateY(-3px);border-color:var(--rosa);color:var(--ink)}
.personaje .avatar{width:76px;height:76px}
.personaje b{font:800 1.02rem var(--sans)}
.personaje small{color:var(--ink-soft);font-size:.86rem;line-height:1.35}
.personaje[aria-pressed="true"]{border-color:var(--talavera);box-shadow:0 4px 0 var(--talavera);background:var(--talavera-tint)}
.personaje[aria-pressed="true"]::after{content:"Elegido";font:800 .7rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--on-accent);background:var(--talavera);padding:3px 10px;border-radius:999px}
.personajes.mini{display:flex;flex-wrap:wrap;gap:8px}
.personajes.mini .personaje{flex-direction:row;padding:6px 14px 6px 6px;border-radius:999px;gap:8px;box-shadow:0 3px 0 var(--line)}
.personajes.mini .avatar{width:40px;height:40px}
.personajes.mini b{font-size:.95rem}

/* ---------- Bloques de juegos (home) ---------- */
.juegos-band{display:grid;gap:var(--s5);align-items:center}
@media(min-width:880px){.juegos-band{grid-template-columns:auto 1fr}}
.juegos-band .mascota{width:170px;margin:0 auto}
.fichas{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:var(--s4) 0}
@media(min-width:620px){.fichas{grid-template-columns:repeat(3,1fr)}}
.ficha{display:flex;align-items:center;gap:10px;background:var(--card);border-radius:14px;padding:10px 12px;font-weight:800;text-decoration:none;color:var(--ink);box-shadow:0 3px 0 rgba(34,27,20,.12);font-size:.95rem;line-height:1.2}
.ficha:hover{color:var(--ink);transform:translateY(-2px)}
.tile-ic{--c:var(--talavera);flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--c);color:#fff}
.tile-ic .i{width:22px;height:22px}
.tile-ic.talavera{--c:var(--talavera)}.tile-ic.terracota{--c:var(--terracota)}.tile-ic.cempasuchil{--c:var(--cempasuchil-deep)}.tile-ic.jade{--c:var(--jade)}.tile-ic.rosa{--c:var(--rosa)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tile-ic{color:#17130E}}

/* ---------- Exprés vs completo ---------- */
.duo{display:grid;gap:var(--s4)}
@media(min-width:880px){.duo{grid-template-columns:1fr 1fr}}
.bloque{border-radius:var(--r-lg);padding:var(--s5);position:relative;overflow:hidden}
.bloque.tinta{background:var(--ink);color:var(--paper)}
.bloque.tinta h3{color:var(--paper)}.bloque.tinta a{color:#F9D48A}
.bloque.tinta .meta{color:#CFC4B3}
.bloque.claro{background:var(--card);border:2px solid var(--line)}
.bloque h3{font-size:1.6rem;display:flex;align-items:center;gap:10px}
.bloque h3 .i{color:var(--cempasuchil)}
.meta{font-weight:700;color:var(--ink-soft);margin-bottom:var(--s3)}
.numerada{list-style:none;counter-reset:n;padding:0;margin:0}
.numerada li{counter-increment:n;display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid rgba(127,127,127,.25)}
.numerada li::before{content:counter(n);flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font:800 .9rem var(--sans);background:var(--cempasuchil);color:#221B14}
.numerada a{font-weight:700;text-decoration:none}.numerada a:hover{text-decoration:underline}
.numerada a.visto::after{content:"";display:inline-block;width:.9em;height:.9em;margin-left:6px;background:var(--ok);-webkit-mask:var(--chk) center/contain no-repeat;mask:var(--chk) center/contain no-repeat;vertical-align:-.1em}
:root{--chk:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E")}
.progreso{font-weight:700;color:var(--jade)}

/* ---------- Unidades (módulos) estilo ruta ---------- */
.unidades{display:grid;gap:var(--s4)}
@media(min-width:880px){.unidades{grid-template-columns:1fr 1fr}}
.unidad-card{--c:var(--talavera);background:var(--card);border-radius:var(--r-lg);overflow:hidden;border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}
.unidad-card header{background:var(--c);color:#fff;padding:var(--s4) var(--s5);display:flex;gap:var(--s3);align-items:center}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .unidad-card header{color:#17130E}}
.unidad-card header .n{font:700 2.4rem/1 var(--display);opacity:.9}
.unidad-card header h3{color:inherit;margin:0;font-size:1.2rem}
.unidad-card header p{margin:2px 0 0;opacity:.9;font-size:.92rem;line-height:1.35}
.unidad-card ol{list-style:none;margin:0;padding:var(--s2) var(--s5) var(--s4)}
.unidad-card li{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px dashed var(--line)}
.unidad-card li:last-child{border-bottom:0}
.unidad-card li::before{content:"";flex:none;width:14px;height:14px;border-radius:50%;border:3px solid var(--c);background:var(--card)}
.unidad-card li:has(a.visto)::before{background:var(--c)}
.unidad-card li a{flex:1;font-weight:700;color:var(--ink);text-decoration:none}
.unidad-card li a:hover{color:var(--c);text-decoration:underline}
.min{margin-left:auto;color:var(--ink-soft);font-size:.82rem;font-weight:700;white-space:nowrap}
.u1{--c:var(--talavera)}.u2{--c:var(--jade)}.u3{--c:var(--terracota)}.u4{--c:var(--rosa)}.u5{--c:var(--talavera-deep)}.u6{--c:var(--cempasuchil-deep)}

/* ---------- Confianza ---------- */
.promesas{display:grid;gap:var(--s4);grid-template-columns:1fr;margin:0;padding:0;list-style:none}
@media(min-width:720px){.promesas{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.promesas{grid-template-columns:repeat(4,1fr)}}
.promesas li{background:var(--card);border-radius:var(--r);padding:var(--s4);display:flex;gap:12px;align-items:flex-start;font-weight:700;box-shadow:0 3px 0 rgba(27,127,101,.25)}
.promesas .i{color:var(--jade);width:28px;height:28px}

/* ---------- FAQ ---------- */
.faq{display:grid;gap:10px;max-width:820px}
details{background:var(--card);border:2px solid var(--line);border-radius:var(--r);padding:0}
summary{cursor:pointer;font-weight:800;list-style:none;padding:16px 52px 16px 18px;position:relative;min-height:56px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);width:28px;height:28px;border-radius:50%;background:var(--talavera-tint);color:var(--talavera);display:grid;place-items:center;font:800 1.2rem/1 var(--sans);transition:transform .2s}
details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
details p{padding:0 18px 16px;margin:0;color:var(--ink-soft)}

/* ---------- Pie ---------- */
.foot{margin-top:0;background:var(--ink);color:#D9CFBF;font-size:.93rem}
.foot::before{content:"";display:block;height:22px;background:var(--tile) repeat-x;background-size:22px 22px;background-color:var(--paper)}
.foot .wrap{padding-top:var(--s6);padding-bottom:var(--s6)}
.foot .cols{display:grid;gap:var(--s5)}
@media(min-width:880px){.foot .cols{grid-template-columns:1.2fr 2fr}}
.foot strong{color:#fff}
.foot a{color:#F9D48A}
.foot .links{display:flex;flex-wrap:wrap;gap:4px 16px;margin:0 0 var(--s4)}
.foot .links a{min-height:36px;display:inline-flex;align-items:center}
.foot .small{color:#BFB3A1}
.foot .brand{color:#fff}.foot .brand small{color:#F6BC45}
.report{color:var(--terracota);font-weight:800}
.foot .report{color:#F6B79E}

/* ---------- Páginas interiores ---------- */
.page-head{background:var(--paper-2);padding:var(--s6) 0 var(--s6);border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.page-head.talavera{background:var(--talavera-tint)}.page-head.jade{background:var(--jade-tint)}.page-head.oro{background:var(--cempasuchil-tint)}.page-head.rosa{background:var(--rosa-tint)}
.page-head .grid{display:grid;gap:var(--s4);align-items:center}
@media(min-width:880px){.page-head .grid{grid-template-columns:1fr auto}}
.page-head .mascota,.page-head .spot{width:150px;height:auto}
.page-head h1{margin-bottom:.25em}
.page-head .lead{margin:0}
.page{padding-top:var(--s6);padding-bottom:var(--s7)}
.aviso{display:flex;gap:10px;align-items:flex-start;background:var(--talavera-tint);border-radius:var(--r);padding:12px 16px;font-size:.93rem;margin:var(--s4) 0;color:var(--ink)}
.aviso .i{color:var(--talavera);margin-top:2px}

/* ---------- Lección ---------- */
.lesson-bar{position:sticky;top:64px;z-index:30;height:6px;background:var(--line)}
.lesson-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--jade),var(--cempasuchil));transition:width .1s linear}
@media(max-width:820px){.lesson-bar{top:112px}}
.lesson-head{--c:var(--talavera);background:var(--c);color:#fff;padding:var(--s5) 0 var(--s6)}
.lesson-head.u2{--c:var(--jade-deep)}.lesson-head.u3{--c:var(--terracota)}.lesson-head.u4{--c:var(--rosa-deep)}.lesson-head.u5{--c:var(--talavera-deep)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .lesson-head{background:#1B2640}}
.lesson-head .kicker{color:#FDF0CC}
.lesson-head h1{color:#fff;max-width:18em;margin-top:.2em}
.lesson-head .meta-row{display:flex;flex-wrap:wrap;gap:8px;margin-top:var(--s3)}
.pill{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.16);border-radius:999px;padding:6px 12px;font-weight:800;font-size:.86rem;color:#fff}
.pill .i{width:16px;height:16px}
.segs{display:flex;gap:3px;margin-top:var(--s4);max-width:560px}
.segs i{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.25)}
.segs i.on{background:var(--cempasuchil)}.segs i.now{background:#fff}
.leccion .lectura{margin:0 auto}
.idea{display:grid;grid-template-columns:auto 1fr;gap:var(--s3);align-items:center;background:var(--cempasuchil-tint);border-radius:var(--r-lg);padding:var(--s4) var(--s5) var(--s4) var(--s3);margin:calc(-1 * var(--s6)) 0 var(--s5);position:relative;box-shadow:var(--shadow);border:2px solid var(--cempasuchil)}
.idea .mascota{width:72px;height:72px}
.idea b{display:block;font:800 .75rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--cempasuchil-deep)}
.idea p{margin:0;font:600 1.12rem/1.45 var(--sans)}
.cuerpo{font-size:1.1rem;line-height:1.72}
.cuerpo p,.cuerpo li{max-width:38em}
.cuerpo strong{background:linear-gradient(transparent 62%,color-mix(in srgb,var(--cempasuchil) 45%,transparent) 62%)}
.cuerpo ul,.cuerpo ol{padding-left:1.3em}.cuerpo li{margin:.35em 0}
.cuerpo li::marker{color:var(--terracota);font-weight:800}
.cuerpo h3{margin-top:1.3em}
.mal{color:var(--bad)}.bien{color:var(--ok)}
.cuerpo p.mal,.cuerpo p.bien{background:var(--card);border-radius:12px;padding:10px 14px;border-left:5px solid currentColor;color:var(--ink)}
.cuerpo p.mal{border-color:var(--bad)}.cuerpo p.bien{border-color:var(--ok)}
.tabla{border-collapse:separate;border-spacing:0;width:100%;font-size:.97rem;margin:14px 0;background:var(--card);border-radius:14px;overflow:hidden;border:2px solid var(--line)}
.tabla th{background:var(--talavera-tint);font-weight:800;text-align:left}
.tabla th,.tabla td{padding:10px 12px;vertical-align:top;border-bottom:1px solid var(--line)}
.tabla tr:last-child td{border-bottom:0}
.panel{border-radius:var(--r-lg);padding:var(--s5);margin:var(--s5) 0;background:var(--card);border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}
.panel h3{display:flex;align-items:center;gap:10px;font-size:1.3rem}
.panel h3 .tile-ic{width:40px;height:40px}
.panel.practica{background:var(--jade-tint);border-color:transparent;box-shadow:none}
.panel.tutorp{background:var(--rosa-tint);border-color:transparent;box-shadow:none}
.panel.quiz{border-color:var(--talavera);box-shadow:0 4px 0 var(--talavera)}
.panel .q{font:700 1.18rem/1.4 var(--sans)}
.opts{display:grid;gap:10px;counter-reset:op}
.opt{counter-increment:op;display:flex;align-items:center;gap:12px;text-align:left;border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:14px;padding:12px 14px;min-height:56px;font:700 1.02rem/1.3 var(--sans);cursor:pointer;box-shadow:0 3px 0 var(--line);transition:transform .1s,border-color .1s,background .1s}
.opts .opt::before{content:counter(op,upper-alpha);flex:none;width:32px;height:32px;border-radius:10px;border:2px solid var(--line);display:grid;place-items:center;font:800 .9rem var(--sans);color:var(--ink-soft)}
.opt:hover{border-color:var(--talavera)}
.opt:active{transform:translateY(3px);box-shadow:none}
.opt.ok{border-color:var(--ok);background:var(--jade-tint);box-shadow:0 3px 0 var(--ok)}
.opt.ok::before{background:var(--ok);border-color:var(--ok);color:#fff}
.opt.no{border-color:var(--bad);background:color-mix(in srgb,var(--bad) 9%,var(--card));box-shadow:0 3px 0 var(--bad)}
.res{font-weight:800;min-height:1.4em;margin:12px 0 0}
.res.bien,.res.mal{display:flex;gap:8px;align-items:center;padding:12px 16px;border-radius:14px}
.res.bien{background:var(--jade-tint);color:var(--jade-deep)}.res.mal{background:color-mix(in srgb,var(--bad) 10%,var(--card));color:var(--bad)}
.pager{display:grid;gap:12px;margin-top:var(--s6)}
@media(min-width:720px){.pager{grid-template-columns:1fr 1fr}}
.pager a{display:flex;flex-direction:column;gap:2px;padding:14px 18px;border-radius:var(--r);background:var(--card);border:2px solid var(--line);text-decoration:none;color:var(--ink);font-weight:700;box-shadow:0 4px 0 var(--line)}
.pager a small{font:800 .72rem var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}
.pager a.next{background:var(--jade);border-color:var(--jade);color:var(--on-accent);box-shadow:0 4px 0 var(--jade-deep);text-align:right}
.pager a.next small{color:inherit;opacity:.85}
.pager a:hover{transform:translateY(-2px)}

/* ---------- Ruta (mapa estilo camino) ---------- */
.mapa{margin:var(--s4) 0 var(--s5)}
.mapa-head{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:800;margin-bottom:var(--s3)}
.meter{flex:1;max-width:320px;height:14px;border-radius:999px;background:var(--line);overflow:hidden}
.meter i{display:block;height:100%;border-radius:999px;background:var(--jade);box-shadow:inset 0 -4px 0 rgba(0,0,0,.12)}
.sendero{position:relative;display:flex;flex-direction:column;align-items:center;gap:14px;padding:var(--s3) 0}
.sendero .grupo{align-self:stretch;margin:var(--s3) 0 4px;padding:10px 16px;border-radius:14px;background:var(--gc,var(--talavera));color:#fff;font-weight:800;display:flex;justify-content:space-between;gap:8px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .sendero .grupo{color:#17130E}}
.sendero .grupo span{opacity:.85;font-size:.88rem}
.nodo{--x:0px;position:relative;transform:translateX(var(--x));display:grid;place-items:center;width:64px;height:60px;border-radius:50%;text-decoration:none;font:800 1.15rem var(--sans);color:var(--ink-soft);background:var(--line);box-shadow:0 6px 0 color-mix(in srgb,var(--line) 60%,#000 12%);transition:transform .15s}
.nodo:hover{transform:translateX(var(--x)) translateY(-2px)}
.nodo.visto{background:var(--cempasuchil);color:#221B14;box-shadow:0 6px 0 var(--cempasuchil-deep)}
.nodo.ok{background:var(--jade);color:#fff;box-shadow:0 6px 0 var(--jade-deep)}
.nodo.ok .i{width:28px;height:28px}
.nodo.sig{background:var(--talavera);color:#fff;box-shadow:0 6px 0 var(--talavera-deep);outline:6px solid color-mix(in srgb,var(--talavera) 22%,transparent);outline-offset:4px}
.nodo.sig::after{content:"Empieza aquí";position:absolute;top:-34px;white-space:nowrap;background:var(--card);color:var(--talavera);border:2px solid var(--line);font:800 .8rem var(--sans);padding:3px 10px;border-radius:10px;animation:bote 1.6s ease-in-out infinite}
@keyframes bote{50%{transform:translateY(-4px)}}
.sendero .meta-final{display:grid;place-items:center;width:84px;height:84px;border-radius:24px;background:var(--cempasuchil-tint);color:var(--cempasuchil-deep);border:3px dashed var(--cempasuchil)}
.sendero .meta-final.si{background:var(--cempasuchil);color:#221B14;border-style:solid}
.sendero .meta-final .i{width:40px;height:40px}
.sendero.compacto .nodo{width:48px;height:44px;font-size:.95rem}
.sendero.compacto{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:10px 8px}
.sendero.compacto .nodo{transform:none}.sendero.compacto .grupo{display:none}.sendero.compacto .nodo.sig::after{display:none}

/* ---------- Estudia ---------- */
.niveles{display:grid;gap:var(--s4)}
@media(min-width:880px){.niveles{grid-template-columns:1fr 1fr}}
.nivel{--c:var(--talavera);--ct:var(--talavera-tint);display:block;border-radius:var(--r-xl);padding:var(--s5);background:var(--ct);text-decoration:none;color:var(--ink);border:2px solid transparent;transition:transform .15s,box-shadow .15s}
.nivel.prepa{--c:var(--jade);--ct:var(--jade-tint)}
.nivel:hover{transform:translateY(-3px);box-shadow:0 6px 0 var(--c);border-color:var(--c);color:var(--ink)}
.nivel .top-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.nivel h2{margin:0}
.nivel .grados{font-weight:800;color:var(--c)}
.materias{display:grid;grid-template-columns:1fr 1fr;gap:8px;list-style:none;padding:0;margin:var(--s4) 0}
.materias li{display:flex;align-items:center;gap:8px;background:var(--card);border-radius:12px;padding:8px 10px;font-weight:700;font-size:.9rem;line-height:1.25}
.materias .tile-ic{width:34px;height:34px;border-radius:10px;background:var(--c)}
.materias .tile-ic .i{width:18px;height:18px}

/* ---------- Pasos (ruta estudiantes) ---------- */
.pasos{list-style:none;padding:0;margin:var(--s4) 0;counter-reset:p;position:relative}
.pasos li{counter-increment:p;position:relative;padding:0 0 var(--s5) 64px}
.pasos li::before{content:counter(p);position:absolute;left:0;top:0;width:46px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--terracota);color:var(--on-accent);font:800 1.1rem var(--sans);box-shadow:0 4px 0 var(--terracota-deep)}
.pasos li::after{content:"";position:absolute;left:22px;top:52px;bottom:6px;border-left:3px dotted var(--line)}
.pasos li:last-child::after{display:none}
.pasos a{font-size:1.08rem}

/* ---------- Juegos ---------- */
.juegos-grid{display:grid;gap:var(--s4)}
@media(min-width:620px){.juegos-grid{grid-template-columns:1fr 1fr}}
@media(min-width:1000px){.juegos-grid{grid-template-columns:repeat(3,1fr)}}
.jcard{--c:var(--talavera);--ct:var(--talavera-tint);display:flex;flex-direction:column;border-radius:var(--r-lg);background:var(--card);border:2px solid var(--line);text-decoration:none;color:var(--ink);overflow:hidden;box-shadow:0 5px 0 var(--line);transition:transform .15s,box-shadow .15s,border-color .15s}
.jcard:hover{transform:translateY(-4px);border-color:var(--c);box-shadow:0 8px 0 var(--c);color:var(--ink)}
.jcard .arte{background:var(--ct);display:grid;place-items:center;height:132px;position:relative;overflow:hidden}
.jcard .arte::before{content:"";position:absolute;inset:0;background:var(--tile);background-size:44px;opacity:.07}
.jcard .arte .big{width:84px;height:84px;border-radius:26px;display:grid;place-items:center;background:var(--c);color:#fff;box-shadow:0 6px 0 rgba(0,0,0,.18);transform:rotate(-4deg);position:relative}
.jcard:nth-child(even) .arte .big{transform:rotate(4deg)}
.jcard .arte .big .i{width:46px;height:46px;stroke-width:1.9}
.jcard .body{padding:var(--s4) var(--s5) var(--s5);display:flex;flex-direction:column;gap:6px;flex:1}
.jcard h3{margin:0;font-size:1.3rem}
.jcard p{margin:0;color:var(--ink-soft)}
.jcard .ir{margin-top:auto;padding-top:var(--s3);display:flex;justify-content:space-between;align-items:center;font-weight:800;color:var(--c)}
.jcard .ir b{background:var(--c);color:var(--on-accent);padding:8px 16px;border-radius:12px;box-shadow:0 3px 0 rgba(0,0,0,.2)}
.jcard.talavera{--c:var(--talavera);--ct:var(--talavera-tint)}.jcard.cempasuchil{--c:var(--cempasuchil-deep);--ct:var(--cempasuchil-tint)}.jcard.terracota{--c:var(--terracota);--ct:var(--terracota-tint)}.jcard.jade{--c:var(--jade);--ct:var(--jade-tint)}.jcard.rosa{--c:var(--rosa);--ct:var(--rosa-tint)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .jcard .arte .big{color:#17130E}}

.juego-area{background:var(--card);border:2px solid var(--line);border-radius:var(--r-xl);padding:var(--s5);min-height:320px;box-shadow:0 6px 0 var(--line);position:relative}
.jhud{display:flex;align-items:center;gap:12px;margin-bottom:var(--s4);font-weight:800;color:var(--ink-soft)}
.jhud .meter{max-width:none}
.jhud .pts{display:inline-flex;align-items:center;gap:4px;color:var(--cempasuchil-deep)}
.grande{font:700 1.3rem/1.35 var(--sans)}
.ecuacion{font:800 clamp(1.5rem,6vw,2.2rem)/1.2 ui-monospace,Menlo,monospace;text-align:center;background:var(--talavera-tint);border-radius:var(--r);padding:var(--s4);margin:0 0 var(--s4)}
.mensaje{background:var(--paper);border-radius:var(--r);margin:0 0 var(--s4);padding:var(--s4) var(--s5);font:600 1.12rem/1.5 var(--sans);position:relative;border:2px solid var(--line)}
.mensaje::before{content:"“";position:absolute;left:10px;top:-14px;font:700 3.2rem/1 var(--display);color:var(--terracota)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:10px 0}
.dos .opt{justify-content:center;text-align:center;min-height:68px;font-size:1.05rem;color:#fff;border:0}
.dos .opt::before{display:none}
.dos .opt.a{background:var(--jade);box-shadow:0 5px 0 var(--jade-deep)}
.dos .opt.b{background:var(--terracota);box-shadow:0 5px 0 var(--terracota-deep)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .dos .opt{color:#17130E}}
.dos .opt:disabled{opacity:.45;cursor:default}
.dos .opt.ok,.dos .opt.no{opacity:1;outline:4px solid var(--cempasuchil);outline-offset:2px}
.fb{margin:var(--s4) calc(-1 * var(--s5)) calc(-1 * var(--s5));padding:var(--s4) var(--s5);border-radius:0 0 var(--r-xl) var(--r-xl);display:grid;gap:12px;align-items:center}
@media(min-width:620px){.fb{grid-template-columns:1fr auto}}
.fb.bien{background:var(--jade-tint);color:var(--jade-deep)}
.fb.mal{background:color-mix(in srgb,var(--bad) 11%,var(--card));color:var(--bad)}
.fb p{margin:0;font-weight:700;color:var(--ink)}
.fb p b{display:block;font:800 1.15rem var(--sans)}
.fb.bien p b{color:var(--jade-deep)}.fb.mal p b{color:var(--bad)}
.piezas{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}
.pieza{border:2px solid var(--line);background:var(--card);color:var(--ink);border-radius:14px;padding:12px 14px;font:700 1rem/1.3 var(--sans);cursor:pointer;min-height:52px;text-align:left;box-shadow:0 3px 0 var(--line);transition:transform .1s}
.pieza:active{transform:translateY(3px);box-shadow:none}
.pieza.sel{border-color:var(--talavera);background:var(--talavera-tint);box-shadow:0 3px 0 var(--talavera)}
.pieza:disabled{cursor:default}
.armado{border:2px dashed var(--talavera);border-radius:var(--r);padding:14px;min-height:64px;background:var(--talavera-tint);font-weight:600}
.meta-j{display:flex;gap:10px;align-items:flex-start;font-weight:700;background:var(--cempasuchil-tint);border-radius:var(--r);padding:12px 14px}
.meta-j .i{color:var(--cempasuchil-deep);margin-top:2px}
.teclado{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;max-width:340px;margin:12px auto}
.tecla{min-height:56px;font:800 1.35rem var(--sans);border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);box-shadow:0 4px 0 var(--line);cursor:pointer}
.tecla:active{transform:translateY(4px);box-shadow:none}
.juego-area .ask{display:flex;gap:10px;max-width:420px;margin:0 auto}
.juego-area .ask input{flex:1;min-width:0;font:800 1.4rem var(--sans);text-align:center;padding:10px;border:2px solid var(--line);border-radius:14px;background:var(--paper);color:var(--ink)}
.ordenados{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:6px}
.ordenados li{background:var(--jade-tint);border-radius:12px;padding:8px 12px;font-weight:700}
.ordenados li b{color:var(--jade-deep);margin-right:6px}
.memo{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(min-width:620px){.memo{grid-template-columns:repeat(4,1fr)}}
.carta{min-height:96px;border-radius:14px;border:0;background:var(--talavera);color:#fff;font:700 .95rem/1.25 var(--sans);padding:8px;cursor:pointer;box-shadow:0 4px 0 var(--talavera-deep);background-image:var(--tile);background-size:30px;background-blend-mode:soft-light;transition:transform .15s}
.carta.abierta{background:var(--card);background-image:none;color:var(--ink);box-shadow:0 4px 0 var(--line);outline:2px solid var(--line)}
.carta.par{background:var(--jade-tint);background-image:none;color:var(--jade-deep);box-shadow:0 4px 0 var(--jade);outline:0}
.fin{text-align:center;padding:var(--s4) 0}
.fin .mascota{width:140px;margin:0 auto}
.fin .score{font:700 clamp(2.4rem,9vw,3.4rem)/1 var(--display);color:var(--terracota);margin:8px 0}
.fin .cta{justify-content:center}
.shake{animation:sh .35s}@keyframes sh{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

/* ---------- Bitácora ---------- */
.perfil{display:grid;gap:var(--s4);align-items:center}
@media(min-width:880px){.perfil{grid-template-columns:auto 1fr}}
.anillo{position:relative;width:170px;height:170px;margin:0 auto}
.anillo svg{width:100%;height:100%;transform:rotate(-90deg)}
.anillo .mascota{position:absolute;inset:22px;width:auto;transform:none}
.anillo .nv{position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);background:var(--talavera);color:var(--on-accent);font:800 .85rem var(--sans);padding:4px 12px;border-radius:999px;white-space:nowrap;box-shadow:0 3px 0 var(--talavera-deep)}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{border-radius:var(--r);padding:var(--s4) var(--s3);text-align:center;background:var(--card);border:2px solid var(--line);box-shadow:0 4px 0 var(--line)}
.stat .i{width:30px;height:30px}
.stat b{display:block;font:700 clamp(1.6rem,5vw,2.2rem)/1.1 var(--display)}
.stat span{font-weight:700;font-size:.85rem;color:var(--ink-soft)}
.stat.fuego .i{color:var(--terracota)}.stat.xp .i{color:var(--cempasuchil-deep)}.stat.ins .i{color:var(--talavera)}
.barra{height:14px;background:var(--line);border-radius:999px;overflow:hidden;margin:8px 0}.barra i{display:block;height:100%;background:var(--cempasuchil);border-radius:999px;box-shadow:inset 0 -4px 0 rgba(0,0,0,.1)}
.pines{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s3)}
@media(min-width:560px){.pines{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.pines{grid-template-columns:repeat(4,1fr)}}
.pin{text-align:center;display:flex;flex-direction:column;align-items:center;gap:6px}
.pin .medalla{width:108px;height:108px;filter:drop-shadow(0 5px 0 rgba(34,27,20,.18));transition:transform .2s}
.pin.si .medalla:hover{transform:rotate(-6deg) scale(1.05)}
.pin strong{font-weight:800;line-height:1.2}
.pin small{color:var(--ink-soft);font-size:.83rem;line-height:1.35;max-width:16em}
.pin.no .medalla{filter:grayscale(1);opacity:.45}
.pin.no strong{color:var(--ink-soft)}
.vacio{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);align-items:center;background:var(--paper-2);border-radius:var(--r-lg);padding:var(--s4) var(--s5)}
.vacio .mascota{width:84px}
.vacio p{margin:0 0 8px;font-weight:700}
.rutas-bit{display:grid;gap:var(--s4)}
@media(min-width:880px){.rutas-bit{grid-template-columns:repeat(3,1fr)}}
.ruta-bit{background:var(--card);border-radius:var(--r-lg);padding:var(--s4) var(--s5);border:2px solid var(--line)}
.ruta-bit h3{font-size:1.15rem}

/* ---------- Constancia ---------- */
.cert-prev{background:#FFFDF7 var(--tile);background-size:26px;border-radius:6px;padding:18px;box-shadow:0 18px 40px -20px rgba(34,27,20,.45);position:relative;max-width:560px;margin:0 auto;transform:rotate(-1.2deg)}
.cert-prev .in{background:#FFFDF7;outline:2px solid #B84A26;outline-offset:-8px;padding:28px 22px;text-align:center;color:#221B14}
.cert-prev .t{font:700 1.5rem/1.1 "Fraunces",Georgia,serif;margin:.3em 0}
.cert-prev .n{font:italic 600 1.4rem "Fraunces",Georgia,serif;color:#1E4FA0;border-bottom:1.5px solid #C9BBA2;display:inline-block;padding:0 24px 4px;margin:.4em 0}
.cert-prev .s{font-size:.78rem;color:#5B5046}
.cert-prev .sello{position:absolute;right:-14px;bottom:-14px;width:84px;height:84px}
.cert-prev .nota{font:800 .66rem var(--sans);letter-spacing:.1em;text-transform:uppercase;color:#8A3316;margin-top:10px}
.rutas-sel{display:flex;flex-wrap:wrap;gap:8px;margin:var(--s3) 0}
.chip-btn{min-height:44px;padding:0 16px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:800 .95rem var(--sans);cursor:pointer;box-shadow:0 3px 0 var(--line)}
.chip-btn[aria-pressed="true"]{border-color:var(--talavera);background:var(--talavera);color:var(--on-accent);box-shadow:0 3px 0 var(--talavera-deep)}
.estado-box{background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);padding:var(--s4) var(--s5);margin:var(--s4) 0}
.certimg{width:100%;height:auto;border-radius:6px;margin:12px 0;box-shadow:0 18px 40px -20px rgba(34,27,20,.45)}
#cform{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
#cform label{flex-basis:100%;font-weight:800}
#cform input,.campo{flex:1;min-width:0;font:700 1.1rem var(--sans);padding:14px;border:2px solid var(--line);border-radius:14px;background:var(--card);color:var(--ink);min-height:54px}
@media print{body *{visibility:hidden}.certimg,.certimg *{visibility:visible}.certimg{position:fixed;left:0;top:0;width:100%;box-shadow:none}}

/* ---------- Tutor ---------- */
.tutor-layout{display:grid;gap:var(--s5)}
@media(min-width:960px){.tutor-layout{grid-template-columns:300px 1fr;align-items:start}.tutor-side{position:sticky;top:84px}}
.tutor-side .personajes{grid-template-columns:repeat(2,1fr)}
@media(min-width:960px){.tutor-side .personajes{grid-template-columns:1fr}.tutor-side .personaje{flex-direction:row;text-align:left;padding:10px 12px}.tutor-side .personaje .avatar{width:56px;height:56px}.tutor-side .personaje[aria-pressed="true"]::after{display:none}}
.tutor-side .personaje span{display:flex;flex-direction:column;gap:2px}
.chatbox{background:var(--card);border:2px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:0 6px 0 var(--line);display:flex;flex-direction:column}
.chatbox .ch-head{display:flex;gap:12px;align-items:center;padding:12px 18px;background:var(--rosa-tint);border-bottom:2px solid var(--line)}
.chatbox .ch-head .mascota{width:52px;height:52px}
.chatbox .ch-head b{display:block;font:700 1.15rem var(--display)}
.chatbox .ch-head small{color:var(--ink-soft);font-weight:700}
.chatbox .ch-head .modo-actual{margin-left:auto;font-weight:800;font-size:.85rem;background:var(--card);border-radius:999px;padding:6px 12px;color:var(--talavera)}
.chat{min-height:320px;max-height:62vh;overflow-y:auto;padding:var(--s4);display:flex;flex-direction:column;gap:12px;background:var(--paper)}
.msg{max-width:86%;padding:12px 16px;border-radius:20px;white-space:pre-wrap;line-height:1.55;position:relative}
.msg.a{align-self:flex-start;background:var(--card);border:2px solid var(--line);border-bottom-left-radius:6px}
.msg.u{align-self:flex-end;background:var(--talavera);color:var(--on-accent);border-bottom-right-radius:6px}
.msg.info{background:var(--cempasuchil-tint);border-color:transparent}
.msg.err{background:color-mix(in srgb,var(--bad) 10%,var(--card));border-color:var(--bad)}
.msg .rep{display:block;margin-top:8px;background:none;border:0;padding:0;color:var(--terracota);font:800 .82rem var(--sans);cursor:pointer;text-decoration:underline}
.pensando::after{content:"";display:inline-block;width:1.2em;text-align:left;animation:puntos 1.2s steps(4) infinite}
@keyframes puntos{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.ask{display:flex;gap:10px;padding:12px;border-top:2px solid var(--line);background:var(--card);align-items:flex-end}
.ask textarea{flex:1;min-width:0;font:600 1.05rem/1.4 var(--sans);padding:12px 14px;border:2px solid var(--line);border-radius:16px;background:var(--paper);color:var(--ink);resize:vertical;min-height:54px}
.ask textarea:focus,#cform input:focus,.campo:focus{border-color:var(--talavera);outline:none;box-shadow:0 0 0 4px var(--talavera-tint)}
.sugs{display:flex;flex-wrap:wrap;gap:8px;padding:0 12px 14px;background:var(--card)}
.sug{min-height:40px;padding:0 14px;border-radius:999px;border:2px solid var(--line);background:var(--card);color:var(--ink);font:700 .9rem var(--sans);cursor:pointer}
.sug:hover{border-color:var(--rosa);color:var(--rosa-deep)}

/* ---------- Legal y formularios ---------- */
.legal .lectura{margin:0}
.legal h2{font-size:1.3rem;margin-top:1.6em;display:flex;gap:10px;align-items:baseline}
.legal .resumen{background:var(--jade-tint);border-radius:var(--r-lg);padding:var(--s4) var(--s5);font-size:1.05rem}
.rep-form{display:grid;gap:10px;max-width:560px;background:var(--card);border:2px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.rep-form label{font-weight:800}
.rep-form select,.rep-form textarea{font:600 1rem var(--sans);padding:12px;border:2px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);min-height:50px}

/* ---------- Toasts y celebración ---------- */
.toasts{position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:80;display:flex;flex-direction:column;gap:8px;width:min(92vw,420px);max-width:calc(100vw - 32px);pointer-events:none}
.toast{display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);padding:12px 16px;border-radius:16px;font-weight:800;box-shadow:0 8px 24px rgba(0,0,0,.25);animation:sube .3s ease-out}
.toast .i{color:var(--cempasuchil);width:22px;height:22px}
@keyframes sube{from{transform:translateY(16px);opacity:0}}
.xp-pop{position:fixed;z-index:90;font:800 1.4rem var(--sans);color:var(--cempasuchil-deep);pointer-events:none;animation:pop 1.1s ease-out forwards;text-shadow:0 2px 0 var(--card)}
@keyframes pop{0%{transform:translate(-50%,0) scale(.6);opacity:0}20%{transform:translate(-50%,-10px) scale(1.15);opacity:1}100%{transform:translate(-50%,-70px) scale(1);opacity:0}}
.confeti{position:fixed;inset:0;pointer-events:none;z-index:85;overflow:hidden}
.confeti i{position:absolute;top:-16px;width:10px;height:14px;border-radius:2px;animation:cae 1.6s cubic-bezier(.2,.6,.4,1) forwards}
@keyframes cae{to{transform:translate(var(--dx),105vh) rotate(var(--r));opacity:.9}}

[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.confeti,.xp-pop{display:none}}

@media(max-width:480px){.brand small{display:none}.brand b{font-size:1.02rem}.hud{gap:4px}.hud .chip{padding:0 7px;min-height:32px}.hud .c-ins{display:none}.top .row{gap:8px}}
@media(max-width:879px){.page-head .mascota,.page-head .spot{display:none}.page-head{padding:24px 0}}
@media(max-width:560px){.nivel .spot{display:none}.chatbox .ask{flex-wrap:wrap}.chatbox .ask textarea{flex-basis:100%}.chatbox .ask .btn{flex:1 1 100%}.chat{min-height:260px}}