/*
 * Reseteo básico y fuentes
 * CAMBIO: Se actualizó la fuente principal a "Google Sans Code"
 */

/* NUEVO: Asegurar altura completa */
html {
    height: 100%;
}

body {
    font-family: "Google Sans Code", monospace;
    font-optical-sizing: auto;
    font-weight: 400; /* 400 es el peso "normal" */
    font-style: normal;
    
    line-height: 1.4; /* Altura de línea para el body */
    font-size: 12px;  /* Tamaño de fuente para el body */

    margin: 0;
    
    /* --- Layout Flex --- */
    padding: 0; 
    min-height: 100%; 
    box-sizing: border-box;
    display: flex; 
    flex-direction: column; 
    /* --- Fin Layout Flex --- */
    
    background-color: #000; /* CAMBIO: Fondo negro */
    color: #333;
    /* CAMBIO: La transición de fondo se elimina de aquí */
}

/* --- INICIO DEL CAMBIO: Fondo dinámico (Lógica de Fade In) --- */

/* * Usamos un pseudo-elemento 'before' para el fondo.
 * Estará fijo, detrás de todo (z-index: -1) e invisible (opacity: 0).
*/
body::before {
    content: "";
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    
    background-image: url('fondo_a.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.4s ease-in-out; /* Transición de fade-in/out */
    z-index: -1; 
}

/* * Cuando JS añada la clase 'fondo-activo' al body (al hacer hover),
 * haremos que el fondo (el pseudo-elemento) aparezca.
*/
body.fondo-activo::before {
    opacity: 1;
}

/* * Hacemos que el 'span' que envuelve los enlaces 
 * muestre un cursor de puntero.
*/
#enlace-fondo-1 {
    cursor: pointer;
}

/* --- FIN DEL CAMBIO --- */

/* Contenedor Wrapper */
.wrapper {
    max-width: 40%;
    min-width: 350px; 
    
    /* Alineado a la izquierda */
    margin: 20px; 
    
    display: flex; /* Es un contenedor flex interno */
    flex-direction: column; /* Dirección vertical */
    flex-grow: 1; /* El wrapper crece para llenar el body */

    background-color: #fff; /* Fondo blanco para el contenido */
    padding: 25px;
    border: 1px solid #ddd;
    box-shadow: 0 0 15px rgba(0,0,0,0.05);
}

/* --- Encabezado --- */
header {
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

.title-bar {
    font-size: 1.1em;
    font-weight: bold;
    color: #444;
}

/* --- Contenido Principal --- */
main {
    padding: 0;
    flex-grow: 1; /* El main crece para empujar el footer */
}

.content-block p, .download-info p, .projects {
     margin-bottom: 20px;
}

.projects h2 {
    font-size: 1.4em;
    margin-bottom: 10px;
}

/* --- Pie de Página (ACTUALIZADO) --- */
footer {
    border-top: 1px solid #eee;
    padding-top: 15px;
    margin-top: 40px;
    
    color: #777;
    text-align: left; /* Alineado a la izquierda */
    /* El font-size: 12px; se hereda ahora del body, 
       así que la regla explícita se elimina de aquí.
    */
}