.header-bg {border-top: 4px solid var(--cor1); padding: 15px 0; position: relative;}
.header-bg::after {position: absolute;content: ''; right: 0; top: 55%; background: var(--cor3); width: 62%; height: 2px;}
.header-bg .header,
.menu-parent .menu-top,
.menu-parent .pages{display: flex;}

.header-bg .header {gap: 35px;}
.header .form-search {background: var(--cor3); color: var(--preto); display: flex; border-radius: 6px; position: relative; flex: 1 1 auto; max-width: 345px; height: 30px; justify-content: space-between; box-sizing: border-box;}
.header .form-search input::placeholder {color: var(--preto);}
.form-search input {border-radius: 6px;}
.form-search button {border-radius: 6px;}
.form-search input, 
.form-search button {border: none; outline: none; background: var(--cor3)}
.form-search input {padding: 0 0 0 10px; width: 100%;}
.form-search button {padding: 0 10px 0 0;}

.header .menu-parent {width: 100%; display: flex; flex-direction: column; gap: 15px;}
.header .menu-top {align-items: center; justify-content: space-between;}
.header .menu-bottom {height: 100%;}
.header .pages {height: 100%; align-items: center; justify-content: space-between; font: 300 16px ubuntu;}

.header .btn-menu {display: flex; align-items: center; background: var(--cor2); font: 400 15px ubuntu; color: var(--branco); border-radius: 6px; height: 30px; padding: 0 10px; gap: 5px;}
.header .whats-href {display: flex; align-items: center; font: 400 17.34px ubuntu; color: var(--preto); gap: 5px;}
.header .redes {display: flex; align-items: center; gap: 10px;}
.header .redes a {height: 25px; aspect-ratio: 1/1; display: flex; align-items: center; justify-content: center;}
.header .redes .facebook {background: #0069CB; border-radius: 6px;}
.header .bx-bg,
.header .logo.mobile,
.header .form-mobile {display: none;}
.header .menu-top-parent {display: flex; flex-direction: column; justify-content: space-between; height: 100%; gap: 20px;}
.header .header-border {height: 3px; background: var(--cor3); top: 56%;}
.header .close-btn {display: none;}
.header .page-href {position: relative;}    
.header .page-href.ativo {color: var(--cor2); font-weight: 700;}
.header .page-href::after {position: absolute; content: ''; height: 3px;  width: 0%; top: -11px; z-index: 2; left: -15%; background: var(--cor2); transition: var(--transition2);}
.header .page-href:hover::after,
.header .page-href.ativo::after {width: 125%;}


@media(max-width: 1250px){
    .header .pages > li {position: relative;}
    .header .page-href.ativo {position: static;}
    .header .page-href.ativo::after {width: 100%; left: 0; top: -3px;}
    .header-bg::after {display: none;}
    .header .menu-top .form-search {display: none;}
    .header .menu-parent {position: fixed; background: rgba(0, 0, 0, 0.20); display: block; height: 100vh; width: 100vw; top: 0; left: -200%; z-index: 99999; gap: 0; transition: var(--transition2);}
    .header .menu-parent.ativo {left: 0;}
    .header .menu-parent .menu-top-parent {height: 100%; width: calc(100% - var(--close)); flex-direction: column-reverse; justify-content: flex-end;padding: 20px 0; box-sizing: border-box; background: var(--cor3);}
    .header .logo.mobile,
    .header .menu-parent.ativo {display: flex;}
    .header .logo.mobile {align-items: center; justify-content: center;}
    .header .menu-top,
    .header .menu-bottom {width: 100%;}

    .header .close-btn {position: absolute;right: 0; top: 0; width: var(--close); height: auto; aspect-ratio: 1/1; background: #e10000; display: flex; align-items: center; justify-content: center; color: var(--branco); font:700 16px montserrat;}
    .header .pages {flex-direction: column; justify-content: flex-start; height: max-content; align-items: flex-start;}
    .header .pages li {padding: 10px 20px; box-sizing: border-box; border: 1px solid rgba(0, 0, 0, 0.17); width: 100%; border-left: none; border-right: none;}
    .header .menu-bottom {height: max-content;}
    .header .menu-top {flex-direction: column; align-items: flex-start; gap: 20px; padding: 0 20px;}
    .header .bx-bg {display: block;}
    .header .bx {position: relative; display: block; width: 35px; height: 2px; background: var(--preto);} 
    .header .bx::after,
    .header .bx::before {position: absolute; content: ''; display: block; width: 100%; height: 2px; background: var(--preto);}
    .header .bx::after {top: 8px;}
    .header .bx::before {bottom: 8px}
    .header-bg .header {display: grid; grid-template-columns: max-content max-content; justify-content: space-between; align-items: center; gap: 15px;}
    .header .form-mobile {width: 100%; display: block; grid-column: 1/-1; max-width: none;}
    .header .form-mobile .form-search {width: 100%; max-width: none;}
    .header .form-mobile .smart-filter {width: 100%; box-shadow: 0 0 20px -2px rgba(0, 0, 0, 0.1);}
}

@media(max-width: 500px){
    .header .logo img {width: 240px; aspect-ratio: 310/70; height: auto;}
}