/* ── LA LECCIÓN CON EL DISEÑO DE GEORGE, EN GRISES (28/9/2026) ───────────────
   La pinta assets/js/chapter.js. Todo cuelga de #chapterRoot.lc-on para ganar
   a style.css sin !important: style.css sigue mandando en la barra, el pie y
   los bloques de debajo de la lección.

   Tarjetas con sombra suave, paneles gris muy claro, botones redondos,
   Newsreader para leer y Public Sans para la interfaz, como la portada. Sin
   color: acierto y fallo con negrita y tachado. Las notas van dentro de su
   tarjeta, nunca al margen. */

:root{--h-paper:#F2EDE4;--h-stone:#E6E1D8;--h-black:#121212;--h-on-black:#F4F1EC;--h-r:28px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--h-paper:#1B1915;--h-stone:#24211C;--h-black:#2A2723;--h-on-black:#F4F1EC}}
:root[data-theme="dark"]{--h-paper:#1B1915;--h-stone:#24211C;--h-black:#2A2723;--h-on-black:#F4F1EC}
:root{
  --lc-bg:#FFFFFF; --lc-surface:#FFFFFF; --lc-sunk:#F4F4F3; --lc-tint:#EDEDEC; --lc-paper:#FAFAF8;
  --lc-ink:#141414; --lc-ink2:#3F3F3F; --lc-muted:#6E6E6E;
  --lc-line:#E6E6E6; --lc-line2:#CFCFCF; --lc-mark:#E6E6E3;
  --lc-btn:#141414; --lc-btn-hover:#3A3A3A; --lc-on-btn:#FFFFFF;
  --lc-shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.08);
  --lc-soft:0 1px 2px rgba(0,0,0,.04),0 10px 30px rgba(0,0,0,.07);
  --lc-serif:"Newsreader",Georgia,"Times New Roman",serif;
  --lc-sans:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --lc-bg:#0E0E0E; --lc-surface:#0F0E0C; --lc-sunk:#151515; --lc-tint:#1C1C1C; --lc-paper:#141414;
  --lc-ink:#F2F2F2; --lc-ink2:#CCCCCC; --lc-muted:#999999;
  --lc-line:#2A2A2A; --lc-line2:#3C3C3C; --lc-mark:#2E2E2E;
  --lc-btn:#F2F2F2; --lc-btn-hover:#D6D6D6; --lc-on-btn:#0E0E0E;
  --lc-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.4);
  --lc-soft:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.3);
}}
:root[data-theme="dark"]{
  --lc-bg:#0E0E0E; --lc-surface:#0F0E0C; --lc-sunk:#151515; --lc-tint:#1C1C1C; --lc-paper:#141414;
  --lc-ink:#F2F2F2; --lc-ink2:#CCCCCC; --lc-muted:#999999;
  --lc-line:#2A2A2A; --lc-line2:#3C3C3C; --lc-mark:#2E2E2E;
  --lc-btn:#F2F2F2; --lc-btn-hover:#D6D6D6; --lc-on-btn:#0E0E0E;
  --lc-shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.4);
  --lc-soft:0 1px 2px rgba(0,0,0,.35),0 10px 30px rgba(0,0,0,.3);
}

html{scroll-behavior:smooth;scroll-padding-top:24px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* La hoja: del ancho de la barra de arriba, sin la columna de notas. */
body.chapter-page main#chapterRoot.lc-on{
  max-width:1160px; padding:0 24px 32px; margin:0 auto;
  font-family:var(--lc-sans); font-size:16px; line-height:1.55; color:var(--lc-ink);
}
#chapterRoot.lc-on :where(p,h1,h2,h3,ul,ol,table,blockquote,figure,div,section){max-width:none}
#chapterRoot.lc-on :where(h1,h2,h3){font-family:var(--lc-serif);font-weight:500;letter-spacing:-.01em;text-wrap:balance;margin:0;color:var(--lc-ink);text-transform:none}
#chapterRoot.lc-on p{margin:0}
#chapterRoot.lc-on :where(.lc-switch,.lc-size button,.lc-tabs button,.lc-say,.lc-btn){font-family:var(--lc-sans);color:var(--lc-ink);cursor:pointer}
#chapterRoot.lc-on a{color:inherit}
#chapterRoot.lc-on :focus-visible{outline:2px solid var(--lc-ink);outline-offset:2px}
#chapterRoot.lc-on .lc-eyebrow{display:block;font-family:var(--lc-sans);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--lc-muted)}

/* Raya de lectura, pegada arriba del todo. */
.lc-readbar{position:fixed;top:0;left:0;height:3px;width:0;background:var(--lc-ink);z-index:60;pointer-events:none}

/* Botón negro redondo */
#chapterRoot.lc-on .lc-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:0 28px;border-radius:999px;border:0;background:var(--lc-btn);color:var(--lc-on-btn);font-family:var(--lc-sans);font-weight:600;font-size:15px;text-decoration:none;transition:background .15s}
#chapterRoot.lc-on .lc-btn:hover{background:var(--lc-btn-hover)}
#chapterRoot.lc-on .lc-btn svg{width:18px;height:18px}

/* ---------- cabecera ---------- */
#chapterRoot .lc-hero{padding:32px 0 clamp(40px,6vw,72px)}
#chapterRoot .lc-crumbs{font-size:14px;color:var(--lc-muted);display:flex;gap:8px;flex-wrap:wrap}
#chapterRoot .lc-crumbs a{text-decoration:none}
#chapterRoot .lc-crumbs a:hover{color:var(--lc-ink)}
#chapterRoot .lc-hero-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;margin-top:20px}
#chapterRoot .lc-hero-grid.sin-dibujo{grid-template-columns:1fr}
#chapterRoot .lc-hero-grid>*{min-width:0}
#chapterRoot .lc-pills{display:flex;gap:8px;flex-wrap:wrap}
#chapterRoot .lc-pill{display:inline-flex;align-items:center;font-size:13px;font-weight:600;padding:5px 12px;border-radius:999px;background:var(--lc-sunk);color:var(--lc-ink2);line-height:1.3}
#chapterRoot .lc-pill.ink{background:var(--lc-ink);color:var(--lc-bg)}
#chapterRoot .lc-pill em{font-style:italic}
#chapterRoot .lc-hero h1{font-size:clamp(38px,5.4vw,64px);line-height:1.03;margin:18px 0 6px}
#chapterRoot .lc-es-title{font-family:var(--lc-serif);font-style:italic;font-size:22px;color:var(--lc-muted)}
#chapterRoot .lc-lede{font-family:var(--lc-serif);font-size:21px;line-height:1.5;color:var(--lc-ink2);margin-top:18px;max-width:36ch}
#chapterRoot .lc-cta{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:26px}
/* Sistema H: el nivel en un círculo negro y los minutos al lado. */
#chapterRoot .lc-top{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--lc-muted)}
#chapterRoot .lc-lvl{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;background:var(--h-black);color:var(--h-on-black);font:600 14px var(--lc-sans)}

/* El grabado, recortado en una forma distinta según la lección. */
#chapterRoot .lc-art{justify-self:end;width:100%;max-width:420px;margin:0}
#chapterRoot .lc-marco{overflow:hidden;background:var(--h-stone);aspect-ratio:4/5}
#chapterRoot .lc-marco img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.04);max-width:none}
#chapterRoot .forma-arco .lc-marco{border-radius:999px 999px var(--h-r) var(--h-r)}
#chapterRoot .forma-circulo .lc-marco{border-radius:50%;aspect-ratio:1}
#chapterRoot .forma-elipse .lc-marco{border-radius:50%}
#chapterRoot .forma-capsula .lc-marco{border-radius:999px;aspect-ratio:3/4}
#chapterRoot .forma-ventana .lc-marco{border-radius:var(--h-r)}
#chapterRoot .lc-art figcaption{font-size:12.5px;color:var(--lc-muted);margin-top:12px;font-style:normal}

/* ---------- cuerpo: índice fijo + columna ---------- */
#chapterRoot .lc-body{display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;padding:24px 0 40px}
#chapterRoot .lc-body>*{min-width:0}
#chapterRoot .lc-rail{position:sticky;top:24px;align-self:start}
#chapterRoot .lc-rail ol{list-style:none;margin:0;padding:0;counter-reset:lc}
#chapterRoot .lc-rail li{margin:0}
#chapterRoot .lc-rail li a{display:flex;align-items:center;gap:12px;padding:7px 12px;border-radius:999px;text-decoration:none;font-size:14.5px;color:var(--lc-muted);counter-increment:lc;line-height:1.25}
#chapterRoot .lc-rail li a::before{content:counter(lc);display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--h-stone);color:var(--lc-ink2);font-size:12px;font-weight:700;flex:none}
#chapterRoot .lc-rail li a:hover{color:var(--lc-ink);background:var(--h-paper)}
#chapterRoot .lc-rail li a.on{color:var(--lc-ink);background:var(--h-paper);font-weight:600}
#chapterRoot .lc-rail li a.on::before{background:var(--lc-ink);color:var(--lc-bg);box-shadow:none}
#chapterRoot .lc-rail li a.done::before{content:"✓";background:var(--h-paper);box-shadow:none;color:var(--lc-ink)}
#chapterRoot .lc-main{max-width:760px}

@media (max-width:1000px){
  #chapterRoot .lc-hero-grid{grid-template-columns:1fr;gap:32px}
  #chapterRoot .lc-art{justify-self:center;max-width:340px}
  #chapterRoot .lc-body{grid-template-columns:1fr;gap:0;padding-top:8px}
  #chapterRoot .lc-rail{top:0;z-index:30;margin:0 -24px;padding:10px 24px;background:color-mix(in srgb,var(--lc-bg) 90%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  #chapterRoot .lc-rail ol{display:flex;gap:6px;overflow-x:auto;margin:0;scrollbar-width:none}
  #chapterRoot .lc-rail ol::-webkit-scrollbar{display:none}
  #chapterRoot .lc-rail li a{white-space:nowrap;padding:6px 12px 6px 8px}
  #chapterRoot .lc-main{margin:0 auto;padding-top:16px;width:100%}
  html{scroll-padding-top:72px}
}
@media (max-width:560px){
  body.chapter-page main#chapterRoot.lc-on{padding:0 16px 24px}
  #chapterRoot .lc-rail{margin:0 -16px;padding:10px 16px}
  #chapterRoot .lc-hero{padding-top:24px}
}

/* ---------- secciones ---------- */
/* Sistema H (3/10/2026): ningún filete entre secciones. Las separa el aire y
   el color: unas van sobre blanco y otras en una losa de papel o de piedra
   con las esquinas redondeadas. La cultura va en la losa negra. */
#chapterRoot .lc-main{display:grid;gap:clamp(40px,6vw,72px);align-content:start}
#chapterRoot .lc-sec{padding:0;border:0;margin:0}
#chapterRoot .lc-main>.lc-sec:first-child{padding-top:8px}
#chapterRoot :is(#before,#vocab,#original){background:var(--h-paper);border-radius:var(--h-r);padding:clamp(28px,4vw,48px)}
#chapterRoot #cando{background:var(--h-stone);border-radius:var(--h-r);padding:clamp(28px,4vw,48px)}
#chapterRoot .lc-sec-head{display:flex;align-items:baseline;gap:14px;margin-bottom:24px}
#chapterRoot .lc-n{font-family:var(--lc-serif);font-size:15px;color:var(--lc-muted);font-style:italic}
#chapterRoot .lc-sec h2{font-size:clamp(27px,3.4vw,36px);line-height:1.12}
#chapterRoot .lc-intro{color:var(--lc-ink2);margin:-10px 0 22px}
#chapterRoot .lc-card{background:var(--lc-surface);border-radius:20px;padding:22px 24px}
#chapterRoot .lc-panel{background:var(--h-stone);border-radius:var(--h-r);padding:32px}
#chapterRoot :is(#before,#original) .lc-panel{background:none;padding:0;border-radius:0}
@media (max-width:560px){#chapterRoot .lc-panel{padding:20px 16px}#chapterRoot .lc-card{padding:18px}#chapterRoot :is(#before,#vocab,#original,#cando){padding:24px 16px;margin-inline:-8px}}

/* objetivos */
#chapterRoot .lc-goals{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;list-style:none;margin:0;padding:0;counter-reset:g}
#chapterRoot .lc-goals li{counter-increment:g;font-size:15.5px;color:var(--lc-ink2);margin:0;padding:0;background:none}
#chapterRoot .lc-goals li::before{content:counter(g);display:grid;place-items:center;width:48px;height:48px;border-radius:50%;background:var(--h-stone);font-family:var(--lc-serif);font-size:22px;color:var(--lc-ink);line-height:1;margin-bottom:16px}
#chapterRoot .lc-goals:has(li:nth-child(4)){grid-template-columns:repeat(2,1fr)}
@media (max-width:720px){#chapterRoot .lc-goals,#chapterRoot .lc-goals:has(li:nth-child(4)){grid-template-columns:1fr}}

/* antes de leer */
#chapterRoot .lc-heads{display:flex;gap:14px;align-items:flex-start;margin-bottom:22px;font-size:15.5px;color:var(--lc-ink2)}
#chapterRoot .lc-heads b{color:var(--lc-ink)}
#chapterRoot .lc-ic{flex:none;width:34px;height:34px;border-radius:50%;background:var(--lc-ink);color:var(--lc-bg);display:grid;place-items:center;font-family:var(--lc-serif);font-style:italic;font-size:19px}
#chapterRoot .lc-words{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
#chapterRoot .lc-word{background:var(--lc-surface);border-radius:20px;padding:16px 18px;display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-content:start;align-items:center}
#chapterRoot .lc-word.ancha{grid-column:span 2}
#chapterRoot .lc-es{font-family:var(--lc-serif);font-size:20px;font-weight:500;line-height:1.25}
#chapterRoot .lc-en{grid-column:1;font-size:14px;color:var(--lc-muted)}
#chapterRoot .lc-word .lc-say,#chapterRoot .lc-vrow .lc-say{grid-row:1/3;grid-column:2}
#chapterRoot .lc-nt{grid-column:1/-1;margin-top:8px;font-size:13.5px;color:var(--lc-ink2);line-height:1.45}
#chapterRoot .lc-ff{display:inline-block;font-family:var(--lc-sans);font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:2px 7px;border-radius:999px;background:var(--lc-ink);color:var(--lc-bg);margin-left:8px;vertical-align:3px;line-height:1.4}
@media (max-width:640px){#chapterRoot .lc-words{grid-template-columns:1fr}#chapterRoot .lc-word.ancha{grid-column:auto}}
#chapterRoot .lc-say{width:34px;height:34px;border-radius:50%;border:0;display:grid;place-items:center;background:var(--h-stone);color:var(--lc-ink);padding:0}
#chapterRoot .lc-say:hover{background:var(--lc-btn);color:var(--lc-on-btn)}
#chapterRoot .lc-say svg{width:15px;height:15px}

/* la historia */
#chapterRoot .lc-tools{display:flex;gap:12px 20px;align-items:center;flex-wrap:wrap;margin-bottom:20px}
#chapterRoot .lc-sp{flex:1}
#chapterRoot .lc-switch{display:inline-flex;align-items:center;gap:10px;border:0;padding:8px 14px 8px 10px;border-radius:999px;font-size:14px;font-weight:600;background:var(--h-stone)}
#chapterRoot .lc-trk{width:32px;height:18px;border-radius:9px;background:var(--lc-muted);position:relative;transition:background .15s;flex:none}
#chapterRoot .lc-trk::after{content:"";position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .15s}
#chapterRoot .lc-switch[aria-checked="true"] .lc-trk{background:var(--lc-ink)}
#chapterRoot .lc-switch[aria-checked="true"] .lc-trk::after{transform:translateX(14px);background:var(--lc-bg)}
#chapterRoot .lc-sheet{--lc-leer:21px;background:var(--h-paper);border-radius:var(--h-r);padding:44px 52px 28px;position:relative}
#chapterRoot .lc-para{display:grid;grid-template-columns:28px 1fr;gap:0 12px;padding:10px 12px 10px 0;border-radius:10px;cursor:pointer;position:relative}
#chapterRoot .lc-para:hover{background:var(--h-stone)}
#chapterRoot .lc-num{font-size:12px;color:var(--lc-muted);font-weight:600;padding-top:.55em;text-align:right;font-variant-numeric:tabular-nums}
#chapterRoot .lc-txt{font-family:var(--lc-serif);font-size:var(--lc-leer);line-height:1.65}
#chapterRoot .lc-tr{grid-column:2;font-family:var(--lc-serif);font-style:italic;font-size:15.5px;line-height:1.5;color:var(--lc-muted);display:none;margin-top:4px}
#chapterRoot .lc-para.open .lc-tr,#chapterRoot .lc-sheet.todo .lc-tr{display:block}
#chapterRoot .lc-w{background:linear-gradient(transparent 60%,var(--lc-mark) 60%);position:relative;border-radius:2px}
#chapterRoot .lc-w[data-g]:hover::after{content:attr(data-g);position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;background:var(--lc-ink);color:var(--lc-bg);font:600 12.5px/1 var(--lc-sans);font-style:normal;padding:7px 10px;border-radius:999px;pointer-events:none;z-index:3}
#chapterRoot .lc-fin{text-align:center;margin-top:18px;font-family:var(--lc-serif);font-size:22px;color:var(--lc-muted)}
#chapterRoot .lc-hint{font-size:14px;color:var(--lc-muted)}
@media (max-width:640px){
  #chapterRoot .lc-sheet{padding:24px 10px 16px;border-radius:20px}
  #chapterRoot .lc-para{grid-template-columns:1fr;padding:10px}
  #chapterRoot .lc-num{display:none}
  #chapterRoot .lc-tr{grid-column:1}
}

/* ¿lo has entendido? */
#chapterRoot .lc-qs{display:grid;gap:10px}
#chapterRoot .lc-q{background:var(--h-stone);border-radius:20px}
#chapterRoot .lc-q summary{list-style:none;display:flex;align-items:center;gap:14px;padding:16px 18px;cursor:pointer;font-size:16.5px;font-weight:500}
#chapterRoot .lc-q summary::-webkit-details-marker{display:none}
#chapterRoot .lc-k{flex:none;width:28px;height:28px;border-radius:50%;background:var(--lc-surface);display:grid;place-items:center;font-size:13px;font-weight:700}
#chapterRoot .lc-chev{margin-left:auto;display:grid;transition:transform .2s;color:var(--lc-muted)}
#chapterRoot .lc-q[open] .lc-chev{transform:rotate(180deg)}
#chapterRoot .lc-a{padding:0 18px 18px 60px;font-family:var(--lc-serif);font-size:18px;color:var(--lc-ink2)}

/* vocabulario */
#chapterRoot .lc-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
#chapterRoot .lc-tabs button{border:0;padding:8px 16px;border-radius:999px;background:var(--lc-surface);font-size:14px;font-weight:600;color:var(--lc-ink2)}
#chapterRoot .lc-tabs button[aria-selected="true"]{background:var(--lc-ink);color:var(--lc-bg)}
#chapterRoot .lc-tabs .c{opacity:.6;margin-left:6px;font-weight:500}
#chapterRoot .lc-vgroup{font-family:var(--lc-serif);font-size:20px;font-weight:500;color:var(--lc-ink2);margin:28px 0 8px}
#chapterRoot .lc-vlist{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 12px}
#chapterRoot .lc-vrow{display:grid;grid-template-columns:1fr auto;align-items:center;align-content:start;gap:0 10px;padding:12px 16px;border-radius:16px;background:var(--lc-surface)}
#chapterRoot .lc-vrow .lc-es{font-size:19px}
#chapterRoot .lc-vrow .lc-nt{margin-top:6px}
@media (max-width:640px){#chapterRoot .lc-vlist{grid-template-columns:1fr}}

/* gramática */
#chapterRoot .lc-steps{display:grid;gap:16px}
#chapterRoot .lc-step{display:flex;align-items:center;gap:12px;font-family:var(--lc-serif);font-size:20px;font-style:italic;color:var(--lc-ink2);margin-bottom:12px}
#chapterRoot .lc-step span{width:32px;height:32px;border-radius:50%;background:var(--h-black);color:var(--h-on-black);display:grid;place-items:center;font:normal 600 14px var(--lc-sans)}
#chapterRoot .lc-ex{list-style:none;margin:0;padding:0}
#chapterRoot .lc-ex li{font-family:var(--lc-serif);font-size:21px;padding:6px 0;margin:0}
#chapterRoot .lc-ex b{font-weight:600;background:linear-gradient(transparent 60%,var(--lc-mark) 60%)}
#chapterRoot .lc-think{padding:28px 30px}
#chapterRoot .lc-ask{font-family:var(--lc-serif);font-size:22px;line-height:1.4;margin-bottom:18px}
#chapterRoot .lc-rule{display:none;outline:0}
#chapterRoot .lc-rule.on{display:block}
#chapterRoot .lc-rule .lc-step{margin-top:8px}
#chapterRoot .lc-gbody{font-size:16.5px;color:var(--lc-ink2)}
#chapterRoot .lc-gbody p{margin:0 0 14px}
#chapterRoot .lc-gbody b,#chapterRoot .lc-gbody strong{color:var(--lc-ink)}
#chapterRoot .lc-gbody h3,#chapterRoot .lc-gbody h4{font-family:var(--lc-serif);font-size:22px;margin:24px 0 10px}
#chapterRoot .lc-gbody ul,#chapterRoot .lc-gbody ol{margin:0 0 14px;padding-left:22px}
#chapterRoot .lc-gbody table{width:100%;border-collapse:collapse;background:var(--lc-surface);border-radius:20px;overflow:hidden;font-size:15px;margin:18px 0 22px;display:table}
#chapterRoot .lc-gbody th{text-align:left;font-family:var(--lc-sans);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--lc-muted);font-weight:600;padding:12px 16px;background:var(--h-stone);border:0}
#chapterRoot .lc-gbody td{padding:10px 16px;border:0;vertical-align:top}
#chapterRoot .lc-gbody tr:nth-child(even) td{background:var(--h-paper)}
#chapterRoot .lc-gbody td b{font-family:var(--lc-serif);font-size:18px;font-weight:600}
@media (max-width:560px){#chapterRoot .lc-gbody table{display:block;overflow-x:auto}#chapterRoot .lc-gbody th,#chapterRoot .lc-gbody td{padding:9px 10px}}
#chapterRoot .lc-pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px}
#chapterRoot .lc-pair>:only-child{grid-column:1/-1}
#chapterRoot .lc-pair h3{font-family:var(--lc-serif);font-size:19px;font-style:italic;font-weight:500;color:var(--lc-ink2);margin-bottom:8px}
#chapterRoot .lc-pair .lc-card{background:var(--h-paper)}
#chapterRoot .lc-steps>.lc-card:first-child{background:var(--h-paper)}
#chapterRoot .lc-pair p{font-size:15.5px;color:var(--lc-ink2)}
@media (max-width:720px){#chapterRoot .lc-pair{grid-template-columns:1fr}}

/* cultura: el panel oscuro, como los libros de la portada */
#chapterRoot .lc-dark{--lc-ink:#F4F1EC;--lc-ink2:#CFCAC2;--lc-muted:#A39E96;background:var(--h-black);color:var(--lc-ink);border-radius:var(--h-r);padding:clamp(28px,5vw,56px)}
#chapterRoot .lc-dark h2{margin:0 0 20px}
#chapterRoot .lc-cbody p{font-family:var(--lc-serif);font-size:19px;line-height:1.65;color:var(--lc-ink2);margin-bottom:14px}
#chapterRoot .lc-cbody p:first-child::first-letter{float:left;font-size:64px;line-height:.85;padding:6px 10px 0 0;color:var(--lc-ink)}
#chapterRoot .lc-cbody a{text-decoration-color:#666}
@media (max-width:560px){#chapterRoot .lc-dark{padding:28px 20px;margin-inline:-8px}}

/* práctica: cada ejercicio en su tarjeta */
#chapterRoot .lc-excard{padding:clamp(20px,3vw,32px);margin-bottom:16px;background:var(--h-paper);border-radius:var(--h-r)}
#chapterRoot .lc-excard>*{margin:0;padding:0;border:0;background:none;box-shadow:none}
#chapterRoot .lc-excard h3{font-family:var(--lc-serif);font-size:23px;margin:0 0 6px}
#chapterRoot .lc-excard .btn{border-radius:999px;font-family:var(--lc-sans);font-weight:600}
#chapterRoot .lc-excard input[type="text"],#chapterRoot .lc-excard textarea{border-radius:10px}
@media (max-width:560px){#chapterRoot .lc-excard{padding:20px 14px;margin-inline:-8px}}
/* Dentro de los ejercicios, las marcas de estado de style.css eran filetes
   (raya a la izquierda en las opciones, raya debajo de fichas y parejas,
   marco en verdadero/falso). Aquí son píldoras: blancas en reposo, piedra si
   están emparejadas o son la buena, negras si las ha elegido el alumno. El
   tachado del fallo se queda igual. Los campos de escribir siguen con su raya,
   que es el sitio donde se escribe y no un separador. */
#chapterRoot .lc-excard :is(.option,.order-slot){border:0;border-radius:16px;padding:6px 12px}
#chapterRoot .lc-excard :is(.option,.order-slot).ok{background:var(--h-stone)}
#chapterRoot .lc-excard :is(.chip,.chip-btn,.match-item){border:0;border-radius:999px;background:var(--lc-surface);padding:6px 14px}
#chapterRoot .lc-excard .match-col{gap:8px}
#chapterRoot .lc-excard .match-item:hover{background:var(--h-stone)}
#chapterRoot .lc-excard .match-item.is-paired{background:var(--h-stone)}
#chapterRoot .lc-excard :is(.match-item,.chip-btn).is-sel{background:var(--lc-ink);color:var(--lc-bg)}
#chapterRoot .lc-excard :is(.match-item,.chip-btn).ok{background:var(--h-stone);color:var(--lc-ink)}
#chapterRoot .lc-excard .tf-btn{border:0;border-radius:999px;background:var(--lc-surface);padding:8px 18px}
#chapterRoot .lc-excard .tf-btn.is-sel{background:var(--lc-ink);color:var(--lc-bg)}
#chapterRoot .lc-excard :is(.solution,.checklist,.sort-col){border:0;background:var(--lc-surface);border-radius:16px;padding:12px 16px}
#chapterRoot .lc-excard .model-answer{border:0}
#chapterRoot .lc-excard textarea{border:0;border-radius:16px;background:var(--lc-surface)}
#chapterRoot .lc-excard .btn{border:0}
#chapterRoot .lc-excard .btn-small{background:var(--lc-surface);color:var(--lc-ink)}
#chapterRoot .lc-excard .btn-small:hover{background:var(--lc-ink);color:var(--lc-bg)}
#chapterRoot .lc-excard .btn-ghost{color:var(--lc-muted)}
#chapterRoot .trad-btn{font-family:var(--lc-sans);color:var(--lc-muted)}
#chapterRoot .trad-btn:hover,#chapterRoot .ver-trad .trad-btn{color:var(--lc-ink)}
#chapterRoot .ver-trad .trad{color:var(--lc-muted)}

/* Cervantes */
#chapterRoot .lc-orig{margin:0;padding:0;border:0}
#chapterRoot .lc-orig-es{font-family:var(--lc-serif);font-size:24px;line-height:1.55;font-style:italic;margin-bottom:16px}
#chapterRoot .lc-orig-en{color:var(--lc-muted);font-size:15.5px;margin-bottom:20px}
#chapterRoot .lc-orig-es{padding-bottom:16px}
#chapterRoot .lc-orig-en{padding-bottom:20px}
#chapterRoot .lc-orig-nt{font-size:15.5px;color:var(--lc-ink2)}

/* ya sé hacer esto */
#chapterRoot .lc-cando{list-style:none;margin:0;padding:0;display:grid;gap:8px}
#chapterRoot .lc-cando li{margin:0}
#chapterRoot .lc-cando label{display:flex;gap:14px;align-items:center;padding:14px 20px;border-radius:24px;background:var(--lc-surface);cursor:pointer;font-size:16px}
#chapterRoot .lc-cando input{appearance:none;-webkit-appearance:none;width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--lc-muted);display:grid;place-items:center;margin:0;flex:none;background:none}
#chapterRoot .lc-cando input:checked{background:var(--lc-ink);box-shadow:none}
#chapterRoot .lc-cando input:checked::after{content:"✓";color:var(--lc-bg);font-size:14px;font-weight:700}
#chapterRoot .lc-cando input:checked+span{color:var(--lc-muted)}

/* final: terminar, la petición y la lección siguiente */
#chapterRoot .lc-end{display:grid;gap:24px;justify-items:start}
#chapterRoot .lc-end .gracias{border:0;padding:0}
#chapterRoot .lc-finish.done{background:var(--h-stone);color:var(--lc-ink)}
#chapterRoot .lc-end .gracias{max-width:none;width:100%;margin:0}
#chapterRoot .lc-nextcard{justify-self:stretch;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:24px 32px 24px 24px;border-radius:var(--h-r);background:var(--h-black);color:var(--h-on-black);text-decoration:none}
#chapterRoot .lc-nextcard.sin-img{grid-template-columns:1fr auto;padding-left:32px}
#chapterRoot .lc-nextimg{width:104px;height:104px;border-radius:50%;object-fit:cover;filter:grayscale(1);display:block;background:#3A3732;max-width:none}
#chapterRoot .lc-small{display:block;font-size:14px;color:#CFCAC2}
#chapterRoot .lc-nextcard h3{font-size:28px;margin-top:4px;color:var(--h-on-black)}
#chapterRoot .lc-go{width:52px;height:52px;border-radius:50%;background:var(--h-on-black);color:#121212;display:grid;place-items:center;transition:transform .15s}
#chapterRoot .lc-nextcard:hover .lc-go{transform:translateX(3px)}
#chapterRoot .lc-prev{font-size:14.5px;color:var(--lc-muted);text-decoration:none}
#chapterRoot .lc-prev:hover{color:var(--lc-ink)}
@media (max-width:560px){#chapterRoot .lc-nextcard{padding:16px;gap:16px}#chapterRoot .lc-nextimg{width:72px;height:72px}#chapterRoot .lc-nextcard h3{font-size:21px}#chapterRoot .lc-go{width:44px;height:44px}}

/* ---------- los bloques de debajo de la lección (2/10/2026) ----------
   «Ce point de grammaire sur sa propre page», «This Spanish in Cervantes» y el
   aviso del libro van FUERA del <main> (chapter.js vacía el main al pintar), así
   que no colgaban de #chapterRoot y seguían con el estilo antiguo de style.css:
   filete al ancho de la hoja y lista con rayas. Aquí se visten como el resto de
   la lección: panel gris redondeado, tarjetas blancas con sombra, Newsreader en
   los títulos. Alineados con la columna de lectura, no con el índice lateral. */
body.chapter-page>.ch-temas,
body.chapter-page>.libro-leccion{
  box-sizing:border-box;max-width:1160px;margin:0 auto 16px;padding:0 24px;
  border:0;background:none;font-family:var(--lc-sans);color:var(--lc-ink)}
body.chapter-page>.ch-temas>*,
body.chapter-page>.libro-leccion>*{max-width:760px}
@media (min-width:1001px){
  body.chapter-page>.ch-temas,
  body.chapter-page>.libro-leccion{padding-left:calc(24px + 230px + 56px)}
}
body.chapter-page>.ch-temas{display:block}
body.chapter-page>.ch-temas::before{content:none}
body.chapter-page>.ch-temas h2{
  font-family:var(--lc-serif);font-weight:500;font-size:clamp(24px,2.8vw,30px);
  line-height:1.15;letter-spacing:-.01em;text-transform:none;color:var(--lc-ink);
  margin:0;padding:28px 32px 0;background:var(--h-paper);border-radius:var(--h-r) var(--h-r) 0 0}
/* Sistema H: sin la entradilla bajo el título, el título ya lo dice. */
body.chapter-page>.ch-temas p{display:none;
  margin:0;padding:8px 32px 0;background:var(--h-paper);color:var(--lc-ink2);font-size:15.5px;line-height:1.5}
body.chapter-page>.ch-temas .gramatica{
  margin:0;padding:20px 32px 32px;background:var(--h-paper);border-radius:0 0 var(--h-r) var(--h-r);
  display:grid;gap:10px;list-style:none}
body.chapter-page>.ch-temas .gramatica li{
  display:block;margin:0;padding:0;border:0;position:relative}
body.chapter-page>.ch-temas .gramatica a{
  display:flex;align-items:center;gap:14px;padding:16px 52px 16px 20px;min-height:56px;box-sizing:border-box;
  background:var(--lc-surface);border-radius:999px;
  text-decoration:none;color:var(--lc-ink);transition:transform .15s,box-shadow .15s}
body.chapter-page>.ch-temas .gramatica a b{font-family:var(--lc-serif);font-weight:500;font-size:19px;line-height:1.3}
body.chapter-page>.ch-temas .gramatica a::after{
  content:"→";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  font-size:18px;color:var(--lc-muted);transition:transform .15s,color .15s}
body.chapter-page>.ch-temas .gramatica a:hover{transform:translateY(-1px)}
body.chapter-page>.ch-temas .gramatica a:hover::after{color:var(--lc-ink);transform:translate(3px,-50%)}
body.chapter-page>.ch-temas .gramatica a:focus-visible{outline:2px solid var(--lc-ink);outline-offset:2px}
/* La etiqueta de nivel (C1, C2) entra en la tarjeta como píldora, antes de la flecha. */
body.chapter-page>.ch-temas .gramatica li:has(.gram-leccion) a{padding-right:110px}
body.chapter-page>.ch-temas .gramatica .gram-leccion{
  position:absolute;right:50px;top:50%;transform:translateY(-50%);pointer-events:none;
  font-family:var(--lc-sans);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:none;
  padding:4px 10px;border-radius:999px;background:var(--lc-ink);color:var(--lc-bg);text-align:center}
/* El aviso del libro: tarjeta discreta, una sola, sin panel. */
body.chapter-page>.libro-leccion{margin-top:8px;margin-bottom:40px}
body.chapter-page>.libro-leccion p{
  margin:0;padding:0 32px;font-size:14.5px;line-height:1.6;color:var(--lc-muted)}
body.chapter-page>.libro-leccion p:first-child{padding-top:8px}
body.chapter-page>.libro-leccion a{color:var(--lc-ink2)}
body.chapter-page>.libro-leccion a:hover{color:var(--lc-ink)}
body.chapter-page>.libro-leccion strong{color:var(--lc-ink)}
body.chapter-page>main#chapterRoot.lc-on+.ch-temas{margin-top:8px}
@media (max-width:560px){
  body.chapter-page>.ch-temas,
  body.chapter-page>.libro-leccion{padding:0 16px}
  body.chapter-page>.ch-temas h2{padding:22px 18px 0;border-radius:16px 16px 0 0}
  body.chapter-page>.ch-temas p{padding:8px 18px 0}
  body.chapter-page>.ch-temas .gramatica{padding:16px 18px 20px;border-radius:0 0 16px 16px}
  body.chapter-page>.ch-temas .gramatica a b{font-size:17px}
  body.chapter-page>.libro-leccion p{padding:0 4px}
}