/* 1. Reset para eliminar espacios en blanco no deseados */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2. Fondo general con la imagen del cielo */
body {
    background-image: url('images/fondo.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed; /* El fondo se queda quieto al hacer scroll */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: sans-serif;
}

/* 3. Contenedor de la Fachada (La Casa) */
.fachada-container {
    display: grid;
    /* Columna 1 para la pared azul, Columna 2 para la puerta roja */
    grid-template-columns: 1fr 320px; 
    /* Filas para Cornisa, Pared y Base de piedra */
    grid-template-rows: 100px 1fr 100px; 
    width: 90vw;
    max-width: 1100px;
    height: 75vh;
    gap: 0; /* Sin espacios para que las imágenes encajen perfectamente */
    /*box-shadow: 0 20px 50px rgba(0,0,0,0.5);  Sombra para dar profundidad sobre el fondo */
}

/* 4. Estilo base para las secciones con fondo */
nav, main, footer, aside {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* 5. Asignación de imágenes a cada sección */

/* Cornisa superior */
.seccion-nav {
    grid-column: 1;
    grid-row: 1;
    background-image: url('images/navB.png');
    background-size: 100% 100%;
    }

/* Pared azul principal */
.seccion-main {
    grid-column: 1;
    grid-row: 2;
    background-image: url('images/mainH.png');
}

/* Base de piedra */
.seccion-footer {
    grid-column: 1;
    grid-row: 3;
    background-image: url('images/footerA.png');
}

/* La puerta (Aside) que abarca todo el alto */
.seccion-aside {
    grid-column: 2;
    grid-row: 1 / span 3; /* Se extiende por las 3 filas */
    background-image: url('images/puertaC.png');
    /* Usamos 100% 100% para que la puerta no se corte y cubra todo el alto */
    background-size: 100% 100%; 
    
}

/* Opcional: Estilo para que el texto dentro sea legible */
.fachada-container > * {
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    text-shadow: 1px 1px 2px black;
}
/* 1. Contenedor de las ventanas dentro del main */
.contenedor-ventanas {
    position: relative;
    width: 100%;
    height: 100%;
    /* Usamos Flexbox para alinearlas horizontalmente */
    display: flex;
    justify-content: space-around; /* Distribuye espacio igual entre ellas */
    align-items: center; /* Centra verticalmente */
    padding: 0 5%; /* Espacio a los lados */
}

/* 2. Estilo base para TODOS los enlaces de ventana */
.ventana-link {
    display: block;
    /* Usamos las medidas exactas que mencionaste antes */
    width: 208px; 
    height: 384px;
    background-size: 100% 100%; /* Ajuste exacto */
    background-position: center;
    background-repeat: no-repeat;
    transition: background-image 0.2s ease-in-out, transform 0.1s ease;
    outline: none;
    cursor: pointer;
}
/* Efectos globales para todas las ventanas */
.ventana-link:hover { transform: scale(1.03); }
.ventana-link:active { transform: scale(0.98); }
/* VENTANA 1 */
.v1 { background-image: url('images/ventanaA.png'); }
.v1:hover { background-image: url('images/ventanafrida.png'); }
.v1:active { background-image: url('images/frida3.png'); }

/* VENTANA 2 */
.v2 { background-image: url('images/ventanaA.png'); } /* O la imagen que gustes */
.v2:hover { background-image: url('images/ventanacoyo.png'); }
.v2:active { background-image: url('images/segunda_frida_click.png'); }

/* VENTANA 3 */
.v3 { background-image: url('images/ventanaA.png'); }
.v3:hover { background-image: url('images/xochimilco.png'); }
.v3:active { background-image: url('images/tercera_frida_click.png'); }