/* ==========================================================================
   HEADER / NAVBAR - CORPORATIVO DEFINITIVO
   ========================================================================== */

/* === CONTENEDOR PRINCIPAL === */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 1000;
    background: transparent;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.3s ease;
}

/* Estado al hacer scroll (Light Mode) */
.site-header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 4%;
}

/* === LOGO === */
.brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.brand-logo:hover { opacity: 0.8; }

.brand-icon { height: 38px; width: auto; }

.icon-dark { display: none; }
.icon-light { display: block; }
.site-header.scrolled .icon-light { display: none; }
.site-header.scrolled .icon-dark { display: block; }

.brand-text {
    font-family: 'Impact', sans-serif;
    font-size: 1.6rem;
    color: #ffffff; 
    letter-spacing: 1px;
}

.site-header.scrolled .brand-text { color: #c80000; } 

/* === BLOQUE DERECHO === */
.header-right { display: flex; align-items: center; gap: 2rem; }

/* === NAVEGACIÓN === */
.nav-list { display: flex; align-items: center; gap: 2rem; list-style: none; margin: 0; padding: 0; }

.nav-link {
    font-family: system-ui, -apple-system, sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: color 0.2s ease;
}

.nav-link:hover { color: #ffffff; }

.site-header.scrolled .nav-link { color: rgba(0, 0, 0, 0.65); }
.site-header.scrolled .nav-link:hover { color: #c80000; }

.mobile-only { display: none; }

/* === DIVISOR SUTIL === */
.header-divider { width: 1px; height: 24px; background-color: rgba(255, 255, 255, 0.2); }
.site-header.scrolled .header-divider { background-color: rgba(0, 0, 0, 0.1); }

/* === HERRAMIENTAS === */
.header-utils { display: flex; align-items: center; gap: 12px; }

.util-btn {
    background: transparent; border: none; color: rgba(255, 255, 255, 0.85);
    font-family: system-ui, sans-serif; font-size: 0.9rem; font-weight: 600;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 4px; transition: all 0.2s ease; text-decoration: none;
}

.util-btn:hover { color: #ffffff; background: rgba(255, 255, 255, 0.1); }
.site-header.scrolled .util-btn { color: rgba(0, 0, 0, 0.65); }
.site-header.scrolled .util-btn:hover { color: #c80000; background: rgba(0, 0, 0, 0.05); }

.icon-sun { display: none; }
.icon-moon { display: block; }

/* Botón de Iniciar Sesión Escritorio */
.login-btn-desktop {
    display: flex; align-items: center; gap: 8px;
    background-color: #c80000; color: #ffffff;
    padding: 0.5rem 1.2rem; border-radius: 4px;
    font-family: system-ui, sans-serif; font-size: 0.85rem; font-weight: 600;
    text-decoration: none; text-transform: uppercase; transition: all 0.2s ease;
}

.login-btn-desktop:hover { background-color: #ff3333; transform: translateY(-1px); }
.site-header.scrolled .login-btn-desktop:hover { background-color: #050608; }

/* === HAMBURGUESA === */
.hamburger {
    display: none; flex-direction: column; justify-content: space-between;
    width: 24px; height: 18px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1001;
}

.hamburger span { width: 100%; height: 2px; background-color: #ffffff; transition: all 0.3s ease; }
.site-header.scrolled .hamburger span { background-color: #050608; }

.hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }


/* ==========================================================================
   INTEGRACIÓN MODO OSCURO (DARK MODE)
   ========================================================================== */
body.dark-mode .site-header.scrolled {
    background: rgba(10, 12, 16, 0.95);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

body.dark-mode .site-header.scrolled .brand-text { color: #ffffff; }

body.dark-mode .site-header.scrolled .nav-link, 
body.dark-mode .site-header.scrolled .util-btn { 
    color: rgba(255, 255, 255, 0.85); 
}

body.dark-mode .site-header.scrolled .nav-link:hover, 
body.dark-mode .site-header.scrolled .util-btn:hover { 
    color: #ffffff; 
    background: rgba(255, 255, 255, 0.1); 
}

body.dark-mode .site-header.scrolled .header-divider { background-color: rgba(255, 255, 255, 0.1); }
body.dark-mode .site-header.scrolled .hamburger span { background-color: #ffffff; }

body.dark-mode .icon-sun { display: block; }
body.dark-mode .icon-moon { display: none; }
body.dark-mode .site-header.scrolled .icon-light { display: block; }
body.dark-mode .site-header.scrolled .icon-dark { display: none; }


/* =========================================
   RESPONSIVE HEADER (Ajustes finos para el menú móvil)
========================================= */
@media (max-width: 1100px) {
    .header-right { gap: 1.5rem; }
    .nav-list { gap: 1.5rem; }
    .login-btn-desktop span { display: none; } 
}

@media (max-width: 992px) {
    .hamburger { display: flex; }
    .header-divider, .login-btn-desktop { display: none; }
    
    .main-nav {
        position: fixed; top: 0; right: -100%; width: 100%; max-width: 320px; height: 100vh;
        background-color: #ffffff; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
        display: flex; align-items: center; justify-content: center; transition: right 0.3s ease; z-index: 1000;
    }
    
    body.dark-mode .main-nav { background-color: #08090b; }
    .main-nav.active { right: 0; }

    .nav-list { flex-direction: column; gap: 2.2rem; width: 100%; padding: 0 2rem; text-align: center; }

    .nav-link { font-size: 1.2rem; color: #050608; }
    body.dark-mode .nav-link { color: #ffffff; }

    .mobile-only { display: block; width: 100%; margin-top: 1rem; }
    
    /* 🔥 LOGIN MÓVIL DISCRETO 🔥 */
    .login-mobile {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        color: #c80000 !important; /* Rojo elegante solo en las letras e ícono */
        font-weight: 700;
        border: 1px solid rgba(200, 0, 0, 0.3); /* Borde súper fino en vez de bloque rojo gigante */
        padding: 0.8rem 1.5rem;
        border-radius: 4px;
        width: 100%;
        box-sizing: border-box;
        transition: all 0.2s ease;
    }

    .login-mobile:hover {
        background-color: rgba(200, 0, 0, 0.05);
        border-color: #c80000;
    }
}

@media (max-width: 768px) {
    .site-header { height: 70px; }
    .brand-icon { height: 32px; }
    .brand-text { font-size: 1.3rem; }
    .header-utils { gap: 5px; }
}

/* ==========================================================================
   VARIANTE HEADER FIJO (Subpáginas como PQRS, Blog, Políticas)
   ========================================================================== */

/* Fondo Fijo en Modo Claro */
.site-header.header-solid {
    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
}

.site-header.header-solid .brand-text { color: #c80000 !important; }
.site-header.header-solid .nav-link,
.site-header.header-solid .util-btn { color: rgba(0, 0, 0, 0.75) !important; }
.site-header.header-solid .nav-link:hover,
.site-header.header-solid .util-btn:hover { color: #c80000 !important; }

.site-header.header-solid .icon-light { display: none !important; }
.site-header.header-solid .icon-dark { display: block !important; }
.site-header.header-solid .hamburger span { background-color: #050608 !important; }
.site-header.header-solid .header-divider { background-color: rgba(0, 0, 0, 0.1) !important; }

/* Fondo Fijo en Modo Oscuro */
body.dark-mode .site-header.header-solid {
    background: rgba(10, 12, 16, 0.98) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .site-header.header-solid .brand-text { color: #ffffff !important; }
body.dark-mode .site-header.header-solid .nav-link,
body.dark-mode .site-header.header-solid .util-btn { color: rgba(255, 255, 255, 0.85) !important; }
body.dark-mode .site-header.header-solid .nav-link:hover,
body.dark-mode .site-header.header-solid .util-btn:hover { color: #ffffff !important; background: rgba(255, 255, 255, 0.1); }

body.dark-mode .site-header.header-solid .icon-light { display: block !important; }
body.dark-mode .site-header.header-solid .icon-dark { display: none !important; }
body.dark-mode .site-header.header-solid .hamburger span { background-color: #ffffff !important; }
body.dark-mode .site-header.header-solid .header-divider { background-color: rgba(255, 255, 255, 0.1) !important; }