/* ========================================
   VARIABLES GLOBALES - AJUSTA AQUÍ
   ======================================== */

:root {
    --menu-mobile-top: 15px;              /* Padding superior NO sticky */
    --menu-mobile-top-sticky: 30px;       /* Padding superior STICKY */
    --menu-mobile-height: 27vh;          /* Altura del menú NO sticky */
    --menu-mobile-height-sticky: 30vh;   /* Altura del menú STICKY */
}

/* ========================================
   EFECTO PARALLAX - Logo sobre borde de imagen
   SOLO PARA HOME
   ======================================== */

html, body {
    overflow-x: hidden;
}

.wp-block-details{
    display: none;
}

/* ========================================
   HEADER HOME - Ocultar logo original
   ======================================== */

.site-header {
    display: block !important;
    background: #ffffff;
    position: relative;
    z-index: 10;
    padding-top: 130px;
}

/* Ocultar el logo original del header */
.header-image.is-logo-image {
    visibility: hidden;
    height: 0;
    overflow: hidden;
}

/* Mostrar el logo dentro del parallax */
.xe-logo-parallax .header-image.is-logo-image,
.xe-logo-parallax img {
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    display: inline-block !important;
}

/* ========================================
   WRAPPER PARALLAX - Contiene logo + imagen
   ======================================== */

.xe-parallax-wrapper {
    position: relative;
    clip: rect(auto, auto, auto, auto);
    -webkit-clip-path: inset(0);
    clip-path: inset(0);
    z-index: 4545;
}

/* Logo fijo con efecto parallax */
.xe-logo-parallax {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    text-align: center;
    padding-top: 125px;
    padding-bottom: 15px;
}

.xe-logo-parallax img {
    display: inline-block;
    max-width: 530px;
    height: auto;
    z-index: 454545;
}


/* ========================================
   SLIDER/BANNER HOME
   ======================================== */

.xe-slider-cards {
    position: relative;
    background-color: #ffffff;
}

.xe-slider-cards .xe-desktop {
    display: block;
    width: 100%;
    cursor: pointer;
}

.xe-slider-cards .xe-desktop:hover {
    opacity: 0.95;
    transition: opacity 0.3s ease;
}

/* ========================================
   MENÚ HOME - Comportamiento especial
   (empieza oculto, aparece al hacer scroll)
   ======================================== */

.main-navigation {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, box-shadow 0.3s ease;
}

.main-navigation.xe-menu-positioned {
    opacity: 1;
    visibility: visible;
}

/* ========================================
   MENÚ FIJO HOME (cuando aparece después del scroll)
   ======================================== 
*/
.main-navigation.xe-menu-positioned .inside-navigation {
    /* [MODIFICADO] 60px para alinear con Visitas */
    padding: 12px 60px 0 60px !important; 
} 

/* ========================================
   MENÚ STICKY HOME
   ======================================== */

body.xe-menu-sticky .main-navigation {
    margin: 0 !important;
    padding-bottom: 0px;
    margin-top: 0px;
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100% !important;
}

body.xe-menu-sticky .main-navigation .inside-navigation {
    align-items: flex-end !important;
    /* [MODIFICADO] 60px para alinear con Visitas */
    padding: 12px 60px 0 60px !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
}

/* ========================================
   PLACEHOLDER (mantiene espacio cuando sticky)
   ======================================== */

.xe-menu-placeholder {
    display: none;
    height: 0;
}

body.xe-menu-sticky .xe-menu-placeholder {
    display: block;
}

.xe-parallax-wrapper {
    opacity: 0;
    transition: opacity 0.4s ease;
}

.xe-parallax-wrapper.xe-ready {
    opacity: 1;
}


/* ========================================
   CSS MÓVIL OPTIMIZADO: PARALLAX & STICKY
   ======================================== */

@media (max-width: 768px) {

    /* ========================================
       CONTENEDOR PRINCIPAL DEL MENÚ - STICKY TOP
       ======================================== */
    
    /* 1. CONTENEDOR PRINCIPAL DEL MENÚ */
    .main-navigation {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: 0 !important;
        width: 100% !important;
        background: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
        height: 35px !important;
        z-index: 100;
        opacity: 1 !important;
        visibility: visible !important;
        border-top: none !important;
        box-shadow: none !important;
    }

    /* ========================================
       LIMPIEZA DE ELEMENTOS
       ======================================== */
    
    .site-header { 
        display: none !important; 
    }
    
    button.menu-toggle { 
        display: none !important; 
    }
    
    .main-navigation .menu-toggle { 
        display: none !important; 
    }

    /* ========================================
       LAYOUT FLEXBOX (LA BARRA DE MENÚ)
       ======================================== */
    
    /* 3. LAYOUT FLEXBOX (LA BARRA DE MENÚ) */
    .main-navigation .inside-navigation {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 100% !important;
        /* [MODIFICADO] 20px para alinear con Visitas Móvil */
        padding: 0 20px !important;
        position: relative !important;
    }

    .main-navigation.xe-menu-positioned .inside-navigation {
        /* [MODIFICADO] 20px consistente */
        padding: 10px 20px 0 20px !important;
    } 

    body.xe-menu-sticky .main-navigation .inside-navigation {
        align-items: flex-end !important;
        /* [MODIFICADO] 20px consistente */
        padding: 10px 20px 0 20px !important;
        margin: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* ESTADO STICKY */
    body.xe-menu-sticky .main-navigation,
    .main-navigation.xe-menu-sticky {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
    }

    @keyframes slideDownMobile {
        from { transform: translateY(-100%); }
        to { transform: translateY(0); }
    }

    /* ========================================
       MENÚ HAMBURGUESA - ESTILOS BASE
       ======================================== */

    /* --- IZQUIERDA: HAMBURGUESA --- */
    .mega-menu-toggle {
        display: flex !important;
        align-items: center !important;
        order: 1;
        background: transparent !important;
        position: static !important;
        width: auto !important;
        height: auto !important;
    }

    .mega-toggle-block { 
        color: #000 !important; 
        fill: #000 !important; 
    }

    /* CONTENEDOR DEL ICONO - ESTADO CERRADO */
    .mega-toggle-animated-box { 
        width: 24px !important;
        margin-bottom: 10px !important;
    }

    /* LÍNEAS DEL MENÚ HAMBURGUESA - ESTADO CERRADO */
    #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner,
    #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner::before,
    #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-1 .mega-toggle-animated-inner::after {
        height: 2px !important; 
        width: 24px !important;
        background: #000 !important; 
        border-radius: 1px !important; 
    }

    /* ========================================
       MENÚ HAMBURGUESA - ESTADO ABIERTO
       ======================================== */

    /* OCULTAR BOTONES DE CIERRE */
    #mega-menu-wrap-primary .mega-close {
        display: none !important;
    }

    #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0,
    #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-0 *,
    .mega-menu-toggle .mega-toggle-block-0 {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        width: 0 !important;
        height: 0 !important;
        overflow: hidden !important;
        pointer-events: none !important;
    }

    #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open:after {
        background: transparent !important;
    }

    /* CONTENEDOR DEL ICONO - ESTADO ABIERTO (MISMOS VALORES QUE CERRADO) */
    #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-animated-box {
        transform: none !important;
        width: 24px !important;
        height: auto !important;
        position: relative !important;
        top: 0 !important;
        margin-bottom: 10px !important;
    }

    #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-animated-slider {
        transform: none !important;
    }

    /* LÍNEAS - ESTADO ABIERTO (ROSA, SIN TRANSFORMACIÓN A X) */
    #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-animated-slider .mega-toggle-animated-inner,
    #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-animated-slider .mega-toggle-animated-inner::before,
    #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-animated-slider .mega-toggle-animated-inner::after {
        width: 24px !important;
        height: 2px !important;
        background-color: #F57E98 !important;
        transform: none !important;
        border-radius: 1px !important;
    }

    #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-animated-slider .mega-toggle-animated-inner::before {
        top: -8px !important;
        opacity: 1 !important;
    }

    #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-animated-slider .mega-toggle-animated-inner::after {
        top: 8px !important;
        opacity: 1 !important;
    }

    /* ========================================
       MENÚ DESPLEGABLE (MEGA MENU) - BASE
       ======================================== */

    #mega-menu-wrap-primary {
        position: absolute !important;
    }

    /* ========================================
       MEGA MENU - ESTADO NO STICKY
       ======================================== */
    #mega-menu-wrap-primary #mega-menu-primary,
    #mega-menu-wrap-primary #mega-menu-primary[style] {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: var(--menu-mobile-height) !important;
        max-height: var(--menu-mobile-height) !important;
        min-height: var(--menu-mobile-height) !important;
        background: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        padding-top: var(--menu-mobile-top) !important;
        padding-left: 0 !important;
        padding-bottom: 50px !important;
        overflow-y: auto !important;
        z-index: 9999 !important;
    }

    /* ========================================
       MEGA MENU - ESTADO STICKY
       Cuando el menú está fijo arriba, el contenido
       debe empezar debajo de la barra (35px + espacio)
       ======================================== */
    body.xe-menu-sticky #mega-menu-wrap-primary #mega-menu-primary,
    body.xe-menu-sticky #mega-menu-wrap-primary #mega-menu-primary[style] {
        top: 0 !important;
        padding-top: var(--menu-mobile-top-sticky) !important;
        height: var(--menu-mobile-height-sticky) !important;
        max-height: var(--menu-mobile-height-sticky) !important;
        min-height: var(--menu-mobile-height-sticky) !important;
    }

    /* OCULTAR PRIMER ITEM DEL MENÚ EN MÓVIL */
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:first-child {
        display: none !important;
    }

    /* ITEMS DEL MENÚ */
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        padding: 5px 20px !important;
    }

    /* BOLETOS EN MENÚ MÓVIL */
    #mega-menu-primary .menu-fila-inferior-mobile {
        display: block !important;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    #mega-menu-primary .menu-fila-inferior-mobile .btn-boletos {
        display: block !important;
        background: transparent !important;
        color: #F57E98 !important;
        padding: 0 20px !important;
        font-size: inherit !important;
        text-decoration: none;
        font-weight: inherit;
        line-height: inherit;
    }

    #mega-menu-primary > li.menu-fila-inferior-mobile {
        padding: 0 !important;
        margin: 0 !important;
    }

    #mega-menu-primary > li.menu-fila-inferior-mobile > .btn-boletos {
        display: block !important;
        padding: 15px 20px !important;
        font-family: inherit;
        font-size: 24px !important;
        font-weight: 400 !important;
        color: #F57E98 !important;
        background: transparent !important;
        text-align: left;
        border: none;
    }

    /* ========================================
       LOGO CENTRAL EN BARRA
       ======================================== */

    .navigation-branding, 
    .logo-menu-img {
        order: 2;
        position: absolute !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0;
        right: 0;
        margin: 0 auto !important;
        text-align: center;
        width: fit-content !important;
        pointer-events: none;
        display: flex !important;
        justify-content: center !important;
        align-items: flex-end !important;
        line-height: 0 !important;
    }

    .navigation-branding img, 
    .logo-menu-img {
        height: 22px !important;
        width: auto !important;
        pointer-events: auto;
        display: block !important;
        opacity: 1 !important;
        margin-bottom: 0 !important;
    }

    /* ========================================
       ELEMENTOS DERECHA (HORARIO, IDIOMA)
       ======================================== */

    .menu-elementos-derecha {
        order: 3;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        gap: 10px;
        z-index: 2;
    }

    .horario-estado { 
        margin-right: 2px;
        font-size: 7px !important;
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        height: auto !important;
    } 

    .menu-fila-inferior { 
        display: none !important; 
    }

    .btn-boletos {
        padding: 6px 12px !important;
        font-size: 11px !important;
        display: none !important;
    }

    .idioma-link { 
        font-size: 8px !important; 
        display: inline-flex !important;
        align-items: center !important;
        line-height: 1 !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        height: auto !important;
    }

    /* ========================================
       LOGO PARALLAX
       ======================================== */

    .xe-logo-parallax {
        position: absolute;
        top: 30%;
        left: 0;
        right: 0;
        text-align: center;
        z-index: 10;
        padding: 0 30px;
    }

    .xe-logo-parallax img {
        width: 80% !important;
        max-width: 300px !important;
        height: auto !important;
    }

    /* ========================================
       PLACEHOLDER
       ======================================== */

    .xe-menu-placeholder {
        display: none;
        width: 100%;
        height: 60px;
        background: transparent;
    }

    body.xe-menu-sticky .xe-menu-placeholder {
        display: block !important;
    }

    .nav-above-header .main-navigation .inside-navigation.grid-container {
        padding-right: 7px !important;
        padding-left: 7px !important;
    }

}

.xe-home-infoabout {
    display: none;
}

@media (min-width: 1400px) {
    .menu-elementos-derecha {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
        align-self: flex-end;
        padding-bottom: 0px;
        margin-bottom: 13px;
        margin-left: 20px;
        order: 3;
        flex: 0 0 auto;
        gap: 5px;
    }
}

@media (min-width: 1200px) {
    .menu-elementos-derecha {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
        align-self: flex-end;
        padding-bottom: 0px;
        margin-bottom: 13px;
        margin-left: 20px;
        order: 3;
        flex: 0 0 auto;
        gap: 5px;
    }
}

@media (min-width: 1024px) {
    .menu-elementos-derecha {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: flex-end;
        align-self: flex-end;
        padding-bottom: 0px;
        margin-bottom: 13px;
        margin-left: 20px;
        order: 3;
        flex: 0 0 auto;
        gap: 5px;
    }
}

/* ========================================
   AJUSTE PARALLAX PARA RESOLUCIÓN 1024px (Laptop/Tablet Horizontal)
   ======================================== */

@media (min-width: 769px) and (max-width: 1150px) {
    
    .xe-logo-parallax {
        /* Aumentamos el padding-top para bajar el logo hasta la línea de corte. */
        padding-top: 180px !important; 
        
        /* Ajustamos el padding inferior para asegurar el flujo */
        padding-bottom: 0px !important;
    }

    /* Opcional: Si necesitas que el logo sea más grande como en la foto de ejemplo */
    .xe-logo-parallax img {
        max-width: 80% !important; /* Aumenta el ancho permitido */
        width: 600px !important;   /* O define un ancho fijo mayor */
    }
}

/* ========================================
   CORRECCIÓN FINAL: PANTALLAS GRANDES (Evitar efecto "Enorme")
   ======================================== */

@media (min-width: 1400px) {

    /* 1. CONTENEDOR GENERAL: EL FRENO DE MANO */
    .ex-home-actcards-container, 
    .ex-home-exhibitionscards {
        max-width: 1400px !important; /* Tope de anchura */
        margin-left: auto !important; /* Centrado */
        margin-right: auto !important; /* Centrado */
        width: 100% !important;
    }

    /* 2. IMAGEN DE ARRIBA (Recorrido): MÁS PANORÁMICA */
    .ex-home-actcards-container .ex-home-actcards-cardimg {
        height: auto !important;
        width: 100% !important;
        aspect-ratio: 21 / 7 !important; /* Muy ancha, poca altura */
        max-height: 500px !important;    /* Nunca será más alta que esto */
    }

    /* 3. IMÁGENES DE ABAJO: TAMAÑO CONTROLADO */
    .ex-home-exhibitionscards .ex-home-exhibition-link {
        height: auto !important;
        width: 100% !important;
        aspect-ratio: 3 / 2 !important; /* Rectángulo clásico, equilibrio perfecto */
        max-height: 400px !important;   /* Límite de altura para que no se vean enormes */
    }

    /* 4. AJUSTE INTERNO DE LA FOTO */
    .ex-home-actcards-container .ex-home-actcards-cardimg div,
    .ex-home-exhibitionscards .ex-home-exhibition-link .ex-home-exhibitions-card {
        background-size: cover !important;
        background-position: center center !important; 
    }
}

/* ========================================
   [NUEVO] AJUSTE PARA PANTALLAS GIGANTES (+1600px)
   Para alinear el menú con el bloque Visitas
   ======================================== */
@media (min-width: 1600px) {
    .main-navigation.xe-menu-positioned .inside-navigation,
    body.xe-menu-sticky .main-navigation .inside-navigation {
        padding-left: 100px !important;
        padding-right: 100px !important;
    }
}