/* ==========================================================
   ADRIOCLARO — HEADER PREMIUM V600
   ========================================================== */

/* FAIXA SUPERIOR */
.top{
    position:sticky !important;
    top:0 !important;
    z-index:2001 !important;

    background:rgba(255,255,255,.975) !important;

    -webkit-backdrop-filter:blur(12px) saturate(130%) !important;
    backdrop-filter:blur(12px) saturate(130%) !important;

    box-shadow:
        0 1px 0 rgba(1,0,37,.07),
        0 4px 15px rgba(1,0,37,.025) !important;
}


/* HEADER */
.header{
    position:sticky !important;
    top:45px !important;
    z-index:2000 !important;

    overflow:visible !important;

    background:
        linear-gradient(
            135deg,
            #010025 0%,
            #05033c 52%,
            #010025 100%
        ) !important;

    box-shadow:
        0 14px 34px rgba(1,0,37,.22),
        inset 0 1px 0 rgba(255,255,255,.035),
        inset 0 -1px 0 rgba(255,255,255,.09) !important;

    -webkit-backdrop-filter:
        blur(18px) saturate(145%) !important;

    backdrop-filter:
        blur(18px) saturate(145%) !important;

    transition:
        box-shadow .35s ease,
        background .35s ease !important;
}


/* LUZ AMBIENTE */
.header::before{
    content:"" !important;

    position:absolute !important;
    inset:0 !important;

    pointer-events:none !important;

    background:
        radial-gradient(
            circle at 18% 50%,
            rgba(255,255,255,.075),
            transparent 30%
        ),
        radial-gradient(
            circle at 84% 45%,
            rgba(117,109,255,.08),
            transparent 26%
        ) !important;

    opacity:.85;

    animation:
        adrcHeaderAura 6s ease-in-out infinite alternate;
}


/* FILETE LUMINOSO */
.header::after{
    content:"" !important;

    position:absolute !important;

    left:50% !important;
    bottom:0 !important;

    width:min(1180px,calc(100% - 40px)) !important;
    height:1px !important;

    transform:translateX(-50%) !important;

    pointer-events:none !important;

    background:
        linear-gradient(
            90deg,
            transparent 0%,
            rgba(255,255,255,.06) 18%,
            rgba(255,255,255,.55) 50%,
            rgba(255,255,255,.06) 82%,
            transparent 100%
        ) !important;

    box-shadow:
        0 0 15px rgba(255,255,255,.22) !important;
}


@keyframes adrcHeaderAura{
    from{
        opacity:.55;
    }

    to{
        opacity:1;
    }
}


/* HEADER AO ROLAR */
.header.adrc-header-scrolled{
    box-shadow:
        0 18px 46px rgba(1,0,37,.34),
        inset 0 -1px 0 rgba(255,255,255,.12) !important;
}


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

.header .brand,
.header .logo{
    position:relative !important;
    z-index:4 !important;

    transition:
        transform .28s cubic-bezier(.2,.7,.2,1),
        filter .28s ease !important;
}

.header .brand:hover,
.header .logo:hover{
    transform:
        translateY(-2px)
        scale(1.025) !important;

    filter:
        drop-shadow(
            0 7px 16px rgba(255,255,255,.13)
        ) !important;
}


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

.header .nav{
    position:relative !important;
    z-index:4 !important;
}

.header .nav a{
    position:relative !important;

    color:#ffffff !important;
    opacity:.91 !important;

    font-weight:800 !important;

    padding-top:12px !important;
    padding-bottom:12px !important;

    transition:
        opacity .22s ease,
        transform .22s ease,
        text-shadow .22s ease !important;
}

.header .nav a:not(.cta):hover{
    opacity:1 !important;

    transform:
        translateY(-2px) !important;

    text-shadow:
        0 0 15px rgba(255,255,255,.22) !important;
}


/* LINHA ANIMADA */
.header .nav a:not(.cta)::after{
    content:"" !important;

    position:absolute !important;

    left:50% !important;
    bottom:4px !important;

    width:0 !important;
    height:2px !important;

    transform:
        translateX(-50%) !important;

    border-radius:20px !important;

    background:
        linear-gradient(
            90deg,
            rgba(255,255,255,.15),
            #ffffff,
            rgba(255,255,255,.15)
        ) !important;

    box-shadow:
        0 0 11px rgba(255,255,255,.28) !important;

    transition:
        width .30s cubic-bezier(.2,.7,.2,1) !important;
}

.header .nav a:not(.cta):hover::after,
.header .nav a.adrc-menu-active:not(.cta)::after{
    width:74% !important;
}

.header .nav a.adrc-menu-active{
    opacity:1 !important;

    text-shadow:
        0 0 14px rgba(255,255,255,.18) !important;
}


/* ==========================================================
   CONTATO
   ========================================================== */

.header .nav .cta{
    overflow:hidden !important;

    background:
        linear-gradient(
            135deg,
            #ffffff 0%,
            #eeeeF6 100%
        ) !important;

    color:#010025 !important;

    box-shadow:
        0 8px 22px rgba(0,0,0,.14) !important;

    transition:
        transform .25s ease,
        box-shadow .25s ease !important;
}

.header .nav .cta:hover{
    transform:
        translateY(-3px)
        scale(1.025) !important;

    box-shadow:
        0 14px 30px rgba(0,0,0,.20) !important;
}


/* REFLEXO DO BOTÃO */
.header .nav .cta::before{
    content:"" !important;

    position:absolute !important;

    top:-100% !important;
    left:-100% !important;

    width:42% !important;
    height:300% !important;

    transform:
        rotate(20deg) !important;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255,255,255,.95),
            transparent
        ) !important;

    transition:
        left .72s ease !important;
}

.header .nav .cta:hover::before{
    left:150% !important;
}


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

.header .menu,
.header .menu-btn{
    transition:
        transform .25s ease,
        background .25s ease,
        box-shadow .25s ease !important;
}

.header .menu:hover,
.header .menu-btn:hover{
    transform:
        scale(1.08) !important;

    background:
        rgba(255,255,255,.15) !important;

    box-shadow:
        0 0 18px rgba(255,255,255,.08) !important;
}


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

.mobile-nav{
    background:
        rgba(1,0,37,.985) !important;

    -webkit-backdrop-filter:
        blur(18px) saturate(140%) !important;

    backdrop-filter:
        blur(18px) saturate(140%) !important;

    box-shadow:
        0 20px 44px rgba(1,0,37,.32) !important;
}

.mobile-nav a{
    transition:
        padding-left .22s ease,
        background .22s ease !important;
}

.mobile-nav a:hover{
    padding-left:9px !important;

    background:
        rgba(255,255,255,.045) !important;
}


/* ==========================================================
   ENTRADA DO HEADER
   ========================================================== */

@keyframes adrcHeaderEnter{
    from{
        opacity:0;
        transform:translateY(-10px);
    }

    to{
        opacity:1;
        transform:none;
    }
}

.header{
    animation:
        adrcHeaderEnter .50s
        cubic-bezier(.2,.7,.2,1)
        both !important;
}


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

@media(max-width:980px){

    .header{
        top:38px !important;
    }

    .header::after{
        width:calc(100% - 28px) !important;
    }

    .header .nav a::after{
        display:none !important;
    }
}


/* ==========================================================
   ACESSIBILIDADE
   ========================================================== */

@media(prefers-reduced-motion:reduce){

    .header,
    .header *,
    .header::before,
    .header::after{
        animation:none !important;
        transition:none !important;
    }
}