/*
Theme Name: Mundo Logística
Description: Tema propio, escrito desde cero para Mundo Logística. Sin
Elementor ni page builders de terceros. Bloques nativos de WordPress.
Author: Dideso
Version: 1.0.0
*/

:root {
    --ml-azul: #1B2A4E;
    --ml-azul-claro: #2E4374;
    --ml-acento: #E8833A;
    /* Versión oscurecida del acento SOLO para texto de enlace sobre fondo
       claro — el tono brillante de --ml-acento da un contraste de ~2.55:1
       sobre --ml-fondo/blanco, por debajo del mínimo WCAG AA (4.5:1) para
       texto normal. Encontrado 2026-09-14 auditando accesibilidad de las
       fichas de glosario. --ml-acento se queda igual para fondos de
       botón, bordes decorativos y demás usos no textuales, donde el
       contraste exigido es distinto (o no aplica). Este tono oscurecido
       da ~4.76:1, pasa AA. */
    --ml-acento-texto: #AE5619;
    /* Segundo acento cálido, propuesto tras el feedback de Óscar
       ("le falta algo más de color... un amarillo o algo así") --
       diferencia visualmente las tarjetas de comparativas de las de
       guías, sin tocar el azul ni el naranja ya establecidos.
       Oscurecido para texto por el mismo motivo que --ml-acento-texto:
       el ámbar claro no pasa AA sobre fondo blanco. */
    --ml-ambar: #E3B341;
    --ml-ambar-texto: #8A6414;
    --ml-fondo: #F7F8FA;
    --ml-borde: #E3E7EE;
    --ml-texto: #23324B;

    /* Un único ancho para todo el sitio (header incluido) -- consultado
       con Mundo Universidad, que sí usa dos anchos distintos según el
       tipo de página, pero probado con una captura real a 2560px
       (monitor de 27", hallazgo de Óscar): dos anchos distintos hacían
       que el borde izquierdo del header y el del contenido no
       coincidieran, un problema de alineación tan "raro" como el
       original. --ml-ancho-ancho queda definida sin usar por ahora, por
       si se decide dar a la portada su propio ancho más adelante --
       habría que ensanchar el header también en esa página concreta
       para no reintroducir el mismo desajuste. */
    --ml-ancho-lectura: 1040px;
    --ml-ancho-ancho: 1200px;
}

/* Tipografía propia, auto-alojada (nunca cargada desde Google directamente
   — evita transferir la IP del visitante a un tercero, coherente con
   nuestra propia Política de Cookies/Privacidad). Fichero variable único
   descargado una vez, 27KB, cubre los pesos 400-800. */
@font-face {
    font-family: 'Plus Jakarta Sans';
    src: url('fonts/plus-jakarta-sans.woff2') format('woff2-variations');
    font-weight: 400 800;
    font-style: normal;
    font-display: swap;
}

* { box-sizing: border-box; }

.ml-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--ml-azul);
    color: #fff;
    padding: 12px 20px;
    z-index: 10000;
    text-decoration: none;
}
.ml-skip-link:focus {
    left: 8px;
    top: 8px;
}

body {
    margin: 0;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--ml-texto);
    background: #fff;
    line-height: 1.6;
}

h1, h2, h3, .ml-logo { font-weight: 800; letter-spacing: -0.02em; }

.ml-header {
    /* Antes solo un filete gris de 1px -- sin ningún peso visual real
       (hallazgo de Óscar 2026-09-15: "no veo un header trabajado").
       Borde en el naranja de acento ya usado en el resto del sitio +
       sombra muy sutil para separar la cabecera del contenido. */
    border-bottom: 3px solid var(--ml-acento);
    box-shadow: 0 1px 0 rgba(27,42,78,0.06);
}

.ml-header-inner {
    /* Antes el logo/menú iban pegados al borde real de la ventana
       (padding fijo, sin max-width) mientras el contenido debajo vivía
       en un contenedor centrado -- en pantallas anchas (hallazgo de
       Óscar, monitor de 27") el menú quedaba "perdido" muy a la
       izquierda, sin relación visual con el contenido de debajo.
       Probado primero con --ml-ancho-ancho (1200px): al ser distinto del
       ancho del contenido (940px), sus bordes izquierdos no coincidían
       -- el logo quedaba descuadrado respecto al texto de abajo, un
       problema de alineación distinto pero igual de "raro". Mismo ancho
       que el contenido, sin excepción, para que el borde izquierdo del
       logo y el del texto sean SIEMPRE el mismo punto. */
    max-width: var(--ml-ancho-lectura);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
}

.ml-header a.ml-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    font-size: 20px;
    color: var(--ml-azul);
    text-decoration: none;
}

.ml-logo-mark {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    flex-shrink: 0;
    display: block;
}

.ml-nav ul {
    display: flex;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ml-nav a {
    color: var(--ml-texto);
    text-decoration: none;
    font-size: 15px;
}

.ml-nav a:hover { color: var(--ml-azul); }

.ml-content {
    max-width: var(--ml-ancho-lectura);
    margin: 0 auto;
    padding: 40px 24px;
}

/* La columna de texto corrido necesita un ancho propio, más estrecho que
   --ml-ancho-lectura (940px, reservado para alinear el header/hero con
   .ml-content, ver comentario en :root). Medido con herramienta real
   (herramientas/medir-diseno.mjs) el 2026-09-27: a 940px la línea daba
   112 caracteres con letra de 16px, muy por encima del objetivo de
   65-75.

   El texto real no vive suelto en <article> -- functions.php
   (ml_envolver_contenido_pagina) lo mete en .ml-hero-pagina-inner y
   .ml-seccion-inner, cuyo max-width normal (940px, líneas 261/307/308)
   tiene más especificidad que un simple ".ml-content > article ..." --
   de ahí que un primer intento con esa selectividad menor no tuviera
   ningún efecto medible. Por eso aquí se repite la MISMA cadena de
   clases que esas reglas (.ml-hero-pagina .ml-hero-pagina-inner,
   .ml-seccion.alt .ml-seccion-inner, .ml-seccion:not(.alt)
   .ml-seccion-inner) con el prefijo ".ml-content > article" delante,
   para ganar en especificidad sin usar !important. Acotado a
   ">article" a propósito: ese envoltorio solo existe en
   page.php/single.php/front-page.php -- nunca entra en home.php,
   archive-glosario.php ni single-glosario.php, que construyen sus
   propias .ml-seccion/.ml-hero-pagina-inner (rejillas, tarjetas) fuera
   de <article> y sí necesitan seguir a 940px.

   Además: la función solo envuelve en .ml-seccion lo que va DESPUÉS del
   primer <h2>. Un párrafo suelto entre el hero y el primer <h2> (pasa en
   /maritimo/, no en /software-logistico/) queda como hijo directo de
   <article>, sin ninguna clase -- de ahí la regla en `.ml-content >
   article` de abajo, que cubre ese hueco. */
.ml-content > article {
    max-width: var(--ml-ancho-lectura);
    margin-left: auto;
    margin-right: auto;
}
.ml-content > article .ml-hero-pagina .ml-hero-pagina-inner,
.ml-content > article .ml-seccion.alt .ml-seccion-inner,
.ml-content > article .ml-seccion:not(.alt) .ml-seccion-inner {
    max-width: 1040px;
}

/* Ancho de página (orden de Óscar, 2026-09-30): toda la web usa la misma
   caja de 1040px que la portada, texto corrido incluido, no una columna
   estrecha. Las rejillas de tarjetas y cifras se reparten en 2 o 3
   columnas para no quedar en ~220px por tarjeta. */
@media (min-width: 640px) {
    .ml-content > article .ml-cards, .ml-content > article .ml-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
    .ml-content > article .ml-cards:has(> :nth-child(3):last-child) { grid-template-columns: repeat(3, 1fr); }
    .ml-content > article .ml-stats { grid-template-columns: repeat(3, 1fr); }
}

/* Parrafos y enlaces del cuerpo de contenido -- hasta hoy no tenian
   ninguna regla propia, asi que caian en el margen/color por defecto
   del navegador (1em arbitrario, azul #0000EE subrayado de toda la
   vida) en vez de algo diseñado a proposito. Hallazgo de Óscar
   2026-09-15: "los enlaces... son horribles" y "hay ciertos sangrados
   entre parrafos, no me gusta nada". */
.ml-content p, .ml-seccion-inner p, .ml-hero-pagina p { margin: 0 0 18px; }
.ml-content p:last-child, .ml-seccion-inner p:last-child { margin-bottom: 0; }
.ml-content a, .ml-seccion-inner a, .ml-cookie-banner a {
    color: var(--ml-azul-claro);
    text-decoration: underline;
    text-decoration-color: rgba(46,67,116,0.35);
    text-underline-offset: 3px;
    transition: text-decoration-color .15s ease, color .15s ease;
}
.ml-content a:hover, .ml-seccion-inner a:hover, .ml-cookie-banner a:hover {
    color: var(--ml-acento-texto);
    text-decoration-color: currentColor;
}

.ml-content h1 { font-size: 36px; margin-bottom: 10px; line-height: 1.15; }
.ml-content h2 { font-size: 25px; margin-top: 48px; padding-bottom: 8px; border-bottom: 3px solid var(--ml-acento); display: inline-block; }
/* El h2 que abre una .ml-seccion-inner ya recibe su espacio del padding
   de la propia caja de sección (ver .ml-seccion-inner de abajo) -- el
   margin-top de arriba estaba pensado para un flujo de una sola columna
   sin secciones, y aquí se sumaba al padding, duplicando el hueco antes
   de cada título (hallazgo de Óscar 2026-09-15: "los espacios que hay
   encima de los títulos... es horrible"). */
.ml-seccion-inner > h2:first-child { margin-top: 0; }
.ml-content h3 { font-size: 19px; margin-top: 28px; color: var(--ml-azul-claro); }
.ml-content > p:first-of-type { font-size: 19px; color: var(--ml-azul-claro); }

/* --- Franja de color a ancho completo (portada y páginas interiores) ---
   Técnica de "full-bleed dentro de un contenedor centrado": el elemento
   se extiende a los bordes reales del viewport (no al ancho de
   .ml-content) sin necesidad de sacarlo del flujo del documento. Óscar
   pidió expresamente que el azul "vaya de lado a lado" -- antes el
   margen negativo solo cancelaba el padding de .ml-content (860px),
   dejando fondo blanco visible a los lados en pantallas anchas. */
.ml-franja-completa {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

/* --- Hero de portada --- */
.ml-hero {
    background: linear-gradient(135deg, var(--ml-azul) 0%, var(--ml-azul-claro) 100%);
    color: #fff;
    padding: 72px 24px;
    text-align: center;
    margin-bottom: 0;
}
.ml-hero h1 { color: #fff; font-size: 46px; max-width: var(--ml-ancho-lectura); margin: 0 auto 16px; letter-spacing: -0.025em; }
.ml-hero p { font-size: 18px; max-width: 860px; margin: 0 auto; opacity: .92; }

/* --- Hero de página interior: mismo tratamiento que la portada, a
   tamaño más compacto -- da a cada página un punto de anclaje visual
   real en vez de arrancar en texto plano (hallazgo de Óscar
   2026-09-15: "todo es igual de plano"). Generado por PHP a partir del
   <h1> + primer párrafo de cada página, ver ml_envolver_contenido() en
   functions.php -- el HTML de cada página no se toca. */
.ml-hero-pagina {
    background: var(--ml-azul);
    padding: 44px 0 40px;
    margin-bottom: 8px;
}
/* El padding lateral vive aquí, no en el padre -- mismo patrón que
   .ml-seccion-inner (max-width incluye su propio padding, sin padding
   en el padre). Antes el padre tenía padding:24px Y el inner tenía
   max-width sin padding propio, así que el texto del hero arrancaba
   24px más a la izquierda que el texto de las secciones del cuerpo en
   pantallas anchas (hallazgo de Óscar 2026-09-19: "cada apartado
   empieza en un sitio distinto respecto a la izquierda"). */
.ml-hero-pagina .ml-hero-pagina-inner { max-width: var(--ml-ancho-lectura); margin: 0 auto; padding: 0 24px; }
.ml-hero-pagina h1 { color: #fff; font-size: 32px; margin: 0 0 12px; line-height: 1.2; max-width: 64ch; }
.ml-hero-pagina p { color: #C9D4EC; font-size: 16px; margin: 0; max-width: 90ch; }
.ml-hero-pagina p + p { margin-top: 10px; }
/* Cabecera de entrada de blog: imagen destacada de fondo (decorativa) y
   título a la izquierda, donde la imagen deja el hueco libre. El degradado
   garantiza contraste del título sobre cualquier imagen. */
.ml-hero-entrada { position: relative; overflow: hidden; padding: 72px 0 64px; min-height: 260px; }
.ml-hero-entrada-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
.ml-hero-entrada::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--ml-azul) 0%, rgba(27,42,78,0.88) 40%, rgba(27,42,78,0) 85%); }
.ml-hero-entrada .ml-hero-pagina-inner { position: relative; z-index: 2; }
.ml-hero-entrada h1 { font-size: 40px; }
@media (max-width: 640px) { .ml-hero-entrada { padding: 44px 0 40px; } .ml-hero-entrada h1 { font-size: 30px; } }
.ml-hero-pagina a,
.ml-hero a {
    color: #fff;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.ml-hero-pagina a:hover,
.ml-hero a:hover {
    text-decoration-color: var(--ml-ambar);
}

/* --- Secciones con fondo alterno dentro del cuerpo de una página ---
   Gris con sesgo azulado (no gris puro) -- separa el contenido sin
   añadir bordes ni cajas por todas partes. Generadas por PHP agrupando
   cada <h2> y lo que le sigue, ver ml_envolver_contenido(). */
/* Ambas variantes de .ml-seccion escapan al ancho completo de pantalla
   (igual que ya hacía .alt), para que su .ml-seccion-inner sea el único
   que controla el padding lateral real. Antes las secciones SIN .alt se
   quedaban dentro de .ml-content (que ya tenía su propio padding), así
   que su texto arrancaba ~16px más a la derecha que el de las secciones
   .alt en pantallas estrechas -- mismo tipo de bug que el del hero,
   hallazgo de Óscar 2026-09-22 en vista móvil de Incoterms. */
.ml-seccion {
    padding: 8px 0;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.ml-seccion.alt {
    background: var(--ml-fondo); /* mismo gris azulado ya usado en el footer, no uno nuevo */
    /* Franja completa como .ml-franja-completa (hallazgo de Óscar
       2026-09-15: "los contenedores grises mejor que vayan de punta a
       punta") -- antes se quedaba dentro del ancho de .ml-content
       (940px), dejando fondo blanco visible a los lados en pantallas
       anchas. Baked in aquí en vez de depender de una clase extra en el
       HTML, así cubre tanto lo escrito a mano (portada) como lo
       generado por PHP (ml_envolver_contenido_pagina). */
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.ml-seccion.alt .ml-seccion-inner { max-width: var(--ml-ancho-lectura); margin: 0 auto; padding: 32px 24px; }
.ml-seccion:not(.alt) .ml-seccion-inner { max-width: var(--ml-ancho-lectura); margin: 0 auto; padding: 8px 24px 32px; }

/* --- Botón CTA --- */
.ml-btn {
    display: inline-block;
    background: var(--ml-acento);
    color: #fff !important;
    text-decoration: none !important;
    font-weight: 700;
    padding: 14px 30px;
    border-radius: 14px;
    margin-top: 24px;
    box-shadow: 0 8px 24px rgba(232,131,58,0.35);
}
.ml-btn:hover { background: #cf6f28; }

/* --- Tarjetas de secciones (portada) --- */
.ml-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 20px;
    margin: 32px 0;
}
.ml-card {
    background: #fff;
    border: 1px solid var(--ml-borde);
    border-radius: 18px;
    padding: 26px;
    box-shadow: 0 8px 24px rgba(27,42,78,0.08);
    transition: transform .15s ease, box-shadow .15s ease;
}
.ml-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(27,42,78,0.14);
}
.ml-card h3 { font-size: 20px; margin: 0 0 10px; line-height: 1.25; }
.ml-card h2 {
    font-size: 20px;
    margin-top: 0;
    border-bottom: none;
    padding-bottom: 0;
}
.ml-card p { font-size: 15px; margin-bottom: 16px; }
.ml-card a { color: var(--ml-azul); font-weight: 600; text-decoration: none; }
.ml-card a:hover { text-decoration: underline; }

/* Icono simple por tarjeta -- mismo trazo blanco sobre fondo de color
   que el logomark del header (ahora el propio favicon), no una
   ilustración ni foto genérica. Azul para guías, ámbar para
   comparativas: distingue de un vistazo los dos tipos de contenido. */
.ml-card-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    margin-bottom: 14px;
    background: var(--ml-azul);
}
.ml-card-icon.ambar {
    background: var(--ml-ambar);
}
.ml-cards-comparativas .ml-card a {
    color: var(--ml-ambar-texto);
}
h2.ml-titulo-ambar {
    border-bottom-color: var(--ml-ambar) !important;
}

/* Tabla de veredicto rápido en comparativas -- antes solo párrafos
   corridos, sin ningún resumen visual (hallazgo de Óscar 2026-09-15:
   "páginas así no dan ganas de leerlas"). Da el resumen antes del
   desarrollo completo, para quien solo quiere la conclusión rápida. */
.ml-veredicto {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0 32px;
    font-size: 14.5px;
}
.ml-veredicto th {
    text-align: left;
    padding: 10px 14px;
    background: var(--ml-azul);
    color: #fff;
    font-weight: 700;
}
.ml-veredicto th:first-child { border-radius: 10px 0 0 0; }
.ml-veredicto th:last-child { border-radius: 0 10px 0 0; }
.ml-veredicto td {
    padding: 12px 14px;
    border-bottom: 1px solid var(--ml-borde);
    vertical-align: top;
}
.ml-veredicto tr:last-child td { border-bottom: none; }
.ml-veredicto tr:nth-child(even) td { background: var(--ml-fondo); }
/* En móvil la tabla se ajusta al ancho de pantalla (celdas que parten
   palabra) en vez de desbordar y provocar scroll horizontal de página. */
@media (max-width: 640px) {
    .ml-content table { width: 100%; table-layout: fixed; font-size: 13px; }
    .ml-content th, .ml-content td { padding: 8px 8px; overflow-wrap: anywhere; }
}

/* Insignia de perfil junto al título de cada opción comparada -- rompe
   la sucesión de H2 idénticos con una etiqueta visual del tipo de
   perfil al que responde esa opción concreta. */
.ml-badge {
    display: inline-block;
    background: var(--ml-fondo);
    color: var(--ml-azul);
    border: 1px solid var(--ml-borde);
    border-radius: 100px;
    padding: 4px 12px;
    font-size: 12.5px;
    font-weight: 700;
    margin-bottom: 10px;
}

/* --- Cifras destacadas --- */
.ml-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    margin: 24px 0 40px;
}
.ml-stat {
    background: #fff;
    border: 1px solid var(--ml-borde);
    border-left: 4px solid var(--ml-acento);
    border-radius: 14px;
    padding: 18px 20px;
    font-size: 14.5px;
    box-shadow: 0 6px 18px rgba(27,42,78,0.07);
}
.ml-stat strong { display: block; font-size: 15px; color: var(--ml-azul); margin-bottom: 4px; }

.ml-footer {
    border-top: 1px solid var(--ml-borde);
    padding: 32px 24px;
    background: var(--ml-fondo);
    font-size: 14px;
}

.ml-footer-cols {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
    max-width: var(--ml-ancho-lectura);
    margin: 0 auto 24px;
}

.ml-footer-cols ul { list-style: none; padding: 0; margin: 8px 0 0; }
.ml-footer-cols a { color: var(--ml-texto); text-decoration: none; }
.ml-footer-cols a:hover { text-decoration: underline; }

.ml-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-top: 1px solid var(--ml-borde);
    padding: 16px 24px;
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    box-shadow: 0 -2px 12px rgba(0,0,0,.08);
    z-index: 9999;
}

.ml-cookie-banner button {
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid var(--ml-azul);
    font-size: 14px;
    cursor: pointer;
}

.ml-cookie-accept { background: var(--ml-azul); color: #fff; }
.ml-cookie-reject { background: #fff; color: var(--ml-azul); }

/* --- Directorio en tarjetas --- */
.ml-directorio-grupo h2 { display: block; border-bottom: none; }
.ml-directorio-item {
    background: #fff;
    border: 1px solid var(--ml-borde);
    border-radius: 16px;
    padding: 20px 22px;
    margin-bottom: 14px;
    box-shadow: 0 6px 18px rgba(27,42,78,0.06);
}
.ml-directorio-item strong { color: var(--ml-azul); font-size: 16px; }
.ml-directorio-item a { color: var(--ml-acento-texto); font-weight: 600; text-decoration: none; }
.ml-directorio-item a:hover { text-decoration: underline; }

@media (max-width: 640px) {
    /* CORREGIDO 2026-09-15: esta regla apuntaba a .ml-header (el
       envoltorio, sin display:flex propio -- solo borde y sombra) en
       vez de a .ml-header-inner (el contenedor flex real que reparte
       logo y nav) -- no hacía nada, el menú seguía en fila y se
       envolvía de forma descontrolada sobre el logo en móvil. */
    .ml-header-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
    .ml-nav ul { flex-wrap: wrap; gap: 10px 16px; }
    .ml-nav a { font-size: 14px; }
    .ml-content { padding: 24px 16px; }
    .ml-content h1 { font-size: 26px; }
    .ml-footer-cols { flex-direction: column; gap: 24px; }
    .ml-cookie-banner { flex-direction: column; align-items: stretch; }
    .ml-hero { margin: 0 -16px 32px; padding: 40px 16px; }
    .ml-hero h1 { font-size: 28px; }
    .ml-cards { grid-template-columns: 1fr; }
}

form label { display: block; margin-bottom: 16px; font-size: 14px; }
form input[type=text], form input[type=email], form input[type=tel], form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--ml-borde);
    border-radius: 10px;
    margin-top: 4px;
    font-size: 15px;
}
form button[type=submit] {
    background: var(--ml-azul);
    color: #fff;
    border: none;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 15px;
    cursor: pointer;
}

/* Enlazado interno en fichas de glosario: términos relacionados (misma
   categoría) + enlace a la guía pilar afín. Servido desde el servidor
   contra datos reales, sin JS de cliente. */
.ml-glosario-relacionados {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--ml-borde);
}
.ml-glosario-relacionados h2 {
    font-size: 16px;
    color: var(--ml-azul);
    margin-bottom: 12px;
}
.ml-glosario-relacionados ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ml-glosario-relacionados a {
    color: var(--ml-azul-claro);
    font-weight: 600;
    text-decoration: none;
}
.ml-glosario-relacionados a:hover {
    text-decoration: underline;
}
.ml-glosario-pilar {
    margin-top: 16px;
}
.ml-glosario-pilar a {
    color: var(--ml-acento-texto);
    font-weight: 700;
    text-decoration: none;
}
.ml-glosario-pilar a:hover {
    text-decoration: underline;
}

/* Archivo del glosario: antes una lista plana de <ul> sin ningún
   tratamiento visual (hallazgo de Óscar 2026-09-15: "el glosario es
   horrible"). Cada categoría como una tarjeta propia, en rejilla. */
.ml-glosario-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 20px;
}
.ml-glosario-categoria {
    background: #fff;
    border: 1px solid var(--ml-borde);
    border-radius: 12px;
    padding: 20px 22px;
}
.ml-glosario-categoria h2 {
    font-size: 17px;
    margin: 0 0 12px;
    padding-bottom: 8px;
    border-bottom: 3px solid var(--ml-acento);
    display: inline-block;
}
.ml-glosario-categoria ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ml-glosario-categoria a {
    color: var(--ml-azul-claro);
    text-decoration: none;
    font-size: 14.5px;
}
.ml-glosario-categoria a:hover {
    text-decoration: underline;
    color: var(--ml-acento-texto);
}

/* Glosario como hub: áreas en rejilla, con su guía y un índice A-Z. */
.ml-glosario-hub { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: start; margin-top: 24px; }
@media (min-width: 640px) { .ml-glosario-hub { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .ml-glosario-hub { grid-template-columns: repeat(3, 1fr); } }
.ml-glosario-categoria h3 { font-size: 18px; margin: 0 0 14px; padding-bottom: 8px; border-bottom: 3px solid var(--ml-acento); display: block; }
.ml-glosario-n { display: block; font-size: 13px; font-weight: 500; color: var(--ml-texto-suave, #5b6478); margin-top: 2px; letter-spacing: 0; }
.ml-glosario-guia { margin: 16px 0 0; padding-top: 12px; border-top: 1px solid var(--ml-borde); font-weight: 700; font-size: 14.5px; }
.ml-glosario-letras { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 28px; }
.ml-glosario-letras a { min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--ml-borde); border-radius: 10px; background: #fff; font-weight: 700; text-decoration: none; }
.ml-glosario-az { columns: 1; column-gap: 32px; }
@media (min-width: 640px) { .ml-glosario-az { columns: 2; } }
@media (min-width: 1000px) { .ml-glosario-az { columns: 3; } }
.ml-glosario-letra { break-inside: avoid; margin-bottom: 20px; }
.ml-glosario-letra h3 { font-size: 22px; margin: 0 0 8px; color: var(--ml-acento-texto); }
.ml-glosario-letra ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ml-glosario-letra a { text-decoration: none; font-size: 15px; }
.ml-glosario-letra a:hover { text-decoration: underline; }

/* Tarjeta ligera para listados largos de programas (grados, másteres,
   FP) -- antes cada entrada era solo h3+p suelto, un muro de títulos
   idénticos sin ninguna separación visual (hallazgo de Óscar
   2026-09-15: "el tema de la formación habria que mejorarla a nivel
   visual"). Mismo espíritu que .ml-stat de la portada, pero pensada
   para listas largas: borde de color a la izquierda, sin la sombra ni
   el padding pesado de una .ml-card completa. */
.ml-programa {
    background: #fff;
    border: 1px solid var(--ml-borde);
    border-left: 4px solid var(--ml-azul-claro);
    border-radius: 10px;
    padding: 16px 20px;
    margin: 16px 0;
}
.ml-programa h3 {
    margin-top: 0 !important;
    margin-bottom: 8px;
}
.ml-programa p {
    margin-bottom: 0 !important;
}

/* Blog como página pilar: tarjetas con fecha+extracto, no lista de
   texto plano ni archivo genérico de WordPress (estándar del holding,
   2026-09-15). Reutiliza .ml-cards/.ml-card ya existentes de portada. */
.ml-card-meta {
    font-size: 13px;
    color: #6B7690;
    margin: 0 0 6px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ml-cards-blog .ml-card h2 {
    font-size: 19px;
    margin-bottom: 8px;
}
.ml-blog-paginacion {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 32px;
    font-size: 14.5px;
}
.ml-blog-paginacion a,
.ml-blog-paginacion span {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--ml-borde);
    color: var(--ml-azul);
    text-decoration: none;
}
.ml-blog-paginacion .current {
    background: var(--ml-azul);
    color: #fff;
    border-color: var(--ml-azul);
}
.ml-blog-vacio {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    border: 1px solid var(--ml-borde);
    border-radius: 18px;
    padding: 40px 32px;
    box-shadow: 0 8px 24px rgba(27,42,78,0.08);
}
.ml-blog-vacio .ml-card-icon {
    margin: 0 auto 16px;
}
.ml-blog-vacio h2 {
    border-bottom: none;
    padding-bottom: 0;
    font-size: 20px;
}
.ml-blog-vacio p {
    font-size: 15px;
    color: #6B7690;
}
.ml-blog-vacio p a {
    color: var(--ml-azul);
    font-weight: 600;
}

/* Áreas del glosario plegadas por defecto (details/summary nativo). */
.ml-glosario-categoria summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ml-glosario-categoria summary::-webkit-details-marker { display: none; }
.ml-glosario-categoria summary::after { content: "+"; font-size: 24px; line-height: 1; font-weight: 700; color: var(--ml-acento-texto); flex: none; }
.ml-glosario-categoria[open] summary::after { content: "\2212"; }
.ml-glosario-categoria summary h3 { margin: 0; flex: 1; }
.ml-glosario-categoria[open] summary { margin-bottom: 14px; }
.ml-glosario-categoria summary:focus-visible { outline: 3px solid var(--ml-acento); outline-offset: 4px; border-radius: 6px; }

/* Gráficos SVG en línea: se adaptan al ancho disponible (antes 640px fijos
   y scroll horizontal en móvil). */
.ml-content figure svg { max-width: 100%; height: auto; }

/* Portada y cabeceras: textura abstracta (imagen IA ya autorizada y
   registrada) bajo un degradado que asegura el contraste del texto. */
.ml-hero,
.ml-hero-pagina:not(.ml-hero-entrada) {
    background:
        linear-gradient(90deg, rgba(27,42,78,0.94) 0%, rgba(27,42,78,0.82) 55%, rgba(27,42,78,0.55) 100%),
        url(/wp-content/uploads/ml-setup/cabecera-sga-nube.webp) right center / cover no-repeat,
        var(--ml-azul);
}

/* Entrada de la portada a los hubs: tarjetas grandes con icono. */
.ml-hubs .ml-hub-card { padding: 28px; }
.ml-hubs .ml-card-icon { width: 46px; height: 46px; }
.ml-hubs .ml-hub-card h3 { font-size: 21px; margin: 16px 0 8px; }
.ml-hubs .ml-hub-card p { margin: 0 0 16px; }
.ml-hubs .ml-hub-card a { font-weight: 700; }
.ml-content > article .ml-hubs .ml-hub-card:last-child { grid-column: 1 / -1; }
@media (max-width: 639px) { .ml-content > article .ml-hubs .ml-hub-card:last-child { grid-column: auto; } }
@media (min-width: 900px) { .ml-content > article .ml-hubs { grid-template-columns: repeat(3, 1fr); } }

/* Sin hueco en blanco entre el header y la cabecera de banda completa. */
.ml-content:has(> .ml-franja-completa:first-child),
.ml-content:has(> article > .ml-franja-completa:first-child) { padding-top: 0; }

/* Estilos que antes iban en atributos style="" y la política de seguridad
   (style-src sin 'unsafe-inline') bloqueaba. Mismos valores, ahora en clases. */
.ml-nota { color: #5c6b85; font-size: 14.5px; }
.ml-nota-pie { font-size: 13px; color: #667; }
.ml-lista { margin: 0; padding-left: 20px; }
.ml-tabla { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px; }
.ml-th { text-align: left; padding: 10px 14px; color: #1B2A4E; border-bottom: 2px solid #1B2A4E; }
.ml-td { padding: 10px 14px; color: #33415F; border-bottom: 1px solid #E3E7EE; vertical-align: top; }
/* Tabla de dos columnas (sistema / descripción): primera columna de ancho fijo, el resto para la descripción. */
.ml-tabla:has(.ml-th:nth-child(2):last-child) .ml-th:first-child,
.ml-tabla:has(.ml-th:nth-child(2):last-child) .ml-td:first-child { width: 128px; }
.ml-enlace { color: #1B2A4E; }
.ml-enlace-fuerte { color: #1B2A4E; font-weight: 600; text-decoration: none; }
.ml-cookie-texto { margin: 0; flex: 1; min-width: 240px; }
.ml-footer-lema { max-width: 260px; }
.ml-footer-copy { text-align: center; margin: 0; color: #667; }

/* Banner de cookies: el atributo hidden debe ocultarlo de verdad (display:flex lo pisaba). */
.ml-cookie-banner[hidden] { display: none; }
.ml-cookie-gestionar { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; cursor: pointer; min-height: 44px; }
.ml-cookie-gestionar:focus-visible { outline: 3px solid var(--ml-acento); outline-offset: 3px; }

/* Ancho de línea del texto corrido (Master CEO, 2026-10-07): la caja de contenido sigue en 1040px (orden de Óscar, 30-sep),
   pero los párrafos sueltos de la caja se limitan a ~75 caracteres por línea. Tarjetas, tablas y listas no se tocan
   (no son hijos directos). Para revertir: borrar este bloque. */
.ml-content > article .ml-seccion-inner > p { max-width: 36rem; }

/* Corrección de Óscar (2026-10-11): en el blog (single-post) el título y el
   texto deben ocupar el mismo ancho que el header (var(--ml-ancho-lectura),
   1040px), no una columna estrecha ni el ancho completo de pantalla. La
   regla de arriba (36rem, pensada para páginas/pilares de desarrollo largo)
   queda anulada aquí solo para entradas de blog. Para revertir: borrar este
   bloque. */
body.single-post .ml-content > article .ml-seccion-inner > p { max-width: none; }

/* Autor y fechas en entradas (2026-10-12) */
.ml-pie-cabecera { margin-bottom: 0.25rem; }
.ml-entrada-meta { font-size: 0.875rem; color: var(--ml-gris, #5b6472); margin: 0 0 1.5rem; }

/* Imágenes dentro del cuerpo de una entrada: proporcionadas a la columna (2026-10-12) */
.ml-seccion-inner figure.wp-block-image { max-width: 720px; margin: 2rem auto; }
.ml-seccion-inner figure.wp-block-image img { display: block; width: 100%; height: auto; border-radius: 6px; }
.ml-seccion-inner figure.wp-block-image figcaption { margin-top: 0.5rem; font-size: 0.875rem; line-height: 1.5; color: #5b6472; text-align: left; }

/* Migas de pan (2026-10-13) */
.ml-migas { padding: 14px 0 6px; font-size: 0.875rem; line-height: 1.4; }
.ml-migas ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 0; }
.ml-migas li { display: inline-flex; align-items: center; color: #4b5563; }
.ml-migas li + li::before { content: "/"; margin: 0 8px; color: #6b7280; }
.ml-migas a { color: var(--ml-azul-claro); text-decoration: underline; text-underline-offset: 2px; }
.ml-migas a:hover, .ml-migas a:focus-visible { color: var(--ml-acento-texto); }
.ml-migas span[aria-current] { color: #374151; }