/*==================================================
                    HEADER
==================================================*/

.header{

    position:fixed;

    top:0;
    left:0;

    width:100%;

    z-index:1000;

    padding-block:clamp(12px,1.5vw,24px);

    background:transparent;

    transition:
        background .35s ease,
        backdrop-filter .35s ease,
        padding .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;

}


/*==================================================
                HEADER SCROLLED
==================================================*/

.header.scrolled{

    background:rgba(5,5,5,.82);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border-bottom:1px solid rgba(255,255,255,.05);

    box-shadow:
        0 10px 35px rgba(0,0,0,.28);

}


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

.navbar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:clamp(22px,3vw,48px);

}


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

.logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

}

.logo img{

    display:block;

    width:clamp(140px,14vw,220px);

    height:auto;

    user-select:none;

    -webkit-user-drag:none;

}


/*==================================================
                    MENÚ
==================================================*/

.menu{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:clamp(18px,2vw,36px);

    margin-left:auto;

    list-style:none;

}

.menu li{

    position:relative;

}


/*==================================================
                    LINKS
==================================================*/

.menu a{

    position:relative;

    display:inline-flex;

    align-items:center;

    text-decoration:none;

    color:#fff;

    font-size:clamp(.90rem,.9vw,1rem);

    font-weight:500;

    white-space:nowrap;

    transition:
        color .30s ease;

}


/*==================================================
                LÍNEA INFERIOR
==================================================*/

.menu a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:#16a34a;

    transition:.35s;

}

.menu a:hover{

    color:#16a34a;

}

.menu a:hover::after{

    width:100%;

}


/*==================================================
                LINK ACTIVO
==================================================*/

.menu a.active{

    color:#16a34a;

}

.menu a.active::after{

    width:100%;

}


/*==================================================
                BOTÓN NAV
==================================================*/

.btn-nav{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    flex-shrink:0;

    min-width:clamp(185px,16vw,220px);

    height:clamp(50px,4vw,58px);

    padding-inline:clamp(20px,2vw,32px);

    background:#16a34a;

    color:#fff;

    text-decoration:none;

    font-size:clamp(.88rem,.9vw,1rem);

    font-weight:700;

    white-space:nowrap;

    border-radius:4px;

    transition:
        transform .30s ease,
        background .30s ease,
        box-shadow .30s ease;

}

.btn-nav:hover{

    background:#1db45a;

    transform:translateY(-2px);

    box-shadow:
        0 10px 26px rgba(22,163,74,.35);

}


/*==================================================
            BOTÓN HAMBURGUESA
==================================================*/

.menu-toggle{

    display:none;

    width:48px;

    height:48px;

    cursor:pointer;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:6px;

    z-index:1200;

}

.menu-toggle span{

    width:28px;

    height:2px;

    background:#fff;

    transform-origin:center;

    transition:.35s;

}


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

.menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    backdrop-filter:blur(3px);

    opacity:0;

    visibility:hidden;

    transition:
        opacity .35s ease,
        visibility .35s ease;

    z-index:1090;

}

.menu-overlay.active{

    opacity:1;

    visibility:visible;

}


/*==================================================
            HAMBURGER ANIMATION
==================================================*/

.menu-toggle.active span:nth-child(1){

    transform:
        translateY(8px)
        rotate(45deg);

}

.menu-toggle.active span:nth-child(2){

    opacity:0;

}

.menu-toggle.active span:nth-child(3){

    transform:
        translateY(-8px)
        rotate(-45deg);

}


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

@media (max-width:992px){

    .header{

        padding-block:14px;

    }

    .btn-nav{

        display:none;

    }

    .menu-toggle{

        display:flex;

    }

    .menu{

        position:fixed;

        top:0;

        right:-100%;

        width:min(340px,88vw);

        height:100vh;

        margin:0;

        padding:110px 40px 60px;

        background:#050505;

        border-left:1px solid rgba(255,255,255,.06);

        display:flex;

        flex-direction:column;

        justify-content:flex-start;

        align-items:flex-start;

        gap:28px;

        transition:right .35s ease;

        z-index:1100;

        overflow-y:auto;

    }

    .menu.active{

        right:0;

    }

    .menu li{

        width:100%;

    }

    .menu a{

        width:100%;

        display:flex;

        justify-content:space-between;

        align-items:center;

        font-size:1.05rem;

        padding-bottom:12px;

        border-bottom:1px solid rgba(255,255,255,.08);

    }

    .menu a::after{

        display:none;

    }

    .menu-mobile-button{

        display:flex;

        width:100%;

        margin-top:18px;

    }

    .menu-mobile-button .btn-nav{

        display:flex;

        width:100%;

        min-width:0;

        height:54px;

    }

}


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

@media (max-width:576px){

    .header{

        padding-block:12px;

    }

    .logo img{

        width:150px;

    }

    .menu{

        width:100%;

        padding:
            95px
            28px
            40px;

    }

    .menu a{

        font-size:1rem;

    }

}