/* Diseño instruccional exprés · estilos comunes de las lecciones (Talavera Viva) */
:root{
 --esmalte:#F7F2E7; --limpio:#FFFDF8; --tinta:#16306B; --criterio:#2450A8; --accion:#B8430E;
 --ocre:#F4D98B; --cielo:#DCE6F5; --verde:#2E6B4F; --rojo:#A3342B; --grafito:#4A5670; --linea:#D9CFBC;
 --noche:#0F1F46; --fuego:#FF5C1F; --amarillo:#F2B33D;
 --sombra:0 10px 26px rgba(22,48,107,.10); --sombra-alta:0 22px 48px rgba(22,48,107,.18);
 --serif:Alegreya,Georgia,serif; --sans:"Atkinson Hyperlegible",system-ui,"Segoe UI",Arial,sans-serif;
 --cifras:"Alegreya Sans SC",Alegreya,Georgia,serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{font-size:18px}
body{margin:0;background:var(--esmalte);color:var(--tinta);font:1rem/1.6 var(--sans);overflow-x:hidden;
 background-image:linear-gradient(rgba(22,48,107,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(22,48,107,.045) 1px,transparent 1px);
 background-size:44px 44px}
.pagina{max-width:1080px;margin:0 auto;padding:0 16px 90px}
h2,h3,h4{font-family:var(--serif);font-weight:800;line-height:1.15;margin:0 0 12px;color:var(--tinta)}
h2{font-size:clamp(1.9rem,4.6vw,3rem)}
h3{font-size:clamp(1.35rem,2.8vw,1.9rem)}
h4{font-size:1.15rem;color:var(--criterio)}
p{max-width:68ch;margin:0 0 14px}
em,i{font-style:normal;font-weight:700}
b,strong{font-weight:700}
.acc{color:var(--accion);font-weight:700}
.cri{color:var(--criterio);font-weight:700}
.dur{color:var(--rojo);font-weight:700}
a{color:var(--criterio)}
:focus-visible{outline:4px solid #F0A76A;outline-offset:3px}
.solo-lector{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Cabecera y avance */
.cabecera{position:sticky;top:0;z-index:30;background:var(--esmalte);padding:10px 0 0;border-bottom:1px solid var(--linea)}
.barra{height:6px;background:#E4DAC6;border-radius:99px;overflow:hidden}
.barra>span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--criterio),var(--accion));transition:width .4s}
.orientador{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:9px 0 10px}
.orientador .num{font-family:var(--cifras);font-size:.95rem;color:var(--grafito);letter-spacing:.04em}
.orientador b{font-family:var(--serif);font-size:1.2rem}
.chips{display:flex;flex-wrap:wrap;gap:7px;padding:14px 0 6px}
.chips button{font:inherit;font-size:.95rem;font-weight:700;min-height:44px;padding:6px 14px;border:1.5px solid var(--linea);
 border-radius:10px;background:var(--limpio);color:var(--grafito);cursor:pointer}
.chips button:hover{border-color:var(--criterio);color:var(--criterio)}
.chips button.visto{border-color:#A9C7B6;color:var(--verde);background:#F0F6F2}
.chips button[aria-current="true"]{background:var(--tinta);border-color:var(--tinta);color:var(--limpio)}

/* Portada */
.portada{margin:18px 0 22px;border-radius:18px;overflow:hidden;background:var(--tinta);color:var(--limpio);box-shadow:var(--sombra-alta);
 display:grid;grid-template-columns:1.1fr .9fr;border:6px solid var(--limpio);outline:2px solid var(--tinta)}
.portada .txt{padding:clamp(22px,3.4vw,40px);display:flex;flex-direction:column;justify-content:center}
.portada h2{color:var(--limpio);font-size:clamp(1.9rem,3.6vw,2.7rem)}
.portada .lead{color:#DCE6F5;font-size:1.06rem;margin:0}
.kicker{font-family:var(--cifras);letter-spacing:.08em;font-size:.95rem;color:var(--ocre);margin-bottom:8px}
.etiquetas{display:flex;flex-wrap:wrap;gap:7px;margin-top:16px}
.etiquetas span{font-size:.9rem;font-weight:700;padding:4px 11px;border-radius:999px;border:1px solid rgba(244,217,139,.5);color:var(--ocre)}
.portada .img{position:relative;min-height:240px;background:#233F80}
.portada .img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* Lámina */
.lamina{margin:0 0 22px;background:var(--limpio);padding:10px;border-radius:16px;box-shadow:var(--sombra);border:1px solid var(--linea)}
.lamina img{display:block;width:100%;height:auto;border-radius:10px;aspect-ratio:16/9;object-fit:cover;background:var(--cielo)}
.lamina figcaption{font-size:.98rem;color:var(--grafito);padding:10px 6px 2px;max-width:none}
.lamina.info img{aspect-ratio:auto;object-fit:contain;background:var(--limpio)}

/* Escena con hora */
.escena{background:var(--limpio);border:1px solid var(--linea);border-radius:16px;padding:clamp(20px,3vw,34px);margin:0 0 22px;box-shadow:var(--sombra);position:relative}
.hora{display:inline-flex;align-items:center;gap:8px;font-family:var(--cifras);font-size:1rem;color:var(--limpio);background:var(--noche);
 border-radius:8px;padding:3px 12px;margin-bottom:12px;letter-spacing:.04em}
.hora::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--amarillo)}
.dialogo{margin:16px 0;padding-left:18px;border-left:4px solid var(--criterio)}
.dialogo .quien{display:block;font-family:var(--cifras);font-size:.95rem;letter-spacing:.06em;color:var(--criterio);margin-bottom:3px}
.dialogo p{font-family:var(--serif);font-size:1.25rem;line-height:1.45;margin:0 0 4px;max-width:56ch}
.dialogo.amparo{border-left-color:var(--accion)} .dialogo.amparo .quien{color:var(--accion)}
.dialogo.paloma{border-left-color:var(--verde)} .dialogo.paloma .quien{color:var(--verde)}

/* Superficies */
.hoja{background:var(--limpio);border:1px solid var(--linea);border-radius:16px;padding:clamp(20px,3vw,32px);margin:0 0 22px;box-shadow:var(--sombra)}
.hoja.cielo{background:var(--cielo);border-color:#B8C8E6}
.concepto{border-top:8px solid var(--criterio)}
.concepto .etq{font-family:var(--cifras);color:var(--criterio);font-size:.95rem;letter-spacing:.06em;margin-bottom:6px}
.golpe{margin:0 0 22px;padding:24px 28px;background:var(--ocre);color:var(--tinta);border-radius:14px;border:2px solid var(--tinta);
 font-family:var(--serif);font-size:clamp(1.3rem,2.8vw,1.75rem);line-height:1.3;font-weight:700;max-width:none}
.nota{border:1px solid var(--linea);border-left:6px solid var(--criterio);background:#F4F7FD;border-radius:0 12px 12px 0;padding:14px 18px;margin:14px 0;font-size:.98rem}
.nota p:last-child{margin:0}
.instr{background:var(--limpio);border:2px solid var(--accion);border-radius:14px;padding:16px 20px;margin:0 0 16px}
.instr h4{color:var(--accion);margin-bottom:6px}
.instr p{margin:0 0 8px}
.instr p:last-child{margin:0}
.teclado{font-size:.98rem;color:var(--grafito);margin:8px 0 0}

/* Controles */
.btn{font:inherit;font-weight:700;min-height:48px;border:2px solid var(--criterio);border-radius:11px;padding:10px 18px;background:var(--limpio);color:var(--criterio);cursor:pointer}
.btn:hover:not(:disabled){background:#EEF2FB}
.btn.accion{background:var(--accion);border-color:var(--accion);color:#fff}
.btn.accion:hover:not(:disabled){background:#9E390B}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn[aria-pressed="true"]{background:var(--criterio);color:#fff}
.fila{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0}
.op{display:block;width:100%;text-align:left;font:inherit;min-height:48px;border:2px solid var(--linea);border-radius:12px;padding:12px 16px;background:var(--limpio);color:var(--tinta);cursor:pointer;margin:8px 0}
.op:hover:not(:disabled){border-color:var(--criterio)}
.op[aria-pressed="true"]{border-color:var(--tinta);background:var(--cielo);font-weight:700}
.op.bien{border-color:var(--verde);background:#E3F0E8;font-weight:700}
.op.mal{border-color:var(--rojo);background:#F7E4E1;font-weight:700}
.op.bien::before{content:"✓ ";color:var(--verde)}
.op.mal::before{content:"✗ ";color:var(--rojo)}
.fb{padding:15px 18px;border-radius:12px;border-left:7px solid var(--criterio);background:var(--cielo);margin:14px 0;animation:entra .25s}
.fb.ok{background:#E3F0E8;border-left-color:var(--verde)}
.fb.no{background:#F7E4E1;border-left-color:var(--rojo)}
.fb p:last-child{margin-bottom:0}
@keyframes entra{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.aviso{background:#FFF4DC;border:1px solid #D9B45B;border-left:6px solid #C98A1B;border-radius:0 10px 10px 0;padding:12px 16px;margin:12px 0}
input[type=text],textarea{width:100%;font:inherit;color:var(--tinta);border:2px solid #9FAAC0;border-radius:10px;background:#fff;padding:11px 12px}
input[type=text]:focus,textarea:focus{border-color:var(--criterio)}
textarea{min-height:84px;resize:vertical}
label{font-weight:700;display:block;margin-bottom:6px}

/* Experimento del ritmo */
.ritmo{background:var(--noche);color:#F4EFE6;border-radius:16px;padding:16px;margin:0 0 16px;border:6px solid var(--limpio);outline:2px solid var(--tinta)}
.ritmo svg{display:block;width:100%;height:auto}
.ritmo .tap{fill:#2A3F78;stroke:#6F8FD8;stroke-width:2;transition:cy .5s,fill .08s}
.ritmo .tap.on{fill:var(--fuego);stroke:#FFD3BF}
.ritmo .linea-base{stroke:#6F8FD8;stroke-width:2;stroke-dasharray:4 6}
.ritmo .contorno{fill:none;stroke:var(--amarillo);stroke-width:2.5;opacity:0;transition:opacity .5s}
.ritmo.melodia .contorno{opacity:.9}
.ritmo .cuchara{transform-origin:70px 60px;transition:transform .07s}
.ritmo .cuchara.golpe{transform:rotate(14deg)}
.ritmo .estado{font-family:var(--cifras);font-size:1rem;color:var(--amarillo);min-height:1.6em;margin:6px 4px 0}
.cifra{font-family:var(--cifras);font-size:clamp(2.6rem,7vw,4rem);line-height:1;display:block}
.dos-cifras{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:14px 0}
.dos-cifras>div{background:var(--limpio);border:2px solid var(--linea);border-radius:14px;padding:16px}
.dos-cifras .pred .cifra{color:var(--criterio)}
.dos-cifras .real .cifra{color:var(--rojo)}
.deslizador{margin:14px 0 18px}
.deslizador output{font-family:var(--cifras);font-size:1.4rem;color:var(--accion);margin-left:8px}
input[type=range]{width:100%;accent-color:var(--accion);min-height:36px}

/* Dos pistas: lo dicho y lo hecho */
.pistas{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:14px 0}
.col{display:flex;flex-direction:column;gap:8px}
.dicho{background:var(--tinta);color:var(--limpio);border-radius:10px;padding:12px;text-align:center;font-family:var(--serif);font-weight:800;font-size:1.15rem}
.oculto-t{border:2px dashed #A9B4CC;border-radius:10px;padding:10px;min-height:52px;display:flex;align-items:center;justify-content:center;
 color:var(--grafito);background:#F1ECE0;font-size:.98rem;text-align:center;transition:all .3s}
.oculto-t.visible{border-style:solid;border-color:#A9B4CC;background:#E9E3D5}
.oculto-t.hallada{border:3px solid var(--accion);background:#FBEDE4;color:var(--tinta);font-weight:700}
.rotulo-pista{font-family:var(--cifras);font-size:.95rem;color:var(--grafito);margin:6px 0}

/* Técnica */
.tecnica{list-style:none;padding:0;margin:14px 0;display:grid;gap:10px}
.tecnica li{display:grid;grid-template-columns:52px 1fr;gap:12px;align-items:start;background:var(--limpio);border:1px solid var(--linea);border-radius:12px;padding:12px}
.tecnica .n{width:52px;height:52px;border-radius:10px;background:var(--tinta);color:var(--ocre);display:flex;align-items:center;justify-content:center;font-family:var(--cifras);font-size:1.4rem}

/* Evaluación */
fieldset.q{border:1px solid var(--linea);border-radius:14px;padding:16px 18px;margin:0 0 16px;background:var(--limpio)}
fieldset.q legend{font-weight:700;padding:0 6px;font-size:1.02rem;max-width:100%}
.q .ctx{margin:4px 0 10px;color:var(--tinta)}
.q label{display:flex;gap:12px;align-items:flex-start;font-weight:400;border:2px solid var(--linea);border-radius:10px;padding:10px 12px;margin:8px 0;cursor:pointer}
.q label input{margin-top:5px;width:20px;height:20px;accent-color:var(--criterio);flex:0 0 auto}
.q label.elegida-ok{border-color:var(--verde);background:#E3F0E8;font-weight:700}
.q label.elegida-no{border-color:var(--rojo);background:#F7E4E1;font-weight:700}
.q label.correcta{border-color:var(--verde);border-style:dashed}

/* Tu plan */
.plan{background:var(--limpio);border:2px solid var(--tinta);border-radius:16px;padding:clamp(18px,3vw,30px);margin:0 0 22px;box-shadow:var(--sombra)}
.plan .etq{font-family:var(--cifras);color:var(--accion);font-size:.95rem;letter-spacing:.06em}
.renglon{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--linea)}
.renglon .aviso{grid-column:1/-1;margin:0}
.ejemplos{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:12px 0}
.ejemplo{background:var(--esmalte);border:1px solid var(--linea);border-radius:12px;padding:12px;font-size:.98rem}
.ejemplo .t{font-family:var(--cifras);color:var(--grafito);display:block;margin-bottom:6px}
.ejemplo .bajo{color:var(--rojo);font-weight:700;display:block;margin-top:6px}
.ejemplo .alto{color:var(--verde);font-weight:700;display:block;margin-top:6px}

/* Juego */
.sala{background:var(--noche);padding:12px;border-radius:18px;margin:0 0 22px;box-shadow:var(--sombra-alta)}
.sala .evtag{font-family:var(--cifras);color:var(--ocre);letter-spacing:.08em;padding:4px 6px 10px}
.sala .dentro{background:var(--esmalte);border-radius:12px;padding:6px}
.resumen-juego{margin-top:14px}

/* Navegación inferior */
.nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:26px 0 0;padding-top:16px;border-top:2px solid var(--linea)}
.sec{animation:entra .25s}

@media (max-width:760px){
 .chips{flex-wrap:nowrap;overflow-x:auto;padding-bottom:10px;scrollbar-width:thin}
 .chips button{flex:0 0 auto;white-space:nowrap}
 .portada{grid-template-columns:1fr}
 .portada .img{min-height:190px;order:-1}
 .pistas{grid-template-columns:1fr 1fr}
 .renglon{grid-template-columns:1fr}
 .ejemplos{grid-template-columns:1fr}
 .dos-cifras{grid-template-columns:1fr}
}