/* ==========================================================================
   Centralização no mobile
   Abaixo de 1024px o layout empilha em coluna única (o grid de 2 colunas
   vira 1). Nessas larguras, os blocos de texto que no desktop ficam ao
   lado de uma imagem (alinhados à esquerda) passam a ficar centralizados,
   que é o padrão mais comum e legível para telas estreitas.
   ========================================================================== */
@media (max-width: 1023.98px) {

  /* ---------- Hero (#inicio) ---------- */
  #inicio .animate-reveal {
    text-align: center;
  }
  #inicio .animate-reveal > * {
    margin-left: auto;
    margin-right: auto;
  }
  #inicio .animate-reveal .flex.flex-wrap.items-center {
    justify-content: center;
  }

  /* ---------- Quem Somos ---------- */
  #quem-somos .order-1.lg\:order-2 {
    text-align: center;
  }
  #quem-somos .order-1.lg\:order-2 > * {
    margin-left: auto;
    margin-right: auto;
  }
  #quem-somos .order-1.lg\:order-2 .flex.flex-wrap {
    justify-content: center;
  }

  /* ---------- Contato (texto ao lado do formulário) ---------- */
  #contato .grid.grid-cols-1.lg\:grid-cols-2 > div:first-child {
    text-align: center;
  }
  #contato .grid.grid-cols-1.lg\:grid-cols-2 > div:first-child > * {
    margin-left: auto;
    margin-right: auto;
  }
  #contato ul.space-y-3 li {
    justify-content: center;
  }
  #contato ul.space-y-3 li span:last-child {
    text-align: left;
  }

  /* ---------- Rodapé ---------- */
  footer .grid.grid-cols-1.md\:grid-cols-3 > div {
    text-align: center;
  }
  footer .grid.grid-cols-1.md\:grid-cols-3 > div > * {
    margin-left: auto;
    margin-right: auto;
  }
  footer .grid.grid-cols-1.md\:grid-cols-3 .flex.gap-3 {
    justify-content: center;
  }
  footer ul.space-y-3 li,
  footer ul.space-y-3 a.flex {
    justify-content: center;
  }
  footer ul.space-y-3 li span:last-child {
    text-align: left;
  }
  footer ul.grid.grid-cols-2 {
    justify-items: center;
  }
}