.header-bg {background-color: #fff;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);position: sticky;top: 0;z-index: 1000; border-top: 4px solid var(--cor2); }
.header {display: flex;justify-content: space-between;align-items: center; gap: 45px;}
.header .logo { display: flex; align-items: center; }
.header .contatos { display: flex; gap: 50px; }
.header .contato-item { display: flex; align-items: center; gap: 10px; transition: 0.3s; }
.header .contato-item:hover { opacity: 0.7; }
.header .menu { display: flex; flex-direction: column; flex: 1; gap: 20px;padding-top: 20px; }
.header .menu .close { display: none; }
.header .menu .top { display: flex; align-items: center; justify-content: space-between; }
.header .menu .bottom { display: flex; align-items: center; height: 50px; background: var(--cor1); position: relative; }
.header .menu .bottom::after { width: calc(100vw - var(--width) + 100% - (100vw - var(--width)) / 2 - var(--scrollbarWidth) + var(--scrollbarWidth) / 2);position: absolute; content: ''; height: 50px; background: var(--cor1); z-index: -1; }
.header .menu .bottom > .link > p { position: relative; }
.header .menu .bottom > .link > p::after { position: absolute; content: ''; top: 100%; transform: translate(-50%, 0); transform-origin: left; transition: .4s ease; left: 50%; width: 0%; height: 2px; background: var(--branco); }
.header .menu .bottom .link.ativo p::after,
.header .menu .bottom .link:hover p::after { width: 80%; }
.header .menu .contato-item { font: 16.44px montserrat; color: #4F4F4F; }
.header .menu .bottom > .link { flex: 1 1 auto; text-align: center; font: 15px montserrat; color: var(--branco);  }
.header .menu .email-href .texto span { color: var(--cor2); font: 12.52px montserrat;}
.header .menu .whats-href .texto span { color: var(--zap); font: 12.52px montserrat;}
.header .bx { display: none; position: relative; height: 3px; background: var(--cor1); width: 50px; }
.header-bg .overlay { position: fixed; top: 0; left: -200%; transition: .4s ease; z-index: 999; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.18); }
.header-bg .overlay.show { left: 0; }
.header .btn-parent { display: flex; gap: 10px; }
.header .logo-mobile { display: none; }
.header .my-account { display: flex; align-items: center; justify-content: center; }
.my-account .img-account { width: 35px; height: 35px; background: var(--cor1); border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.my-account .img-account img { width: 15px; height: 15px; object-fit: contain; }
.my-account .btn-my-account { display: flex; align-items: center; gap: 10px; font: 15px montserrat; color: var(--preto); }
.btn-login { cursor: pointer; }
@media(max-width: 1250px){
    .header { padding: 15px 0; }
    .header .contatos { padding: 0 20px; gap: 10px; width: 100%; box-sizing: border-box; }
    .header .menu .contato-item { font-size: 12px; }
    .header .menu .btn-saiba { margin-top: 20px; }
    .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: 75px 0 20px; box-sizing: border-box; overflow-y: auto; }
    .header .logo { width: 200px; }
    .header .logo img { width: 100%; height: 100%; object-fit: contain; }
    .header .menu.show { left: 0; }
    .header .contatos,
    .header .menu .top { flex-direction: column; } 
    .header .menu .bottom { flex-direction: column; height: auto; }
    .header .bottom .link { padding: 15px 20px; width: 100%; box-sizing: border-box; }
    .header .bottom .link.ativo { background: var(--cor2); }
    .header .menu .bottom > .link > p { width: max-content; }
    .header .menu .close { width: 30px; height: 30px; display: block; 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(--cor2); z-index: 999; transform: rotate(45deg); }
    .header .menu .close::after { transform: rotate(-45deg); }
    .header .logo-mobile { display: block; position: absolute; top: 11px; left: 10px; }
    .header .btn-parent { width: 100%; justify-content: flex-start; padding: 0 20px; box-sizing: border-box; }
}