/* Puente de tema: redefine las variables del CSS antiguo (style.css /
   article.css) con la paleta del Brand Book v2, para páginas interiores
   que conservan su maquetación de contenido. Cargar DESPUÉS de style.css
   y article.css, y ANTES de v2.css. */

:root {
    --primary: #337AFF;
    --primary-dark: #005EFF;
    --primary-light: #B8ECFB;
    --secondary: #0B2447;
    --secondary-dark: #0B2447;
    --background: #FAF6F1;
    --background-alt: #F2EDE3;
    --text-main: #1A3155;
    --text-light: #3A4D6E;
    --border: rgba(11, 36, 71, .12);
    --radius: 12px;
    --shadow-sm: none;
    --shadow-md: none;
    --shadow-lg: none;
    --font-heading: 'Mulish', ui-sans-serif, system-ui, sans-serif;
    --font-sans: 'Mulish', ui-sans-serif, system-ui, sans-serif;
}

body.internal-page {
    background: var(--background) !important;
    font-family: var(--font-sans);
}

/* El cuerpo del artículo va directamente sobre el fondo crema de la página;
   las cajas internas que usan var(--background) se integran solas. */

/* Héroes con degradado del diseño antiguo pasan al navy plano de marca */
.hero-section {
    background: var(--secondary) !important;
}

/* Índice del artículo: acompaña la lectura (scrollspy en js/v2.js).
   Si es más largo que la pantalla, se desplaza dentro de su propia caja. */
.article-toc {
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.article-toc__link.active {
    color: var(--primary);
    border-left-color: var(--primary);
    background: rgba(51, 122, 255, .08);
    font-weight: 700;
}

/* Titulares con el peso display de la marca */
h1, h2, h3, .article-content h1 {
    font-family: var(--font-heading);
    letter-spacing: -0.02em;
}