.header-bg { border-top: 5px solid var(--cor1); }
.header .logo img { aspect-ratio: 300/117; padding: 15px 0;}
.header { display: flex; gap: 80px; }
.header img { display: block; }
.header .menu { width: 100%; display: flex; flex-direction: column; }
.header .top { display: flex; align-items: center; justify-content: space-between; padding: 18px 0; }
.header .top > a { display: flex; align-items: center; gap: 10px; font: 15px montserrat; }
.header .top .whats-href { font: 22px montserrat; color: #292929; }

.header .bottom { display: flex; align-items: center; height: 100%; position: relative; }
.header .bottom::before { content: ''; position: absolute; top: 0; left: 0; z-index: -1; width: calc(100vw - var(--width) + 100% - (100vw - var(--width)) / 2 - var(--scrollbarWidth) + var(--scrollbarWidth) / 2); height: 5px; background: #E9E9E9; }
.header .bottom .link { display: flex; cursor: pointer; position: relative; align-items: center; height: 100%; width: 150%; justify-content: center; font: 15px montserrat;padding: 0 10px; box-sizing: border-box; white-space: nowrap; transition: background .2s ease, color .2s ease; }
.header .bottom > .link >  p { position: relative; }
.header .bottom > .link  > p::after { content: ''; position: absolute; top: 100%; left: 0; width: 0; height: 2px; background: var(--cor2); transition: .2s; }
.header .bottom > .link.ativo  > p::after,
.header .bottom > .link:hover  > p::after { width: 100%; }
.header .bottom .img-sub { transform: scaleX(-1); }
.header .bottom .subpages { position: absolute;  top: 100%; left: 0; z-index: 9999; transform: scaleY(0); transform-origin: top; transition: transform .2s ease; display: flex; flex-direction: column; }
.header .bottom .subpages .link { display: flex; height: 45px; align-items: center; justify-content: space-between; background: var(--cor1); color: var(--branco); transition: background .2s ease, color .2s ease; }
.header .bottom .subpages .link.ativo,
.header .bottom .subpages .link:hover { background: var(--cor2); color: var(--branco); }
.header .bottom .link:hover .subpages { transform: scaleY(1); }
.header .bx { display: none; position: relative; height: 3px; background: var(--cor1); width: 50px; }

@media(max-width: 1250px){
    .header { gap: clamp(20px, 5vw, 60px); }
    .header .top > a { font-size: 14px; }
    .header .top .whats-href { font-size: 18px; }
}

@media(max-width: 990px){
    .header { justify-content: space-between; align-items: center; }
    .header .bx { display: block; box-shadow: 0 -10px 0 0 var(--cor1), 0 10px 0 0 var(--cor1); }
    .header .logo img { width: 200px; padding: 5px 0; }
    .header .menu { position: fixed; justify-content: flex-end; top: 0; left: -100%; transition: .4s ease; flex-direction: column-reverse; height: 100vh; z-index: 999; background: var(--branco); width: 80%; max-width: 300px; box-shadow: 2px 0 10px rgba(0,0,0,0.1); padding: 20px 0; box-sizing: border-box; overflow-y: auto; }
    .header .menu.show { left: 0; }
    .header .menu.show::before { content: ''; position: fixed; top: 0; left: 0; z-index: -1; width: 100vw; height: 100vh; }
    .header .menu .close { width: 30px; height: 30px; position: absolute; top: 15px; right: 15px; cursor: pointer; }
    .header .menu .close::before,
    .header .menu .close::after { content: ''; position: absolute; top: 50%; left: 0; width: 100%; height: 2px; background: var(--cor1); transform: rotate(45deg); }
    .header .menu .close::after { transform: rotate(-45deg); }

    .header .top { flex-direction: column; align-items: flex-start; gap: 20px; padding: 20px; box-sizing: border-box; }
    .header .bottom { flex-direction: column; padding: 0; box-sizing: border-box; height: auto; align-items: flex-start; width: 100%; margin-top: 20px; }
    .header .bottom::before { display: none; }
    .header .bottom .link { width: 100%; height: auto; padding: 15px 20px; justify-content: flex-start; border-bottom: 1px solid #eee; flex-wrap: wrap; }
    .header .bottom .link > p { padding: 10px 0; }
    .header .bottom .subpages { position: static; transform: none; width: 100%; display: none; box-shadow: none; background: transparent; gap: 0; }
    .header .bottom .subpages .link { background: transparent; color: var(--preto); border: none; padding: 10px 15px; height: auto; font-size: 14px; }
    
    .header .bottom .link.ativo { background: transparent; color: var(--cor2); font-weight: 700; }
    .header .bottom .link.ativo:hover { background: transparent; color: var(--cor2); }

    .header .bottom .link.mobile-active .subpages { display: flex; }
    .header .bottom .link:hover .subpages { transform: none; }
    
    .header .bottom .link:has(.subpages)::after { content: '+'; font-size: 18px; color: var(--cor1); transition: .3s; position: absolute; right: 10px; top: 25px; }
    .header .bottom .link.mobile-active::after { transform: rotate(45deg); }
}