/* css/estilo_portada.css */

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: #e9e9f5; /* El color de fondo del body */
    display: flex; /* Usamos flexbox para centrar el contenido */
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
    overflow: hidden; /* Evita barras de desplazamiento si la imagen es muy grande */
}

/* Contenedor principal de la portada */
.contenedor-portada {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%; /* Ocupa todo el ancho disponible */
    height: 100%; /* Ocupa toda la altura disponible */
}

/* Estilos para el enlace de la portada */
.enlace-portada {
    display: flex; /* Para centrar la imagen dentro del enlace si fuera necesario */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    text-decoration: none; /* Quitamos el subrayado del enlace */
}

/* Estilos para la imagen central de la portada */
.imagen-central-portada {
    max-width: 90%; /* La imagen no superará el 90% del ancho de su contenedor */
    max-height: 90vh; /* La imagen no superará el 90% de la altura de la ventana (viewport height) */
    width: auto; /* Mantiene la proporción de la imagen */
    height: auto; /* Mantiene la proporción de la imagen */
    display: block; /* Elimina espacios extra debajo de la imagen */
    object-fit: contain; /* Asegura que la imagen se ajuste dentro de sus dimensiones sin recortarse */
    border: none; /* Asegura que no haya bordes indeseados */
}

/* Media Queries para ajustar el tamaño de la imagen en pantallas muy pequeñas */
@media screen and (max-width: 480px) {
    .imagen-central-portada {
        max-width: 95%; /* Un poco más de ancho en pantallas muy pequeñas */
        max-height: 85vh; /* Ajusta la altura si es necesario */
    }
}