/* Cabeçalho único do tracktonica.com (home, landings, páginas legais e checkout).
   Um só arquivo: mudou aqui, muda no site todo. Carregado com /nav/navbar.js. */
@font-face { font-family: 'TT Nav Display'; src: url('/inicio/fonts/tracktonica-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'TT Nav Texto'; src: url('/inicio/fonts/dm-sans-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'TT Nav Texto'; src: url('/inicio/fonts/dm-sans-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }

.tt-nav, .tt-nav * { box-sizing: border-box; }
.tt-nav { --tt-borda: #17434D; --tt-texto: #D3E7EB; --tt-suave: #7FA1A9;
  position: fixed; inset: 0 0 auto; z-index: 900; height: 72px; color: var(--tt-texto);
  font: 400 15px/1.4 'TT Nav Texto', 'DM Sans', system-ui, sans-serif;
  background: rgba(6,25,31,.42); -webkit-backdrop-filter: blur(24px) saturate(190%) brightness(1.05); backdrop-filter: blur(24px) saturate(190%) brightness(1.05);
  border-bottom: 1px solid rgba(255,255,255,.06); }
.tt-nav a { color: inherit; text-decoration: none; }
.tt-nav-linha { height: 100%; width: calc(100% - 64px); max-width: 1440px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.tt-nav-marca { display: inline-flex; align-items: center; min-height: 44px; justify-self: start; }
.tt-nav-marca img { display: block; width: 220px; height: auto; }
.tt-nav-links { display: flex; gap: 40px; font: 400 13px/1 'TT Nav Display', sans-serif; letter-spacing: .16em; }
.tt-nav-links a { position: relative; display: inline-flex; align-items: center; min-height: 44px; color: var(--cor); opacity: .78; transition: opacity .25s, text-shadow .25s; }
.tt-nav-links a:hover, .tt-nav-links a:focus-visible { opacity: 1; text-shadow: 0 0 14px currentColor; }
.tt-nav-links a::after { content: ''; position: absolute; left: 0; right: .16em; bottom: 6px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 0 10px currentColor; transform: scaleX(0); transition: transform .45s ease; }
.tt-nav-links a[data-home] { --cor: #D3E7EB; }
.tt-nav-links a.on { opacity: 1; } .tt-nav-links a.on::after { transform: scaleX(1); }
.tt-nav-acoes { justify-self: end; display: flex; align-items: center; gap: 8px; }
.tt-idioma { appearance: none; -webkit-appearance: none; height: 44px; width: 48px; padding: 0; border: 1px solid var(--tt-borda); border-radius: 12px; background: rgba(3,17,22,.6); color: var(--tt-texto); font-size: 1rem; text-align: center; text-align-last: center; cursor: pointer; }
.tt-entrar { position: relative; }
.tt-entrar > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border-radius: 999px; border: 1px solid rgba(238,244,255,.24); font: 400 12px/1 'TT Nav Display', sans-serif; letter-spacing: .16em; transition: background .2s, border-color .2s; }
.tt-entrar > summary::-webkit-details-marker { display: none; }
.tt-entrar > summary:hover, .tt-entrar[open] > summary { background: rgba(255,255,255,.06); border-color: rgba(238,244,255,.4); }
.tt-painel { position: absolute; right: 0; top: calc(100% + 10px); width: 360px; padding: 14px; display: grid; gap: 6px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; background: rgba(7,27,33,.78); -webkit-backdrop-filter: blur(24px) saturate(190%); backdrop-filter: blur(24px) saturate(190%); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.tt-titulo { margin: 0; padding: 4px 8px 6px; font: 500 11px/1.4 'TT Nav Texto', sans-serif; letter-spacing: .18em; text-transform: uppercase; color: var(--tt-suave); }
.tt-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px; border-radius: 12px; border: 1px solid transparent; transition: background .2s, border-color .2s; }
a.tt-item:hover, a.tt-item:focus-visible, form.tt-item:focus-within { background: rgba(255,255,255,.04); border-color: color-mix(in srgb, var(--cor) 45%, transparent); }
.tt-item img { width: 32px; height: 32px; flex: none; padding: 6px; border-radius: 50%; border: 1px solid var(--cor); background: rgba(7,27,33,.9); }
.tt-item > span { display: grid; gap: 2px; min-width: 0; flex: 1; }
.tt-item b { font: 400 12px/1.4 'TT Nav Display', sans-serif; letter-spacing: .16em; color: var(--cor); }
.tt-item small { color: var(--tt-suave); font-size: 13px; }
.tt-campo { display: flex; margin-top: 8px; border: 1px solid var(--tt-borda); border-radius: 10px; overflow: hidden; background: #031116; }
.tt-campo input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 0; background: none; color: var(--tt-texto); font: 400 14px 'TT Nav Texto', sans-serif; }
.tt-campo input::placeholder { color: #4F717A; } .tt-campo input:focus { outline: none; }
.tt-campo button { height: 40px; padding: 0 14px; border: 0; background: #8650D2; color: #fff; font: 500 13px 'TT Nav Texto', sans-serif; cursor: pointer; }
.tt-menu-botao { display: none; width: 44px; height: 44px; border: 1px solid var(--tt-borda); border-radius: 12px; background: rgba(3,17,22,.6); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 5px; justify-self: end; }
.tt-menu-botao span { width: 18px; height: 1.5px; background: var(--tt-texto); transition: transform .25s, opacity .25s; }
.tt-menu-botao[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.tt-menu-botao[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.tt-menu-botao[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }
.tt-menu { position: absolute; inset: 100% 0 auto; max-height: calc(100svh - 64px); overflow-y: auto; padding: 16px 20px 24px; background: #06191F; border-bottom: 1px solid var(--tt-borda); display: grid; gap: 18px; box-shadow: 0 30px 60px rgba(0,0,0,.5); }
.tt-menu[hidden] { display: none; }
.tt-menu-produtos { display: grid; gap: 8px; }
.tt-menu-produtos a { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 12px; border: 1px solid var(--tt-borda); border-radius: 12px; font: 400 13px/1 'TT Nav Display', sans-serif; letter-spacing: .16em; color: var(--cor); }
.tt-menu-produtos a.on { border-color: var(--cor); }
.tt-menu-produtos img { width: 28px; height: 28px; padding: 5px; border-radius: 50%; border: 1px solid var(--cor); }
.tt-menu-entrar { display: grid; gap: 4px; padding-top: 6px; border-top: 1px solid var(--tt-borda); }
.tt-menu-idioma { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--tt-suave); font-size: 14px; border-top: 1px solid var(--tt-borda); padding-top: 16px; }
.tt-menu-idioma .tt-idioma { width: auto; padding: 0 12px; text-align: left; text-align-last: left; }
.tt-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.tt-nav :focus-visible { outline: 2px solid #D3E7EB; outline-offset: 2px; }
.tt-nav-espaco { height: 72px; }
@media (max-width: 1279px) { .tt-nav-marca img { width: 200px; } }
@media (max-width: 1023px) {
  .tt-nav, .tt-nav-espaco { height: 64px; }
  .tt-nav-linha { width: calc(100% - 40px); grid-template-columns: 1fr auto; }
  .tt-nav-links, .tt-nav-acoes { display: none; }
  .tt-menu-botao { display: inline-flex; }
  .tt-nav-marca img { width: 150px; }
}