/* ============================================================
   DOCUMENTACIÓN — sistema de diseño de artículos técnicos.
   Dark, premium, sobrio. Reutiliza los tokens de :root de
   styles.css (--bg, --surface, --accent, --fg, --muted…).
   Lo cargan el índice (/documentacion) y cada artículo
   (/documentacion/<slug>/). Mobile-first.
   ============================================================ */

/* Tipografía del cuerpo */
.doc-prose { font-size: 16.5px; line-height: 1.7; color: var(--fg-soft); }
.doc-prose > section { margin-bottom: 40px; scroll-margin-top: 24px; }
.doc-prose h2 {
    font-size: clamp(22px, 3.4vw, 28px); font-weight: 800; letter-spacing: -0.02em;
    color: var(--fg); margin: 0 0 16px; line-height: 1.2;
}
.doc-prose h3 { font-size: 18px; font-weight: 700; color: var(--fg); margin: 28px 0 10px; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.doc-prose p { margin: 0 0 16px; }
.doc-prose a { color: var(--accent-hover); text-decoration: none; border-bottom: 1px solid rgba(46,114,252,.3); }
.doc-prose a:hover { border-bottom-color: var(--accent-hover); }
.doc-prose strong { color: var(--fg); font-weight: 650; }
.doc-prose ul { margin: 4px 0 18px; padding-left: 0; list-style: none; }
.doc-prose ul li { position: relative; padding-left: 26px; margin-bottom: 10px; }
.doc-prose ul li::before {
    content: ""; position: absolute; left: 6px; top: 11px; width: 6px; height: 6px;
    border-radius: 50%; background: var(--accent);
}