/* ===== Escena Zero · Escuela — tema CLARO ("de día") ===== */
@import url('styles.css');

:root{
  --ink:#221c18;--soft:#5b544d;--dim:#8a8278;--line:#e7ddcf;
  --glass:rgba(255,255,255,.74);--glass-2:#ffffff;
}
body{background:#FBF7F2;color:var(--ink)}
/* Tema claro: la viñeta y el grano del tema oscuro se suavizan a textura de papel cálida */
body::before{background:radial-gradient(132% 96% at 50% 30%,transparent 64%,rgba(90,68,42,.05) 100%)}
body::after{opacity:.045}
h1,h2,h3{color:var(--ink)}
.eyebrow{color:var(--orange-deep)}

/* salas claras: la foto queda como textura tenue y el texto va oscuro */
.room>.bg{filter:brightness(.98) saturate(1.05)}
.room>.scrim{background:linear-gradient(180deg,rgba(251,247,242,.8),rgba(251,247,242,.93)),var(--tint,transparent)}
.content,.faqs{background:#FBF7F2}
.faqs{background:#F3ECE2}

/* Horarios de clases */
.horarios{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:18px;max-width:880px;margin:0 auto}
.hgroup{background:#fff;border:1px solid var(--line);border-radius:18px;padding:26px 28px}
.hgroup h3{font-family:var(--serif);font-weight:600;font-size:20px;margin:0 0 14px;color:var(--ink)}
.hgroup .age{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--mint-ink);background:var(--mint-soft);border-radius:999px;padding:3px 10px;margin-left:8px;vertical-align:middle}
.hgroup ul{list-style:none}
.hgroup li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-top:1px solid #efe6d8}
.hgroup li:first-child{border-top:0;padding-top:2px}
.hgroup .hd{font-weight:600;color:var(--ink);font-size:15px}
.hgroup .ht{font-family:var(--serif);font-weight:700;color:var(--orange-deep);font-size:16.5px;white-space:nowrap}

/* Plan de estudios por trimestres */
.pe-group{max-width:1060px;margin:0 auto 30px}
.pe-group-title{font-family:var(--serif);font-weight:600;font-size:clamp(19px,2.6vw,23px);color:var(--ink);margin:0 0 3px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pe-group-title .age{font-size:11.5px;font-weight:700;letter-spacing:.04em;color:var(--mint-ink);background:var(--mint-soft);border-radius:999px;padding:3px 10px}
.pe-group-sub{color:var(--soft);font-size:14.5px;margin:0 0 18px}
.trimestres{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tri{background:#fff;border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column}
.tri .tnum{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--orange-deep);margin-bottom:8px}
.tri h4{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--ink);margin:0 0 14px;line-height:1.2}
.tri ul{list-style:none;display:grid;gap:9px;margin:0 0 16px}
.tri li{position:relative;padding-left:20px;font-size:14px;color:var(--soft);line-height:1.45}
.tri li::before{content:"";position:absolute;left:2px;top:7px;width:6px;height:6px;border-radius:50%;background:var(--orange)}
.tri .cierre{margin-top:auto;font-size:12.5px;font-weight:700;color:var(--mint-ink);border-top:1px solid #efe6d8;padding-top:13px}
@media(max-width:820px){.trimestres{grid-template-columns:1fr}}

/* hero claro */
.hero h1,.hero .lead,.hero .eyebrow,.breadcrumb,.room .sec-head h2,.room .sec-head p,.room .sec-head .eyebrow{text-shadow:none}
.hero .lead{color:var(--soft)}
.breadcrumb{color:var(--soft)}.breadcrumb span{color:var(--dim)}

/* tarjetas y bloques claros */
.block{background:#fff;border-color:var(--line)}
.block p,.block li{color:var(--soft)}
.stat{background:#fff;border-color:var(--line)}
.stat .l{color:var(--soft)}
.faq summary{color:var(--ink)}.faq p{color:var(--soft)}.faq details{border-color:var(--line)}
.mapwrap{border-color:var(--line)}.mapwrap iframe{filter:none}

/* cabecera clara */
header.scrolled{background:rgba(251,247,242,.93);box-shadow:0 1px 0 var(--line)}
.logo{color:var(--ink)}.nav-links a{color:var(--ink)}.burger{color:var(--ink)}
.brandswitch{background:var(--mint-soft);border-color:var(--mint)}.bs{color:var(--ink)}
.btn-light{border-color:var(--ink);color:var(--ink)}.btn-light:hover{background:var(--ink);color:#fff}

/* marquesina = banda verde menta */
.marquee{background:var(--mint-ink);border-color:transparent}
.marquee .track{color:#fff}.marquee .o{color:#ffd9b0}.marquee .m{color:var(--mint)}

/* luces "de día": haces de sol suaves en vez de focos sobre negro */
.beam{mix-blend-mode:normal;opacity:.2;filter:blur(16px)}
.beam.o{background:linear-gradient(to bottom,rgba(255,185,95,.5),transparent 78%)}
.beam.m{background:linear-gradient(to bottom,rgba(130,225,185,.4),transparent 78%)}
.halo{mix-blend-mode:multiply;filter:blur(64px)}
.page-spot{background:radial-gradient(circle,rgba(255,160,80,.1),transparent 60%);mix-blend-mode:multiply}

/* footer cálido oscuro (anclaje) */
footer{background:#1a1714;border-top:1px solid var(--line)}

/* ===== fixes de contraste (auditoria de accesibilidad) ===== */
:root{--mint-soft:#E8F8F0}
.eyebrow{color:#B23A0E}
.stat .n{color:#C8430F}
.breadcrumb span{color:#6f685f}
.breadcrumb a:hover{color:var(--orange-deep)}
.brandswitch{background:#E8F8F0}
/* hero / cta: mas crema y foto mas tenue para que el texto se lea siempre */
.hero>.scrim,.cta-room>.scrim{background:linear-gradient(180deg,rgba(251,247,242,.93),rgba(251,247,242,.96)),var(--tint,transparent)}
.hero>.bg,.cta-room>.bg{filter:brightness(1.04) saturate(1.04) opacity(.55)}
/* footer oscuro legible */
footer p{color:#b3a89d!important}
footer .foot-bottom{color:#9a948d}

/* ===== componentes interactivos en tema claro (stepper + acordeon) ===== */
.step-btn{background:#fff;border-color:var(--line);color:var(--ink)}
.step-btn .num{background:var(--mint-soft);color:var(--mint-ink)}
.step-btn:hover{border-color:var(--orange)}
.step-btn.active{background:var(--orange);border-color:var(--orange);color:#fff;box-shadow:0 10px 24px rgba(255,106,44,.28)}
.step-btn.active .num{background:rgba(255,255,255,.3);color:#fff}
.step-panel{border-color:var(--line);background:#fff}
.step-panel .big{color:rgba(237,84,24,.12)}
.acc summary{color:var(--ink)}
.acc details{background:#fff}
.acc details[open]{background:#fff;border-color:var(--orange)}

/* menu movil en tema claro: desplegable crema con texto oscuro (legible) */
@media(max-width:880px){
  .nav-links{background:rgba(251,247,242,.985);border-bottom-color:var(--line)}
  .nav-links a{border-bottom-color:var(--line)}
  .nav-links .nav-cta{color:#fff!important}
}