/* Aprendiendo con Thiago — shared cursos styles
   Reuses the same palette + Fredoka/Nunito as the homepage */
:root{
  --cielo:#8DDDE8; --cream:#FFF3DC; --paper:#FFFAF0;
  --rojo:#E63946; --rojo-deep:#C42E3B;
  --amarillo:#FFC93C; --amarillo-deep:#F4B11A;
  --turquesa:#19B7C8; --turquesa-deep:#0E8D9B;
  --rosa:#FF7FA3; --rosa-deep:#E55B85;
  --verde:#57C45C; --verde-deep:#3FA044;
  --naranja:#FF8A3D; --morado:#9469E0;
  --tinta:#2A1B12; --tinta-soft:#4A382B;
  --linea:rgba(42,27,18,.14);
  --bg:#F6EFE2;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Nunito',system-ui,-apple-system,sans-serif;color:var(--tinta);background:var(--bg);font-size:17px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:'Fredoka',system-ui,sans-serif;font-weight:700;letter-spacing:-.01em;margin:0;line-height:1.1}
a{color:inherit}
img{max-width:100%;display:block}
.wrap{width:100%;max-width:1100px;margin:0 auto;padding:0 20px}
@media(min-width:800px){.wrap{padding:0 32px}}

/* TOP BAR */
.topbar{background:#fff;border-bottom:3px solid var(--tinta);padding:14px 0;position:sticky;top:0;z-index:50}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--tinta);font-family:'Fredoka',sans-serif;font-weight:700;font-size:18px}
.brand .dot{width:14px;height:14px;border-radius:50%;background:var(--rojo);border:2px solid var(--tinta)}
.crumbs{font-size:13px;color:var(--tinta-soft);font-weight:600}
.crumbs a{color:var(--rojo);text-decoration:none}
.crumbs a:hover{text-decoration:underline}

/* BUTTONS */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--amarillo);color:var(--tinta);border:3px solid var(--tinta);border-radius:14px;padding:12px 20px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:15px;text-decoration:none;box-shadow:3px 3px 0 var(--tinta);cursor:pointer;transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--tinta)}
.btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--tinta)}
.btn.btn-rojo{background:var(--rojo);color:#fff}
.btn.btn-turquesa{background:var(--turquesa);color:#fff}
.btn.btn-verde{background:var(--verde);color:#fff}
.btn.btn-ghost{background:#fff}

/* HEADERS */
.page-header{padding:40px 0 28px}
.page-header h1{font-size:clamp(32px,5.5vw,52px);margin-bottom:10px;color:var(--rojo)}
.page-header .sub{font-size:clamp(16px,2vw,19px);color:var(--tinta-soft);max-width:60ch;margin:0}
.page-header .badge{display:inline-block;background:var(--amarillo);color:var(--tinta);border:2.5px solid var(--tinta);padding:6px 14px;border-radius:999px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:14px;box-shadow:2px 2px 0 var(--tinta)}

/* TIER CARDS (level picker) */
.tier-grid{display:grid;grid-template-columns:1fr;gap:18px;margin:28px 0 48px}
@media(min-width:720px){.tier-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.tier-grid{grid-template-columns:repeat(3,1fr)}}
.tier{background:#fff;border:3px solid var(--tinta);border-radius:22px;padding:24px;box-shadow:5px 5px 0 var(--tinta);text-decoration:none;color:var(--tinta);display:flex;flex-direction:column;gap:8px;transition:transform .12s ease,box-shadow .12s ease}
.tier:hover{transform:translate(2px,2px);box-shadow:3px 3px 0 var(--tinta)}
.tier .age{font-family:'Caveat',cursive;font-weight:700;color:var(--rojo);font-size:22px;line-height:1}
.tier h2{font-size:28px}
.tier p{margin:4px 0 8px;color:var(--tinta-soft);font-size:15px}
.tier .pill{display:inline-block;background:var(--amarillo);color:var(--tinta);border:2px solid var(--tinta);padding:4px 10px;border-radius:999px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:11px;letter-spacing:.08em;text-transform:uppercase;margin-top:4px}
.tier.tier-rojo{background:var(--rojo);color:#fff}
.tier.tier-rojo p,.tier.tier-rojo .age{color:rgba(255,255,255,.92)}
.tier.tier-turquesa{background:var(--turquesa);color:#fff}
.tier.tier-turquesa p,.tier.tier-turquesa .age{color:rgba(255,255,255,.92)}
.tier.tier-morado{background:var(--morado);color:#fff}
.tier.tier-morado p,.tier.tier-morado .age{color:rgba(255,255,255,.92)}
.tier.tier-verde{background:var(--verde);color:#fff}
.tier.tier-verde p,.tier.tier-verde .age{color:rgba(255,255,255,.92)}

/* SUBJECT GRID */
.subject-grid{display:grid;grid-template-columns:1fr;gap:16px;margin:24px 0 40px}
@media(min-width:640px){.subject-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:980px){.subject-grid{grid-template-columns:repeat(3,1fr)}}
.subject{background:#fff;border:3px solid var(--tinta);border-radius:20px;padding:20px;box-shadow:4px 4px 0 var(--tinta);text-decoration:none;color:var(--tinta);display:flex;flex-direction:column;gap:6px;transition:transform .12s,box-shadow .12s}
.subject:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--tinta)}
.subject .ico{width:54px;height:54px;border-radius:14px;background:var(--amarillo);border:2.5px solid var(--tinta);display:flex;align-items:center;justify-content:center;font-size:28px;margin-bottom:8px;box-shadow:2px 2px 0 var(--tinta)}
.subject h3{font-size:20px}
.subject p{margin:2px 0 0;font-size:14px;color:var(--tinta-soft)}
.subject .guide{font-family:'Caveat',cursive;font-weight:700;color:var(--rojo);font-size:18px;margin-top:6px}

/* LESSON LIST */
.lesson-intro{background:#fff;border:3px solid var(--tinta);border-radius:22px;padding:24px;box-shadow:5px 5px 0 var(--tinta);margin:24px 0 28px}
.lesson-intro h2{font-size:24px;margin-bottom:10px;color:var(--rojo)}
.lesson-intro p{margin:0 0 8px;color:var(--tinta-soft)}
.lesson-intro .meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.lesson-intro .meta span{background:var(--cream);border:2px solid var(--tinta);padding:4px 12px;border-radius:999px;font-size:13px;font-family:'Fredoka',sans-serif;font-weight:600}
.lesson-list{display:grid;grid-template-columns:1fr;gap:12px;margin:0 0 48px}
.lesson-item{background:#fff;border:2.5px solid var(--tinta);border-radius:14px;padding:14px 18px;text-decoration:none;color:var(--tinta);display:flex;align-items:center;gap:14px;box-shadow:3px 3px 0 var(--tinta);transition:transform .12s,box-shadow .12s}
.lesson-item:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--tinta)}
.lesson-item .num{background:var(--rojo);color:#fff;width:38px;height:38px;border-radius:50%;border:2.5px solid var(--tinta);display:flex;align-items:center;justify-content:center;font-family:'Fredoka',sans-serif;font-weight:700;flex-shrink:0}
.lesson-item h3{font-size:17px;margin:0}
.lesson-item p{margin:2px 0 0;font-size:13px;color:var(--tinta-soft)}
.lesson-item .body{flex:1;min-width:0}
.lesson-item .arrow{color:var(--rojo);font-size:22px;font-weight:700}

/* LESSON PAGE */
.lesson-page{max-width:780px;margin:0 auto}
.lesson-page .progress{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--tinta-soft);margin:12px 0 20px;font-family:'Fredoka',sans-serif;font-weight:600}
.lesson-page .progress .bar{flex:1;height:8px;background:#fff;border:2px solid var(--tinta);border-radius:999px;overflow:hidden}
.lesson-page .progress .bar i{display:block;height:100%;background:var(--verde);border-right:2px solid var(--tinta)}
.lesson-page h1{font-size:clamp(28px,4.5vw,40px);color:var(--rojo);margin-bottom:6px}
.lesson-page .objective{background:var(--amarillo);border:3px solid var(--tinta);border-radius:14px;padding:14px 18px;margin:14px 0 24px;box-shadow:3px 3px 0 var(--tinta)}
.lesson-page .objective strong{display:block;font-family:'Fredoka',sans-serif;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinta-soft);margin-bottom:4px}
.lesson-page .objective p{margin:0;font-weight:600}
.lesson-page .content{background:#fff;border:3px solid var(--tinta);border-radius:18px;padding:24px;box-shadow:4px 4px 0 var(--tinta);margin-bottom:24px}
.lesson-page .content h2{font-size:22px;color:var(--rojo);margin:18px 0 8px}
.lesson-page .content h2:first-child{margin-top:0}
.lesson-page .content p{margin:0 0 12px}
.lesson-page .content ul,.lesson-page .content ol{margin:8px 0 14px;padding-left:22px}
.lesson-page .content li{margin-bottom:6px}
.lesson-page .content .tip{background:var(--cream);border-left:5px solid var(--amarillo);padding:12px 14px;border-radius:8px;margin:14px 0}
.lesson-page .content .ejemplo{background:#FFF8E8;border:2px dashed var(--tinta);padding:14px;border-radius:12px;margin:14px 0}
.lesson-page .content .ejemplo strong{color:var(--rojo)}
.lesson-page .exercise{background:var(--turquesa);color:#fff;border:3px solid var(--tinta);border-radius:18px;padding:22px;box-shadow:4px 4px 0 var(--tinta);margin-bottom:24px}
.lesson-page .exercise h2{font-size:22px;margin-bottom:8px;color:#fff}
.lesson-page .exercise p{margin:0 0 12px}
.lesson-page .exercise .prompt{background:rgba(255,255,255,.18);border:2px dashed rgba(255,255,255,.6);border-radius:12px;padding:14px;margin:10px 0;font-weight:600}
.lesson-page .nav-prevnext{display:flex;justify-content:space-between;gap:12px;margin:32px 0}
.lesson-page .nav-prevnext .btn{flex:1;justify-content:center;text-align:center}
.lesson-page .nav-prevnext .btn.placeholder{visibility:hidden}

/* PROFESOR CIELO chat bubble (floating) */
.cielo-fab{position:fixed;right:18px;bottom:18px;background:#7C43D6;color:#fff;border:3px solid var(--tinta);border-radius:999px;padding:14px 18px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:15px;box-shadow:4px 4px 0 var(--tinta);cursor:pointer;z-index:60;display:inline-flex;align-items:center;gap:8px}
.cielo-fab:hover{transform:translate(1px,1px);box-shadow:3px 3px 0 var(--tinta)}
.cielo-fab .av{width:26px;height:26px;border-radius:50%;background:var(--amarillo);border:2px solid var(--tinta);display:flex;align-items:center;justify-content:center;font-size:14px}
.cielo-panel{position:fixed;right:18px;bottom:78px;width:min(380px,calc(100vw - 36px));max-height:min(560px,75vh);background:#fff;border:3px solid var(--tinta);border-radius:18px;box-shadow:6px 6px 0 var(--tinta);z-index:60;display:none;flex-direction:column;overflow:hidden}
.cielo-panel.open{display:flex}
.cielo-panel header{background:#7C43D6;color:#fff;padding:12px 16px;font-family:'Fredoka',sans-serif;font-weight:700;display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid var(--tinta)}
.cielo-panel header button{background:rgba(255,255,255,.2);color:#fff;border:none;border-radius:6px;width:28px;height:28px;font-size:18px;cursor:pointer;font-family:inherit;font-weight:700}
.cielo-panel .chat{flex:1;overflow-y:auto;padding:12px;background:var(--cream);font-size:14px;line-height:1.5}
.cielo-panel .msg{background:#fff;border:2px solid var(--tinta);border-radius:10px;padding:8px 10px;margin-bottom:8px}
.cielo-panel .msg strong{color:#7C43D6}
.cielo-panel .msg.user{background:var(--amarillo)}
.cielo-panel .msg.user strong{color:var(--tinta)}
.cielo-panel form{display:flex;gap:6px;padding:10px;border-top:2px solid var(--tinta);background:#fff}
.cielo-panel input{flex:1;padding:10px 12px;border:2px solid var(--tinta);border-radius:10px;font-family:inherit;font-size:14px}
.cielo-panel button[type=submit]{background:var(--amarillo);border:2px solid var(--tinta);border-radius:10px;padding:8px 14px;font-family:'Fredoka',sans-serif;font-weight:700;cursor:pointer;color:var(--tinta)}

/* CHARACTER GUIDE card */
.guide-card{background:#fff;border:3px solid var(--tinta);border-radius:18px;padding:18px;box-shadow:4px 4px 0 var(--tinta);display:flex;gap:14px;align-items:center;margin:16px 0 24px}
.guide-card .avatar{width:64px;height:64px;border-radius:50%;background:var(--rosa);border:3px solid var(--tinta);display:flex;align-items:center;justify-content:center;font-size:32px;flex-shrink:0}
.guide-card h3{font-size:18px;margin-bottom:2px}
.guide-card p{font-size:14px;margin:0;color:var(--tinta-soft)}

/* TEA / quiet mode override (calmer, lower contrast) */
body.quiet{background:#F2F4F8;font-size:18px}
body.quiet .page-header h1{color:#2E6FB0}
body.quiet .btn{background:#CDE3F7;box-shadow:none;border-color:#5A6A7A}
body.quiet .lesson-page .objective{background:#E8F0F8;box-shadow:none;border-color:#5A6A7A}
body.quiet .lesson-page .exercise{background:#CDE3F7;color:#1F2A36;box-shadow:none;border-color:#5A6A7A}
body.quiet .lesson-page .exercise h2{color:#1F2A36}
body.quiet .cielo-fab{background:#5A8AB5;box-shadow:none;border-color:#3D5B7A}

/* FOOTER */
.footer{padding:80px 0 90px;text-align:center;font-size:13px;color:var(--tinta-soft)}
.footer a{color:var(--rojo)}

/* PERSISTENT LESSON NAV — Bug #4 fix. Fixed bottom-left so children never get trapped. */
#lesson-nav{position:fixed;left:12px;top:64px;z-index:70;display:flex;gap:8px;flex-wrap:wrap;max-width:calc(100vw - 24px)}
#lesson-nav .lnav-btn{background:#fff;color:var(--tinta);border:2.5px solid var(--tinta);border-radius:12px;padding:10px 14px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:14px;text-decoration:none;box-shadow:3px 3px 0 var(--tinta);cursor:pointer;display:inline-flex;align-items:center;gap:6px;line-height:1}
#lesson-nav .lnav-btn:hover{transform:translate(1px,1px);box-shadow:2px 2px 0 var(--tinta)}
#lesson-nav .lnav-btn:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--tinta)}
#lesson-tools-panel{position:fixed;left:12px;top:112px;z-index:71;background:#fff;border:1.5px solid rgba(124,67,214,.16);border-radius:14px;padding:10px;box-shadow:0 8px 20px rgba(124,67,214,.14);display:none;flex-direction:column;gap:6px;min-width:200px}
#lesson-tools-panel.open{display:flex}
#lesson-tools-panel .lnav-tool{padding:10px 12px;background:var(--paper);border:2px solid var(--linea);border-radius:10px;text-decoration:none;color:var(--tinta);font-family:'Fredoka',sans-serif;font-weight:700;font-size:14px}
#lesson-tools-panel .lnav-tool:hover{background:var(--amarillo);border-color:var(--tinta)}
#lesson-tools-panel button.lnav-tool{display:block;width:100%;text-align:left;cursor:pointer}
/* ===== Personajes animados en TODAS las lecciones (preescolar, primaria, secundaria) ===== */
@keyframes act-bob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-2deg)}}
@keyframes act-bounce{0%{transform:scale(1)}25%{transform:scale(1.18) rotate(-7deg)}55%{transform:scale(.9) rotate(5deg)}80%{transform:scale(1.06) rotate(-2deg)}100%{transform:scale(1)}}
#act-kit .act-tutor img,#act-kit .act-mascota .me-img,#act-kit .act-mascota .me{animation:act-bob 3s ease-in-out infinite;will-change:transform}
#act-kit .act-tutor img{animation-duration:3.6s}
#act-kit .act-mascota{cursor:pointer}
#act-kit .act-mascota .me-img,#act-kit .act-mascota .me{transform-origin:center bottom}
#act-kit .act-mascota.bounce .me-img,#act-kit .act-mascota.bounce .me{animation:act-bounce .65s ease}
@media (prefers-reduced-motion: reduce){#act-kit .act-tutor img,#act-kit .act-mascota .me-img,#act-kit .act-mascota .me{animation:none}}
/* Keep the Cielo FAB clear of the lesson-nav on the bottom edge */
.cielo-fab{bottom:74px}
@media(min-width:720px){.cielo-fab{bottom:18px}}

/* ===== LESSON KIT — read-aloud, character tutor, stars/rewards ===== */
#act-kit{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:#fff;border:3px solid var(--tinta);border-radius:18px;box-shadow:4px 4px 0 var(--tinta);padding:12px 14px;margin:6px 0 20px}
.act-tutor{display:flex;align-items:center;gap:10px;min-width:0}
.act-tutor img{height:52px;width:auto;filter:drop-shadow(0 4px 6px rgba(10,4,40,.25))}
.act-tutor img.act-outfit{height:74px;margin:-8px 0}
.act-tutor-t{display:flex;flex-direction:column;line-height:1.15}
.act-tutor-t b{font-family:'Fredoka',sans-serif;font-size:16px;color:var(--morado)}
.act-tutor-t span{font-size:12px;color:var(--tinta-soft)}
.act-btn-read{margin-left:auto;background:var(--amarillo);color:var(--tinta);border:3px solid var(--tinta);border-radius:999px;padding:12px 20px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:17px;box-shadow:3px 3px 0 var(--tinta);cursor:pointer}
.act-btn-read:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--tinta)}
.act-stars{background:#FFF3DC;border:2.5px solid var(--amarillo-deep);border-radius:999px;padding:9px 16px;font-family:'Fredoka',sans-serif;font-size:16px;color:var(--tinta);white-space:nowrap}
.act-stars b{color:var(--amarillo-deep)}
.act-hl{background:#FFF3A8 !important;border-radius:8px;box-shadow:0 0 0 4px #FFF3A8;transition:background .2s}
.act-whl{background:#FFD34D !important;border-radius:6px;box-shadow:0 0 0 3px #FFD34D;transition:background .12s}
body.act-reading .act-btn-read{background:var(--rojo);color:#fff;animation:actpulse 1.1s ease-in-out infinite}
@keyframes actpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
#act-finish{margin:24px 0 8px;text-align:center}
.act-btn-finish{background:var(--verde);color:#fff;border:3px solid var(--tinta);border-radius:14px;padding:15px 26px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:19px;box-shadow:4px 4px 0 var(--tinta);cursor:pointer}
.act-btn-finish span{font-size:15px;opacity:.95;margin-left:6px}
.act-btn-finish:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--tinta)}
.act-done{background:#E5F8E7;border:2.5px solid var(--verde);border-radius:14px;padding:14px 18px;font-family:'Fredoka',sans-serif;font-weight:600;color:#2f7a33;display:inline-block}
.act-vestir{display:inline-block;margin-left:8px;background:var(--morado);color:#fff;text-decoration:none;border-radius:999px;padding:7px 15px;font-size:14px}
.act-confetti{position:fixed;top:-30px;z-index:9999;pointer-events:none;animation:actfall 1.5s ease-in forwards}
@keyframes actfall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(105vh) rotate(360deg);opacity:0}}
@media(max-width:560px){.act-btn-read{margin-left:0;width:100%;order:3}.act-stars{order:2}#act-kit{justify-content:space-between}}

/* ===== TAP-TO-COUNT (preescolar números) ===== */
.act-count{background:#fff;border:3px solid var(--tinta);border-radius:20px;box-shadow:5px 5px 0 var(--tinta);padding:18px 18px 20px;margin:22px 0}
.act-count h2{font-family:'Fredoka',sans-serif;color:var(--morado);margin:0 0 2px;font-size:24px}
.act-count-hint{margin:0 0 12px;color:var(--tinta-soft)}
.act-count-display{text-align:center;margin:6px 0 14px}
.act-count-display span{display:inline-block;min-width:96px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:58px;color:var(--rojo);background:#FFF3DC;border:3px solid var(--tinta);border-radius:18px;padding:2px 22px}
.act-objs{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.act-obj{font-size:46px;background:#F4FBFF;border:3px solid var(--tinta);border-radius:16px;padding:6px 12px;cursor:pointer;line-height:1;transition:transform .12s,background .12s;box-shadow:3px 3px 0 var(--tinta)}
.act-obj:active{transform:scale(.92)}
.act-obj.counted{background:#FFF3A8;animation:actglow .55s ease;box-shadow:0 0 0 5px #FFE26B,3px 3px 0 var(--tinta)}
@keyframes actglow{0%{transform:scale(1)}40%{transform:scale(1.35) rotate(-6deg)}100%{transform:scale(1.1)}}
.act-count-reset{margin:16px auto 0;display:block;background:var(--morado);color:#fff;border:3px solid var(--tinta);border-radius:999px;padding:10px 24px;font-family:'Fredoka',sans-serif;font-weight:700;font-size:16px;cursor:pointer;box-shadow:3px 3px 0 var(--tinta)}
.act-count-reset:active{transform:translate(3px,3px);box-shadow:0 0 0 var(--tinta)}

/* ===== Per-subject mascota chip (Cielo's 27-mascot system) ===== */
.act-mascota{display:flex;align-items:center;gap:8px;background:#EAF7F1;border:2.5px solid var(--tinta);border-radius:14px;padding:6px 12px}
.act-mascota .me{font-size:26px;line-height:1}
.act-mascota small{display:block;font-size:10px;color:var(--tinta-soft);text-transform:uppercase;letter-spacing:.5px}
.act-mascota b{font-family:'Fredoka',sans-serif;font-size:14px;color:#0E8D9B;line-height:1.1}
@media(max-width:560px){.act-mascota{order:2}}

/* Mascota real art (framed on its dark background as a circular badge) */
.act-mascota .me-img{width:84px;height:84px;border-radius:18px;object-fit:contain;background:#000;border:3px solid var(--tinta);display:block;box-shadow:2px 2px 0 var(--tinta);animation:masSaluda 2.6s ease-in-out infinite;transform-origin:bottom center}
@keyframes masSaluda{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.act-mascota .me-img:hover{animation-duration:.55s}
@media(prefers-reduced-motion:reduce){.act-mascota .me-img{animation:none}}

/* ===== Lección: diseño suave estilo mockup de Cielo (fondo lila + título morado + estrellitas) ===== */
body.leccion{background-color:#F1ECFB;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ccircle cx='30' cy='40' r='3.5' fill='%23cdbcf2'/%3E%3Ccircle cx='150' cy='90' r='2.5' fill='%23a9e3e3'/%3E%3Ccircle cx='92' cy='162' r='3' fill='%23f3c8dd'/%3E%3Ccircle cx='176' cy='28' r='2' fill='%23cdbcf2'/%3E%3Ccircle cx='60' cy='110' r='2' fill='%23f3c8dd'/%3E%3C/svg%3E")}
.lesson-head{margin:6px 0 18px;position:relative}
.lesson-head .lh-sub{display:block;font-family:'Fredoka',sans-serif;font-weight:600;font-size:13px;opacity:.9;text-transform:uppercase;letter-spacing:.7px;color:var(--morado)}
.lesson-head h1{margin:2px 0 0;font-family:'Fredoka',sans-serif;font-weight:700;color:var(--morado);font-size:clamp(28px,5vw,40px);line-height:1.1}
.lesson-head h1::after{content:'✨';font-size:.55em;margin-left:10px;vertical-align:middle}
.lesson-page .objective{position:relative;padding-right:56px}
.lesson-page .objective::after{content:'🎯';position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:26px;line-height:1}
.lesson-page .content h2{color:var(--morado)}
.lesson-page .content h2::before{content:'';display:inline-block;width:13px;height:13px;border-radius:50%;background:var(--morado);margin-right:9px;vertical-align:middle;box-shadow:0 0 0 4px rgba(148,105,224,.18)}

/* ===== Estilo suave (mockups de Cielo): bordes finos, sombras suaves, fondos claritos ===== */
body{background:#FBF7FF}
.topbar{border-bottom:1.5px solid rgba(124,67,214,.12);box-shadow:0 2px 12px rgba(124,67,214,.06)}
.tier,.subject,.lesson-item,.guide-card,.lesson-intro,
.lesson-page .content,.lesson-page .objective,.lesson-page .exercise{
  border:1.5px solid rgba(124,67,214,.16) !important;
  box-shadow:0 10px 26px rgba(124,67,214,.10) !important;
}
.subject:hover,.tier:hover,.lesson-item:hover{transform:translateY(-2px);box-shadow:0 14px 30px rgba(124,67,214,.16) !important}
.page-header .badge{border:1.5px solid rgba(124,67,214,.18) !important;box-shadow:0 4px 12px rgba(124,67,214,.12) !important}
.btn{border:1.5px solid rgba(124,67,214,.16) !important;box-shadow:0 5px 14px rgba(124,67,214,.14) !important}
.btn:hover{transform:translateY(-1px) !important;box-shadow:0 7px 18px rgba(124,67,214,.18) !important}
.btn:active{transform:translateY(0) !important;box-shadow:0 3px 10px rgba(124,67,214,.14) !important}
.lesson-page .progress .bar{border:1.5px solid rgba(124,67,214,.18)}
.lesson-page .content .ejemplo{border:1.5px dashed rgba(124,67,214,.32) !important}
/* Tarjetas de nivel en tono pastel con texto de color (como el dibujo de Cielo) */
.tier.tier-rojo{background:#FDEDEF !important;color:var(--tinta) !important}
.tier.tier-turquesa{background:#E4F7FA !important;color:var(--tinta) !important}
.tier.tier-morado{background:#F2ECFC !important;color:var(--tinta) !important}
.tier.tier-verde{background:#EAF7EC !important;color:var(--tinta) !important}
.tier.tier-rojo h2,.tier.tier-rojo .age{color:var(--rojo) !important}
.tier.tier-turquesa h2,.tier.tier-turquesa .age{color:var(--turquesa-deep) !important}
.tier.tier-morado h2,.tier.tier-morado .age{color:var(--morado) !important}
.tier.tier-verde h2,.tier.tier-verde .age{color:var(--verde-deep) !important}
.tier p{color:var(--tinta-soft) !important}
.tier .pill,.subject .ico{border:1.5px solid rgba(124,67,214,.18) !important;box-shadow:0 3px 8px rgba(124,67,214,.12) !important}
/* Botones e interfaz: estilo suave (sin bordes gruesos ni sombras duras) */
.act-btn-read,.act-btn-finish,.cielo-fab{border:1.5px solid rgba(0,0,0,.06) !important;box-shadow:0 6px 16px rgba(124,67,214,.20) !important}
#act-kit,.act-mascota,.act-obj,#lesson-nav .lnav-btn{border:1.5px solid rgba(124,67,214,.16) !important;box-shadow:0 8px 18px rgba(124,67,214,.10) !important}
.act-btn-read:active,.act-btn-finish:active,#lesson-nav .lnav-btn:active,.cielo-fab:hover{transform:translateY(1px) !important;box-shadow:0 3px 10px rgba(124,67,214,.16) !important}
.act-stars{border:1.5px solid rgba(244,177,26,.5) !important;box-shadow:0 4px 10px rgba(244,177,26,.15) !important}
.act-mascota .me-img{background:transparent !important;border:1.5px solid rgba(124,67,214,.16) !important;box-shadow:0 4px 10px rgba(124,67,214,.12) !important}
/* Iconito en las tarjetas de nivel (como el dibujo) */
.tier-ico{width:60px;height:60px;border-radius:16px;background:rgba(255,255,255,.75);display:flex;align-items:center;justify-content:center;font-size:32px;margin-bottom:10px;border:1.5px solid rgba(124,67,214,.16);box-shadow:0 4px 10px rgba(124,67,214,.12)}
/* Botones de navegación (Atrás/Inicio/Herramientas) más visibles para los niños */
#lesson-nav .lnav-btn{background:#fff !important;border:2px solid var(--morado) !important;color:var(--morado) !important;font-weight:700 !important;box-shadow:0 4px 12px rgba(124,67,214,.28) !important}
#lesson-nav .lnav-btn:hover{transform:translateY(-1px) !important;box-shadow:0 6px 16px rgba(124,67,214,.34) !important}
/* Tarjeta de nivel naranja (TDAH) en pastel */
.tier.tier-naranja{background:#FFF1E6 !important;color:var(--tinta) !important}
.tier.tier-naranja h2,.tier.tier-naranja .age{color:var(--naranja) !important}
.tier.tier-cielo{background:#E6F6FB !important;color:var(--tinta) !important}
.tier.tier-cielo h2,.tier.tier-cielo .age{color:var(--turquesa-deep) !important}
.tier.tier-rosa2{background:#FBEEF6 !important;color:var(--tinta) !important}
.tier.tier-rosa2 h2,.tier.tier-rosa2 .age{color:#C2185B !important}