*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  :root {
    --paper:#f7f8fa; --ink:#14181f; --muted:#6b7585; --navy:#27334F;
    --navy-2:#36476E; --steel:#455A8C; --green:#5C7A57; --rust:#701d14;
    --clay:#90303a; --gold:#8a5c0a; --white:#FFFFFF;
    --rule:rgba(20,24,31,0.14); --rule-soft:rgba(20,24,31,0.07);
    --sans:'Inter', system-ui, -apple-system, sans-serif;
    --serif:'Source Serif 4', Georgia, serif;
    --mono:'IBM Plex Mono', ui-monospace, SFMono-Regular, monospace;
    --shadow:0 1px 2px rgba(39,51,79,.05), 0 8px 24px -18px rgba(39,51,79,.35);
  }
  html { scroll-behavior:smooth; scroll-padding-top:74px; }
  body { font-family:var(--sans); background:var(--paper); color:var(--ink);
         font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased; }

  /* ---------- barra superior ---------- */
  .topbar { position:sticky; top:0; z-index:50; background:rgba(247,248,250,.93);
    backdrop-filter:saturate(140%) blur(10px); border-bottom:1px solid var(--rule); }
  .topbar .in { max-width:1180px; margin:0 auto; padding:.6rem 1.5rem;
    display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
  .crumb { font-family:var(--mono); font-size:.63rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--muted); display:flex; align-items:center;
    gap:.45rem; flex-wrap:wrap; }
  .crumb a { color:var(--navy); text-decoration:none; border-bottom:1px solid transparent; }
  .crumb a:hover { border-bottom-color:var(--navy); }
  .crumb .sep { opacity:.45; }
  .crumb b { color:var(--rust); font-weight:600; }
  .spacer { flex:1 1 auto; }
  .btn { font-family:var(--mono); font-size:.62rem; letter-spacing:.12em;
    text-transform:uppercase; color:var(--navy); background:transparent;
    border:1px solid var(--rule); border-radius:999px; padding:.34rem .72rem;
    cursor:pointer; text-decoration:none; white-space:nowrap; transition:.15s; }
  .btn:hover { background:var(--navy); color:var(--paper); border-color:var(--navy); }
  .btn[disabled] { opacity:.32; pointer-events:none; }

  /* ---------- layout ---------- */
  .wrap { max-width:1180px; margin:0 auto; padding:2.4rem 1.5rem 4rem; }
  .cols { display:grid; grid-template-columns:186px minmax(0,1fr); gap:2.4rem;
          align-items:start; }
  .rail { position:sticky; top:86px; }
  .rail .eyebrow { margin-bottom:.6rem; }
  .rail ol { list-style:none; counter-reset:r; }
  .rail li { counter-increment:r; }
  .rail a { display:flex; gap:.5rem; align-items:baseline; text-decoration:none;
    color:var(--muted); font-size:.76rem; line-height:1.35; padding:.3rem 0 .3rem .55rem;
    border-left:2px solid var(--rule); transition:.15s; }
  .rail a::before { content:counter(r,decimal-leading-zero); font-family:var(--mono);
    font-size:.58rem; opacity:.6; }
  .rail a:hover, .rail a.on { color:var(--rust); border-left-color:var(--rust); }
  .rail a.on { font-weight:600; }

  /* ---------- portada ---------- */
  .eyebrow { font-family:var(--mono); font-size:.63rem; font-weight:500;
    letter-spacing:.18em; text-transform:uppercase; color:var(--muted); }
  h1 { font-family:var(--serif); font-weight:400; letter-spacing:-.02em; line-height:1.06;
    color:var(--navy); font-size:clamp(2rem,4vw + .4rem,3.1rem); margin:.45rem 0 .3rem; }
  .sub { font-family:var(--serif); font-style:italic; font-size:1.06rem;
    color:var(--muted); max-width:62ch; }
  .chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-top:1rem; }
  .chip { font-family:var(--mono); font-size:.6rem; letter-spacing:.09em;
    text-transform:uppercase; color:var(--navy); background:rgba(69,90,140,.16);
    border:1px solid rgba(69,90,140,.4); border-radius:4px; padding:.26rem .55rem; }
  .chip.g { color:#1a6b42; background:rgba(92,122,87,.14); border-color:rgba(92,122,87,.42); }
  .chip.r { color:var(--rust); background:rgba(112,29,20,.09); border-color:rgba(112,29,20,.32); }
  .chip.gold { color:#8a5c0a; background:rgba(138,92,10,.13); border-color:rgba(138,92,10,.4); }

  /* ---------- ficha rápida ---------- */
  .ficha { background:var(--white); border:1px solid var(--rule); border-radius:8px;
    box-shadow:var(--shadow); margin:1.8rem 0 2.2rem; overflow:hidden; }
  .ficha > .hd { background:var(--navy); color:var(--paper); padding:.62rem 1.1rem;
    font-family:var(--mono); font-size:.63rem; letter-spacing:.16em; text-transform:uppercase;
    display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }
  .ficha > .hd span:last-child { color:rgba(247,248,250,.66); }
  .ficha .bd { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }
  .ficha .cell { padding:.85rem 1.1rem; border-right:1px solid var(--rule-soft);
    border-bottom:1px solid var(--rule-soft); }
  .ficha .cell dt { font-family:var(--mono); font-size:.57rem; letter-spacing:.13em;
    text-transform:uppercase; color:var(--clay); margin-bottom:.28rem; }
  .ficha .cell dd { font-size:.83rem; line-height:1.45; }

  /* ---------- secciones ---------- */
  details.sec { background:var(--white); border:1px solid var(--rule); border-radius:8px;
    margin-bottom:.85rem; box-shadow:var(--shadow); overflow:hidden; }
  details.sec > summary { list-style:none; cursor:pointer; padding:.95rem 1.15rem;
    display:flex; align-items:center; gap:.8rem; user-select:none; transition:.15s; }
  details.sec > summary::-webkit-details-marker { display:none; }
  details.sec > summary:hover { background:rgba(69,90,140,.06); }
  details.sec > summary .num { font-family:var(--mono); font-size:.62rem; letter-spacing:.1em;
    color:var(--clay); border:1px solid rgba(144,48,58,.35); border-radius:4px;
    padding:.2rem .4rem; flex:none; }
  details.sec > summary .stitle { font-family:var(--sans); font-weight:600; font-size:.97rem;
    color:var(--rust); letter-spacing:-.005em; }
  details.sec > summary .hint { font-family:var(--serif); font-style:italic;
    font-size:.85rem; color:var(--muted); flex:1 1 auto; }
  details.sec > summary .caret { flex:none; width:12px; height:12px; border-right:1.6px solid var(--steel);
    border-bottom:1.6px solid var(--steel); transform:rotate(45deg) translate(-2px,-2px);
    transition:transform .2s; }
  details.sec[open] > summary .caret { transform:rotate(-135deg) translate(-3px,-3px); }
  details.sec[open] > summary { border-bottom:1px solid var(--rule); }
  details.sec > .body { padding:1.25rem 1.35rem 1.5rem; }
  details.sec > .body > * + * { margin-top:.85rem; }
  @media (max-width:760px){ details.sec > summary .hint { display:none; } }

  /* ---------- tipografía interna ---------- */
  .body p { font-size:.9rem; }
  .body h4 { font-family:var(--sans); font-size:.85rem; font-weight:600; color:var(--navy);
    letter-spacing:-.005em; margin-top:1.35rem; padding-bottom:.3rem;
    border-bottom:1px solid var(--rule-soft); }
  .body h5 { font-family:var(--mono); font-size:.62rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--clay); margin-top:1.1rem; }
  .body ul, .body ol { padding-left:1.15rem; }
  .body li { font-size:.88rem; margin-bottom:.3rem; }
  .body ul { list-style:none; padding-left:.95rem; }
  .body ul > li { position:relative; padding-left:.85rem; }
  .body ul > li::before { content:''; position:absolute; left:0; top:.62em; width:4px; height:4px;
    border-radius:50%; background:var(--clay); opacity:.6; }
  .body ol > li::marker { font-family:var(--mono); font-size:.78em; color:var(--clay); }
  .body b, .body strong { font-weight:600; color:#14181f; }
  .body i, .body em { font-style:italic; }
  .body a { color:var(--navy); text-decoration:none; border-bottom:1px solid rgba(39,51,79,.3); }
  .body a:hover { border-bottom-color:var(--navy); }
  code { font-family:var(--mono); font-size:.82em; background:rgba(69,90,140,.13);
    border-radius:3px; padding:.1em .34em; }

  /* ---------- rejillas ---------- */
  .g2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(255px,1fr)); gap:.85rem; }
  .g3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(195px,1fr)); gap:.75rem; }

  /* ---------- cajas didácticas ---------- */
  .box { border-radius:6px; padding:.85rem 1rem; border:1px solid var(--rule);
    border-left-width:3px; background:rgba(247,248,250,.55); }
  .box .lbl { font-family:var(--mono); font-size:.57rem; letter-spacing:.15em;
    text-transform:uppercase; margin-bottom:.4rem; display:block; font-weight:500; }
  .box p, .box li { font-size:.85rem; }
  .box ul { margin-top:.35rem; }
  .box.hy    { border-left-color:var(--gold); background:rgba(138,92,10,.07); }
  .box.hy .lbl    { color:#8a5c0a; }
  .box.trap  { border-left-color:var(--rust); background:rgba(112,29,20,.06); }
  .box.trap .lbl  { color:var(--rust); }
  .box.mnem  { border-left-color:var(--navy); background:rgba(39,51,79,.06); }
  .box.mnem .lbl  { color:var(--navy); }
  .box.clin  { border-left-color:var(--green); background:rgba(92,122,87,.08); }
  .box.clin .lbl  { color:#1a6b42; }
  .box.mnem b { color:var(--rust); }
  .box.mnem code { font-family:var(--mono); color:var(--rust); background:rgba(39,51,79,.09); }

  /* ---------- tarjeta ---------- */
  .card { background:rgba(247,248,250,.6); border:1px solid var(--rule);
    border-radius:6px; padding:.85rem 1rem; }
  .card > .lbl { font-family:var(--mono); font-size:.57rem; letter-spacing:.15em;
    text-transform:uppercase; color:var(--clay); display:block; margin-bottom:.4rem; }
  .card h6 { font-size:.83rem; font-weight:600; color:var(--rust); margin-bottom:.35rem; }
  .card p, .card li { font-size:.83rem; }

  /* ---------- tablas ---------- */
  table.tbl { width:100%; border-collapse:collapse; font-size:.82rem; }
  .scrollx { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table.tbl th { font-family:var(--mono); font-size:.58rem; letter-spacing:.12em;
    text-transform:uppercase; color:var(--clay); text-align:left; font-weight:500;
    padding:.5rem .6rem; border-bottom:1.5px solid var(--rule); white-space:nowrap; }
  table.tbl td { padding:.5rem .6rem; border-bottom:1px solid var(--rule-soft);
    vertical-align:top; line-height:1.45; }
  table.tbl tr:last-child td { border-bottom:none; }
  table.tbl tbody tr:hover { background:rgba(69,90,140,.05); }
  table.tbl td b { color:#14181f; }
  table.tbl .num { font-family:var(--mono); font-size:.78rem; white-space:nowrap; }

  /* ---------- figuras ---------- */
  figure.fig { background:var(--white); border:1px solid var(--rule); border-radius:6px;
    padding:1rem 1rem .75rem; }
  figure.fig svg { width:100%; height:auto; display:block; }
  figure.fig figcaption { font-family:var(--serif); font-style:italic; font-size:.8rem;
    color:var(--muted); margin-top:.7rem; padding-top:.55rem;
    border-top:1px solid var(--rule-soft); line-height:1.45; }
  .fig .scrollx svg { min-width:520px; }

  /* ---------- bloque por virus ---------- */
  .vblock { border:1px solid var(--rule); border-radius:6px; overflow:hidden;
            background:var(--white); }
  .vblock > .vhd { background:rgba(112,29,20,.07); border-bottom:1px solid var(--rule);
    padding:.55rem .9rem; display:flex; align-items:baseline; gap:.6rem; flex-wrap:wrap; }
  .vblock > .vhd .vn { font-weight:600; font-size:.88rem; color:var(--rust); }
  .vblock > .vhd .vg { font-family:var(--serif); font-style:italic; font-size:.8rem;
    color:var(--muted); }
  .vblock > .vbd { padding:.8rem .95rem; }
  .vblock > .vbd > * + * { margin-top:.6rem; }

  /* ---------- pasos / línea de tiempo ---------- */
  ol.steps { list-style:none; padding-left:0; counter-reset:s; }
  ol.steps > li { counter-increment:s; position:relative; padding-left:2.1rem;
    padding-bottom:.75rem; margin-bottom:0; }
  ol.steps > li::before { content:counter(s); position:absolute; left:0; top:0;
    width:1.45rem; height:1.45rem; border-radius:50%; background:var(--navy);
    color:var(--paper); font-family:var(--mono); font-size:.65rem; display:flex;
    align-items:center; justify-content:center; }
  ol.steps > li::after { content:''; position:absolute; left:.71rem; top:1.55rem;
    bottom:.1rem; width:1px; background:var(--rule); }
  ol.steps > li:last-child { padding-bottom:0; }
  ol.steps > li:last-child::after { display:none; }
  ol.steps b { display:block; color:var(--navy); font-size:.85rem; }

  /* ---------- pares clave/valor ---------- */
  dl.kv { display:grid; grid-template-columns:auto 1fr; gap:.35rem .9rem; font-size:.85rem; }
  dl.kv dt { font-family:var(--mono); font-size:.62rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--clay); padding-top:.18rem; white-space:nowrap; }

  /* ---------- fuente ---------- */
  .src { font-family:var(--mono); font-size:.6rem; letter-spacing:.06em; color:var(--muted);
    line-height:1.6; border-top:1px solid var(--rule-soft); padding-top:.6rem; }
  .src b { color:var(--clay); font-weight:500; }

  /* ---------- navegación inferior ---------- */
  .pager { display:flex; justify-content:space-between; gap:1rem; margin-top:2rem;
           flex-wrap:wrap; }
  .pager a { flex:1 1 240px; text-decoration:none; background:var(--white);
    border:1px solid var(--rule); border-radius:6px; padding:.8rem 1rem; transition:.15s; }
  .pager a:hover { border-color:var(--steel); box-shadow:var(--shadow); }
  .pager .k { font-family:var(--mono); font-size:.57rem; letter-spacing:.15em;
    text-transform:uppercase; color:var(--muted); display:block; margin-bottom:.2rem; }
  .pager .v { font-family:var(--serif); font-size:1.02rem; color:var(--navy); }
  .pager a.next { text-align:right; }

  footer.pf { margin-top:2.4rem; padding-top:.9rem; border-top:1px solid var(--rule);
    font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase;
    color:var(--muted); display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

  @media (max-width:900px){
    .cols { grid-template-columns:minmax(0,1fr); gap:1.4rem; }
    .rail { position:static; }
    .rail ol { display:flex; flex-wrap:wrap; gap:.3rem; }
    .rail a { border:1px solid var(--rule); border-radius:999px; padding:.24rem .6rem; }
  }
  @media print {
    .topbar,.rail,.pager,.btn { display:none !important; }
    body { background:#fff; font-size:10.5pt; }
    .cols { grid-template-columns:1fr; }
    details.sec { break-inside:avoid; box-shadow:none; }
    details.sec > .body { display:block !important; }
    .wrap { padding:0; max-width:none; }
  }