.header-bg{background: var(--preto);box-shadow: 0 2px 8px rgba(0,0,0,.15);border-top: 2px solid var(--cor1);}
.header{display: flex;align-items: center;justify-content: space-between;gap: 38px;padding: 30px 0;}
.header > a{flex: 0 0 auto;}
.header .logo{display: flex;align-items: center;}
.header .logo img{display: block;width: min(260px,100%);height: auto;}

.nav-menu{display: none;flex: 1 1 auto;max-width: 820px;}
.nav-menu .links{display: flex;align-items: center;gap: 72px;padding: 0 0 30px;position: relative;}
.nav-menu .links .link{display: flex;align-items: center;gap: 11px;transition: opacity var(--transition2);}
.nav-menu .links .link img{display: block;flex: 0 0 auto;}
.nav-menu .links .link p{font: 500 15px/1 var(--font1);color: var(--branco);}
.nav-menu .links .link.whats-href p{font-size: 19px; font-weight: 700;}
.nav-menu .links .link:hover{opacity: .8;}
.nav-menu .links .links-border{display: block;left: 0;bottom: 0;height: 1px;background: rgba(255,211,0,.45);pointer-events: none;}

.nav-list{display: flex;align-items: center;list-style: none;gap: 54px;margin: 0;padding: 28px 0 0;}
.nav-list li{position: relative;}
.nav-list li a{display: block;position: relative;text-decoration: none;color: var(--branco);font: 500 17px/1.1 var(--font1);transition: color var(--transition2);position: relative;}
.nav-list li a:hover{color: var(--cor1);}
.nav-list li a::after{content: '';position: absolute;left: 0;top: -30px;width: 0;height: 4px;background: var(--cor1);transition: width var(--transition2);}
.nav-list li a:hover::after,
.nav-list li.ativo a::after{width: 100%;}

.nav-list li.has-submenu{position: relative;}
.submenu-pneus{position: absolute;left: 50%;top: calc(100% + 2px);transform: translateX(-50%) translateY(8px);display: grid;grid-template-columns: repeat(2,minmax(200px,1fr));gap: 20px;padding: 24px;background: #111;border: 1px solid rgba(255,211,0,.35);border-radius: 14px;min-width: 460px;box-shadow: 0 14px 35px rgba(0,0,0,.35);opacity: 0;visibility: hidden;pointer-events: none;transition: opacity var(--transition2),transform var(--transition2),visibility var(--transition2);z-index: 1002;}
.submenu-pneus::before{content: '';position: absolute;top: -7px;left: 50%;transform: translateX(-50%) rotate(45deg);width: 14px;height: 14px;background: #111;border-top: 1px solid rgba(255,211,0,.35);border-left: 1px solid rgba(255,211,0,.35);}
.nav-list li.has-submenu:hover .submenu-pneus,
.nav-list .submenu-pneus:hover,
.nav-list li.has-submenu:focus-within .submenu-pneus{opacity: 1;visibility: visible;transform: translateX(-50%) translateY(0);pointer-events: all;}
.nav-list li.has-submenu::after{content:'';position:absolute;left:0;top:100%;width:100%;height:18px;}
.submenu-coluna{display: flex;flex-direction: column;gap: 12px;}
.submenu-coluna.ativo-categoria .submenu-titulo{color: var(--cor1);}
.submenu-titulo{font: 700 15px/1.1 var(--font1);letter-spacing: .06em;text-transform: uppercase;color: var(--cor1);} 
.submenu-lista{display: flex;flex-direction: column;gap: 8px;list-style: none;margin: 0;padding: 0;}
.submenu-lista li a{font: 500 14px/1.35 var(--font1);color: #f2f2f2;padding-left: 12px;}
.submenu-lista li a::after{display: none;}
.submenu-lista li a::before{content: '-';position: absolute;left: 0;top: 0;color: var(--cor1);}
.submenu-lista li a.ativo-item{background-color: var(--cor1);color: var(--preto);border-radius: 4px;padding-left: 12px;font-weight: 700;}
.submenu-lista li a.ativo-item::before{color: var(--preto);}

/* Categorias de pneus */
.submenu-categorias-lista{display: flex;flex-direction: column;gap: 8px;list-style: none;margin: 0;padding: 0;}
.submenu-categoria{display: block;padding: 10px 14px;color: #f2f2f2;font: 500 14px/1.35 var(--font1);text-decoration: none;border-radius: 6px;transition: background-color var(--transition2),color var(--transition2);}
.submenu-categoria:hover{background-color: rgba(255,211,0,.15);color: var(--cor1);}
.submenu-categoria.ativo-submenu{background-color: var(--cor1);color: var(--preto);font-weight: 700;}

.mobile-submenu-grupo{display: flex;flex-direction: column;}
.mobile-submenu-grupo.ativo-categoria .mobile-submenu-titulo{color: var(--cor1);}
.mobile-submenu-titulo{font: 700 13px/1.1 var(--font1);text-transform: uppercase;color: var(--cor1);margin-bottom: 8px;}
.mobile-submenu ul{padding-left: 0;}
.mobile-submenu ul li{margin-bottom: 8px;}
.mobile-submenu ul li:last-child{margin-bottom: 0;}
.mobile-submenu ul li a{padding: 0 0 0 12px;color: #f7f7f7;font-size: 14px;line-height: 1.4;}
.mobile-submenu ul li a::before{content: '-';position: absolute;left: 0;top: 0;color: var(--cor1);}
.mobile-submenu ul li a.ativo-item{background-color: var(--cor1);color: var(--preto);border-radius: 4px;padding: 4px 8px 4px 12px;font-weight: 700;}
.mobile-submenu ul li a.ativo-item::before{color: var(--preto);}

.mobile-submenu-categorias-lista{display: flex;flex-direction: column;gap: 8px;list-style: none;margin: 0;padding: 0;}
.mobile-submenu-categoria{display: block;padding: 10px 14px;color: #f7f7f7;font: 500 14px/1.35 var(--font1);text-decoration: none;border-radius: 6px;transition: background-color var(--transition2),color var(--transition2);}
.mobile-submenu-categoria:hover{background-color: rgba(255,211,0,.15);color: var(--cor1);}
.mobile-submenu-categoria.ativo-submenu{background-color: var(--cor1);color: var(--preto);font-weight: 700;}


.menu-hamburger{display: flex;flex-direction: column;justify-content: space-between;width: 30px;height: 22px;cursor: pointer;margin-top: 16px;z-index: 1001;transition: all var(--transition2);}
.menu-hamburger span{display: block;width: 100%;height: 3px;background: var(--branco);border-radius: 3px;transition: all var(--transition2);}
.menu-hamburger.active span:nth-child(1){transform: translateY(9.5px) rotate(45deg);}
.menu-hamburger.active span:nth-child(2){opacity: 0;}
.menu-hamburger.active span:nth-child(3){transform: translateY(-9.5px) rotate(-45deg);}

.mobile-menu{position: fixed;top: 0;right: -100%;width: 100%;max-width: 360px;height: 100vh;background: var(--preto);box-shadow: -2px 0 14px rgba(0,0,0,.35);transition: right var(--transition2);z-index: 999;overflow-y: auto;}
.mobile-menu.active{right: 0;}
.mobile-nav{padding: 5rem 2rem 2rem;}
.mobile-nav ul{list-style: none;margin: 0;padding: 0;}
.mobile-nav ul li{margin-bottom: 1.2rem;}
.mobile-nav ul li a{display: block;padding: 12px 0;color: var(--branco);font: 500 16px/1.2 var(--font1);transition: color var(--transition2),padding-left var(--transition2);}
.mobile-nav ul li a:hover{color: var(--cor1);padding-left: .8rem;}
.mobile-link-wrap{display: flex;align-items: center;justify-content: space-between;gap: 10px;}
.mobile-link-wrap > a{flex: 1;}
.mobile-submenu-toggle-js{width: 32px;height: 32px;border: 1px solid rgba(255,211,0,.5);background: transparent;color: var(--cor1);border-radius: 6px;font: 700 18px/1 var(--font1);cursor: pointer;transition: background var(--transition2),color var(--transition2),transform var(--transition2);}
.mobile-submenu-toggle-js:hover{background: var(--cor1);color: var(--preto);}
.mobile-has-submenu.open .mobile-submenu-toggle-js{transform: rotate(45deg);}
.mobile-submenu{display: none;background: rgba(255,255,255,.04);border: 1px solid rgba(255,211,0,.22);border-radius: 10px;padding: 12px 14px;margin-top: 10px;}
.mobile-has-submenu.open .mobile-submenu{display: block;}
.mobile-submenu-grupo + .mobile-submenu-grupo{margin-top: 14px;}
.mobile-submenu-titulo{font: 700 13px/1.1 var(--font1);text-transform: uppercase;color: var(--cor1);margin-bottom: 8px;}
.mobile-submenu ul{padding-left: 0;}
.mobile-submenu ul li{margin-bottom: 8px;}
.mobile-submenu ul li:last-child{margin-bottom: 0;}
.mobile-submenu ul li a{padding: 0 0 0 12px;color: #f7f7f7;font-size: 14px;line-height: 1.4;}
.mobile-submenu ul li a::before{content: '-';position: absolute;left: 0;top: 0;color: var(--cor1);}

.menu-overlay{position: fixed;top: 0;left: 0;width: 100%;height: 100vh;background: rgba(0,0,0,.5);opacity: 0;visibility: hidden;transition: opacity var(--transition2),visibility var(--transition2);z-index: 998;}
.menu-overlay.active{opacity: 1;visibility: visible;}

@media (min-width: 1250px){
    .nav-menu{display: flex;flex-direction: column;}
    .menu-hamburger{display: none;}
    .mobile-menu{display: none;}
}

@media (max-width: 1420px){
    .nav-list{gap: 36px;}
    .submenu-pneus{min-width: 420px;}
}
 
@media (max-width: 767px){
    .header{align-items: center;gap: 20px;padding: 14px 0;}
    .header .logo img{max-width: 220px;}
    .menu-hamburger{margin-top: 0;}
}

@media (max-width: 520px){
    .header .logo img{max-width: 170px;}
}