# Mothus Logística — sistema visual

> Atualizado em 17/09/2026. Este arquivo é GERADO. A página da marca é
> https://mothus-marca.pages.dev

**Como usar:** cole este arquivo inteiro no contexto da sua IA antes de pedir qualquer
peça da Mothus — carrossel, story, anúncio, banner, e-mail, apresentação ou tela.
Ele traz valor, medida e regra; não traz opinião.

**Ordem de autoridade, e ela não se inverte:**
1. o **MARCA.md** (a régua da PALAVRA — o que a Mothus pode e não pode dizer)
2. este arquivo (a régua da FORMA)
3. gosto

Todo pixel aqui é da **lona de 1080 × 1350**, margem 88, área útil **904 px**.

---

## 1. As três leis do bloco

A sequência canônica do bloco de 6 é **FOTO · CLARA · ANCORA · CLARA · FOTO · CLARA**.

- **Nunca duas lâminas vizinhas com o mesmo tom.** São três tons: `clara` (creme),
  `foto` (foto sangrada + véu) e `ancora` (verde-800 chapado).
- **A capa é o polo forte:** FOTO ou ÂNCORA. Capa CLARA só com a cabeça verde cheia de 140 px.
- **Uma âncora chapada por bloco de 6** (duas em 9, com duas lâminas entre elas).
  A lâmina FOTO é o segundo polo escuro, e não conta como âncora.

Diferença mínima de luminância entre vizinhas: **L\* 18**.

## 2. Hierarquia de texto

| Nível | Papel | Onde vive | Família · peso | Tamanho | Caixa | Teto |
|---|---|---|---|---|---|---|
| **H1** | O HOOK. | SO na capa (lamina 1) e no topo do story. | Figtree 800 | 132px de base = 12.22cqw. | UPPERCASE sempre, via text-transform no CSS e com o texto n… | Maximo 13 caracteres POR LINHA, 3 linhas e 4 palavras. |
| **H2** | Subtitulo em estilo de titulo. | Dois lugares: na capa, sob o H1, em UMA linha (variante --capa); e como titulo de TODA lamina interna. | Newsreader 800 | 92px = 8.52cqw na lamina interna (o valor renderizado hoje, agora cravado). | Sentence case. | 34 caracteres e 2 linhas na interna; 28 caracteres e 1 linha na capa. |
| **H3** | Abre o bloco de topicos. | SO em lamina INTERNA (2 a 5), e SO imediatamente acima de um .pc__topicos ou de um par icone+dado. | Figtree 650 | 46px = 4.26cqw | Sentence case. | 28 caracteres, 1 linha. |
| **H4** | O TEXTAO. | SO dentro de .pc__card, e SO em UMA lamina por bloco de 6. | Figtree 450 | 34px = 3.15cqw | Sentence case, alinhado a esquerda, nunca justificado. | 38 caracteres de largura de coluna (--pc-h4-max:38ch) e 5 linhas — ce… |

🔴 **O tamanho do H1 sai da LINHA MAIS LONGA**, nunca do gosto:

| Caracteres na linha mais longa | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
|---|---|---|---|---|---|---|---|
| Tamanho | 164px | 152px | 132px | 120px | 112px | 104px | 96px |

14 ou mais: quebra a linha. Nunca abaixo de 96 px. Medido no Chrome, a 132 px:
`REDESPACHO` = 900,5 px (99,6% dos 904 seguros — estoura), `CROSS-DOCKING` = 1139,7 px (126%),
`CÂMARA FRIA` = 928,5 px (103%), `CONGELADO` = 855,1 px (94,6% — passa).

## 3. O número de destaque

**var(--mo-num-fam) = var(--mo-sans) = Figtree. · peso 900 (--mo-peso-negro, token novo). · 210px = 19.44cqw.**

🔴 Reprovado em 17/09/2026: *"NUMERO ESTILO SERIFA NAO FICA LEGAL. MAIS BOLD."*
O número sai da Newsreader 500 e passa a **Figtree 900, 210 px**, tracking −.035em,
line-height .86, `proportional-nums`. Nunca na capa, nunca em serifa, nunca abaixo do peso 800.

## 4. A rota

O conector reto virou **rota**: curva com raio de 120 px (mín. 72, máx. 180), traço de 6 px,
sintaxe do arco `A 120 120 0 0 1`. Três estados de nó: **parada** Ø28 (borda 6, miolo na cor
da superfície), **origem** Ø24 cheio, **destino** Ø36 com halo de 52. Mínimo 2, máximo 5 nós,
um destino só. Sobre foto ela ganha um traço de sombra de 12 px e faixa tracejada `2 18`.

🔴 **Rota ≠ fio do frio.** Mesma cor, dois trabalhos: a rota liga elementos DENTRO da lâmina;
o fio atravessa a borda e costura o feed de 9. Nunca na mesma lâmina.

🔴 O marcador de tópico é **o mesmo objeto** em Ø22 — o ponto de entrega e o bullet são a mesma coisa.

## 5. Lastro — a camada de adorno

LASTRO — a camada de vetor semitransparente entre o fundo e o conteudo.

Opacidade **.06 sobre clara**, **.10 sobre âncora**, **ZERO sobre foto**. Traço de 8 px, nunca
preenchimento. Quatro ancoragens: inferior-direita, superior-esquerda, lateral, atrás do número.

Regras:
- SEMPRE cortado por pelo menos uma borda da lona. Conferivel por bounding box: o retangulo do lastro tem que ultrapassar a lona em 12% ou mais (--pc-lastro-sangra) de pelo menos um lado. Vetor inteiro flutuando no meio da arte e adorno de apresentacao e reprova. E o que os dois chips do painel da Amanda ja mostram.
- NUNCA sobre FOTO. A foto ja preenche o vao. Lastro so entra em lamina CLARA ou ANCORA.
- NUNCA dentro da caixa de texto: nenhum traco do lastro pode cair dentro do retangulo do H1, H2, H3, H4, do numero ou do card, mais 24px de folga. Se cair, TROCA DE ANCORAGEM — nao baixa a opacidade.
- NUNCA por tras de foto, card, pilula ou cabeca verde: atras de elemento opaco ele aparece pela metade e cria uma borda de recorte visivel.
- Maximo 2 lastros por lamina (--pc-lastro-max-qtd:2), nunca dois do mesmo desenho, e nunca o mesmo desenho em laminas vizinhas do bloco. Em bloco de 6, no maximo 4 laminas com lastro.
- O lastro NAO CARREGA INFORMACAO. A 6% ele nao tem contraste nenhum, e e exatamente por isso que ele pode existir sem brigar com a regua AA. Se alguem precisa que o leitor entenda o desenho, ele vira ICONE em 120px, nao lastro.
- O lastro nunca e vetor generico de banco de formas. Ele sai do vocabulario de icone (objeto que a marca ja nomeia) ou e o proprio simbolo. Foguete, onda, engrenagem, rede de pontos, globo e pin de mapa de aplicativo estao proibidos por escrito.
- 🔴 PILHA DECLARADA, e ela nao se inverte: --pc-z-fundo:0 (cor ou foto) · --pc-z-grade:1 · --pc-z-lastro:2 · --pc-z-veu:3 · --pc-z-rota:4 · --pc-z-conteudo:5. E .pc leva isolation:isolate, e o .pc__veu tem que ser IRMAO do lastro (sai de dentro do .fundo). Sem isso, z-index so compara irmaos no mesmo contexto e o lastro em 2 pinta POR CIMA do veu em 3 — falha calada, medida no Chrome.
- 🔴 O MAPA DE SC NAO E LASTRO quando ele carrega os nos e as regioes. Nesse caso ele e o componente .pc__mapa: figura de primeiro plano, opaco, sobre foto, com a rota tracejada e os nos por cima — que e o que a Amanda desenhou no POST3. Sao dois componentes, com dois nomes e duas opacidades. Confundir os dois e o erro que faz a referencia dela ser citada e desobedecida no mesmo paragrafo.

**A pilha, e ela não se inverte:** fundo 0 · grade 1 · lastro 2 · véu 3 · rota 4 · conteúdo 5.

## 6. Sombra e relevo

- `--pc-sh-1` contato · `--pc-sh-2` padrão · `--pc-sh-3` **relevo**
- 🔴 O relevo são **duas camadas**: a curta prende o objeto ao plano, a longa o levanta.
  Uma sombra só, por maior que seja, faz borrão — não 3D.
- Sobe para o relevo em três casos: o elemento **sangra** a margem; **cobre** outro plano;
  está apoiado **sobre foto**.
- Sobre âncora e sobre foto a sombra escura não separa (1,23:1): ali o descolamento é
  **borda de recorte**, não sombra.
- **Nunca** no logotipo, na pílula, em traço (ícone, rota, lastro) nem em texto.

## 7. A foto nasce com o lugar do texto

A cena NASCE com o vao vazio; reenquadrar depois e conserto, nao metodo — e a prova de que hoje nao existe regua sao os SETE object-position inline espalhados pela Biblia (linhas 39, 396, 397, 413, 415, 446, 473), cada um uma foto que nasceu errada. A regua nova tem QUATRO partes. (1) ASSUNTO, e ele vem antes da composicao: a hierarquia do MARCA.md §8 e galpao > camara fria > palete > doca. Cena de estrada e o ultimo recurso, so para o publico de redespacho, e o bau que aparecer nela tem o painel LIMPO — a marca entra por composicao vetorial do assets/logo-mono-claro.svg por script, nunca pedida ao gerador (foi assim que as 5 cenas de frota foram reprovadas as 12:53 de 17/09, com a IA redesenhando o simbolo como botao de play). 

| Gabarito | Área limpa | Usa quando |
|---|---|---|
| **capa-veu (1080x1350)** | X=88→992, Y=0→760. | lamina 1 do bloco, tom FOTO, com H1 hook por cima do veu |
| **interna-foto-baixa (1080x1350)** | X=88→992, Y=0→620 (45,9% da lona). | lamina interna com texto em cima e foto sangrando embaixo |
| **foto-cartao (904x853, proporcao 1.06)** | Nenhuma reserva de texto — o texto esta fora do cartao. | a foto dentro de .pc__foto, em lamina CLARA ou ANCORA |
| **ancora-foto-lateral (1080x1350)** | X=0→600 (55,6% da LARGURA, nao da altura). | foto sobreposta sangrando pela lateral, com texto nos 512px da esquerda — o caso que sobe pro relevo (--pc-sh-3) |
| **story (1080x1920)** | X=88→992, Y=0→780 (40,6% da lona) MAIS os 250px de baixo (Y=1670→1920), que sao zona de interface do Instagram: nada de… | a variante 9:16 |
| **quadrado-conferencia (1080x1080)** | Y=88→645 medido a partir do centro do 4:5. | teste do corte do grid, em toda foto de capa |

**Frase de prompt pronta:**

```
Fotografia documental realista de [CENA], luz de dia nublado do sul do Brasil, difusa, sem sol duro e sem por do sol, lente 35–50 mm em f/4, saturacao -10, verdes puxando para #063F28 e altas para creme quente, aco nas sombras. COMPOSICAO OBRIGATORIA: a faixa de [0 a 760 px de altura | 0 a 620 px | 0 a 780 px] do quadro fica VAZIA e sem detalhe — parede lisa pintada, ceu nublado uniforme, piso de concreto ou painel de bau sem marca; nada de alta frequencia, nada de placa, nada de pilha de caixas nessa faixa, porque o texto mora ali. O assunto ocupa a metade de baixo do quadro, deslocado para a DIREITA e voltado para a esquerda, na direcao do texto. Linha do horizonte a [65% | 60%] da altura. Sem texto na cena, sem placa, sem logotipo de terceiro, sem emblema de fabricante, sem rosto identificavel, sem gravata, sem aperto de mao, sem globo, sem grafico subindo, sem caminhao generico de banco de imagem. Proporcao [4:5 1080x1350 | 9:16 1080x1920], 2K. 🔴 SE HOUVER BAU NA CENA: painel LIMPO, unbranded, no text no logo no decals — a marca entra depois, por composicao vetorial, nunca pedida ao gerador.
```

🔴 O painel do baú nasce **limpo** na geração e a marca entra por composição vetorial —
nunca se pede a marca ao gerador. Foi assim que 5 cenas saíram com a logo redesenhada em 17/09.

## 8. Ícones — 14, e a lista é fechada

- **Bau** (`bau`) — transporte, entrega dedicada, a marca aplicada no painel.
- **Camara fria** (`camara-fria`) — camara fria propria — o diferencial da marca.
- **Carga fracionada** (`carga-fracionada`) — o servico-ancora: alguns paletes pra mandar, sem precisar fechar um caminhao inteiro.
- **Cross-docking** (`cross-dock`) — cross-docking, redespacho, transbordo — a carga entra por um lado e sai pelo outro sem parar.
- **Doca** (`doca`) — coleta, entrega, carregamento, a doca de distribuicao no mesmo endereco da camara.
- **Empilhadeira** (`empilhadeira`) — movimentacao interna, o que tira o palete do caminhao, operacao do galpao.
- **Galpao** (`galpao`) — os 700 m², o pavilhao em Sao Jose, 'no mesmo galpao'.
- **Nota / romaneio** (`nota`) — documento de embarque, romaneio, cotacao, e o registro conferivel na ANTT (RNTRC 058435566).
- **Palete** (`palete`) — unidade de medida da operacao: posicao-palete, carga paletizada, quantidade de paletes.
- **Posicao-palete** (`posicao-palete`) — a estrutura do galpao: 80 posicoes de congelado, 32 de resfriado, 100 de carga seca.
- **Janela de coleta** (`relogio`) — janela de coleta, agendamento, frequencia — um dos quatro dados que abrem uma cotacao.
- **Rota** (`rota`) — distribuicao, as seis regioes, redespacho.
- **Seta** (`seta`) — avanco, 'arraste', continuidade no carrossel, rodape do ancora.
- **Termometro** (`termometro`) — faixa de temperatura, controle, congelado e resfriado.

Grade 24×24, traço 1,8, sem preenchimento, ponta e junta redondas. Dois degraus: 64 px e 128 px,
mínimo 48 px. Nenhum vão menor que 4 unidades na grade de 24.

**Nunca vira ícone aqui:** globo, seta de crescimento, aperto de mão, engrenagem, foguete,
velocímetro, rastro de velocidade, pin de mapa de aplicativo, caminhãozinho genérico.

🔴 Termômetro e câmara-fria só encostam em galpão, câmara ou palete — nunca em baú, veículo
ou rota. E o rótulo do termômetro nunca leva grau.

## 9. O que nunca sai daqui

- NUMERO EM SERIFA LIGHT — o numero de destaque e Figtree 900, nunca Newsreader, nunca abaixo de 800. Quadro novo na folha PROIBIDO, substituindo o exemplo que hoje e desenhado no proprio estilo reprovado (biblia.html:563).
- DUAS LAMINAS DO MESMO FUNDO SEGUIDAS — substitui 'dois ancoras colados', que era estreita demais e deixou passar as duas claras coladas do bloco de hoje. O que continua proibido separadamente: dois ANCORAS CHAPADOS no mesmo bloco de 6.
- CAPA CLARA SEM CABECA VERDE CHEIA — a capa e o polo forte. A unica clara permitida e a que tem a cabeca de 140px em verde-800 no topo, que e o que a peca Temperatura-Controlada-FINAL da Amanda faz.
- DEGRADE DE VERDE COMO PREENCHIMENTO — o quadro antigo dizia 'degrade de verde, em qualquer lugar' e brigava com o veu de foto em 5 lugares da propria Biblia. O veu sobre fotografia e permitido, com os valores da peca. Preenchimento de marca em degrade continua proibido.
- TEMPERATURA EM GRAUS — nenhum icone, rotulo, etiqueta ou numero da peca escreve -18, 0 a 10 nem qualquer grau, ate a pergunta 1 ao Jose voltar com o dado dele.
- ICONE DE TEMPERATURA ENCOSTANDO EM VEICULO — termometro e camara-fria nunca aparecem ao lado de bau, caminhao ou rota. Juntos, eles afirmam frota refrigerada, que e uma das travas presas na resposta do Jose.
- BAU DA MARCA GERADO POR IA — o painel nasce LIMPO na geracao e a marca entra por composicao vetorial do assets/logo-mono-claro.svg por script. Foi pedir 'caminhao com o logo da Mothus' que reprovou 5 cenas as 12:53 de 17/09, com a IA redesenhando o simbolo como botao de play.
- MAPA DE SANTA CATARINA ROTULADO 'AREA DE ENTREGA' — o estado inteiro nao e a cobertura. A entrega direta sao seis regioes nomeadas, e fora delas vai por parceiro.
- CAIXA DE PAPELAO COMO ICONE DE CARGA — o palete e a unidade de tudo. Caixa com aba aberta e vocabulario de encomenda, varejo e consumidor final.
- CARIMBO ROTACIONADO IMITANDO SELO — o RNTRC vai numa etiqueta reta com o icone nota. Selo fingido de borracha e forma que precisa ser explicada depois.
- H4 FORA DO CARD — e H4 em mais de uma lamina por bloco de 6.
- CAIXA ALTA EM H2, H3 OU H4 — a caixa alta e do hook e dos rotulos pequenos, e de mais nada. Um titulo em caixa alta por bloco.
- TOPICO HORIZONTAL — a lista e sempre em coluna, com o marcador alinhado a primeira linha. E nenhum topico com a cor travada em verde-200, que da 1,6:1 sobre creme.
- ROTA QUE NAO LIGA DOIS ELEMENTOS — e rota junto do fio-do-frio na mesma lamina. Rota solta e decoracao, e decoracao e o que a marca chama de metafora abstrata.
- SETA NA PONTA DA ROTA — a direcao quem da e o no de destino.
- ROTULO, NUMERO OU SIGLA DENTRO OU AO LADO DE UM NO EM ACENTO — o acento e forma (2,60:1 sobre creme). Rotulo de cidade vai em --mo-texto.
- LASTRO SOBRE FOTO, LASTRO INTEIRO NO MEIO DA ARTE E MAIS DE DOIS LASTROS POR LAMINA.
- SOMBRA NO LOGOTIPO — continua inteira a proibicao de logotipo com sombra, contorno, brilho ou degrade. E o erro que quem implementar 'sombra forte' vai cometer primeiro, colando a logo sobre foto.
- SOMBRA ESCURA SOBRE FUNDO ESCURO — sobre ANCORA e sobre FOTO o descolamento e borda de recorte (--pc-sh-3-inv), nunca sombra: medi 1,23:1, ela nao levanta nada.
- SOMBRA EM TRACO — icone, lastro, rota e ponto nunca tem sombra. Traco com sombra vira adesivo.
- IBM PLEX MONO EM PECA — duas familias na PECA (Newsreader e Figtree); a mono e vocabulario da DOCUMENTACAO.
- FAMILIA NOVA PARA RESOLVER ROBUSTEZ DE NUMERO — robustez se resolve por PESO dentro da Figtree. Esta linha e o que impede a decisao do numero de ser reaberta daqui a duas semanas.
- DEPOIMENTO DE TERCEIRO NA CITACAO — ate a pergunta 6 ao Jose voltar, o .pc__citacao so aceita frase da propria empresa.
- PROMETER PRAZO, DIA DE ROTA OU FREQUENCIA GARANTIDA COM O ICONE RELOGIO — ele fala de janela de coleta e de agendamento, nunca de prazo.

## 10. Tokens — base

| Token | Valor |
|---|---|
| `--mo-verde-950` | #00160e |
| `--mo-verde-900` | #06301d |
| `--mo-verde-800` | #063f28 |
| `--mo-verde-600` | #0f7350 |
| `--mo-verde-500` | #0b6e44 |
| `--mo-verde-400` | #32ae70 |
| `--mo-verde-200` | #b2d6a8 |
| `--mo-creme` | #f7f5f1 |
| `--mo-branco` | #ffffff |
| `--mo-tinta` | #12281d |
| `--mo-tinta-2` | #4a6157 |
| `--mo-linha` | #e2ded7 |
| `--mo-aco` | #888884 |
| `--mo-peso-negro` | 900 |
| `--mo-sup` | var(--mo-creme) |
| `--mo-sup-2` | var(--mo-branco) |
| `--mo-sup-ancora` | var(--mo-verde-800) |
| `--mo-sup-foto` | var(--mo-verde-950) |
| `--mo-veu-1` | color-mix(in srgb, var(--mo-verde-950) 88%, transparent) |
| `--mo-veu-2` | color-mix(in srgb, var(--mo-verde-800) 52%, transparent) |
| `--mo-veu-3` | color-mix(in srgb, var(--mo-verde-800) 0%, transparent) |
| `--mo-veu-4` | color-mix(in srgb, var(--mo-verde-950) 46%, transparent) |
| `--mo-texto` | var(--mo-tinta) |
| `--mo-texto-2` | var(--mo-tinta-2) |
| `--mo-texto-3` | var(--mo-aco) |
| `--mo-chave` | var(--mo-verde-500) |
| `--mo-rotulo` | var(--mo-verde-500) |
| `--mo-texto-inv` | var(--mo-creme) |
| `--mo-texto-2-inv` | var(--mo-verde-200) |
| `--mo-chave-inv` | var(--mo-verde-400) |
| `--mo-btn-sup` | var(--mo-verde-400) |
| `--mo-btn-texto` | var(--mo-verde-900) |
| `--mo-pilula-sup` | var(--mo-verde-600) |
| `--mo-pilula-texto` | var(--mo-branco) |
| `--mo-borda` | var(--mo-linha) |
| `--mo-grade` | var(--mo-linha) |
| `--mo-grade-escura` | var(--mo-verde-900) |
| `--mo-fio` | o fio do frio. ATRAVESSA a borda e continua no quadro vizinho — é ele que costura o feed de 9 a partir da arte única. --mo-rota : liga elementos DENTRO de uma lâmina. Curva, com pontos de parada. */ --mo-fio:var(--mo-verde-400) |
| `--mo-rota` | var(--mo-verde-400) |
| `--mo-rota-sombra` | color-mix(in srgb, var(--mo-verde-950) 35%, transparent) |
| `--mo-rota-ponto` | var(--mo-sup) |
| `--mo-rota-ponto-inv` | var(--mo-sup-ancora) |
| `--mo-icone` | var(--mo-verde-500) |
| `--mo-icone-inv` | var(--mo-verde-400) |
| `--mo-lastro` | var(--mo-verde-800) |
| `--mo-lastro-inv` | var(--mo-verde-200) |
| `--mo-lastro-op` | .06 |
| `--mo-lastro-op-inv` | .10 |
| `--mo-num-fam` | var(--mo-sans) |
| `--mo-num-peso` | var(--mo-peso-negro) |
| `--mo-faixa-congelado` | var(--mo-verde-950) |
| `--mo-faixa-resfriado` | var(--mo-verde-500) |
| `--mo-faixa-seca` | var(--mo-verde-200) |
| `--mo-sans` | "Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif |
| `--mo-serif` | "Newsreader",Georgia,"Times New Roman",serif |
| `--mo-peso-corpo` | 450 |
| `--mo-peso-medio` | 500 |
| `--mo-peso-forte` | 650 |
| `--mo-peso-chave` | 800 |
| `--mo-container` | 82rem |
| `--mo-pad-x` | clamp(1.25rem,4vw,2rem) |
| `--mo-sec` | clamp(4rem,9vh,7.5rem) |
| `--mo-r-sm` | 10px |
| `--mo-r-md` | 12px |
| `--mo-r-lg` | 16px |
| `--mo-r-xl` | 1.5rem |
| `--mo-r-foto` | 34px |
| `--mo-r-pill` | 999px |
| `--mo-e1` | .5rem |
| `--mo-e2` | .75rem |
| `--mo-e3` | 1rem |
| `--mo-e4` | 1.5rem |
| `--mo-e5` | 2rem |
| `--mo-e6` | 3rem |
| `--mo-e7` | 6rem |
| `--mo-sombra` | color-mix(in srgb, var(--mo-tinta) 17%, transparent) |
| `--mo-sombra-contato` | color-mix(in srgb, var(--mo-verde-950) 22%, transparent) |
| `--mo-sombra-forte` | color-mix(in srgb, var(--mo-verde-950) 34%, transparent) |
| `--mo-sh-chip` | 0 12px 28px var(--mo-sombra) |
| `--mo-sh-card` | 0 18px 44px var(--mo-sombra) |
| `--mo-sh-painel` | 0 30px 70px var(--mo-sombra) |
| `--mo-sh-relevo` | 0 8px 18px var(--mo-sombra-contato), 0 40px 80px var(--mo-sombra-forte) |
| `--mo-ease` | cubic-bezier(.4,0,.2,1) |
| `--mo-easeOut` | cubic-bezier(0,0,.58,1) |
| `--mo-t-pressao` | 120ms |
| `--mo-t-micro` | 180ms |
| `--mo-t-ui` | 300ms |
| `--mo-t-entra` | 700ms |
| `--mo-btn-pad` | .9rem 1.6rem |
| `--mo-btn-fs` | 14.5px |
| `--mo-olho-fs` | 12px |
| `--mo-olho-track` | .18em |

## 11. Tokens — peça (lona 1080 × 1350)

| Token | Valor |
|---|---|
| `--pc-larg` | 1080px |
| `--pc-alt` | 1350px |
| `--pc-alt-story` | 1920px |
| `--pc-margem` | 88px |
| `--pc-corte-grid` | 135px |
| `--pc-seguro-topo` | calc(var(--pc-margem) + var(--pc-corte-grid)) |
| `--pc-seguro-base` | calc(var(--pc-margem) + var(--pc-corte-grid)) |
| `--pc-util` | 904px |
| `--pc-e1` | 16px |
| `--pc-e2` | 24px |
| `--pc-e3` | 32px |
| `--pc-e4` | 48px |
| `--pc-e5` | 64px |
| `--pc-e6` | 88px |
| `--pc-e7` | 128px |
| `--pc-h1` | 132px |
| `--pc-h1-fam` | var(--mo-sans) |
| `--pc-h1-peso` | var(--mo-peso-chave) |
| `--pc-h1-lh` | .92 |
| `--pc-h1-track` | .01em |
| `--pc-h1-caixa` | uppercase |
| `--pc-h1-7` | 164px |
| `--pc-h1-8` | 152px |
| `--pc-h1-9` | 132px |
| `--pc-h1-10` | 120px |
| `--pc-h1-11` | 112px |
| `--pc-h1-12` | 104px |
| `--pc-h1-13` | 96px |
| `--pc-h2` | 92px |
| `--pc-h2-capa` | 68px |
| `--pc-h2-fam` | var(--mo-serif) |
| `--pc-h2-peso` | 800 |
| `--pc-h2-lh` | 1.00 |
| `--pc-h2-track` | -.025em |
| `--pc-h2-max` | 34ch |
| `--pc-h3` | 46px |
| `--pc-h3-peso` | var(--mo-peso-forte) |
| `--pc-h3-lh` | 1.12 |
| `--pc-h3-track` | -.005em |
| `--pc-h3-max` | 28ch |
| `--pc-h4` | 34px |
| `--pc-h4-peso` | var(--mo-peso-corpo) |
| `--pc-h4-lh` | 1.5 |
| `--pc-h4-max` | 38ch |
| `--pc-chave` | 124px |
| `--pc-chave-track` | -.02em |
| `--pc-complemento` | 84px |
| `--pc-apoio` | 42px |
| `--pc-apoio-max` | 26ch |
| `--pc-cta` | 40px |
| `--pc-legenda` | 28px |
| `--pc-lh-titulo` | 1.04 |
| `--pc-lh-apoio` | 1.42 |
| `--pc-numero` | 210px |
| `--pc-numero-fam` | var(--mo-num-fam) |
| `--pc-numero-peso` | var(--mo-num-peso) |
| `--pc-numero-lh` | .86 |
| `--pc-numero-track` | -.035em |
| `--pc-numero-num` | lining-nums proportional-nums |
| `--pc-numero-unidade` | 56px |
| `--pc-numero-trio` | 96px |
| `--pc-numero-regua` | 6px |
| `--pc-rota-traco` | 6px |
| `--pc-rota-raio` | 120px |
| `--pc-rota-raio-min` | 72px |
| `--pc-rota-raio-max` | 180px |
| `--pc-rota-dash` | 2 18 |
| `--pc-rota-vao` | 32px |
| `--pc-fio` | var(--pc-rota-traco) |
| `--pc-ponto-d` | 28px |
| `--pc-ponto-borda` | 6px |
| `--pc-ponto-d-origem` | 24px |
| `--pc-ponto-d-destino` | 36px |
| `--pc-ponto-halo` | 52px |
| `--pc-marcador-d` | 22px |
| `--pc-marcador-top` | 12px |
| `--pc-icone` | 64px |
| `--pc-icone-g` | 128px |
| `--pc-icone-min` | 48px |
| `--pc-icone-traco` | 4px |
| `--pc-icone-caixa` | 96px |
| `--pc-icone-gap` | 24px |
| `--pc-lastro-tam` | 368px |
| `--pc-lastro-min` | 216px |
| `--pc-lastro-max` | 560px |
| `--pc-lastro-sangra-max` | 840px |
| `--pc-lastro-off` | -65px |
| `--pc-lastro-traco` | 8px |
| `--pc-lastro-sangra` | 12% |
| `--pc-lastro-max-qtd` | 2 |
| `--pc-z-fundo` | 0 |
| `--pc-z-grade` | 1 |
| `--pc-z-lastro` | 2 |
| `--pc-z-veu` | 3 |
| `--pc-z-rota` | 4 |
| `--pc-z-conteudo` | 5 |
| `--pc-card-pad` | 44px |
| `--pc-card-r` | 24px |
| `--pc-card-borda` | 2px |
| `--pc-card-sup` | var(--mo-sup-2) |
| `--pc-card-sup-inv` | var(--mo-verde-950) |
| `--pc-card-tarja` | 6px |
| `--pc-topico` | 36px |
| `--pc-topico-lh` | 1.3 |
| `--pc-topico-gap` | 28px |
| `--pc-topico-recuo` | 56px |
| `--pc-topico-ch` | 42ch |
| `--pc-topico-max` | 5 |
| `--pc-topico-min` | 3 |
| `--pc-cabeca-alt` | 140px |
| `--pc-cabeca-r` | 44px |
| `--pc-cabeca-sup` | var(--mo-sup-ancora) |
| `--pc-cabeca-logo` | 184px |
| `--pc-logo-larg` | 184px |
| `--pc-respiro-logo` | 50px |
| `--pc-etiqueta-fs` | 26px |
| `--pc-etiqueta-pad` | 14px 28px |
| `--pc-etiqueta-r` | 8px |
| `--pc-faixa-alt` | 24px |
| `--pc-faixa-vao` | 4px |
| `--pc-citacao` | 52px |
| `--pc-selo-r` | 16px |
| `--pc-r-foto` | 34px |
| `--pc-r-pilula` | 999px |
| `--pc-pilula-pad` | 34px 56px |
| `--pc-pilula-y` | 1055px |
| `--pc-grade-ang` | 12deg |
| `--pc-grade-ripa` | 3px |
| `--pc-grade-vao` | 26px |
| `--pc-sh-1` | 0 8px 20px var(--mo-sombra) |
| `--pc-sh-2` | 0 20px 44px color-mix(in srgb, var(--mo-verde-950) 25%, transparent) |
| `--pc-sh-3` | 0 10px 22px var(--mo-sombra-contato), 0 44px 88px var(--mo-sombra-forte) |
| `--pc-sh-3-inv` | 0 0 0 8px var(--mo-sup-ancora), 0 44px 88px color-mix(in srgb, var(--mo-verde-950) 55%, transparent) |
| `--pc-foto-borda` | 4px |
| `--pc-veu` | linear-gradient(180deg, var(--mo-veu-1) 0%, var(--mo-veu-2) 30%, var(--mo-veu-3) 55%, var(--mo-veu-3) 76%, var(--mo-veu-4) 100%) |
| `--pc-limpa-capa` | 760px |
| `--pc-limpa-interna` | 620px |
| `--pc-limpa-lateral` | 600px |
| `--pc-limpa-story` | 780px |
| `--pc-horizonte` | 65% |
| `--pc-foto-pos` | 50% 50% |
| `--pc-ritmo-ciclo` | 3 |
| `--pc-ancora-max` | 1 |
| `--pc-ritmo-dl` | 18 |
| `--pc-foto-l-min` | 42 |
| `--pc-foto-l-max` | 68 |