*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--sans);background:var(--bg);color:var(--text);font-size:15px;line-height:1.65;min-height:100vh}
.wrap{max-width:1200px;margin:0 auto;padding:2.5rem clamp(1rem,3vw,2rem)}

/* ── HERO (antes masthead) ── */
.masthead{background:var(--surface);border:1px solid var(--border);border-radius:var(--rl);padding:clamp(1.5rem,4vw,2.5rem);margin-bottom:1.75rem}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--text3);margin:0 0 .8rem}
.title{font-size:clamp(1.6rem,4.5vw,2rem);font-weight:600;letter-spacing:-.03em;line-height:1.15;color:var(--text);margin:0}
.title small{display:block;font-size:clamp(.92rem,2vw,1rem);font-weight:400;color:var(--text2);letter-spacing:0;margin-top:.6rem;max-width:75ch}

/* ── ÍNDICE (toc) en tarjetas al estilo U2 ── */
.toc{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:.6rem;margin-bottom:2.5rem}
.toc a{display:flex;align-items:baseline;gap:9px;text-decoration:none;color:var(--text);background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--c,var(--accent));border-radius:var(--r);padding:.7rem .9rem;font-size:13.5px;font-weight:500;transition:transform .12s,box-shadow .12s}
.toc a:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.07)}
.toc a b{font-family:var(--mono);font-size:12px;color:var(--c,var(--text3));font-weight:500}

/* ── BLOQUES -> page-header U2 ── */
.bloque{margin-bottom:3rem;scroll-margin-top:116px}
.bloque>h2{display:flex;align-items:center;gap:12px;font-size:clamp(1.3rem,3vw,1.55rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;margin:0 0 .4rem}
.bloque>h2 .tag{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.06em;color:#fff;background:var(--c,var(--accent));padding:4px 10px;border-radius:6px;line-height:1;flex-shrink:0}
.bloque>.lead{color:var(--text2);margin:0 0 1.5rem;font-size:.98rem;max-width:78ch}

/* ── TARJETAS (antes panel) al estilo U2 ── */
.grid{column-width:330px;column-gap:1rem}
.panel{background:var(--surface);border:1px solid var(--border);border-top:3px solid var(--c,var(--border));border-radius:var(--rl);padding:1.35rem 1.4rem;margin:0 0 1rem;break-inside:avoid;-webkit-column-break-inside:avoid}
.panel h3{font-size:14.5px;font-weight:600;color:var(--text);margin:0 0 .6rem;display:flex;align-items:center;gap:8px}
.panel h3::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c,var(--accent));flex-shrink:0}
.panel h3 .sub{font-weight:400;font-size:.72rem;color:var(--text3);font-family:var(--mono)}
.panel h4{margin:1rem 0 .4rem;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--text3)}
.panel ul{list-style:none;display:flex;flex-direction:column;gap:.4rem;margin:.5rem 0;padding:0}
.panel li{position:relative;padding-left:1rem;font-size:13.5px;color:var(--text2)}
.panel li::marker{content:""}
.panel li::before{content:"·";position:absolute;left:.2rem;top:-.05rem;color:var(--c,var(--text3));font-weight:700}
.panel li strong{color:var(--text)}
.panel p.note{font-size:13.5px;color:var(--text2);margin:.5rem 0}
.panel strong{color:var(--text)}
.panel em{color:var(--text);font-style:italic}

/* ── PILLS / CÓDIGO ── */
.pill{display:inline-flex;align-items:center;font-family:var(--mono);font-size:11px;background:var(--surface2);border:1px solid var(--border);border-radius:20px;padding:2px 10px;color:var(--text2)}
code,.code{font-family:var(--mono);font-size:.85em}
code{background:var(--surface2);border-radius:4px;padding:1px 6px;color:var(--text)}

/* ── TERMINAL (bloque de código oscuro) ── */
.terminal{background:var(--code-bg);color:var(--code-ink);border-radius:var(--r);padding:.85rem 1rem;font-family:var(--mono);font-size:12.5px;line-height:1.65;overflow-x:auto;margin:.6rem 0}
.terminal .c{color:var(--code-accent)}
.terminal .ok{color:#9fe6b0}
.terminal .dim{color:#8b97a3}
.terminal .ln{display:block;white-space:pre-wrap;word-break:break-word}
.terminal .out{padding-left:1.6em}

/* ── ÁRBOL DE FICHEROS ── */
.filetree{background:var(--surface2);border:1px solid var(--border);border-radius:var(--r);padding:.9rem 1.1rem;font-family:var(--mono);font-size:12.5px;line-height:1.65;white-space:pre;overflow-x:auto;margin:.6rem 0;color:var(--text)}
.filetree .dir{color:var(--amber);font-weight:500}
.filetree .root{color:var(--text);font-weight:600}
.filetree .cm{color:var(--text3)}
.filetree .hidden{color:var(--text3);font-style:italic}

/* ── FLUJO (pasos) ── */
.flow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;margin:.6rem 0}
.flow .step{background:var(--surface2);border:1px solid var(--border);border-radius:6px;padding:3px 9px}
.flow .arr{color:var(--c,var(--text3));font-weight:600}

.twoup{display:grid;grid-template-columns:1fr;gap:.25rem}
.mini h4{margin-top:.9rem}
.mini:first-child h4{margin-top:.4rem}

@media(max-width:680px){
  .filetree,.terminal{font-size:11px}
  .grid{column-width:auto;columns:1}
  .wrap{padding:1.5rem 1rem}
}
@media print{
  .toc{display:none}
  .panel,.bloque{break-inside:avoid}
  .terminal{background:#f0f0f0;color:#000;border:1px solid #ccc}
}