/* Layout: una columna de lectura (~68ch) con barra de progreso fija; cada palanca = vídeo → teoría → comparación B2/C1 → minicuestionario */
:root{
  --bg:#f3f6f5; --surface:#ffffff; --ink:#14201e; --muted:#5a6b68; --line:#d5dfdc;
  --teal:#0e6b62; --teal-soft:#dcefeb; --marker:#ffe066; --ok:#1d7a3e; --ok-soft:#e1f3e6; --bad:#b4372b; --bad-soft:#fbe6e3;
  --f-display:"Bricolage Grotesque", "Segoe UI", system-ui, sans-serif;
  --f-body:"Atkinson Hyperlegible", "Segoe UI", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0f1716; --surface:#16211f; --ink:#e4ecea; --muted:#9db0ac; --line:#2a3a37;
  --teal:#4cc3b4; --teal-soft:#173430; --marker:#d9b72e; --ok:#5fd18a; --ok-soft:#163323; --bad:#ff8b7d; --bad-soft:#3a1b18; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0f1716; --surface:#16211f; --ink:#e4ecea; --muted:#9db0ac; --line:#2a3a37;
  --teal:#4cc3b4; --teal-soft:#173430; --marker:#d9b72e; --ok:#5fd18a; --ok-soft:#163323; --bad:#ff8b7d; --bad-soft:#3a1b18; color-scheme:dark}

*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font:400 1.06rem/1.62 var(--f-body);margin:0}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--surface)}
.wrap{max-width:46rem;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:0 4rem}
a{color:var(--teal)}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:4px}

/* progreso */
.progress{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--surface);border-bottom:1px solid var(--line)}
.progress .in{max-width:46rem;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:.6rem;display:flex;align-items:center;gap:.9rem}
.steps{display:flex;gap:6px;flex:1}
.steps a{flex:1;height:8px;border-radius:4px;background:var(--line);display:block}
.steps a.done{background:var(--ok)}
.progress small{font:500 .78rem var(--f-mono);color:var(--muted);white-space:nowrap}

header.hero{padding-block:2.2rem 1.4rem;display:grid;gap:.8rem}
.eyebrow{font:700 .75rem var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--teal)}
h1{font:800 clamp(2rem,6vw,3.1rem)/1.05 var(--f-display);margin:0;text-wrap:balance;letter-spacing:-.01em}
h1 mark{background:linear-gradient(transparent 58%,var(--marker) 58%);color:inherit;padding:0 .1em}
.lede{color:var(--muted);margin:0;max-width:60ch}
.meta{display:flex;flex-wrap:wrap;gap:.5rem;font:500 .8rem var(--f-mono);color:var(--muted)}
.meta span{border:1px solid var(--line);border-radius:99px;padding:.15rem .6rem;background:var(--surface)}

.video{display:flex;gap:1rem;align-items:center;background:var(--ink);color:var(--bg);border-radius:12px;padding:1rem 1.1rem;text-decoration:none}
.video .play{flex:none;width:3rem;height:3rem;border-radius:50%;background:var(--marker);display:grid;place-items:center}
.video .play::before{content:"";border-left:14px solid #14201e;border-top:9px solid transparent;border-bottom:9px solid transparent;margin-left:4px}
.video b{font:700 1rem var(--f-display);display:block}
.video small{font:500 .78rem var(--f-mono);opacity:.8}
.video:hover .play{transform:scale(1.06)}
.video .play{transition:transform .15s}

section.lever{border-top:1px solid var(--line);padding-block:2.2rem 1rem;display:grid;gap:1rem;scroll-margin-top:4rem}
.lever h2{font:700 1.7rem/1.15 var(--f-display);margin:0;display:flex;gap:.7rem;align-items:baseline;text-wrap:balance}
.lever h2 .n{font:500 .95rem var(--f-mono);color:var(--teal);flex:none}
.lever p{margin:0;max-width:65ch}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.pair div{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:.8rem .9rem;min-width:0}
.pair .lvl{font:500 .72rem var(--f-mono);letter-spacing:.06em;color:var(--muted);display:block;margin-bottom:.25rem}
.pair .c1{border-color:var(--teal);background:var(--teal-soft)}
.pair .c1 .lvl{color:var(--teal)}
.pair q{quotes:none;font-style:italic}
.pair em{font-style:normal;background:linear-gradient(transparent 60%,var(--marker) 60%)}
ul.forms{margin:0;padding-left:1.2rem;display:grid;gap:.2rem}
ul.forms code{font:500 .9rem var(--f-mono)}

/* cuestionario */
.quiz{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:1.1rem;display:grid;gap:1rem}
.quiz header{display:flex;justify-content:space-between;align-items:center;gap:.5rem;flex-wrap:wrap}
.quiz h3{font:700 1.05rem var(--f-display);margin:0}
.badge{font:500 .72rem var(--f-mono);border-radius:99px;padding:.15rem .6rem;border:1px solid var(--line);color:var(--muted)}
.badge.pass{background:var(--ok-soft);color:var(--ok);border-color:var(--ok)}
fieldset{border:0;margin:0;padding:0;display:grid;gap:.4rem}
legend{font-weight:700;margin-bottom:.35rem;padding:0}
legend .qn{font:500 .8rem var(--f-mono);color:var(--muted);margin-right:.4rem}
label.opt{display:flex;gap:.6rem;align-items:flex-start;border:1px solid var(--line);border-radius:8px;padding:.5rem .7rem;cursor:pointer}
label.opt:hover{border-color:var(--teal)}
label.opt input{margin-top:.3rem;accent-color:var(--teal)}
label.opt.right{border-color:var(--ok);background:var(--ok-soft)}
label.opt.wrong{border-color:var(--bad);background:var(--bad-soft)}
.why{font-size:.92rem;color:var(--muted);margin:0;padding-left:.2rem}
.why[hidden]{display:none}
.actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap}
button{font:700 .95rem var(--f-body);border-radius:8px;padding:.6rem 1.1rem;border:1px solid var(--teal);background:var(--teal);color:var(--surface);cursor:pointer}
button.ghost{background:transparent;color:var(--teal)}
button:disabled{opacity:.5;cursor:not-allowed}
.result{font-weight:700}
.result.ok{color:var(--ok)} .result.ko{color:var(--bad)}

.apply{background:var(--teal-soft);border-radius:12px;padding:1.2rem;display:grid;gap:.8rem}
.apply h2{font:800 1.6rem var(--f-display);margin:0}
.apply blockquote{margin:0;background:var(--surface);border-radius:8px;padding:.9rem 1rem;font-style:italic;border:1px solid var(--line)}
.apply blockquote b{font-style:normal;background:linear-gradient(transparent 60%,var(--marker) 60%);font-weight:400}
.cta{display:flex;gap:.6rem;flex-wrap:wrap}
.cta a{font:700 .95rem var(--f-body);text-decoration:none;border-radius:8px;padding:.65rem 1.1rem;border:1px solid var(--teal)}
.cta a.primary{background:var(--teal);color:var(--surface)}

.shorts{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem}
.shorts a{background:var(--ink);color:var(--bg);border-radius:10px;padding:.8rem;aspect-ratio:9/12;max-width:100%;display:flex;flex-direction:column;justify-content:space-between;text-decoration:none;min-width:0}
.shorts small{font:500 .7rem var(--f-mono);opacity:.75}
.shorts b{font:700 .95rem/1.2 var(--f-display)}
h2.plain{font:700 1.3rem var(--f-display);margin:0}
.done-card{border:2px dashed var(--line);border-radius:12px;padding:1rem 1.1rem;color:var(--muted)}
.done-card.ok{border:2px solid var(--ok);background:var(--ok-soft);color:var(--ink)}
footer{margin-top:2.5rem;font-size:.85rem;color:var(--muted)}
@media (max-width:560px){.pair{grid-template-columns:1fr}.shorts{grid-template-columns:1fr 1fr}}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* --- añadidos del generador --- */
.topbar{background:var(--surface);border-bottom:1px solid var(--line)}
.topbar .in{max-width:46rem;margin:0 auto;padding:.6rem max(16px,env(safe-area-inset-right,0px)) .6rem max(16px,env(safe-area-inset-left,0px));display:flex;gap:1rem;align-items:center;flex-wrap:wrap;font:700 .9rem var(--f-body)}
.topbar a{text-decoration:none}
.topbar .sp{flex:1}
nav.crumbs{font:500 .78rem var(--f-mono);color:var(--muted);padding-top:1rem}
nav.crumbs a{color:var(--muted)}
.player{position:relative;aspect-ratio:16/9;background:#000;border-radius:12px;overflow:hidden}
.player button.lite{all:unset;cursor:pointer;position:absolute;inset:0;display:block}
.player img,.player iframe{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.player .play{position:absolute;left:50%;top:50%;width:4.2rem;height:4.2rem;margin:-2.1rem 0 0 -2.1rem;border-radius:50%;background:var(--marker);display:grid;place-items:center}
.player .play::before{content:"";border-left:18px solid #14201e;border-top:11px solid transparent;border-bottom:11px solid transparent;margin-left:5px}
.player button.lite:focus-visible{outline:3px solid var(--teal);outline-offset:3px}
button.seek{display:inline-flex;gap:.5rem;align-items:center;justify-self:start}
.pn{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin-top:2rem}
.pn a{border:1px solid var(--line);border-radius:10px;padding:.8rem 1rem;text-decoration:none;background:var(--surface);display:grid;gap:.15rem;min-width:0}
.pn a small{font:500 .72rem var(--f-mono);color:var(--muted)}
.pn a:last-child{text-align:right}
.idx-group{display:grid;gap:.5rem;margin-top:1.6rem}
.idx-group h2{font:700 1.3rem var(--f-display);margin:0}
.lessons{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.lessons a{display:flex;gap:.8rem;align-items:baseline;border:1px solid var(--line);border-radius:10px;padding:.7rem .9rem;background:var(--surface);text-decoration:none;color:var(--ink)}
.lessons a:hover{border-color:var(--teal)}
.lessons .code{font:500 .8rem var(--f-mono);color:var(--teal);flex:none;min-width:3.2rem}
.lessons .lvl{margin-left:auto;font:500 .75rem var(--f-mono);color:var(--muted);flex:none}
.cards{display:grid;gap:.7rem;margin-top:1.4rem}
.cards a{border:1px solid var(--line);border-radius:12px;padding:1rem 1.1rem;background:var(--surface);text-decoration:none;color:var(--ink);display:grid;gap:.2rem}
.cards a:hover{border-color:var(--teal)}
.cards b{font:700 1.2rem var(--f-display)}
.cards small{font:500 .78rem var(--f-mono);color:var(--muted)}
.vacio{color:var(--muted)}

a.short{display:flex;gap:.9rem;align-items:center;text-decoration:none;color:var(--ink);border:1px solid var(--line);border-radius:12px;background:var(--surface);padding:.6rem;justify-self:start;max-width:100%}
a.short img{width:72px;aspect-ratio:9/16;object-fit:cover;border-radius:8px;flex:none;background:var(--ink)}
a.short small{display:block;font:500 .72rem var(--f-mono);color:var(--teal)}
a.short b{font:700 1rem/1.25 var(--f-display)}
a.short:hover{border-color:var(--teal)}

.gate{margin:.2rem 0 .6rem;padding:.9rem 1rem;border:1px solid var(--line,#d5dbe5);border-radius:10px;background:rgba(37,99,235,.06)}
.gate p{margin:.3rem 0 .7rem;font-size:.92rem;line-height:1.45}
.gate[hidden]{display:none}.gmsg{font-size:.86rem;margin-top:.4rem}
form.quiz.locked fieldset,form.quiz.locked button[type=submit],form.quiz.locked .result{display:none}