@charset "utf-8";
/* CSS Document */
body {
    font-family: sans-serif;
    margin: 0;
    background-image: url('Imagenes_28/background.png');
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100vh;
    padding: 20px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.5);
    
}

.linea-superior {
    background-color: #800020; /* Color ginda */
    width: 100%;
    height: auto; /* Ajusta la altura automáticamente según el contenido */
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    display: flex; /* Para alinear los logos y el título */
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px; /* Añade espacio dentro de la línea superior */
    box-sizing: border-box;
}

.logo-izquierda, .logo-derecha {
    width: 10%; /* Tamaño en porcentaje del ancho de la línea superior */
    height: auto; /* Mantiene la proporción */
    display: flex; /* Para centrar la imagen dentro del contenedor */
    justify-content: center;
    align-items: center;
    z-index: 102; /* Asegura que estén por encima de la línea */
}

.logo-izquierda img {
    max-width: 100%; /* Asegura que la imagen no exceda el ancho del contenedor */
    max-height: 100%; /* Asegura que la imagen no exceda la altura del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
}

.logo-derecha img {
    max-width: 60%; /* Asegura que la imagen no exceda el ancho del contenedor */
    max-height: 100%; /* Asegura que la imagen no exceda la altura del contenedor */
    height: auto; /* Mantiene la proporción de la imagen */
}

.titulo-encabezado {
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-size: 1.5em;
    color: white;
    margin: 0 20px;
    flex-grow: 1;
    text-align: center;
    z-index: 102;
}

.contenedor-flex-vertical {
    display: flex;
    flex-direction: column; /* Apila los elementos verticalmente */
    height: 100vh; /* Ocupa el 100% de la altura de la ventana (viewport) */
    width: 100%;
}

.lista {
	
	margin-bottom: 20px; /* Espacio entre la lista y la imagen */
    margin-top: 200px; /* Esto bajará la lista 50px desde la parte superior */
    text-align: left; /* Si quieres que la lista se alinee a la izquierda */
	top: auto;
    width: 100%; /* La lista ocupa todo el ancho */
	flex: 1; /* Ocupa el espacio restante disponible */
    max-width: 60%; /* Evita que la lista se haga demasiado grande */
    padding-right: 20px; /* Espacio entre la lista y la imagen */
	
}

.lista span {
    display: block;
    margin-bottom: 5px;
}

.imagen_directora {
    width: 30%;
    align-self: center; /* Centra la imagen horizontalmente */
	justify-content: center;
	margin-left: auto;
}

.imagen_directora img {
    max-width: 100%;
    height: auto;
}