body {
    font-family: Arial, sans-serif; /* Fuente principal del documento */
    margin: 0; /* Elimina márgenes por defecto */
    padding: 0; /* Elimina padding por defecto */
    background-color: #f0f8ff; /* Color de fondo de la página */
}

header {
    background: url('/static/multimedia/portada.jpg') no-repeat center center/cover; /* Imagen de fondo centrada y cubierta */
    height: calc(100vh - 200px); /* Altura del encabezado ajustada para dejar espacio arriba */
    display: flex; /* Utiliza flexbox para centrar el contenido */
    flex-direction: column; /* Alinea los elementos en columna */
    justify-content: flex-start; /* Alinea el contenido al inicio del encabezado */
    align-items: center; /* Centra horizontalmente el contenido */
    text-align: center; /* Alinea el texto al centro */
    color: white; /* Color del texto */
    position: relative; /* Posición relativa para elementos hijos */
    border-top-left-radius: 30px; /* Esquina superior izquierda redondeada */
    border-top-right-radius: 30px; /* Esquina superior derecha redondeada */
    padding-top: 50px; /* Espacio en la parte superior para el texto */
}



nav {
    /* position: absolute; /* Posiciona el menú de navegación en la parte superior */
    top: 20px; /* Margen desde la parte superior */
    left: 20px; /* Margen desde la izquierda */
    background-color: rgba(255, 255, 255, 0.8); /* Fondo blanco semi-transparente */
    border-radius: 5px; /* Bordes redondeados */
    padding: 10px; /* Espaciado interno */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Sombra para dar profundidad */
}

.logo {
    position: absolute; /* Posiciona el logo en la parte superior derecha */
    top: 20px; /* Margen desde la parte superior */
    right: 20px; /* Margen desde la derecha */
}

nav ul {
    list-style: none; /* Elimina los puntos de la lista */
    padding: 0; /* Elimina padding de la lista */
    display: flex; /* Utiliza flexbox para alinear los elementos de la lista */
}

nav ul li {
    margin: 0 15px; /* Espaciado horizontal entre los elementos de la lista */
}

nav ul li a {
    color: #333; /* Color del texto de los enlaces */
    text-decoration: none; /* Elimina subrayado de los enlaces */
    font-size: 1.2em; /* Tamaño de fuente de los enlaces */
}

h1 {
    font-size: 3.5em; /* Tamaño ajustado para el título principal */
    margin: 0; /* Elimina margen por defecto */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7); /* Sombra para mejorar el contraste */
}

.slogan {
    font-size: 1.2em; /* Tamaño de fuente para el eslogan ajustado */
    margin-top: 10px; /* Margen superior para separación */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Sombra para mejorar el contraste */
}

.social-links {
    position: fixed; /* Fija la posición de los enlaces sociales */
    right: 20px; /* Margen desde la derecha */
    top: 50%; /* Centra verticalmente */
    transform: translateY(-50%); /* Ajusta para centrar completamente */
    display: flex; /* Utiliza flexbox para apilar los enlaces */
    flex-direction: column; /* Alinea los enlaces en columna */
}

.social-links a {
    margin: 10px 0; /* Espaciado vertical entre los enlaces sociales */
    text-decoration: none; /* Elimina subrayado de los enlaces */
    color: #333; /* Color del texto de los enlaces sociales */
    font-size: 1.5em; /* Tamaño de fuente de los enlaces sociales */
}

footer {
    text-align: center; /* Alinea el texto en el centro del pie de página */
    padding: 3px; /* Espaciado interno en el pie de página */
    background-color: #333; /* Color de fondo del pie de página */
    color: white; /* Color del texto en el pie de página */
    position: relative; /* Posición relativa para elementos hijos */
    bottom: 0; /* Posiciona el pie de página al fondo */
    width: 100%; /* Ancho completo del pie de página */
}