# Validadores 01-05 — Visual & Design System

5 checks que garantem que o deck respeita o design system Direcao C. Rodar APOS gerar o HTML, ANTES de entregar.

---

## VALIDADOR 01 — Italics so em gold/brick

**Regra:** elemento `<em>` so pode aparecer em texto que tenha cor gold (`--gold #D6A648`) em bg navy/dark, OU brick (`--brick #C0432A`) em bg paper. Italic em outras cores quebra a assinatura visual.

### Como checar

Pra cada `<em>` no HTML, verifica:

1. Em qual `<section>` esta?
2. Section tem classe `s-navy` ou `s-dark` → o `<em>` deve estar dentro de elemento cuja CSS resolve `color: var(--gold)` (ex: `.t-h1 em`, `.s-what h2 em`, `.s-create h2 em`, `.s-ops h2 em`, `.s-bp h2 em`, `.bp-title em`, `.cg-col:first-child .cg-title em`)
3. Section tem classe `s-paper` → o `<em>` deve estar em elemento que resolve `color: var(--brick)` (ex: `.s-compare h2 em`, `.s-cron h2 em`, `.s-cases h2 em`, `.cg-col:last-child .cg-title em`)
4. Em slide 09 (limitacoes) — h2 italic vai pra cor de alerta `#FF6B4A` (excecao registrada)

### Anti-padroes detectaveis

- `<em>` sem regra CSS especifica que aplique gold/brick (CSS default = cor herdada do parent, geralmente cream/ink = ❌)
- `<em>` dentro de paragrafos `.def`, `.cmd-text`, `.op-desc`, `.case-item` — esses nao tem regra de italic colorida
- `<em>` em frase inteira (mais que 3 palavras) — perde o efeito de destaque

### Como corrigir

- Adicionar regra CSS especifica pro contexto, OU
- Mover o `<em>` pra dentro de um elemento que ja tem italic colorida (h2, h1, bp-title, cg-title), OU
- Trocar o italic por outro destaque (negrito `<strong>`, ou nenhum)

---

## VALIDADOR 02 — Watermark "tatá." em todo slide

**Regra:** todo `<section>` do deck deve ter exatamente 1 elemento `.wm` com o texto `tatá.` (com ponto destacado em `.dot`).

### Como checar

```bash
# pseudo-check (mental):
sections = document.querySelectorAll('deck-stage section')
for each section:
  wms = section.querySelectorAll('.wm')
  assert wms.length == 1, "slide sem watermark ou com 2+"
  assert wms[0].textContent.replace(/\s/g,'') == 'tatá.', "watermark com texto errado"
  dot = wms[0].querySelector('.dot')
  assert dot, "watermark sem .dot"
```

### Anti-padroes

- Slide titulo (01) — esquecer o watermark (acontece muito porque o slide ja parece "completo")
- Slide com `class="wm"` mas conteudo apenas "tata" (sem `.` final, sem acento)
- Watermark em outro canto que nao bottom-left (regra: position absolute bottom-left)
- 2 watermarks no mesmo slide

### Como corrigir

Adicionar no fim de cada `<section>`:
```html
<div class="wm a av-in a-N">tatá<span class="dot">.</span></div>
```
Onde `a-N` e o ultimo delay do slide (geralmente a-5 a a-8).

---

## VALIDADOR 03 — Nenhum font-size abaixo de 24px

**Regra dura.** Tata corrigiu isso na sessao do deck original. Nenhum texto visivel pode ter `font-size` abaixo de 24px.

### Como checar

Buscar no `<style>` por `font-size: Npx` onde N < 24. Buscar tambem em `style="font-size:Npx"` inline.

### Padrao de violacao tipico

- 14px, 16px, 18px, 20px, 22px em legendas, labels, fonts pequenas → ❌
- Footer/credit text com 12-14px → ❌

### Como corrigir

- Subir pra minimo 24px
- Se nao couber, reformular o texto pra caber em fewer words
- Ultima opcao: remover o texto

### Excecoes registradas

- `close-eye` no fechamento usa 18px (acontece no deck original como peculiaridade). Mantido por consistencia visual, mas idealmente subir pra 24px tambem.

---

## VALIDADOR 04 — Eye/eyebrow em todo slide secundario

**Regra:** todo slide do meio (02-11) deve ter elemento `.eye` ou variante (`.close-eye`, eye custom em slide 09). Slide 01 (titulo) usa `.t-label`. Slide 12 (fechamento) usa `.close-eye`.

### Como checar

Pra cada `<section>`:

- Se class `s-title` → tem `.t-label` ✅
- Se class `s-close` → tem `.close-eye` ✅
- Senao → deve ter `.eye` ou estrutura equivalente

### Anti-padroes

- Slide do meio sem eye/label → orfao visual, quebra a hierarquia
- Eye com mais de 3 palavras (muito longo) → diminui leitura

### Como corrigir

Adicionar no inicio do slide:
```html
<div class="eye a av-in a-1">Texto Curto</div>
```

---

## VALIDADOR 05 — Copy curta nos cards e h2

**Regras:**
- `.ex-card .desc` ≤ 15 palavras
- `.op-name` ≤ 3 palavras
- `.op-desc` ≤ 12 palavras
- `.case-item span` ≤ 15 palavras
- `.bp-title` ≤ 4 palavras
- `.bp-desc` ≤ 25 palavras
- `.lim-text` ≤ 18 palavras
- `.cg-val` ≤ 10 palavras
- h2 do slide ≤ 3 linhas quebradas (`<br/>`)

### Como checar

Pra cada elemento listado, contar palavras (split por espaço, ignora HTML tags). Se exceder, sinaliza.

### Anti-padroes tipicos

- Card descricao com 25+ palavras vira parede de texto
- h2 com 4+ linhas — fica gigante e quebra layout
- Bp-title que vira "Sempre comece com uma rotina simples antes de" — quebra a forca do tipo de slide

### Como corrigir

- Cortar palavras filler (verbos auxiliares, hedging)
- Quebrar 1 item em 2 (se for card)
- Mover texto pra speaker-notes.md em vez de slide

---

**Apos rodar 01-05:** todo problema corrigido = deck visualmente conforme.
