/* 1. Base y Fondo */
body {
    /* Fondo blanco puro */
    background-color: #ffffff; 
    margin: 0;
    padding: 0;
    font-family: sans-serif;
}

/* 2. Contenedor que Centra */
.center-container {
    /* Hace que el contenedor ocupe la altura y el ancho total de la ventana */
    width: 100vw;
    height: 100vh;
    
    /* Configura Flexbox para centrar contenido */
    display: flex;
    justify-content: center; /* Centra horizontalmente */
    align-items: center; /* Centra verticalmente */
}

/* 3. Estilos de la Imagen */
.centered-image {
    /* Limita el tamaño de la imagen para que no desborde la ventana */
    max-width: 90%;
    max-height: 90vh; 
    
    /* Mantiene las proporciones */
    height: auto; 
    width: auto;
    
    /* Opcional: Estilo simple para el borde */
    border: none;
}