/* Contenedor principal del carrusel */
.container-monederos {
    width: 100%;
    height: auto;
    max-width: 1200px;
    margin: 30px auto;
    border-radius: 8px;
    position: relative;
}

/* Contenedor del Swiper */
.swiper-container {
    width: 100%;
    max-width: 100%; /* Ajuste flexible al 72% del ancho disponible */
    height: 65vh; /* Altura ajustada al viewport */
    margin: 0 auto; /* Centrado del carrusel */
    overflow: hidden; /* Oculta cualquier desbordamiento de las imágenes */
    position: relative;
}

/* Contenedor de diapositivas del Swiper */
.swiper-wrapper {
    display: flex; /* Alineación horizontal de las diapositivas */
}

/* Estilo de cada diapositiva */
.swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.5s ease, filter 0.5s ease, opacity 0.5s ease;
    flex: 0 0 auto; /* Evita que las diapositivas cambien de tamaño inesperadamente */
    width: 100%; /* Asegura que la diapositiva ocupe el 100% del contenedor */
    height: 100%; /* La diapositiva ocupa toda la altura del contenedor */
    position: relative;
    border-radius: 10px; /* Bordes redondeados */
}

/* Imágenes dentro de las diapositivas */
.swiper-slide img {
    width: 100%; /* La imagen ocupa el 100% del ancho de la diapositiva */
    height: 100%;
    object-fit: cover; /* Ajuste de la imagen para evitar que se distorsione o desborde */
    transition: filter 0.5s ease, opacity 0.5s ease;
    border-radius: 10px;
}

/* Difuminar diapositivas no activas */
.swiper-slide:not(.swiper-slide-active) img {
    filter: blur(4px) brightness(60%);
    opacity: 0.6;
}

/* Diapositiva activa */
.swiper-slide-active img {
    filter: none;
    opacity: 1;
}

/* Botones de navegación */
.swiper-button-next,
.swiper-button-prev {
    color: #ffff;
    width: 40px;
    height: 40px;
}