/* MENU DESKTOP */
.menu{
display:flex;
flex-direction:column;
gap:0px;
margin-top:1%;
}

.menu a{
position:relative;
text-decoration:none;
color:#2a2924;
font-family:"Google Sans Flex", sans-serif;
padding-bottom:0px;
font-size: 13px;
font-weight: 400;
text-transform: uppercase;
letter-spacing: 0.1px;
line-height: 20px;
}

.menu a:after{
content:"";
position:absolute;
left:0;
bottom:0;
width:0%;
height:1px;
background:#2a2924;
transition:width .35s ease;
color: #2a2924;
}

.menu a:hover:after{
width:100%;
}

.menu-mobile{
display:flex;
flex-direction:column;
gap:40px;
text-align:center;
}

.menu-mobile a{
color: #FDFAF3;
font-size:34px;
text-decoration:none;
transition: 0.5s ease;
font-weight: 200;
    line-height: 25px;
}

.menu-mobile .btn {
    background: #03d3db;
    font-weight: 400;
    font-size:19px;
    letter-spacing: 0.5px;
    border-radius:100px;
    padding: 11px 25px;
    color: #2a2924;
}
.menu-mobile .btn:hover {
    background: #FDFAF3;
    color:#2a2924;
}


/* BURGER */

.burger{
display:none;
width:35px;
height:22px;
position:relative;
cursor:pointer;
z-index:2000;
}

/* líneas */

.burger span{
position:absolute;
width:100%;
height:2px;
background:#2a2924;
left:0;
transition:all .35s ease;
}

/* línea superior */

.burger span:nth-child(1){
top:0;
}

/* línea centro */

.burger span:nth-child(2){
top:50%;
transform:translateY(-50%);
}

/* línea inferior */

.burger span:nth-child(3){
bottom:0;
}

/* ANIMACIÓN A X */

.burger.active span:nth-child(1){
transform:rotate(45deg);
top:10px;
background:#FDFAF3;
}

.burger.active span:nth-child(2){
opacity:0;
}

.burger.active span:nth-child(3){
transform:rotate(-45deg);
bottom:10px;
background:#FDFAF3;
}

/* MENU OVERLAY */

.menu-overlay{
position:fixed;
top:0;
left:0;
z-index:1500;
width:100%;
height:100%;
background:#2a2924;
display:flex;
align-items:center;
justify-content:center;
clip-path:circle(0% at 95% 5%);
transition:clip-path .7s ease;

}

.menu-overlay.active{
clip-path:circle(150% at 95% 5%);
}



@media (max-width:900px){

/* ocultar menu desktop */

.menu{
display:none;
}

/* mostrar burger */

.burger{
display:block;
}
.menu-mobile a:hover{
color:#03d3db;
transition: 0.5s ease;
}
.menu-mobile .btn { display: block;}
}