@layer components;

/* ═══════════════════════════════════════════════════════════════
   CAPA 4: COMPONENTS (BEM, nomenclatura en inglés)
   Clases BEM con nombre inglés para cada bloque visual.
   Fase 2: barra superior, cabecera, selector de idioma, pie y
   página genérica. El resto queda declarado para Fase 3.
   ─────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════
   Estado de página (JS)
   .menu-open — cuerpo con el menú móvil abierto (bloquea el scroll)
   ═══════════════════════════════════════════════════════════════ */
.menu-open {
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   Topbar — barra superior con teléfonos, dirección y email (P1)
   Tokens: --topbar-*, --color-primary, --color-border, --space-*
   ═══════════════════════════════════════════════════════════════ */
.topbar {
    background-color: var(--color-surface);
    border-bottom: var(--topbar-border-width) solid var(--color-primary);
    font-size: var(--topbar-font-size);
    line-height: var(--topbar-line-height);
    color: var(--color-body);
}

.topbar__content {
    min-height: var(--topbar-height);
    gap: var(--space-1) var(--space-3);
}

.topbar__group {
    gap: var(--space-1);
}

.topbar__phone,
.topbar__address,
.topbar__email {
    color: var(--color-body);
}

/* Evita desbordes en móvil con la dirección y el email (tokens sin espacios). */
.topbar__address,
.topbar__email {
    overflow-wrap: anywhere;
}

.topbar__separator {
    color: var(--color-body);
}

/*  Cada teléfono es un bloque-enlace (.topbar__phone = <a href="tel:…">).
    En ESCRITORIO se conserva el aspecto anterior: etiqueta en gris y número
    con el color de enlace de antes; el hover/foco vuelve azul solo el número
    (--color-link-hover), como el antiguo enlace del número. */
.topbar__phone-number {
    color: var(--color-link);
}

.topbar__phone:hover .topbar__phone-number,
.topbar__phone:focus-visible .topbar__phone-number {
    color: var(--color-link-hover);
}

/*  La etiqueta CORTA y el icono del email son exclusivos de MÓVIL: en
    escritorio se mantiene la etiqueta completa («Área Económica»/«Área Legal»)
    y el email como texto. Así el marcado es único y solo cambia el CSS. */
.topbar__phone-label--short,
.topbar__email-icon {
    display: none;
}

/*  P1: en móvil los dos grupos se apilan y se ocultan los guiones separadores.
    Mejora 2026-10-18 (barra COMPACTA de ≈80px): teléfonos en DOS columnas lado
    a lado (etiqueta corta encima, número con más peso debajo), dirección en UNA
    línea centrada debajo y email como icono alineado a la derecha. Sin
    line-height/márgenes heredados entre líneas.
    Rango 769–999,98px (punto 3, 2026-10-18): con el corte antiguo (≤768px) la
    topbar seguía en modo escritorio mientras la cabecera ya era móvil; a 800px
    los dos grupos se partían en dos filas (topbar 75,77px y dirección/email
    debajo de los teléfonos). Se unifica el corte con la cabecera (literal
    --bp-desktop 1000px → 999.98px); los media queries no admiten var(). */
@media (max-width: 999.98px) {
    /* Fondo muy suave (--color-surface-alt) que separa la barra de la cabecera
       blanca + línea inferior fina (--color-border). Gris de texto con contraste
       AA (--color-topbar-text) en toda la barra. */
    .topbar {
        padding-block: var(--topbar-mobile-padding-block);
        background-color: var(--color-surface-alt);
        border-bottom-color: var(--color-border);
        line-height: var(--topbar-address-line-height);
        color: var(--color-topbar-text);
    }

    .topbar__content {
        position: relative;
        flex-direction: column;
        align-items: stretch;
        gap: var(--topbar-mobile-row-gap);
        min-height: 0;
    }

    /* Los dos teléfonos, en dos columnas lado a lado. */
    .topbar__group--phones {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: var(--topbar-phone-column-gap);
        align-items: stretch;
    }

    /* Cada bloque es un enlace tel: con área táctil ≥44 px de alto. */
    .topbar__phone {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start;
        min-height: var(--topbar-touch-target-min);
        color: var(--color-topbar-text);
    }

    .topbar__phone-label--full {
        display: none;
    }

    /* Etiqueta corta: pequeña y con menos peso que el número. */
    .topbar__phone-label--short {
        display: inline;
        color: var(--color-topbar-text);
        font-size: var(--topbar-phone-label-font-size);
        line-height: var(--topbar-phone-label-line-height);
        font-weight: var(--body-font-weight);
    }

    /* Número: más grande y en negrita (más peso visual que la etiqueta). */
    .topbar__phone-number {
        color: var(--color-primary);
        font-size: var(--topbar-phone-number-font-size);
        line-height: var(--topbar-phone-number-line-height);
        font-weight: var(--topbar-phone-number-font-weight);
    }

    /* Dirección: una línea, alineada a la izquierda (al gutter), pequeña y con
       menos peso que los números. */
    .topbar__address {
        display: block;
        width: 100%;
        text-align: left;
        color: var(--color-topbar-text);
        font-size: var(--topbar-address-font-size);
        line-height: var(--topbar-address-line-height);
        overflow-wrap: normal;
    }

    /* Email: icono (sobre) alineado a la derecha de la barra, a la altura de la
       fila de teléfonos. Se alinea con el MISMO gutter lateral que el resto de
       contenedores: se descuenta el padding-inline del propio enlace
       (--space-1) para que el borde derecho del icono caiga en --gutter. */
    .topbar__email {
        position: absolute;
        top: 0;
        right: calc(var(--gutter) - var(--space-1));
        display: flex;
        align-items: center;
        height: var(--topbar-touch-target-min);
    }

    /* El icono comparte el color de los números de teléfono y el enlace
       conserva un objetivo táctil de 44×44 px (WCAG 2.5.5). */
    .topbar__email a {
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        min-width: var(--topbar-touch-target-min);
        min-height: var(--topbar-touch-target-min);
        padding-inline: var(--space-1);
        color: var(--color-primary);
    }

    .topbar__email-icon {
        display: block;
        width: var(--topbar-email-icon-size);
        height: var(--topbar-email-icon-size);
    }

    .topbar__email-text {
        display: none;
    }

    .topbar__separator {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Header — cabecera en DOS FILAS (como la web actual):
   fila 1: logo (centrado en escritorio) + selector de idioma a la derecha;
   fila 2: navegación en una línea.
   En móvil/tablet el botón hamburguesa sustituye a la navegación (fila 1).
   Tokens: --header-height-scroll, --header-height-mobile, --menu-*,
   --content-width, --logo-max-width-mobile/desktop, --logo-height-mobile/desktop,
   --logo-height-fixed, --header-padding-top/-block-mobile,
   --header-nav-padding-block-desktop, --menu-gap, --z-header, --hamburger-*
   ═══════════════════════════════════════════════════════════════ */
.header {
    position: relative;
}

.header__bar {
    background-color: var(--color-surface);
    border-bottom: var(--border-width) solid var(--color-border);
}

.header__bar-inner {
    display: flex;
    flex-direction: column;
}

/* Fila 1 en móvil: hamburguesa (izquierda, al --gutter), logo centrado
   ópticamente en la pantalla y selector de idioma compacto (derecha, al
   --gutter); todo centrado verticalmente. En escritorio (≥1000px) pasa a
   logo centrado + selector de idioma a la derecha (rejilla de tres columnas). */
.header__primary {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: var(--header-height-mobile);
}

/* Logo centrado ópticamente: se saca del flujo de la fila (posición absoluta
   al 50 % del eje) para que el centro del logo coincida con el centro de la
   pantalla, con independencia del ancho del hamburguesa y del selector.
   `width: max-content` evita que el ajuste al contenido lo recorte a la mitad
   del eje (el ancho real lo acota --logo-max-width-mobile). */
.header__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: max-content;
    max-width: var(--logo-max-width-mobile);
    min-width: 0;
    display: flex;
    align-items: center;
}

.header__logo a {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

/* El logo se ajusta a la caja disponible sin deformarse: mantiene su
   proporción (327×92) y su altura natural hasta --logo-height-mobile, pero se
   reduce si el ancho disponible es menor. Punto 3 (2026-10-18): en móvil el
   ancho se acota a --logo-max-width-mobile (195px, punto 2) para dejar sitio
   al hamburguesa y al selector; el alto se deriva de la proporción (sin
   deformar). En escritorio (≥1000px) el ancho se acota a
   --logo-max-width-desktop (260px, 2026-10-19); el alto sigue derivándose de
   la proporción (≈73px, sin deformar). */
.header__logo img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, var(--logo-max-width-mobile));
    max-height: var(--logo-height-mobile);
}

/* Acciones de la fila 1 en móvil: el botón hamburguesa, al extremo izquierdo
   (el selector de idioma compacto es hermano suyo, al extremo derecho). */
.header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.header__site-title {
    font-size: var(--h5-font-size);
    text-transform: var(--h5-text-transform);
    letter-spacing: var(--h5-letter-spacing);
    font-weight: var(--h5-font-weight);
    color: var(--color-primary);
}

/* Navegación — móvil primero: panel desplegable bajo la cabecera */
.header__nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    /*  El panel abierto debe superar al hero/slider de la portada. Sin z-index
        ambos son «posicionados con z-index auto» y el orden del DOM decide:
        el slider (dentro de main) se pinta después de la cabecera y tapaba el
        menú. --z-menu lo sitúa por encima de todo el contenido. */
    z-index: var(--z-menu);
    display: none;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-3) var(--gutter) var(--space-4);
    background-color: var(--color-surface);
    border-bottom: var(--border-width) solid var(--color-border);
}

.header__nav--open {
    display: flex;
}

.header__nav-list {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 0;
    list-style: none;
}

.header__nav-list a {
    display: block;
    padding: var(--space-1) 0;
    color: var(--color-nav-link);
    font-size: var(--menu-font-size);
    text-transform: var(--menu-text-transform);
    letter-spacing: var(--menu-letter-spacing);
    font-weight: var(--menu-font-weight);
    white-space: nowrap;
}

.header__nav-list a:hover,
.header__nav-list a:focus {
    color: var(--color-link-hover);
}

/* P7: marca el ítem activo (clase de WordPress, no un selector por ID). */
.header__nav-list .current-menu-item > a {
    color: var(--color-nav-active);
}

/* Botón hamburguesa (P7) */
.header__menu-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--header-height-mobile);
    height: var(--header-height-mobile);
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-accent);
}

.header__hamburger {
    position: relative;
    display: block;
    width: var(--hamburger-width);
    height: var(--hamburger-bar-height);
    background-color: currentColor;
}

.header__hamburger::before,
.header__hamburger::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: var(--hamburger-bar-height);
    background-color: currentColor;
}

.header__hamburger::before {
    transform: translateY(calc(-1 * var(--hamburger-line-offset)));
}

.header__hamburger::after {
    transform: translateY(var(--hamburger-line-offset));
}

/* Aire vertical de la cabecera en MÓVIL (punto 3, 2026-10-18): separa el logo
   de la topbar (arriba) y de la franja/título de página (abajo). Ámbito
   estricto por debajo del corte de escritorio (literal = --bp-desktop 1000px),
   de modo que en ≥1000px la cabecera queda EXACTAMENTE como la línea base.
   La fila sigue con `align-items:center`, así que logo y hamburguesa quedan
   centrados verticalmente entre sí. */
@media (max-width: 999.98px) {
    .header__bar-inner {
        padding-block: var(--header-padding-block-mobile);
    }
}

/* Cabecera de escritorio (dos filas): fila 1 con el logo centrado y el
   selector de idioma a la derecha; fila 2 con la navegación centrada.
   Literal = token --bp-desktop (1000px). */
@media (min-width: 1000px) {
    .header__bar {
        position: sticky;
        top: 0;
        z-index: var(--z-header);
    }

    /* Contexto de posicionamiento para subir el selector de idioma a la
       fila 1 (arriba a la derecha) sin duplicar marcado. El aire superior
       (--header-padding-top-desktop, 24px) separa la fila de marca de la
       línea inferior de la topbar (punto 2, 2026-10-19). */
    .header__bar-inner {
        position: relative;
        padding-top: var(--header-padding-top-desktop);
    }

    /* La fila de marca mide lo que el logo (--logo-height-desktop, ≈73px): sin
       el min-height antiguo de 92px el logo deja de llenar la fila y aparecen
       el aire superior y el hueco con el menú (punto 2, 2026-10-19). */
    .header__primary {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        min-height: var(--logo-height-desktop);
    }

    .header__logo {
        position: static;
        top: auto;
        left: auto;
        transform: none;
        width: auto;
        max-width: none;
        grid-column: 2;
        justify-self: center;
    }

    .header__actions {
        grid-column: 3;
        justify-self: end;
    }

    .header__logo img {
        height: auto;
        max-height: none;
        max-width: var(--logo-max-width-desktop);
    }

    .header__nav {
        position: static;
        /* En escritorio la navegación vuelve al flujo: el z-index no aplica y
           se restablece para no alterar el apilamiento de la línea base. */
        z-index: auto;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: var(--menu-gap);
        /* Aire del menú: el mismo arriba (logo↔menú) y abajo (menú↔borde
           inferior de la cabecera) para que la fila quede equilibrada (punto 2,
           2026-10-19). */
        padding-block: var(--header-nav-padding-block-desktop);
        padding-inline: 0;
        background: none;
        border: 0;
    }

    .header__nav-list {
        flex-direction: row;
        gap: var(--menu-gap);
    }

    .header__nav-list a {
        padding: 0;
    }

    /*  Contraste AA del menú en ESCRITORIO (punto 4, 2026-10-19): el gris de
        reposo --color-nav-link (#9d9d9d, 2,71:1 sobre blanco) no cumplía AA.
        Los enlaces inactivos pasan a --color-text-secondary (#616161, 6,19:1) y
        el ítem activo se distingue por COLOR PRIMARIO (--color-primary,
        8,51:1), no solo por un gris más oscuro. Solo escritorio: el panel del
        menú móvil conserva su color. */
    .header__nav-list a {
        color: var(--color-text-secondary);
    }

    .header__nav-list .current-menu-item > a {
        color: var(--color-primary);
    }

    .header__menu-toggle {
        display: none;
    }

    .header--scrolled .header__primary {
        min-height: var(--header-height-scroll);
    }

    .header--scrolled .header__logo img {
        height: var(--logo-height-fixed);
    }

    /* Selector de idioma (P5): sale del flujo del menú y se sitúa en la
       fila de marca, arriba a la derecha del eje, alineado con el contenido.
       La visibilidad por variante (móvil/escritorio) se resuelve al final de
       la sección «Language switcher» para ganar por orden de fuente. */
    .lang-switcher--desktop {
        position: absolute;
        /* Centrado verticalmente con el LOGO (punto 3, 2026-10-19): arranca en
           el aire superior y mide lo mismo que la fila de marca
           (--logo-height-desktop), así su centro coincide con el del logo y no
           con el borde superior de la cabecera. */
        top: var(--header-padding-top-desktop);
        right: var(--space-2);
        align-items: center;
        height: var(--logo-height-desktop);
    }

    /* En cabecera encogida el logo mide --logo-height-fixed: el selector se
       iguala a esa altura para seguir centrado con él. */
    .header--scrolled .lang-switcher--desktop {
        height: var(--logo-height-fixed);
    }
}

/* ═══════════════════════════════════════════════════════════════
   Language switcher — selector de idioma (P4, P5)
   Misma tipografía y colores que el menú; desplegable.
   Tokens: --menu-*, --color-nav-*, --color-submenu*, --color-surface
   ═══════════════════════════════════════════════════════════════ */
.lang-switcher {
    flex: 0 0 auto;
    font-size: var(--menu-font-size);
    text-transform: var(--menu-text-transform);
    letter-spacing: var(--menu-letter-spacing);
    font-weight: var(--menu-font-weight);
}

.lang-switcher__list {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lang-switcher__item {
    position: relative;
}

.lang-switcher__link {
    display: inline-block;
    padding: var(--space-1) 0;
    border: 0;
    background: none;
    color: var(--color-nav-link);
    font: inherit;
    letter-spacing: inherit;
    text-align: left;
    cursor: pointer;
}

.lang-switcher__link:hover,
.lang-switcher__link:focus {
    color: var(--color-link-hover);
}

.lang-switcher__link--current {
    color: var(--color-nav-active);
}

/* Indicador visible de que es desplegable (flecha), como la web actual (Xavi). */
.lang-switcher__link--current::after {
    content: "\25BE";
    margin-left: var(--space-1);
}

.lang-switcher__submenu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 100%;
    margin: 0;
    padding: var(--space-1) 0;
    list-style: none;
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-duration) var(--transition-easing);
}

.lang-switcher__item:hover .lang-switcher__submenu,
.lang-switcher__item:focus-within .lang-switcher__submenu {
    opacity: 1;
    pointer-events: auto;
}

.lang-switcher__submenu .lang-switcher__link {
    display: block;
    padding: var(--space-1) var(--space-2);
    color: var(--color-submenu);
    white-space: nowrap;
}

.lang-switcher__submenu .lang-switcher__link:hover,
.lang-switcher__submenu .lang-switcher__link:focus {
    color: var(--color-submenu-hover);
    background-color: var(--color-surface-alt);
}

/* El selector va dentro de `.header__nav`: en móvil aparece al final del
   panel del menú abierto; en escritorio (≥1000px) se reposiciona arriba a
   la derecha de la fila 1 (marca). El submenú es desplegable (hover/focus)
   en todos los cortes; el disparador (idioma actual) es focusable para que
   funcione también en táctil. */

/* Selector de idioma COMPACTO (cabecera móvil): botón con el código del
   idioma actual + chevron y menú desplegable con los otros tres códigos.
   Va en la fila 1, a la derecha, al --gutter. El menú abierto queda por
   encima del contenido y del slider (--z-overlay) y por debajo del panel del
   menú abierto (--z-menu). Lo abre/cierra menu.js. */
.lang-switcher--compact {
    position: relative;
    display: flex;
    align-items: center;
}

.lang-switcher__toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-1);
    min-width: var(--lang-switcher-min-size);
    min-height: var(--lang-switcher-min-size);
    padding: 0;
    border: 0;
    background: none;
    color: var(--color-nav-active);
    font: inherit;
    letter-spacing: inherit;
    cursor: pointer;
}

.lang-switcher__toggle:hover,
.lang-switcher__toggle:focus {
    color: var(--color-link-hover);
}

/* Chevron (indicador de desplegable), coherente con el de escritorio. */
.lang-switcher__toggle::after {
    content: "\25BE";
}

.lang-switcher__menu {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 100%;
    margin: 0;
    padding: var(--space-1) 0;
    list-style: none;
    background-color: var(--color-surface);
    border: var(--border-width) solid var(--color-border);
    z-index: var(--z-overlay);
    display: none;
}

.lang-switcher--open .lang-switcher__menu {
    display: block;
}

.lang-switcher__menu-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--lang-switcher-min-size);
    padding: 0 var(--space-2);
    color: var(--color-submenu);
    text-decoration: none;
    white-space: nowrap;
}

.lang-switcher__menu-link:hover,
.lang-switcher__menu-link:focus {
    color: var(--color-submenu-hover);
    background-color: var(--color-surface-alt);
}

/* Fila «ES · EN · PT · FR» al final del panel del menú móvil. El idioma
   actual se marca con color y aria-current="true"; los demás enlazan a su
   traducción. Solo se muestra en móvil (oculta en el bloque ≥1000px). */
.lang-switcher--bar {
    display: flex;
}

.lang-switcher__bar-list {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lang-switcher__bar-item {
    display: flex;
    align-items: center;
}

/* Separador «·» entre códigos (menos el primero). */
.lang-switcher__bar-item + .lang-switcher__bar-item::before {
    content: "\00B7";
    margin: 0 var(--space-1);
    color: var(--color-submenu);
}

.lang-switcher__bar-link {
    display: inline-flex;
    align-items: center;
    min-height: var(--lang-switcher-min-size);
    padding: 0 var(--space-1);
    color: var(--color-nav-link);
    text-decoration: none;
}

.lang-switcher__bar-link:hover,
.lang-switcher__bar-link:focus {
    color: var(--color-link-hover);
}

.lang-switcher__bar-link--current {
    color: var(--color-nav-active);
}

/* Visibilidad por variante (mobile-first). En móvil solo se usan el selector
   compacto (fila 1) y la fila del panel; el de escritorio se oculta. En
   ≥1000px, al revés. Este bloque va al FINAL de la sección para ganar por
   orden de fuente a las reglas base (misma especificidad). */
.lang-switcher--desktop {
    display: none;
}

@media (min-width: 1000px) {
    .lang-switcher--desktop {
        display: flex;
    }

    .lang-switcher--compact,
    .lang-switcher--bar {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Footer — pie con enlaces legales (P9, P10)
   Tokens: --color-primary, --color-footer-link, --space-*
   ═══════════════════════════════════════════════════════════════ */
.footer {
    background-color: var(--color-primary);
    color: var(--color-footer-text);
}

.footer__content {
    padding-block: var(--space-4);
}

.footer__nav-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.footer__nav-list a {
    color: var(--color-footer-link);
    text-decoration: underline;
}

.footer__nav-list a::before {
    content: "– ";
}

.footer__nav-list a:hover,
.footer__nav-list a:focus {
    color: var(--color-footer-link);
}

/* ═══════════════════════════════════════════════════════════════
   Page content — página genérica (P11, P12)
   Tokens: --page-title-*, --measure, --space-*
   ═══════════════════════════════════════════════════════════════ */
.page-content {
    /* Hueco con la banda del título ≈30px (producción): se reduce el
       padding superior a --space-3 y el primer bloque del cuerpo no aporta
       margen propio (ver `.page-content__body > :first-child`). */
    padding-block: var(--space-3) var(--space-4);
}

/* Título de página unificado (antes .page-content__title y .page-title):
   lo usan la banda azul de la página genérica y la cabecera del listado. */
.page-title {
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: var(--border-width) solid var(--color-border);
    font-size: var(--page-title-font-size);
    line-height: var(--page-title-line-height);
    text-transform: var(--page-title-text-transform);
    letter-spacing: var(--page-title-letter-spacing);
    font-weight: var(--page-title-font-weight);
    color: var(--color-heading);
}

/* Banda azul del título (modificador .section--primary): título en blanco,
   centrado y sin filete — la propia banda es el recurso de identidad. */
.section--primary .page-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0;
    color: var(--color-surface);
    text-align: center;
}

/* Banda de título (.section--band): el h1 usa un tamaño propio, MENOR que la
   escala general de página (--page-title-band-font-size) y line-height: 1
   para que la altura salga del font-size; el aire vertical lo aporta el
   padding de .section--band (--section-band-padding-block). */
.section--band .page-title {
    font-size: var(--page-title-band-font-size);
    line-height: 1;
}

/* P12 + P5 (2026-10-18): la COLUMNA DE TEXTO es --measure centrada en el
   .container. Se aplica al propio cuerpo para que TODO su contenido —texto,
   figuras e imágenes— comparta el mismo borde izquierdo y derecho y ninguna
   imagen se salga por la izquierda. Antes las figuras/imágenes tenían
   `max-width:none` y arrancaban en el borde del .container, no en la columna
   de texto. */
.page-content__body {
    max-width: var(--measure);
    margin-inline: auto;
}

/* Todo bloque del contenido se limita a la columna. */
.page-content__body > * {
    max-width: var(--measure);
    margin-inline: auto;
}

/* Toda imagen del contenido respeta el ancho de la columna. */
.page-content__body img {
    max-width: 100%;
    height: auto;
}

/* Logo de firma de la circular (P5, 2026-10-18). Las circulares incrustan el
   logo de CLM en el cuerpo. Se identifica por ARCHIVO (`logo`/`LOGO` en el
   src: logo-CLM-*.png, LOGO_CLM_*.png) y, en las re-subidas con nombre
   genérico (image.png/image-N.png), por el par width/height que WordPress
   emite desde el adjunto: 284×86, 304×92, 219×66 y 227×69. Se normaliza al
   ancho del token (~170px) y NO afecta a ninguna otra imagen del contenido
   (los adjuntos legítimos no comparten nombre ni esos pares exactos).
   Tokens: --content-signature-logo-width */
.page-content__body img[src*="logo" i],
.page-content__body img[width="284"][height="86"],
.page-content__body img[width="304"][height="92"],
.page-content__body img[width="219"][height="66"],
.page-content__body img[width="227"][height="69"] {
    width: var(--content-signature-logo-width);
    height: auto;
}

/* Aire vertical entre el texto y las imágenes/figuras del contenido (Xavi
   2026-10-16): en Internacional la imagen va pegada al último párrafo, así
   que se le da margen arriba y abajo (--space-4) para despegarla tanto del
   texto anterior como del bloque siguiente. Token: --space-4. */
.page-content__body figure,
.page-content__body .wp-block-image,
.page-content__body > img {
    margin-block: var(--space-4);
}

/* El primer bloque del contenido no lleva margen superior: el hueco con la
   banda lo aporta el padding de `.page-content` (≈30px, como producción). */
.page-content__body > :first-child {
    margin-top: 0;
}

/* Encabezados del contenido (.page-content__body): H2 y H3 en el azul de
   identidad (--color-primary, Xavi 2026-10-16) con la escala propia del
   contenido. El mismo estilo tipográfico se reutiliza en el título del
   bloque «Últimas circulares» (.latest__title → H2) y en los títulos de
   tarjeta del listado (.post-card__title → H3).
   H2: --content-h2-font-size (19px), MAYÚSCULAS con letter-spacing (los
   hereda de la escala general h2). H3: --content-h3-font-size (16px), SIN
   mayúsculas y SIEMPRE por encima del cuerpo (14px). Jerarquía: H1 de la
   banda 22 > H2 19 > H3 16 > cuerpo 14.
   Tokens: --content-h2-font-size, --content-h3-font-size, --color-primary,
   --h2-text-transform, --h2-letter-spacing */
.page-content__body h2,
.latest__title {
    font-size: var(--content-h2-font-size);
    text-transform: var(--h2-text-transform);
    letter-spacing: var(--h2-letter-spacing);
    color: var(--color-primary);
}

.page-content__body h3,
.post-card__title {
    font-size: var(--content-h3-font-size);
    text-transform: none;
    letter-spacing: normal;
    color: var(--color-primary);
}

/* Márgenes del contenido de texto (solo dentro del cuerpo): antes de cada H2
   --space-4; entre H2 y H3 contiguos muy juntos --space-1 (se anula el margen
   inferior del H2 para que el colapso de márgenes no lo agrande); entre H3 y
   su párrafo --space-2.
   Tokens: --space-4, --space-1, --space-2 */
.page-content__body h2 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
}

.page-content__body h3 {
    margin-top: var(--space-4);
    margin-bottom: var(--space-2);
}

.page-content__body h2:has(+ h3) {
    margin-bottom: 0;
}

.page-content__body h2 + h3 {
    margin-top: var(--space-1);
}

/* Listas del contenido: mismo ritmo y sangría que la web actual — margen
   superior respecto al párrafo anterior, marcador interior
   (`list-style-position: inside`) y bloque sangrado a --space-4.
   Color: el `body` fija --color-body (#818181) y los párrafos lo sobreescriben
   a --color-text (#3d3d3d) con la regla global `p`; las listas heredaban el
   gris de fondo y quedaban más claras que el texto. Se alinean con el texto
   del contenido usando el MISMO token que los párrafos. */
.page-content__body ul,
.page-content__body ol {
    margin-top: var(--space-2);
    padding-left: var(--space-4);
    list-style-position: inside;
    color: var(--color-text);
}

/*  Los enlaces del contenido que son URLs largas (p. ej. los enlaces a la
    ayuda de cookies de los navegadores en la Política de cookies) no contienen
    espacios y, sin regla de corte, desbordan a la derecha en móvil estrecho
    (medido: hasta 370px en un viewport de 320). Se permite el corte solo cuando
    la palabra no cabe; en escritorio no altera el render (las URLs caben). */
.page-content__body a {
    overflow-wrap: break-word;
}

/* ═══════════════════════════════════════════════════════════════
   Entry header — cabecera de la entrada (single.php)
   ───────────────────────────────────────────────────────────
   Sustituye la franja azul de identidad del título (`.section--band` +
   `.section--primary`) por una cabecera sobre FONDO BLANCO y alineada a la
   COLUMNA DE TEXTO del artículo: `__inner` comparte con
   `.page-content__body > *` la medida --measure centrada en el .container,
   así que el borde izquierdo del título coincide con el del cuerpo. No es
   una franja a ancho completo ni un texto centrado.
   Orden del bloque: etiqueta de categoría (arriba), título, entradilla
   opcional y fecha completa con año; cierra con un filete fino que lo
   separa del cuerpo.
   El título va en formato frase (`text-transform: none`: las mayúsculas del
   rótulo, si las hay, vienen del propio título de la BD), en --color-primary
   y con `text-wrap: balance`; su escala es `--entry-title-font-size`
   (26px móvil → 32px escritorio).
   Tokens: --entry-title-font-size, --entry-category-*, --entry-subtitle-*,
   --entry-date-*, --measure, --space-*, --border-width, --color-border,
   --color-primary, --color-text, --color-body, --h1-line-height,
   --h1-font-weight
   ═══════════════════════════════════════════════════════════════ */
.entry-header {
    padding-top: var(--space-2);
    padding-bottom: var(--space-3);
    border-bottom: var(--border-width) solid var(--color-border);
    margin-bottom: var(--space-3);
}

.entry-header__inner {
    max-width: var(--measure);
    margin-inline: auto;
}

/* Etiqueta de categoría: pequeña, en mayúsculas con espaciado y color
   primario (el mismo azul de identidad de los encabezados de contenido). */
.entry-header__category {
    margin-bottom: var(--space-1);
}

/* La MISMA etiqueta de categoría se reutiliza en la tarjeta del listado y de
   los archivos (.post-card__category): mismo rol visual, una sola regla
   tipográfica (regla §4 del contrato). Solo cambia su colocación, que la fija
   la fila de metadatos de la tarjeta. */
.entry-header__category,
.post-card__category {
    font-size: var(--entry-category-font-size);
    line-height: var(--entry-category-line-height);
    text-transform: uppercase;
    letter-spacing: var(--entry-category-letter-spacing);
    font-weight: var(--entry-category-font-weight);
    color: var(--color-primary);
}

.entry-header__title {
    font-size: var(--entry-title-font-size);
    line-height: var(--h1-line-height);
    font-weight: var(--h1-font-weight);
    text-transform: none;
    text-wrap: balance;
    overflow-wrap: break-word;
    color: var(--color-primary);
}

/* Entradilla (extracto manual del post): gris oscuro del texto y algo mayor
   que el cuerpo (--entry-subtitle-font-size 16px frente a los 14px de
   --body-font-size). */
.entry-header__subtitle {
    margin-top: var(--space-2);
    font-size: var(--entry-subtitle-font-size);
    line-height: var(--entry-subtitle-line-height);
    color: var(--color-text);
}

/* Fecha completa (con año) como línea de metadatos bajo el título. */
.entry-header__date {
    display: block;
    margin-top: var(--space-2);
    font-size: var(--entry-date-font-size);
    line-height: var(--entry-date-line-height);
    color: var(--color-body);
}

/* ═══════════════════════════════════════════════════════════════
   Componentes de Fase 3 (estado real)
   ───────────────────────────────────────────────────────────
   .post-list     — ESTILIZADO: pila vertical de tarjetas; reutiliza la
                    primitiva .grid y la estrecha a una columna
   .post-card     — ESTILIZADO: __date, __title, __excerpt (M4: sin __time)
   .pagination    — ESTILIZADO: ul interna
   .team/.member  — ESTILIZADO (piloto de equipo)
   .contact       — ESTILIZADO: solo __image, __map y __intro; los datos usan
                    el componente .contact-data (punto 7, 2026-10-18): parejas
                    etiqueta+valor con icono primario, pegadas por dentro y
                    separadas por fuera, dos columnas en escritorio
   .contact-data  — ESTILIZADO (punto 7, 2026-10-18): __list, __item/--address/
                    --economic/--legal/--email, __icon, __link, __label, __value
   .slider        — ESTILIZADO (portada, M5): __track, __slide/--active,
                    __overlay, __link y .grants__logos. Sin controles,
                    pausa ni indicadores (full-bleed, autoplay con fundido)
   .front-intro   — ESTILIZADO (portada, M6): __firm, __partners
   .front-areas   — ESTILIZADO (portada, M7): __list (marcador discreto)
   .entry-header  — ESTILIZADO (entrada, punto 4 2026-10-18): __inner,
                    __category, __title, __subtitle, __date — cabecera sobre
                    blanco alineada a la columna de texto (sustituye la banda
                    azul del título en single.php)
   .circular      — DESCARTADO: la entrada reutiliza .page-content y
                    .page-content__body (DESIGN.md §15.2.2)
   .cookie-notice — declarado; lo pinta el plugin de consentimiento
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   Listado de comunicación y archivos (fecha, título, extracto acotado)
   ───────────────────────────────────────────────────────────
   `.post-list` reutiliza la primitiva `.grid` (display) y la estrecha a una
   sola columna: el listado es una pila vertical de tarjetas.
   `.post-card` va en UNA sola columna y en flujo vertical:
   fecha (con año, arriba) → título → extracto. La antigua rejilla de dos
   columnas (fecha a la izquierda estrechando el texto) desaparece.
   La fila de metadatos (`.post-card__meta`) coloca la categoría —mismo rol
   visual que `.entry-header__category`, ver arriba— junto a la fecha.
   El extracto se acota con `line-clamp` (3 líneas en móvil, 2 en escritorio)
   y el aire vertical entre entradas se reduce (--post-card-padding-block),
   conservando el filete fino.
   Tokens: --space-*, --border-width, --color-border, --color-submenu,
   --color-text-secondary, --entry-category-*, --entry-date-*,
   --post-card-*
   ─────────────────────────────────────────────────────────── */

.post-list {
    grid-template-columns: 1fr;
    gap: 0;
}

.post-card {
    padding-block: var(--post-card-padding-block);
}

/* Filete entre tarjetas (nunca antes de la primera). */
.post-card + .post-card {
    border-top: var(--border-width) solid var(--color-border);
}

/* Fila de metadatos sobre el título: categoría · fecha. */
.post-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--post-card-meta-gap);
    margin-bottom: var(--post-card-meta-margin-bottom);
}

/* Separador «·» entre la categoría y la fecha. */
.post-card__category + .post-card__date::before {
    content: "\00B7";
    margin-inline-end: var(--post-card-meta-gap);
    color: var(--color-submenu);
}

/* Fecha de la entrada: pequeña, con año y formateada por idioma
   (`clm_format_date_long()`, el mismo formato de la cabecera de la entrada),
   en el gris secundario con contraste AA. */
.post-card__date {
    display: block;
    font-size: var(--entry-date-font-size);
    line-height: var(--entry-date-line-height);
    color: var(--color-text-secondary);
}

/* El título es un `h3`: toma el estilo del H3 de contenido (16px, sin
   mayúsculas, --color-primary; regla agrupada de encabezados, arriba). El
   enlace hereda el color del título. */
.post-card__title a {
    color: inherit;
}

.post-card__title a:hover,
.post-card__title a:focus-visible {
    color: var(--color-link-hover);
}

.post-card__excerpt {
    margin-top: var(--space-1);
}

/* Extracto en el gris secundario con contraste AA (el `p` que genera
   `the_excerpt()` trae --color-text de la capa base). */
.post-card__excerpt,
.post-card__excerpt p {
    color: var(--color-text-secondary);
}

/* Extracto acotado: 3 líneas en móvil (2 en escritorio, ver el bloque ≥1000px)
   con puntos suspensivos del navegador; el "[…]" del extracto automático se
   retira en el filtro `excerpt_more` (inc/template-parts.php). */
.post-card__excerpt p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--post-card-excerpt-lines);
    line-clamp: var(--post-card-excerpt-lines);
    overflow: hidden;
}

@media (min-width: 1000px) {
    .post-card__excerpt p {
        -webkit-line-clamp: var(--post-card-excerpt-lines-desktop);
        line-clamp: var(--post-card-excerpt-lines-desktop);
    }
}

/* Ritmo de párrafos del contenido de la entrada (circular). Producción
   separa los párrafos del post con 22px (medido a 1440px) y el contenido de
   página no lleva margen propio; el modificador `--entry` acota esa
   diferencia al cuerpo de la circular sin alterar las páginas de contenido
   ya validadas. `p + p` (y no un margen inferior en todos) evita el hueco
   final tras el último párrafo. Token: --space-2 (20px, escala fluida). */
.page-content__body--entry p + p {
    margin-top: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════
   Latest — «Últimas circulares» al pie de la entrada (single.php)
   ───────────────────────────────────────────────────────────
   Separación grande respecto al cuerpo (--space-5) y un filete de 1px
   --color-border antes del bloque; el título reutiliza el estilo del H2 de
   contenido (.latest__title, ver encabezados del contenido) y las tarjetas
   reutilizan .post-card (cuyo título es un H3). El bloque cierra con
   --space-5 de aire hasta el pie.
   Tokens: --space-5, --space-3, --border-width, --color-border
   ═══════════════════════════════════════════════════════════════ */
.latest {
    margin-top: var(--space-5);
    margin-bottom: var(--space-5);
    padding-top: var(--space-3);
    border-top: var(--border-width) solid var(--color-border);
}

.latest__title {
    margin-bottom: var(--space-3);
}

/* ═══════════════════════════════════════════════════════════════
   Pagination — paginación del listado y de los archivos
   ───────────────────────────────────────────────────────────
   Un único `<nav class="pagination">` centrado con `aria-label`
   traducible. El CSS alterna dos composiciones:
     · escritorio (≥1000px): `.pagination__desktop` con «← Anteriores»,
       números como TEXTO primario (sin borde ni fondo) con área
       ≥44×44px, y «Siguientes →». La página actual es un bloque con
       fondo primario y número blanco (`aria-current="page"`, sin
       enlace); la elipsis la aporta `paginate_links()`.
     · móvil (<1000px): `.pagination__mobile`, una sola línea
       «← Anterior · Página X de Y · Siguiente →». Los extremos son
       enlaces con área ≥44px y el hueco se conserva aunque no haya
       enlace (rejilla 1fr auto 1fr), para no descentrar el centro.
   Aire vertical generoso en tokens: nunca queda pegada al pie.
   Tokens: --pagination-*, --color-primary, --color-surface,
   --color-surface-alt, --color-inverse, --radius, --space-*,
   --transition-*, --focus-*
   ═══════════════════════════════════════════════════════════════ */

.pagination {
    margin-top: var(--pagination-margin-top);
    margin-bottom: var(--pagination-margin-bottom);
}

/* Escritorio: fila centrada (pasos + números). En móvil se oculta. */
.pagination__desktop {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.pagination__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--pagination-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.pagination__item {
    line-height: 1;
}

/* Números y elipsis: texto primario sin caja. El área clicable mide
   --pagination-number-size (44px) en ambos ejes (WCAG 2.5.5). */
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: var(--pagination-number-size);
    min-height: var(--pagination-number-size);
    padding-inline: var(--space-1);
    border-radius: var(--radius);
    color: var(--color-primary);
    font-size: var(--pagination-font-size);
    line-height: 1;
    text-align: center;
    text-decoration: none;
    transition:
        color var(--transition-duration) var(--transition-easing),
        background-color var(--transition-duration) var(--transition-easing);
}

/* Hover/foco de los números: fondo muy suave y subrayado sutil. El
   contraste se conserva (primario sobre --color-surface-alt). */
.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus-visible {
    background-color: var(--color-surface-alt);
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: var(--focus-outline-offset);
}

/* Página actual: bloque primario con número blanco, coherente con el
   radio pequeño de los botones. No es enlace (lo pinta `paginate_links`
   como `<span aria-current="page">`). */
.pagination .page-numbers.current {
    border-radius: var(--radius);
    background-color: var(--color-primary);
    color: var(--color-inverse);
    text-decoration: none;
}

/* Elipsis: sin área de clic, alineada con los números. */
.pagination .page-numbers.dots {
    min-width: var(--pagination-number-size);
    color: var(--color-text-secondary);
}

/* Pasos «← Anteriores» / «Siguientes →»: enlaces de texto, sin
   mayúsculas forzadas, con área ≥44px y hover subrayado. */
.pagination__step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--pagination-number-size);
    padding-inline: var(--space-1);
    color: var(--color-primary);
    font-size: var(--pagination-step-font-size);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.pagination__step:hover,
.pagination__step:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: var(--focus-outline-offset);
}

.pagination__arrow {
    font-size: var(--pagination-step-font-size);
    line-height: 1;
}

/* Móvil: una sola línea con los pasos a los extremos. */
.pagination__mobile {
    display: none;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: var(--pagination-gap);
}

.pagination__slot {
    display: flex;
    align-items: center;
    min-width: 0;
    min-height: var(--pagination-number-size);
}

.pagination__slot--prev {
    justify-content: flex-start;
}

.pagination__slot--next {
    justify-content: flex-end;
}

.pagination__mobile-step {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: var(--pagination-number-size);
    color: var(--color-primary);
    font-size: var(--pagination-mobile-font-size);
    line-height: 1.2;
    text-decoration: none;
    white-space: nowrap;
}

.pagination__mobile-step:hover,
.pagination__mobile-step:focus-visible {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: var(--focus-outline-offset);
}

.pagination__status {
    color: var(--color-text);
    font-size: var(--pagination-mobile-font-size);
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
}

@media (max-width: 999.98px) {
    .pagination {
        margin-top: var(--pagination-mobile-margin-top);
        margin-bottom: var(--pagination-mobile-margin-bottom);
    }

    .pagination__desktop {
        display: none;
    }

    .pagination__mobile {
        display: grid;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Team — página de equipo (piloto Fase 3; mejora M3)
   Tokens: --space-*, --h3-*, --h6-*, --color-*, --member-photo-*
   Reutiliza primitivas: .section--primary (banda de título), .container
   y .grid con sus modificadores --2/--3 (socios en 2 columnas y equipos
   de área en 3, como la web actual). La página se pinta desde el CPT
   clm_miembro; el HTML heredado del contenido aún no se imprime.
   ─────────────────────────────────────────────────────────── */

.team {
    /* Hueco con la banda del título ≈30px y cierre ≈50px, igual que la
       página genérica (.page-content). Los bloques internos se apilan
       con el ritmo de --space-4 (50px). */
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-block: var(--space-3) var(--space-4);
}

/* Las áreas de «El Equipo» se apilan entre sí con el mismo ritmo. */
.team__areas {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

/* Cada área: título + rejilla de sus miembros. */
.team__area {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Título de sección de área: mismas medidas que los h3 del tema (17px,
   mayúsculas, espaciado 1px) y azul primario, como los títulos de sección
   de la web actual («el azul es estructura»). Centrado como producción. */
.team__area-title {
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height);
    text-transform: var(--h3-text-transform);
    letter-spacing: var(--h3-letter-spacing);
    font-weight: var(--h3-font-weight);
    color: var(--color-primary);
    text-align: center;
}

/* ═══════════════════════════════════════════════════════════════
   Member — ficha de miembro (piloto Fase 3)
   Tokens: --space-*, --h6-*, --color-*, --member-photo-*
   Foto (B/N ya en el archivo: no se recolorea), nombre, cargo opcional
   y biografía, apilados en la celda del grid.
   ─────────────────────────────────────────────────────────── */

.member {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Foto centrada en la celda; la foto 300×400 queda con una separación
   mayor hasta el nombre (≈ producción: 10–20px). */
.member__photo {
    margin-bottom: var(--space-2);
    text-align: center;
}

.member__photo img {
    width: var(--member-photo-width);
    height: var(--member-photo-height);
}

/* Nombre del miembro: estilo h6 (13px, mayúsculas, espaciado 1px),
   centrado — igual que los nombres del equipo en la web actual. */
.member__name {
    font-size: var(--h6-font-size);
    line-height: var(--h6-line-height);
    text-transform: var(--h6-text-transform);
    letter-spacing: var(--h6-letter-spacing);
    font-weight: var(--h6-font-weight);
    color: var(--color-heading);
    text-align: center;
}

/* Cargo opcional (hoy Eva y Rebeca): texto secundario centrado, con el
   mismo peso en negrita que producción. Solo existe si el campo `cargo`
   tiene valor (los socios lo tienen vacío). */
.member__cargo {
    color: var(--color-body);
    font-weight: var(--h6-font-weight);
    text-align: center;
}

/* Biografía: párrafos con ritmo propio dentro de la ficha (el reset de
   base deja los <p> sin margen). */
.member__bio p + p {
    margin-top: var(--space-1);
}

/* ═══════════════════════════════════════════════════════════════
   Contact — página de contacto (Fase 3)
   Tokens: --space-*, --map-height, --contact-data-*
   Reutiliza primitivas: la banda de título (.section--band
   .section--primary .container) y las dos columnas datos/introducción
   (.grid--2). Del componente se estilizan los elementos de página
   __image (encuadre de la cabecera) y __map (alto real de producción);
   __intro solo contiene el párrafo del editor y NO tiene reglas propias
   (hereda la tipografía base; el hueco entre las columnas lo da .grid--2).
   Los datos usan el componente .contact-data (punto 7, 2026-10-18): cada
   dato es una pareja «etiqueta pequeña + valor» con un icono primario
   delante, pegada por dentro y separada por fuera; ya NO se componen con
   .stack--compact / .cluster.
   ─────────────────────────────────────────────────────────── */

.contact {
    /* Hueco con la banda del título ≈30px y cierre ≈50px, como la página
       genérica (.page-content) y la de equipo (.team); los bloques internos
       se apilan con el ritmo de --space-4 (50px). */
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
    padding-block: var(--space-3) var(--space-4);
}

/* Imagen de cabecera (tamaño clm-cabecera-pagina, 1130×550): ocupa el ancho
   del eje. La foto es B/N en el archivo: no se recolorea con CSS. */
.contact__image img {
    display: block;
    width: 100%;
    height: auto;
}

/* La dirección no se muestra en cursiva (el reset de base no estiliza
   <address> y el navegador la pone en italic por defecto). */
.contact address {
    font-style: normal;
}

/*  Punto 7 (2026-10-18): LISTA DE DATOS de contacto. Cada dato es una pareja
    «etiqueta pequeña + valor» con un icono primario delante. El hueco DENTRO
    de la pareja es pequeño (--contact-data-item-gap: etiqueta y valor «pegados»)
    y el hueco ENTRE parejas es mayor (--contact-data-row-gap), de modo que cada
    pareja se lee como un grupo. La lista queda alineada a la IZQUIERDA, a juego
    con el texto de la página. El valor (incluida la dirección) usa --color-text
    (mismo color de texto del resto de la página, contraste AA sobre blanco), no
    el gris claro de antes. En ESCRITORIO, si hay ancho, pasa a DOS columnas:
    dirección + correo / teléfonos. */
.contact-data {
    display: block;
    color: var(--color-text);
    overflow-wrap: anywhere;
}

.contact-data__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--contact-data-row-gap);
    list-style: none;
    padding: 0;
}

.contact-data__item {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--contact-data-icon-gap);
    align-items: start;
}

/* Icono discreto (SVG de trazo = currentColor) en el color primario. */
.contact-data__icon {
    display: inline-flex;
    width: var(--contact-data-icon-size);
    height: var(--contact-data-icon-size);
    color: var(--color-primary);
}

.contact-data__icon svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* La pareja entera es pulsable (tel: / mailto: / Google Maps) y hereda el color
   de texto; el hover/foco pasa al color de enlace (como el resto del sitio). */
.contact-data__link {
    display: flex;
    flex-direction: column;
    gap: var(--contact-data-item-gap);
    min-width: 0;
    color: var(--color-text);
}

.contact-data__link:hover,
.contact-data__link:focus-visible {
    color: var(--color-link-hover);
}

.contact-data__label {
    font-size: var(--contact-data-label-font-size);
    line-height: var(--contact-data-label-line-height);
    font-weight: 600;
}

.contact-data__value {
    font-size: var(--body-font-size);
    line-height: var(--contact-data-value-line-height);
}

/* Mapa de Google: ancho del eje y la ALTURA REAL de producción
   (--map-height corregido a 300px tras medir /contacto/ en producción),
   sin filete. */
.contact__map iframe {
    display: block;
    width: 100%;
    height: var(--map-height);
    border: 0;
}

/*  En ESCRITORIO (≥ --bp-desktop 1000px; los media queries no admiten var())
    la lista pasa a DOS columnas cuando la columna de datos tiene ancho: a la
    izquierda la dirección y el correo, a la derecha los teléfonos. El ORDEN del
    marcado (móvil) es dirección · económica · legal · correo; en escritorio se
    reordena con áreas de rejilla, sin duplicar estructura. */
@media (min-width: 1000px) {
    .contact-data__list {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "address economic"
            "email   legal";
    }

    .contact-data__item--address {
        grid-area: address;
    }

    .contact-data__item--economic {
        grid-area: economic;
    }

    .contact-data__item--legal {
        grid-area: legal;
    }

    .contact-data__item--email {
        grid-area: email;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Slider — portada FULL-BLEED (M5; CPT clm_slide, rotación desde slider.js)
   Tokens: --slider-height, --slider-fade-duration, --slider-overlay-*,
           --color-primary, --transition-easing, --space-*
   Franja de imagen a 100 % de ventana (no limitada al eje). Las imágenes
   las inserta slider.js desde data-slides, apiladas y alternadas con
   fundido (crossfade). Sin flechas, sin pausa y sin indicadores.
   ─────────────────────────────────────────────────────────── */

.slider {
    /* Fondo azul de identidad mientras carga la imagen (evita el destello
       blanco durante la carga). Full-bleed: 100 % de ventana, sin tope de ancho.
       z-index explícito en el nivel de contenido: el slider crea contexto de
       apilamiento propio (slides absolutos) y queda siempre por debajo del
       menú móvil (--z-menu), nunca por encima por orden del DOM. */
    position: relative;
    z-index: var(--z-content);
    width: 100%;
    height: var(--slider-height);
    overflow: hidden;
    background-color: var(--color-primary);
}

.slider__track {
    position: relative;
    height: 100%;
}

/* Cada slide ocupa la franja completa; slider.js alterna el activo y el
   fundido lo resuelve la transición de opacidad (crossfade ≈1 s). */
.slider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--slider-fade-duration) var(--transition-easing);
}

.slider__slide--active {
    opacity: 1;
}

/* La imagen rellena el recuadro (cover) sin deformarse. */
.slider__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Banda de texto sobre el slide: solo aparece cuando el slide tiene campo
   `texto` (ver slider.js). */
.slider__overlay {
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    padding: var(--space-2) var(--space-3);
    background-color: var(--slider-overlay-bg);
    color: var(--slider-overlay-color);
}

/* El color de la banda manda sobre la regla global `p` (capa base). */
.slider__overlay p {
    color: inherit;
}

.slider__link {
    color: var(--slider-overlay-color);
    text-decoration: underline;
}

.slider__link:hover,
.slider__link:focus {
    color: var(--slider-overlay-color);
}

/* MÓVIL (punto 4, 2026-10-18): el slider pasa a proporción 16:9 —una franja
   ancha y baja— en lugar de los 300 px de escritorio, que en un móvil de
   390 px quedaba casi cuadrado y empujaba el contenido muy abajo. La altura se
   DERIVA del ancho con `aspect-ratio` (sin alturas fijas en px); el `max-height`
   con el token de escritorio garantiza que en ningún ancho por debajo del corte
   el slider supere la altura anterior (evita regresión en tablet/large, donde
   16:9 daría más de 300 px). La imagen sigue a `cover` y `object-position:
   center` conserva la franja de skyline y puerto que ya enmarcaba la vista
   móvil: la ventana 16:9 centrada es un superconjunto de la ventana a 300 px,
   así que no recorta nada relevante. Ámbito estricto por debajo del corte de
   escritorio (literal = --bp-desktop 1000px): en ≥1000px el slider conserva
   exactamente su altura de línea base (300 px). */
@media (max-width: 999.98px) {
    .slider {
        height: auto;
        aspect-ratio: 16 / 9;
        max-height: var(--slider-height);
    }

    .slider__slide img {
        object-position: center;
    }
}

/* Con movimiento reducido no hay fundido (slider.js tampoco arranca el autoplay). */
@media (prefers-reduced-motion: reduce) {
    .slider__slide {
        transition: none;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Grants — bloque de ayudas FEDER/XPANDE (fila de logos centrada)
   Tokens: --grant-logo-size, --space-*
   ─────────────────────────────────────────────────────────── */

.grants__logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}

.grants__logos img {
    width: var(--grant-logo-size);
    height: auto;
}

/* ═══════════════════════════════════════════════════════════════
   Front page — portada (M6 + M7)
   Tokens: --space-*, --color-primary, --border-width
   ─────────────────────────────────────────────────────────── */

/* M6 — "La firma" + "Los socios" en dos columnas (primitiva .grid--2) dentro
   del eje; en móvil se apilan. El texto de La firma pierde las negritas y el
   sangrado heredados (se limpian en la plantilla) y recupera el azul de los
   títulos de sección. La foto de los socios lleva el pie centrado. */
.front-intro {
    align-items: start;
}

.front-intro h3 {
    margin-bottom: var(--space-2);
    color: var(--color-primary);
}

.front-intro__firm p + p {
    margin-top: var(--space-2);
}

.front-intro__partners img {
    display: block;
    width: 100%;
    height: auto;
}

.front-intro__partners figcaption {
    margin-top: var(--space-1);
    text-align: center;
}

/* M7 — Bloque azul de áreas: dos columnas (primitiva .grid--2) con
   separación generosa; cada columna la sirve el mismo componente (helper
   clm_the_front_area) apoyado en la primitiva .stack. */
.front-areas {
    gap: var(--space-4);
}

/* Marcador de lista discreto: guion blanco en vez del punto por defecto. */
.front-areas__list {
    padding-left: 0;
    list-style: none;
}

.front-areas__list li::before {
    content: "– ";
}

/* El botón «Conoce al equipo» cierra la columna de La firma: separación
   respecto al último párrafo con el ritmo de tokens. */
.front-intro__firm .button {
    margin-top: var(--space-3);
}

/* Cada columna del bloque azul ocupa toda la altura de la fila (grid con
   align-items: stretch) y su botón «Más información» se empuja al fondo
   (margin-top: auto), de modo que ambos botones quedan a la MISMA altura
   aunque los textos de las columnas tengan distinta longitud. */
.front-areas > .stack {
    height: 100%;
}

.front-areas .button {
    margin-top: auto;
    /* El botón conserva su ancho natural (como el de La firma) en vez de
       estirarse a todo lo ancho de la columna (align-items: stretch de .stack). */
    align-self: flex-start;
}

/* ═══════════════════════════════════════════════════════════════
   Button — botón reutilizable (.button, BEM)
   ───────────────────────────────────────────────────────────
   Texto en MAYÚSCULAS con letter-spacing (tipografía del menú),
   padding y borde de tokens, esquina --radius, transición suave de
   color y fondo, foco visible y flecha → aportada por ::after, que
   se desplaza --button-arrow-shift a la derecha en hover/foco.
   Por defecto (sobre fondo blanco): borde y texto --color-primary y
   fondo transparente; hover/foco: fondo --color-primary y texto
   blanco.
   .button--inverse (sobre fondo azul): borde y texto blancos y fondo
   transparente; hover/foco: fondo blanco y texto --color-primary.
   NUNCA texto azul sobre fondo azul.
   Reutilizado por «Conoce al equipo» (La firma, M6) y «Más
   información» (bloque azul, M7); neutralizado en el aviso de cookies
   (overrides del plugin, abajo).
   Tokens: --button-*, --color-primary, --color-inverse, --color-surface,
   --radius, --transition-*
   ═══════════════════════════════════════════════════════════════ */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--button-padding-y) var(--button-padding-x);
    border: var(--button-border-width) solid var(--color-primary);
    border-radius: var(--radius);
    background-color: transparent;
    color: var(--color-primary);
    font-family: var(--font-base);
    font-size: var(--button-font-size);
    line-height: var(--button-line-height);
    font-weight: var(--button-font-weight);
    letter-spacing: var(--button-letter-spacing);
    text-transform: var(--button-text-transform);
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color var(--transition-duration) var(--transition-easing),
        background-color var(--transition-duration) var(--transition-easing),
        border-color var(--transition-duration) var(--transition-easing);
}

/* La flecha → es parte del botón (decorativa): la aporta el componente y
   se desplaza a la derecha al pasar el ratón o al recibir foco. */
.button::after {
    content: "\2192";
    margin-left: var(--space-1);
    transition: transform var(--transition-duration) var(--transition-easing);
}

.button:hover,
.button:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

.button:hover::after,
.button:focus-visible::after {
    transform: translateX(var(--button-arrow-shift));
}

/* Modificador para fondos azules: borde y texto blancos, fondo
   transparente; hover/foco invierte a fondo blanco y texto primario. */
.button--inverse {
    border-color: var(--color-inverse);
    color: var(--color-inverse);
    background-color: transparent;
}

.button--inverse:hover,
.button--inverse:focus-visible {
    background-color: var(--color-inverse);
    color: var(--color-primary);
}

/* El anillo de foco global es --color-primary; sobre el azul de identidad
   no contrasta, así que el botón inverso lo cambia a blanco. */
.button--inverse:focus-visible {
    outline-color: var(--color-inverse);
}

/* Modificador compacto del botón (.button--small): menos padding que .button
   y letra más pequeña, conservando padding horizontal suficiente. Hover/foco
   idénticos a .button (fondo --color-primary, texto blanco). Lo usa el botón
   «Descarga» del bloque Archivo. Tokens: --button-small-*. */
.button--small {
    padding: var(--button-small-padding-y) var(--button-small-padding-x);
    font-size: var(--button-small-font-size);
}

/* ═══════════════════════════════════════════════════════════════
   Bloque Archivo (core/file) — botón «Descarga»
   ───────────────────────────────────────────────────────────
   El filtro render_block (inc/blocks.php) añade las clases
   .button.button--small al enlace .wp-block-file__button de todas las
   circulares, sin editar cada entrada. Este selector, con el ámbito del
   contenido (especificidad 0,2,0), asegura que el aspecto del componente
   gane al CSS heredado de WordPress (.wp-block-file__button: fondo #32373c y
   texto blanco, especificidad 0,1,0) sin recurrir a !important.
   Tokens: --color-primary, --color-surface
   ═══════════════════════════════════════════════════════════════ */
.page-content__body .wp-block-file__button.button {
    background-color: transparent;
    color: var(--color-primary);
    text-decoration: none;
}

.page-content__body .wp-block-file__button.button:hover,
.page-content__body .wp-block-file__button.button:focus-visible {
    background-color: var(--color-primary);
    color: var(--color-surface);
}

/* ═══════════════════════════════════════════════════════════════
   Download card — adjunto PDF como tarjeta de descarga (punto 6)
   ───────────────────────────────────────────────────────────
   El filtro render_block (inc/blocks.php) sustituye el bloque Archivo
   (core/file) de un PDF —visor <object>/<embed> y nombre crudo— por esta
   tarjeta: icono PDF, título legible, tamaño y botón «Descargar PDF».
   Rejilla de tres columnas en escritorio (icono · texto · acción) y de
   dos en móvil/tablet, con el botón a todo el ancho debajo. El botón
   reutiliza .button.button--small; el icono es decorativo (aria-hidden)
   porque el título y el tamaño ya describen el archivo.
   Tokens: --download-card-icon-*, --space-*, --radius, --border-width,
   --color-border, --color-surface, --color-primary, --color-body,
   --content-h3-font-size, --entry-date-font-size, --h3-font-weight,
   --font-base, --h6-letter-spacing
   ═══════════════════════════════════════════════════════════════ */
.download-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-2);
    margin-block: var(--space-4);
    padding: var(--space-2) var(--space-3);
    border: var(--border-width) solid var(--color-border);
    border-radius: var(--radius);
    background-color: var(--color-surface);
}

.download-card__icon {
    display: block;
    width: var(--download-card-icon-size);
    height: var(--download-card-icon-size);
    color: var(--color-primary);
}

.download-card__icon-svg {
    display: block;
    width: 100%;
    height: 100%;
}

.download-card__icon-page {
    fill: currentColor;
}

.download-card__icon-fold {
    fill: var(--color-surface);
}

.download-card__icon-label {
    fill: var(--color-surface);
    font-family: var(--font-base);
    font-size: var(--download-card-icon-label-size);
    font-weight: var(--h3-font-weight);
    letter-spacing: var(--h6-letter-spacing);
}

.download-card__body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.download-card__title {
    font-size: var(--content-h3-font-size);
    line-height: var(--body-line-height);
    font-weight: var(--h3-font-weight);
    color: var(--color-primary);
    overflow-wrap: anywhere;
}

.download-card__meta {
    font-size: var(--entry-date-font-size);
    line-height: var(--entry-date-line-height);
    color: var(--color-body);
}

.download-card__action {
    justify-self: end;
}

/*  En móvil/tablet el botón baja a una segunda fila y ocupa todo el ancho;
    el icono y el texto comparten la primera. Corte literal = --bp-tablet
    (768px); los media queries no admiten var(). */
@media (max-width: 768px) {
    .download-card {
        grid-template-columns: auto minmax(0, 1fr);
        align-items: start;
    }

    .download-card__action {
        grid-column: 1 / -1;
        justify-self: stretch;
    }
}

/* ═══════════════════════════════════════════════════════════════
   Plugin overrides — Cookie Notice (Hu-manity)
   El plugin expone IDs (#cookie-notice, #cn-notice-text,
   #cn-accept-cookie, #cn-refuse-cookie, #cn-more-info,
   #cn-close-notice) y no clases estables: es la ÚNICA excepción
   documentada a la regla de no usar IDs (ver DESIGN.md §11).
   Deben cargarse DESPUÉS del CSS del plugin (el tema encola sus
   estilos después y aquí se usa mayor especificidad).
   ═══════════════════════════════════════════════════════════════ */

/* Tipografía Palatino del tema + cuerpo pequeño (en vez del Arial del plugin) */
#cookie-notice {
    z-index: var(--z-overlay);
    font-family: var(--font-base);
    font-size: var(--body-font-size);
    line-height: 1.45;
}

/* Contenido en el eje de 1100px y padding vertical compacto */
#cookie-notice .cookie-notice-container {
    box-sizing: border-box;
    max-width: var(--content-width);
    margin-inline: auto;
    padding-block: var(--space-2);
    padding-inline: var(--space-2);
}

#cookie-notice .cn-text-container {
    margin-bottom: var(--space-1);
}

/* Botones Aceptar/Rechazar: mismo peso visual (criterio AEPD) = .button--inverse */
#cookie-notice #cn-accept-cookie,
#cookie-notice #cn-refuse-cookie {
    margin: 0 0 0 var(--space-1);
    padding: var(--space-1) var(--space-2);
    border: var(--cookie-button-border-width) solid var(--color-inverse);
    border-radius: var(--radius);
    background-color: transparent;
    color: var(--color-inverse);
    font-family: var(--font-base);
    font-size: var(--body-font-size);
    line-height: 1.2;
    cursor: pointer;
}

/* Neutralización del componente .button en el aviso. El plugin expone sus
   botones y el enlace con la clase `button` (option `css_class`): deben
   conservar el aspecto anterior, SIN mayúsculas, SIN letter-spacing, SIN
   la flecha ::after y con el peso de texto normal. No se cambia nada más
   del plugin. */
#cookie-notice #cn-accept-cookie,
#cookie-notice #cn-refuse-cookie,
#cookie-notice #cn-more-info {
    display: inline-block;
    text-transform: none;
    letter-spacing: normal;
    font-weight: var(--body-font-weight);
}

#cookie-notice #cn-accept-cookie::after,
#cookie-notice #cn-refuse-cookie::after,
#cookie-notice #cn-more-info::after {
    content: none;
}

#cookie-notice #cn-accept-cookie:hover,
#cookie-notice #cn-refuse-cookie:hover,
#cookie-notice #cn-accept-cookie:focus-visible,
#cookie-notice #cn-refuse-cookie:focus-visible {
    background-color: var(--color-inverse);
    color: var(--color-primary);
}

/* Enlace "política de cookies" (#cn-more-info): blanco y subrayado. Lleva la
   clase `button`, así que se le repone el caja previa (padding, borde
   transparente y esquina) para conservar su aspecto. */
#cookie-notice #cn-more-info {
    padding: var(--space-1) var(--space-2);
    border: var(--cookie-button-border-width) solid transparent;
    border-radius: var(--radius);
    font-size: var(--body-font-size);
    color: var(--color-inverse);
    text-decoration: underline;
}

#cookie-notice #cn-more-info:hover,
#cookie-notice #cn-more-info:focus-visible {
    color: var(--color-inverse);
    opacity: 0.85;
}

/* Foco visible en botones y enlace */
#cookie-notice #cn-accept-cookie:focus-visible,
#cookie-notice #cn-refuse-cookie:focus-visible,
#cookie-notice #cn-more-info:focus-visible {
    outline: 2px solid var(--color-inverse);
    outline-offset: 2px;
}

/* Móvil: texto arriba con los botones debajo */
@media (max-width: 768px) {
    #cookie-notice .cookie-notice-container #cn-notice-text {
        display: block;
    }

    #cookie-notice .cookie-notice-container #cn-notice-buttons {
        display: block;
        margin-top: var(--space-1);
    }
}