Um deck que a pessoa
navega, não assiste.

# BRIEFING DO DECK

## A decisão
Ao final da apresentação, [QUEM] deve [FAZER O QUÊ].
Prazo dessa decisão: [quando]
O que acontece se ele disser não: [consequência]

## Quem decide
Perfil: [cargo, setor, o que já sabe do assunto]
Nível técnico: [leigo / intermediário / especialista]
Tempo real de atenção: [minutos]
As 3 objeções que ele vai levantar:
1. [objeção]
2. [objeção]
3. [objeção]

## A empresa
Nome, CNPJ, onde fica, desde quando:
O que faz, em uma frase sem adjetivo:
Quem manda e há quanto tempo:
Quatro marcos com ano (fundação, virada, hoje, próximo):

## Os números
Formato: valor · o que mede · fonte · data. Sem fonte, marque [SEM LASTRO].
- [ex: R$ 213/m² · preço médio no mercado interno · tabela de indústria · 06-09/2026]
- ...

## A oferta
O que está sendo pedido/vendido:
Quanto, por quanto tempo, a que taxa/preço:
O que a pessoa recebe em troca:
Garantia / lastro / o que protege ela:
Como o dinheiro será usado (com percentual):

## Concorrência e alternativa
Contra o que você está sendo comparado:
Por que a sua opção é melhor, com número:

## Ativos
Imagens disponíveis em img/src/: [liste]
Logo: [caminho]
Documento de origem: [pptx, pdf, planilha]

## Restrições
NÃO pode aparecer no deck: [lista]
Precisa aparecer obrigatoriamente: [lista]
Idioma: [pt-BR / en]

## Tarefa
1. Leia tudo e me devolva a LISTA DE BURACOS: o que falta,
   o que está sem fonte, o que se contradiz. Não invente nada
   pra preencher — pergunte.
2. Depois de eu responder, proponha a ESTRUTURA: 4 atos,
   quantas telas em cada, título e a única mensagem de cada tela.
3. Só depois disso a gente escreve conteúdo.

# CONSTRUIR O DECK

Monte uma apresentação HTML a partir da estrutura aprovada acima.
Não é uma landing page de scroll. É um deck navegável por tela.

## Arquitetura obrigatória

- Palco fixo de 1600x900px numa div #deck, centralizada.
  Função escala() faz transform:scale(Math.min(innerWidth/1600,
  (innerHeight-40)/900)) e roda no resize.
- Cada tela e uma <section class="chapa" data-t="Titulo"
  data-ato="I|II|III|IV">, position:absolute, inset:0, opacity:0.
  A tela atual recebe .ativa. Transicao: opacity .55s ease.
- Navegacao construida em runtime lendo data-t e data-ato:
  progresso no topo, pontinhos por tela (losango marca inicio de ato),
  contador NN / TT, botoes anterior/proximo/indice/tela cheia.
- Teclado: setas e espaco navegam, I abre o indice, F tela cheia,
  Esc fecha overlay, Home/End vao pro extremo.
- Touch: swipe horizontal com limiar de 60px.
- location.hash guarda o numero da tela e restaura no load.
- Todo dado estruturado (listas, tabelas, series) vive em constantes
  JS no topo do script. As telas sao geradas por template a partir delas.

## Sistema visual

Fundo [COR]. Acento unico [COR] usado em numero, eyebrow e CTA.
Titulo em [FONTE DISPLAY], corpo em [FONTE SANS], numero e label
tecnica em [FONTE MONO] com font-variant-numeric:tabular-nums.
Borda 1px [COR]. Sem sombra tradicional — profundidade vem de
camada de cinza e glow do acento.

Componentes reutilizaveis: .eyebrow (linha + label mono maiuscula),
.card, .kpi (valor mono grande + label), .tag, .fonte (rodape de
fonte em mono 11px), .rodape fixo com nome do documento e data.

## Interativos

Implemente apenas os que o conteudo pede:
- timeline clicavel com barra que preenche ate o marco selecionado
- galeria com troca de imagem no hover e lightbox com texto ao lado
- lista mestre-detalhe (clica no item da esquerda, detalha na direita)
- simulador com slider + segmented control que recalcula KPIs e barras
- grafico SVG desenhado por JS a partir dos dados, com tooltip no hover
- donut SVG com stroke-dasharray e destaque ao passar o mouse

Nenhuma biblioteca externa. SVG na mao, JS puro.

## Pipeline de arquivos

src/deck.template.html  - fonte editavel, imagens como {{img:nome}}
src/build.py            - troca marcador por data:base64 e gera o final
img/src/                - originais
img/opt/                - otimizadas (largura max 1600, qualidade 78)
[NOME]_Deck.html        - saida, arquivo unico, abre offline

Crie o build.py. Ele le o template, resolve todo {{img:nome}} pra
data URI, injeta o JSON de imagens no lugar de {{IMGJSON}} e escreve
a saida. Nunca edite o HTML final na mao.

## Acessibilidade e degradacao

- prefers-reduced-motion: reduce desliga transicao e animacao
- foco visivel com outline na cor de acento
- alt em toda imagem
- contraste minimo AA no texto de corpo

## Ordem de trabalho

1. Monte o esqueleto: template, build.py, navegacao, 2 telas de teste.
   Rode o build e me mostre que abre.
2. Depois construa as telas em blocos de 4, do Ato I ao IV.
3. Ao final de cada bloco, rode o script de screenshot e me mostre.

Nao invente numero. Se faltar dado, pare e pergunte.

# REFINO DE MOVIMENTO

Abra as telas [N a N] num canvas de design, um artboard por tela,
pra eu ajustar visualmente antes de voltar pro template.

## Grade de timing (aplicar em tudo)

Troca de tela .................. 550ms  ease
Entrada de bloco ............... 700ms  cubic-bezier(.2,.7,.2,1)
Atraso entre blocos ............  80ms  (max 8 blocos)
Barra / medidor ................ 1200ms mesma curva
Desenho de grafico ............. 900 a 1400ms
Hover / estado ................. 200 a 250ms
Ambiente de fundo .............. loop lento, opacidade < 0.55

Uma unica curva de easing no deck inteiro. Nada de "bounce",
nada de rotacao 3D, nada de elemento que entra da direita.
O movimento e sempre: sobe um pouco e aparece.

## Regras

1. Toda animacao de entrada e prefixada por .ativa —
   dispara quando a tela abre, nao quando a pagina carrega.
2. Barras, contadores e graficos resetam na funcao de navegacao.
   Voltar pra tela anterior e voltar toca de novo.
3. Titulo, rodape e navegacao nunca animam.
4. Animar so transform e opacity. Nada de animar width, height,
   top ou left.
5. @media (prefers-reduced-motion:reduce) desliga transicao,
   animacao e o fundo animado. O conteudo continua legivel.
6. O ambiente de fundo para de desenhar quando reduced-motion
   esta ligado — nao so fica invisivel, para o requestAnimationFrame.

## O que eu quero ajustar no canvas

- ordem de entrada dos blocos em cada tela
- espacamento vertical entre eyebrow, titulo e corpo
- tamanho e peso dos KPIs
- alinhamento dos graficos com o texto ao lado
- respiro das margens do palco

Depois que eu aprovar, traga tudo de volta como edicao no
src/deck.template.html, rode o build e os screenshots.