/* ========================================================== */
/* 1. CORE: FÍSICAS Y BLOQUEO DE SCROLL                       */
/* ========================================================== */
.elementor-lightbox, .dialog-lightbox-widget, .swiper-wrapper {
    touch-action: pan-x !important; 
}
.dialog-widget-content:has(.swiper-slide-zoomed) .dialog-lightbox-close-button,
body.is-pinching-lightbox .dialog-lightbox-close-button,
body.is-zoomed-lightbox .dialog-lightbox-close-button,
.dialog-lightbox-close-button.is-hidden-by-drag {
    opacity: 0 !important;
    pointer-events: none !important;
    visibility: hidden !important;
}
/* ========================================================== */
/* 2. DISEÑO GLOBAL Y OPTIMIZACIÓN VISUAL                     */
/* ========================================================== */
.elementor-lightbox .dialog-widget-content,
.elementor-lightbox .swiper-slide,
.elementor-lightbox .swiper-wrapper,
.elementor-lightbox .swiper-zoom-container,
.elementor-lightbox .elementor-lightbox-image {
    box-shadow: none !important;
    border: none !important;
}
.elementor-lightbox .swiper-slide img.elementor-lightbox-image {
    width: calc(100vw - 20px) !important; 
    height: calc(100vh - 20px) !important; 
    max-width: none !important;
    max-height: none !important;
    object-fit: contain !important; 
    padding: 0 !important; 
}
/* Suavizado exclusivo para deslizamiento (Evita romper loop infinito) */
.elementor-lightbox div.swiper-wrapper[style*="transition-duration: 300ms"],
.elementor-lightbox div.swiper-wrapper[style*="transition-duration: 0.3s"] {
    transition-duration: 400ms !important;
    transition-timing-function: ease !important;
}
/* ========================================================== */
/* 3. COMPONENTES UI: BOTÓN DE CERRAR (X)                     */
/* ========================================================== */
.elementor-lightbox .dialog-lightbox-close-button {
    transition: none !important; margin-top: 0 !important;
    margin-right: 17px !important; padding: 6px !important; opacity: 1 !important; 
}
.elementor-lightbox .dialog-lightbox-close-button svg { display: none !important; }
.elementor-lightbox .dialog-lightbox-close-button::after {
    content: ''; display: block; width: 40px; height: 40px;
    background: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") no-repeat center / contain;
    opacity: 0.2; transition: opacity 0.3s ease; 
}
.elementor-lightbox .dialog-lightbox-close-button:hover::after { opacity: 1; }
/* ========================================================== */
/* 4. COMPONENTES UI: FLECHAS DE NAVEGACIÓN (DESKTOP)         */
/* ========================================================== */
.elementor-lightbox .elementor-swiper-button { opacity: 1 !important; visibility: visible !important; }
.elementor-lightbox .elementor-swiper-button-next { justify-content: flex-end !important; padding-right: 35px !important; }
.elementor-lightbox .elementor-swiper-button-prev { justify-content: flex-start !important; padding-left: 35px !important; }
.elementor-lightbox .elementor-swiper-button svg { display: none !important; }
.elementor-lightbox .elementor-swiper-button-next::after,
.elementor-lightbox .elementor-swiper-button-prev::after {
    content: ''; display: block; width: 60px; height: 60px;
    background-size: contain; background-repeat: no-repeat; background-position: center;
    opacity: 0.2; transition: opacity 0.3s ease; 
}
.elementor-lightbox .elementor-swiper-button-next::after { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E"); }
.elementor-lightbox .elementor-swiper-button-prev::after { background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E"); }
.elementor-lightbox .elementor-swiper-button-next:hover::after,
.elementor-lightbox .elementor-swiper-button-prev:hover::after { opacity: 1; }
/* ========================================================== */
/* 5. DISEÑO RESPONSIVE (MÓVIL < 767px)                       */
/* ========================================================== */
@media (max-width: 767px) {
    /* Fondo blanco puro en el contenedor principal (ultra-estable) */
    .elementor-lightbox { background-color: #FFFFFF !important; }
    .elementor-lightbox .dialog-widget-content,
    .elementor-lightbox .dialog-background { background-color: transparent !important; }
    
    /* Limpieza UI táctil */
    .elementor-lightbox .elementor-swiper-button-next,
    .elementor-lightbox .elementor-swiper-button-prev { display: none !important; }
    
    /* Botón X modo móvil (esquina, oscuro) */
    .elementor-lightbox .dialog-lightbox-close-button { margin-right: 0 !important; right: -4px !important; }
    .elementor-lightbox .dialog-lightbox-close-button::after {
        background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
        opacity: 1 !important; 
    }
}