# Responsive Breakpoints & Validation Rules

## Tailwind 4 Breakpoints (Mobile-First)

```
Default    : 0px+      (mobile — escrever PRIMEIRO)
sm:        : 640px+    (mobile landscape)
md:        : 768px+    (tablet portrait)
lg:        : 1024px+   (tablet landscape / desktop pequeno)
xl:        : 1280px+   (desktop)
2xl:       : 1536px+   (wide desktop)
```

## Device Reference Table

| Device | Width | Breakpoint | Colunas tipicas |
|--------|-------|-----------|----------------|
| iPhone SE | 375px | default | 1 |
| iPhone 14 | 390px | default | 1 |
| iPhone 14 Pro Max | 430px | default | 1 |
| Samsung Galaxy S24 | 360px | default | 1 |
| iPad Mini | 768px | md: | 2 |
| iPad Air | 820px | md: | 2 |
| iPad Pro 11" | 834px | md: | 2 |
| iPad Pro 12.9" | 1024px | lg: | 2-3 |
| MacBook Air 13" | 1280px | xl: | 3 |
| MacBook Pro 14" | 1512px | 2xl: | 3 |
| Desktop 1080p | 1920px | 2xl: | 3-4 |
| Ultrawide | 2560px+ | 2xl: | max-w limita |

## Validation Checklist Per Breakpoint

### Mobile (375-430px) — MAIS IMPORTANTE
- [ ] Texto nao overflow (sem horizontal scroll)
- [ ] Font-size minimo 16px body (previne zoom iOS)
- [ ] Touch targets minimo 44x44px
- [ ] Botoes full-width (`w-full`)
- [ ] Imagens `w-full` com aspect-ratio preservado
- [ ] Padding lateral minimo px-4 (16px)
- [ ] Grid single-column
- [ ] Headline max 2-3 linhas
- [ ] CTA visivel sem scroll excessivo
- [ ] Testimonial cards empilhados vertical

### Tablet (768-1023px) — md:
- [ ] Grid 2 colunas onde faz sentido
- [ ] Padding lateral px-6 a px-8
- [ ] Imagens nao esticam desproporcionalmente
- [ ] Cards lado a lado (grid-cols-2)
- [ ] Font-size pode aumentar levemente
- [ ] Hero pode ter layout side-by-side

### Desktop (1024-1279px) — lg:
- [ ] Grid 2-3 colunas
- [ ] Layout horizontal para hero (texto + imagem)
- [ ] Sidebar ou multi-column para testimonials
- [ ] Padding generoso (px-8 a px-12)
- [ ] Hover states ativos (cursor devices)
- [ ] Animacoes de scroll ativas

### Wide Desktop (1280px+) — xl: / 2xl:
- [ ] max-w-6xl ou max-w-7xl centralizado (mx-auto)
- [ ] Conteudo NAO estica alem do max-width
- [ ] Whitespace proporcional
- [ ] Grid 3+ colunas onde relevante
- [ ] Font-sizes maiores para headlines

## Mobile-First Coding Pattern

```tsx
// CORRETO — mobile-first
<div className="
  px-4 py-12              // mobile
  md:px-8 md:py-16        // tablet
  lg:px-12 lg:py-20       // desktop
  xl:px-16 xl:py-24       // wide
">
  <div className="
    grid grid-cols-1       // mobile: 1 coluna
    md:grid-cols-2         // tablet: 2 colunas
    lg:grid-cols-3         // desktop: 3 colunas
    gap-4 md:gap-6 lg:gap-8
  ">
    ...
  </div>
</div>

// CORRETO — tipografia responsiva
<h1 className="
  text-3xl               // mobile: 30px
  md:text-4xl            // tablet: 36px
  lg:text-5xl            // desktop: 48px
  xl:text-6xl            // wide: 60px
  font-bold leading-tight
">

// CORRETO — botao responsivo
<button className="
  w-full                 // mobile: full-width
  md:w-auto              // tablet+: auto-width
  px-6 py-3
  md:px-8 md:py-4
  rounded-full
  text-base md:text-lg
">

// CORRETO — imagem responsiva
<img className="
  w-full                 // mobile: full-width
  md:w-1/2               // tablet: metade
  lg:w-auto lg:max-w-md  // desktop: tamanho natural limitado
  rounded-xl
  object-cover
" />
```

## Common Responsive Patterns

### Hero Section
```tsx
// Mobile: stacked (texto em cima, imagem embaixo)
// Desktop: side-by-side
<section className="flex flex-col lg:flex-row items-center gap-8 lg:gap-16">
  <div className="w-full lg:w-1/2">  {/* texto */} </div>
  <div className="w-full lg:w-1/2">  {/* imagem */} </div>
</section>
```

### Testimonials Grid
```tsx
// Mobile: 1 col → Tablet: 2 col → Desktop: 3 col
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
```

### Pricing Cards
```tsx
// Mobile: stacked → Desktop: side-by-side
<div className="flex flex-col md:flex-row items-stretch gap-6 justify-center">
```

### FAQ
```tsx
// Sempre single-column mas largura varia
<div className="max-w-2xl lg:max-w-3xl mx-auto">
```

### Sticky CTA Bar (mobile only)
```tsx
<div className="fixed bottom-0 left-0 right-0 z-50 p-4 bg-white/90 backdrop-blur
  md:hidden  // esconde em tablet+, ja tem CTAs inline
">
```

## Performance Rules
- Imagens: usar `loading="lazy"` abaixo da fold
- Fontes: usar `font-display: swap` + preload
- Animacoes: checar `prefers-reduced-motion`
- CSS: Tailwind ja faz purge automatico
- Bundle: code-split por secao se pagina muito grande
