/* 1. RESET BÁSICO (Para que todos los navegadores partan igual) */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


/* 2. ESTILOS GENERALES (El corazón del minimalismo) */

body {
    background-color: #ffffff; /* Tu fondo blanco puro */
    color: #111111; /* Un gris casi negro para que la lectura sea más suave */
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Tipografía sin adornos */
    line-height: 1.6;
}

/* 3. BARRA DE NAVEGACIÓN SUPERIOR */
.navbar {
    display: flex;
    justify-content: space-between; /* Empuja el logo a la izquierda y el menú a la derecha */
    align-items: center; /* Alinea todo perfectamente al centro vertical */
    padding: 20px 40px; /* Espacio moderado arriba/abajo y a los lados */
    background-color: #ffffff; /* Mantiene tu fondo blanco */
    border-bottom: 1px solid #f9f9f9; /* Una línea divisoria ultradelgada y sutil */
    
    /* EL TRUCO MAGICO: Hace que la barra te persiga al bajar */
    position: sticky;
    top: 0;
    z-index: 100; 
}

.logo img {
    max-height: 70px; /* Controla qué tan grande se ve tu logo. Ajusta este número. */
    width: auto;
    display: block;
}

nav a {
    text-decoration: none;
    color: #888888;
    margin-left: 30px; /* Separación entre las palabras del menú */
    font-size: 0.9rem;
    text-transform: uppercase; /* Letras en mayúscula para más elegancia */
    letter-spacing: 1px;
    transition: color 0.3s ease;
}

nav a:hover {
    color: #000000;
}

/* Ajuste para celulares: que no quede tan apretado */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column; /* Pone el logo arriba y el menú abajo en móviles */
        gap: 15px;
        padding: 20px;
    }
    nav a {
        margin: 0 10px; /* Acerca los enlaces en celulares */
    }
}

/* 4. LA GALERÍA (Columnas manuales con Flexbox) */
.grid-fotos {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 80px 20px;
    display: flex; /* Coloca las 3 columnas una al lado de la otra */
    gap: 20px; /* El espacio entre las columnas */
}

.columna {
    display: flex;
    flex-direction: column; /* Apila las fotos hacia abajo dentro de cada columna */
    gap: 20px; /* El espacio vertical entre foto y foto */
    flex: 1; /* Obliga a que las 3 columnas midan exactamente el mismo ancho */
}

.columna img {
    width: 100%;
    height: auto;
    display: block;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.columna img:hover {
    opacity: 0.8;
}

/* --- DISEÑO DE LA SECCIÓN INFO (Escritorio) --- */
/* Lo ponemos antes del responsivo para que el celular pueda modificarlo */
.seccion-dividida {
    display: flex;
    align-items: flex-start; 
    justify-content: space-between;
    gap: 50px; 
    width: 99%; 
    max-width: 100%; 
    margin: 80px 0; 
    padding: 0 5%; 
    box-sizing: border-box; 
}

.mitad-texto {
    flex: 1; 
    text-align: left; 
    padding-left: 30px; 
}

.mitad-foto {
    flex: 1; 
    text-align: right; 
    padding-right: 10px; 
}

.mitad-foto img {
    max-width: 100%; 
    border-radius: 2px;
    max-width: 400px;
}


/* 6. SECCIÓN CONTACTO */
#contacto {
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
    padding: 60px 20px;
    border-top: 1px solid #eeeeee;
}

h2 {
    font-size: 1.4rem;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#info p, #contacto p {
    font-size: 1.0rem; 
}


/* 7. CAJA DE LUZ (Lightbox) */
.lightbox {
    display: none; 
    position: fixed;
    z-index: 999; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95); 
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.lightbox.activo {
    opacity: 1;
    pointer-events: all;
}

.lightbox img {
    max-width: 90%;
    max-height: 90vh; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.1); 
}

#cerrar-lightbox {
    position: absolute;
    top: 20px;
    right: 40px;
    font-size: 50px;
    cursor: pointer;
    color: #111;
}


/* 8. DISEÑO RESPONSIVO (¡Siempre debe ir al final del archivo!) */
@media (max-width: 768px) {
    /* La Galería */
    .grid-fotos {
        padding: 0 10px 40px 10px; 
        gap: 5px; 
    }
    
    .columna {
        gap: 5px; 
    }

    /* La Sección Dividida (Borde a Borde) */
    .seccion-dividida {
        flex-direction: column; 
        gap: 40px; 
        margin: 40px 0;
        padding: 0; /* EL TRUCO: Quitamos el margen lateral de la caja principal */
        width: 100%;
    }

    .mitad-texto {
        text-align: center; 
        padding: 0 20px; /* Protegemos solo el texto */
    }

    .mitad-foto {
        width: 100%; 
        padding: 0; 
    }

    .mitad-foto img {
        width: 100%; /* Expande la foto de izquierda a derecha */
        max-width: 100%; 
        margin: 0; 
        display: block;
        border-radius: 0; /* Diseño limpio sin bordes curvos */
    }
}