/* ============================================================
   css/publico-botoes.css — botões das páginas públicas no CELULAR
   ------------------------------------------------------------
   Landing (hero e chamada do fim) e as páginas do rodapé (Academia,
   Blog, Carreiras, Imprensa, Sobre, Código, Design, Documentos,
   Planejamento, Plugins, Conectores, Protótipo…): em tela estreita,
   cada grupo de botões vira uma coluna, com cada botão na largura
   toda, um embaixo do outro. Carregado por último em cada página
   para valer por cima do <style> dela. A barra de cima (.nav-actions)
   e o aviso de cookies ficam de fora: lá os botões cabem lado a lado.
   ============================================================ */
@media (max-width:640px){
  body .hero-actions,
  body .cta-actions,
  body .form-actions,
  body .pp-cta .hero-actions{
    display:flex; flex-direction:column; align-items:stretch; justify-content:flex-start;
    flex-wrap:nowrap; gap:10px; width:100%;
  }
  body .hero-actions > a, body .hero-actions > button,
  body .cta-actions > a, body .cta-actions > button,
  body .form-actions > a, body .form-actions > button{
    display:flex; align-items:center; justify-content:center; text-align:center;
    width:100%; max-width:none; box-sizing:border-box; margin:0;
  }
  /* texto solto ao lado do botão (ex.: aviso do formulário) ocupa a linha inteira */
  body .form-actions > :not(a):not(button){width:100%; text-align:center;}
  /* cartões de preço: o botão de cada plano na largura do cartão */
  body .pricing-btn{display:flex; align-items:center; justify-content:center; width:100%; box-sizing:border-box;}
}