.barranavegacion{
    box-shadow: 0 4px 10px var(--navbar-shallow--color);
    position: fixed;
    margin: 0 auto;
    background-color: var(--theme-color);
    left: 0;
    top: 0;
    width: 100%;
    z-index: 100;
}

.ancla{
    display: flex;
    justify-content: space-between;
    padding: 15px
}

/*estilos del menu*/

.menu{
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;

}

.menu li{
    padding: 0 15px;
}

.menu a{
    color: var(--text-color);
    font-size: 18px;
    font-weight: 800;
    line-height: 50px;
    text-transform:uppercase;
    position:relative;
}

/* se incluye pseudo selectores*/
.menu a::after {
content: "";
background-color: var(--secondary-color);
position: absolute;
top: calc(100% + 4px);
left:0;
width: 100%;
height: 4px;
opacity: 0;
transition: opacity 0.3s;
}

.menu a.selected::after,
.menu a:hover::after{
    opacity: 0.8;
}

.menu a:hover{
    color:var(--tertiary-color)
}
.open-menu,
.close-menu {
    display: none;
}

/*@media (max-width:950px) {
    body{
        background-color: blue;
    }
} */




/* estilos del logo*/
.logo {
    display: flex;
    align-items: center;
    font-size: 25px;
    color: var(--primary-color);
}

.logo img{
    border-radius: 50%;
}

@media (max-width:950px) {
    
    .menu{
     flex-direction: column;
     position: fixed;
     left: 0;
     top: 0;
     width: 100%;
     align-items: center;
     background-color: var(--menu-mobile-background-color);
     height: 100%;
     overflow-y: auto;

     opacity: 0;
     pointer-events: none;
     transition: opacity 0.4s;
    }
    
    .menu li{
        padding: 0;
    }
    
    .menu a{
        color: var(--text-color-inverse);
        line-height: 60px;
        font-size: 20px;
    }
    
    .open-menu,
    .close-menu {
        display: block;
        border: none;
        background: none;
        cursor:pointer;
    }
    
   .close-menu {
    align-self: flex-end;
    padding: 0.1px;
   }
    
   .menu_opened {
    opacity: 1;
    pointer-events: all;
   }

   .open-menu:focus:not(:focus-visible)
   .close-menu:focus:not(:focus-visible){
    outline: none;
   }

   /* se incluye pseudo selectores para dispositivos moviles*/
   
   .menu a::after {
    content: none;
    background-color: var(--secondary-color);
    position: absolute;
    top: calc(100% + 4px);
    left:0;
    width: 100%;
    height: 4px;
    opacity: 0;
    transition: opacity 0.3s;
    }
    
    .menu a:hover,
    .menu a.selected{
        color:var(--quaternary-color)
    }
    
}