Estrutura visual para crescer com consistência.

• Títulos: text-wrap: balance; parágrafos: text-wrap: pretty.
• Largura de leitura: no máximo 65 caracteres por linha no texto corrido.
• Destaque em título: uma palavra ou expressão em terracota por título, nunca a frase inteira.
• Caixa alta: só em kicker, mono-label e botão, sempre com tracking.
• Fontes: carregar só os pesos listados; ao sair do Google Fonts, hospedar localmente com subset latin (padrão do Santos TP).

No escuro, bordas usam branco a 12% (normal) e 22% (forte).

Quando um modal ou o aviso de cookies está aberto, o botão do WhatsApp se esconde (padrão Santos TP).

• Curvas: --ease-padrao cubic-bezier(.2,0,0,1) para interação; --ease-saida cubic-bezier(.22,1,.36,1) para entrada.
• Hover: deslocamento máximo de 2px, ou só troca de cor e borda.
• Revelar ao rolar: o conteúdo nasce visível; a animação é bônus, nunca condição para ler.
• Movimento reduzido: com prefers-reduced-motion, todas as transições caem para 0.

• Pessoa: "nós" para a CloudPage, "você" para o cliente.
• Número e depoimento: só com cliente real e autorização. Nada de dado ilustrativo em produção.
• Erro: diz o que aconteceu e o próximo passo, sem pedir desculpa genérica.
• Rodapé: razão social e CNPJ em toda página e LP.

/* tokens.css · gerado a partir de tokens.json */
:root {
  /* primitivos */
  --carvao-900: #1B1B18;   --carvao-800: #292924;   --carvao-600: #5E594F;
  --terracota-600: #C2410C; --terracota-700: #9E3409; --terracota-400: #D9774C;
  --areia-50: #FFF9F0;     --areia-300: #F3EAD2;

  /* semânticos · claro */
  --bg: var(--areia-50);          --surface: #FFFDF9;
  --text: var(--carvao-900);      --text-muted: var(--carvao-600);
  --accent-text: var(--terracota-600);
  --action: var(--terracota-600); --action-hover: var(--terracota-700);
  --border: var(--carvao-200);    --focus: var(--terracota-600);

  /* tipografia */
  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-sans: "Hind", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;

  /* forma, profundidade, camadas, movimento */
  --radius-sm: 4px; --radius-lg: 8px;
  --shadow-md: 0 8px 20px -6px rgb(27 27 24 / .14);
  --z-header: 20; --z-float: 40; --z-modal: 60;
  --dur-base: 250ms; --ease-saida: cubic-bezier(.22,1,.36,1);
}

[data-theme="dark"] {
  --bg: var(--carvao-900); --surface: var(--carvao-800);
  --text: var(--carvao-100); --text-muted: var(--carvao-400);
  --accent-text: var(--terracota-400); --focus: var(--terracota-400);
}