/* Ajustes que so existem no site publicado (o canvas nao os precisa). */
[data-vls="header-solid"] { opacity: 0; pointer-events: none; }
[data-vls="header-top"], [data-vls="header-solid"] {
  transition: opacity 180ms cubic-bezier(.2, 0, .2, 1);
}
[data-vls="track"] { scrollbar-width: none; -ms-overflow-style: none; }
[data-vls="track"]::-webkit-scrollbar { display: none; }

/* --- Menu mobile ---------------------------------------------------------
   No desktop nada muda: o botao fica oculto e o <nav> segue como veio do
   canvas. Abaixo de 860px o nav vira painel e o header volta a uma linha. */
[data-vls="menu-toggle"] { display: none; }
/* No desktop a copia da bandeira nao aparece: quem serve e a original, dentro
   do nav. Precisa vir antes do @media para a regra do mobile prevalecer. */
[data-vls="header-bar"] > button[data-mobile] { display: none; }
[data-vls="menu-toggle"] [data-vls="ico-fechar"] { display: none; }
[data-vls="menu-toggle"][aria-expanded="true"] [data-vls="ico-abrir"] { display: none; }
[data-vls="menu-toggle"][aria-expanded="true"] [data-vls="ico-fechar"] { display: block; }

@media (max-width: 860px) {
  [data-vls="menu-toggle"] { display: inline-flex; flex: 0 0 auto; }
  [data-vls="header-bar"] { flex-wrap: nowrap !important; gap: 12px !important; }

  [data-vls="header-nav"] {
    display: none !important;
    position: fixed; left: 0; right: 0; top: var(--vls-header-h, 66px);
    flex-direction: column; align-items: stretch !important; gap: 0 !important;
    background: #FFFFFF; border-bottom: 1px solid #D6D6D6;
    padding: 8px 28px 20px; max-height: calc(100vh - var(--vls-header-h, 66px));
    overflow-y: auto; box-shadow: 0 12px 28px rgba(0, 0, 0, .1);
  }
  [data-vls="header-nav"][data-aberto] { display: flex !important; }

  /* Os links vem com cor inline (branca sobre o hero) — no painel branco
     precisam virar tinta. */
  [data-vls="header-nav"] > a {
    color: #000000 !important; font-size: 16px !important; line-height: 1 !important;
    padding: 15px 0 !important; border-bottom: 1px solid #ECECEC;
  }
  [data-vls="header-nav"] > a:last-of-type { border-bottom: 0; }
  /* O CTA "Seja um parceiro" continua sendo botao, agora ocupando a largura. */
  [data-vls="header-nav"] > a[style*="999px"] {
    margin-top: 16px; height: 48px !important; justify-content: center;
    background: #000000 !important; color: #FFFFFF !important;
    border-color: #000000 !important; border-bottom: 1px solid #000000 !important;
    font-size: 14px !important; padding: 0 24px !important;
  }
  /* A copia da bandeira assume no mobile, agrupada com o menu na direita; a
     original fica so no desktop, senao apareceria de novo dentro do painel. */
  [data-vls="header-bar"] > button[data-mobile] { display: block; margin-left: auto !important; }
  [data-vls="header-nav"] > button[data-vls^="lang-"] { display: none !important; }
}
body[data-menu-aberto] { overflow: hidden; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}