/* ---------------------------------------------------------------
   JIN Brasil: cabeçalho único do site (30/10/2026)
   Carregado pela home, onde comprar, seja revendedor, parceiros,
   calculadora e blog. O botão ☰ é aberto pelo /assets/app.js.
   As LPs /pro/* e a /como-gravar/ ficam sem menu de propósito.
   Cores com nome próprio (--m-*) para não depender do :root de cada página.
--------------------------------------------------------------- */
.topo{
  --m-navy:#252B31;--m-laranja:#F05D23;--m-linha:#E5E6E6;
  position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);
  backdrop-filter:saturate(1.4) blur(6px);border-bottom:1px solid var(--m-linha);
  font-family:"Inter","Segoe UI",system-ui,sans-serif;line-height:1.5
}
.topo__env{display:flex;align-items:center;gap:20px;height:68px;margin:0 auto;padding:0 clamp(16px,4vw,56px)}
.topo .marca{display:flex;align-items:center;text-decoration:none;flex:none}
.topo .marca img{display:block;width:auto;height:42px}
.menu{display:flex;align-items:center;gap:26px;margin-left:auto}
.menu a{font-size:.94rem;text-decoration:none;color:var(--m-navy);white-space:nowrap}
.menu a:hover{color:var(--m-laranja)}
.redes{display:flex;align-items:center;gap:12px;margin-left:6px}
.menu .redes a{display:inline-flex;color:var(--m-navy)}
.menu .redes a:hover{color:var(--m-laranja)}
.redes svg{width:19px;height:19px;fill:currentColor}
@media (min-width:1081px) and (max-width:1300px){
  .menu{gap:15px}
  .menu a{font-size:.86rem}
  .redes{gap:10px;margin-left:2px}
  .redes svg{width:17px;height:17px}
}

/* celular: até 1080px o menu some atrás do botão ☰ */
.menu__botao{display:none;flex:none;width:44px;height:44px;margin:0 -8px 0 0;padding:0;border:0;background:none;cursor:pointer;border-radius:8px}
.menu__botao span{display:block;width:22px;height:2px;margin:5px auto;background:var(--m-navy);border-radius:2px;transition:transform .2s,opacity .2s}
.topo.aberto .menu__botao span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.topo.aberto .menu__botao span:nth-child(2){opacity:0}
.topo.aberto .menu__botao span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1080px){
  .menu__botao{display:block;margin-left:auto}
  .menu{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;align-items:stretch;gap:0;margin:0;padding:6px 0 10px;background:#fff;border-bottom:1px solid var(--m-linha);box-shadow:0 12px 24px rgba(37,43,49,.08)}
  .topo.aberto .menu{display:flex}
  .menu a{padding:13px clamp(16px,4vw,56px);font-size:1.02rem;font-weight:600;border-top:1px solid var(--m-linha)}
  .menu a:first-child{border-top:0}
  .redes{gap:22px;margin:0;padding:14px clamp(16px,4vw,56px) 6px;border-top:1px solid var(--m-linha)}
  .menu .redes a{padding:4px 0;border-top:0}
  .redes svg{width:22px;height:22px}
}