/**
 * 04-hover-fixes.css
 *
 * Fix 1: Submenu desktop hover - cambiar color blanco (legacy mobile) por verde oscuro legible
 * Fix 2: Misma logica para active state
 * Creado 2026-04-27T08:43:52+00:00
 */

/* === SUBMENU DESKTOP HOVER (>=1025px) ===
 * Override de la regla legacy mobile que pone color:#FFFFFF al hover (ilegible sobre crema)
 * Usamos selectores con MAS especificidad para ganar a la regla legacy.
 */
@media (min-width: 1025px) {
    html body .elementor-location-header .elementor-element.elementor-element-270d6d4 .elementor-element.elementor-element-937f571 .elementor-nav-menu--dropdown li > a:hover,
    html body .elementor-location-header .elementor-element.elementor-element-270d6d4 .elementor-element.elementor-element-937f571 .elementor-nav-menu--dropdown a:hover,
    html body .elementor-location-header .elementor-element.elementor-element-270d6d4 .elementor-element.elementor-element-937f571 .elementor-nav-menu--dropdown a.elementor-item:hover,
    html body .elementor-location-header .elementor-element.elementor-element-270d6d4 .elementor-element.elementor-element-937f571 .elementor-nav-menu--dropdown a.elementor-sub-item:hover,
    html body .elementor-location-header .elementor-element.elementor-element-270d6d4 .elementor-element.elementor-element-937f571 .elementor-nav-menu--dropdown .elementor-item.highlighted,
    html body .elementor-location-header .elementor-element.elementor-element-270d6d4 .elementor-element.elementor-element-937f571 .elementor-nav-menu--dropdown .elementor-item.elementor-item-active,
    html body .elementor-location-header .elementor-element.elementor-element-270d6d4 .elementor-element.elementor-element-937f571 .elementor-nav-menu--dropdown .elementor-sub-item.highlighted,
    html body .elementor-location-header .elementor-element.elementor-element-270d6d4 .elementor-element.elementor-element-937f571 .elementor-nav-menu--dropdown .elementor-sub-item.elementor-item-active {
        color: #2A3124 !important; /* verde profundo - contraste 11:1 sobre crema */
        background-color: rgba(196, 155, 87, 0.20) !important; /* gold sutil */
    }
}

/* Tambien sobre estado scroll: asegurar legibilidad submenu desktop con scroll */
@media (min-width: 1025px) {
    html body.az-scrolled .elementor-location-header .elementor-element.elementor-element-270d6d4 .elementor-element.elementor-element-937f571 .elementor-nav-menu--dropdown li > a:hover,
    html body.az-scrolled .elementor-location-header .elementor-element.elementor-element-270d6d4 .elementor-element.elementor-element-937f571 .elementor-nav-menu--dropdown a:hover,
    html body.az-scrolled .elementor-location-header .elementor-element.elementor-element-270d6d4 .elementor-element.elementor-element-937f571 .elementor-nav-menu--dropdown a.elementor-item:hover,
    html body.az-scrolled .elementor-location-header .elementor-element.elementor-element-270d6d4 .elementor-element.elementor-element-937f571 .elementor-nav-menu--dropdown a.elementor-sub-item:hover {
        color: #2A3124 !important;
        background-color: rgba(196, 155, 87, 0.22) !important;
    }
}


/* ============ HEADER POLISH v1 ============
 * 1) Item activo del menu: sin background/box-shadow/outline.
 * 2) Submenu hover-bridge: extender hit area + bridge invisible.
 * ====================================================================== */

/* Item activo se funde con el fondo del header (solo cambia color de texto) */
html body .elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active,
html body .elementor-location-header .elementor-nav-menu--main li.current-menu-item > a,
html body .elementor-location-header .elementor-nav-menu--main li.current-menu-ancestor > a,
html body .elementor-location-header .elementor-nav-menu--main .elementor-item:focus,
html body .elementor-location-header .elementor-nav-menu--main .elementor-item:focus-visible {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
}

/* Si Elementor usa pointer 'background' o 'framed' como underline, ocultar la caja */
html body .elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active::before,
html body .elementor-location-header .elementor-nav-menu--main .elementor-item:hover::before {
    background: transparent !important;
    border: none !important;
}
html body .elementor-location-header .elementor-nav-menu--main .elementor-item.elementor-item-active::after {
    background-color: var(--az-gold-oscuro, #C49B57) !important;
    height: 2px !important;
    bottom: 8px !important;
}

/* Hover bridge: cuando bajas de Terapias/Mas al submenu, el cursor cruza un gap.
 * Extendemos el area del trigger hacia abajo + el dropdown se solapa hacia arriba.
 */
html body .elementor-location-header .elementor-nav-menu--main li.menu-item-has-children {
    position: relative !important;
}
/* El dropdown se pega al trigger (sin gap visual) */
html body .elementor-location-header .elementor-nav-menu--main li.menu-item-has-children > .sub-menu,
html body .elementor-location-header .elementor-nav-menu--main li.menu-item-has-children > ul {
    margin-top: 0 !important;
    top: 100% !important;
}
/* Bridge invisible: pseudo-elemento que cubre el gap entre trigger y dropdown */
html body .elementor-location-header .elementor-nav-menu--main li.menu-item-has-children > .sub-menu::before,
html body .elementor-location-header .elementor-nav-menu--main li.menu-item-has-children > ul::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: -16px !important;
    height: 18px !important;
    background: transparent !important;
    pointer-events: auto !important;
    z-index: 0 !important;
}
/* Hit area extendida en el trigger: padding-bottom invisible */
html body .elementor-location-header .elementor-nav-menu--main li.menu-item-has-children > a.elementor-item::after {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: -14px !important;
    height: 16px !important;
    background: transparent !important;
    pointer-events: auto !important;
}
html body .elementor-location-header .elementor-nav-menu--main li.menu-item-has-children:hover > .sub-menu,
html body .elementor-location-header .elementor-nav-menu--main li.menu-item-has-children:hover > ul,
html body .elementor-location-header .elementor-nav-menu--main li.menu-item-has-children:focus-within > .sub-menu,
html body .elementor-location-header .elementor-nav-menu--main li.menu-item-has-children:focus-within > ul {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}