---
fonte: 01-canonicos/seed-composicao.md
versao_da_fonte: v2.1
secao: 05
titulo: "Densidade e ordem de colapso — CP15 e CP16"
sequencia: 7 de 17
bytes_do_corpo: 3190
md5_do_corpo: 136559743f785a7389292ab5dc8e3777
gerado_por: 06-validacao/geradores/gen-camada-ia.py
nota: fatia GERADA — o corpo abaixo é byte a byte o trecho do canônico; edite o canônico, nunca esta fatia. Canônico inteiro em https://ds.seed.eng.br/01-canonicos/seed-composicao.md
---
## 5. Densidade e ordem de colapso — CP15 e CP16

> **CP15 — A ESCADA DE COLAPSO CANÔNICA.** A ordem em que a tela cede, declarada até 360px.
> **Contraexemplo declarado (fato — `estudo-clickup-completo.md` §11.2):** a ordem do ClickUp
> termina em *"nada mais colapsa, tudo comprime"*; o rail de 64px persiste até 560px,
> `(pointer: coarse)` nunca é verdadeiro e o mobile é delegado a app nativo. **Nossa premissa
> é paridade mobile total — o ClickUp aqui é contraexemplo, não referência, e nenhum arquétipo
> nosso pode citá-lo como precedente de responsivo.**

**Princípio da ordem (o que cede primeiro):**
1º **navegação persistente vira sob-demanda** (some da tela, não do produto) →
2º **colunas e metadados de baixa importância somem, por decisão editorial declarada** (nunca
por acidente) →
3º **rótulos migram para junto do dado** (nunca somem) →
4º **densidade afrouxa** (alvos crescem, nunca encolhem).

**A escada, por faixa de viewport:**

| Faixa | O que cede | Fonte |
|---|---|---|
| **≥1024px** | composição plena | — |
| **<1024px** | sidebar contextual: níveis 2+ em flyout | SH4-c |
| **<640px** | rail+sidebar → **drawer modal único** · modal de tarefa → **tela cheia** · popover denso → **tray** · tabela → rolagem do wrapper ou **cards** (colunas `low` somem; rótulos migram via `data-label`) · toolbar **empilha** · densidade trava **≥44px** · CTA de fluxo **full-width** · grade do painel → **1 coluna** | SH12 · MD4 · Y4 · LD2/LD3/LD4 · TD1 · DT2 · §1.4 · PN1 |
| **≤360px** *(pior caso declarado, tokens §2.9)* | tudo acima já aplicado + zoom das lentes se declara em **unidades visíveis com px derivado da largura** (funciona *"em 1180px e em 390px"*) + campos a 16px em `pointer: coarse` | PN41d · §0.8 |

> **CP16 — O QUE NUNCA COLAPSA.** Em qualquer largura até 360px: **a calha** (*"nada encosta
> em nada"* é invariante — a escada remove blocos e afrouxa densidade, nunca remove a folga) ·
> **o alvo de toque ≥44px** · **o fallback textual** (DG1, PN54 — é conteúdo, não enfeite) ·
> **o formulário único** da página de serviço (MK8/MK21) · **o zoom do usuário** (MK4: proibido
> bloquear, sem caso legítimo) · **o caminho alternativo de ponteiro único** (PN23, SC 2.5.7).
> *Racional:* cada item desta lista é uma conformidade ou uma decisão medida; colapsá-los não
> economiza tela — quebra o produto.

**Densidade (quantos blocos):** a grade do painel (PN1: larguras 4/6/8/12) implica **no máximo
três peças por linha**; a **regra do um** (§1.12) vale por tela: um `h1`, um primário por
contexto, **uma âncora de ênfase por página** (§3.5-c/S11-b), um protagonista tipográfico
(CP18). Os tetos quantitativos de massa visual estão no CP21.

**Guarda de método herdada (regra da matriz do DP, mais geral que o DP):** *"simular uma
dimensão só vale se a simulação dirigir as MESMAS regras que a realidade dirige."* Se um
arquétipo adotar container query (C22), a camada de render precisa redimensionar o
**container**, não a janela — senão a suíte vira verde-e-errada, a classe de defeito que
originou o MANIFESTO.

---