.header{
    background-color: var(--primario);
    padding: 1rem, 3rem 0;
    margin-bottom: 2rem;
    
}



.contenido-header{

    display: flex;
    flex-direction: column;
    justify-content: space-between;
} 


.barra{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}

@media (min-width: 768px) {
    .barra{
        flex-direction: row;
    }
 
}

.logo{
    width: 20rem;
}

.mobile-menu{
  
    width: 3rem;
    }

@media (min-width: 768px) {
    .mobile-menu{
        display: none;
    }
 
}

.navegacion{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
      
}

@media (min-width: 768px) {
    .navegacion{
    flex-direction: row;   
    justify-content: space-around;
    
}
 
}
.navegacion a{
   
    margin: 0 1rem;
    color: var(--texto);
    
    
}




.boton-nav{

    background-color: var(--texto);
    color: var(--terciario);
    font-weight: bold;
    text-decoration:none;
    padding: 1rem 3rem;
    text-align: center;
    margin-top: 2rem;
    border: none;
    border-radius: 1rem;    
    
}

.boton-nav:hover{
    background-color: var(--terciario);
    
    cursor: pointer;
    
}


.navegacion a.boton-nav {
    color: var(--terciario);
}

.navegacion a.boton-nav:hover {
    color: var(--texto);
}