/* Estilos generales para el carrusel vertical de Elementor Loop Carousel */

/* Escritorio */
.elementor-loop-carousel-vertical .swiper,
.elementor-loop-carousel-vertical .swiper-container {
    flex-direction: column;
}
.elementor-loop-carousel-vertical .swiper-wrapper {
    flex-direction: column !important;
}

/* Tablet */
@media (max-width: 1024px) {
    .elementor-loop-carousel-tablet-vertical .swiper,
    .elementor-loop-carousel-tablet-vertical .swiper-container {
        flex-direction: column;
    }
    .elementor-loop-carousel-tablet-vertical .swiper-wrapper {
        flex-direction: column !important;
    }
}

/* Móvil */
@media (max-width: 767px) {
    .elementor-loop-carousel-mobile-vertical .swiper,
    .elementor-loop-carousel-mobile-vertical .swiper-container {
        flex-direction: column;
    }
    .elementor-loop-carousel-mobile-vertical .swiper-wrapper {
        flex-direction: column !important;
    }
}

/* Asegurar que las diapositivas ocupen el 100% de ancho en modo vertical y hereden altura dinámica de Swiper */
.elementor-loop-carousel-vertical .swiper-slide,
.elementor-loop-carousel-tablet-vertical .swiper-slide,
.elementor-loop-carousel-mobile-vertical .swiper-slide {
    width: 100% !important;
    height: auto;
}

/* Posicionamiento de puntos (dots) en modo vertical */

/* Derecha Centro (Desktop) */
.elementor-loop-carousel-dots-right .swiper-pagination {
    right: 15px !important;
    left: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    height: auto !important;
    gap: 8px;
}

/* Izquierda Centro (Desktop) */
.elementor-loop-carousel-dots-left .swiper-pagination {
    left: 15px !important;
    right: auto !important;
    top: 50% !important;
    bottom: auto !important;
    transform: translateY(-50%) !important;
    display: flex !important;
    flex-direction: column !important;
    width: auto !important;
    height: auto !important;
    gap: 8px;
}

/* Tablet */
@media (max-width: 1024px) {
    .elementor-loop-carousel-dots-tablet-right .swiper-pagination {
        right: 15px !important;
        left: auto !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        flex-direction: column !important;
        width: auto !important;
        height: auto !important;
        gap: 8px;
    }
    .elementor-loop-carousel-dots-tablet-left .swiper-pagination {
        left: 15px !important;
        right: auto !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        flex-direction: column !important;
        width: auto !important;
        height: auto !important;
        gap: 8px;
    }
}

/* Móvil */
@media (max-width: 767px) {
    .elementor-loop-carousel-dots-mobile-right .swiper-pagination {
        right: 15px !important;
        left: auto !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        flex-direction: column !important;
        width: auto !important;
        height: auto !important;
        gap: 8px;
    }
    .elementor-loop-carousel-dots-mobile-left .swiper-pagination {
        left: 15px !important;
        right: auto !important;
        top: 50% !important;
        bottom: auto !important;
        transform: translateY(-50%) !important;
        display: flex !important;
        flex-direction: column !important;
        width: auto !important;
        height: auto !important;
        gap: 8px;
    }
}