/* === ESTILOS PARA LOS CARRUSELES DE IMAGENES === */

.carrousel {
    width: 100%;
    max-width: 900px;
    margin: 2rem auto;
    border-radius: 12px;
    overflow: hidden;
    background-color: #1a1a1a;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.carousel-inner {
    background-color: #1a1a1a;
}

.carousel-item {
    height: clamp(280px, 62vh, 620px);
    background-color: #1a1a1a;
}

.carousel-inner img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    background-color: #1a1a1a;
}

.carousel-control-prev,
.carousel-control-next {
    width: 10%;
    opacity: 0.7;
    transition: opacity 0.3s ease;
}

.carousel-control-prev:hover,
.carousel-control-next:hover {
    opacity: 1;
}

@media (max-width: 768px) {
    .carousel-item {
        height: clamp(220px, 55vh, 420px);
    }

    .carrousel {
        margin: 1rem auto;
        border-radius: 8px;
    }
}