.carrousel-box {
position: relative;
margin: 0 auto;
}

.wrapper {
overflow: hidden;
}

.slides {
display: flex;
transition: transform 1s ease-in-out;
width: 100%;

}   

.slide {
flex: 0 0 100%;
position: relative;
aspect-ratio: 16 / 9;

}

.slide img {
width: 100%;
height: 100%;
object-fit: cover;
}

.caption {
color: var(--text-color-light);
text-shadow: 1px 1px black;
font-size: clamp(20px, 2.5vw, 80px);
position: absolute;
bottom: 3vw;
right: 4vw;
padding-left: 10px;
}

.slider-controler {
position: absolute;
bottom: 20px;  /* Ajustamos la distancia respecto al fondo */
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
}

.slider-controler button {
width: 12px;
height: 12px;
border-radius: 50%;
border: none;
background-color: rgba(255, 255, 255, 0.5);
cursor: pointer;
transition: background-color 0.3s;
}

.slider-controler button.active {
background-color: rgba(255, 255, 255, 1);
}