/* ============================================================
   MEJORAS DE LECTURA · talleres y lecciones de ICFES
   ------------------------------------------------------------
   Los 40 talleres de ICFES se escribieron con letra de 13 px
   dentro de una lámina de altura fija. Cabía todo, pero no se
   podía leer — y menos con dificultades de aprendizaje.

   Esta hoja se cuelga encima sin tocar el HTML ni el CSS que ya
   estaba. Arregla cuatro cosas concretas:

   13 · La letra sube. El cuerpo pasa de .84 a .96 rem y los
        subtítulos de .85 a .95. La lámina ya tenía overflow-y
        auto, así que lo que no quepa se desplaza en vez de
        recortarse.

   15 · Las opciones de respuesta dejan de ser diminutas. Suben
        a .95 rem y a 46 px de alto mínimo, que es lo que hace
        falta para tocarlas con el dedo sin fallar.

   16 · La retroalimentación deja de quedar tapada. El problema
        era de reparto: .q-opts y .q-opt llevaban flex:1, así que
        las opciones se estiraban para llenar la lámina y
        empujaban el mensaje fuera de la vista. Ahora las opciones
        ocupan lo suyo y el mensaje tiene sitio propio.

   12 · Las transiciones dejan de trabarse. Se avisa al navegador
        de qué va a cambiar (will-change) para que prepare la
        capa antes, y se retiran de la animación las sombras y
        los filtros, que son lo caro de recalcular en cada cuadro.

   Se carga DESPUÉS de la hoja propia de cada taller, así que
   estas reglas ganan sin necesidad de !important salvo donde
   hay que vencer un estilo puesto en línea.
   ============================================================ */

/* ══ 13 · Que se pueda leer ════════════════════════════════ */

#slide-inner {
    padding: 1.5rem 1.5rem;
    gap: .7rem;
}
@media (max-width: 640px) {
    #slide-inner { padding: 1.1rem 1rem; }
}

.s-title  { font-size: 1.72rem; line-height: 1.22; }
.s-sub    { font-size: .95rem;  line-height: 1.6; margin-bottom: .85rem; }
.s-tag    { font-size: .64rem;  letter-spacing: 2px; }

.step     { font-size: .96rem;  line-height: 1.7;  margin: .45rem 0; gap: .8rem; }
.step-n   { min-width: 29px; height: 29px; font-size: .74rem; }

.example  { font-size: .93rem; line-height: 1.65; padding: .8rem 1.05rem; }
.passage  { font-size: .95rem; line-height: 1.75; padding: .9rem 1.1rem; }
.hint-text{ font-size: .87rem; line-height: 1.6; }

.ctype-card  { padding: .8rem 1rem; margin: .35rem 0; }
.ctype-name  { font-size: .63rem; letter-spacing: 1.6px; margin-bottom: .35rem; }
.ctype-words { font-size: .97rem; line-height: 1.5; }
.ctype-use   { font-size: .82rem; line-height: 1.55; margin-top: .28rem; }

/* Las fórmulas también crecen: eran lo más pequeño de todo */
.formula { font-size: 1.05rem; padding: .8rem 1.2rem; line-height: 1.6; }
.formula .katex { font-size: 1.12em; }

/* ══ 15 y 16 · Opciones grandes y respuesta visible ════════
   La causa era el reparto del espacio, no el tamaño de letra:
   con flex:1 las cuatro opciones se estiraban hasta llenar la
   lámina y dejaban la retroalimentación fuera de cuadro. */

#qw {
    flex: 1;
    min-height: 0;
    overflow-y: auto;              /* si no cabe, se desplaza */
    -webkit-overflow-scrolling: touch;
}

.q-q { font-size: 1.0rem; line-height: 1.6; margin-bottom: .8rem; }

.q-opts {
    flex: 0 0 auto;                /* deja de estirarse */
    gap: .5rem;
}

.q-opt {
    flex: 0 0 auto;                /* cada opción ocupa lo suyo */
    min-height: 46px;
    font-size: .95rem;
    line-height: 1.5;
    padding: .7rem 1rem;
    align-items: center;
}

.q-fb, .fb-msg {
    flex: 0 0 auto;
    font-size: .92rem;
    line-height: 1.6;
    padding: .75rem 1rem;
    margin-top: .75rem;
}

/* Las fichas de los juegos, también tocables */
.conn-chip {
    font-size: .92rem;
    padding: .55rem 1.1rem;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
}
.chips-row { gap: .55rem; }

/* ══ 12 · Transiciones que no se traban ════════════════════
   Dos causas: el navegador no sabía qué iba a cambiar y creaba
   la capa a mitad de la animación, y se estaban animando
   propiedades caras (sombras, brillos) en cada cuadro. */

#slide-inner {
    will-change: transform, opacity;
    backface-visibility: hidden;
}
#slide-card {
    contain: layout paint;         /* aísla el recálculo a la lámina */
}

/* El latido de la tarjeta y el de la barra de progreso son
   sombras animadas en bucle: bonitas, pero se recalculan sin
   parar y compiten con la transición. Se dejan quietas mientras
   se cambia de lámina. */
.ti-cambiando #slide-card,
.ti-cambiando #prog-fill { animation: none !important; }

.nav-btn { transition: background .2s, border-color .2s, color .2s; }
.nav-btn::before { will-change: transform; }

/* Quien pidió menos movimiento: nada de latidos ni brillos */
@media (prefers-reduced-motion: reduce) {
    #slide-card, #prog-fill, .conn-chip { animation: none !important; }
    #slide-inner { will-change: auto; }
}

/* ══ Pantallas muy bajas ══════════════════════════════════
   En un teléfono apaisado la lámina mide poco. Se recorta el
   aire antes que la letra: es preferible desplazar a no leer. */
@media (max-height: 560px) {
    #slide-inner { padding: .8rem 1rem; gap: .45rem; }
    .s-title { font-size: 1.35rem; }
    .q-opt   { min-height: 42px; padding: .55rem .85rem; }
}