/*
Theme Name: opensalud-design
Author: Isabel Bordegaray
Tags: styles
Version: 1.0.0.1772015961
Updated: 2026-08-24

*/

/* ============================================================
   TIPOGRAFÍA — tokens del theme
   El tema ya no tiene padre (no hay cabecera Template ni carpeta
   opensalud/), así que el selector es :root a secas: no hace falta
   el bump de especificidad html:root que antes servía para ganarle
   al tema padre. style.css se encola el último (functions.php:
   base -> style) y gana los empates con assets/css/base.css, que
   mantiene el mismo juego de valores en sync. Mismos nombres de
   variable que usan los bloques (--wp--preset--font-size-h1..h6,
   etc.) para no reescribir cada var() existente.
   ============================================================ */
:root {
    /* Escala tipográfica fija (8 pasos): 13/16/18/21/24/32/40/45px.
       h3 y h4 comparten valor (32px) y extra-small/form-tag comparten
       valor (13px) a propósito, para consolidar los ~19 tamaños sueltos
       que había antes en un único juego de pasos. */
    --wp--preset--font-size--medium: 1.125rem;
    --wp--preset--font-size--small: 1rem;
    --wp--preset--font-size--extra--small: 0.75rem;
    --wp--preset--font-size--form-tag: 0.75rem;
    --wp--preset--font-size-h1: 2.813rem;
    --wp--preset--font-size-h2: 2.5rem;
    --wp--preset--font-size-h3: 2rem;
    --wp--preset--font-size-h4: 2rem;
    --wp--preset--font-size-h5: 1.5rem;
    --wp--preset--font-size-h6: 1.313rem;

    --wp--preset--line-height--medium: 1.688rem;
    --wp--preset--line-height--small: 1.25rem;
    --wp--preset--line-height--extra--small: 1rem;
    --wp--preset--line-height--form-tag: 1rem;
    --wp--preset--line-height-h1: 2.813rem;
    --wp--preset--line-height-h2: 2.75rem;
    --wp--preset--line-height-h3: 2.25rem;
    --wp--preset--line-height-h4: 2.25rem;
    --wp--preset--line-height-h5: 2rem;
    --wp--preset--line-height-h6: 1.5rem;

    --wp--custom--weight-400: 400;
    --wp--custom--weight-500: 500;
    --wp--custom--weight-700: 700;

    /* Mismo nombre que usa el theme padre para el radio de tarjetas/imágenes
       de las páginas independientes (404, single, blog) — redefinido aquí
       para desvincularlo del padre, igual que la tipografía. El botón se
       unifica directamente al token de radio "full" que ya usan el resto
       de páginas y bloques, en vez de mantener su propio valor (300px). */
    --standard-border-radius: 30px;
    --standard-border-radius-button: var(--wp--custom--radius--full);

    /* Sombras — únicas fuentes de box-shadow del tema (antes había 17
       valores sueltos repartidos por páginas y bloques).
       · card*: sombra "neumórfica" de tarjetas (brillo blanco arriba-izq.
         + sombra azul marino abajo-dcha.); -soft para formularios y
         contenedores grandes, -sm para elementos pequeños dentro de ellos.
       · sm/md/lg/xl: elevación clásica hacia abajo, de menos a más
         (tablas/iconos -> paginación/flechas -> tarjetas -> modales y hover).
       · on-dark: hover de botones blancos sobre fondos oscuros/de color,
         donde el azul marino no se distingue y hace falta negro. */
    --shadow-card: -10px -10px 35px 0 rgb(255 255 255 / 0.59), 10px 10px 35px 0 rgb(13 39 80 / 0.19);
    --shadow-card-soft: -10px -10px 35px 0 rgb(255 255 255 / 0.59), 10px 10px 35px 0 rgb(13 39 80 / 0.12);
    --shadow-card-sm: -4px -4px 14px 0 rgb(255 255 255 / 0.59), 4px 4px 14px 0 rgb(13 39 80 / 0.12);
    --shadow-sm: 0 10px 24px rgb(13 39 80 / 0.1);
    --shadow-md: 0 10px 24px rgb(13 39 80 / 0.22);
    --shadow-lg: 0 20px 40px rgb(13 39 80 / 0.18);
    --shadow-xl: 0 30px 60px rgb(13 39 80 / 0.28);
    --shadow-on-dark: 0 10px 24px rgb(0 0 0 / 0.25);
}

/* Punto de corte único para toda la tipografía del theme hijo,
   alineado con el breakpoint que ya usan la mayoría de bloques
   para su maquetación (920px), en vez del 1230px del padre. */
@media (max-width: 920px) {
    :root {
        --wp--preset--font-size-h1: 2rem;
        --wp--preset--font-size-h2: 1.8rem;
        --wp--preset--font-size-h3: 1.5rem;
        --wp--preset--font-size-h4: 1.5rem;
        --wp--preset--font-size-h5: 1.313rem;

        --wp--preset--line-height-h1: 2.25rem;
        --wp--preset--line-height-h2: 1.75rem;
        --wp--preset--line-height-h3: 1.75rem;
        --wp--preset--line-height-h4: 1.75rem;
        --wp--preset--line-height-h5: 1.438rem;
        --wp--preset--line-height-h6: 1.438rem;

        --standard-border-radius: 15px;
    }
}

/* ============================================================
   EQUILIBRADO DE LÍNEAS — encabezados
   Evita que quede una única palabra suelta en la última línea de
   un h1-h6 al reducir el ancho (responsive). text-wrap: balance
   reparte el texto entre líneas de forma equilibrada; en navegadores
   que no lo soportan la propiedad se ignora y el texto hace wrap
   normal, así que no requiere fallback. Regla global para cubrir
   también los encabezados que se añadan en el futuro.
   ============================================================ */
h1,
h2,
h3,
h4,
h5,
h6 {
    text-wrap: balance;
}

/* ============================================================
   HEADER — NAV Style
   ============================================================ */
.menu-item-has-children ul {
    top: unset;
    left: unset;

}

.block-card {
    box-shadow: var(--shadow-card);
}

/* ============================================================
   Section — Page Style
   ============================================================ */

/* ============================================================
   ÁREA DE TOQUE — WCAG 2.5.8 / mínimo 44×44px
   Sobrescribe opensalud/style.css (header.php y footer.php son
   del theme padre y no se tocan). Se amplía el padding de los
   enlaces pequeños detectados en la auditoría — selector de
   idioma y menús de footer — en vez del tamaño de fuente, para
   no alterar la jerarquía visual del componente.
   ============================================================ */

/* Selector de idioma — cabecera desktop (.top-bar), min-width: 1231px */
.top-bar {
    height: auto;
    min-height: 44px;
}

.list-lang-opensalud {
    height: auto;
    min-height: 44px;
}

.list-lang-opensalud .lang-item a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 10px;
}

/* Selector de idioma — menú móvil (dentro del hamburger, max-width: 1230px) */
.switcher-lang-opensalud-mvl .lang-item a {
    display: inline-flex;
    align-items: center;
    padding: 12px 10px;
}

/* Menús de footer (footer-menu, second-menu, ctas-menu) */
footer nav .navbar-nav li a {
    display: inline-flex;
    align-items: center;
    padding: 12px 10px;
    text-align: left;
}

@media only screen and (max-width: 1230px) {
    footer nav .navbar-nav li a {
        padding: 0 10px;
        line-height: var(--wp--preset--font-size--small);
    }

}

/* .header-general es position:absolute con un "top" fijo (22px) que no
   depende del alto real de .top-bar: al crecer la barra de idioma de
   26px a 44px (+18px), la cabecera quedaba pegada a ella sin margen.
   Se compensa ese mismo delta, solo en el ancho donde la barra de
   idioma desktop es visible (> 1230px, ver opensalud/style.css). */
@media (min-width: 1231px) {
    .header-general {
        top: 40px;
    }
}

/* ============================================================
   CONTRASTE — etiquetas de formulario CF7 sin estilo propio
   Sobrescribe opensalud/style.css (header.php y footer.php son
   del theme padre y no se tocan). El padre define ".wpcf7 label"
   en gris grey-06 (#8A8A8A), que da solo 3.45:1 sobre blanco — por
   debajo del 4.5:1 que exige WCAG AA a texto de este tamaño. Los
   formularios propios del hijo (si-form-card, cnt-form-card,
   pr-modal-form) ya tienen su propio color de etiqueta más
   específico y no se ven afectados por este cambio; esto solo
   corrige el caso sin cubrir — el formulario de email suelto en
   cada tarjeta de recursos (.pr-form-item), que hereda el gris del
   padre sin que ningún selector de este theme lo sobrescriba.
   ============================================================ */
.wpcf7 label {
    color: var(--wp--preset--color--text-secondary);
}

/* ============================================================
   ANIMACIÓN — Titular rotativo (rotating-headline)
   Reutilizable en cualquier heading: dentro de un
   <span class="rotating-headline-wrapper">, cada frase es un
   <span class="rotating-headline-word"> (la primera con
   "is-active"). app.js va rotando la clase "is-active" entre ellas
   cada X ms (atributo data-rotate-delay, por defecto 2500).
   Efecto "drop-in": la frase entra cayendo en el eje Z (3D) con
   fade, la saliente cae hacia atrás del mismo modo — reproduce el
   widget "Animated Headline" (Elementor Pro) del H1 de referencia
   (menttum.com/burnout).
   ============================================================ */
.rotating-headline-wrapper {
    display: inline-block;
    position: relative;
    perspective: 300px;
    vertical-align: bottom;
    transition: width 0.5s;
}

.rotating-headline-word {
    display: inline-block;
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    opacity: 0;
    color: var(--wp--preset--color--main-blue);
    white-space: nowrap;
}

.rotating-headline-word.is-active {
    position: relative;
    opacity: 1;
    animation: rotating-headline-in 0.8s;
}

.rotating-headline-word.is-leaving {
    animation: rotating-headline-out 0.8s;
}

@keyframes rotating-headline-in {
    0% {
        opacity: 0;
        transform: translateZ(100px);
    }

    100% {
        opacity: 1;
        transform: translateZ(0);
    }
}

@keyframes rotating-headline-out {
    0% {
        opacity: 1;
        transform: translateZ(0);
    }

    100% {
        opacity: 0;
        transform: translateZ(-100px);
    }
}