/* Estilos generales */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f8f9fa;
    color: black;
}

/* Estilos para el encabezado */
.jumbotron {
    text-align: center;
}

/* Estilos para el pie de página */
.footer {
    text-align: center;
}

/* Estilos para el carrusel */
.carousel {
    max-width: 800px; /* Ajusta el ancho máximo del carrusel */
    margin: 0 auto; /* Centra el carrusel horizontalmente */
}

.carousel-item {
    position: relative;
    width: 100%;
    height: 200px; /* Establece la altura del contenedor del carrusel */
    overflow: hidden;
}

.carousel-item img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centra la imagen vertical y horizontalmente */
    width: auto;
    height: 100%; /* La altura de la imagen coincide con la altura del contenedor */
    object-fit: cover; /* Asegura que la imagen cubra el área, recortando si es necesario */
}

/* Estilos responsivos (ejemplo) */
@media (max-width: 768px) {
    .jumbotron h1 {
        font-size: 2rem;
    }

    .carousel {
        max-width: 100%; /* El carrusel ocupa todo el ancho en pantallas pequeñas */
    }
}