/* ==========================================================================
   1. ESTILOS GENERALES DE LA CABECERA
   ========================================================================== */

.main-header { 
    margin-bottom: 40px; 
}

.header-top { 
    border-bottom: 1px solid #D7D7D7; 
    padding-bottom: 12px; 
    /*display: flex;*/ 
    align-items: flex-end; 
    justify-content: space-between; 
}

.logo-title { 
    font-size: 36px; 
    line-height: 44px; 
    font-family: PPLL Vocento Light, serif; 
    margin-top: 24px;
}

.v-h2{
    font-size: 16px;
    margin-top: 24px;
}

/* ==========================================================================
   2. ESTRUCTURA DEL MENÚ DE NAVEGACIÓN
   ========================================================================== */

.v-h__u { 
    list-style: none; 
    padding: 0; 
    margin: 0; 
    display: flex; 
}

/* Elementos de la lista */
.v-h__l { 
    margin-right: 24px; 
    font-size: 16px; 
    line-height: 140%; 
    height: 40px; 
    display: flex; 
    align-items: center; 
    position: relative;
}

.v-h__l:last-child {
    margin-right: 0;
}

/* ==========================================================================
   3. ENLACES Y ANIMACIÓN DE BARRIDO INTERMITENTE
   ========================================================================== */

/* Enlaces base del menú */
.v-h__u .hsc__a {
    text-decoration: none;
    color: #202020; 
    display: inline-flex;
    align-items: center;
    height: 100%;             
    position: relative;
    transition: color 0.3s ease-in-out;
}

/* LA LÍNEA FALSA (Cuando el ratón SALE del elemento) */
.v-h__u .hsc__a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;              
    background: #202020;      
    transform: scaleX(0); 
    
    /* 1. Al salir, el punto de fuga obligatorio es la DERECHA */
    transform-origin: right center; 
    
    /* 2.  
       - El movimiento (transform) tarda 0.4s en encogerse hacia la derecha.
       - El punto de apoyo (transform-origin) espera congelado 0.4s (step-end 0.4s) 
         y solo cambia a la derecha cuando la línea ya ha desaparecido por completo. */
    transition: transform 0.4s ease-in-out, transform-origin 0s step-end 0.4s;
}

/* EFECTO HOVER (Cuando el ratón ENTRA al elemento) */
.v-h__u .hsc__a:hover::after {
    /* 3. Al entrar, cambiamos el origen al instante a la IZQUIERDA */
    transform-origin: left center;
    
    /* 4. Expandimos la línea al 100% de su ancho */
    transform: scaleX(1);
    
    /* 5. Quitamos cualquier retraso para que la respuesta al poner el ratón sea inmediata */
    transition: transform 0.4s ease-in-out;
}

/* ==========================================================================
   4. ESTADO SELECCIONADO (PÁGINA ACTIVA DESDE JS)
   ========================================================================== */
/* La línea se mantiene visible y fija en la opción activa */
.v-h__u .hsc__a.active::after {
    transform: scaleX(1);
    transform-origin: left center;
    transition: none !important;
}