.header-bg {border-top: 2px solid var(--cor1); padding: 10px 0 ;}
.header {display: flex; align-items: center; justify-content: space-between; gap: 85px;}
.header .contatos,
.header .contatos > *,
.header .menu .pages {display: flex; align-items: center;}
.header .menu .pages .page-parent {font: 300 17px var(--font1); color: var(--cor2); position: relative;}
.header-bg.produto-ativo .menu .pages .page-parent.hover-produtos,
.header .menu .pages .page-parent.active{font-weight: 700; color: var(--cor1);}
.header .menu .pages .page-parent::after {content: ''; position: absolute; bottom: -2px; left: 0; width: 0%; height: 2px; background: var(--cor1); transition: var(--transition2);}
.header .menu .pages .page-parent.active::after,
.header-bg.produto-ativo .menu .pages .page-parent.hover-produtos::after,
.header .menu .pages .page-parent:hover::after {width: 100%;}
.header .menu .pages .page-parent .text-wrapper {position: relative;}
.header .menu .pages .page-parent .text-wrapper .hover {position: absolute; top: 0; left: 0; width: 0; height: 100%; transition: var(--transition2); overflow: hidden; white-space: nowrap; color: var(--cor1);} 
.header .menu .pages .page-parent:hover .text-wrapper .hover {width: 100%;}

.header .contatos > * {gap: 8px; font: 300 17px var(--font1);}
.header .contatos > .tel-href {font-weight: 400; white-space: nowrap;}
.header .contatos > .tel-href b {font-weight: 700;}
.header .menu {width: 100%;}
.header .menu .pages, 
.header .contatos {width: 100%; justify-content: space-between; gap: 5px;}
.header .menu .menu-mobile {display: none;}
.header .bx {position: relative; width: 30px; height: 3px; background: var(--cor2); cursor: pointer; display: none;}
.header .close-btn {display: none;}
.header .bx::before,
.header .bx::after {content: ''; position: absolute; width: 100%; height: 3px; background: var(--cor2); cursor: pointer;}
.header .bx::before {top: -10px;}
.header .bx::after {top: 10px;}

.header .contatos-mobile {display: none; padding: 0 0 0 20px}
.header .contatos-mobile a {display: flex; align-items: center; gap: 8px; font: 300 17px var(--font1);}

@media(max-width: 1250px){
    .header {gap: 30px;}
}

@media(max-width: 990px){
    .header .menu .pages .page-parent .text-wrapper {height: 100%; width: 100%; display: flex; align-items: center;}
    .header .menu .pages .page-parent .text-wrapper .hover {display: none;}
    .header .menu .pages .page-parent.active {color: var(--branco); background: var(--cor1)}
    .header .menu .pages .page-parent::after {display: none;}
    .header .bx {display: block;}
    .header .contatos {display: none;}
    .header .contatos-mobile {display: flex; flex-direction: column; gap: 10px; padding: 20px 0 0 20px;}

    .header .close-btn {font: 700 20px var(--font1); color: var(--branco); background: var(--cor1); position: absolute; top: 0; right: 0; width: var(--close); height: var(--close); display: flex; align-items: center; justify-content: center; cursor: pointer;}
    .header .menu .menu-mobile {display: flex; align-items: flex-start; justify-content: flex-start; padding: 20px; align-self: flex-start;}
    .header .menu {position: fixed; top: 0; left: -200%; width: 100%; height: 100%; background: #00000052; z-index: 1000; transition: var(--transition2);}
    .header .menu.ativo {left: 0;}
    .header .menu .pages {flex-direction: column; gap: 0px; width: calc(100% - var(--close));justify-content: unset; align-items: flex-start; background: var(--branco); height: 100%; box-sizing: border-box;}
    .header .menu .page-parent {padding-left: 20px;border-top: 1px solid var(--cor2); box-sizing: border-box; height: 45px; display: flex; align-items: center; width: 100%;}
    .header .menu .page-parent:nth-child(5) {border-bottom: 1px solid var(--cor2);}
}