/* =========================================
   1. CONFIGURACIÓN BASE & COLORES DE MARCA
   ========================================= */
body { 
    font-family: 'Inter', sans-serif; 
}

.bg-brand-primary { background-color: #002651; }
.bg-brand-purple { background-color: #8A2BE2; }
.bg-brand-cyan { background-color: #00CED1; }
.text-brand-cyan { color: #00CED1; }
.text-brand-purple { color: #8A2BE2; }
.bg-gradient-brand { background: linear-gradient(135deg, #8A2BE2 0%, #00CED1 100%); }

/* =========================================
   2. LÓGICA DEL HEADER (CONTROL DE ESTADOS)
   ========================================= */

/* --- ESTADO A: INICIAL (Top de página) --- */
/* La "Máquina en Reposo": Fondo transparente para ver el azul del Hero */
#main-header {
    background-color: transparent; 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Transición suave */
    box-shadow: none;
}

/* Forzamos TEXTO BLANCO cuando estamos arriba */
#main-header .nav-link {
    color: #ffffff !important;
}

#main-header #logo-text {
    color: #ffffff !important;
}

#main-header #mobile-menu-btn {
    color: #ffffff !important;
}

/* Hover en estado inicial (Cyan brilla sobre oscuro) */
#main-header .nav-link:hover {
    color: #00CED1 !important; 
    text-shadow: 0 0 10px rgba(0,206,209,0.3);
}

/* --- ESTADO B: SCROLLED (Al bajar) --- */
/* La "Máquina Activa": Fondo blanco, letras oscuras */
/* Esta clase se activa vía JavaScript cuando scrollY > 50 */
#main-header.scrolled {
    background-color: rgba(255, 255, 255, 0.95); /* Blanco sólido semi-transparente */
    backdrop-filter: blur(12px); /* Efecto cristal */
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08); /* Sombra elegante */
    padding-top: 1rem;    /* Ajuste de altura */
    padding-bottom: 1rem;
}

/* Inversión de colores: Texto OSCURO sobre fondo BLANCO */
#main-header.scrolled .nav-link {
    color: #0f172a !important; /* Azul oscuro (Slate 900) */
}

#main-header.scrolled #logo-text {
    color: #0f172a !important;
}

#main-header.scrolled #mobile-menu-btn {
    color: #0f172a !important;
}

/* Hover en estado scrolled (Morado corporativo sobre blanco) */
#main-header.scrolled .nav-link:hover {
    color: #8A2BE2 !important; 
    text-shadow: none;
}

/* =========================================
   3. ANIMACIONES Y EFECTOS
   ========================================= */
.reveal { 
    opacity: 0; 
    transform: translateY(40px); 
    transition: all 0.8s ease; 
}

.reveal.active { 
    opacity: 1; 
    transform: translateY(0); 
}

@keyframes fadeInUp { 
    from { opacity: 0; transform: translateY(30px); } 
    to { opacity: 1; transform: translateY(0); } 
}

.animate-in { animation: fadeInUp 0.8s ease forwards; }
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }

/* Menú móvil lateral */
#mobile-menu {
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
#mobile-menu.open {
    transform: translateX(0);
}