:root{--acc:#1F6FA3;--acc-soft:#E1ECF4;--ink:#14171C;--mut:#555A62;--line:#D9D4C7;--bg:#F4F1EA;--warn:#B42318;--warn-soft:#FBEDEA;--low:#C2410C}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"IBM Plex Sans",Arial,sans-serif;font-size:16px;line-height:1.5}
a{color:var(--acc)}
.mono,.tag{font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--mut)}
.tag.acc{color:var(--acc)}
h1,h2,h3{font-family:"Fraunces",Georgia,serif;font-weight:500;margin:0}
h1{font-size:clamp(32px,6vw,52px);line-height:1.05}
h2{font-size:clamp(24px,4vw,32px);margin-bottom:12px}
h3{font-size:20px}
.top{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;max-width:860px;margin:0 auto}
.barra{height:4px;background:var(--line)}
.barra div{height:4px;background:var(--acc);width:0;transition:width .3s}
main{max-width:860px;margin:0 auto;padding:32px 16px 48px}
.pie{text-align:center;font-size:13px;color:var(--mut);padding:24px 16px 32px}
.cargando{color:var(--mut)}
.lead{font-size:18px;color:var(--mut);margin:12px 0 24px;max-width:640px}
.tarjeta{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px;margin-bottom:16px}
.pregunta{margin-bottom:26px}
.pregunta .enunciado{font-weight:600;margin-bottom:10px}
.pregunta .enunciado .num{font-family:"IBM Plex Mono",monospace;color:var(--mut);font-weight:400;font-size:13px;margin-right:6px}
.opciones{display:grid;gap:8px}
.opciones.pills{display:flex;flex-wrap:wrap}
.op{display:flex;gap:10px;align-items:flex-start;text-align:left;width:100%;background:#fff;border:1px solid var(--line);border-radius:8px;padding:11px 14px;font:inherit;font-size:15px;color:var(--ink);cursor:pointer;transition:border-color .15s,background .15s}
.pills .op{width:auto;padding:8px 14px}
.op:hover{border-color:var(--acc)}
.op[aria-pressed="true"]{border-color:var(--acc);background:var(--acc-soft);font-weight:600}
.op .l{font-family:"IBM Plex Mono",monospace;color:var(--mut);font-size:13px;padding-top:2px}
.op.ns{border-style:dashed;color:var(--mut)}
.pendiente .enunciado{color:var(--warn)}
.acciones{display:flex;justify-content:space-between;gap:12px;margin-top:28px;flex-wrap:wrap}
.btn{font:inherit;font-weight:600;border-radius:999px;padding:12px 26px;cursor:pointer;border:1px solid var(--acc);background:var(--acc);color:#fff}
.btn.sec{background:transparent;color:var(--acc)}
.btn:disabled{opacity:.5;cursor:default}
.aviso{color:var(--warn);font-size:14px;margin-top:10px;min-height:20px}
.modos{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.modo{text-align:left;cursor:pointer;font:inherit;background:#fff;border:1px solid var(--line);border-radius:10px;padding:18px}
.modo[aria-pressed="true"]{border-color:var(--acc);box-shadow:0 0 0 2px var(--acc) inset}
.modo b{display:block;font-size:17px}
.modo span{color:var(--mut);font-size:14px}
label.campo{display:block;margin-bottom:14px;font-weight:600;font-size:14px}
label.campo input,label.campo textarea{display:block;width:100%;margin-top:6px;font:inherit;font-weight:400;padding:10px 12px;border:1px solid var(--line);border-radius:8px;background:#fff}
.check{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--mut)}
/* Resultado */
.res-hero{display:grid;grid-template-columns:1.3fr 1fr;gap:24px;align-items:center}
.nivel-num{font-family:"Fraunces",Georgia,serif;font-size:88px;line-height:.9;color:var(--acc)}
.niveles{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:20px}
.niveles div{border-top:3px solid var(--line);padding-top:6px;font-size:12px;color:var(--mut)}
.niveles div b{display:block;color:var(--ink);font-size:16px}
.niveles div.on{border-color:var(--acc)}
.niveles div.on span{color:var(--acc);font-weight:700}
.brecha{background:var(--ink);color:#F4F1EA;border-radius:10px;padding:20px;display:grid;grid-template-columns:auto auto 1fr;gap:24px;align-items:center;margin-top:20px}
.brecha .n{font-family:"Fraunces",Georgia,serif;font-size:40px;line-height:1}
.brecha span{font-size:12px;color:#A8ABB0;display:block}
.brecha p{margin:0;color:#C9CBCF;font-size:14px}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.caja{border:1px solid var(--line);border-radius:10px;padding:18px;background:#fff}
.caja.warn{background:var(--warn-soft);border-color:#F0C8C0}
.caja.ok{background:var(--acc-soft);border-color:var(--acc-soft)}
.caja ul{margin:8px 0 0;padding-left:20px}
.caja p{margin:8px 0 0}
table.piezas{width:100%;border-collapse:collapse;font-size:14px}
table.piezas td{padding:9px 6px;border-bottom:1px solid var(--line);vertical-align:middle}
.r{text-align:right;font-weight:700}
.bar{height:8px;border-radius:4px;background:#ECE8DF;width:90px;overflow:hidden}
.bar div{height:8px;border-radius:4px}
.b0{color:var(--low)}.b1{color:var(--mut)}.b2{color:var(--acc)}
.alerta,.lectura{display:flex;gap:10px;padding:12px 14px;border-radius:0 8px 8px 0;margin-bottom:8px}
.alerta{border-left:3px solid var(--warn);background:var(--warn-soft)}
.lectura{border-left:3px solid var(--acc);background:#fff}
.alerta .mono{color:var(--warn)}.lectura .mono{color:var(--acc)}
.alerta p,.lectura p{margin:2px 0 0;font-size:14px;color:#3A3E45}
.rejilla{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.palanca{border:1px solid var(--line);border-radius:10px;padding:18px;margin-bottom:14px;background:#fff}
.palanca .cab{display:flex;gap:12px;align-items:center;margin-bottom:10px}
.palanca .n{width:38px;height:38px;border-radius:50%;background:var(--acc);color:#fff;display:flex;align-items:center;justify-content:center;font-family:Georgia,serif;font-size:20px;flex:none}
.cta{background:var(--acc);color:#fff;border-radius:12px;padding:28px;margin-top:24px}
.cta h2{color:#fff}
.cta .btn{background:#fff;color:var(--acc);border-color:#fff;text-decoration:none;display:inline-block;margin-top:12px}
section.bloque{margin-top:40px}
@media (max-width:640px){
  .modos,.dos,.rejilla,.res-hero{grid-template-columns:1fr}
  .brecha{grid-template-columns:1fr 1fr}.brecha p{grid-column:1/-1}
  .niveles div span{display:none}
  .bar{width:50px}
  .porque{display:none}
}
@media print{
  body{background:#fff;font-size:12px}
  .top,.barra,.pie,.no-print{display:none!important}
  main{padding:0;max-width:none}
  section.bloque{break-inside:avoid-page}
  .cta{break-inside:avoid}
}