/*
Theme Name: Opensalud
Author:
Author URI:
Theme URI: 
Tags: full-site-editing, block-patterns
Text Domain: opensalud
Requires at least: 6.4
Requires PHP: 7.4
Tested up to: 6.4
Version: 1.0.0

License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

/* Patrón estándar de WordPress: oculta visualmente pero deja disponible
   para lectores de pantalla — usado como fallback de <h1> en page.php
   cuando el contenido no trae ya su propio h1 visible (p. ej. un bloque
   "central"/"texto-imagen" con hero=true). */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

/* Colors theme
   theme.json genera --wp--preset--color--<slug> desde la paleta
   (main-blue, hover-blue, electric-blue...). Las variantes con doble
   guion de abajo son alias históricos que todavía usan base.css y
   algunos bloques: se apuntan a las de theme.json para tener el color
   en un único sitio (la paleta) y no en copias sueltas. */
:root {
    --wp--preset--color--black: #1D1D1E;
    --wp--preset--color--white: #FFFFFF;
    --wp--preset--color--grey-05: #C5C5C5;
    --wp--preset--color--grey-06: #8A8A8A;
    --wp--preset--color--error: #EC3333;
    --wp--preset--color--transparent: transparent;
    --wp--preset--color--main--blue: var(--wp--preset--color--main-blue);
    --wp--preset--color--hover--blue: var(--wp--preset--color--hover-blue);
    --wp--preset--color--electric--blue: var(--wp--preset--color--electric-blue);
    --wp--preset--color--transparent--blue: #3238c417;
    /* theme.json no tiene un slug "text-black"; varios bloques
       (texto-imagen, central, caracteristicas, incluye-empresas,
       preguntas-frecuentes) usan var(--wp--preset--color--text-black)
       sin fallback, así que hasta ahora resolvía a nada y el texto
       heredaba color. Alias a "black" (#1D1D1E), que es el valor que
       buscaban. */
    --wp--preset--color--text-black: var(--wp--preset--color--black);
}

/* Gradients */
:root {
    --wp--preset--gradient--primary-white: linear-gradient(0deg, rgba(255, 255, 255, 0.00) -27.39%, rgba(184, 233, 255, 0.34) 89.59%);
    --wp--preset--gradient--white-primary: linear-gradient(0deg, rgba(184, 233, 255, 0.34) -27.39%, rgba(255, 255, 255, 0.00) 89.59%);
}

/* Duotone */
:root {
    --wp--preset--duotone--secondary-primary: #3238C4, #FFFFFF;
    --wp--preset--duotone--primary-contrast: #1A23F1, #FFFFFF;
}

/* Typo */
:root {
    --wp--preset--font-family--system: "Space Grotesk", sans-serif;
    --wp--preset--font-family--serif: "Helvetica Neue", sans-serif;
    --wp--preset--font-family--monospace: "Helvetica Neue", sans-serif;
}

/* Fonts */
@font-face {
    font-display: swap;
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-display: swap;
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 500;
    src: url('../fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
}

@font-face {
    font-display: swap;
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 700;
    src: url('../fonts/SpaceGrotesk-VariableFont_wght.ttf') format('truetype');
}


:root {
    /* Escala tipográfica fija (8 pasos): 13/16/18/21/24/32/40/45px.
       Mantenido en sync con style.css, que carga después y gana en
       cascada — ver comentario ahí. */
    --wp--preset--font-size--medium: 1.125rem;
    /* 18px */
    --wp--preset--font-size--small: 1rem !important;
    /* 16px */
    --wp--preset--font-size--extra--small: 0.813rem;
    /* 13px */
    --wp--preset--font-size--form-tag: 0.813rem;
    /* 13px */
    --wp--preset--font-size-h1: 2.813rem;
    /* 45px */
    --wp--preset--font-size-h2: 2.5rem;
    /* 40px */
    --wp--preset--font-size-h3: 2rem;
    /* 32px */
    --wp--preset--font-size-h4: 2rem;
    /* 32px */
    --wp--preset--font-size-h5: 1.5rem;
    /* 24px */
    --wp--preset--font-size-h6: 1.313rem;
}

:root {
    --wp--preset--line-height--medium: 1.688rem;
    /* 27px */
    --wp--preset--line-height--small: 1.25rem;
    /* 20px */
    --wp--preset--line-height--extra--small: 1rem;
    /* 16px */
    --wp--preset--line-height--form-tag: 1rem;
    /* 16px */
    --wp--preset--line-height-h1: 2.813rem;
    /* 45px */
    --wp--preset--line-height-h2: 2.75rem;
    /* 44px */
    --wp--preset--line-height-h3: 2.25rem;
    /* 36px */
    --wp--preset--line-height-h4: 2.25rem;
    /* 36px */
    --wp--preset--line-height-h5: 2rem;
    /* 32px */
    --wp--preset--line-height-h6: 1.5rem;
    /* 24px */
}

:root :where(.is-layout-flow)>* {
    margin-block-start: 0.5rem;
}

h1,
h2,
h3,
h4,
h5,
.has-serif-font-family {
    font-family: "Space Grotesk", sans-serif;
}

h1 span,
h2 span,
h3 span,
h4 span,
h5 span {
    color: var(--wp--preset--color--main--blue);
}

body h1,
.has-h-1-font-size {
    margin: 0;
    font-size: var(--wp--preset--font-size-h1);
    line-height: var(--wp--preset--line-height-h1);
    font-weight: var(--wp--custom--weight-500);
}

body h2,
.has-h-2-font-size {
    font-size: var(--wp--preset--font-size-h2);
    line-height: var(--wp--preset--line-height-h2);
    font-weight: var(--wp--custom--weight-500);
}

body h3,
.has-h-3-font-size {
    font-size: var(--wp--preset--font-size-h3);
    line-height: var(--wp--preset--line-height-h3);
    font-weight: var(--wp--custom--weight-700);
}

body h4,
.has-h-4-font-size {
    font-size: var(--wp--preset--font-size-h4);
    line-height: var(--wp--preset--line-height-h4);
    font-weight: var(--wp--custom--weight-400);
}

body h5,
.has-h-5-font-size {
    font-size: var(--wp--preset--font-size-h5);
    line-height: var(--wp--preset--line-height-h5);
    font-weight: var(--wp--custom--weight-500);
}

body h6,
.has-h-6-font-size {
    font-size: var(--wp--preset--font-size-h6);
    line-height: var(--wp--preset--line-height-h6);
    font-weight: var(--wp--custom--weight-700);
}

body .has-m-font-size {
    font-size: var(--wp--preset--font-size--medium) !important;
    line-height: var(--wp--preset--line-height--medium);
    font-weight: var(--wp--custom--weight-400);
}

body .has-s-font-size {
    font-size: var(--wp--preset--font-size--small) !important;
    line-height: var(--wp--preset--line-height--small);
    font-weight: var(--wp--custom--weight-400);
}

body .has-xs-font-size {
    font-size: var(--wp--preset--font-size--extra--small);
    line-height: var(--wp--preset--line-height--extra--small);
    font-weight: var(--wp--custom--weight-400);
}

body .has-form-tag-font-size {
    font-size: var(--wp--preset--font-size--form-tag);
    line-height: var(--wp--preset--line-height--form-tag);
    font-weight: var(--wp--custom--weight-500);
}

body p {
    font-size: var(--wp--preset--font-size--medium);
    line-height: var(--wp--preset--line-height--medium);
    font-weight: var(--wp--custom--weight-400);
    text-wrap: balance;
}

:root {
    --wp--custom--weight-400: 400;
    --wp--custom--weight-500: 500;
    --wp--custom--weight-700: 700;
}

/* Design */
:root {
    --wp--custom--layout--content-size: 1600px;
    --wp--custom--layout--wide-size: 1800px;
}

/* ── Botón: tokens compartidos ───────────────────────────────
   Un único juego de medidas/tipografía para TODOS los botones del
   tema (core de Gutenberg, submits de CF7, CTAs de las plantillas
   PHP y de los bloques). Cada contexto solo cambia el color cuando
   va sobre un fondo distinto. Ver la regla ".btn unificado" más abajo. */
:root {
    --btn-padding-y: 13px;
    --btn-padding-x: 24px;
    --btn-gap: 8px;
    --btn-font-size: var(--wp--preset--font-size--small);
    --btn-font-weight: var(--wp--custom--weight-700);
    --btn-letter-spacing: 0.02em;
    --btn-radius: var(--wp--custom--radius--full);
    --btn-transition: background-color 200ms ease-out, transform 200ms ease-out, box-shadow 200ms ease-out;
}

/* Botón claro (is-style-secondary y el CTA de cabecera en el menú móvil):
   sin sombra, texto siempre en main-blue. El fondo y el hover siguen la
   misma premisa que las tarjetas del tema — sección con fondo white-02 →
   botón white-03 / hover white-02; sección con fondo white-04 (y por
   defecto cualquier otro fondo) → botón white / hover white-04. */
:root,
.fondo-white-04 {
    --btn-light-bg: var(--wp--preset--color--white);
    --btn-light-hover: var(--wp--preset--color--white-04);
}

.fondo-white-02 {
    --btn-light-bg: var(--wp--preset--color--white-03);
    --btn-light-hover: var(--wp--preset--color--white-02);
}

:root :where(.wp-element-button, .wp-block-button__link) {
    border-width: 2px;
    box-shadow: none;
}

.alignfull {
    margin-left: calc(calc(50% + 8px) - 50vw);
    margin-right: calc(calc(50% + 8px) - 50vw);
    max-width: 100vw;
    width: auto;
}

section {
    margin: 0 !important;
    padding: 0;
    border: none;
}

.has-text-align-center {
    text-align: center;
}

.has-text-align-left {
    text-align: left;
}

.has-text-align-right {
    text-align: right;
}

.has-text-align-justify {}

/* Spacing */
:root {
    --wp--preset--spacing--60: 3.75rem;
    --wp--preset--spacing--50: 3.125rem;
    --wp--preset--spacing--40: 2.5rem;
    --wp--preset--spacing--30: 1.875rem;
    --wp--preset--spacing--20: 1.125rem;
    --wp--preset--spacing--13: 0.813rem;
}

/* Light mode */
html::backdrop,
:root {
    --sans-font:
        -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir,
        "Nimbus Sans L", Roboto, "Noto Sans", "Segoe UI", Arial, Helvetica,
        "Helvetica Neue", sans-serif;
    --mono-font:
        Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
    --standard-border-radius: 30px;
    /* Antes 300px fijo, desconectado de theme.json; el radio "full" (999px)
       da el mismo resultado visual en un botón tipo pastilla. */
    --standard-border-radius-button: var(--wp--custom--radius--full);
    --bg: var(--wp--preset--color--white);
    --accent-bg: var(--wp--preset--color--white-04);
    --text: var(--wp--preset--color--black);
    --text-light: var(--wp--preset--color--main--blue);
    --border: var(--wp--preset--color--grey-06);
    --accent: var(--wp--preset--color--grey-06);
    --code: var(--wp--preset--color--grey-06);
    --preformatted: var(--wp--preset--color--grey-05);
    --marked: var(--wp--preset--color--grey-06);
    --disabled: #efefef;
    --wp--preset--color--base: var(--wp--preset--color--white);
    /* theme.json (styles globales, botones, enlaces, core/code, core/navigation...)
       referencia --primary/--secondary/--contrast, pero la paleta de
       theme.json no define ningún color con esos slugs — sin esto, esas
       propiedades quedaban sin valor. Mismo criterio que --base justo
       arriba: alias hacia colores que ya existen en la paleta, en vez de
       añadir "Primary"/"Secondary"/"Contrast" como swatches nuevos y
       visibles en el selector de color del editor. */
    --wp--preset--color--contrast: var(--wp--preset--color--black);
    --wp--preset--color--primary: var(--wp--preset--color--main-blue);
    --wp--preset--color--secondary: var(--wp--preset--color--hover-blue);
}

/* End light mode */

/* Dark mode */
@media (prefers-color-scheme: dark) {

    html::backdrop,
    :root {
        color-scheme: dark;
        --bg: var(--wp--preset--color--white);
    }
}

/* End dark mode */

/* Styles intended only for the front.*/
html {
    scroll-behavior: smooth;
}

@media screen and (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

html body {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    grid-template-columns:
        1fr min(var(--wp--custom--layout--content-size), calc(100% - 56px)) 1fr;
    color: var(--wp--preset--color--black);
    font-weight: var(--wp--custom--weight-400);
    overflow-x: hidden;
}

img,
video {
    opacity: 1;
}

article,
dialog,
fieldset {
    border: none;
}

body a:where(:not(.wp-element-button)),
body a:where(:not(.wp-element-button)):where(:visited) {
    /* :visited va dentro de :where() para que NO aporte especificidad.
       Si no, `a...:visited` puntúa (0,0,1,2) y pisa el color de texto de
       los CTAs del tema (.central-boton, .sr-cta, .cta-franja-boton...,
       todos (0,0,1,0)-(0,0,1,1)): tras visitar el destino, la etiqueta
       del botón se volvía azul sobre fondo azul. */
    color: var(--wp--preset--color--main-blue);
}

main {
    padding-top: 0;
    grid-column: 1 / -1;
}

/* ── Botón unificado ─────────────────────────────────────────
   Geometría + tipografía compartidas por todos los botones del
   tema: core de Gutenberg, submits de CF7, CTAs de las plantillas
   PHP (.sr-cta, .entry-banner-cta, .nf ... .buttons a) y CTAs de
   TODOS los bloques (.X-boton / .X-cta-button de central,
   texto-imagen, caracteristicas, cta-franja, servicios-*,
   incluye-empresas...). Esos archivos ya NO repiten geometría ni
   color: solo conservan lo suyo (layout del contenedor, flechas,
   ancho 100% en móvil) y las inversiones sobre fondo oscuro. */
body .wp-block-button__link,
body .is-style-mobilenav .wp-block-button__link,
.wpcf7 input[type="submit"],
.nf-text-content .buttons a,
.entry-banner-cta,
.sr-cta,
.cta-franja-boton,
.central-boton,
.texto-image-boton,
.caracteristicas-boton,
.incluye-empresas-boton,
.servicios-cards-cta-button,
.servicios-cards-2-cta-button,
.servicios-lista-cta-button,
.cnt-form-card input[type="submit"],
.cnt-form-card .wpcf7-submit,
.si-form-card input[type="submit"],
.si-form-card .wpcf7-submit,
.pr-modal-form input[type="submit"],
.pr-modal-form .wpcf7-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    border: 1px solid transparent;
    border-radius: var(--btn-radius);
    font-family: "Space Grotesk", sans-serif;
    font-size: var(--btn-font-size);
    font-weight: var(--btn-font-weight);
    line-height: 1.2;
    letter-spacing: var(--btn-letter-spacing);
    text-transform: uppercase;
    text-decoration: none;
    text-align: center;
    /* Reparte el texto en varias líneas de forma equilibrada cuando el
       botón no cabe en una sola (labels largos, traducciones, móvil).
       Aplica a TODOS los botones del tema porque todos pasan por esta
       lista de selectores: core de Gutenberg, submits de CF7 y CTAs de
       plantillas PHP y bloques. */
    text-wrap: balance;
    cursor: pointer;
    transition: var(--btn-transition);
}

/* Relleno azul (color de marca) — los botones sobre fondo claro */
body .wp-block-button__link,
.wpcf7 input[type="submit"],
.nf-text-content .buttons a,
.sr-cta,
.central-boton,
.texto-image-boton,
.caracteristicas-boton,
.incluye-empresas-boton,
.servicios-cards-cta-button,
.servicios-cards-2-cta-button,
.servicios-lista-cta-button,
.cnt-form-card input[type="submit"],
.cnt-form-card .wpcf7-submit,
.si-form-card input[type="submit"],
.si-form-card .wpcf7-submit,
.pr-modal-form input[type="submit"],
.pr-modal-form .wpcf7-submit {
    background-color: var(--wp--preset--color--main-blue);
    color: var(--wp--preset--color--white);
}

/* Hover: todos suben 2px; los azules además oscurecen */
body .wp-block-button__link:hover,
.wpcf7 input[type="submit"]:hover,
.nf-text-content .buttons a:hover,
.entry-banner-cta:hover,
.sr-cta:hover,
.cta-franja-boton:hover,
.central-boton:hover,
.texto-image-boton:hover,
.caracteristicas-boton:hover,
.incluye-empresas-boton:hover,
.servicios-cards-cta-button:hover,
.servicios-cards-2-cta-button:hover,
.servicios-lista-cta-button:hover,
.cnt-form-card input[type="submit"]:hover,
.cnt-form-card .wpcf7-submit:hover,
.si-form-card input[type="submit"]:hover,
.si-form-card .wpcf7-submit:hover,
.pr-modal-form input[type="submit"]:hover,
.pr-modal-form .wpcf7-submit:hover {
    transform: translateY(-2px);
}

body .wp-block-button__link:hover,
.wpcf7 input[type="submit"]:hover,
.nf-text-content .buttons a:hover,
.sr-cta:hover,
.central-boton:hover,
.texto-image-boton:hover,
.caracteristicas-boton:hover,
.incluye-empresas-boton:hover,
.servicios-cards-cta-button:hover,
.servicios-cards-2-cta-button:hover,
.servicios-lista-cta-button:hover,
.cnt-form-card input[type="submit"]:hover,
.cnt-form-card .wpcf7-submit:hover,
.si-form-card input[type="submit"]:hover,
.si-form-card .wpcf7-submit:hover,
.pr-modal-form input[type="submit"]:hover,
.pr-modal-form .wpcf7-submit:hover {
    background-color: var(--wp--preset--color--hover-blue);
}

/* Foco visible por teclado — antes solo lo tenían un par de componentes */
body .wp-block-button__link:focus-visible,
.wpcf7 input[type="submit"]:focus-visible,
.nf-text-content .buttons a:focus-visible,
.sr-cta:focus-visible,
.central-boton:focus-visible,
.texto-image-boton:focus-visible,
.caracteristicas-boton:focus-visible,
.incluye-empresas-boton:focus-visible,
.servicios-cards-cta-button:focus-visible,
.servicios-cards-2-cta-button:focus-visible,
.servicios-lista-cta-button:focus-visible,
.cnt-form-card input[type="submit"]:focus-visible,
.cnt-form-card .wpcf7-submit:focus-visible,
.si-form-card input[type="submit"]:focus-visible,
.si-form-card .wpcf7-submit:focus-visible,
.pr-modal-form input[type="submit"]:focus-visible,
.pr-modal-form .wpcf7-submit:focus-visible {
    outline: 2px solid var(--wp--preset--color--hover-blue);
    outline-offset: 2px;
}

/* Variantes claras sobre fondo de color: contorno de foco en blanco */
.entry-banner-cta:focus-visible,
.cta-franja-boton:focus-visible {
    outline: 2px solid var(--wp--preset--color--white);
    outline-offset: 2px;
}

body .is-style-secondary .wp-block-button__link,
.central-boton--secundario,
.texto-image-boton--secundario,
.caracteristicas-boton--secundario {
    /* Botón claro: sin sombra, texto main-blue, fondo/hover según el
       fondo de la sección (--btn-light-*, definido más arriba). */
    background-color: var(--btn-light-bg);
    color: var(--wp--preset--color--main-blue);
    border-color: var(--wp--preset--color--main--blue);
    box-shadow: none;
}

body .is-style-secondary .wp-block-button__link:hover,
.central-boton--secundario:hover,
.texto-image-boton--secundario:hover,
.caracteristicas-boton--secundario:hover {
    /* +2px lo añade el hover del botón unificado */
    background-color: var(--btn-light-hover);
    color: var(--wp--preset--color--main-blue);
    /* Borde azul permanente del botón claro. Además fija especificidad
       suficiente para ganar al borde que theme.json aplica en hover vía
       `:root :where(.wp-element-button:hover)`. */
    border-color: var(--wp--preset--color--main--blue);
}

/* ── CTAs de bloque sobre fondo oscuro (fondo-main-blue / fondo-black) ──
   El botón principal invierte a botón claro; el secundario pasa a
   contorno blanco. Antes lo repetía cada bloque (central, texto-imagen,
   caracteristicas) con pequeñas diferencias de color entre sí. */
:is(.fondo-main-blue, .fondo-black) :is(.central-boton,
    .texto-image-boton,
    .caracteristicas-boton,
    .incluye-empresas-boton,
    .servicios-cards-cta-button,
    .servicios-cards-2-cta-button,
    .servicios-lista-cta-button) {
    background-color: var(--btn-light-bg);
    color: var(--wp--preset--color--main-blue);
}

:is(.fondo-main-blue, .fondo-black) :is(.central-boton,
    .texto-image-boton,
    .caracteristicas-boton,
    .incluye-empresas-boton,
    .servicios-cards-cta-button,
    .servicios-cards-2-cta-button,
    .servicios-lista-cta-button):hover {
    background-color: var(--btn-light-hover);
    color: var(--wp--preset--color--main-blue);
}

:is(.fondo-main-blue, .fondo-black) :is(.central-boton--secundario,
    .texto-image-boton--secundario,
    .caracteristicas-boton--secundario) {
    background-color: transparent;
    border-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--white);
    box-shadow: none;
}

:is(.fondo-main-blue, .fondo-black) :is(.central-boton--secundario,
    .texto-image-boton--secundario,
    .caracteristicas-boton--secundario):hover {
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--main-blue);
}

/* ── Grupos de 2 botones (central, texto-imagen, caracteristicas,
   cta-franja) ────────────────────────────────────────────────
   En fila mientras quepan. Por debajo de 920px el grupo pasa a
   columna y cada botón ocupa el ancho completo (etiqueta centrada,
   que ya la trae el botón unificado), igual que los submits de
   formulario. */
.central-botones,
.texto-image-botones,
.caracteristicas-botones,
.cta-franja-botones {
    display: flex;
    flex-wrap: wrap;
    column-gap: 16px;
    row-gap: 12px;
}

@media (max-width: 920px) {

    .central-botones,
    .texto-image-botones,
    .caracteristicas-botones,
    .cta-franja-botones {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .central-botones>a,
    .texto-image-botones>a,
    .caracteristicas-botones>a,
    .cta-franja-botones>a {
        width: 100%;
    }
}

body .is-style-secondary2 .wp-block-button__link {
    background-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--black);
    border: 1px solid var(--wp--preset--color--white);
}

body .is-style-secondary2 .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--white-03);
}

body .is-style-tertiary .wp-block-button__link {
    background-color: transparent;
    border-color: var(--wp--preset--color--white);
    color: var(--wp--preset--color--white);
}

body .is-style-tertiary .wp-block-button__link:hover {
    background: rgba(54, 54, 54, 0.11);
}

body .is-style-hyperlinkM .wp-block-button__link,
body .is-style-hyperlinkS .wp-block-button__link {
    /* Variante enlace: anula la geometría/mayúsculas del botón unificado */
    padding: 0;
    border: none;
    text-transform: none;
    letter-spacing: normal;
    background-color: transparent;
    color: var(--wp--preset--color--main-blue);
    text-decoration: underline;
    text-underline-offset: 25%;
    text-decoration-thickness: 11.5%;
}

body .is-style-hyperlinkM .wp-block-button__link {
    /* Escala fija (juego B), como el resto del tema. */
    font-size: var(--wp--preset--font-size--medium);
    font-weight: var(--wp--custom--weight-700);
}

body .is-style-hyperlinkS .wp-block-button__link {
    /* Escala fija (juego B), como el resto del tema. */
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--wp--custom--weight-400);
}

body .is-style-hyperlinkM .wp-block-button__link:hover,
body .is-style-hyperlinkS .wp-block-button__link:hover {
    color: var(--wp--preset--color--hover-blue);
}

body .is-style-mobilenav .wp-block-button__link:hover {
    background-color: var(--wp--preset--color--main-blue);
    border: 1px solid var(--wp--preset--color--main-blue);
}

body .is-layout-flex {
    align-items: start;
}

body .wp-block-button.is-style-outline .wp-block-button__link {
    border-width: 2px;
    border-color: var(--wp--preset--color--black);
    background-color: transparent;
    color: var(--wp--preset--color--black);
}

body .wp-block-button__link img {
    margin-right: 4px;
}

body .wp-block-image.aligncenter {
    display: flex;
    justify-content: center;
}

body .wp-block-image.alignright {
    display: flex;
    justify-content: end;
}

.wp-block-columns:has(> .wp-block-column:only-child) {
    display: flex;
    justify-content: center;
}

body .wp-block-media-text>.wp-block-media-text__content {
    padding: 0;
}

body .wp-block-media-text>*:nth-child(1) {
    padding-right: 3.75rem;
}

body .wp-block-media-text>*:nth-child(2) {
    padding-left: 3.75rem;
}

.wp-block-gallery.has-nested-images:not(.is-cropped) {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
    gap: 20px;
    aspect-ratio: 3 / 2;
    max-width: 1200px;
    margin: auto;
}

.wp-block-gallery .wp-block-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

/* TOP BAR*/
.top-bar {
    height: 26px;
    background-color: var(--wp--preset--color--white-02);
    grid-column: 1 / -1;
}

.list-lang-opensalud {
    margin: 0 auto;
    list-style: none;
    text-align: right;
    max-width: var(--wp--custom--layout--content-size);
    display: flex;
    justify-content: end;
    padding: 0;
    height: 26px;
    align-items: center;
    gap: 14px;

}

.list-lang-opensalud li {
    display: flex;
    column-gap: 14px;
}

.lang-item a {
    text-transform: uppercase;
    color: #6D6D7D;
    font-size: var(--wp--preset--font-size--extra--small);
    font-weight: var(--wp--custom--weight-700);
    line-height: var(--wp--preset--line-height--small);
    text-decoration: none;
}

.list-lang-opensalud .current-lang a {
    color: var(--wp--preset--color--main--blue);
}

.list-lang-opensalud a:hover {
    color: var(--wp--preset--color--white);
}

/* Header */
.header-general {
    display: grid;
    grid-template-columns: none;
    border: 0;
    /* Gutter lateral unificado con el resto de secciones (token de theme.json).
       El header conserva su propio breakpoint de 1230px para el paso a menú
       hamburguesa, pero el gutter baja a x-mobile en <=920px como todo lo demás
       (ver @media max-width:920px más abajo). */
    padding: 0 var(--wp--custom--section--x);
}

.inner-header-general {
    display: flex;
    align-items: center;
    padding: 24px 0;
    max-width: var(--wp--custom--layout--content-size);
    margin: 0 auto;
    justify-content: space-between;
    width: 100%;
}

.menu ul.nav {
    display: flex;
    list-style: none;
    padding-inline-start: 0;
    justify-content: flex-end;
    align-items: center;
    margin: 0;
}

.header-general .menu-main {
    display: flex;
    justify-content: flex-end;
    gap: 39px;
    flex: 1;
    align-items: center;
}

.header-general .logo-header {
    margin-right: 2.5rem;
}

.header-general .menu-second,
.header-general .menu-ctas {
    margin-left: 5px;
    margin-right: 5px;
}

.header-general .menu a {
    text-decoration: none;
}

.header-general .menu a:not(.cabecera-cta a) {
    color: var(--wp--preset--color--main--blue);
    font-size: var(--wp--preset--font-size--small);
    font-weight: var(--wp--custom--weight-700);
    line-height: var(--wp--preset--line-height--small);
    /* 125% */
    text-transform: uppercase;
}

.header-general .menu .nav .page_item:not(:last-child),
.header-general .menu .nav .menu-item:not(:last-child) {
    margin-right: 39px;
}

/* End Header */
/*Forms*/
.wpcf7 label {
    font-size: var(--wp--preset--font-size--form-tag);
    line-height: var(--wp--preset--font-size--form-tag);
    color: var(--wp--preset--color--grey-06);
}

.wpcf7 .form-label {
    margin-bottom: 4px;
    display: inline-block;
}

.wpcf7 input,
.wpcf7 textarea,
.wpcf7 select {
    font-size: var(--wp--preset--font-size--extra--small);
    padding: 10px 9px;
    background-color: var(--wp--preset--color--white-03);
    border-radius: 4px;
    border: none;
    width: 100%;
}

/* El color/geometría del submit lo da ya "Botón unificado" (arriba);
   aquí solo queda que ocupe todo el ancho en los formularios sueltos. */
.wpcf7 input[type="submit"] {
    width: 100%;
    margin: 0;
}

.wpcf7 input[type="checkbox"] {
    width: 13px;
    height: 13px;
    background-color: var(--wp--preset--color--white);
    border: 1px solid var(--wp--preset--color--grey-06);
    border-radius: 2.5px;
}

.wpcf7 input[type="checkbox"]:checked {
    /* Icono de dos colores (cuadro azul + check blanco): mask-image lo
       aplanaría a una silueta sólida (usa el canal alfa, no el color), así
       que aquí se mantiene como imagen de fondo normal. */
    background: url("../img/checked.svg") no-repeat;
    background-size: cover;
    border: none;
}

.wpcf7 input[type=checkbox]:checked::after {
    display: none;
}

.wpcf7 input:focus,
.wpcf7 textarea:focus,
.wpcf7 select:focus {
    outline: none;
    border: 1px solid var(--wp--preset--color--grey-06);
}

.wpcf7 input.wpcf7-not-valid {
    border: 1px solid var(--wp--preset--color--error);
}

.wpcf7 .wpcf7-not-valid-tip {
    color: var(--wp--preset--color--error);
    font-weight: 500;
}

form.wpcf7-form {
    display: flex;
    flex-direction: column;
    row-gap: 7px;
}

.wpcf7 form .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output,
.wpcf7 form.sent .wpcf7-response-output,
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.payment-required .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
    border: 1px solid var(--wp--preset--color--grey-05);
    display: flex;
    padding: 8px 24px;
    align-items: center;
    gap: 12px;
}

/* Errores de validación: cada campo ya muestra su aviso en rojo
   (.wpcf7-not-valid-tip), así que el resumen genérico de CF7 ("Uno o más
   campos tienen un error...") sobra. Los demás estados (spam, fallo de
   envío...) no tienen aviso por campo y sí mantienen la caja. */
.wpcf7 form.invalid .wpcf7-response-output {
    display: none;
}

.wpcf7 form.sent .wpcf7-response-output::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-color: var(--wp--preset--color--main--blue);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url("../img/check-circle.svg");
    mask-image: url("../img/check-circle.svg");
}

.wpcf7 form.failed .wpcf7-response-output::before,
.wpcf7 form.aborted .wpcf7-response-output::before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-color: var(--wp--preset--color--error);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-image: url("../img/alert-triangle.svg");
    mask-image: url("../img/alert-triangle.svg");
}

.privacy-text {
    font-size: var(--wp--preset--font-size--small);
    color: var(--wp--preset--color--black);
}

.wpcf7 label.privacy-accept span,
.wpcf7 label.privacy-accept a {
    color: var(--wp--preset--color--black);
    font-size: var(--wp--preset--font-size--extra--small);
}

.wpcf7 label.privacy-accept a {
    text-decoration: none;
    font-weight: 700;
}

span.wpcf7-list-item {
    margin-left: 0;
}

/* ── Footer ──────────────────────────────────────────────────
   Rediseño 2026-08-31 (skill referencia-visual-web), en 3 bandas sobre
   fondo negro, separadas por dos líneas finas continuas de extremo a
   extremo (dos <hr class="footer-divider">):
     1. Arriba: marca + columnas PLATAFORMA / PRIVACIDAD / COMPAÑÍA.
     2. Banda central: SEGURIDAD Y CUMPLIMIENTO a la izquierda · GRUPO a la
        derecha (título con la misma tipografía que las columnas y enlaces
        de texto plano, no pastillas).
     3. Abajo: iconos sociales (izquierda) · copyright (derecha, en una sola
        línea).
   En ≤1230px (mismo punto que el header pasa a hamburguesa) se apila: marca →
   3 acordeones → GRUPO → línea → SEGURIDAD → línea → iconos sociales →
   copyright (JS añade .footer-accordion-ready; sin JS los acordeones quedan
   abiertos). Ver footer.php y assets/js/app.js. */
.footer-general {
    grid-column: 1 / -1;
    background-color: var(--wp--preset--color--black);
    border: none;
    padding: 72px var(--wp--custom--section--x) 48px;
}

.footer-general .inner-footer-general {
    max-width: var(--wp--custom--layout--content-size);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
    grid-template-areas:
        "brand     plataforma privacidad compania"
        "divmid    divmid     divmid     divmid"
        "seguridad seguridad  grupo      grupo"
        "divbot    divbot     divbot     divbot"
        "social    social     copyright  copyright";
    column-gap: 40px;
    row-gap: 32px;
    align-items: start;
}

.footer-brand {
    grid-area: brand;
    justify-self: flex-start;
}

.footer-brand-logo {
    display: inline-block;
}

.footer-brand-logo img {
    /* Mismo alto que el logo del header (.logo-header img) para que header y
       footer muestren la marca al mismo tamaño. */
    max-height: 33px;
    width: auto;
    border-radius: 0;
}

.footer-col--plataforma {
    grid-area: plataforma;
}

.footer-col--privacidad {
    grid-area: privacidad;
}

.footer-col--compania {
    grid-area: compania;
}

/* Líneas finas continuas de extremo a extremo entre las 3 bandas. */
.footer-divider {
    width: 100%;
    height: 0;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 0;
    background: none;
}

.footer-divider--mid {
    grid-area: divmid;
}

.footer-divider--bot {
    grid-area: divbot;
}

/* Banda central: SEGURIDAD Y CUMPLIMIENTO (izq.) + GRUPO (der.) */
.footer-compliance {
    grid-area: seguridad;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
}

.footer-grupo {
    grid-area: grupo;
    justify-self: end;
    align-self: anchor-center;
}

.footer-social {
    grid-area: social;
    align-self: start;
}

.footer-copyright {
    grid-area: copyright;
    align-self: end;
    justify-self: end;
    display: flex;
    flex-wrap: nowrap;
    white-space: nowrap;
    justify-content: flex-end;
    gap: 4px;
    text-align: right;
    color: var(--wp--preset--color--grey-06);
    font-size: var(--wp--preset--font-size--form-tag);
    line-height: 1.5;
}

/* Títulos de columna / sección: gris apagado, mayúsculas, con espaciado */
.footer-col-title {
    margin: 0;
    font-size: var(--wp--preset--font-size--extra--small);
    line-height: 1.4;
    font-weight: var(--wp--custom--weight-700);
    letter-spacing: 1.25px;
    text-transform: uppercase;
    color: var(--wp--preset--color--grey-06);
}

.footer-grupo-title,
.footer-compliance-title {
    display: none;
}

.footer-col-title {
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-grupo-title,
.footer-compliance-title {
    margin-bottom: 16px;
}

/* Botón inyectado por JS que envuelve el texto del título en móvil.
   En escritorio queda como un título normal (sin cursor ni icono). */
.footer-col-toggle {
    all: unset;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    box-sizing: border-box;
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
    cursor: default;
}

.footer-col-icon {
    display: none;
}

/* Listas de enlaces de las columnas */
.footer-general .footer-col-body .navbar-nav,
.footer-general .footer-col-body ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.footer-general .footer-col-body li {
    text-transform: none;
}

.footer-general .footer-col-body li:hover {
    transform: translateX(3px);
    transition-duration: .3s;
}

.footer-general .footer-col-body a {
    text-decoration: none;
    font-size: var(--wp--preset--font-size--small);
    line-height: var(--wp--preset--line-height--small);
    color: var(--wp--preset--color--white-03);
    font-weight: var(--wp--custom--weight-400);
    letter-spacing: 0;
    transition: color .2s ease-out;
    text-transform: uppercase;
}

.footer-general .footer-col-body a:hover {
    color: var(--wp--preset--color--white);
}

/* Bloque GRUPO: enlaces de texto plano, mismo tratamiento que las columnas
   de menú (no pastillas). */
.footer-grupo .list-grupo {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: row;
    gap: 60px;
}

.footer-grupo .list-grupo li {
    text-transform: none;
}

.footer-grupo .list-grupo li:hover {
    transform: translateX(3px);
    transition-duration: .3s;
}

.footer-grupo .list-grupo a {
    text-decoration: none;
    font-size: var(--wp--preset--font-size--small);
    line-height: var(--wp--preset--line-height--small);
    color: var(--wp--preset--color--white-03);
    font-weight: var(--wp--custom--weight-400);
    letter-spacing: 0;
    text-transform: uppercase;
    transition: color .2s ease-out;
}

.footer-grupo .list-grupo a:hover {
    color: var(--wp--preset--color--white);
}

/* Botones sociales: círculo relleno blanco, icono forzado a negro */
.footer-general ul {
    list-style-type: none;
    padding-left: 0;
}

.footer-general .list-rrss {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer-general .item-rrss a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--wp--custom--radius--full);
    background-color: var(--wp--preset--color--white);
    transition: transform .2s ease-out, box-shadow .2s ease-out;
}

.footer-general .item-rrss a:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-on-dark);
}

.footer-general .item-rrss img {
    width: 18px;
    height: 18px;
    object-fit: contain;
    border-radius: 0;
    filter: brightness(0);
}

/* Franja de cumplimiento: logos de certificación en fila (solo imágenes).
   SEGURIDAD Y CUMPLIMIENTO va a la izquierda de la banda central. */
.footer-general .logos-list {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 26px;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-general .logos-list .logo-item {
    padding: 0 20px 0 0px;
}

.footer-general .logos-list .logo-item img {
    height: 60px;
    max-height: 60px;
}

.footer-general .logos-list img {
    max-height: 48px;
    object-fit: contain;
    width: auto;
    border-radius: 0;
}

.footer-general img {
    border-radius: 0;
}

/*Menú*/
.menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-block;
    width: 25px;
    height: 25px;
    position: relative;
    padding: 0;
    margin: 0;
    align-self: self-start;
}

.menu-toggle .hamburger,
.menu-toggle.open .hamburger::before,
.menu-toggle.open .hamburger::after {
    position: absolute;
    width: 100%;
    height: 2.25px;
    background: var(--wp--preset--color--main--blue);
    transition: all 0.3s ease;
    align-self: self-start;
}

.menu-toggle .hamburger {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--wp--preset--color--main--blue);
    transition: all 0.3s ease;
    border-radius: 10px;
}

.menu-toggle .hamburger:nth-child(1) {
    top: 0;
}

.menu-toggle .hamburger:nth-child(2) {
    top: 10px;
}

.menu-toggle .hamburger:nth-child(3) {
    top: 20px;
}

.menu-toggle.open .hamburger:nth-child(1) {
    transform: rotate(45deg);
    top: 10px;
}

.menu-toggle.open .hamburger:nth-child(2) {
    opacity: 0;
}

.menu-toggle.open .hamburger:nth-child(3) {
    transform: rotate(-45deg);
    top: 10px;
}

.main-menu {
    display: none;
}

.main-menu.open {
    display: block;
}

.menu-item-has-children {
    position: relative;
}

.submenu-toggle {
    cursor: pointer;
    margin-left: 5px;
    /* Reset de <button> (app.js lo crea como botón real, antes era un span) */
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    display: inline-flex;
    align-items: center;
}

.submenu-toggle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.menu-item-has-children ul {
    display: none;
    position: absolute;
    top: calc(100%);
    left: -100%;
    border-radius: 15px;
    background: rgba(255, 255, 255, 0.76);
    backdrop-filter: blur(6.5px);
    list-style: none;
    padding: 40px 32px;
    margin: 0;
    z-index: 100;
}

.menu-item-has-children.submenu-open>ul {
    display: flex;
    row-gap: 16px !important;
    flex-direction: column;
    backdrop-filter: blur(6.5px);
}

.sub-menu .menu-item {
    min-width: 125px;
    margin: 0;
    padding: 0;
    text-align: left;
    width: 100%;
}

.arrow-icon {
    width: 12px;
    height: 12px;
    transition: transform 0.3s ease;
    display: inline-block;
}

.menu-item-has-children.open>.submenu-toggle .arrow-icon {
    transform: rotate(180deg);
}

/* Hover y "página actual" del menú principal.
   ESCRITORIO — mismo patrón que el menú de categorías del blog
   (.arc-category-label en assets/css/single.css): el enlace sube 3px y su
   filete inferior (border-bottom, reservado transparente en reposo —igual
   que el padding-bottom— para que nada salte) pasa a currentColor: azul
   sobre la cabecera. El <a> es inline-block porque translateY() no afecta
   a cajas inline.
   MÓVIL (bloque @media max-width:1230px, más abajo) — los <li> de primer
   nivel ya se separan con border-bottom #5B61DF; para no duplicar líneas,
   ahí la "página actual" NO subraya el <a>: es ese border del <li> el que
   pasa a blanco, y el hover vuelve al desplazamiento lateral de siempre.
   El subrayado del <a> solo se mantiene (en blanco) en los enlaces de
   sub-menú, cuyos <li> no llevan ese border.
   Se excluyen los desplegables "#" (.menu-item-has-children:
   "Especialidades", "Industrias"), agrupadores sin página propia.
   El estado "página actual" lo marca WordPress con .current-menu-item en
   el <li> (y aria-current="page" en el <a>); el <a> sigue clicable. */
.menu-main .menu-item>a {
    display: inline-block;
    border-bottom: 1px solid transparent;
    padding-bottom: 4px;
    transition: transform 0.2s ease, border-color 0.2s ease;
}

.header-general .menu.menu-main .menu-item:not(.menu-item-has-children)>a:hover,
.header-general .menu.menu-main .menu-item.current-menu-item:not(.menu-item-has-children)>a,
.header-general .menu.menu-main .menu-item.current_page_item:not(.menu-item-has-children)>a {
    transform: translateY(-3px);
    transition-duration: 0.5s;
    border-bottom-color: currentColor;
}

@media(min-width: 1230px) {
    .menu-toggle {
        display: none;
    }
}

@media(min-width: 768px) {
    .menu-item-has-children:hover>ul {
        display: block;
        backdrop-filter: blur(6.5px);
        width: max-content;
    }

    .header-general {
        background-color: transparent;
        z-index: 2;
        position: absolute;
        top: 22px;
        width: 100%;
        transition: background-color 0.3s ease-in-out;
        box-shadow: none;
        /* gutter lateral: lo hereda de la regla base .header-general
           (var(--wp--custom--section--x)); antes se repetía aquí como 0 60px */
    }

    /* Sin backdrop-filter a propósito: #main-menu (el panel del menú móvil,
       position:fixed) vive DENTRO de <header> en el HTML — también sirve
       para la barra de navegación de escritorio, no solo el overlay móvil.
       backdrop-filter (igual que transform/filter/will-change) crea un
       nuevo "containing block" para los descendientes position:fixed: con
       él puesto aquí, el menú dejaba de posicionarse contra la pantalla
       real y pasaba a hacerlo contra esta caja de ~49px del header — de ahí
       que en tablet (donde esta regla sí llega a aplicarse tras hacer
       scroll) el panel se viera colapsado a esa misma altura en vez de
       cubrir la pantalla. En móvil no se notaba porque aquí abajo de
       768px esta regla no llega a cargarse en absoluto. */
    .header-general.fixed {
        position: fixed;
        top: 0;
        z-index: 999;
        background: rgba(243, 243, 243, 0.94);
        transition: background-color 0.3s ease-in-out;
    }
}

.logo-header img {
    max-height: 33px;
    border-radius: 0;
}

.cabecera-cta {
    width: fit-content;
}

.contenedor-login-link {
    display: none;
}

body>footer {
    margin-top: 0;
}

main .single-post,
.privacy-policy .single-page,
.single main .single-post p,
.privacy-policy .single-page h2 {
    max-width: var(--wp--custom--layout--content-size);
    margin: 0 auto;
}

.header-single {
    background-repeat: no-repeat;
    background-position-x: center;
    width: max-content;
    max-width: var(--wp--custom--layout--content-size);
    margin: 0 auto;
}

.single main .single-post p {
    margin: 0 !important;
}

/* Por defecto oculto en pantallas grandes */
.switcher-lang-opensalud-mvl {
    display: none;
}

/* Responsive */

@media only screen and (min-width: 1231px) {
    .top-bar {
        padding: 0 var(--wp--custom--section--x);
    }
}

@media only screen and (max-width: 1230px) {
    /* La tipografía y --standard-border-radius vivían aquí, pero era código
       muerto: style.css tiene un :root sin media query que redefine la escala
       entera y carga después con la misma especificidad, así que ganaba a
       cualquier ancho > 920px. El único breakpoint tipográfico real es el
       @media (max-width: 920px) de style.css. */
    .alignfull {
        margin-left: calc(50% - 50vw);
        margin-right: calc(50% - 50vw);
    }

    p.has-m-font-size {
        font-size: var(--wp--preset--font-size--medium) !important;
        ;
    }

    /*Buttons*/
    a.wp-block-button__link {
        justify-content: center;
    }

    .wp-block-buttons>.wp-block-button {
        width: 100%;
    }

    .menu ul.nav {
        align-items: flex-start;
        flex-direction: column;
    }

    .header-general .menu-main {
        display: none;
    }

    /* position: fixed (no absolute) — pinta el menú relativo al viewport, no
       al documento. Antes había una segunda declaración de esta misma regla
       más abajo con position:fixed que en la cascada ganaba siempre sobre
       esta (misma especificidad, declarada después), dejando esto en la
       práctica sin efecto — pero al ser dos reglas conflictivas para el
       mismo selector, cualquier reordenación futura (o el navegador
       equivocándose de match) podía volver a dejar el menú anclado al
       principio del documento en vez de a la pantalla — visible solo si se
       hacía scroll hasta arriba. Unificado en una sola regla sin ambigüedad. */
    .menu-main.open {
        display: flex;
        justify-content: space-between;
        position: fixed;
        top: 49px;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 100;
        background-color: var(--wp--preset--color--main--blue);
        /* Sin "height" a propósito: con top+bottom ya fijados, la altura la
           calcula el navegador (viewport completo menos el hueco del
           header) sin depender de que "100%" se resuelva bien en fixed —
           en un dispositivo real, con "height: calc(100% - 49px)" puesto a
           la vez que "bottom: 0", el panel se quedaba con solo unos ~85px
           de alto en vez de cubrir la pantalla, dejando ver el contenido de
           la página justo debajo (repetible incluso tras recargar caché). */
        gap: 40px;
        padding: 35px 20px;
        /* Scroll propio del panel: el body queda bloqueado (body.menu-open),
           así que si los ítems no caben en pantalla (submenú abierto, móviles
           bajos, apaisado) este es el único sitio donde se puede desplazar.
           overscroll-behavior evita que el gesto "arrastre" la página de
           detrás al llegar al final. */
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .menu-main.open::-webkit-scrollbar {
        display: none;
    }

    /* Que los bloques del panel no se compriman: si no caben, desborda y
       entra en juego el scroll de arriba. */
    .menu-main.open > * {
        flex-shrink: 0;
    }

    .header-general .menu a:not(.cabecera-cta a):not(.sub-menu a) {
        color: var(--wp--preset--color--white);
        font-size: var(--wp--preset--font-size-h4);
        line-height: var(--wp--preset--line-height-h4);
        font-weight: var(--wp--custom--weight-400);
    }

    .header-general .menu .menu-item .sub-menu a {
        color: var(--wp--preset--color--white);
        font-size: var(--wp--preset--font-size--medium);
        line-height: var(--wp--preset--line-height--medium);
        font-weight: normal;
    }

    .header-general .menu-main {
        flex-direction: column;
    }

    .inner-header-general {
        justify-content: space-between;
        padding: 17px 0 11px 0;
    }

    .logo-header img {
        max-height: 25px;
    }

    .arrow-icon {
        filter: brightness(0) invert(1);
    }

    .menu ul.nav {
        padding-top: 38px;
        gap: 31px;
    }

    .menu-main .menu-item:not(.sub-menu .menu-item) {
        border-bottom: 1px solid #5B61DF;
        width: 100%;
        text-align: left;
        padding-bottom: 16px;
    }

    /* ── Menú móvil: no duplicar líneas ───────────────────────────────
       Los <li> de primer nivel ya llevan border-bottom #5B61DF (regla de
       arriba). En vez de añadir además el filete del <a>: (a) se anula ese
       filete y la subida en móvil, (b) el hover vuelve al desplazamiento
       lateral sobre el <li>, y (c) la "página actual" recolorea a blanco el
       border-bottom del propio <li>. El subrayado del <a> solo se conserva
       en los enlaces de sub-menú, cuyos <li> no tienen ese border. */
    .menu-main .menu-item { transition: transform 0.2s ease; }
    .menu-main .menu-item>a { padding-bottom: 0; }

    .menu-main .menu-item:hover:not(.menu-item.menu-item-has-children:hover) {
        transform: translateX(3px);
        transition-duration: .5s;
    }

    .header-general .menu.menu-main .menu-item:not(.menu-item-has-children)>a:hover,
    .header-general .menu.menu-main .menu-item.current-menu-item:not(.menu-item-has-children)>a,
    .header-general .menu.menu-main .menu-item.current_page_item:not(.menu-item-has-children)>a {
        transform: none;
        border-bottom-color: transparent;
    }

    /* "Página actual" de primer nivel: el border-bottom del <li> (#5B61DF)
       pasa a blanco — sin segundo subrayado en el <a>. */
    .menu-main .menu-item:not(.sub-menu .menu-item).current-menu-item:not(.menu-item-has-children),
    .menu-main .menu-item:not(.sub-menu .menu-item).current_page_item:not(.menu-item-has-children) {
        border-bottom-color: var(--wp--preset--color--white);
    }

    /* "Página actual" dentro de un sub-menú (enlaces que cuelgan de un
       desplegable dentro del propio menú): sus <li> no llevan el border
       #5B61DF, así que aquí SÍ se conserva el subrayado del <a>, en blanco
       (currentColor) y solo eso —sin subida—. */
    .header-general .menu.menu-main .sub-menu .menu-item.current-menu-item>a,
    .header-general .menu.menu-main .sub-menu .menu-item.current_page_item>a {
        border-bottom-color: currentColor;
    }

    .menu-item-has-children {
        position: relative;
    }

    .menu-item-has-children ul {
        position: static;
        border-radius: 0;
        background: none;
        backdrop-filter: none;
        padding: 0;
    }

    .menu-item-has-children>.submenu-toggle .arrow-icon {
        position: absolute;
        top: 4px;
        right: 0;
        height: 10px;
        padding: 0 10px;
        width: 30px;
    }

    .menu-main.open nav {
        width: 100%;
    }

    .menu-item-has-children.submenu-open>ul {
        margin-left: 11px;
        /* Mismo ritmo vertical (~77px entre enlaces) que la lista de primer
           nivel del menú móvil, tanto dentro del sub-menú como en sus
           bordes:
           - row-gap 31px (= .menu ul.nav gap) + padding-bottom 16px por
             ítem (= el de los ítems de primer nivel) -> ~77px entre enlaces.
             El !important gana al row-gap:16px!important de la regla base.
           - margin-top 47px (= gap 31 + padding 16) para que "Especialidades"
             quede a la misma distancia de su primer hijo.
           - margin-bottom 0: la salida ya la dan el padding-bottom + borde
             + gap del propio <li> "Especialidades". */
        margin-top: 47px;
        margin-bottom: 0;
        row-gap: 31px !important;
    }

    .menu-main .sub-menu .menu-item {
        padding-bottom: 16px;
    }

    .menu-main .sub-menu .menu-item:last-child {
        padding-bottom: 0;
    }

    .header-general {
        position: sticky;
        top: 0;
        z-index: 999;
        height: 49px;
    }

    body.menu-open {
        overflow: hidden;
    }

    .contenedor-login-hamburger {
        display: flex;
        gap: 24px;
    }

    .contenedor-cta-lang,
    .cabecera-cta {
        width: 100%;
    }

    .contenedor-cta-lang {
        display: flex;
        flex-direction: column;
        gap: 50px;
    }

    .cabecera-cta .wp-block-button__link {
        width: 100%;
        border-radius: var(--btn-radius);
        background: var(--btn-light-bg);
        color: var(--wp--preset--color--main--blue);
    }

    /* Sin este hover propio, el botón caía al hover azul del botón
       unificado y desaparecía sobre el overlay azul del menú móvil. */
    .cabecera-cta .wp-block-button__link:hover {
        background: var(--btn-light-hover);
    }

    .contenedor-login-link {
        display: block;
    }

    .login-link-icon {
        display: inline-block;
        width: 21px;
        height: 25px;
        color: #3138C3;
        background-color: currentColor;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-image: url("../img/login-icon.svg");
        mask-image: url("../img/login-icon.svg");
    }

    .top-bar {
        display: none;
    }

    .header-general .menu .switcher-lang-opensalud-mvl ul a {
        font-size: var(--wp--preset--font-size-h6) !important;
        line-height: var(--wp--preset--line-height-h6) !important;
        font-weight: var(--wp--custom--weight-700) !important;
    }

    /* Borde abajo (no arriba) para el idioma seleccionado y el hover, en
       coherencia con el resto del menú móvil, donde la línea va siempre
       bajo el texto. */
    .current-lang,
    .switcher-lang-opensalud-mvl li a:hover {
        border-bottom: 2px solid var(--wp--preset--color--white);
    }

    .switcher-lang-opensalud-mvl {
        display: flex;
    }

    section .wp-block-buttons {
        row-gap: 12px;
    }
}

/* Gutter lateral del header a x-mobile en <=920px (mismo punto que el resto de
   secciones del tema). El paso a menú hamburguesa sigue en 1230px — el header
   es la única excepción a ese breakpoint porque el menú de escritorio no cabe
   por debajo. */
@media only screen and (max-width: 920px) {
    .header-general {
        padding: 0 var(--wp--custom--section--x-mobile);
    }
}

/* El footer cambia a versión apilada en el mismo punto que el header pasa a
   menú hamburguesa (1230px), no en 940px. */
@media only screen and (max-width: 1230px) {

    /* ── Footer: apilado + acordeón ──────────────────────────── */
    .footer-general {
        padding: 56px var(--wp--custom--section--x-mobile) 40px;
    }

    .footer-general .inner-footer-general {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        column-gap: 0;
        row-gap: 0;
    }

    .footer-brand {
        order: 1;
        padding-bottom: 28px;
        margin-bottom: 4px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .footer-brand-logo img {
        /* Igual que .logo-header img en este mismo breakpoint. */
        max-height: 25px;
    }

    .footer-col--plataforma {
        order: 2;
    }

    .footer-col--privacidad {
        order: 3;
    }

    .footer-col--compania {
        order: 4;
        margin: 0 0 24px;
    }

    /* Móvil: marca → 3 acordeones → GRUPO → línea → SEGURIDAD → línea →
       iconos sociales → copyright. Las líneas son los dos <hr>. */
    /* GRUPO ocupa todo el ancho (se anula el align-self: anchor-center de
       escritorio, que en móvil lo dejaba encogido y centrado). */
    .footer-grupo {
        order: 5;
        align-self: stretch;
        justify-self: stretch;
        text-align: right;
    }

    /* En móvil los enlaces de GRUPO pasan de fila horizontal a columna
       alineada a la derecha (la fila con gap 60px se salía de pantalla).
       Espejo de SEGURIDAD, que queda a la izquierda. */
    .footer-grupo .list-grupo {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        gap: 14px;
    }

    .footer-divider--mid {
        order: 6;
        margin: 24px 0 0;
    }



    .footer-compliance {
        order: 7;
        align-items: flex-start;
        gap: 18px;
        padding-top: 28px;
        text-align: left;
    }

    .footer-divider--bot {
        order: 8;
        margin: 24px 0;
    }

    .footer-social {
        order: 9;
    }

    .footer-copyright {
        order: 10;
        justify-self: start;
        justify-content: flex-start;
        flex-wrap: wrap;
        white-space: normal;
        padding-top: 20px;
        text-align: left;
    }

    /* Cada columna es una fila de acordeón separada por una línea */
    .footer-general.footer-accordion-ready .footer-col {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    .footer-general.footer-accordion-ready .footer-col-title {
        margin-bottom: 0;
        padding: 16px 0;
        border-bottom: 0;
    }

    .footer-general.footer-accordion-ready .footer-col-toggle {
        cursor: pointer;
    }

    .footer-general.footer-accordion-ready .footer-col-body {
        overflow: hidden;
        max-height: 0;
        transition: max-height .3s ease;
    }

    .footer-general.footer-accordion-ready .footer-col.is-open .footer-col-body {
        max-height: 800px;
        padding-bottom: 20px;
    }

    /* Icono +/− de cada fila de acordeón */
    .footer-general.footer-accordion-ready .footer-col-icon {
        display: block;
        position: relative;
        width: 14px;
        height: 14px;
        flex: none;
        margin-left: 16px;
    }

    .footer-general.footer-accordion-ready .footer-col-icon::before,
    .footer-general.footer-accordion-ready .footer-col-icon::after {
        content: "";
        position: absolute;
        background: var(--wp--preset--color--grey-06);
    }

    .footer-general.footer-accordion-ready .footer-col-icon::before {
        top: 6px;
        left: 0;
        width: 14px;
        height: 2px;
    }

    .footer-general.footer-accordion-ready .footer-col-icon::after {
        left: 6px;
        top: 0;
        width: 2px;
        height: 14px;
        transition: opacity .2s ease;
    }

    .footer-general.footer-accordion-ready .footer-col.is-open .footer-col-icon::after {
        opacity: 0;
    }
}

/* ── Iconos Material Symbols: evitar el "flash" de texto legible ─────
   .material-symbols-outlined es una fuente de iconos por ligadura: el
   propio CSS que sirve Google Fonts declara font-display:swap, así que
   hasta que el archivo de la fuente termina de descargarse (sobre todo la
   primera vez que se visita el sitio, sin la fuente aún en caché del
   navegador) el span muestra su texto tal cual ("close", "stethoscope"...)
   con la fuente de reserva, en vez del icono — se ve como si fuera código
   sin procesar. Se oculta por color (no display/visibility, para no mover
   el layout) hasta que assets/js/app.js confirma que la fuente cargó y
   añade la clase .fonts-symbols-loaded al <html>. */
html:not(.fonts-symbols-loaded) .material-symbols-outlined {
    color: transparent !important;
}