/* ========================= MENU PRINCIPAL ========================== */

.topbar{
height:54px;
display:flex;
align-items:center;
justify-content:space-between;
gap:18px;
position:relative;
z-index:3;
padding:0 8px;
}

.brand-mini{
display:flex;
align-items:center;
gap:11px;
color:var(--cyan);
letter-spacing:.18em;
text-transform:uppercase;
font-size:.78rem;
font-weight:700;
white-space:nowrap;
}

.brand-mini::before{
content:"▸";
color:var(--cyan2);
}

.nav{
display:flex;
align-items:center;
gap:12px;
}

.nav a{
width:46px;
height:42px;
border:1px solid rgba(255,255,255,.08);
background:rgba(255,255,255,.03);
display:grid;
place-items:center;
border-radius:9px;
color:var(--white);
transition:.22s ease;
font-size:1.12rem;
}

.nav a.active{
color:var(--cyan);
border-color:var(--stroke);
box-shadow:0 0 22px rgba(0,229,255,.24);
transform:translateY(-2px);
}

.nav a:hover{
color:#ff6a00;
border-color:#ff6a00;
box-shadow:0 0 22px rgba(255,106,0,.28);
transform:translateY(-2px);
}

/* ========================= MENU RESPONSIVE ========================== */

@media(max-width:1100px){
.nav{
gap:7px;
}
.nav a{
width:40px;
height:38px;
}
}

@media(max-width:640px){
.topbar{
align-items:flex-start;
gap:10px;
flex-direction:column;
height:auto;
}
.nav{
flex-wrap:wrap;
}
}