Política de layout por tamanho de tela (mobile-first)

Decisão

Mobile-first é a abordagem padrão. Estilos base miram mobile; melhorias são adicionadas em md: e acima.
Usar breakpoints padrão do Tailwind CSS v4, operando por regra com dois níveis.

Nível	Largura	Prefixo Tailwind	Objetivo
Mobile	< 768px	(nenhum = base)	Layout em coluna única, empilhado
Desktop	>= 768px	`md:`	Layout lado a lado, expandido

sm: / lg: / xl: / 2xl: devem ser usados apenas como exceção. Quando usados, adicionar comentário explicando o motivo.
Largura máxima de conteúdo: max-w-4xl (896px), aplicada de forma consistente em todas as páginas.
Padding horizontal base: px-6 (24px).

Navegação

Nível	Comportamento
Mobile	Botão hambúrguer para mostrar/ocultar navegação
Desktop	Barra de navegação horizontal persistente

Escala tipográfica

Headings usam tamanhos mobile como base e sobem um nível em md:.

Elemento	Mobile (base)	Desktop (`md:`)
Título da página (h1)	`text-3xl`	`md:text-4xl`
Título de seção (h2)	`text-2xl`	`md:text-3xl`
Subtítulo (h3)	`text-xl`	`md:text-2xl`
Título de lista	`text-lg`	`md:text-xl`
Texto de corpo	`text-base`	Sem mudança

Padrões de layout

Padrão	Mobile	Desktop
Lista de cards	Empilhado em coluna única	Empilhado em coluna única (suficiente com `max-w-4xl`)
Barra de filtros	`flex-col` empilhado	Horizontal `md:flex-row`
Rodapé	Empilhado e centralizado	Horizontal `md:flex-row md:justify-between`
Header	Duas linhas + hambúrguer	Duas linhas + navegação horizontal

Contexto

Este site é pessoal e focado em conteúdo (blog, catálogo de ferramentas, ADR, About), onde layouts raramente precisam de alta complexidade. A implementação atual já usa apenas md:, operando na prática com dois níveis. Essa convenção implícita precisava ser documentada para manter consistência no desenvolvimento futuro.

Justificativa

Simplicidade: Dois níveis são suficientes para um site centrado em conteúdo. Mais breakpoints aumentam custo de manutenção.
Consistência com o código existente: Todo o código já usa apenas md:, sem necessidade de migração.
Aderência ao padrão do Tailwind: Evitar breakpoints customizados previne desvio da documentação oficial.
Mobile-first faz sentido: Alinha com indexação mobile-first do Google e prioriza a experiência móvel.

Consequências

Ao criar novos componentes, completar primeiro o layout mobile e depois aprimorar com md:.
Uso de sm: / lg: etc. exige justificativa explícita no PR.
Se for necessária largura além de max-w-4xl, abrir ADR separado.
Mudanças na escala tipográfica também devem ser gerenciadas via ADR.