.header-bg {  position: sticky; top: 0; background-color: var(--branco); z-index: 9999; --scroll-progress: 0%; }
.header-bg::before { content: ''; position: absolute; top: 0; left: 0; width: var(--scroll-progress); height: 3px; background: var(--cor1); pointer-events: none; transition: width 0.15s linear; }
.header-top-bg { display: block; height: 42px;}
.header-bg .header-top-bg { background: var(--preto); }
.header-top-bg .header-top { display: flex; align-items: center; justify-content: flex-end; gap: 28px; height: 100%; }
.header-top .link { display: flex; align-items: center; gap: 8px; font: 13px modelica; color: var(--branco); text-transform: uppercase; }
.header-top .link.zap { font-size: 15.5px; }
/* .header .bx { display: none; transition: .2s ease; } */

.header { display: flex; align-items: center; gap: 70px; height: 100px; }
.header .nav-menu { display: flex; align-items: center; justify-content: space-between; flex: 1; gap: 50px; border-bottom: 1px solid var(--preto); }
.nav-menu .link {  white-space: nowrap; text-align: center; font: 700 15.38px / 3 modelica; position: relative; cursor: pointer; display: inline-flex; align-items: center; transition: color .25s ease; }
.nav-menu .link::after {--height: 5px; content: ''; position: absolute; width: 100%; height: var(--height); background: var(--cor1); left: 0; bottom: calc( (var(--height) / 2) * -1 ); transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }

.nav-menu .link:hover,
.nav-menu .link:focus-visible { color: var(--cor1); }

.nav-menu .link:hover::after,
.nav-menu .link:focus-visible::after,
.nav-menu .link.ativo::after { transform: scaleX(1); }  

.header .bx { display: none; position: relative; width: 35px; height: 22px; cursor: pointer; flex-shrink: 0; }
.header .bx span { position: absolute; left: 0; width: 35px; height: 2px; background: var(--preto); transition: top .4s ease, transform .4s ease, opacity .2s ease; }
.header .bx span:first-child  { top: 0px; }
.header .bx span:nth-child(2) { top: 10px; }
.header .bx span:last-child   { top: 20px; }

.header .bx.ativo span:first-child { top: 10px; transform: rotate(45deg); }
.header .bx.ativo span:nth-child(2) { opacity: 0; }
.header .bx.ativo span:last-child { top: 10px; transform: rotate(-45deg); }
.nav-menu-mobile { display: none; overflow: hidden; background: var(--branco); border-top: 1px solid rgba(0,0,0,.08); box-shadow: 0 8px 24px rgba(0,0,0,.07); }
.nav-menu-mobile .link { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 54px; font: 700 14px / 1 modelica; text-transform: uppercase; letter-spacing: .04em; color: var(--preto); cursor: pointer; border-bottom: 1px solid rgba(0,0,0,.06); position: relative; transition: background .2s ease, padding-left .25s ease; }
.nav-menu-mobile .link:last-child { border-bottom: none; }
.nav-menu-mobile .link::before { content: ''; position: absolute; left: 0; top: 0; width: 3px; height: 100%; background: var(--cor1); transform: scaleY(0); transform-origin: center; transition: transform .25s ease; }
.nav-menu-mobile .link:hover::before,
.nav-menu-mobile .link.ativo::before { transform: scaleY(1); }
.nav-menu-mobile .link:hover,
.nav-menu-mobile .link.ativo { background: rgba(0,0,0,.025); padding-left: 30px; }
.nav-menu-mobile .link::after { content: '→'; font-size: 12px; opacity: 0; transform: translateX(-6px); transition: opacity .25s ease, transform .25s ease; }
.nav-menu-mobile .link:hover::after,
.nav-menu-mobile .link.ativo::after { opacity: .4; transform: translateX(0); }


@media(max-width: 1260px){ 
    .header .nav-menu,
    .header { gap: 20px; }
    .nav-menu .link { font-size: 14px; }
}

@media(max-width: 990px){
    .header .bx { display: flex; }
    .header .bx span { width: 35px; height: 1px; background: var(--preto); }
    .header .nav-menu { position: fixed; display: none; }
    .header { justify-content: space-between; }
    .header-top .link.zap, 
    .header-top .link { font-size: 12px; }

    .header-top-bg .header-top { justify-content: center; }

}

@media (max-width: 500px) {
    .header-bg .header-top-bg { display: none; }
}