.elementor-18358 .elementor-element.elementor-element-822549c{--display:flex;--width:103.076%;--min-height:228px;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:0rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:0rem;--padding-top:0rem;--padding-bottom:0rem;--padding-left:0rem;--padding-right:0rem;}.elementor-18358 .elementor-element.elementor-element-822549c.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-18358 .elementor-element.elementor-element-9ce7c4a{--display:flex;--min-height:228px;--align-items:center;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--margin-top:0rem;--margin-bottom:0rem;--margin-left:0rem;--margin-right:0rem;--padding-top:0rem;--padding-bottom:0rem;--padding-left:0rem;--padding-right:0rem;}@media(min-width:768px){.elementor-18358 .elementor-element.elementor-element-9ce7c4a{--content-width:99%;}}/* Start custom CSS for html, class: .elementor-element-c0be558 */.custom-slider {
    position: relative;
    max-width: 100%;
    margin-bottom: 20px;
}

.slider-wrapper {
    overflow: hidden; /* El overflow va en el wrapper */
}

.custom-slider .slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.custom-slider .slide {
    min-width: 100%;
    position: relative;
    /* Eliminamos outline:none para usar la regla global que ya creamos */
}

.custom-slider .slide img {
    width: 100%;
    display: block;
}

/* --- ¡BLOQUE DE CÓDIGO FALTANTE AÑADIDO! --- */
/* Este es el CSS que hace visibles los controles */

.slider-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    z-index: 10; /* Asegura que estén por encima de las imágenes */
    pointer-events: none; /* Permite hacer clic 'a través' de este contenedor */
}

.slider-control, .play-pause {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s;
    pointer-events: auto; /* Restaura los eventos de clic para los botones */
}

.slider-control:hover, .play-pause:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Posicionamiento específico del botón play/pause */
.play-pause {
    position: absolute;
    bottom: 0px; /* Abajo a la derecha */
    right: 15px;
    top: 200px;
    left: auto;
    transform: none;
}
/* Fin del bloque añadido */


.visually-hidden {
    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: 0 !important;
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-c6014b6 */.custom-slider {
    position: relative;
    max-width: 100%;
    margin-bottom: 20px;
}

.slider-wrapper {
    overflow: hidden; /* El overflow va en el wrapper */
}

.custom-slider .slider {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.custom-slider .slide {
    min-width: 100%;
    position: relative;
    /* Eliminamos outline:none para usar la regla global que ya creamos */
}

.custom-slider .slide img {
    width: 100%;
    display: block;
}

/* --- ¡BLOQUE DE CÓDIGO FALTANTE AÑADIDO! --- */
/* Este es el CSS que hace visibles los controles */

.slider-controls {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    z-index: 10; /* Asegura que estén por encima de las imágenes */
    pointer-events: none; /* Permite hacer clic 'a través' de este contenedor */
}

.slider-control, .play-pause {
    background: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 44px;
    height: 44px;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s;
    pointer-events: auto; /* Restaura los eventos de clic para los botones */
}

.slider-control:hover, .play-pause:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Posicionamiento específico del botón play/pause */
.play-pause {
    position: absolute;
    bottom: 0px; /* Abajo a la derecha */
    right: 15px;
    top: 200px;
    left: auto;
    transform: none;
}
/* Fin del bloque añadido */


.visually-hidden {
    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: 0 !important;
}/* End custom CSS */