:root {
    --link-hover: #EB1820;
    --bg-logo-mb: var(--branco);
}

.header .telefone-mb {display: none; justify-content: center; align-items: center; width: 30px; height: 30px; transition: 0.2s;}
.header .telefone-mb:hover {transform: scale(1.16);}
.header .telefone-mb svg {width: 100%; height: 100%;}

.header .divisao {height: 100%; display: flex; flex-direction: column; width: 100%; max-width: 810px;}
.header .contatos {display: flex; justify-content: space-between; padding: 23px 0 18px; gap: 10px;}
.header .contato {display: flex; gap: 6px; font: 400 15px/1 var(--montserrat); color: var(--cinza1); transition: .3s; white-space: nowrap;}
.header .contato b {font-size: 17.75px; font-weight: 700;}
.header .instagram .img {width: 19px; height: 19px; transition: .3s;}
.header .instagram img {width: 100%; height: 100%; object-fit: contain;}

.header .contato.whatsapp:hover {color: var(--zap);}
.header .contato.email:hover {color: var(--vermelho1);}
.header .instagram:hover .img {transform: scale(1.02);}
.header .contato.endereco svg {margin-top: -3px;}

.header-bg {background-color: var(--branco);box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);position: sticky;top: 0; container-type: inline-size; container-name: bg; position: relative;}
.header-bg::after {content: ''; width: 100%; height: 3px; background: var(--preto1); position: absolute; top: 0; left: 0;}
.header {display: flex;justify-content: space-between;align-items: flex-start;padding: 0 0;container-type: inline-size; container-name: hd; gap: 2%; align-items: center;}
.header .logo { display: flex; align-items: center; max-width: 307px; width: 100%; height: auto;}
.header > .logo { height: 100%; max-height: 102px; height: 100%; max-height: 57px; width: 100%; max-width: 307px; min-width: 150px;}
.header .logo .img {height: 100%; width: 100%; display: flex;}
.header .logo img {height: 100%; width: 100%; object-fit: contain;}
.header .info {display: flex; flex-direction: column; justify-content: center; position: relative; gap: 19px; width: 100%;}
.header .info .links {gap: 35px; }
.header .info .links, .header .info .contatos, .header .info .redes {justify-content: space-between; display: none;}
.header .info .contatos {gap: 45px;}
.header .info .contatos .icone {width: 24px; height: 24px;}
.header .info .contatos .icone svg {width: 100%; height: 100%;}
.header .info .contatos .contato {display: flex; align-items: center; gap: 10px; transition: var(--transition-df);}
.header .info .contatos .contato.whatsapp {font: 400 18.8px var(--montserrat); color: var(--branco); min-width: max-content;}
.header .info .contatos .contato.whatsapp:hover {color: var(--zap);}
.header .info .contatos .contato.email {font: 400 15.8px var(--montserrat); color: var(--branco); min-width: max-content;}
.header .info .contatos .contato.email:hover {color: var(--amarelo);}
.header .info .line {width: calc((100% + (100vw - 100cqw) / 2) - var(--scrollbarWidth)); position: absolute;height: 2px; background: var(--vermelho2); left: 0; top: 0;}

.header .info .redes {gap: 10px;}
.header .info .redes .rede .icone {border-radius: 5px; display: flex; justify-content: center; align-items: center; width: 35.53px; height: 33.93px; transition: var(--transition-df);}
.header .info .redes .rede.facebook .icone {background: var(--azul);}
.header .info .redes .rede.instagram .icone {background: var(--insta-color);}
.header .info .redes .rede.youtube .icone {background: var(--vermelho);}
.header .info .redes .rede.tiktok .icone {background: var(--preto); box-shadow: 0 0 7px 1px #dad9d954;}
.header .info .redes .rede.facebook svg {width: 11px; height: 21px;}
.header .info .redes .rede.instagram svg {width: 21px; height: 21px;}
.header .info .redes .rede.youtube svg {width: 21px; height: 18px;}
.header .info .redes .rede.tiktok svg {width: 21px; height: 18px;}
/* .header .info .redes .rede:hover .icone {transform: scale(.95);} */
.header .info .redes .rede.youtube:hover .icone {box-shadow: 0 0 8px 2px #f0bbbb;}
.header .info .redes .rede.facebook:hover .icone {box-shadow: 0 0 9px 2px #0088ff;}
.header .info .redes .rede.instagram:hover .icone {box-shadow: 0 0 9px 2px #ff0400;}
.header .info .redes .rede.tiktok:hover .icone {box-shadow: 0 0 9px 2px #dad9d9;}

.nav-menu { display: none;  position: relative;}
.nav-list { display: flex; list-style: none; gap: 15px; margin: 0; padding: 0; justify-content: space-between; gap: 15px; justify-content: space-between;}
.nav-list li .page { text-decoration: none; color: var(--cinza1); font: 400 15px var(--montserrat); transition: color 0.3s ease; position: relative; padding: 27px 10px 20px 9px; display: flex;}
.nav-list li .page::after { content: ''; position: absolute; width: 0; height: 5px; top: 0; left: 0; background-color: var(--link-hover); transition: width 0.3s ease;}
.nav-list li .page:hover::after, .nav-list li .page.active::after { width: 100%; }
.nav-list li:hover .page::after { width: 100%; }

.nav-list > li {position: relative;}
.nav-list .sub-links {position: absolute;top: 100%;left: -11px;width: 100%;background: var(--preto);z-index: 100;width: max-content; transform: scaleY(0); transform-origin: top; transition: transform 0.2s;}

.nav-list li:hover .sub-links {transform: scaleY(1);}
.nav-list a.sub-page {border-left: 2px solid var(--amarelo); background: var(--preto); display: flex; padding: 17.5px; font: 400 15px / 1.3em var(--montserrat); color: var(--branco); transition: 0.16s;}
.nav-list a.sub-page:hover, .nav-list a.sub-page.active {background: var(--amarelo); color: var(--preto);}


.header .mobile-menu .logo { padding: 65px 20px 40px; max-width: 1000cqw; justify-content: center; align-items: center; position: sticky; top:0; background: var(--bg-logo-mb); z-index: 1000;}
.header .mobile-menu .logo .img {max-width: 180px;}
/* .header .mobile-menu .page.cat { border-bottom: none;} */
.header .mobile-menu .sub-categorias ul {gap: 10px; display: flex; flex-direction: column;}
.header .mobile-menu .sub-categorias .sub-page {padding: 0.5rem; display: flex; font-weight: 400; color: #9c957e; text-transform: capitalize; border-bottom: 1px solid #76767645; background: none; border-left: none;}
.header .mobile-menu .sub-categorias .sub-page:hover, .header .mobile-menu .sub-categorias .sub-page.active {color: var(--amarelo);}
.menu-hamburger { display: flex; flex-direction: column; justify-content: space-between; width: 43px; height: 40px; cursor: pointer; z-index: 1003; transition: all 0.3s ease; padding: 8px;}
.menu-hamburger span { display: block; width: 100%; height: 3px; background: var(--preto); border-radius: 3px; transition: all 0.3s ease;}
.menu-hamburger.active {border-radius: 100px; background: #a4a4a412;}
.menu-hamburger.active span {background: var(--preto); }
.menu-hamburger.active span:nth-child(1) { transform: translateY(10.5px) rotate(45deg); }
.menu-hamburger.active span:nth-child(2) { opacity: 0; }
.menu-hamburger.active span:nth-child(3) { transform: translateY(-10.5px) rotate(-45deg); }
.mobile-menu { position: fixed; top: 0; right: -120%; width: 100%; max-width: 400px; height: 100vh; height: 100dvh; background-color: #fff; box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1); transition: right 0.3s ease; z-index: 1002; overflow-y: auto; scroll-behavior:smooth;  display: flex; flex-direction: column;}
.mobile-menu:hover {transition: 0.1s;}
.mobile-menu.active { right: 0; z-index: 1002;}
.mobile-nav { padding: 1.5rem 1.3rem 1rem;}
.mobile-nav ul { list-style: none; margin: 0; padding: 0; flex-direction: column;}
.mobile-nav ul li .page::after {bottom: 0; top: unset; height: 1px;}
.mobile-nav ul li .page { text-decoration: none; color: #9c957e; font-size: 14px; font-weight: 500; display: block; padding: 15px 0; transition: color 0.3s ease padding-left 0.3s ease; font-family: montserrat; border-bottom: 1px solid #76767645; text-transform: uppercase;}
.mobile-nav ul li .page:hover, .mobile-nav ul li .page.active {color: var(--link-hover); border-bottom: 1px solid;}
.mobile-nav ul li .sub-links {position: static; transform: scaleY(1); padding: 10px 13px 5px; width: 100%; background: none;}


.mobile-menu .links {display: flex; flex-direction: column; padding: 1rem; margin-top: auto;}
/* .mobile-menu .links .contatos {display: flex;} */
.mobile-menu .links .contatos {display: flex; flex-direction: column; gap: 15px;}
.mobile-menu .links .contatos .contato {display: flex; gap: 10px; font: 400 14px var(--montserrat); color: var(--preto); transition: var(--transition-df); width: fit-content;}
.mobile-menu .links .contatos .contato span {font: 600 12px var(--montserrat); color: var(--preto); display: block; margin-top: 4px;}
.mobile-menu .links .contatos .contato .icone { width: 35px; height: 35px; flex: 0 0 35px; display: flex; align-items: center; justify-content: center; border-radius: 5px; position: relative; overflow: hidden; transition: transform var(--transition2, .4s), box-shadow var(--transition2, .4s);}
.mobile-menu .links .contatos .contato.whatsapp span {color: var(--zap);}
.mobile-menu .links .contatos .contato.instagram span {color: #EA0165;}
.mobile-menu .links .contatos .contato.whatsapp:hover .icone {box-shadow: 0 0 8px 2px #54ea51;}
.mobile-menu .links .contatos .contato.email:hover .icone {box-shadow: 0 0 8px 2px #f6cc59;}
.mobile-menu .links .contatos .contato.email span {color: var(--amarelo);}
.mobile-menu .links .contatos .contato.whatsapp .icone {background: var(--zap);}
.mobile-menu .links .contatos .contato.email .icone {background: var(--amarelo);}
.mobile-menu .links .contatos .contato .icone svg { width: 15px; height: 15px;}
.mobile-menu .links .contatos .contato .icone svg path { fill: var(--branco);}
.mobile-menu .links .redes {display: flex; gap: 15px;}
.mobile-menu .links .rede .icone {width: 38px; height: 38px; display: flex; justify-content: center; align-items: center; border-radius: 5px; position: relative; transition: var(--transition-df);}
.mobile-menu .links .rede svg {width: 15px; height: 15px;}
.mobile-menu .links .rede.facebook .icone {background: var(--azul);}
.mobile-menu .links .rede.instagram .icone {background: var(--insta-color);}
.mobile-menu .links .rede.youtube .icone {background: var(--vermelho);}
.mobile-menu .links .rede.tiktok .icone {background: var(--preto); box-shadow: 0 0 7px 1px #dad9d954;}

.mobile-menu .links .rede.youtube:hover .icone {box-shadow: 0 0 8px 2px #fb4545;}
.mobile-menu .links .rede.facebook:hover .icone {box-shadow: 0 0 8px 2px #409eec;}
.mobile-menu .links .rede.instagram:hover .icone {box-shadow: 0 0 8px 2px #f25edc;}
.mobile-menu .links .rede.tiktok:hover .icone {box-shadow: 0 0 8px 2px #868585;}

.header .telefone-mobile {margin-right: 15px;}

.menu-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-color: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 1001;}
.menu-overlay.active { opacity: 1; visibility: visible; }
@media (min-width: 991px) { 
    .nav-menu { display: block;}
    .menu-hamburger { display: none; }
    .mobile-menu { display: none; }
    .header .info .links, .header .info .contatos, .header .info .redes{ display: flex;} 
    header > .form-search.form-mobile {display: none;}
    .header .telefone-mobile {display: none;}
}
@media (max-width: 990px) {
    .header-bg {position: sticky; z-index: 2000;}
    header > .form-search.form-mobile {display: block;}
    .smart-filter .smart-filter-header, .smart-filter-results .categoria-header {color: var(--branco);}
    .smart-filter {max-width: 100%; width: 100%;}
    header .form-search button {padding: 0 15px;}
    header .form-search {height: 42px; margin-top: 20px;}
    header .form-search input {height: 100%;}
    .header-bg {padding: 1rem 0;}
    .header { padding: 0 1rem; align-items: center; gap: 1rem;}
    .header > .logo img { max-width: 170px;}
    .header .info {width: fit-content; display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 10px;}
    .header > .logo {margin: 0; height: 80px;}
    .header .telefone-mb {display: flex;}
    .header .contatos {display: none;}
    .header .divisao {width: unset; max-width: unset;}
}

@media (max-width: 600px) {
    .header .telefone-mobile {margin-right: 0;}
}