/* F5.2: estilos acotados a las dos guías; tipografía y paleta existentes. */
.editorial .topbar .container { padding-block: .45rem; flex-wrap: wrap; }
.article-breadcrumb { display: flex; flex-wrap: wrap; gap: .5rem; color: var(--color-text-muted); font-size: var(--text-xs); margin-bottom: 2rem; }
.article-breadcrumb a { color: inherit; text-underline-offset: .2em; }
.article-hero { padding-block: clamp(2rem, 5vw, 4.5rem); border-bottom: 1px solid var(--color-border); background: linear-gradient(120deg, var(--color-bg) 45%, var(--color-primary-tint)); }
.article-hero h1 { font-size: clamp(2.05rem, 1.3rem + 2.8vw, 3.7rem); line-height: 1.12; max-width: 30ch; color: var(--color-primary-deep); margin-top: 1rem; }
.article-hero .lede { max-width: 65ch; margin-top: 1.5rem; }
.article-byline { margin-top: 1.5rem; font-size: var(--text-sm); color: var(--color-text-muted); }
.article-byline a { color: inherit; text-underline-offset: .2em; }
.article-draft { margin-top: .7rem; font-size: var(--text-xs); color: var(--color-text-muted); }
.article-published { margin-top: .7rem; font-size: var(--text-xs); color: var(--color-text-muted); }
.editorial .brand img { width: 230px; height: auto; }
.editorial .footer .brand { background: var(--color-bg); padding: .65rem .85rem; border-radius: var(--radius-sm); }
@media (max-width: 899px) { .editorial .brand img { width: 200px; } }
.article-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-block: 2.5rem 4rem; align-items: start; }
.article-toc { padding: 1.5rem; background: var(--color-surface-offset); border-radius: var(--radius-lg); }
.article-toc ol { padding-left: 1.25rem; margin-top: .75rem; }
.article-toc li { padding-block: .35rem; font-size: var(--text-sm); }
.article-toc a { color: var(--color-primary); text-underline-offset: .2em; }
.article-body { min-width: 0; max-width: 76ch; }
.article-body section { margin-bottom: 3rem; scroll-margin-top: 7rem; }
.article-body h2 { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.6rem, 1.3rem + .7vw, 2.05rem); line-height: 1.2; color: var(--color-primary-deep); }
.article-body h3 { font-size: var(--text-base); line-height: 1.4; color: var(--color-primary); }
.article-body p, .article-body ul, .article-body ol, .article-body dl { margin-top: 1rem; }
.article-body a { color: var(--color-primary); text-decoration: underline; text-underline-offset: .2em; overflow-wrap: anywhere; }
.article-body ul, .article-body ol { padding-left: 1.35rem; }
.article-body li { padding-left: .2rem; margin-top: .65rem; }
.article-table-hint { font-size: var(--text-xs); color: var(--color-text-muted); }
.article-table-wrap { max-width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; margin-top: 1rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-surface); }
.article-body table { min-width: 660px; font-size: .875rem; line-height: 1.5; }
.article-body caption { padding: 1rem; text-align: left; font-weight: 600; color: var(--color-primary-deep); background: var(--color-primary-tint); }
.article-body th, .article-body td { padding: 1rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--color-border); }
.article-body th { color: var(--color-primary); background: var(--color-bg); }
.article-body tr:last-child td { border-bottom: 0; }
.article-example { margin-top: 1.5rem; padding: 1.5rem; background: var(--color-surface); border-left: 3px solid var(--color-accent); box-shadow: var(--shadow-sm); }
.article-example p:last-child { color: var(--color-text-muted); font-size: var(--text-sm); }
.article-metrics div { padding-block: 1rem; border-bottom: 1px solid var(--color-border); }
.article-metrics dt { font-weight: 600; color: var(--color-primary); }
.article-metrics dd { margin-top: .4rem; }
.article-checklist { padding: 1.5rem; background: var(--color-primary-tint); border-radius: var(--radius-lg); }
.article-contact { padding: 1.75rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-lg); background: var(--color-surface); }
.article-contact h2 { margin-top: .75rem; }
.article-contact .btn { margin-top: 1.5rem; color: white; text-decoration: none; white-space: normal; }
.article-related { margin-block: 2rem 1rem; border-top: 1px solid var(--color-border); padding-top: 1.5rem; }
.article-related a { display: block; margin-top: .65rem; }
.article-mobile-menu { position: relative; font-size: var(--text-sm); }
.article-mobile-menu summary { cursor: pointer; padding: .7rem; color: var(--color-primary); }
.article-mobile-menu nav { position: absolute; right: 0; z-index: 55; width: min(280px, 85vw); padding: 1rem; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg); box-shadow: var(--shadow-md); }
.article-mobile-menu a { display: block; color: var(--color-primary); padding-block: .65rem; }
@media (min-width: 980px) { .article-layout { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 3.5rem; } .article-toc { position: sticky; top: 6rem; } }
@media (min-width: 900px) { .article-mobile-menu { display: none; } }
@media (max-width: 480px) { .editorial .topbar .container { gap: .15rem; } .article-hero h1 { font-size: 2.05rem; } .article-example, .article-contact, .article-checklist, .article-toc { padding: 1.2rem; } }
@media print { .editorial .topbar, .editorial .header, .article-toc, .article-contact, .article-related, .editorial .footer, .article-breadcrumb { display: none; } .article-layout { display: block; width: 100%; } .article-hero { padding-block: 1rem; background: none; } .article-table-wrap { overflow: visible; border: 0; } .article-body table { min-width: 0; font-size: 9pt; } .article-body th, .article-body td { padding: .4rem; } .article-body { max-width: none; } }