/* =========================================================
   1. VARIABLES GLOBALES Y RESET
   ========================================================= */
:root {
    --verde-principal: #145A32;   
    --verde-oscuro: #0A331A;      
    --dorado-oficial: #C5A059;    
    --dorado-claro: #F9F6F0;      
    --fondo-sitio: #F8F9F9; 
    --blanco-puro: #FFFFFF;
    --texto-primario: #2C3E50;    
    --borde-suave: #E5E8E8;
}

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

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--fondo-sitio);
    color: var(--texto-primario);
    line-height: 1.6;
    overflow-x: hidden;
}

.contenedor { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* =========================================================
   2. ENCABEZADO (HEADER)
   ========================================================= */
header { 
    background: linear-gradient(135deg, var(--verde-principal) 0%, var(--verde-oscuro) 100%); 
    color: var(--blanco-puro); 
    padding: 20px; 
    text-align: center; 
    border-bottom: 5px solid var(--dorado-oficial); 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
}

.header-contenido { display: flex; align-items: center; justify-content: center; gap: 20px; flex-wrap: wrap; }
.logo-escudo { width: 80px; height: 80px; background-color: var(--blanco-puro); border-radius: 50%; display: flex; align-items: center; justify-content: center; border: 2px solid var(--dorado-oficial); padding: 5px; }
.logo-escudo img { width: 100%; height: 100%; object-fit: contain; }
.header-texto h1 { font-family: 'Montserrat', sans-serif; margin: 0; font-size: 24px; text-transform: uppercase; text-shadow: 2px 2px 5px rgba(0,0,0,0.4); }
.header-texto h2 { margin: 5px 0 0 0; font-size: 15px; font-weight: 500; color: var(--dorado-oficial); }

/* =========================================================
   3. NAVEGACIÓN RESPONSIVA (MENÚ)
   ========================================================= */
nav { 
    background-color: var(--blanco-puro); 
    border-bottom: 1px solid var(--borde-suave); 
    position: sticky; 
    top: 0; 
    z-index: 1000; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.06); 
}

.btn-menu-movil {
    display: none;
    background-color: var(--verde-principal);
    color: var(--blanco-puro);
    border: none;
    padding: 15px;
    width: 100%;
    font-size: 18px;
    font-family: 'Montserrat', sans-serif;
    font-weight: 600;
    cursor: pointer;
}

.enlaces-nav { display: flex; justify-content: center; flex-wrap: wrap; padding: 5px 0; }
.enlaces-nav a { display: inline-block; color: var(--texto-primario); text-decoration: none; padding: 12px 20px; font-size: 13.5px; font-weight: 600; font-family: 'Montserrat', sans-serif; text-transform: uppercase; transition: all 0.3s ease; border-radius: 6px; margin: 0 5px; }
.enlaces-nav a i { margin-right: 6px; color: var(--verde-principal); }
.enlaces-nav a:hover, .enlaces-nav a.activo { background-color: var(--verde-principal); color: var(--blanco-puro); }
.enlaces-nav a:hover i, .enlaces-nav a.activo i { color: var(--dorado-oficial); }

@media (max-width: 768px) {
    .btn-menu-movil { display: block; }
    .enlaces-nav { display: none; flex-direction: column; padding: 0; background-color: var(--blanco-puro); }
    .enlaces-nav.abierto { display: flex; }
    .enlaces-nav a { margin: 0; border-radius: 0; border-bottom: 1px solid var(--borde-suave); padding: 15px; text-align: left; }
}

/* =========================================================
   4. PIE DE PÁGINA (FOOTER)
   ========================================================= */
footer { background-color: var(--verde-oscuro); color: var(--dorado-claro); text-align: center; padding: 40px 20px; font-size: 14px; border-top: 5px solid var(--dorado-oficial); margin-top: 50px; }
footer p { margin: 8px 0; }
footer strong { color: var(--dorado-oficial); }