#header{
    background-color: #031633;
}
#title{
    color:white;
}
#paginasMenu a{
    text-decoration:none;
    color:white;
}
.hero {
    background-image: url("../imagenes/fondoBiblioteca.jpg");
    background-size: cover;        /* ocupa todo el ancho */
    background-position: center;   /* centra la imagen */
    background-repeat: no-repeat;
    height: 40vh;                  /* altura visible */
    display: flex;
    align-items: center;
    justify-content: center;
}
.hero-content {
    background-color: rgba(0, 0, 0, 0.7); /* fondo oscuro para leer bien */
    color: white;
    padding: 40px 40px;
    border-radius: 10px;
    text-align: center;
}

#imagen{
    width: 100%;
}
.container {
   padding-top: 2em;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}
#separador{
    margin-top: 2em;
    background-color: #031633;
    height: 25vh;   
    align-content: center;       
     color: #ffc107; 
    font-size: 2rem;      
}

#imagen2{
    border-radius: 10em;
    text-align: center;
}
#imagenProfesor{
    height: 50vh;
    border-radius: 20em;
}
/* En tu archivo estilo.css */
.card-img-top {
    width: 100%;
    height: 200px; /* O la altura que quieras */
    object-fit: cover; /* Mantiene la proporción y recorta lo que sobresalga */
}
.hero img, .campoFutbol img {
    width: 100%;
    height: auto;
}
.container img {
    max-width: 100%;
    height: auto;
}