/*
  Menu no celular (todas as páginas). Carregar depois de paginas.css/empresa.css.

  No desktop não muda nada. Abaixo de 860px, os links do site (.nav-links) descem para
  uma segunda linha do cabeçalho, com rolagem horizontal se não couberem:

    [logo]                     [Fale conosco]
    Produtos  Serviços  Sobre  Contato

  O seletor "header nav .nav-links" é mais específico que o "nav .nav-links { display:none }"
  das páginas, por isso vence sem !important.
*/
@media (max-width: 860px) {
  .header-inner { flex-wrap: wrap; row-gap: 10px; padding-top: 12px; padding-bottom: 10px; }
  /* O nav "some" do layout para os links poderem ocupar a linha inteira */
  header nav { display: contents; }
  header nav .nav-links {
    display: flex;
    order: 3;
    flex: 1 0 100%;
    gap: 18px;
    padding: 0 0 2px;
    border: 0;
    overflow-x: auto;
    scrollbar-width: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-soft);
  }
  header nav .nav-links::-webkit-scrollbar { display: none; }
  header nav .nav-links a { flex-shrink: 0; padding: 6px 0; text-decoration: none; }
  /* Logo e botão menores para caberem lado a lado até em 360px (ex.: "Falar sobre o GEMS") */
  header .logo { font-size: 16px; gap: 8px; }
  header nav .btn { padding: 9px 12px; font-size: 13.5px; white-space: nowrap; }
}