/* Ajustes del contenedor del carrusel */
.carousel {
    border-radius: 5px; /* Bordes redondeados para el carrusel */
    overflow: hidden; /* Asegura que los elementos internos respeten el redondeo */
}

/* Ajustes de las imágenes */
.carousel-item img {
    height: 500px; /* Altura fija para todas las imágenes */
    object-fit: cover; /* Ajusta la imagen sin deformarla */
    border-radius: 5px;
}

/* Texto de las captions (títulos y descripciones) */
.carousel-caption h5 {
    font-size: 2rem;
    font-weight: bold;
    color: #FFFFFF; /* Texto blanco */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Sombra elegante */
}

.carousel-caption p {
    font-size: 1.2rem;
    color: #EEEEEE; /* Texto gris claro */
    text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /* Sombra para destacar el texto */
}

/* Indicadores */
.carousel-indicators button {
    background-color: #2A3F54; /* Azul acero oscuro */
    border: none;
}

.carousel-indicators .active {
    background-color: #4F83CC; /* Azul más claro para el indicador activo */
}

/* Controles de navegación (flechas) */
.carousel-control-prev-icon,
.carousel-control-next-icon {
    filter: invert(100%); /* Cambia el color de las flechas a blanco */
}
/* Ajustes del contenedor del slider */
.carousel-item {
    position: relative; /* Necesario para el overlay */
    overflow: hidden; /* Asegura que el overlay no se desborde */
}

    /* Imágenes */
    .carousel-item img {
        height: 510px; /* Altura fija */
        object-fit: cover; /* Ajusta la imagen sin deformarla */
    }

    /* Overlay oscuro */
    .carousel-item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5); /* Negro semitransparente */
        z-index: 1; /* Coloca el overlay encima de la imagen */
        border-radius: 5px;
    }

/* Texto de las captions (títulos y descripciones) */
.carousel-caption {
    position: absolute;
    z-index: 2; /* Asegura que el texto esté encima del overlay */
}

@media (max-width: 768px) {
    /* Reducir la altura de las imágenes en pantallas pequeñas */
    .carousel-item img {
        height: 300px; /* Altura más pequeña en móviles */
        border-radius: 5px;
    }

    /* Ajustar el tamaño del texto en las captions */
    .carousel-caption h5 {
        font-size: 1.5rem; /* Reduce el tamaño del título */
    }

    .carousel-caption p {
        font-size: 1rem; /* Reduce el tamaño de la descripción */
    }

    /* Espaciado adicional en móviles */
    .carousel-caption {
        padding-bottom: 20px; /* Mayor separación del borde inferior */
    }
}