/**
 * Carouselizer for Elementor
 * Author: Vorágine Digital
 */

/* ========================================
   Accesibilidad — Screen Reader Only
   ======================================== */

.sr-only,
.screen-reader-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static !important;
    width: auto !important;
    height: auto !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
}

/* ========================================
   Contenedor principal
   ======================================== */

.swiper-slide {
    box-shadow: none !important;
}

.carouselizer-carousel.carouselizer-initialized {
    display: block !important;  /* anula display:grid/flex de Elementor para que swiper y paginación fluyan en bloque */
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.carouselizer-carousel.carouselizer-initialized .carouselizer-swiper {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;  /* recorta slides sin crear scroll container */
    overflow-y: visible !important; /* permite que la paginación sea visible */
    padding: 0 !important;
    margin: 0 !important;
}

.carouselizer-carousel.carouselizer-initialized .swiper-wrapper {
    display: flex !important;
    transition-property: transform !important;
    transition-timing-function: ease !important;
    position: relative !important;
    align-items: stretch !important;
}

/* ========================================
   Slides
   ======================================== */

.carouselizer-carousel.carouselizer-initialized .swiper-slide {
    flex-shrink: 0 !important;
    height: 100% !important;
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    padding: 0 10px !important;
    box-sizing: border-box !important;
}

/* Slides de grid: ancho asignado por JS según columnas del grid original */
.carouselizer-carousel.carouselizer-initialized[data-carousel-type="grid"] .swiper-slide {
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
}

/* Grid: permitir que la paginación fluya fuera del contenedor sin recortarse */
.carouselizer-carousel.carouselizer-initialized[data-carousel-type="grid"] {
    overflow: visible !important;
}

/* Grid en mobile: limitar el swiper al viewport para que no herede el ancho
   de contenido del grid de Elementor (que puede ser mucho mayor que el visual) */
@media (max-width: 1024px) {
    .carouselizer-carousel.carouselizer-initialized[data-carousel-type="grid"] .carouselizer-swiper {
        max-width: 100vw !important;
    }
}

/* Grid + peek: el swiper debe dejar visible el slide siguiente que asoma */
.carouselizer-carousel.carouselizer-initialized[data-carousel-type="grid"][data-carousel-peek="yes"] .carouselizer-swiper {
    overflow-x: visible !important;
}

/* ========================================
   Contenido de los slides
   ======================================== */

.carouselizer-carousel.carouselizer-initialized .swiper-slide > .e-con,
.carouselizer-carousel.carouselizer-initialized .swiper-slide > .elementor-column,
.carouselizer-carousel.carouselizer-initialized .swiper-slide > .elementor-element:not(.elementor-element-overlay):not(.elementor-shape):not(.elementor-background-overlay) {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    max-width: 100% !important;
    height: auto !important;
}

/* 100% de ancho sólo en carruseles sin soporte desktop */
.carouselizer-carousel.carouselizer-initialized:not([data-enable-desktop="yes"]) .swiper-slide > .e-con,
.carouselizer-carousel.carouselizer-initialized:not([data-enable-desktop="yes"]) .swiper-slide > .elementor-column {
    width: 100% !important;
}

@media (min-width: 1025px) {
    /* En desktop, respetar el ancho definido por Elementor/JS */
    .carouselizer-carousel.carouselizer-initialized[data-enable-desktop="yes"] .swiper-slide {
        width: auto;
        max-width: none !important;
        flex-shrink: 0 !important;
        margin-right: 0;
    }

    .carouselizer-carousel.carouselizer-initialized[data-enable-desktop="yes"] .swiper-slide > .e-con,
    .carouselizer-carousel.carouselizer-initialized[data-enable-desktop="yes"] .swiper-slide > .elementor-column {
        width: 100% !important;
    }
}

.carouselizer-carousel.carouselizer-initialized .swiper-slide .elementor-widget,
.carouselizer-carousel.carouselizer-initialized .swiper-slide .elementor-widget-wrap,
.carouselizer-carousel.carouselizer-initialized .swiper-slide .e-con-inner {
    visibility: visible !important;
    opacity: 1 !important;
}

.carouselizer-carousel.carouselizer-initialized .swiper-slide .elementor-widget-wrap,
.carouselizer-carousel.carouselizer-initialized .swiper-slide .elementor-widget-container {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    visibility: visible !important;
    opacity: 1 !important;
}

.carouselizer-carousel.carouselizer-initialized .swiper-slide img {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    margin: 0 auto !important;
}

/* ========================================
   Flechas (ocultas — se usan puntos)
   ======================================== */

.carouselizer-carousel .swiper-button-prev,
.carouselizer-carousel .swiper-button-next {
    display: none !important;
}

/* ========================================
   Paginación
   ======================================== */

.carouselizer-carousel .swiper-pagination {
    position: static !important;
    margin-top: 10px !important;
    width: 100% !important;
    text-align: center !important;
    z-index: 10 !important;
    display: block !important;
}

.carouselizer-carousel .swiper-pagination-bullet {
    display: inline-block !important;
    width: 12px !important;
    height: 12px !important;
    background: #CBD5E1 !important;
    opacity: 1 !important;
    margin: 0 6px !important;
    border-radius: 50% !important;
    transition: transform 0.3s ease, background 0.3s ease !important;
    cursor: pointer !important;
    transform: scale(0.7) !important;
}

.carouselizer-carousel .swiper-pagination-bullet-active {
    background: #475569 !important;
    transform: scale(1) !important;
}

/* ========================================
   Overflow para carrusel en desktop
   ======================================== */

.carouselizer-carousel[data-overflow-right="yes"],
.carouselizer-carousel[data-overflow-right="yes"] > .e-con-inner {
    overflow: visible !important;
}

.carouselizer-carousel[data-overflow-right="yes"] .carouselizer-swiper {
    overflow: visible !important;
    width: 100% !important;
}

@media (min-width: 1025px) {
    /* Ocultar el swiper si existe pero no debe mostrarse en desktop (safety net) */
    .carouselizer-carousel:not([data-enable-desktop="yes"]) .carouselizer-swiper {
        display: none !important;
    }
}

/* ========================================
   Fixes para el Editor de Elementor
   ======================================== */

.elementor-editor-active .elementor-element.carouselizer-carousel[data-overflow-right="yes"],
.elementor-editor-active .elementor-element.carouselizer-carousel[data-overflow-right="yes"] > .e-con-inner,
.elementor-editor-active .elementor-element.carouselizer-carousel[data-overflow-right="yes"] .carouselizer-swiper,
.elementor-editor-active .elementor-element.carouselizer-carousel[data-overflow-right="yes"] .swiper-wrapper {
    overflow: visible !important;
    z-index: 9999 !important;
}