/* ==========================================================================
   Noprax - header unico do site
   --------------------------------------------------------------------------
   Extraido da home. Antes cada pagina tinha o seu: os artigos levavam um item
   "Produto" que a home nao tinha, a home usava ancoras (#faq, #conteudos) que
   so funcionam nela mesma, e obrigado, politica e termos nao tinham header
   nenhum.

   Neutraliza antes de estilizar e traz as proprias cores e fontes, porque a
   maioria das paginas nao declara as variaveis da marca.
   ========================================================================== */

.nav {
  --noprax-black: #0B0B0D;
  --noprax-orange: #F2A516;
  --noprax-orange-deep: #D88E0A;
  --noprax-line: rgba(255,255,255,0.08);
  --text: #F5F2EC;
  --text-muted: #8E8E96;
  --text-dim: #56565E;
  --sans: 'Archivo', system-ui, sans-serif;
  --display: 'Archivo Black', 'Archivo', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
  font-family: var(--sans);
  line-height: 1.5;
}

.nav *, .nav *::before, .nav *::after { box-sizing: border-box; }
.nav ul, .nav li { list-style: none; margin: 0; padding: 0; }
.nav li::before, .nav li::after { content: none; display: none; }
.nav a { color: inherit; text-decoration: none; }
.nav :where(a, li, span, div) {
  font-size: inherit; line-height: inherit; color: inherit;
  letter-spacing: normal; text-transform: none; margin: 0; padding: 0;
}
.nav img { max-width: 100%; display: block; }
.nav button {
  font: inherit; color: inherit; background: none; border: none;
  padding: 0; cursor: pointer; -webkit-appearance: none; appearance: none;
}

/* ── daqui para baixo, as regras da home ── */

/* ============================================================
   NAV
============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 56px;
  height: 72px;
  background: rgba(11, 11, 13, 0.85);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--noprax-line);}

.nav-logo {
  display: flex;
  align-items: center;}

.nav-logo-img {
  height: 30px;
  width: auto;
  display: block;
  object-fit: contain;}

.nav-links {
  display: flex;
  gap: 36px;
  list-style: none;
  align-items: center;}

.nav-links a {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: color 0.2s;
  position: relative;
  padding: 8px 0;
  /* rotulo nunca quebra no meio: "Encontre um / distribuidor" em duas linhas
     empurrava a barra inteira e encostava o menu no logo */
  white-space: nowrap;}

.nav-links a::before {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: var(--noprax-orange);
  transition: width 0.3s ease;}

.nav-links a:hover,
.nav-links a.active {
  color: var(--noprax-orange);}

.nav-links a:hover::before,
.nav-links a.active::before {
  width: 100%;}

.nav-cta,
.nav-links a.nav-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #0B0B0D;
  background: var(--noprax-orange);
  padding: 13px 32px;
  border-radius: 2px;
  font-weight: 700;
  transition: background 0.2s;}

.nav-cta:hover,
.nav-links a.nav-cta:hover { background: var(--noprax-orange-deep); color: #0B0B0D;}

.nav-mobile-toggle {
  display: none;
  font-size: 24px;
  color: var(--text);}

/* Ponto de quebra MEDIDO, nao escolhido: com 7 itens a linha do menu mede
   789px de texto, mais 227px de logo. Com espaco de 20px entre itens e 32px
   de margem, ela precisa de 1240px de tela para caber sem encostar no logo.
   Abaixo de 1280px vira hamburguer, com 40px de folga sobre essa conta.

   O ponto antigo era 960px e ja estava errado ANTES da aba de distribuidores:
   com 6 itens a linha precisava de 1049px, entao entre 961 e 1048px o menu
   quebrava em duas linhas e o botao laranja partia ao meio.

   Se entrar mais um item no menu, refazer a conta. Mudar este numero exige
   mudar junto o que o noprax-nav.js considera "desktop" (ele le o proprio
   botao do hamburguer, entao acompanha sozinho). */
@media (max-width: 1399px) {
  .nav { padding: 0 32px;}
  .nav-links { gap: 20px;}
}

@media (max-width: 1279px) {
  .nav { padding: 0 20px;}
  .nav-links { display: none;}
  .nav-mobile-toggle { display: block;}
  .nav-logo-img { height: 30px;}
}

@media (max-width: 1279px) {
  .nav-links.menu-open {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 72px; left: 0; right: 0; bottom: 0;
    background: var(--noprax-black);
    padding: 32px 20px 40px;
    gap: 0;
    z-index: 99;
    border-top: 1px solid var(--noprax-line);
    overflow-y: auto;}
  .nav-links.menu-open li {
    border-bottom: 1px solid var(--noprax-line);}
  .nav-links.menu-open a {
    display: block;
    padding: 18px 0;
    font-size: 13px;
    letter-spacing: 0.12em;
    color: var(--text-muted);}
  .nav-links.menu-open a:hover { color: var(--noprax-orange);}
  .nav-links.menu-open .nav-cta {
    display: inline-flex;
    margin-top: 24px;
    color: #0B0B0D;}
  .nav-links.menu-open .nav-cta::before { display: none;}
}

/* ══════════════════════════════════════════════════════════════════════
   Menu do celular em TELA INTEIRA.
   Vem depois das regras da home de proposito: sobrescreve o top:72px, que
   abria o painel so abaixo do header e deixava o resto da pagina aparecendo.

   Os 7 itens precisam CABER sem rolagem, inclusive num iPhone SE (568px de
   altura). Por isso o espacamento e calculado, nao escolhido no olho:
   7 itens x 44px + CTA 62px + respiro = cerca de 440px. Medido em 14/Set com
   a aba de distribuidores: no SE o botao termina em 370px, sem rolar.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1279px) {

  /* ⚠ backdrop-filter faz o elemento virar BLOCO DE CONTENCAO para os filhos
     com position:fixed. O painel do menu e filho do .nav, entao o inset:0 dele
     nao se referia a tela: se referia aos 72px do header, e o menu abria preso
     e recortado dentro da barra, mostrando so o primeiro item.

     No celular o blur nao faz falta: o fundo ja e quase opaco. Tirando ele, o
     painel volta a se posicionar pela tela.

     position NAO e alterada aqui de proposito: o .nav precisa continuar fixed,
     senao a barra sobe junto com a rolagem. */
  .nav {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--noprax-black);
    z-index: 300;
  }

  /* Logo e botao de fechar POR CIMA do painel.

     O painel e filho do .nav e tem z-index 200. O logo e o botao nao tinham
     posicao nenhuma, e elemento sem posicao pinta ABAIXO de irmao posicionado:
     com o menu aberto, o painel cobria os dois. Quem abria o menu no celular
     nao via o X e nao tinha como fechar, a nao ser tocando num link ou num
     vazio da tela. Estava assim no ar desde o menu de tela inteira; foi achado
     em 14/Set testando o clique real no X. O padding-top do painel ja reserva
     a altura da barra, entao nada se sobrepoe aos itens. */
  .nav-logo,
  .nav-mobile-toggle {
    position: relative;
    z-index: 201;
  }

  .nav-links.menu-open {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    background: var(--noprax-black);
    border-top: none;
    /* rola so se de fato nao couber, em tela muito baixa */
    overflow-y: auto;
    /* O clamp e proposital: se --nav-h vier errado, o menu ainda abre
       decente. Ja aconteceu de a medida pegar a altura do
       <header class="hero"> e empurrar os itens para fora da tela. */
    padding: clamp(76px, calc(var(--nav-h, 64px) + 16px), 104px) 24px
             calc(28px + env(safe-area-inset-bottom, 0px));
  }

  .nav-links.menu-open li {
    border-bottom: 1px solid var(--noprax-line);
  }

  .nav-links.menu-open a {
    display: block;
    padding: 14px 2px;
    font-size: 14px;
    line-height: 1.3;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--text);
  }

  .nav-links.menu-open a:hover,
  .nav-links.menu-open a:focus-visible {
    color: var(--noprax-orange);
  }

  .nav-links.menu-open .nav-cta {
    display: inline-flex;
    justify-content: center;
    margin-top: 22px;
    padding: 16px 22px;
    border-radius: 3px;
    background: var(--noprax-orange);
    color: #0B0B0D;
    font-weight: 700;
  }

  .nav-links.menu-open .nav-cta::before,
  .nav-links.menu-open a::before { display: none; }

  /* tela baixa: aperta mais, em vez de obrigar a rolar */
  @media (max-height: 620px) {
    .nav-links.menu-open { padding-top: clamp(64px, var(--nav-h, 64px), 84px); }
    .nav-links.menu-open a { padding: 11px 2px; font-size: 13px; }
    .nav-links.menu-open .nav-cta { margin-top: 16px; padding: 13px 20px; }
  }

  /* com o menu aberto a pagina atras nao rola */
  body.menu-travado { overflow: hidden; }
}