.elementor-824 .elementor-element.elementor-element-e06f4ac{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-widget-media-carousel .elementor-carousel-image-overlay{font-family:var( --e-global-typography-accent-font-family ), Sans-serif;font-weight:var( --e-global-typography-accent-font-weight );}.elementor-824 .elementor-element.elementor-element-a71d032 .elementor-main-swiper{height:400px;width:720px;}.elementor-824 .elementor-element.elementor-element-a71d032.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}.elementor-824 .elementor-element.elementor-element-a71d032 .elementor-swiper-button{font-size:90px;color:var( --e-global-color-text );}.elementor-824 .elementor-element.elementor-element-a71d032 .elementor-swiper-button svg{fill:var( --e-global-color-text );}@media(max-width:1024px){.elementor-824 .elementor-element.elementor-element-a71d032.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}}@media(max-width:767px){.elementor-824 .elementor-element.elementor-element-a71d032.elementor-skin-slideshow .elementor-main-swiper:not(.elementor-thumbnails-swiper){margin-bottom:10px;}}/* Start custom CSS for media-carousel, class: .elementor-element-a71d032 *//* Usamos '.elementor-824 .elementor-element.elementor-element-a71d032' para apuntar al widget actual de Media Carousel */
.elementor-824 .elementor-element.elementor-element-a71d032 .elementor-widget-container {
    overflow: visible !important;
}

/* --- 2. POSICIONAMIENTO DE LAS FLECHAS --- */
/* Targetamos las clases comunes de las flechas del Media Carousel de Elementor. */

/* Targetamos ambas flechas para establecer su estado base */
.elementor-824 .elementor-element.elementor-element-a71d032 .elementor-swiper-button {
    position: absolute;
    /* Centramos verticalmente */
    top: 50%;
    transform: translateY(-50%);
    /* Opcional: añade sombra o fondo para mejor visibilidad en bordes claros */
    /* background: rgba(255, 255, 255, 0.8); */
    /* border-radius: 50%; */
    /* padding: 10px; */
    /* box-shadow: 0px 2px 10px rgba(0,0,0,0.1); */
    /* Asegurar que las flechas estén por encima de todo */
    z-index: 10;
}

/* --- 3. AJUSTE DE LA FLECHA IZQUIERDA (PREVIA) --- */
/* Usamos un valor negativo para 'left' para empujarla hacia la izquierda, fuera de la imagen. */
.elementor-824 .elementor-element.elementor-element-a71d032 .elementor-swiper-button-prev {
    /* Ajusta este valor (p. ej., -30px, -40px, -50px) para controlar cuánto sobresale */
    left: -40px;
    /* Asegurar que no haya padding que empuje la flecha */
    margin-left: 0;
}

/* --- 4. AJUSTE DE LA FLECHA DERECHA (SIGUIENTE) --- */
/* Usamos un valor negativo para 'right' para empujarla hacia la derecha, fuera de la imagen. */
.elementor-824 .elementor-element.elementor-element-a71d032 .elementor-swiper-button-next {
    /* Ajusta este valor (p. ej., -30px, -40px, -50px) para controlar cuánto sobresale */
    right: -40px;
    /* Asegurar que no haya padding que empuje la flecha */
    margin-right: 0;
}/* End custom CSS */