/* NAV */

.navbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;

    display:grid;
    grid-template-columns: 1fr auto auto;
    align-items:center;

    padding:20px 80px;
    z-index:1000;

    background:rgba(5,8,22,.6);
    backdrop-filter:blur(10px);

    border-bottom:1px solid rgba(179,60,255,.15);
}

.nav-left{
    display:flex;
    justify-self:start;
    align-items:center;
    gap:5px;
}

.logo-placeholder img{
    width:150px;
    border-radius:50%;
}

.nav-links{
    display:flex;
    gap:30px;
    justify-self:center;
    list-style:none;
}

.espacio {
    width: 100px;
}

.nav-social,
.discord-btn{
    justify-self:end;
}


.nav-links a{
    font-family:'Outfit',sans-serif;
    font-size:13px;
    font-weight:500;
    letter-spacing:.8px;
    text-transform:uppercase;
    gap: 40px;
}




.nav-links a{
    position:relative;
    display: inline-block;
    text-decoration:none;
    color:white;
    font-size:14px;
    font-weight:600;
    transition:.3s;
}

.nav-links .active{
    color:white;
}

.nav-links a.active::after{
    content:"";
    position:absolute;
    left:50%;
    transform:translateX(-50%);
    bottom:-12px;
    width:70%;
    height:3px;
    border-radius:50px;
    background:#b33cff;
    box-shadow:
        0 0 8px #b33cff,
        0 0 18px #b33cff;
}

.nav-links a.active::before{
    content:"";
    position:absolute;
    left:15%;
    bottom:-12px;
    width:20px;
    height:3px;
    border-radius:50px;
    background:white;
    box-shadow:
        0 0 8px white,
        0 0 20px white;
    animation:navGlow 3s infinite;
}
@keyframes navGlow{
    0%{
        left:15%;
        opacity:0;
    }
    20%{
        opacity:1;
    }
    50%{
        left:calc(85% - 20px);
        opacity:1;
    }
    100%{
        left:calc(85% - 20px);
        opacity:0;
    }
}



.nav-links a:hover{
    color:#b33cff;
}

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

.nav-social a{

    width:40px;
    height:40px;

    display:flex;
    justify-content:center;
    align-items:center;
    animation:floatEfect 3s ease-in-out infinite;

    transition:.3s;
}


.nav-social a img{

    max-width:100%;
    max-height:100%;
    object-fit:contain;
}

.discord-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:12px;
    text-decoration:none;
    color:white;
    padding:14px 28px;
    border-radius:14px;
    border:1px solid #b33cff;
    background:rgba(179,60,255,.08);
    box-shadow:
        0 0 10px rgba(179,60,255,.3),
        0 0 25px rgba(179,60,255,.15);

    transition:.3s;
    font-family:'Outfit',sans-serif;
    font-size:13px;
    font-weight:800;
    letter-spacing:1px;
    text-transform:uppercase;
    animation:floatEfect 3s ease-in-out infinite;
}



.discord-btn img{

    width:28px;
    height:28px;
    object-fit:contain;
    flex-shrink:0;
    animation:discordFloat 3s ease-in-out infinite;
}

.discord-btn:hover{

    transform:
        translateY(-2px);

    box-shadow:
        0 0 15px rgba(179,60,255,.6),
        0 0 40px rgba(179,60,255,.3);
}

@keyframes floatEfect{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-3px);
    }

}

@keyframes glowEffect{

    0%,100%{

        box-shadow:
        0 0 10px rgba(179,60,255,.3),
        0 0 25px rgba(179,60,255,.15);

    }

    50%{

        box-shadow:
        0 0 18px rgba(179,60,255,.8),
        0 0 40px rgba(179,60,255,.4);

    }

}









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

.menu-toggle{

    display:none;
    width:42px;
    height:42px;
    background:none;
    border:none;
    cursor:pointer;
    z-index:2000;
}

.menu-toggle span{

    display:block;

    width:28px;
    height:3px;

    margin:5px auto;

    border-radius:10px;

    background:white;

    transition:.3s;
}

/* ================================= */
/* MOBILE */
/* ================================= */

@media(max-width:991px){

    .navbar{
        padding:20px;
        justify-content:space-between;
    }

    .menu-toggle{
        display:block;
    }

    .mobile-menu{
        position:fixed;
        top:0;
        right:-100%;
        width:300px;
        height:100vh;
        background:
        rgba(5,8,22,.97);
        backdrop-filter:blur(20px);
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        gap:30px;
        transition:.4s;
        z-index:1500;
        border-left:
        1px solid rgba(179,60,255,.3);
    }

    .mobile-menu.active{
        right:0;
    }

    .nav-links{

        flex-direction:column;
        align-items:center;
        gap:25px;
    }

    .nav-links a{

        font-size:18px;
    }

    .nav-social{
        justify-content:center;
    }

    .mobile-menu.active .discord-btn{
        display: flex;
        width:240px;
        align-items:center;
    }
}

/* ================================= */
/* DESKTOP */
/* ================================= */

@media(min-width:992px){

    .mobile-menu{

        display:flex;
        align-items:center;
        gap:30px;
    }
}
@media(min-width:1400px){
    .brand {margin-right: 50px;}
    .mobile-menu{
        display:flex;
        align-items:center;
        gap:30px;
    }
}
@media(max-width:1400px) {
    .espacio {
        width: 0px;
    }
    .brand {
        margin-right: 50px;}
}
@media(max-width:1100px) {
    .espacio {
        display: none;
        width: 0;
        .brand {margin-right: 50px;}
    }
    .brand {margin-right: 50px;}
}

@media(max-width:1050px) {
    .discord-btn{display: none;}
}

@media (max-width:1400px){

    .nav-social{
        display:none;
        
    }
    .nav-links{
        gap:20px;
    }
    .discord-btn{

        padding:12px 20px;
        font-size:12px;
    }

    .discord-btn img{

        width:28px;
        height:28px;
    }

}