/* 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:var(--rojo);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:var(--rojo);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:var(--rojo)}
.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:32px 0 60px;text-align:center;font-size:13px;color:var(--tinta-soft)}
.footer a{color:var(--rojo)}