:root{
    --ColorPrincipal: rgba(0, 35, 85, 0.715);
    --ColorBlanco: rgb(255, 255, 255);
    --ColorNegro: rgba(20, 2, 2, 0.359);
    --ColorNegroFuerte: rgb(20, 2, 2);
    --ColorBorde: rgb(255, 255, 255, .5);
}

.navigation a {
    position: relative;
    font-size: 12px;
    color: var(--ColorNegro);
    text-decoration: none;    
    margin-left: 2px;
    font-size: 12px;
    color: var(--ColorBlanco);
}

.navigation a::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 100%;
    height: 3px;
    transform-origin: left ;
    background: var(--ColorBlanco);
    border-radius: 8px;
    transform: scaleX(0);
    transition: transform  .4s;
}

.navigation a:hover::after{
    transform: scaleX(1);
    transform-origin: right ;
    
}

.activo{
    border-bottom: 1px solid var(--ColorBlanco);
}