header{
    background-image: url('Foto_alumnos/Foto_Alumnos_Letras.jpeg');
    /*background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('Foto_alumnos/Foto_Alumnos_Letras.jpeg');*/
    background-size: cover;                        /* Para que la imagen cubra todo el encabezado */
    background-position: center;                   /* Centra la imagen */
    height: 350px;                                 /* Puedes ajustar la altura según tu preferencia */
    color: white;                                  /* Color del texto */
    text-align: center;                            /* Alineación del texto */
    padding: 50px;
    font-family:'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;    
}

header::before {
    content: "";                                  /* Requiere un contenido vacío */
    position: absolute;                           /* Posicionamos el pseudo-elemento sobre la imagen */
    top: 0;                                       /* Alineamos arriba */
    left: 0;                                      /* Alineamos a la izquierda */
    right: 0;                                     /* Alineamos a la derecha */
    bottom: 0;                                    /* Alineamos abajo */
    background-color: rgba(0, 0, 0, 0.5);        /* Capa oscura con opacidad (0.5) */
    z-index: 1; 
    height: 350px;
    padding: 55px;                                   /* Asegura que esté encima de la imagen */
}

header h1, header h2, header h3 {
    position: relative;                           /* Asegura que el texto esté por encima de la capa oscura */
    z-index: 2;                                   /* Ponemos el texto por encima */
}

h1 {
    font-size: 2.5em;                              /* Tamaño de la fuente */
}

p {
    font-size: 2em;                              /* Tamaño del párrafo */
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}




.button {
    background-color: #28a745; /* Color de fondo (verde) */
    color: white; /* Color del texto */
    padding: 15px 10%; /* Tamaño del botón */
    font-size: 18px; /* Tamaño de la fuente */
    border: none; /* Sin bordes */
    border-radius: 30px; /* Bordes redondeados */
    text-align: center; /* Centra el texto */
    display: inline-flex; /* Usamos flexbox para alinear el icono y el texto */
    align-items: center; /* Centra verticalmente el contenido */
    cursor: pointer; /* Cambia el cursor al pasar sobre el botón */
    transition: background-color 0.3s, transform 0.3s; /* Transiciones suaves */
}

.button i {
    margin-right: 10px; /* Espacio entre el icono y el texto */
}

/* Efecto hover */
.button:hover {
    background-color: #218838; /* Color más oscuro al pasar el mouse */
}

/* Efecto activo */
.button:active {
    transform: scale(0.98); /* Hace que el botón se reduzca un poco al hacer clic */
}

.contenedor{
     display: flex;                /* Usamos flexbox */
    justify-content: center;      /* Centra los botones horizontalmente */
    align-items: center;          /* Centra los botones verticalmente */
    
}

@media (max-width: 600px) {
    .button {
        padding: 20px 20%;      /* Aumentar tamaño de botón en pantallas pequeñas */
        font-size: 20px;          /* Aumentar el tamaño de la fuente */
    }
}