/* ==========================================================================
   2. NAVEGACIÓN Y HEADER PREMIUM
   ========================================================================== */
/* Inicio: Estilos del menú superior y barras de navegación */
nav {
    background: white; 
    padding: 10px 5%; 
    display: flex; 
    justify-content: space-between;
    align-items: center; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.1); 
    position: sticky; 
    top: 0; 
    z-index: 900;
}

.logo-img { 
    height: 60px; 
    width: auto; 
}

.nav-links { 
    font-weight: bold; 
    color: var(--azul-51); 
    font-size: 0.9rem; 
}

header {
    background: white;
    padding: 10px 5%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    border-bottom: 3px solid var(--azul-51);
}

.logo-box {
    display: flex;
    align-items: center;
    gap: 20px;
}

.logo-box img {
    height: 75px; 
    width: auto;
    transition: 0.3s;
}

.slogan-box {
    border-left: 2px solid #ddd;
    padding-left: 20px;
}

.slogan-box h2 {
    margin: 0;
    font-size: 1.1rem;
    color: var(--azul-51);
    letter-spacing: 1px;
    font-weight: 800;
}

.slogan-box span {
    display: block;
    font-size: 0.75rem;
    color: var(--naranja-51);
    font-weight: bold;
    text-transform: uppercase;
}

.user-access {
    display: flex;
    align-items: center;
    gap: 15px;
    color: var(--azul-51);
    font-weight: bold;
    font-size: 0.9rem;
    cursor: pointer;
}

.user-access i {
    font-size: 1.5rem;
    color: var(--naranja-51);
}

.user-access:hover {
    color: var(--naranja-51);
}
/* Fin: Navegación y Header */