/*Estilos para las imagenes del carrusel*/
#imageCarousel .carousel-item img {
    /*
    max-width: auto;
    height: 600px;
    object-fit: cover;
    */

    width: 100%; /*Ocupa todo el ancho*/
    height: auto; /*Mantiene la proporción original de la imagen*/
    max-height: 600px; /*Controla la altura máxima para evitar recortes bruscos*/
    margin-top: 20px;/* Margen superior */
    margin-bottom: 20px;/*Margen en la parte inferior del carrusel*/

}

/*Estilos para el carrusel*/
#imageCarousel .carousel-item {
    text-align: center; /*Centramos el contenido dentro del carrusel*/
    padding-left: 5%; /*Añadimos un espacio a la izquierda*/
    padding-right: 5%; /*Añadimos un espacio a la derecha*/
}

/*Inician estilos para las flechas del carrusel*/
.carousel-control-prev-icon,
.carousel-control-next-icon {
    background-color: rgba(0, 0, 0, 0.5); /*Fondo oscuro semitransparente*/
    border-radius: 50%; /*Hacerlas redondeadas*/
    padding: 10px; /*Espacio interior para agrandar el área de clic*/
}

.carousel-control-prev-icon::after,
.carousel-control-next-icon::after {
    content: ''; /*Eliminar el contenido predeterminado */
}

.carousel-control-prev-icon::before,
.carousel-control-next-icon::before {
    content: ''; /*Eliminar el contenido predeterminado */
}

.carousel-control-prev,
.carousel-control-next {
    filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, 0.8)); /*Sombra para darle profundidad */
}
/*Terminan estilos para las flechas del carrusel*/