/* Extractor PDF — estilos compartidos de las paginas de contenido.
   Misma paleta y mismos tokens que la herramienta (index.html). */
:root{
  --bg:#f5f6fb; --surface:#ffffff; --surface-2:#fafbff;
  --line:#e4e7f2; --line-soft:#edeff7;
  --ink:#1b1d2b; --ink-2:#565d78; --ink-3:#8a90a8;
  --brand:#5b60d6; --brand-2:#8065ea; --brand-soft:#eef0ff; --brand-line:#d9ddfb;
  --teal:#0f9e7c; --teal-soft:#e5f7f1;
  --amber:#d78a2c; --amber-soft:#fdf4e7;
  --rose:#dd5d7c; --rose-soft:#fdeef2;
  --radius:16px;
  --shadow:0 1px 2px rgba(27,29,43,.04), 0 6px 20px rgba(27,29,43,.05);
  --shadow-lg:0 2px 4px rgba(27,29,43,.04), 0 14px 40px rgba(27,29,43,.08);
  --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.65;-webkit-font-smoothing:antialiased;
  background:var(--bg);
  background-image:
    radial-gradient(900px 420px at 12% -8%, rgba(124,101,234,.14), transparent 62%),
    radial-gradient(760px 380px at 92% -4%, rgba(15,158,124,.11), transparent 60%);
  background-repeat:no-repeat;background-attachment:fixed}
a{color:var(--brand)}
.wrap{max-width:980px;margin:0 auto;padding:0 20px}
.narrow{max-width:760px;margin:0 auto;padding:0 20px}

/* ---------- cabecera ---------- */
header{border-bottom:1px solid rgba(228,231,242,.8);background:rgba(250,251,255,.82);backdrop-filter:blur(14px) saturate(1.4);position:sticky;top:0;z-index:60}
.hbar{display:flex;align-items:center;justify-content:space-between;height:66px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;font-weight:650;letter-spacing:-.02em;font-size:17px;white-space:nowrap;text-decoration:none;color:var(--ink)}
.logo .mark{width:31px;height:31px;display:block;flex:none;border-radius:9px;box-shadow:0 4px 12px rgba(91,96,214,.3)}
.hlinks{display:flex;gap:20px;font-size:14px;color:var(--ink-2)}
.hlinks a{text-decoration:none;color:var(--ink-2);transition:color .15s;white-space:nowrap}
.hlinks a:hover{color:var(--brand)}
.hlinks a.on{color:var(--brand);font-weight:600}
@media(max-width:720px){.hlinks{gap:14px;font-size:13px}.logo span:not(.mark){display:none}}

/* ---------- banda azul de titulo ---------- */
.band{position:relative;overflow:hidden;
  background:linear-gradient(145deg,#0f1640 0%,#1d2d80 36%,#3a5bd0 74%,#5a7cec 100%)}
.band::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(760px 340px at 80% 4%, rgba(255,255,255,.17), transparent 62%),
    radial-gradient(600px 320px at 8% 100%, rgba(143,99,236,.34), transparent 66%)}
.band .narrow,.band .wrap{position:relative;z-index:1}
.band .inner{padding:56px 0 48px}
.band .kicker{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.24);
  padding:6px 13px;border-radius:100px;margin-bottom:18px;backdrop-filter:blur(8px)}
.band h1{font-size:38px;line-height:1.14;letter-spacing:-.03em;margin:0 0 14px;font-weight:750;
  background:linear-gradient(115deg,#ffffff 30%,#dde7ff 100%);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent}
.band p.sub{font-size:17px;color:rgba(255,255,255,.84);margin:0;max-width:620px}
.band .meta{margin-top:20px;font-size:13px;color:rgba(255,255,255,.66)}
.band .meta a{color:rgba(255,255,255,.9)}
@media(max-width:640px){.band h1{font-size:28px}.band .inner{padding:40px 0 36px}.band p.sub{font-size:15.5px}}

/* ---------- articulo ---------- */
article{padding:46px 0 20px}
article h2{font-size:25px;letter-spacing:-.02em;font-weight:700;margin:44px 0 12px;line-height:1.25}
article h2:first-child{margin-top:0}
article h3{font-size:18px;font-weight:650;margin:30px 0 8px;letter-spacing:-.01em}
article p{margin:0 0 16px;color:var(--ink-2)}
article strong{color:var(--ink);font-weight:650}
article ul,article ol{margin:0 0 18px;padding-left:22px;color:var(--ink-2)}
article li{margin-bottom:8px}
article li::marker{color:var(--brand)}
article a{text-decoration:none;border-bottom:1px solid var(--brand-line);transition:.15s}
article a:hover{border-bottom-color:var(--brand);background:var(--brand-soft)}
article code{font-family:var(--mono);font-size:.88em;background:var(--brand-soft);color:#4a4fc4;
  padding:2px 6px;border-radius:6px;white-space:nowrap}
article hr{border:0;border-top:1px solid var(--line);margin:40px 0}

/* indice */
.toc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px 24px;margin:0 0 36px;box-shadow:0 1px 2px rgba(27,29,43,.04)}
.toc h2{font-size:13px!important;text-transform:uppercase;letter-spacing:.07em;color:var(--ink-3);margin:0 0 12px!important;font-weight:650}
.toc ol{margin:0;padding-left:20px;font-size:14.5px}
.toc li{margin-bottom:6px}
.toc a{color:var(--ink-2);text-decoration:none;border:0}
.toc a:hover{color:var(--brand);background:none}

/* cajas destacadas */
.box{border-radius:14px;padding:18px 20px;margin:0 0 22px;border:1px solid var(--line);background:var(--surface)}
.box p:last-child{margin-bottom:0}
.box .t{font-weight:650;font-size:14.5px;margin-bottom:6px;color:var(--ink);display:flex;align-items:center;gap:8px}
.box.key{background:linear-gradient(120deg,var(--brand-soft),#f7f2ff);border-color:var(--brand-line)}
.box.key .t{color:#4a4fc4}
.box.warn{background:var(--amber-soft);border-color:#f4e2c6}
.box.warn .t{color:#a96c1c}
.box.tip{background:var(--teal-soft);border-color:#c9ece1}
.box.tip .t{color:#0b7d61}

/* tablas */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:13px;background:var(--surface);margin:0 0 24px}
table{border-collapse:collapse;width:100%;font-size:14px;min-width:460px}
th,td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top;color:var(--ink-2)}
th{background:linear-gradient(180deg,var(--brand-soft),#f4f5fd);color:#4a4fc4;font-weight:650;font-size:12.5px;
  letter-spacing:.02em;border-bottom:1px solid var(--brand-line)}
tbody tr:last-child td{border-bottom:0}
tbody tr:hover td{background:#fafbff}

/* llamada a la herramienta */
.cta{background:var(--surface);border:1px solid var(--brand-line);border-radius:var(--radius);padding:24px 26px;margin:36px 0;
  box-shadow:var(--shadow);display:flex;gap:20px;align-items:center;flex-wrap:wrap}
.cta div{flex:1;min-width:220px}
.cta h3{margin:0 0 5px;font-size:17px;font-weight:650}
.cta p{margin:0;font-size:14.5px;color:var(--ink-2)}
.btn{display:inline-block;font-size:14.5px;font-weight:600;padding:11px 20px;border-radius:11px;text-decoration:none;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));color:#fff;border:0;
  box-shadow:0 4px 14px rgba(91,96,214,.28);transition:.16s;white-space:nowrap}
.btn:hover{filter:brightness(1.07);box-shadow:0 6px 18px rgba(91,96,214,.34);color:#fff}
.btn.ghost{background:var(--surface);color:var(--ink-2);border:1px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:var(--brand-line);color:var(--brand);background:var(--brand-soft)}

/* firma del autor */
.author{display:flex;gap:16px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px 24px;margin:40px 0 0;box-shadow:0 1px 2px rgba(27,29,43,.04)}
.author .av{width:52px;height:52px;border-radius:14px;flex:none;display:grid;place-items:center;font-weight:700;
  font-size:18px;color:#fff;background:linear-gradient(135deg,var(--brand),var(--brand-2));box-shadow:0 4px 12px rgba(91,96,214,.3)}
.author .n{font-weight:650;font-size:15.5px;margin-bottom:3px}
.author .r{font-size:14px;color:var(--ink-2);margin:0}
.author a{color:var(--brand);text-decoration:none;border-bottom:1px solid var(--brand-line)}

/* siguiente lectura */
.next{margin:38px 0 0}
.next h2{font-size:15px!important;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-3);margin:0 0 14px!important}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.gcard{display:block;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  text-decoration:none;color:inherit;transition:.18s;box-shadow:0 1px 2px rgba(27,29,43,.03);border-bottom:1px solid var(--line)}
.gcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--brand-line);background:var(--surface)}
.gcard .tag{display:inline-block;font-size:11.5px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 9px;border-radius:100px;margin-bottom:9px}
.tag.a{background:var(--brand-soft);color:#4a4fc4}
.tag.b{background:var(--teal-soft);color:#0b7d61}
.tag.c{background:var(--amber-soft);color:#a96c1c}
.tag.d{background:var(--rose-soft);color:#bf4462}
.gcard .gt{font-weight:650;font-size:16px;line-height:1.3;margin-bottom:6px;letter-spacing:-.01em}
.gcard .gd{font-size:14px;color:var(--ink-2);margin:0}
.gcard .gm{font-size:12.5px;color:var(--ink-3);margin-top:10px;font-family:var(--mono)}

/* pie */
footer{position:relative;color:rgba(255,255,255,.62);margin-top:60px;padding:34px 0 50px;font-size:13px;
  background:linear-gradient(150deg,#141a3c 0%,#1b2555 55%,#2a3878 100%)}
footer::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--brand) 0%,var(--brand-2) 26%,#0f9e7c 52%,#d78a2c 76%,#dd5d7c 100%)}
.frow{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
footer a{color:rgba(255,255,255,.72);text-decoration:none;transition:color .15s}
footer a:hover{color:#fff}