.header-bg { position: sticky; top: 0; z-index: 999; background: var(--branco); --scroll-progress: 0%; }
.header-bg::before { content: ""; position: absolute; top: 0; left: 0; height: 4px; width: var(--scroll-progress); background: var(--cor1); transition: width .12s linear; }
.header { position: relative; display: flex; align-items: center; gap: 65px; min-height: 110px; }

.header .menu-toggle { display: none; width: 44px; height: 44px; border: 1px solid #ddd; border-radius: 6px; background: #fff; cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; margin-left: auto; }
.header .menu-toggle span { width: 20px; height: 2px; background: var(--cor2); transition: transform .2s ease, opacity .2s ease; }
.header-bg.menu-open .menu-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.header-bg.menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
.header-bg.menu-open .menu-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.header .nav-bar { display: flex; flex-direction: column; gap: 8px; flex: 1; height: 100%; align-items: flex-end; justify-content: end; }
.header .nav-bar .links { display: flex; width: 100%; align-items: flex-end; height: 60px; }
.header .nav-bar .link { flex: 1; text-align: center; display: flex; align-items: center; height: 55px; justify-content: center; border-bottom: 8px solid transparent; transition: .3s ease; }
.header .nav-bar .link:hover,
.header .nav-bar .link.is-active { border-bottom: 8px solid var(--cor1); font-weight: 800; }
.header .nav-bar .link a { font: 15px montserrat; color: var(--cor2); display: flex; height: 100%; width: 100%; align-items: center; justify-content: center; }
.header .nav-bar .link.is-active a { font-weight: 800; }
.header .whats-href { display: flex; align-items: center; gap: 8px; margin-left: auto; color: var(--preto); font: 20.11px montserrat; transition: .4s ease; }
.header .whats-href:hover { color: var(--cor2); }
.header .img { display: flex; align-items: center; justify-content: center; }
 .header .mobile-menu { display: none; }


@media (max-width: 1250px) {
    body.header-menu-open { overflow: hidden; }
    .header { min-height: 86px; gap: 20px; }
    .header .logo img { width: 220px; height: auto; }
    .header .mobile-menu { display: flex; margin-left: auto; gap: 10px; }
    .mobile-menu .link-tel { display: flex; align-items: center; justify-content: center; }
    .header .menu-toggle { display: flex; }
    .header .nav-bar { display: none; position: absolute; top: calc(100% + 10px); left: 0; right: 0; z-index: 20; background: #fff; border: 1px solid #ececec; box-shadow: 0 16px 32px rgba(0, 0, 0, .09); padding: 16px; height: auto; border-radius: 10px; align-items: stretch; gap: 14px; }
    .header .nav-bar.is-open { display: flex; }
    .header .whats-href { margin-left: 0; justify-content: flex-start; font-size: 16px; }
    .header .nav-bar .links { flex-direction: column; align-items: stretch; height: auto; gap: 2px; }
    .header .nav-bar .link { width: 100%; height: auto; justify-content: flex-start; border-bottom: 0; border-left: 4px solid transparent; padding: 10px 12px; }
    .header .nav-bar .link:hover, 
    .header .nav-bar .link.is-active { border-bottom: 0; border-left-color: var(--cor1); }
    .header .nav-bar .link a { justify-content: flex-start; font-size: 16px; }
}
