/* KAIROS · la lectura de una lección, vestida UNA sola vez.
 *
 * Estas reglas vivían dentro de la página del alumno. El visor de revisión
 * pintaba la misma lectura con clases propias y su cuerpo salía escapado de
 * golpe: sin párrafos, sin listas y sin énfasis, mientras el alumno los veía.
 * Dos verdades sobre cómo se ve una lección, ya separadas.
 *
 * Los colores salen de variables del anfitrión (`--text`, `--line`, `--muted`),
 * así que la misma lectura se viste con la piel de cada portal sin que su
 * estructura cambie.
 */
    .lr-read{max-width:640px;margin:0 auto 18px;}
    .lr-read-sec{padding:26px 0;border-bottom:1px solid var(--line);}
    .lr-read-sec:last-child{border-bottom:0;}
    .lr-read-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:12px;}
    .lr-read-kicker{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
      color:var(--muted);}
    .lr-read-sec.done .lr-read-kicker{color:var(--kairos-good,#4fd1c5);}
    .lr-read-title{font-size:20px;font-weight:700;margin:0 0 10px;line-height:1.25;}
    .lr-read-body p{font:19.5px/1.68 "Iowan Old Style",Georgia,"Times New Roman",serif;
      margin:0 0 14px;color:var(--text,#e9e4ff);}
    .lr-read-body p:last-child{margin-bottom:0;}
    .lr-subject-block.booklet{box-sizing:border-box;width:100%;max-width:100%;margin:0;padding:18px;
      overflow-x:auto;border:1px solid var(--line,#e4e7f0);border-radius:16px;
      background:var(--panel,#fff);color:var(--text,#1a1f2e);color-scheme:light dark;
      --ink:var(--text,#1d1a2b);--muted:var(--muted,#5c5670);--line:var(--line,#e6e2ec);}
    .lr-subject-block.booklet section{min-width:0;margin-bottom:0;}
    .lr-subject-block.booklet p,.lr-subject-block.booklet li{overflow-wrap:anywhere;}
    .lr-subject-block.booklet table{max-width:100%;}
    .lr-subject-block.booklet svg{max-width:100%;height:auto;}
    /* LA PIEZA DE MATERIA ES PAPEL (23-10-2026, matriz de escenarios por materia).
       Las piezas (`kairos-*-lesson-v1.js` + `lesson-booklet-renderer-v1.css`) están
       dibujadas para una hoja blanca: acentos oscuros (`--lang-d` #0f4f3b en ciencias,
       #5f2a49 por defecto) y cajas con fondo claro propio (`.sci-sec--safety` #fffaf0,
       cabeceras de tabla) que heredan la tinta. Vestido con el `--panel`/`--text` del
       Cube, el bloque pintaba títulos verde oscuro sobre morado (1,83:1) y la tarjeta
       de seguridad con tinta #f4f1ff sobre crema (1,07:1): invisibles, en claro y en
       oscuro, en ciencias y en mates de secundaria. La pieza va sobre papel en todos
       los portales; el portal la enmarca, no la tiñe. */
    .lr-subject-block.booklet{background:#fffdf8;color:#1d1a2b;color-scheme:light;
      --ink:#1d1a2b;--muted:#5c5670;--line:#e6e2ec;border-color:#e6e2ec;
      /* Los colores de sociales viven en la hoja SÓLO bajo `.booklet.subject-social_studies`, clase que
         pone el libro impreso y no este bloque: sin ellos la pregunta guía (`soc_inquiry`) perdía su
         círculo y su marco y el «?» blanco quedaba sobre nada. Los mismos valores que la hoja. */
      --soc-a:#9b581f;--soc-d:#653815;--soc-s:#faeadc;--soc-w:#dca44e;}
    /* Y SUS ICONOS SON ICONOS. El reproductor da a todo SVG de la lectura
       `width:100%` (`.q-read-body svg`, kairos-activity-player-v1.js): el pictograma
       de 44 px de «Predict» llenaba la tarjeta y empujaba la pregunta 82 px fuera de
       ella en un teléfono. Un SVG con `width` propio conserva su tamaño. */
    .lr-subject-block.booklet svg[width]{width:auto;height:auto;max-width:100%;margin:0;}
    @media(max-width:640px){
      .lr-subject-block.booklet{padding:14px 12px;border-radius:12px;}
      /* Las rejillas de tres columnas de la hoja no caben en 320 px: una columna. */
      .lr-subject-block.booklet .sci-ngss-row,.lr-subject-block.booklet .sci-rules,
      .lr-subject-block.booklet .sci-frames,.lr-subject-block.booklet .soc-prompts,
      .lr-subject-block.booklet .soc-notes,.lr-subject-block.booklet .soc-look,
      .lr-subject-block.booklet .soc-source-card,.lr-subject-block.booklet .ela-purpose,
      .lr-subject-block.booklet .ela-talkcols,.lr-subject-block.booklet .ela-flu-grid,
      .lr-subject-block.booklet .m-rels,.lr-subject-block.booklet .m-pgrid,.lr-subject-block.booklet .m-case-q{grid-template-columns:1fr;}
      /* ELA: la tabla de vocabulario (4 columnas, la primera de 118 px) y las claves de estructura (`--n`
         hasta 5) salían 21–45 px de la tarjeta (US_G04_ELA_05, pasos 8 y 12). */
      .lr-subject-block.booklet .ela-vrow{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);}
      .lr-subject-block.booklet .ela-keys{grid-template-columns:repeat(2,minmax(0,1fr));}
      /* Las tarjetas de mates (`--cols` hasta 4) salían 65 px de la tarjeta en mates de secundaria. */
      .lr-subject-block.booklet .soc-vocab,.lr-subject-block.booklet .sci-slots,
      .lr-subject-block.booklet .m-cards,.lr-subject-block.booklet .m-vocab{grid-template-columns:repeat(2,minmax(0,1fr));}
      .lr-subject-block.booklet .lang-vocab,.lr-subject-block.booklet .sci-mats,
      .lr-subject-block.booklet .mus-cards,.lr-subject-block.booklet .mus-map,
      .lr-subject-block.booklet .mus-lines{grid-template-columns:repeat(2,minmax(0,1fr));}
      .lr-subject-block.booklet .lang-strip,.lr-subject-block.booklet .lang-gap,
      .lr-subject-block.booklet .sci-scenes,.lr-subject-block.booklet .sci-vars,
      .lr-subject-block.booklet .sci-wonder{grid-template-columns:1fr;}
    }
    /* 16:9 sin dejar que el iframe decida su alto: en móvil un iframe sin caja
   colapsa a 150px y el vídeo se ve como una rendija. */
    .lr-material{display:flex;align-items:center;gap:11px;}
    .lr-mat-ico{flex:0 0 auto;font-size:17px;}
    .lr-mat-body{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;}
    .lr-mat-body em{font-style:normal;font-size:11.5px;color:var(--muted);}
    .lr-offline-note{margin:0 0 14px;padding:10px 14px;border-radius:10px;
      border:1px solid rgba(226,201,142,.5);background:rgba(226,201,142,.10);
      color:#e2c98e;font-size:12.5px;font-weight:700;}
    .lr-read-mode{display:inline-block;margin:0 0 12px;padding:5px 12px;border-radius:999px;
      border:1px solid var(--line);background:rgba(255,255,255,.04);font-size:11.5px;
      font-weight:800;letter-spacing:.04em;color:var(--muted);}
    .lr-listen{display:inline-flex;align-items:center;gap:6px;margin:2px 0 10px;padding:7px 14px;
      border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.05);
      color:var(--text);font:inherit;font-size:12.5px;font-weight:800;cursor:pointer;}
    .lr-listen:hover{border-color:var(--primary-2);}
    .lr-video{margin:0 0 18px;position:relative;aspect-ratio:16/9;background:#000;
      border-radius:12px;overflow:hidden;border:1px solid var(--line);}
    .lr-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}
    .lr-video-card{display:flex;align-items:center;justify-content:space-between;gap:12px;
      margin:0 0 18px;padding:13px 16px;border:1px solid var(--line);border-radius:12px;
      background:rgba(255,255,255,.03);font-size:14px;}
    .lr-read-fig{margin:14px 0 0;background:rgba(255,255,255,.03);border:1px solid var(--line);
      border-radius:12px;padding:14px;}
    .lr-read-fig img{display:block;width:100%;height:auto;border-radius:8px;}
    .lr-section-media{display:grid;gap:10px;margin:18px 0 0;padding:14px;border:1px solid var(--line,#2c2a45);border-radius:14px;background:color-mix(in srgb,var(--panel,#171430) 78%,transparent);}
    .lr-section-media>figcaption{color:var(--text,#e9e6f5);font-weight:800;}
    .lr-section-media audio,.lr-section-media video{display:block;width:100%;max-height:min(42vh,360px);border-radius:10px;background:#080615;}
    .lr-media-caption,.lr-media-transcript p{margin:0;color:var(--muted,#a29ec2);font-size:13px;line-height:1.55;}
    .lr-media-transcript summary{cursor:pointer;color:var(--primary-2,#a78bfa);font-size:13px;font-weight:800;}
    .lr-media-transcript p{margin-top:8px;white-space:pre-wrap;}
    .lr-read-cap{margin-top:9px;text-align:center;font-size:12.5px;color:var(--muted);}
    /* La lectura larga necesita saber cuánto falta; es lo único que lo dice. */
    .lr-read-rail{position:sticky;top:0;height:3px;background:rgba(255,255,255,.07);
      border-radius:3px;margin-bottom:6px;z-index:5;}
    .lr-read-rail i{display:block;height:100%;width:0;border-radius:3px;
      background:linear-gradient(90deg,var(--primary),var(--kairos-good,#4fd1c5));transition:width .15s;}
    .lr-read-chart{padding:18px 16px;}
    /* MEDIDO: en un `tape_diagram` de una sola serie el dibujo ocupa 107 de las
       300 unidades del viewBox — el 64% es hueco. La causa está en el
       renderizador COMPARTIDO, que dimensiona para varias series y lo usan
       cinco páginas más; no se toca desde aquí. `max-height` acota el destrozo
       sin deformar nada (el SVG conserva su relación de aspecto), pero es un
       tope, no el arreglo. El arreglo es que el viewBox se ajuste al contenido. */
    .lr-read-chart svg{display:block;width:100%;height:auto;max-width:560px;max-height:260px;
      margin:0 auto;color:var(--text,#e9e4ff);}
    .lr-read-body code{font:0.92em/1.4 "SF Mono",Menlo,Consolas,monospace;
      background:rgba(255,255,255,.07);border:1px solid var(--line);border-radius:5px;
      padding:1px 6px;white-space:nowrap;}
    @media(max-width:640px){.lr-read-body p{font-size:18px;}.lr-read-title{font-size:18px;}}
    .lr-mini-btn{font-size:11.5px;font-weight:700;padding:6px 12px;border-radius:10px;border:1px solid var(--line);background:var(--kairos-glass,rgba(255,255,255,.06));color:var(--text);cursor:pointer;}
    .lr-mini-btn.done{background:var(--good-bg);color:var(--kairos-good,#4fd1c5);border-color:transparent;}
    .lr-material{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;font-size:12.5px;}
    .lr-material a{color:var(--primary);font-weight:700;text-decoration:none;}
    .lr-assignment-card{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;margin-bottom:10px;background:var(--kairos-glass,rgba(255,255,255,.06));}
    .lr-state{text-align:center;padding:60px 20px;color:var(--muted);font-size:13.5px;background:var(--kairos-card,rgba(22,17,48,.72));border:1px solid var(--line);border-radius:22px;}
    .lr-state strong{display:block;font-size:15px;color:var(--text);margin-bottom:6px;}
    /* Al abrir la actividad, Hipatia aparece con un dato — la espera enseña */
    .lr-guide{display:flex;flex-direction:column;align-items:center;gap:14px;
      padding:44px 22px;background:var(--kairos-card,rgba(22,17,48,.72));
      border:1px solid var(--line);border-radius:22px;}
    .lr-guide-row{display:flex;gap:12px;align-items:flex-start;max-width:520px;text-align:left;}
    /* HIPATIA SE COMÍA SU PROPIA FRASE.
       El dato de la espera salía tapado por una cara enorme: el SVG del guía
       trae `width="120" height="120"` en sus atributos, y aquí se le daba
       tamaño al CONTENEDOR sin decirle nada al SVG. En las demás superficies el
       par va junto —`.gf-disc{overflow:hidden}` + `.gf-disc svg{width:100%}`,
       en `cube-activity-experience-v1.css`—, pero esa hoja NO se carga en la
       página de la lección: son cinco hojas y ésa no está entre ellas. Así que
       el disco quedaba de 64 y el dibujo de 120, encima del texto.
       Medido el 07-09-2026 en el visor: la frase «Tetraedro — Cuatro caras…»
       empezaba debajo de la cara y sus tres primeras palabras no se leían.
       El contenedor recorta y el dibujo se ajusta a él: las dos cosas, o vuelve. */
    .lr-guide .guide-avatar,.lr-guide .gf-disc{width:64px;height:64px;display:block;flex:0 0 64px;}
    .lr-guide .guide-avatar{position:relative;border-radius:50%;overflow:hidden;}
    .lr-guide .gf-disc{position:absolute;inset:0;width:auto;height:auto;}
    .lr-guide .guide-avatar svg,.lr-guide .gf-disc svg{width:100%;height:100%;display:block;}
    .lr-guide-say{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);
      border-radius:4px 16px 16px 16px;padding:10px 14px;min-width:0;}
    .lr-guide-say b{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
      color:#e2c98e;display:block;margin-bottom:2px;}
    .lr-guide-say p{margin:0;font-size:14px;line-height:1.55;color:#f4f1ff;transition:opacity .4s;}
    .lr-guide-hint{font-size:11px;letter-spacing:.08em;text-transform:uppercase;
      color:#a9a3c4;display:inline-flex;align-items:center;gap:8px;}
    .lr-guide-hint::before{content:'';width:10px;height:10px;border-radius:50%;
      border:2px solid rgba(226,201,142,.35);border-top-color:#e2c98e;
      animation:lr-spin 1s linear infinite;}
    @keyframes lr-spin{to{transform:rotate(360deg);}}
    @media (prefers-reduced-motion:reduce){.lr-guide-hint::before{animation:none;}}
    /* Completion close-out banner — literal greens (not var(--good), which the
       skin redefines to a low-opacity glow; same rule as .lr-chip.good above). */
    .lr-complete{display:flex;gap:14px;align-items:flex-start;background:rgba(79,209,197,.12);border:1px solid #86efac;border-radius:18px;padding:18px 20px;margin-bottom:16px;}
    .lr-complete-icon{width:38px;height:38px;border-radius:999px;background:#16a34a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:800;flex-shrink:0;}
    .lr-complete-body{flex:1;min-width:0;}
    .lr-complete-title{font-size:15px;font-weight:800;color:var(--kairos-good,#4fd1c5);margin-bottom:3px;}
    .lr-complete-sub{font-size:12.5px;color:var(--kairos-muted,#a9a3c4);line-height:1.5;margin-bottom:12px;}
    .lr-complete .lr-actions{margin-top:0;}

    /* ── LA LECCIÓN SE RECORRE POR PARTES ─────────────────────────────────
       Nueve secciones apiladas son un muro: se baja hasta el final sin haber
       leído nada. Una parte cada vez, con su barra abajo.
       `[hidden]` con `!important` a propósito: `.lr-read-sec` trae su propio
       `padding` y `border`, y sin esto el atributo no esconde nada — ya me
       pasó con otras cuatro clases de este producto. */
    .lr-read.por-pasos>.lr-read-sec[hidden]{display:none !important;}
    .lr-read.por-pasos>.lr-read-sec{border-bottom:0;padding-top:8px;}
    /* Lo que dice el guía al entrar en la parte: suyo, no de la lección. */
    .lr-read-voz{display:flex;align-items:baseline;gap:9px;margin:2px 0 14px;padding:9px 12px;
      border-left:3px solid var(--primary,#7c5cff);border-radius:0 10px 10px 0;
      background:color-mix(in srgb,var(--primary,#7c5cff) 10%,transparent);
      color:var(--text,#e9e6f5);font-size:13.5px;line-height:1.5;}
    .lr-read-voz-quien{flex:0 0 auto;color:var(--primary,#7c5cff);font-size:10.5px;font-weight:900;
      letter-spacing:.5px;text-transform:uppercase;}
    /* La barra de partes: pegada abajo mientras se lee, que es donde la mano
       la busca al terminar de leer. */
    .lr-pasos{position:sticky;bottom:0;z-index:4;display:flex;align-items:center;
      justify-content:space-between;gap:12px;margin-top:14px;padding:10px 12px;
      border:1px solid var(--line,#2c2a45);border-radius:14px;
      background:color-mix(in srgb,var(--panel,#171430) 92%,transparent);
      backdrop-filter:blur(10px);}
    .lr-paso-btn{appearance:none;border:1px solid var(--line,#2c2a45);border-radius:999px;
      background:transparent;color:var(--text,#e9e6f5);font:800 12.5px/1 inherit;
      padding:9px 15px;cursor:pointer;}
    .lr-paso-btn.primary{background:var(--primary,#7c5cff);border-color:var(--primary,#7c5cff);color:#fff;}
    .lr-paso-btn:disabled{opacity:.38;cursor:default;}
    .lr-paso-cuenta{color:var(--muted,#a29ec2);font-size:11.5px;font-weight:800;letter-spacing:.4px;}

    /* ── CADA TIPO DE PARTE SE PRESENTA A SU MANERA ───────────────────────
       El mismo texto no se lee igual según para qué es. La clase la decide el
       DATO (`section_type`) y todo lo de aquí es presentación: no se reescribe
       ni una palabra del contenido, sólo cómo entra por los ojos. */

    /* La pregunta va a la cara: grande, centrada y sin nada alrededor. */
    /* La pregunta va grande y centrada, pero SIN medida propia: la parte ya
       está topada en 62ch y dos topes se multiplican — medido, la pregunta
       quedaba en 43 caracteres por línea, más estrecha que un móvil. */
    .lr-read-sec[data-tipo="opening_question"] .lr-read-body,
    .lr-read-sec[data-tipo="essential_question"] .lr-read-body{
      font-size:19px;line-height:1.65;text-align:center;}
    .lr-read-sec[data-tipo="opening_question"] .lr-read-title,
    .lr-read-sec[data-tipo="essential_question"] .lr-read-title{text-align:center;}

    /* El paso a paso se numera. Los párrafos ya vienen partidos; el número lo
       pone un contador, así que el texto sigue siendo el del autor. */
    .lr-read-sec[data-tipo="concept_model"] .lr-read-body{counter-reset:paso;}
    .lr-read-sec[data-tipo="concept_model"] .lr-read-body>p{
      counter-increment:paso;position:relative;padding-left:44px;margin-bottom:16px;}
    .lr-read-sec[data-tipo="concept_model"] .lr-read-body>p::before{
      content:counter(paso);position:absolute;left:0;top:-2px;display:grid;place-items:center;
      width:28px;height:28px;border-radius:50%;background:var(--primary,#7c5cff);color:#fff;
      font-size:13px;font-weight:900;}

    /* Aviso: lo que hay que mirar con cuidado se ve antes de leerse. */
    .lr-read-sec[data-tipo="common_error"] .lr-read-body{
      padding:14px 16px;border-radius:12px;
      border:1px solid color-mix(in srgb,var(--kairos-warn,#f6ad55) 45%,transparent);
      background:color-mix(in srgb,var(--kairos-warn,#f6ad55) 10%,transparent);}

    /* La curiosidad no es materia de examen y no debe parecerlo. */
    .lr-read-sec[data-tipo="did_you_know"] .lr-read-body{
      padding:14px 16px;border-radius:12px;border:1px dashed var(--line,#2c2a45);
      font-style:italic;}

    /* Definiciones: una ficha, que es como se estudian. */
    .lr-read-sec[data-tipo="definition"] .lr-read-body{
      padding:14px 16px;border-left:4px solid var(--primary,#7c5cff);border-radius:0 12px 12px 0;
      background:color-mix(in srgb,var(--panel,#171430) 70%,transparent);}

    /* El ejemplo resuelto es una demostración: se enmarca como tal. */
    .lr-read-sec[data-tipo="worked_example"] .lr-read-body{
      padding:16px;border:1px solid var(--line,#2c2a45);border-radius:12px;
      background:color-mix(in srgb,var(--bg,#0d0a1f) 55%,transparent);}

    /* Historia: una línea que corre al lado, como una cinta de tiempo. */
    .lr-read-sec[data-tipo="history"] .lr-read-body{
      padding-left:18px;border-left:2px solid color-mix(in srgb,var(--primary,#7c5cff) 45%,transparent);}

    /* Lo que se habla y lo que se piensa, en voz de cita. */
    .lr-read-sec[data-tipo="discussion"] .lr-read-body,
    .lr-read-sec[data-tipo="reflection"] .lr-read-body{
      font-size:17px;line-height:1.7;font-style:italic;
      padding-left:20px;border-left:3px solid var(--kairos-good,#4fd1c5);}

    /* Por qué importa: fuera del salón, y se nota. */
    .lr-read-sec[data-tipo="why_it_matters"] .lr-read-body{
      padding:14px 16px;border-radius:12px;
      background:color-mix(in srgb,var(--kairos-good,#4fd1c5) 10%,transparent);
      border:1px solid color-mix(in srgb,var(--kairos-good,#4fd1c5) 35%,transparent);}

    /* La hoja dentro del recorrido: se ve el papel, no un enlace a él. */
    .lr-booklet{margin-top:10px;border:1px solid var(--line,#2c2a45);border-radius:14px;
      overflow:hidden;background:#3a3550;}
    .lr-booklet iframe{display:block;width:100%;height:520px;border:0;}
    .lr-booklet-espera{margin:0;padding:26px;color:var(--muted,#a29ec2);font-size:13px;text-align:center;}
    .lr-booklet-error{margin:0;padding:20px;color:var(--kairos-warn,#f6ad55);font-size:12.5px;}

    /* En la última parte, «Siguiente» deja de llevar a ninguna parte y pasa a
       ser lo que de verdad queda por hacer: dar la lección por terminada. */
    .lr-paso-btn.es-completar{background:var(--kairos-good,#4fd1c5);border-color:var(--kairos-good,#4fd1c5);color:#06231f;}

    /* ── EL DESAFÍO, CERRADO Y ABIERTO ────────────────────────────────────
       Cerrado se ve que existe y por qué no se puede aún; abierto es un botón
       que lleva a hacerlo. Que se vea cerrado es parte del trato: una puerta
       que no se ve no invita a llegar hasta ella. */
    .lr-desafio{margin-top:10px;padding:18px;border-radius:14px;border:1px dashed var(--line,#2c2a45);
      background:color-mix(in srgb,var(--panel,#171430) 60%,transparent);text-align:center;}
    .lr-desafio.esta-abierto{border-style:solid;
      border-color:color-mix(in srgb,var(--kairos-good,#4fd1c5) 55%,transparent);
      background:color-mix(in srgb,var(--kairos-good,#4fd1c5) 10%,transparent);}
    .lr-desafio-cerrado{margin:0;color:var(--muted,#a29ec2);font-size:13px;}
    .lr-desafio-abrir{display:inline-flex;align-items:center;gap:8px;margin:0;padding:11px 20px;
      border-radius:999px;border:0;background:var(--kairos-good,#4fd1c5);color:#06231f;
      font:900 13.5px/1 inherit;text-decoration:none;cursor:pointer;}

    /* ── LA MEDIDA DE LECTURA ─────────────────────────────────────────────
       A 1.280 px de ancho, un párrafo a sangre entera son 150 caracteres por
       línea: el ojo pierde el renglón al volver a la izquierda y se relee.
       La tipografía lleva un siglo diciendo que la medida cómoda son 45-75
       caracteres. Se centra la columna y se deja el aire alrededor: la parte se
       lee como una página, no como un ancho de navegador. */
    .lr-read.por-pasos>.lr-read-sec{max-width:62ch;margin-left:auto;margin-right:auto;}
    .lr-read.por-pasos .lr-read-body{font-size:16.5px;line-height:1.75;}
    .lr-read.por-pasos .lr-read-body>p+p{margin-top:1.05em;}
    /* El título de la parte y su rótulo son una unidad: juntos arriba, con la
       separación por debajo, no flotando cada uno por su lado. */
    .lr-read.por-pasos .lr-read-title{margin:2px 0 4px;font-size:24px;line-height:1.25;letter-spacing:-.01em;}
    .lr-read.por-pasos .lr-read-head{margin-bottom:2px;}
    /* La figura respira y su pie se lee como pie, no como texto de la lección. */
    .lr-read.por-pasos .lr-read-fig,
    .lr-read.por-pasos .q-fig{margin:20px 0 4px;}
    .lr-read.por-pasos .lr-read-cap{margin-top:8px;color:var(--muted,#a29ec2);font-size:12.5px;text-align:center;}
    /* Las negritas del autor marcan lo que hay que retener: que se noten. */
    .lr-read.por-pasos .lr-read-body strong{color:var(--text,#e9e6f5);font-weight:800;}
    /* La barra de partes se alinea con la columna de lectura, o queda flotando
       a un lado en pantallas anchas. */
    .lr-pasos{max-width:62ch;margin-left:auto;margin-right:auto;}

    /* EL DIÁLOGO POR TURNOS (07-09-2026): una línea por hablante, alternando el
       fondo, para que en clase cada uno encuentre la suya y la lea en voz alta.
       El nombre va delante y el texto envuelve debajo; nada de globos de chat,
       que en papel y a dos columnas no caben. */
    .lr-dialogo{display:flex;flex-direction:column;gap:8px;margin:10px 0;}
    .lr-turno{margin:0;padding:8px 12px;border-radius:12px;background:rgba(255,255,255,.06);line-height:1.55;}
    .lr-turno:nth-child(even){background:rgba(255,255,255,.11);}
    .lr-quien{color:#e2c98e;margin-right:6px;}
    .lr-quien::after{content:":";}