[hidden]{display:none!important}
:root{
  --papel:#f6f4ef;--hoja:#fffdf9;--papel-2:#ece8df;--tinta:#1d1b22;--tinta-2:#4a4652;--tinta-3:#77727f;--linea:#ddd7cc;
  --morado:#5b3a8c;--morado-suave:#efe8f7;--morado-tinta:#4a2d75;--ambar:#9a5b12;--ambar-suave:#fbf0e0;--verde:#2f6b4f;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;--sans:"IBM Plex Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  color-scheme:light}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --papel:#141318;--hoja:#1b1a20;--papel-2:#25232b;--tinta:#ecE9f2;--tinta-2:#c4bfcc;--tinta-3:#948f9c;--linea:#34313b;
  --morado:#b79be0;--morado-suave:#2a2236;--morado-tinta:#d4c2f0;--ambar:#e0a35c;--ambar-suave:#2e2418;--verde:#7cc4a0;color-scheme:dark}}
:root[data-theme="dark"]{
  --papel:#141318;--hoja:#1b1a20;--papel-2:#25232b;--tinta:#ece9f2;--tinta-2:#c4bfcc;--tinta-3:#948f9c;--linea:#34313b;
  --morado:#b79be0;--morado-suave:#2a2236;--morado-tinta:#d4c2f0;--ambar:#e0a35c;--ambar-suave:#2e2418;--verde:#7cc4a0;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--papel);color:var(--tinta);font:16px/1.6 var(--sans);-webkit-text-size-adjust:100%}
a{color:var(--morado)}
.cab{position:sticky;top:0;z-index:10;background:var(--papel);border-bottom:1px solid var(--linea);padding-top:env(safe-area-inset-top,0px)}
.cab-in{max-width:760px;margin:0 auto;display:flex;flex-wrap:wrap;gap:6px 16px;align-items:center;justify-content:space-between;padding-block:10px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.marca{display:flex;flex-direction:column;text-decoration:none;color:var(--tinta)}
.eyebrow{font:500 .68rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--tinta-3)}
.nombre{font:600 1.25rem/1.2 var(--serif)}
.acciones{display:flex;gap:4px;flex-wrap:wrap}
.enl{font:500 .85rem var(--sans);color:var(--tinta-2);background:none;border:0;padding:6px 10px;border-radius:6px;cursor:pointer;text-decoration:none}
.enl:hover{background:var(--papel-2);color:var(--tinta)}
.hoja{max-width:760px;margin:0 auto;padding-block:24px 96px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));display:flex;flex-direction:column;gap:28px}
h1{font:600 1.9rem/1.2 var(--serif);margin:0;text-wrap:balance}
h2{font:600 1.3rem/1.3 var(--serif);margin:0;text-wrap:balance}
h3{font:600 .78rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--tinta-3);margin:0}
p{margin:0}
.lead{font:400 1.08rem/1.6 var(--serif);color:var(--tinta-2);max-width:62ch}
.pila{display:flex;flex-direction:column;gap:12px;min-width:0}
.seccion{display:flex;flex-direction:column;gap:14px;min-width:0}
.paso-n{font:500 .72rem var(--mono);color:var(--morado);letter-spacing:.06em;text-transform:uppercase}

/* mapa */
.mapa{background:var(--hoja);border:1px solid var(--linea);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px}
.mapa svg{width:100%;height:auto;max-width:100%;display:block}
.mapa .nodo circle{fill:var(--hoja);stroke:var(--tinta-2);stroke-width:1.5}
.mapa .nodo.h circle{fill:var(--morado-suave);stroke:var(--morado);stroke-width:2}
.mapa .nodo text.l{font:600 26px var(--serif);fill:var(--tinta);text-anchor:middle;dominant-baseline:central}
.mapa .nodo text.d{font:500 11px var(--mono);fill:var(--tinta-3);text-anchor:middle;letter-spacing:.06em;text-transform:uppercase}
.mapa .arista{stroke:var(--linea);stroke-width:1.5}
.mapa .sistema{fill:none;stroke:var(--morado);stroke-width:1.2;stroke-dasharray:4 5;opacity:.7}
.mapa .sist-t{font:500 11px var(--mono);fill:var(--morado);letter-spacing:.08em}
.mapa .chapa{cursor:pointer}
.mapa .chapa circle{fill:var(--hoja);stroke:var(--morado);stroke-width:1.5}
.mapa .chapa.hecho circle{fill:var(--morado)}
.mapa .chapa text{font:600 13px var(--mono);fill:var(--morado);text-anchor:middle;dominant-baseline:central;pointer-events:none}
.mapa .chapa.hecho text{fill:var(--hoja)}
.mapa .chapa:hover circle,.mapa .chapa:focus circle{stroke-width:3}
.mapa .chapa:focus{outline:none}
.leyenda{font-size:.82rem;color:var(--tinta-3);display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.lista{display:flex;flex-direction:column;border-top:1px solid var(--linea)}
.fila{display:grid;grid-template-columns:2.2rem 1fr auto;gap:4px 12px;align-items:baseline;padding:14px 4px;border-bottom:1px solid var(--linea);text-decoration:none;color:var(--tinta)}
.fila:hover{background:var(--hoja)}
.fila .num{font:600 .95rem var(--mono);color:var(--morado)}
.fila .t{font:600 1.05rem/1.35 var(--serif);min-width:0}
.fila .m{font:.78rem var(--mono);color:var(--tinta-3);white-space:nowrap}
.fila .sub{grid-column:2/4;font-size:.86rem;color:var(--tinta-2)}
.chips{display:inline-flex;gap:4px;flex-wrap:wrap}
.chip{font:600 .7rem var(--mono);border:1px solid var(--linea);border-radius:4px;padding:0 5px;color:var(--tinta-2);background:var(--hoja)}
.estado{font:.74rem var(--mono);color:var(--verde)}
.caja{background:var(--hoja);border:1px solid var(--linea);border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.caja.morada{border-color:var(--morado);border-width:1.5px}
.botones{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
button.prim,a.prim{font:600 .95rem var(--sans);padding:11px 18px;border:0;border-radius:8px;background:var(--morado);color:var(--hoja);cursor:pointer;text-decoration:none;display:inline-block}
button.sec,a.sec{font:500 .9rem var(--sans);padding:10px 16px;border:1px solid var(--linea);border-radius:8px;background:var(--hoja);color:var(--tinta);cursor:pointer;text-decoration:none;display:inline-block}
button:disabled{opacity:.45;cursor:not-allowed}

/* concepto */
.migas{font:.82rem var(--mono);color:var(--tinta-3);display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.migas a{color:var(--tinta-3)}
.contexto{display:grid;gap:10px}
.contexto p{max-width:64ch}
.contexto .k{font:600 .72rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--tinta-3);display:block;margin-bottom:2px}
.fijate ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;counter-reset:f}
.fijate li{display:grid;grid-template-columns:2.4rem 1fr;gap:8px;align-items:baseline}
.fijate li b{font:600 .85rem var(--mono);color:var(--morado)}
.fijate li span{font:400 1.02rem/1.55 var(--serif)}
.video{display:grid;gap:8px}
.ojo{background:var(--ambar-suave);border-left:3px solid var(--ambar);padding:10px 14px;border-radius:0 8px 8px 0;font-size:.93rem}
.ojo b{color:var(--ambar)}
.texto{display:flex;flex-direction:column;gap:18px;background:var(--hoja);border:1px solid var(--linea);border-radius:12px;padding:22px 18px}
.enunciado{display:grid;grid-template-columns:5.6rem 1fr;gap:12px;align-items:baseline}
.pn{font:500 .78rem var(--mono);color:var(--morado);text-align:right;padding-top:2px}
.pn small{display:block;color:var(--tinta-3);font-size:.68rem;font-weight:400}
.enunciado p{font:400 1.08rem/1.7 var(--serif);max-width:66ch;min-width:0;overflow-wrap:break-word}
.pregunta{display:flex;flex-direction:column;gap:12px;border-top:1px solid var(--linea);padding-top:18px}
.tipo{font:600 .7rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--morado)}
.q{font:600 1.1rem/1.5 var(--serif)}
.mide{font-size:.82rem;color:var(--tinta-3)}
textarea{font:400 1rem/1.55 var(--sans);width:100%;min-height:140px;padding:12px;border:1px solid var(--linea);border-radius:8px;background:var(--hoja);color:var(--tinta);resize:vertical}
textarea:focus{outline:2px solid var(--morado);outline-offset:1px}
.mia{background:var(--papel-2);padding:12px 14px;border-radius:8px;white-space:pre-wrap;font-size:.96rem}
.engelbart{background:var(--morado-suave);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:12px}
.engelbart > p{font:400 1.02rem/1.6 var(--serif)}
.cita{margin:0;display:grid;grid-template-columns:5.6rem 1fr;gap:12px;align-items:baseline}
.cita q{font:italic 400 1rem/1.55 var(--serif);color:var(--morado-tinta);quotes:"«" "»"}
.criterios{display:flex;flex-direction:column;gap:10px}
.criterio{display:flex;flex-direction:column;gap:6px}
.criterio p{font-size:.95rem}
.criterio p b{font:600 .78rem var(--mono);color:var(--morado);margin-right:6px}
.tres{display:flex;gap:6px;flex-wrap:wrap}
.tres button{font:500 .85rem var(--sans);padding:6px 12px;border:1px solid var(--linea);border-radius:999px;background:var(--hoja);color:var(--tinta-2);cursor:pointer}
.tres button[aria-pressed="true"]{background:var(--morado);border-color:var(--morado);color:var(--hoja)}
.claude{border-left:3px solid var(--verde);padding:8px 12px;font-size:.93rem;background:var(--hoja);border-radius:0 8px 8px 0}
.claude b{color:var(--verde)}
.meta{font:.75rem var(--mono);color:var(--tinta-3)}
#tip{position:fixed;left:50%;bottom:max(16px,env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--tinta);color:var(--papel);padding:9px 14px;border-radius:8px;font-size:.9rem;display:none;z-index:30;max-width:calc(100% - 32px)}
@media (max-width:520px){
  h1{font-size:1.55rem}
  .enunciado,.cita{grid-template-columns:1fr;gap:2px}
  .pn{text-align:left}
  .pn small{display:inline;margin-left:6px}
  .texto{padding:18px 14px}
  .fila{grid-template-columns:1.8rem 1fr}
  .fila .m{grid-column:2}
}