# CLS Fix — Cumulative Layout Shift

Meta: CLS < 0.1 (bom), < 0.25 (precisa melhorar), > 0.25 (ruim)

---

## Causa 1: FOUT — Flash of Unstyled Text (fontes)

**Solução A — `display=optional`** (headings):
```html
<link href="...family=Oswald&display=optional">
```
O browser usa fonte local se a web font não carregar rápido. Sem troca visual = sem CLS.

**Solução B — `@font-face` fallback com `size-adjust`**:
```css
@font-face {
    font-family: 'Oswald Fallback';
    src: local('Arial Narrow Bold'), local('Impact'), local('Arial');
    font-weight: 700 800;
    size-adjust: 90%;
    ascent-override: 105%;
    descent-override: 20%;
    line-gap-override: 0%;
}
.heading { font-family: 'Oswald', 'Oswald Fallback', sans-serif; }
```

**Parâmetros por fonte:**

| Fonte | size-adjust | ascent | descent | line-gap |
|-------|-------------|--------|---------|----------|
| Oswald | 90% | 105% | 20% | 0% |
| Montserrat | 95% | 96% | 22% | 0% |
| Inter | 100% | 93% | 22% | 0% |
| Plus Jakarta Sans | 97% | 95% | 21% | 0% |
| Space Grotesk | 96% | 99% | 22% | 0% |
| Playfair Display | 105% | 102% | 25% | 0% |

---

## Causa 2: Imagem sem dimensões

```html
<!-- ANTES (CLS) -->
<img src="foto.jpg" class="foto">

<!-- DEPOIS (sem CLS) -->
<img src="foto.jpg" class="foto" width="340" height="400">
```

O CSS pode redimensionar — o `width`/`height` HTML define o aspect ratio para reservar espaço.

---

## Causa 3: JS de manipulação DOM

Usar double `requestAnimationFrame` para adiar manipulação DOM após primeiro paint:
```js
requestAnimationFrame(function() { requestAnimationFrame(applyFix); });
```

---

## Checklist CLS

- [ ] Fontes: `display=optional` para headings, `display=swap` com fallback para body
- [ ] `@font-face` fallback com `size-adjust` para cada fonte
- [ ] Todas as imagens com `width` e `height` explícitos
- [ ] JS DOM manipulation com double rAF
- [ ] SVG de logo com `viewBox` definido
- [ ] Nenhum `min-height: 100vh` em containers filhos
