/* ======================================================
   CARRUSEL OFERTAS RESPONSIVE
===================================================== */

/* Estilo general de las imágenes del carrusel */
.carousel-item img{
    width: 100%;          /* que ocupe todo el ancho del contenedor */
    height: auto;         /* se adapta automáticamente al ancho */
    max-height: 400px;    /* altura máxima para desktop */
    object-fit: cover;    /* recorta solo si es necesario para llenar el contenedor */
    border-radius: 8px;   /* bordes redondeados */
    display: block;
    margin: 0 auto;
}

/* Botones de navegación del carrusel */
.carousel-control-prev,
.carousel-control-next {
    width: 5%;             /* tamaño reducido para que no tapen mucho */
}

/* Iconos de navegación */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-size: 100%, 100%; 
}

/* Ajuste para pantallas pequeñas (móviles) */
@media (max-width: 768px){
    .carousel-item img{
        max-height: 250px;   /* más bajo para móviles */
        object-fit: cover;   /* mantiene proporción y recorta si hace falta */
    }

    .carousel-control-prev,
    .carousel-control-next {
        width: 10%;           /* botones un poco más grandes en móvil */
    }
}

/* Títulos dentro del carrusel (si agregas captions) */
.carousel-caption h5,
.carousel-caption p {
    font-size: 14px;
    background: rgba(0,0,0,0.4);
    padding: 5px 10px;
    border-radius: 5px;
}