/* ==========================================================================
   1. CONFIGURACIÓN DE MARCA (Noche Oaxaqueña)
   ========================================================================== */
:root {
    --blanco-calido: #F9F7F2;      /* Base */
    --gris-piedra: #D1D1D1;       /* Bordes y secundarios */
    --azul-indigo: #1A2A40;       /* Acento curatorial */
    --madera-oscura: #2C1E16;     /* Footer y profundidad */
    --negro-expositivo: #121212;  /* Contraste */
    
    /* Fuente Principal Zen Loop */
    --fuente-zen: "Zen Loop", cursive;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--blanco-calido);
    color: var(--negro-expositivo);
    font-family: var(--fuente-zen);
    font-size: 22px; 
    line-height: 1.4;
}

/* ==========================================================================
   2. TÍTULOS (ESTILOS INDEPENDIENTES)
   ========================================================================== */

/* H1: Ultra ligero y color Índigo */
h1 {
    font-family: var(--fuente-zen);
    font-size: 5rem;
    color: var(--azul-indigo);
    font-weight: 100;
    text-transform: uppercase;
    letter-spacing: 4px;
    text-align: center;
    margin: 0;
}

/* H2: Resaltado, Negro puro y con más cuerpo */
h2 {
    font-family: var(--fuente-zen);
    font-size: 2.2rem;
    color: #000000;
    font-weight: 400; 
    text-transform: uppercase;
    letter-spacing: 1px;
    text-align: center;
    margin: 15px 0 0 0;
}

/* ==========================================================================
   3. HEADER Y NAVEGACIÓN
   ========================================================================== */
header {
    background-color: var(--blanco-calido);
    padding: 1rem 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--blanco-calido);
    position: sticky;
    top: 0;
    z-index: 1000;
}

header img {
    height: 50px;
}

nav a {
    font-family: var(--fuente-zen);
    text-decoration: none;
    color: var(--azul-indigo);
    margin-left: 20px;
    font-size: 1.4rem;
    transition: 0.3s;
}

/* Ajuste específico para el ícono de la casa */
nav a img[alt="Inicio"] {
    height: 20px;       /* Tamaño sugerido para equilibrar con Zen Loop */
    width: auto;        /* Mantiene la proporción */
    vertical-align: middle; /* Lo centra verticalmente respecto al texto */
    margin-right: 5px;  /* Espacio opcional entre la casa y el primer enlace */
    opacity: 0.8;       /* Opcional: le da un tono más sutil para que no brille tanto */
    position: relative;
    top: -4px;
}

nav a:hover {
    color: var(--gris-piedra);
}

/* ==========================================================================
   4. EFECTO PARALLAX (Fondo Fijo)
   ========================================================================== */
.parallax-container {
    height: 85vh; 
    background-image: url('../images/imagenv1.jpeg');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    
    /* CAMBIOS PARA ENMARCAR LA IMAGEN */
    max-width: 1200px;      /* Se ajusta al ancho de tu contenido principal */
    margin: 40px auto;      /* "auto" lo centra y 40px da espacio arriba/abajo */
    border-radius: 4px;     /* Opcional: un toque sutil en las esquinas */
}
/* Oculta la imagen del HTML para priorizar el fondo fijo del CSS */
.parallax-container img {
    display: none;
}

/* ==========================================================================
   5. FORMATO DE TEXTO EDITORIAL (Cuerpo de página)
   ========================================================================== */
.intro-text, 
section p {
    max-width: 900px;
    margin: 60px auto;
    text-align: center;
    padding: 0 40px;
    font-size: 1.8rem;
    word-spacing: 4px;
}

/* ==========================================================================
   6. SECCIONES ESPECIALES (Split y Thesis)
   ========================================================================== */

/* Imagen izquierda / texto derecha */
.section-split {
    display: flex;
    gap: 50px;
    align-items: center;
    padding: 80px 10%;
}

.section-split div {
    flex: 1;
}

.section-split img {
    width: 100%;
    border-left: 3px solid var(--azul-indigo);
}

/* Imagen + texto horizontal tipo tesis */
.section-thesis {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    padding: 80px 10%;
    background-color: rgba(26, 42, 64, 0.03); 
}

.section-thesis img {
    width: 100%;
    margin-bottom: 20px;
}

/* ==========================================================================
   7. SEPARADORES Y ESPACIADORES
   ========================================================================== */

.spacer-lg {
    border: none;
    height: 100px;
    margin: 0;
    visibility: hidden;
}

.separator-oaxaca {
    border: none;
    border-top: 1px solid var(--gris-piedra);
    width: 20%;
    margin: 60px auto;
    opacity: 0.6;
}

.separator-accent {
    border: none;
    border-top: 2px solid var(--azul-indigo);
    width: 40px;
    margin: 40px auto;
}

/* ==========================================================================
   8. FOOTER
   ========================================================================== */
footer {
    background-color: var(--madera-oscura);
    color: var(--blanco-calido);
    padding: 50px 5%;
    text-align: center;
}

footer a {
    color: var(--blanco-calido);
    text-decoration: none;
    font-family: var(--fuente-zen);
    margin: 0 10px;
}

footer img {
height: 30px;            /* Tamaño un poco más visible */
width: auto;
margin: 0 15px;
transition: 0.3s;
/* Eliminamos el brillo 0 y usamos solo inversión si son negros */
filter: invert(1);       
opacity: 0.8;            /* Para que no brillen tanto y se vean elegantes */
}

footer img:hover {
    opacity: 1;              /* Brillo total al pasar el mouse */
    transform: scale(1.1);   /* Pequeño efecto de crecimiento */
}
footer div {
margin-bottom: 20px;     /* Separa los iconos de los enlaces legales */
display: flex;
justify-content: center;
align-items: center;
}

/* ==========================================================================
   9. RESPONSIVE DESIGN (Celulares y Tablets)
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Ajustes de Tipografía y Títulos */
    h1 { 
        font-size: 2.8rem; /* Un poco más pequeño para evitar desbordes */
        letter-spacing: 2px;
    }
    
    h2 { 
        font-size: 1.4rem; 
        padding: 0 15px;
        line-height: 1.2;
    }

    /* 2. Header y Menú Hamburguesa */
    header {
        position: relative; /* Necesario para que el menú se posicione bien */
        padding: 0.8rem 5%;
    }

    .menu-toggle {
        display: flex; /* Aparece en móvil */
        flex-direction: column;
        cursor: pointer;
        gap: 5px;
        z-index: 1001;
    }

    .menu-toggle span {
        width: 25px;
        height: 2px;
        background-color: var(--azul-indigo);
        transition: 0.3s;
    }

    /* 3. Navegación Móvil (El panel que cae) */
    nav#nav-menu {
        display: none; /* Oculto por defecto */
        flex-direction: column;
        position: absolute;
        top: 100%; /* Justo debajo del header */
        left: 0;
        width: 100%;
        background-color: var(--blanco-calido);
        padding: 30px 0;
        border-bottom: 2px solid var(--gris-piedra);
        z-index: 1000;
        box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    }

    /* Clase que activa el JS */
    nav#nav-menu.active {
        display: flex !important;
    }

    nav a {
        font-size: 1.8rem;
        margin: 15px 0 !important;
        display: block;
        width: 100%;
        text-align: center;
    }

    /* Ocultar el icono de la casa en móvil si estorba el diseño vertical */
    nav a img[alt="Inicio"] {
        height: 25px;
        margin-bottom: 10px;
    }

    /* 4. Contenedores y Secciones */
    .parallax-container {
        height: 45vh; /* Altura más cómoda para móviles */
        max-width: 92%; 
        margin: 20px auto;
        background-attachment: scroll; /* Mejora rendimiento en móviles */
    }

    .section-split, 
    .section-thesis {
        display: flex;
        flex-direction: column; /* Apila los elementos */
        padding: 40px 8%;
        gap: 30px;
    }

    .section-thesis {
        grid-template-columns: 1fr; /* Fuerza una sola columna */
    }

    .section-split div, 
    .section-thesis div {
        width: 100%;
    }

    .section-split img, 
    .section-thesis img {
        width: 100%;
        margin-bottom: 15px;
        border-left: none;
        border-bottom: 3px solid var(--azul-indigo); /* Acento abajo en vez de al lado */
    }

    /* 5. Ajustes de Texto Editorial */
    .intro-text, 
    section p {
        font-size: 1.4rem;
        padding: 0 10px;
        margin: 30px auto;
        line-height: 1.3;
    }

    footer {
        padding: 40px 10%;
    }

}