/*=================================
        ArenaOS
        NAVBAR.CSS
=================================*/


/*=================================
        NAVBAR
=================================*/

.navbar{

    position:fixed;

    top:24px;
    left:0;

    width:100%;

    z-index:var(--z-navbar);

    transition:var(--transition);

}

.navbar.scrolled{

    top:12px;

}


/*=================================
        CONTENEDOR
=================================*/

.navbar-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

    min-height:78px;

    padding:0 28px;

    border-radius:24px;

    background:var(--glass);

    backdrop-filter:blur(var(--glass-blur));

    border:1px solid var(--glass-border);

    box-shadow:var(--shadow-md);

    transition:var(--transition);

}

.navbar.scrolled .navbar-container{

    box-shadow:

        0 25px 70px rgba(0,0,0,.35);

}


/*=================================
        LOGO
=================================*/

.logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

}

.logo img{

    height:46px;

    width:auto;

}


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

.menu{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:40px;

    flex:1;

}

.menu a{

    position:relative;

    color:var(--text-light);

    font-size:.95rem;

    font-weight:600;

    transition:var(--transition-fast);

}

.menu a:hover{

    color:var(--text);

}


/*=================================
        SUBRAYADO
=================================*/

.menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-10px;

    width:0;

    height:2px;

    border-radius:50px;

    background:linear-gradient(

        90deg,

        var(--primary),

        var(--primary-light)

    );

    transition:var(--transition);

}

.menu a:hover::after{

    width:100%;

}


/*=================================
        BOTONES
=================================*/

.navbar-buttons{

    display:flex;

    align-items:center;

    gap:14px;

    flex-shrink:0;

}


/*=================================
        HAMBURGUESA
=================================*/

.menu-toggle{

    display:none;

    width:52px;

    height:52px;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:6px;

    border-radius:16px;

    background:rgba(255,255,255,.04);

    border:1px solid var(--border);

    cursor:pointer;

    transition:var(--transition);

}

.menu-toggle:hover{

    background:rgba(255,255,255,.08);

}

.menu-toggle span{

    width:22px;

    height:2px;

    border-radius:50px;

    background:#ffffff;

    transition:var(--transition);

}


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

@media(max-width:1100px){

    .menu{

        display:none;

    }

    .navbar-buttons{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

}

@media(max-width:768px){

    .navbar{

        top:12px;

    }

    .navbar-container{

        min-height:70px;

        padding:0 20px;

        border-radius:20px;

    }

    .logo img{

        height:40px;

    }

}