---
name: pdf-BLACKNULL-squad-design
description: "Variante BLACKNULL — FUNDO PRETO (#0A0A0A) FIXO EM TODAS AS PAGINAS (zero alternancia), monocromatica (branco + cinzas), SEM LOGO SQUAD FILM, SEM marca S/// e SEM bloco de sites. Use esta skill quando o usuario pedir PDF/apresentacao/deck/proposta/relatorio/quadro/lista/dossie/documento editorial em fundo preto absoluto — contexto pessoal, interno, estetica dark exclusiva, apresentacao noturna, projetor escuro, ou pedido explicito de 'fundo preto'. NAO usar para clientes/empresa Squad Film (use pdf-squad-design ou pdf-vevo-design-neo-swiss). NAO usar para impressao em papel (use pdf-WHITENULL-squad-design). NAO usar quando a alternancia tri-tema for apropriada (use pdf-NULL-squad-design)."
---

# PDF BLACKNULL SQUAD DESIGN — Editorial Monocromatico Fundo Preto

Voce e um sistema de criacao de PDFs editoriais premium monocromaticos da Squad Film — a variante **NULL**, reducao da paleta a preto, branco e cinzas. Mesma espinha dorsal do `pdf-squad-design` (referencia master "Resumo L'Acqua Marina"), porem sem azul e sem ciano, e com H1 em CAIXA ALTA e sem bold.

## IDENTIDADE DO ESTILO

- Nome: **PDF BLACKNULL Squad Design — Editorial Monocromatico Fundo Preto**
- Referencia master: `/Users/matheusfilipe/Downloads/1resumo-reuniao-lacqua.pdf` (estrutura) · NULL = mesma estrutura, paleta reduzida
- Classificacao: Editorial Document / Tri-Theme Neutral / Display-Grotesque Uppercase
- DNA: documento denso, legivel, sofisticado, **silencioso**. Alternancia ritmica entre paginas pretas, cinza e brancas. Tipografia grotesque editorial grande em CAIXA ALTA nos titulos, micro grotesque nos labels. Cada pagina respira. Zero cor.

## PRINCIPIOS INEGOCIAVEIS

1. **Tema unico FIXO — BLACKNULL**: TODAS as paginas tem background `#0A0A0A` (black). ZERO alternancia. ZERO paginas light. ZERO paginas gray. Se o conteudo for grande e pedir ritmo visual, criar ritmo por **variacao de peso tipografico, densidade de rule, e micro-variacao de opacidade do branco** (0.92 / 0.72 / 0.48 / 0.25), NUNCA por mudanca de fundo.
2. **Titulo SEMPRE em CAIXA ALTA e duas partes de peso**: H1 tem duas partes — "principal" em **Medium (500)** + "destaque" em **Regular (400)**. NUNCA usar bold. Ex.: `FICHA` + ` DO DOCUMENTO.` → `<span>FICHA</span> <b>DO DOCUMENTO.</b>` onde `<b>` e tratado como Regular 400 (nao bold). `text-transform: uppercase` obrigatorio em todos os H1, H2, cover-display, display, display.small, .title.
3. **Linha curta neutra sob o H1**: SEMPRE. Largura 56px, height 2px, cor accent do tema (branco no dark/gray, preto no light). Nunca azul, nunca ciano.
4. **Header fixo no topo**: `↗ 01 · SECTION NAME` esquerda, `RESUMO [PROJETO]` direita, separados por rule horizontal de 1px em toda a largura.
5. **Gutter esquerdo com numeracao**: labels tipo `01`, `I`, `R1`, `S1`, `C1`, `M1` sempre em uppercase micro (9px) com tracking +0.15em, cor accent (branco/preto conforme tema), alinhados a esquerda num gutter fixo de ~60px.
6. **Rodape fixo**: esquerda `↗ 01 · SECTION`, centro marca `S///` (branco no dark/gray, preto no light), direita `PÁG. 01 / XX`.
7. **Rules horizontais finos** (1px) separam blocos de informacao. Nunca caixas, nunca bordas duplas, nunca sombras.
8. **Coluna de texto estreita**: o corpo de texto vive em ~540px de largura no A4 landscape (aproximadamente metade da pagina). A outra metade fica em branco — respiro editorial proposital.
9. **Sumario (pagina 02) obrigatorio** em apresentacoes com 6+ paginas: numeracao romana + titulo + linha rule + seta + numero de pagina de destino.
10. **Gramatica PT-BR impecavel**: acentos, crase, pontuacao, concordancia. Reler antes de renderizar.

## FONTE — BRITTI SANS TRIAL + HOST GROTESK FALLBACK (IMPRESCINDIVEL)

Regra: **Britti Sans Trial e a fonte editorial padrao** do body, labels, captions, KPI numbers, footer, header. Host Grotesk (Google Fonts, weights 400 Regular + 500 Medium) e carregado via `@import` e usado como:

1. **Fallback explicito via font-family stack para acentos/Latin-Extended**: todo seletor usa `font-family: 'Britti Sans Trial', 'Host Grotesk', sans-serif`. Se Britti Sans nao possuir um glifo, o browser usa automaticamente Host Grotesk. Nada de `local()` nem `unicode-range`.
2. **Peso Medium (500) na parte principal do titulo e Regular (400) na parte destaque**: titulos usam stack invertido — `font-family: 'Host Grotesk', 'Britti Sans Trial', sans-serif`. O `<span>` principal leva `font-weight: 500`. O `<b>` (destaque) leva `font-weight: 400` — SEM bold.

### Declaracao obrigatoria

```css
@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap');

/* Britti Sans Trial — 8 pesos licenciados (abril/2026) */
@font-face{font-family:'Britti Sans Trial';src:url('file:///Users/matheusfilipe/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:block;}
@font-face{font-family:'Britti Sans Trial';src:url('file:///Users/matheusfilipe/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-LightItalic.otf') format('opentype');font-weight:300;font-style:italic;font-display:block;}
@font-face{font-family:'Britti Sans Trial';src:url('file:///Users/matheusfilipe/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:block;}
@font-face{font-family:'Britti Sans Trial';src:url('file:///Users/matheusfilipe/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-RegularItalic.otf') format('opentype');font-weight:400;font-style:italic;font-display:block;}
@font-face{font-family:'Britti Sans Trial';src:url('file:///Users/matheusfilipe/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-Semibold.otf') format('opentype');font-weight:600;font-style:normal;font-display:block;}
@font-face{font-family:'Britti Sans Trial';src:url('file:///Users/matheusfilipe/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-SemiboldItalic.otf') format('opentype');font-weight:600;font-style:italic;font-display:block;}
@font-face{font-family:'Britti Sans Trial';src:url('file:///Users/matheusfilipe/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:block;}
@font-face{font-family:'Britti Sans Trial';src:url('file:///Users/matheusfilipe/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-BoldItalic.otf') format('opentype');font-weight:700;font-style:italic;font-display:block;}

*, *::before, *::after { font-family: 'Host Grotesk','Britti Sans Trial',sans-serif !important; }
h1,h2,.display,.display.small,.cover-display,.title{
  font-family:'Host Grotesk','Britti Sans Trial',sans-serif !important;
  font-weight:500 !important;
  text-transform:uppercase !important;
  letter-spacing:-.005em;
}
h1 b,h2 b,.display b,.display.small b,.cover-display b,.title b{
  font-weight:400 !important;
}
```

### Escala obrigatoria de titulos (A4 landscape) — mesma base do squad-design

| Elemento | Tamanho | Peso principal | Peso destaque | Transform |
|---|---|---|---|---|
| `.cover-display` (capa) | **73px** | 500 | 400 | UPPERCASE |
| Display encerramento | **60px** | 500 | 400 | UPPERCASE |
| `.display` (H1) | **49px** | 500 | 400 | UPPERCASE |
| `.display.small` (subtitulo) | **36px** | 500 | 400 | UPPERCASE |

Peso **500 (Medium)** na parte principal. Peso **400 (Regular)** no destaque (`<b>`). PROIBIDO bold (700) em titulo. PROIBIDO titulo em minuscula.

**Why:** NULL e a versao editorial silenciosa — sem cor, sem bold, so peso e caixa. A distincao entre principal (Medium) e destaque (Regular) e sutil, arquitetonica, nao enfatica. Caixa alta unifica o ritmo visual.

**How to apply:** antes de renderizar, confirmar: (a) `@import` Host Grotesk presente, (b) os 8 `@font-face` Britti Sans Trial (Light/Regular/Semibold/Bold + italics) SEM `unicode-range`, (c) safeguard global, (d) rule de titulos com `text-transform: uppercase` e `font-weight: 500`, (e) rule de `<b>` dentro de titulo com `font-weight: 400`, (f) grep final: zero `font-weight: 700` em `.display`, `.cover-display`, `h1`, `h2`. Zero cores fora do espectro preto/branco/cinza.

## ESPECIFICACOES TIPOGRAFICAS — OBRIGATORIO

**REGRA IMPRESCINDIVEL**: fonte unica **Britti Sans Trial** (body) + **Host Grotesk** (titulos e fallback). Nenhuma outra fonte.

Arquivos oficiais OTF:
- `~/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-Light.otf` (300)
- `~/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-LightItalic.otf` (300 italic)
- `~/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-Regular.otf` (400)
- `~/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-RegularItalic.otf` (400 italic)
- `~/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-Semibold.otf` (600)
- `~/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-SemiboldItalic.otf` (600 italic)
- `~/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-Bold.otf` (700)
- `~/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-BoldItalic.otf` (700 italic)

Hierarquia (A4 landscape — 297×210mm):

| Elemento | Fonte | Peso | Tamanho | Cor | Transform |
|---|---|---|---|---|---|
| Cover display | Host Grotesk → Britti | 500 | 73px | theme | UPPERCASE |
| Cover display (destaque `<b>`) | Host Grotesk → Britti | 400 | 73px | theme | UPPERCASE |
| Display encerramento | Host Grotesk → Britti | 500 | 60px | theme | UPPERCASE |
| Display encerramento (destaque) | Host Grotesk → Britti | 400 | 60px | theme | UPPERCASE |
| H1 display | Host Grotesk → Britti | 500 | 49px | theme | UPPERCASE |
| H1 display (destaque `<b>`) | Host Grotesk → Britti | 400 | 49px | theme | UPPERCASE |
| H1 display small | Host Grotesk → Britti | 500 | 36px | theme | UPPERCASE |
| H1 display small (destaque) | Host Grotesk → Britti | 400 | 36px | theme | UPPERCASE |
| Linha sob H1 | — | — | 56×2px | accent (branco ou preto) | — |
| Lead / body | Britti Sans | 300 | 11-12px | theme-body | none |
| Micro label (gutter/caps) | Britti Sans | 700 | 8-9px | accent | uppercase + 0.18em |
| Item subtitle | Britti Sans | 700 | 13px | theme | none |
| Item body | Britti Sans | 300 | 10-11px | theme-mute | none |
| Header / footer | Britti Sans | 700 | 9px | theme-mute | uppercase + 0.18em |
| Section number em gutter | Britti Sans | 700 | 9px | accent | uppercase + 0.12em |

Regras:
- H1 SEMPRE duas partes em caixa alta: `<span>PARTE PRINCIPAL.</span> <b>PARTE DESTAQUE.</b>`. Principal em Medium (500). Destaque em Regular (400). NUNCA bold.
- Corpo em 300 (Britti Sans Light). Labels e captions em 700 (Britti Sans Bold) — o bold so vive nos MICRO labels, nunca no H1.
- Line-height H1: 1.05-1.10. Line-height body: 1.5-1.6.
- Tracking labels micro: +0.18em. Tracking H1: -0.005em.

## SEM LOGO SQUAD FILM — OBRIGATORIO

**REGRA CRITICA**: esta variante NULL **NAO usa logo Squad Film em lugar algum**. NAO exibir `squad-logo.png`, NAO aplicar `filter:brightness(0)` em logo, NAO linkar squadfilm.com/@squadfilme (theversionofus.com nunca deve aparecer). A marca `S///` textual do rodape tambem e PROIBIDA.

Motivo: NULL e a variante para documentos pessoais / salvar no PC / quadros / listas / anotacoes — sem branding. Qualquer elemento de marca vai para as skills `pdf-squad-design` ou `pdf-vevo-design-neo-swiss`.

Substituicao do rodape central: em vez de `S///`, usar um **ponto neutro** `•` ou deixar o centro vazio com apenas a rule horizontal ligando os dois lados.

### Exemplo de capa SEM LOGO
```html
<section class="page dark cover-page">
  <header class="running">
    <span class="h-left"><span class="arrow">↗</span> 01 · CAPA</span>
    <span class="h-right">QUADRO DE TAREFAS · 20 DE ABRIL DE 2026</span>
  </header>
  <div class="content">
    <div class="doc-label">Documento pessoal</div>
    <h1 class="cover-display"><span>TITULO</span> <b>DO DOCUMENTO.</b></h1>
    <div class="h1-rule"></div>
    <p class="lead">Subtitulo explicativo do documento...</p>
  </div>
  <footer class="foot">
    <span class="f-left"><span class="arrow">↗</span> 01 · Capa</span>
    <span class="f-center mark">•</span>
    <span class="f-right">PÁG. <b>01</b> / XX</span>
  </footer>
</section>
```

## PALETA NULL — PRETO, BRANCO, CINZAS

```
/* BLACKNULL — TEMA UNICO DARK */
--bg: #0A0A0A;                           /* fundo preto absoluto, fixo */
--text: rgba(255,255,255,.92);           /* titulos, display */
--body: rgba(255,255,255,.72);           /* corpo */
--mute: rgba(255,255,255,.48);           /* labels, legendas */
--rule: rgba(255,255,255,.14);           /* rules horizontais */
--accent: rgba(255,255,255,.95);         /* accent em branco puro */
```

Cores permitidas: `#0A0A0A`, `#2B2B2B`, `#555555`, `#8A8A8A`, `#CCCCCC`, `#FFFFFF`. Qualquer tom cromatico — azul, ciano, vermelho, verde, amarelo, roxo, laranja — e proibido.

## LAYOUT A4 LANDSCAPE

Canvas: **297mm × 210mm** (1123 × 794 px @ 96dpi).
Margens: top 40px · right 56px · bottom 40px · left 112px.
Gutter de numeracao: 0-80px (dentro da margem esquerda).
Area util: ~960px × ~690px.
Coluna de texto ideal: 540-580px.

Estrutura vertical fixa:
```
┌──────────────────────────────────────────────┐
│ HEADER (40px)  — ↗ 01 · SECTION ··· RESUMO   │
│ ─────────────────────────────────────────────│
│                                              │
│  ↗ 01  ─────  LABEL SECTION                  │
│                                              │
│  H1 GROTESK UPPERCASE (medium + regular)     │
│  ──── (linha neutra 56×2)                    │
│                                              │
│  Lead paragraph (540px)                      │
│                                              │
│  [CONTENT BLOCKS — listas, definicoes, dados]│
│                                              │
│ ─────────────────────────────────────────────│
│ FOOTER  ↗ 01 · SECTION    S///    PÁG 01/XX │
└──────────────────────────────────────────────┘
```

## COMPONENTES (obrigatorios)

### 1. Running header
```html
<header class="running">
  <span class="h-left"><span class="arrow">↗</span> 01 · SECTION NAME</span>
  <span class="h-right">RESUMO L'ACQUA MARINA</span>
</header>
```
Rule horizontal fino abaixo. Ambos em uppercase 9px tracking +0.18em.

### 2. Section label strip
```html
<div class="section-label">
  <span class="arrow">↗</span>
  <span class="num">01</span>
  <span class="rule"></span>
  <span class="name">FICHA</span>
</div>
```

### 3. H1 display UPPERCASE duas partes + linha neutra
```html
<h1 class="display">
  <span>FICHA</span> <b>DO DOCUMENTO.</b>
</h1>
<div class="h1-rule"></div>
```
`<span>` em Medium 500. `<b>` em Regular 400. Ambos `text-transform: uppercase` (ja aplicado pela rule global).

### 4. Lead paragraph
Paragrafo unico, 540px, 11-12px, color body.

### 5. Lista de itens numerados
```html
<ol class="items">
  <li>
    <span class="gutter">01</span>
    <div class="content">
      <h3>Propriedade formal — escritura real</h3>
      <p>Patrimonio registrado em cartorio em nome do comprador...</p>
    </div>
  </li>
</ol>
```

### 6. Definition list
```html
<dl class="def">
  <dt>TIPO DE DOCUMENTO</dt><dd>Resumo de transcricao · ata consolidada.</dd>
  <dt>DATA · HORA</dt><dd><b>14 de abril de 2026</b> · 14h30 · 50 min.</dd>
</dl>
```

### 7. Sumario
```html
<ol class="toc">
  <li><span class="roman">I</span><span class="title">FICHA DO DOCUMENTO</span><span class="rule"></span><span class="arrow">→</span><span class="page">03</span></li>
</ol>
```

### 8. Rodape / footer
```html
<footer class="foot">
  <span class="f-left"><span class="arrow">↗</span> 01 · SECTION</span>
  <span class="f-center mark"><b>S</b><span class="bars">///</span></span>
  <span class="f-right">PÁG. <b>01</b> / 18</span>
</footer>
```

### 9. Pill boxes para pacotes
Border 1px accent (branco/preto), padding 24px, label micro caps + valor grande + lista com travessao.

### 10. Blockquote (trechos literais)
```html
<blockquote>
  <span class="who">NELSON</span>
  <p>"A gente nao esta vendendo diaria, esta vendendo uma fracao de patrimonio com escritura..."</p>
</blockquote>
```

## ESTRUTURA SUGERIDA (decks editoriais 10-20 paginas)

1. **Capa** (black) — Doc. label, H1 grande em CAIXA ALTA, lead, metadata, footer institucional.
2. **Sumario** (black) — lista romana.
3. **Ficha do documento** (black) — dt/dd com dados frios.
4. **Contexto / objetivo** (black) — 2-3 paragrafos + 3 metadata caixas.
5. **Conceito / produto** (black) — lista 4 itens numerados.
6. **Diagnostico** (black) — 2 blocos ANTES/DEPOIS + consenso.
7. **Publico / objecoes** (black) — paragrafo + lista numerada.
8. **Diagnostico digital** (black) — 2 blocos SITE/INSTAGRAM + recomendacao.
9. **Tese / posicionamento** (black) — 3 camadas com dt/dd.
10. **Proposta comercial** (black) — 3 pill boxes mensais.
11. **Entregaveis** (black) — lista longa por categoria.
12. **Metas / cronograma** (black) — 3 itens M1/M2/M3.
13. **Riscos / mitigacoes** (black) — 4 itens R1-R4.
14. **Plano de acao cliente** (black) — 5 itens C1-C5.
15. **Plano de acao Squad** (black) — 5 itens S1-S5.
16. **Trechos literais** (black) — blockquotes.
17. **Pendencias** (black) — 5 itens.
18. **Encerramento / contracapa** (black) — frase final, contato.

Todas as paginas em tema BLACK. Alternar apenas densidade tipografica e layout, nunca fundo.

## CSS BASE (copie e adapte)

```css
@import url('https://fonts.googleapis.com/css2?family=Host+Grotesk:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap');

/* Britti Sans Trial — 8 pesos */
@font-face{font-family:'Britti Sans Trial';src:url('file:///Users/matheusfilipe/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-Light.otf') format('opentype');font-weight:300;font-style:normal;font-display:block;}
@font-face{font-family:'Britti Sans Trial';src:url('file:///Users/matheusfilipe/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-LightItalic.otf') format('opentype');font-weight:300;font-style:italic;font-display:block;}
@font-face{font-family:'Britti Sans Trial';src:url('file:///Users/matheusfilipe/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-Regular.otf') format('opentype');font-weight:400;font-style:normal;font-display:block;}
@font-face{font-family:'Britti Sans Trial';src:url('file:///Users/matheusfilipe/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-RegularItalic.otf') format('opentype');font-weight:400;font-style:italic;font-display:block;}
@font-face{font-family:'Britti Sans Trial';src:url('file:///Users/matheusfilipe/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-Semibold.otf') format('opentype');font-weight:600;font-style:normal;font-display:block;}
@font-face{font-family:'Britti Sans Trial';src:url('file:///Users/matheusfilipe/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-SemiboldItalic.otf') format('opentype');font-weight:600;font-style:italic;font-display:block;}
@font-face{font-family:'Britti Sans Trial';src:url('file:///Users/matheusfilipe/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-Bold.otf') format('opentype');font-weight:700;font-style:normal;font-display:block;}
@font-face{font-family:'Britti Sans Trial';src:url('file:///Users/matheusfilipe/.claude/skills/pdf-BLACKNULL-squad-design/assets/BrittiSans-BoldItalic.otf') format('opentype');font-weight:700;font-style:italic;font-display:block;}

*{margin:0;padding:0;box-sizing:border-box;}
*, *::before, *::after { font-family: 'Britti Sans Trial','Host Grotesk',sans-serif !important; }
html,body{background:#2a2a2a;-webkit-font-smoothing:antialiased;}
@page{size:A4 landscape;margin:0;}

.page{
  width:297mm;height:210mm;
  position:relative;overflow:hidden;
  page-break-after:always;
  display:flex;flex-direction:column;
  padding:40px 56px 40px 112px;
}
.page:last-child{page-break-after:auto;}

/* TEMA UNICO — todas as paginas sao dark */
.page{background:#0A0A0A;color:rgba(255,255,255,.92);}
.page{--bg:#0A0A0A;--text:rgba(255,255,255,.92);--body:rgba(255,255,255,.72);--mute:rgba(255,255,255,.48);--rule:rgba(255,255,255,.14);--accent:rgba(255,255,255,.95);}
/* aliases legacy para compatibilidade — todos apontam pro mesmo tema */
.page.dark, .page.gray, .page.light, .page.blue{background:#0A0A0A !important;color:rgba(255,255,255,.92) !important;}

/* HEADER */
.running{
  position:absolute;top:40px;left:112px;right:56px;
  display:flex;justify-content:space-between;align-items:center;
  padding-bottom:12px;border-bottom:1px solid var(--rule);
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);font-weight:500;
}
.running .arrow{color:var(--accent);margin-right:6px;}

/* SECTION LABEL */
.section-label{
  display:flex;align-items:center;gap:14px;
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:500;
  color:var(--accent);margin-top:84px;margin-bottom:18px;
}
.section-label .rule{flex:0 0 110px;height:1px;background:var(--accent);opacity:.6;}
.section-label .name{color:var(--mute);}

/* H1 DISPLAY — UPPERCASE, MEDIUM principal + REGULAR destaque */
h1,h2,.display,.display.small,.cover-display,.title{
  font-family:'Host Grotesk','Britti Sans Trial',sans-serif !important;
  font-weight:500 !important;
  text-transform:uppercase !important;
  letter-spacing:-.005em;
  line-height:1.06;
  color:var(--text);
  max-width:960px;
}
h1 b,h2 b,.display b,.display.small b,.cover-display b,.title b{
  font-weight:400 !important;
  font-style:normal;
}
.cover-display{font-size:73px;}
.display{font-size:49px;}
.display.small{font-size:36px;}

.h1-rule{width:56px;height:2px;background:var(--accent);margin-top:18px;margin-bottom:28px;}

/* LEAD */
.lead{
  font-size:12px;line-height:1.6;color:var(--body);font-weight:300;
  max-width:560px;margin-bottom:22px;
}
.lead + .lead{margin-top:-8px;}

/* DEFINITION LIST */
.def dt{
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--mute);margin-top:14px;
}
.def dt:first-child{margin-top:0;}
.def dd{font-size:12px;color:var(--body);font-weight:300;line-height:1.55;margin-top:4px;max-width:720px;}
.def dd b{font-weight:700;color:var(--text);}

/* ITEMS LIST */
.items{list-style:none;max-width:900px;}
.items li{
  display:grid;grid-template-columns:60px 1fr;gap:14px;
  padding:18px 0;border-top:1px solid var(--rule);
}
.items li:last-child{border-bottom:1px solid var(--rule);}
.items .gutter{
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  color:var(--accent);padding-top:4px;
}
.items h3{
  font-family:'Britti Sans Trial';font-weight:700;font-size:13px;
  color:var(--text);margin-bottom:6px;letter-spacing:-.005em;
  text-transform:none;
}
.items p{font-size:11px;line-height:1.55;color:var(--body);font-weight:300;max-width:620px;}

/* TOC */
.toc{list-style:none;max-width:900px;margin-top:8px;}
.toc li{
  display:flex;align-items:center;gap:14px;
  padding:14px 0;border-top:1px solid var(--rule);
  font-size:11px;font-weight:400;
}
.toc li:last-child{border-bottom:1px solid var(--rule);}
.toc .roman{flex:0 0 36px;color:var(--accent);font-weight:700;letter-spacing:.12em;text-transform:uppercase;}
.toc .title{flex:0 0 auto;color:var(--text);font-weight:500;text-transform:uppercase;letter-spacing:.02em;}
.toc .rule{flex:1;height:1px;background:var(--rule);}
.toc .arrow{color:var(--accent);font-size:14px;}
.toc .page{color:var(--mute);font-weight:500;letter-spacing:.1em;}

/* BLOCKQUOTE */
blockquote{padding:18px 0;border-top:1px solid var(--rule);max-width:680px;}
blockquote:last-child{border-bottom:1px solid var(--rule);}
blockquote .who{
  display:block;font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700;color:var(--accent);margin-bottom:10px;
}
blockquote p{
  font-family:'Britti Sans Trial';font-style:italic;
  font-size:15px;line-height:1.5;color:var(--text);font-weight:300;
}

/* PILL BOX */
.pill{
  border:1px solid var(--rule);padding:24px 28px;margin-bottom:14px;
  max-width:860px;
}
.pill .label{font-size:9px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--mute);}
.pill .value{
  font-family:'Host Grotesk','Britti Sans Trial',sans-serif;
  font-weight:500;font-size:26px;text-transform:uppercase;
  color:var(--text);margin:8px 0 14px;letter-spacing:-.005em;
}
.pill ul{list-style:none;}
.pill li{font-size:11px;color:var(--body);padding:4px 0;font-weight:300;}
.pill li::before{content:"— ";color:var(--accent);margin-right:4px;}

/* FOOTER */
.foot{
  position:absolute;bottom:30px;left:112px;right:56px;
  display:flex;justify-content:space-between;align-items:center;
  padding-top:12px;border-top:1px solid var(--rule);
  font-size:9px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--mute);font-weight:500;
}
.foot .arrow{color:var(--accent);margin-right:6px;}
.foot .mark{font-family:'Host Grotesk','Britti Sans Trial',sans-serif;font-size:14px;letter-spacing:0;text-transform:none;color:var(--accent);opacity:.5;}
.foot .f-right b{color:var(--text);font-weight:700;}

/* CONTENT WRAPPER — 96px garante folga minima do running header (anti-overlap) */
.content{margin-top:96px;flex:1;display:flex;flex-direction:column;min-height:0;}
```

## HTML TEMPLATE (pagina padrao)

```html
<section class="page light">
  <header class="running">
    <span class="h-left"><span class="arrow">↗</span> 04 · DIAGNOSTICO CENTRAL</span>
    <span class="h-right">Resumo L'Acqua Marina</span>
  </header>

  <div class="content">
    <div class="section-label">
      <span class="arrow">↗</span>
      <span class="num">04</span>
      <span class="rule"></span>
      <span class="name">Diagnostico central</span>
    </div>

    <h1 class="display"><span>O PRODUTO E PREMIUM.</span> <b>A PERCEPCAO E DE POUSADA.</b></h1>
    <div class="h1-rule"></div>

    <p class="lead">Na forma atual, o comprador em potencial chega ao site e ao Instagram e encontra fotos de hospedagem, comunicacao de temporada, linguagem de diaria. A leitura imediata e "pousada bonita".</p>

    <p class="lead">A proposta e virar a comunicacao para o eixo <b>fracao de patrimonio com escritura</b>, reforcando o tripe patrimonio + experiencia + rentabilidade.</p>
  </div>

  <footer class="foot">
    <span class="f-left"><span class="arrow">↗</span> 04 · Diagnostico central</span>
    <span class="f-center mark"><b>S</b><span class="bars">///</span></span>
    <span class="f-right">PAG. <b>06</b> / 18</span>
  </footer>
</section>
```

## PIPELINE DE EXPORTACAO (Chromium headless)

```bash
CHROME="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"
"$CHROME" --headless --disable-gpu --no-pdf-header-footer \
  --print-to-pdf=output.pdf --no-margins \
  "file://$PWD/deck.html"
```

## SPACING BLINDADO — ANTI-OVERLAP (OBRIGATORIO)

**REGRA IMPRESCINDIVEL**: o running header absolute (top:40px, altura ate ~36px com rule) NUNCA pode sobrepor o section-label, o doc-label nem o H1. Solucao blindada:

- `.content { margin-top: 96px !important; }` em TODA pagina (reserva ~104px total).
- `.running { height: auto; min-height: 36px; }` — se precisar aumentar, sobe o `margin-top` proporcional.
- Capa: `.content` comeca a 96px do topo, `.doc-label` nao entra na running.
- Contracapa: mesmo padrao; encerramento 60px nao pode colidir com header.
- Footer fixo em bottom:40px, altura ~32px — conteudo deve terminar antes de `calc(100% - 96px)`.
- NUNCA colocar logo no header ou footer grande o suficiente pra expandir a altura — na skill NULL nao ha logo, entao apenas texto e ponto neutro.
- Em deck com blocos longos, dividir em mais paginas em vez de espremer.

**Why:** bug real em 20/04/2026 (quadro-tarefas.pdf): logo de 60px no running expandiu o header para ~113px enquanto `.content{margin-top:64px}` dava apenas 104px de folga — gerou overlap do doc-label sobre o rule do header.

**How to apply:** antes de renderizar qualquer HTML, verificar: (a) todo `.page .content` tem `margin-top:96px` ou maior; (b) altura do running nao passa de 56px (rule + label + padding); (c) altura do footer nao passa de 48px; (d) conteudo nao ultrapassa linha inferior reservada.

## QA VISUAL OBRIGATORIA — RENDERIZAR + CONFERIR

**REGRA IMPRESCINDIVEL**: ANTES de entregar qualquer PDF ao usuario, e obrigatorio renderizar o PDF, converter cada pagina em PNG via `sips` e abrir com Read tool pra conferencia visual. NAO basta gerar o PDF — tem que OLHAR o output.

### Pipeline obrigatorio (pos-geracao)
```bash
# 1. Gerar PDF
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" \
  --headless --disable-gpu --no-pdf-header-footer \
  --print-to-pdf="output.pdf" --no-margins \
  "file://$PWD/deck.html"

# 2. Converter CADA pagina em PNG (A4 landscape ~1123x794)
for i in $(seq 0 $((PAGES-1))); do
  sips --setProperty format png \
    --out "output_p$((i+1)).png" \
    "output.pdf[$i]"
done
```

### Checklist de conferencia visual (por pagina)
Para cada PNG gerado, usar Read tool e checar:

1. **Overlap / sobreposicao**: running header colide com titulo? footer colide com texto? logo sobre texto? label sobre rule? → se sim, corrigir `.content{margin-top}` ou reduzir altura do componente.
2. **Corte / clipping**: algum texto ou elemento cortado por borda? linha descendo alem da area util? → se sim, paginar mais, reduzir texto, aumentar altura da area util.
3. **Vazio excessivo / pagina vaga**: pagina com <20% de ocupacao vertical? espaco morto sem motivo? → se sim, consolidar com pagina vizinha, adicionar elemento grafico, ampliar tipografia.
4. **Sem conteudo / pagina em branco**: pagina renderizada em branco por bug CSS? → investigar `.content{flex:1}` e `min-height:0`.
5. **Fontes incorretas**: titulo em serif fallback? body em Helvetica? acento renderizado fora do grotesque? → validar `@import` Host Grotesk, stack `'Host Grotesk','Britti Sans Trial',sans-serif`.
6. **Cores fora da paleta**: qualquer azul, ciano, vermelho, verde, amarelo, roxo, laranja? → na variante NULL, ZERO cor cromatica — apenas preto, branco, cinzas.
7. **Logo Squad aparecendo**: qualquer pagina com logo PNG Squad ou marca `S///` textual? → remover (regra NULL).
8. **Titulo quebrado / orfao**: palavra sozinha na ultima linha? rule curta antes da quebra de pagina? → reformatar.
9. **Alinhamento / gutter**: gutter esquerdo de 112px preservado? section-label alinhado a 112px? → ajustar padding.
10. **Hierarquia visivel**: diferenca clara entre H1 (49px Medium) e H3 (13px Bold)? rule curta presente? → recalibrar sizes.

### Regra de ouro
Se existe duvida sobre algo estar visualmente bom, **assuma que esta errado** e corrija antes de entregar. Nunca devolver PDF sem ter passado os olhos nas paginas renderizadas. Problemas dificeis de detectar via codigo (overlap por diferenca de pixel, font fallback silencioso, corte no footer) SO aparecem visualmente.

**Why:** bug real em 20/04/2026 — PDF entregue com overlap visivel do doc-label sobre o rule do header. Problema invisivel no HTML fonte, obvio no PNG renderizado.

**How to apply:** workflow padrao e SEMPRE: `gerar HTML → renderizar PDF → sips PNG por pagina → Read em cada PNG → corrigir → repetir ate zero bugs → so entao entregar ao usuario`. Antecipar por ele.

## LAYOUTS RICOS — USAR SEMPRE QUE O CONTEUDO PEDIR

**REGRA IMPRESCINDIVEL**: lista numerada nao e resposta unica. Sempre que o conteudo tiver estrutura relacional (etapas, tempo, hierarquia, decisao, comparacao, fluxo), usar layout editorial adequado em vez de lista.

### Catalogo de layouts aceitaveis na skill NULL

| Layout | Quando usar | Componentes visuais |
|---|---|---|
| **Quadro / Tabela** | dados comparaveis, antes/depois, prazos, responsaveis | grid 1px rule, cabecalho micro caps accent, celulas 16-20px padding |
| **Timeline** | cronograma, fases, historico, roadmap | linha horizontal ou vertical 1px rule + marcadores circulares vazados (border 1.5px) + label micro caps |
| **Mapa / Grafo** | relacoes entre entidades, rede, conexoes | nodes vazados (border 1px), edges 1px rule, label micro caps. Monocromatico. |
| **Mapa mental** | topico central + subtemas | node central grande, 4-8 nodes satelites conectados por linhas radiais 1px |
| **Mapa de itens / Kanban** | itens organizados em colunas de status | 3-5 colunas com header accent, cards com border 1px rule, padding 16px |
| **Fluxograma** | decisoes, processos com branches | nodes retangulares border 1px, losango para decisao, setas unicode `↓ → ↘` |
| **Organograma** | hierarquia, reporte, estrutura | topo unico, niveis descendentes, linhas 1px conectando |
| **Matriz 2x2 / Quadrantes** | priorizacao, eixos ortogonais | grid 2x2 com rules 1px, labels de eixos micro caps |
| **Gantt simplificado** | projetos com duracao e dependencia | linha horizontal por item + barra preenchida de cinza + timeline no topo |
| **KPIs / Dashboard** | numeros fortes + variacao | numero gigante Host Grotesk 72-120px + label micro caps + delta com seta unicode |

### Regras de uso
- **Sempre com icones/elementos monoline**: stroke 1-1.5px, apenas cinza/preto/branco. NUNCA emoji, NUNCA icone colorido.
- **Sempre com label micro caps accent** pra contextualizar cada bloco (ex: `↗ R01 · RISCO`, `M1 · META`, `T1 · TAREFA`).
- **Sempre preservar gutter 112px e margem direita 56px** — nenhum layout estende alem da area util.
- **Sempre respeitar paleta neutra** — zero cor cromatica na skill NULL.
- **Proibido**: pie charts, bar charts coloridos, icones flat, bullets decorativos, emoji, sombras.

### Decisao rapida
- Tem ordem temporal? → **Timeline** ou **Gantt**.
- Tem hierarquia? → **Organograma** ou **Mapa mental**.
- Tem comparacao? → **Quadro/Tabela** ou **Matriz 2x2**.
- Tem processo/decisao? → **Fluxograma**.
- Tem status/categoria? → **Kanban / mapa de itens**.
- Tem relacao nao-hierarquica? → **Mapa/Grafo**.
- Tem numero forte? → **KPI**.
- Nao se encaixa? → entao lista numerada e OK.

**Why:** listas numeradas longas (15+ itens) viram muro de texto visualmente monotono — o leitor perde a estrutura relacional. Um quadro de tarefas com prazos, responsaveis e dependencias rende muito melhor como tabela + timeline do que como 20 bullets.

**How to apply:** antes de renderizar, perguntar: "existe relacao entre os itens alem da ordem?" Se sim, escolher o layout do catalogo acima. Listas sao ultimo recurso — reservadas pra itens independentes sem relacao alem da numeracao.

## CHECKLIST ANTES DE EXPORTAR

- [ ] Toda pagina tem running header com `↗ NN · SECAO` esquerda e projeto direita?
- [ ] Toda pagina tem section label com seta + numero + rule + nome?
- [ ] Todo H1 tem duas partes (principal + destaque) — ambas em CAIXA ALTA?
- [ ] Principal em Medium (500) e destaque (`<b>`) em Regular (400)? NUNCA bold (700)?
- [ ] Todo H1 tem `text-transform: uppercase` aplicado?
- [ ] Todo H1 tem a linha neutra curta (56×2) logo abaixo?
- [ ] Todo rodape tem `↗ NN · SECAO`, ponto neutro `•` (sem `S///`) e `PAG. NN / XX`?
- [ ] ZERO logo Squad Film e ZERO marca `S///` textual em qualquer pagina?
- [ ] ZERO bloco de sites (squadfilm.com/@squadfilme) em capa ou contracapa? (theversionofus.com NUNCA)
- [ ] Temas alternam entre dark/gray/light (nunca 3 paginas iguais em sequencia)?
- [ ] Body/labels usam stack `'Britti Sans Trial','Host Grotesk',sans-serif`?
- [ ] Titulos usam `'Host Grotesk','Britti Sans Trial',sans-serif` + `font-weight: 500` + `text-transform: uppercase`?
- [ ] Rule `h1 b, .display b, .cover-display b` aplica `font-weight: 400`?
- [ ] `@import` Host Grotesk no topo do CSS (weights 400, 500, 700)?
- [ ] Britti Sans Trial `@font-face` SEM `unicode-range`?
- [ ] ZERO `local('Host Grotesk')` no CSS?
- [ ] Tamanhos de titulos conforme escala: cover 73px, encerramento 60px, display 49px, display.small 36px?
- [ ] Icones/elementos graficos monoline stroke 1-1.5px, apenas em preto/branco/cinza?
- [ ] Coluna de texto respeita ~540-580px?
- [ ] Gutter esquerdo de 112px preservado em toda pagina?
- [ ] ZERO cores fora de preto/branco/cinzas (grep final: nenhum `#00AEEF`, `#1AA7D4`, nenhum azul/ciano/vermelho/verde/amarelo/roxo/laranja)?
- [ ] Gramatica PT-BR revisada?
- [ ] Sumario presente em deck 6+ paginas — e com titulos EM CAIXA ALTA?
- [ ] Primeira pagina: capa dark com metadata?
- [ ] Ultima pagina: encerramento dark com contato?

## ELEMENTOS GRAFICOS E ICONES

REGRA IMPRESCINDIVEL: todo elemento visual em sintonia total com a identidade editorial NULL. Monocromatico absoluto.

### Vocabulario visual permitido
- **Setas**: apenas `↗`, `→`, `↘`, `↓`. Unicode tipografico.
- **Marcadores**: numero gutter em micro caps accent, ou rule horizontal 1px. Nunca bullet redondo/quadrado/check.
- **Divisores**: rule horizontal 1px com `var(--rule)`, ou rule curta 56×2 accent. Nunca tracejada, pontilhada ou dupla.
- **Selos / tags**: pill border 1px accent, padding 4×10px, uppercase 9px tracking .18em. Sem fill, sem radius maior que 2px.
- **Icones**: monoline stroke 1-1.5px (Phosphor Thin, Lucide stroke-1, Tabler stroke-1). Cor = `var(--accent)` ou `var(--mute)`. Tamanho 14-18px inline, 24-32px destaque.
- **Numeros gigantes** (KPIs): Host Grotesk UPPERCASE 72-120px Medium, mesma regra do H1.
- **Grade de dados**: border 1px `var(--rule)`, celula com padding 16-20px.

### Cores permitidas nos elementos
Apenas a escala neutra: `#0A0A0A`, `#2B2B2B`, `#555555`, `#8A8A8A`, `#CCCCCC`, `#FFFFFF`. Qualquer cor cromatica viola a identidade NULL.

### Regra pratica
Se o elemento grafico introduz cor — **nao use**. Se introduz bold em titulo — **nao use**. Se introduz titulo em minuscula — **nao use**.

## PROIBICOES

- Fundo cinza (`#1A1A1A`, `#2B2B2B`) ou branco (`#FFFFFF`) em qualquer pagina. BLACKNULL = fundo `#0A0A0A` absoluto.
- Classes ativas `.page.gray`, `.page.light`, `.page.blue` tentando mudar fundo. Legacy aliases forcam `#0A0A0A !important`.
- Sistema tri-tema (alternancia dark/gray/light). BLACKNULL = tema unico fixo, sem alternancia de fundo.
- Fundo gradiente, fundo colorido. Apenas preto `#0A0A0A`.
- Qualquer cor cromatica: azul, ciano, vermelho, verde, amarelo, roxo, laranja. Inclui `#00AEEF`, `#1AA7D4`, `#2571D6`.
- Qualquer fonte alem de Britti Sans Trial (body) e Host Grotesk (titulos + fallback).
- Titulo em `font-weight: 400` ou `700`. Somente `500` na parte principal.
- Parte destaque (`<b>` dentro do H1) em `font-weight: 700`. Somente `400` — bold proibido em titulo.
- Titulo em minuscula. SEMPRE `text-transform: uppercase`.
- Titulos com tamanhos fora da escala (73/60/49/36).
- `src: local('Host Grotesk')` em qualquer `@font-face`.
- `unicode-range` nas faces Britti Sans Trial.
- H1 em UMA cor ou UM peso so — sempre duas partes com pesos distintos.
- Sem linha neutra sob o H1.
- Bordas duplas, radius grande, sombras, gradientes.
- Icones flat, emoji, bullets circulo/quadrado.
- EXIBIR logo Squad Film em qualquer pagina (capa, rodape, contracapa).
- EXIBIR marca `S///` textual ou bloco de sites Squad (squadfilm.com, @squadfilme). theversionofus.com NUNCA em qualquer PDF.
- Texto ocupando 100% da largura (quebrar a ~540px).
- Rodape sem indicador central (usar ponto neutro `•` ou deixar vazio).
- Running header colado no topo do bloco de titulo — manter sempre `margin-top:96px` no `.content`.
- Exportar sem conferir visualmente cada pagina (obrigatoriedade de QA abaixo).
- Italic fora de blockquote, underline fora do h1-rule.

## QUANDO USAR ESTA SKILL vs OUTRAS

| Pedido | Skill |
|---|---|
| "PDF/deck fundo preto absoluto / dark mode editorial / tema unico preto" | **pdf-BLACKNULL-squad-design** |
| "PDF/deck fundo branco absoluto / print-ready / impressao papel" | **pdf-WHITENULL-squad-design** |
| "PDF editorial monocromatico tri-tema (alterna dark/gray/light)" | **pdf-NULL-squad-design** |
| "Proposta/ata/resumo com identidade Squad Film azul" | **pdf-squad-design** |
| "Pitch deck / portfolio / case study visual com foto full-bleed" | **pdf-vevo-design-neo-swiss** |

## REGRA FINAL

Sempre que for pedido PDF, apresentacao, deck, resumo, ata, dossie, proposta, relatorio ou documento editorial Squad Film **em fundo preto absoluto `#0A0A0A`** (dark mode editorial, tema unico, zero alternancia de fundo) — assuma esta direcao como padrao.

Priorizar: legibilidade editorial em fundo preto, sofisticacao tipografica grotesque em CAIXA ALTA, hierarquia por peso (Medium vs Regular) e por contraste tonal (branco 92% vs cinza 70% vs cinza 42%), gutter numerico, marca S/// discreta no rodape.

BLACKNULL nao e ausencia de variacao — e disciplina visual. O fundo nunca muda. A pagina muda atraves de densidade, ritmo e escala tipografica.