/* =========================================================
   Cabecera del tema (.ds-header)
   Barra flotante fija con efecto glass. Al hacer scroll pasa a fondo oscuro,
   texto claro, logo invertido y botón claro. En móvil, menú a pantalla completa.
   ========================================================= */
.ds-header {
    /* --- medidas --- */
    --hd-top: 16px;                 /* separación del borde superior */
    --hd-side: 16px;                /* separación de los laterales */
    --hd-height: 76px;
    --hd-radius: 999px;
    --hd-max-width: 98rem;
    --hd-pad-x: 14px;
    --hd-logo-size: clamp(30px, 3.3vw - 10px, 58px);   /* logo fluido: ~32px en portátil 1280, ~37px a 1440, ~53px a 1920, tope 58px */
    --hd-item-gap: clamp(14px, 1.6vw - 6px, 36px);   /* separación entre enlaces: ~18px en MacBook 1512, ~22px a 1728, ~25px a 1920, tope 36px */
    --hd-item-size: clamp(15px, 1.1rem, 20px);   /* ítems del menú: 15px en portátil, hasta 20px en pantallas grandes */
    --hd-cta-size: clamp(16px, 1.1rem, 20px);    /* botón: 16px en portátil y escala igual que el menú */
    --hd-nav-cta-gap: 44px;      /* espacio entre el último ítem y el botón */
    --hd-breakpoint: 1024px;        /* informativo: el corte real está en las media queries */
    /* --- estado normal (glass claro) --- */
    --hd-bg: rgba(255, 255, 255, 0.55);
    --hd-blur: 18px;
    --hd-border: transparent;
    --hd-shadow: 0 10px 40px rgba(9, 30, 53, 0.10);
    --hd-color: var(--e-global-color-db260d1, #091e35);
    --hd-color-hover: var(--e-global-color-accent, #073e7a);
    --hd-cta-bg: var(--e-global-color-db260d1, #091e35);
    --hd-cta-color: #ffffff;
    --hd-cta-bg-hover: var(--e-global-color-accent, #073e7a);
    --hd-cta-color-hover: #ffffff;
    --hd-cta-icon-bg: rgba(255, 255, 255, 0.18);
    --hd-cta-icon-color: #ffffff;
    --hd-logo-filter: none;
    /* --- estado scroll (oscuro) --- */
    --hd-s-bg: rgba(9, 30, 53, 0.82);
    --hd-s-border: transparent;
    --hd-s-shadow: 0 10px 40px rgba(9, 30, 53, 0.35);
    --hd-s-color: rgba(255, 255, 255, 0.82);
    --hd-s-color-hover: #ffffff;
    --hd-s-cta-bg: #ffffff;
    --hd-s-cta-color: var(--e-global-color-db260d1, #091e35);
    --hd-s-cta-bg-hover: var(--e-global-color-primary, #deedf6);
    --hd-s-cta-color-hover: var(--e-global-color-db260d1, #091e35);
    --hd-s-cta-icon-bg: var(--e-global-color-db260d1, #091e35);
    --hd-s-cta-icon-color: #ffffff;
    --hd-s-logo-filter: invert(1);
    /* --- menú móvil --- */
    --hd-ov-bg: var(--e-global-color-db260d1, #091e35);
    --hd-ov-color: #ffffff;
    --hd-ov-color-hover: var(--e-global-color-primary, #deedf6);
    --hd-ov-size: clamp(2rem, 7vw, 4rem);
    --hd-transition: 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);

    position: fixed;
    top: calc(var(--hd-top) + var(--wp-admin--admin-bar-height, 0px));
    left: 0;
    right: 0;
    z-index: 100000; /* por encima de cualquier elemento con z-index de la página */
    padding: 0 var(--hd-side);
    pointer-events: none; /* solo la barra recibe clics */
}

/* ---------- barra ---------- */
.ds-header__bar {
    box-sizing: border-box;
    pointer-events: auto;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: var(--hd-max-width);
    height: var(--hd-height);
    margin: 0 auto;
    padding: 0 var(--hd-pad-x) 0 calc(var(--hd-pad-x) + 8px);
    border-radius: var(--hd-radius);
    border: 1px solid var(--hd-border);
    background: var(--hd-bg);
    -webkit-backdrop-filter: blur(var(--hd-blur)) saturate(1.3);
    backdrop-filter: blur(var(--hd-blur)) saturate(1.3);
    box-shadow: var(--hd-shadow);
    color: var(--hd-color);
    transition: background-color var(--hd-transition), border-color var(--hd-transition), box-shadow var(--hd-transition), color var(--hd-transition);
}

.ds-header.is-scrolled .ds-header__bar {
    background: var(--hd-s-bg);
    border-color: var(--hd-s-border);
    box-shadow: var(--hd-s-shadow);
    color: var(--hd-s-color);
}

/* ---------- logo ---------- */
.ds-header__logo {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.ds-header__logo a {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
}

.ds-header__logo img {
    display: block;
    width: auto;
    height: var(--hd-logo-size);
    max-height: var(--hd-logo-size);
    max-width: none;
    border-radius: 0;
    filter: var(--hd-logo-filter);
    transition: filter var(--hd-transition);
}

.ds-header.is-scrolled .ds-header__logo img {
    filter: var(--hd-s-logo-filter);
}

.ds-header__logo-text {
    font-family: var(--e-global-typography-primary-font-family, "Fraunces"), serif;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* ---------- menú de escritorio ---------- */
.ds-header__nav {
    flex: 0 1 auto;
    display: flex;
    justify-content: flex-end;
    min-width: 0;
    margin-left: auto;
    margin-right: 1rem;
    overflow: hidden; /* si no entra, se recorta por la izquierda en vez de pisar el logo */
}

.ds-header__menu {
    display: flex;
    align-items: center;
    gap: var(--hd-item-gap);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ds-header__menu li {
    position: relative;
    margin: 0;
}

.ds-header__menu a {
    display: inline-block;
    padding: 6px 0;
    font-family: var(--e-global-typography-text-font-family, "Geist"), sans-serif;
    font-size: var(--hd-item-size);
    font-weight: 400;
    white-space: nowrap;
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.ds-header__menu a:hover,
.ds-header__menu a:focus-visible,
.ds-header__menu .current-menu-item > a,
.ds-header__menu .current-menu-ancestor > a {
    color: var(--hd-color-hover);
}

.ds-header.is-scrolled .ds-header__menu a:hover,
.ds-header.is-scrolled .ds-header__menu a:focus-visible,
.ds-header.is-scrolled .ds-header__menu .current-menu-item > a,
.ds-header.is-scrolled .ds-header__menu .current-menu-ancestor > a {
    color: var(--hd-s-color-hover);
}

/* submenú simple (segundo nivel) */
.ds-header__menu .sub-menu {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translate(-50%, 8px);
    min-width: 200px;
    margin: 0;
    padding: 10px 0;
    list-style: none;
    border-radius: 14px;
    background: var(--hd-bg);
    -webkit-backdrop-filter: blur(var(--hd-blur));
    backdrop-filter: blur(var(--hd-blur));
    box-shadow: var(--hd-shadow);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
}

.ds-header.is-scrolled .ds-header__menu .sub-menu {
    background: var(--hd-s-bg);
}

.ds-header__menu li:hover > .sub-menu,
.ds-header__menu li:focus-within > .sub-menu {
    opacity: 1;
    visibility: visible;
    transform: translate(-50%, 0);
    transition-delay: 0s;
}

.ds-header__menu .sub-menu a {
    display: block;
    padding: 8px 18px;
}

/* ---------- botón CTA ---------- */
.ds-header .ds-header__cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 24px;
    border-radius: 999px;
    background: var(--hd-cta-bg);
    color: var(--hd-cta-color);
    font-family: var(--e-global-typography-text-font-family, "Geist"), sans-serif;
    font-size: var(--hd-cta-size);
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color var(--hd-transition), color var(--hd-transition);
}

.ds-header .ds-header__cta:hover,
.ds-header .ds-header__cta:focus-visible {
    background: var(--hd-cta-bg-hover);
    color: var(--hd-cta-color-hover);
}

.ds-header__cta-icon {
    width: 32px;
    height: 32px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--hd-cta-icon-bg);
    color: var(--hd-cta-icon-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background-color var(--hd-transition), color var(--hd-transition);
}

.ds-header__cta-icon svg {
    display: block;
    width: 15px;
    height: auto;
}

.ds-header.is-scrolled .ds-header__bar .ds-header__cta {
    background: var(--hd-s-cta-bg);
    color: var(--hd-s-cta-color);
}

.ds-header.is-scrolled .ds-header__bar .ds-header__cta:hover,
.ds-header.is-scrolled .ds-header__bar .ds-header__cta:focus-visible {
    background: var(--hd-s-cta-bg-hover);
    color: var(--hd-s-cta-color-hover);
}

.ds-header.is-scrolled .ds-header__bar .ds-header__cta-icon {
    background: var(--hd-s-cta-icon-bg);
    color: var(--hd-s-cta-icon-color);
}

/* ---------- hamburguesa ---------- */
.ds-header .ds-header__burger {
    display: none;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    cursor: pointer;
    position: relative;
    box-shadow: none;
}

.ds-header__burger-line {
    position: absolute;
    left: 12px;
    width: 20px;
    height: 1.5px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--hd-transition), top var(--hd-transition), opacity var(--hd-transition);
}

.ds-header__burger-line:nth-child(1) { top: 18px; }
.ds-header__burger-line:nth-child(2) { top: 25px; }

.ds-header.is-open .ds-header__burger-line:nth-child(1) { top: 21.5px; transform: rotate(45deg); }
.ds-header.is-open .ds-header__burger-line:nth-child(2) { top: 21.5px; transform: rotate(-45deg); }

/* ---------- overlay móvil ---------- */
.ds-header__overlay {
    position: fixed;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: var(--hd-ov-bg);
    color: var(--hd-ov-color);
    clip-path: inset(0 0 100% 0 round 0 0 40px 40px);
    transition: clip-path 0.7s cubic-bezier(0.77, 0, 0.175, 1);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.ds-header.is-open .ds-header__overlay {
    pointer-events: auto;
    clip-path: inset(0 0 0 0 round 0);
}

.ds-header__overlay-inner {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;
    padding: calc(var(--hd-top) + var(--hd-height) + 40px) 8vw 40px;
}

.ds-header__overlay-menu {
    margin: 0;
    padding: 0;
    list-style: none;
}

.ds-header__overlay-menu li {
    margin: 0;
    overflow: hidden;
}

.ds-header__overlay-menu a {
    display: inline-block;
    padding: 0.18em 0;
    font-family: var(--e-global-typography-primary-font-family, "Fraunces"), serif;
    font-weight: 300;
    font-size: var(--hd-ov-size);
    line-height: 1.15;
    text-transform: uppercase;
    color: inherit;
    text-decoration: none;
    transform: translateY(110%);
    opacity: 0;
    transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.5s ease, color 0.2s ease;
    transition-delay: 0s;
}

.ds-header.is-open .ds-header__overlay-menu a {
    transform: translateY(0);
    opacity: 1;
    transition-delay: calc(0.25s + var(--i, 0) * 0.06s);
}

.ds-header__overlay-menu a:hover,
.ds-header__overlay-menu a:focus-visible,
.ds-header__overlay-menu .current-menu-item > a {
    color: var(--hd-ov-color-hover);
}

.ds-header__overlay-menu .sub-menu {
    margin: 0 0 0 1.5em;
    padding: 0;
    list-style: none;
}

.ds-header__overlay-menu .sub-menu a {
    font-size: calc(var(--hd-ov-size) * 0.5);
    font-family: var(--e-global-typography-text-font-family, "Geist"), sans-serif;
    text-transform: none;
}

.ds-header__overlay-footer {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease 0.55s, transform 0.5s ease 0.55s;
}

.ds-header.is-open .ds-header__overlay-footer {
    opacity: 1;
    transform: translateY(0);
}

.ds-header .ds-header__cta--overlay {
    background: #ffffff;
    color: var(--hd-ov-bg);
    font-size: 1.5rem;
    padding: 12px 12px 12px 28px;
}

.ds-header .ds-header__cta--overlay .ds-header__cta-icon {
    width: 34px;
    height: 34px;
    background: var(--hd-ov-bg);
    color: #ffffff;
}

/* con el menú abierto la barra pasa al estado claro sobre fondo oscuro */
.ds-header.is-open .ds-header__bar {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    color: #ffffff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

.ds-header.is-open .ds-header__logo img {
    filter: var(--hd-s-logo-filter);
}

body.ds-menu-open {
    overflow: hidden;
}

/* ---------- responsive ---------- */
/* Portátiles: el logotipo es ancho y el menú largo; se compactan para que
   convivan sin pisarse */
@media (max-width: 1440px) {
    .ds-header {
        --hd-item-gap: 16px;
        --hd-item-size: 14px;
        --hd-nav-cta-gap: 24px;
        --hd-cta-size: 15px;
    }
}

@media (max-width: 1300px) {
    .ds-header {
        --hd-item-gap: 12px;
        --hd-item-size: 12.5px;
        --hd-nav-cta-gap: 16px;
        --hd-cta-size: 14px;
    }
}

@media (max-width: 1024px) {
    .ds-header {
        --hd-top: 12px;
        --hd-side: 12px;
        --hd-height: 60px;
        --hd-logo-size: 36px;
    }

    .ds-header__nav,
    .ds-header__bar .ds-header__cta {
        display: none;
    }

    .ds-header .ds-header__burger {
        display: block;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ds-header__bar,
    .ds-header__overlay,
    .ds-header__overlay-menu a,
    .ds-header__overlay-footer,
    .ds-header__burger-line {
        transition: none;
    }
}

/* ---------- Páginas con submenú sticky (listado de casos clínicos) ----------
   Ahí el header no queda fijo: se va con el scroll para no tapar el submenú.
   Aplica a cualquier página que tenga el listado con "sticky" activado. */
body:has(.ds-lista-sticky-yes .ds-lista__nav) .ds-header {
    position: absolute;
}