/* ==================================================
   TOPBAR FIXA
================================================== */
.topbar{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;

    background:rgba(10,14,19,.92);
    backdrop-filter:blur(6px);
    border-bottom:1px solid rgba(44,255,99,.12);

    height:var(--topbar-desktop);
    display:flex;
    justify-content:center;
}

.topbar .container{
    display:flex;
    align-items:center;
    width:100%;
    position:relative;
}

.topbar .logo{
    margin-right:auto;
}

/* ==================================================
   LOGO
================================================== */
.logo-wrapper{
    position:relative;
    display:inline-block;
}

.logo-wrapper img{
    display:block;
    height:150px;
    width:auto;
}

/* ==================================================
   MENU DESKTOP
================================================== */
.navbar-custom{
    display:flex;
    gap:8px;
    align-items:center;
    pointer-events:auto; /* 🔑 desktop sempre clicável */
}

.navbar-custom a{
    padding:7px 16px;
    font-size:16px;
    border-radius:999px;
    color:var(--text-muted);
    transition:.25s;
}

.navbar-custom a:hover{
    background:rgba(44,255,99,.15);
    color:var(--green);
}

.navbar-custom .btn{
    border:1px solid var(--green);
    color:var(--green);
}

.navbar-custom .btn:hover{
    background:var(--green);
    color:#000;
}

/* ==================================================
   BOTÃO MENU
================================================== */
.menu-toggle{
    display:none;
    background:none;
    border:0;
    color:var(--text);
    font-size:22px;

    position:relative;
    z-index:3000;
    pointer-events:auto;
}

/* ==================================================
   EFEITOS DO LOGO (NÃO capturam clique)
================================================== */
.logo-wrapper.eletrico::before,
.logo-wrapper.desfragmentando::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    background-repeat:no-repeat;
    background-position:left center;
    background-size:100% 100%;
}

.logo-wrapper.eletrico::before{
    z-index:3;
    background-image:url("../img/logo/mascara1.png");
    animation:trilha-revela .45s linear forwards;
}

.logo-wrapper.desfragmentando::after{
    z-index:2;
    background-image:url("../img/logo/mascara2.png");
    animation:trilha-revela .45s linear forwards;
}

@keyframes trilha-revela{
    0%{
        opacity:0;
        clip-path:inset(0 100% 0 0);
        filter:brightness(2);
    }
    15%{ opacity:1; }
    100%{
        opacity:0;
        clip-path:inset(0 0 0 0);
        filter:brightness(1.2);
    }
}

/* ==================================================
   OVERLAY MOBILE (GLOBAL)
================================================== */
.menu-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0);
    z-index:1500;
    display:none;
    pointer-events:none;
}

.menu-overlay.active{
    display:block;
    pointer-events:auto;
}

/* ==================================================
   MENU MOBILE
================================================== */
@media (max-width: 991px){

    /* logo NÃO pode capturar clique no mobile */
    .logo-wrapper{
        pointer-events:none;
    }

    .menu-toggle{
        display:block;
        margin-left:auto;
    }

    .navbar-custom{
        position:absolute;
        top:100%;
        right:0;

        display:none;
        flex-direction:column;
        align-items:stretch;

        background:rgba(10,14,19,.97);
        border-radius:16px;
        padding:12px;
        min-width:220px;

        transform:translateY(-10px);
        transition:transform .25s ease;

        pointer-events:none;   /* 🔑 só no mobile */
        z-index:2000;
    }

    .navbar-custom.active{
        display:flex;
        transform:translateY(0);
        pointer-events:auto;
    }

    .navbar-custom a{
        width:100%;
        text-align:left;
        padding:10px 14px;
        border-radius:10px;
    }

    .navbar-custom .btn{
        text-align:center;
    }

    .topbar{
        height:auto;
    }

    .logo-wrapper img{
        height:110px;
    }
}