/* ====================================================
   ARLI CONNECT - ESTILOS DE CABECERA (HEADER)
==================================================== */

/* Busca esta parte en css/header.css y asegúrate de tener estas reglas: */
.arli-navbar {
    position: fixed; /* Fuerza a que se quede fija en la pantalla */
    top: 0;          /* Pegada totalmente arriba */
    width: 100%;     /* Abarca todo el ancho */
    background-color: #ffffff;
    padding: 20px 0;
    transition: all 0.3s ease-in-out;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    z-index: 9999 !important;
}

/* Estado del logo en reposo */
.arli-logo {
    height: 120px;
    width: auto;
    transition: height 0.3s ease;
}

/* ==========================================
   EFECTO SCROLL (Cuando el usuario baja)
========================================== */
.arli-navbar.scrolled {
    padding: 5px 0; /* Contrae los márgenes */
    background-color: rgba(255, 255, 255, 0.92); /* Ligeramente transparente */
    backdrop-filter: blur(12px); /* Efecto esmerilado / frosted glass */
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Reducción proporcional del logo al hacer scroll */
.arli-navbar.scrolled .arli-logo {
    height: 50px;
}

/* ==========================================
   ENLACES Y MENÚS
========================================== */
.arli-navbar .nav-link {
    color: #1a2b4c; /* Azul corporativo oscuro */
    transition: color 0.2s ease;
}

.arli-navbar .nav-link:hover, 
.arli-navbar .nav-link.active {
    color: #0755d9; /* Acento primary ARLI */
}

/* Evitar que el primer contenido (ej. Hero) quede oculto debajo de la barra fija */
body {
    padding-top: 100px;
}