/*
 * Correção de responsividade do cabeçalho — NÃO faz parte do Design System.
 *
 * Arquivo separado de propósito: o pacote entregue (`styles.css` e
 * `tokens/`) fica intacto, e dá pra remover esta correção inteira apagando
 * uma linha do HTML se um dia o design original for atualizado.
 *
 * O defeito, medido em produção a 375px: o cabeçalho ocupava 407px e a
 * página inteira ganhava rolagem horizontal. A conta não fecha —
 *
 *   32px (padding) + logo + 24px (gap) + 240px (botões) + 32px (padding)
 *
 * — e os botões não encolhem. O menu de navegação já some abaixo de certa
 * largura no design original; as ações não.
 *
 * A correção só aperta espaçamento e tamanho de fonte no celular. Nada é
 * escondido: "Entrar" e "Começar grátis" continuam visíveis e clicáveis,
 * que é o ponto da landing.
 */
@media (max-width: 560px) {
  #site-header .wrap {
    gap: 10px;
    padding-left: 16px;
    padding-right: 16px;
  }

  #site-header .logo {
    max-width: 124px;
    height: auto;
  }

  #site-header .header-actions {
    gap: 8px;
  }

  #site-header .header-actions .btn {
    padding-left: 14px;
    padding-right: 14px;
    font-size: 13px;
    white-space: nowrap;
  }
}

/*
 * Rede de segurança: nenhuma seção pode criar rolagem lateral no celular.
 * Vale para o corpo inteiro, não só para o cabeçalho — numa landing, quase
 * todo o tráfego é mobile, e rolagem horizontal passa impressão de página
 * quebrada logo no primeiro contato.
 */
@media (max-width: 560px) {
  html,
  body {
    overflow-x: hidden;
  }
}