/* ==========================================================
   HEADER
   WebERP 2.0
========================================================== */

.header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;

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

    padding:22px 0;

    background:transparent;
}

.header.scrolled{

    padding:14px 0;

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

    backdrop-filter:blur(16px);

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

    box-shadow:0 10px 35px rgba(15,23,42,.08);

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

}

/* ===============================
   DARK
================================ */

html[data-theme="dark"] .header.scrolled{

    background:rgba(5,8,22,.80);

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

}

/* ===============================
   CONTAINER
================================ */

.header__container{

    display:flex;

    align-items:center;

    justify-content:space-between;

}

.header__wrapper{

    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:40px;

}

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

.header__logo{

    display:flex;

    align-items:center;

    flex-shrink:0;

}

.header__logo img{

    width:220px;

    height:auto;

    transition:var(--transition);

}

.header__logo:hover img{

    transform:scale(1.03);

}

.header__logo{gap:10px;text-decoration:none}
.header__logo img{width:215px;height:57px;object-fit:cover;object-position:center}
.header__logo-mark{display:grid;place-items:center;width:45px;height:38px;font-size:39px;line-height:1;font-weight:900;font-style:italic;color:#1762df;letter-spacing:-7px}
.header__logo-name{display:flex;flex-direction:column;font-size:22px;line-height:1;font-weight:800;letter-spacing:-1px;color:#102047}
.header__logo-name small{font-size:8px;letter-spacing:.2px;margin-top:4px;color:#102047}
.header__actions .btn{border-radius:12px;padding:13px 19px;font-size:14px}
.header__actions .btn span{font-size:20px;margin-left:8px}

/* ===============================
   NAV
================================ */

.header__nav{

    margin-left:auto;

}

.header__menu{

    display:flex;

    align-items:center;

    gap:36px;

}

.header__menu>li{

    position:relative;

}

.header__menu>li>a{

    position:relative;

    display:flex;

    align-items:center;

    gap:8px;

    font-weight:600;

    font-size:.96rem;

    color:var(--text);

    transition:var(--transition);

}

.header__menu>li>a:hover{

    color:var(--primary);

}

.header__menu>li>a:focus-visible,
.header__logo:focus-visible,
.header .btn:focus-visible,
.mega-menu__grid a:focus-visible,
.menu-mobile:focus-visible{
    outline:none;
    box-shadow:0 0 0 4px rgba(37,99,235,.14);
    border-radius:14px;
}

.header__menu>li>a.is-active,
.header__menu>li.dropdown.is-active>a,
.header__menu>li>a[aria-current="page"]{
    color:var(--primary);
}

.header__menu>li>a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:2px;

    background:var(--primary);

    transition:.30s;

}

.header__menu>li>a:hover::after{

    width:100%;

}

.header__menu>li>a.is-active::after,
.header__menu>li.dropdown.is-active>a::after,
.header__menu>li>a[aria-current="page"]::after{
    width:100%;
}

/* ===============================
   DROPDOWN
================================ */

.dropdown-arrow{

    font-size:.70rem;

    transition:.30s;

}

.dropdown:hover .dropdown-arrow{

    transform:rotate(180deg);

}

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

.mega-menu{

    position:absolute;

    top:58px;

    left:50%;

    transform:translateX(-50%) translateY(20px);

    width:270px;

    padding:12px;

    background:var(--background);

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

    border-radius:18px;

    box-shadow:0 20px 50px rgba(15,23,42,.12);

    opacity:0;

    visibility:hidden;

    transition:.30s;

}

.dropdown:hover .mega-menu{

    opacity:1;

    visibility:visible;

    transform:translateX(-50%) translateY(0);

}

.mega-menu__grid{

    display:grid;
    grid-template-columns:1fr;
    gap:8px;

}

.mega-menu__grid a{

    display:flex;

    flex-direction:column;

    gap:4px;

    padding:12px 14px;

    border-radius:14px;

    transition:var(--transition);

}

.mega-menu__grid a:hover{

    background:var(--surface);

    transform:translateY(-3px);

}

.mega-menu strong{

    font-family:var(--font);
    font-size:1rem;
    font-weight:700;

    color:var(--text);

}

.mega-menu span{

    color:var(--text-light);

    font-size:.86rem;

}

/* ===============================
   ACTIONS
================================ */

.header__actions{

    display:flex;

    align-items:center;

    gap:16px;

}

/* ===============================
   DARK BUTTON
================================ */

.theme-toggle{

    width:44px;

    height:44px;

    border-radius:50%;

    background:var(--surface);

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

    display:flex;

    align-items:center;

    justify-content:center;

    transition:var(--transition);

}

.theme-toggle:hover{

    transform:rotate(20deg);

    background:var(--primary);

    color:#FFF;

}

/* ===============================
   CTA
================================ */

.header .btn{

    padding:14px 24px;

    font-size:.92rem;

}

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

.menu-mobile{

    display:none;

    width:44px;

    height:44px;

    border-radius:12px;

    background:var(--surface);

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

    font-size:1.2rem;

    align-items:center;

    justify-content:center;

}

.menu-mobile.active{
    background:#eef4ff;
    border-color:rgba(37,99,235,.16);
    color:var(--primary);
}

/* ===============================
   RESPONSIVO
================================ */

@media(max-width:1100px){

    .header__menu{

        gap:22px;

    }

    .mega-menu{

        width:250px;

    }

}

@media(max-width:992px){

    .header{

        padding:14px 0;
        background:rgba(255,255,255,.92);
        backdrop-filter:blur(18px);
        -webkit-backdrop-filter:blur(18px);
        box-shadow:0 8px 28px rgba(18,50,91,.07);

    }

    .header__nav{

        display:none;

    }

    .header .btn{

        display:none;

    }

    .menu-mobile{

        display:flex;
        flex-shrink:0;

    }

    .header__wrapper{
        gap:16px;
    }

    .header__logo img{

        width:172px;

    }

}

@media(max-width:576px){

    .header__logo img{

        width:154px;

    }

    .theme-toggle{

        width:40px;

        height:40px;

    }

    .menu-mobile{

        width:40px;

        height:40px;

    }

}

@media(max-width:992px){
    .header__logo-mark{width:37px}.header__logo-name{font-size:18px}.header__logo-name small{font-size:6px}
}
/* =====================================
   MENU MOBILE
===================================== */

@media (max-width:992px){

    .header__nav{

        position:fixed;

        top:78px;

        left:20px;

        right:20px;

        display:none;

        background:var(--background);

        border:1px solid rgba(18,32,71,.08);

        border-radius:24px;

        padding:18px;

        box-shadow:0 22px 60px rgba(15,23,42,.16);

    }

    .header__nav.open{

        display:block;

        animation:fadeIn .30s;

    }

    .header__menu{

        flex-direction:column;

        align-items:stretch;

        gap:8px;

    }

    .header__menu > li > a{

        justify-content:space-between;

        padding:14px 16px;

        border-radius:16px;

        background:#f8fbff;

    }

    .header__menu > li > a.is-active,
    .header__menu > li > a[aria-current="page"],
    .header__menu > li.dropdown.is-active > a{
        background:#eef4ff;
    }

    .header__menu > li > a::after{

        display:none;

    }

    .mega-menu{

        position:relative;

        width:100%;

        left:0;

        top:10px;

        transform:none;

        opacity:0;

        visibility:hidden;

        display:none;

        box-shadow:none;

        border:1px solid rgba(18,32,71,.06);

        border-radius:18px;

        padding:10px;

        background:#fbfdff;

    }

    .dropdown.open .mega-menu{

        opacity:1;

        visibility:visible;

        display:block;

    }

    .dropdown.open .dropdown-arrow{

        transform:rotate(180deg);

    }

    .mega-menu__grid{

        grid-template-columns:1fr;

        gap:10px;

    }

    .mega-menu__grid a{

        padding:14px;

        border:1px solid rgba(18,32,71,.06);

        background:#fff;

    }

}

@media (max-width:576px){

    .header__nav{

        left:12px;

        right:12px;

        top:74px;

        padding:14px;

        border-radius:20px;

    }

    .header__menu > li > a{

        padding:13px 14px;

        font-size:.93rem;

    }

    .mega-menu{

        padding:10px;

    }

}