/* --- CONFIGURACIÓN GENERAL --- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #c5b6aa; /* Color café claro/arena de fondo */
    font-family: 'Montserrat', sans-serif;
    min-height: 100vh;
    padding: 2rem 4rem;
    overflow-x: hidden; /* Evita scrolls horizontales innecesarios */
}

/* --- MENÚ SUPERIOR CENTRADO --- */
.navbar-center {
    display: flex;
    justify-content: center;
    width: 100%;
    margin-bottom: 2rem;
}

.nav-links {
    display: flex;
    gap: 2.5rem;
}

.nav-links a {
    color: #e2d7cc; /* Tono crema claro inactivo */
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

.nav-links a:hover, 
.nav-links a.active {
    color: #dfd79b; /* Destaque verde pistache claro para página activa */
}

/* --- CONTENEDOR PRINCIPAL ASIMÉTRICO (COLLAGE) --- */
.gallery-grid {
    position: relative;
    max-width: 1200px;
    height: 580px; /* Altura controlada para compactar elementos hacia arriba */
    margin: 0 auto;
}

/* --- BLOQUE CENTRAL DEL TÍTULO --- */
.center-title-block {
    position: absolute;
    top: 40%; 
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 10;
}

.sub-el {
    font-size: 3.5rem;
    color: #dfd79b;
    font-weight: 700;
    display: block;
    margin-bottom: -0.5rem;
}

.main-title {
    background-color: #b08d82; /* Fondo café rojizo/terracota */
    color: #e6dec5;
    padding: 0.8rem 3.5rem;
    font-size: 3.5rem;
    font-weight: 700;
    border-radius: 25px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    letter-spacing: 1px;
}

/* --- CONFIGURACIÓN DE BASE Y ANIMACIÓN PARA LOS MARCOS --- */
.window-frame, 
.polaroid, 
.double-frame {
    position: absolute;
    background-color: #ffffff;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    
    /* Transición suave para que el movimiento, rotación y sombras duren 0.4s */
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.4s ease, 
                z-index 0s; 
    
    cursor: pointer; /* Indica que las imágenes son interactivas */
}

/* --- EFECTO INTERACTIVO AL PASAR EL MOUSE (HOVER GENERAL) --- */
.window-frame:hover, 
.polaroid:hover, 
.double-frame:hover {
    z-index: 99; /* Trae la imagen encima de todo el collage al instante */
    box-shadow: 0 20px 38px rgba(0, 0, 0, 0.25); /* Sombra amplia que simula vuelo/elevación */
}

/* --- MAQUETACIÓN MARCOS ESTILO NAVEGADOR --- */
.window-bar {
    background-color: #ffffff;
    height: 18px;
    border-bottom: 3px solid #db5a5a; /* Borde rojizo/coral */
    display: flex;
    align-items: center;
    padding-left: 8px;
    gap: 4px;
}

.window-bar span {
    width: 6px;
    height: 6px;
    background-color: #db5a5a;
    border-radius: 50%;
    display: inline-block;
}

.window-frame {
    border: 3px solid #db5a5a;
    border-radius: 12px;
    overflow: hidden;
}

.window-frame img {
    width: 100%;
    height: calc(100% - 18px);
    object-fit: cover;
    display: block;
}

/* --- MAQUETACIÓN MARCOS ESTILO POLAROID --- */
.polaroid {
    padding: 12px 12px 35px 12px; /* Espacio inferior característico de Polaroid */
    border-radius: 4px;
    width: 165px;  /* Tamaños más grandes implementados */
    height: 190px; 
}

.polaroid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* --- MAQUETACIÓN MARCO DOBLE HORIZONTAL --- */
.double-frame {
    padding: 12px;
    border-radius: 4px;
    display: flex;
    gap: 12px;
}

.double-frame img {
    width: 175px;  
    height: 115px; 
    object-fit: cover;
    display: block;
}

/* --- COORDENADAS PRECISAS Y EFECTOS INTERACTIVOS EN HOVER --- */

/* 1. Ventana Superior Izquierda */
.item-top-left {
    width: 300px;
    height: 260px;
    top: 2%;
    left: 1%;
}
.item-top-left:hover {
    transform: scale(1.05) translateY(-5px); /* Escala 5% y sube un poco */
}

/* 2. Polaroid 1 (Inclinada Izquierda) */
.item-polaroid-1 {
    top: 48%;
    left: 2%;
    transform: rotate(-10deg); /* Inclinación inicial */
}
.item-polaroid-1:hover {
    transform: rotate(0deg) scale(1.12) translateY(-10px); /* Se endereza por completo y crece 12% */
}

/* 3. Polaroid 2 (Inclinada Centro) */
.item-polaroid-2 {
    top: 45%;
    left: 17%;
    transform: rotate(8deg); /* Inclinación inicial */
}
.item-polaroid-2:hover {
    transform: rotate(0deg) scale(1.12) translateY(-10px); /* Se endereza por completo y crece 12% */
}

/* 4. Cuadro Doble Horizontal Abajo (Subido) */
.item-bottom-center {
    bottom: 5%; /* Elevado hacia el lienzo */
    left: 50%;
    transform: translateX(-50%); /* Centrado horizontal inicial */
}
.item-bottom-center:hover {
    transform: translateX(-50%) scale(1.05) translateY(-8px); /* Crece y sube manteniendo su centrado */
}

/* 5. Ventana Superior Derecha */
.item-top-right {
    width: 260px;
    height: 210px;
    top: 5%;
    right: 18%;
}
.item-top-right:hover {
    transform: scale(1.06) translateY(-5px);
}

/* 6. Ventana Inferior Derecha (Subida) */
.item-bottom-right {
    width: 280px;
    height: 245px;
    bottom: 4%; /* Elevada hacia adentro */
    right: 1%;
}
.item-bottom-right:hover {
    transform: scale(1.06) translateY(-5px);
}

/* --- ADAPTABILIDAD EN DISPOSITIVOS MÓVILES (RESPONSIVO) --- */
@media (max-width: 968px) {
    body {
        padding: 1.5rem;
    }
    .nav-links {
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
    }
    /* En pantallas móviles se desactiva el absoluto para ordenarse verticalmente */
    .gallery-grid {
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2.5rem;
        margin-top: 3rem;
    }
    .center-title-block, 
    .window-frame, 
    .polaroid, 
    .double-frame, 
    .item-bottom-center {
        position: static;
        transform: none !important;
        width: 100% !important;
        max-width: 350px;
        height: auto;
    }
    .window-frame img {
        height: 200px;
    }
    .polaroid {
        height: 300px;
    }
    .double-frame {
        flex-direction: column;
    }
    .double-frame img {
        width: 100%;
        height: 150px;
    }
}