Sete princípios que governam o deck

Antes de qualquer token: as decisões abaixo explicam por que a proposta é como é. Quando surgir uma situação nova, decida por elas.

Cor

Oito tokens e um punhado de cinzas derivados. Qualquer necessidade nova se resolve com eles ou com transparências de tinta e papel. Cor nova no deck é regressão.

Tokens do kit

Derivados fixos (sem token, valor cravado no CSS)

Pares de contraste (WCAG AA)

Tipografia

Uma família só: Outfit, em seis pesos. Não existe serifa, não existe itálico fora da citação do .release. A hierarquia é feita com peso, tamanho e caixa alta.

Escala (valores renderizados em 1600×900)

Regras de composição

Tela, grid, espaçamento e fundos

Toda medida do kit é relativa à tela (vw/vh), por isso o deck preenche qualquer monitor sem rolagem. A referência de QA é 1600×900; os valores em pixel abaixo são desse tamanho.

Elementos decorativos

Ritmo de fundos

Escuro e claro alternam com função: o escuro para o leitor, o claro faz ele ler. Nas quatro propostas-base, 12 telas escuras em 44 a 50 telas. A sequência típica:

Capa (escuro) → institucional, logos e cases (claro) → transição "Ouvimos com atenção" (escuro, fantasma com o nome do cliente) → momento (claro) → desafios alternando (escuro com número-herói ou gráfico; claro com cards e tabelas) → diagnóstico (claro) → citação (escuro) → MÉTODO (escuro) → método e etapas (claro; uma etapa escura quando carrega decisão de plataforma ou mock de busca) → "Isso não é promessa. É método." (escuro) → funcionamento, time, contato, escopo, horas e Glassdoor (claro) → pergunta de investimento (escuro) → investimento, tabelas, incluso e premissas (claro) → CTA (escuro).

Duas telas escuras seguidas só acontecem na dupla citação → MÉTODO. Três seguidas, nunca.

Breakpoint

Componentes

Os átomos do kit, renderizados com o CSS de produção em telas de amostra. Cada amostra é uma tela 16:9 completa, no mesmo escalonamento do deck.

Átomos sobre o papel

Átomos sobre o escuro

Cards e mocks

Dados e contadores

Telas do deck

Os modelos de tela, na ordem em que aparecem na proposta, renderizados com o CSS de produção. O texto é de propostas reais ou placeholder; a estrutura é a que se repete. Cada modelo diz o que é fixo e o que é personalizado.

Capa

Fixo: "PLANO MESTRE" em t-hero, kicker com mês e ano, duas diagonais. Variável: nome do cliente em .b e o nome do projeto em .muted ("Projeto de Gestão de Mídia · Google Ads", "Redesign do site com preservação de SEO e geração de MQLs", "Diagnóstico e Plano de SEO & GEO"). A barra de progresso, a marca e o contador de páginas (com setas clicáveis) vivem fora das telas, fixos na janela.

A Agência Mestre

Fixo: 18 anos (ano corrente − 2008), 500+ empresas, 65 colaboradores. Variável: as três colunas mudam de nome e de texto conforme o serviço (Sites com SEO embarcado / Aquisição / Análise de dados em projeto de site; Aquisição com o selo Google Premier Partner em projeto de mídia). A última coluna termina na métrica do lead: "até o MQL e a venda", "até o agendamento".

Quem confia na Mestre

Grade de 6 colunas com 30 logos em PNG monocromático (base64), altura máxima 4.6vh, cada img com --ar inline. A linha de setores em t-small com ls .18em coloca o setor do lead primeiro. Os logos vêm do kit congelado; não se redesenha logo de cliente.

Case de sucesso

De 1 a 3 cases, um por tela, escolhidos pelo serviço e pelo segmento do lead (um deles de GEO quando a proposta tem SEO). O número principal é conferido na página individual do case antes de entrar. A frase da régua para baixo amarra o case ao lead ("É o mesmo ponto de partida…", "É o jogo da SocialLadder:"). Variantes: três contadores lado a lado (mídia), ou Desafio → Estratégia Mestre → Resultado em três colunas. Em projeto de site, uma segunda tela mostra prints do antes e depois em .cimg de altura fixa.

Até a IA (condicional)

Entra só quando o lead contou que chegou à Mestre por uma IA ou quando o projeto tem GEO. O título muda com a origem: "Você chegou até nós pelo ChatGPT. Não foi sorte." quando foi o caso. O mock declara "SIMULAÇÃO" no rótulo.

Transições

Padrão hero_frase: linha 1 em t-lg Regular, linha 2 em t-xl Black, centradas. O fantasma leva uma palavra só, em caixa alta: o primeiro nome do cliente, MÉTODO, GEO, PLANTA. A segunda linha da transição de abertura é a dor em uma frase ("A pergunta não é se o site muda. É o que não pode mudar junto."). Na transição para o método, a frase ecoa o diagnóstico ("Para desenhar a planta, existe um método.").

O momento do cliente

Três fatos do lead em t-lg.bk com parágrafo, e a caixa fechando com a frase da triagem. Tudo personalizado; a citação é atribuída à empresa ("Nas palavras de vocês"), nunca ao decisor pelo nome.

Desafio com número-herói

Bloco hero_numero: número com sinal fora do contador, legenda em t-md.b, contexto em t-small, gráfico real ao lado com marcos anotados. A régua separa os chips de métricas e a linha de fonte, que nomeia o tipo de análise sem citar ferramenta ("análise de visibilidade orgânica", "rastreamento técnico do site"). Variantes do mesmo bloco: "O site novo subiu. / O MQL caiu." (hero_frase com cards abaixo), buscas certas × erradas com .vbar, ranking de concorrentes com .bars.

Desafio em cards (raio-X técnico)

Cada card abre com a régua de 2px em tinta (animada da esquerda), título-achado com o número dentro e corpo em t-small. Fileira em align-items:stretch, títulos em linha única. O mesmo esqueleto serve ao "Como falamos com você" (4 cards com t-lg.bk) e ao diagnóstico (3 cards).

Diagnóstico (travas)

Fecha a seção de desafios. Título sempre no molde "N travas. Um mesmo efeito: [consequência]." Entre 2 e 4 travas, cada uma com título-conceito de duas palavras e parágrafo com os números da triagem. A caixa final vira a chave para o método: o que o lead já tem e o que falta.

Citação e reforço do método

A citação entra só quando o lead disse algo forte de verdade, literal, com aspas tipográficas e atribuição à empresa e ao contexto ("reunião de diagnóstico, setembro de 2026"). O reforço "Isso não é promessa. É método." é fixo e fecha o bloco do método em toda proposta.

O método (visão macro)

O método tem nome próprio (SEO & GEO Mestre, Mídia Mestre, Site Mestre, Inbound Mestre) e a prova de autoridade fixa. De 4 a 6 etapas numeradas; a linha de rodapé diz como elas se distribuem no tempo. Quando uma etapa não toca o serviço, ela sai ou é adaptada; nada fica genérico.

Tela de etapa

Toda tela de etapa carrega o número fantasma no canto superior direito e o kicker "Etapa N · Nome". O corpo varia: persona ao lado de três fontes (Etapa 1), lista de termos com chips (Etapa 2), fluxo + dois blocos (implementação), árvore de .org (arquitetura), quatro cards de versão (teste A/B). A tela de etapa só vai ao escuro quando carrega uma decisão (WordPress ou HubSpot) ou um mock de busca.

Sequência de Key Visual (com criativos, design ou landing pages)

Sequência de referência (Knewin): "Tudo começa por um Key Visual", "O que o Key Visual entrega na prática" e "Um sistema visual. Vários ângulos de venda". Entra sempre que a proposta inclui criativos, design ou landing pages. As imagens são as do projeto da casa, em base64; os quatro ângulos recebem legenda com a dor do lead.

Como funciona (duração e timeline)

"12 meses. Nem mais, nem menos." é o padrão; projetos de site usam "90 dias de projeto" com a ressalva de estimativa condicionada às aprovações, em asterisco. Três fases, três barras, três colunas. Fase 1 / Fase 2 ganham uma tela de timeline cada.

Quem cuida do projeto

Três níveis: direção, gestores, operação. O contato direto e a pessoa de Sucesso do Cliente ficam em caixas invertidas (ou tracejada, abaixo da fileira, quando a fileira tem 5 caixas). O número do time é contado e bate com as caixas. Sucesso do Cliente aparece aqui, na cadência de contato e no escopo, em toda proposta.

Como falamos com você

Escopo

Duas telas: "O que entregamos na largada" (setup e planejamento) e "O que rodamos mês a mês" (operação contínua, com a nota "quantidades totais do projeto, distribuídas mês a mês"). Categorias em tag invertida, quantidades explícitas, itens com régua. Aqui pode citar ferramenta (GA4, Search Console, WordPress). Quantidades e valores saem do arquivo "Escopos e Valores".

Módulo de horas (tela separada)

Horas de implementação sempre em tela própria, em um dos três formatos: inclusas no escopo, pacote avulso (valor fechado, diluível nas parcelas) ou módulo mensal (banco de horas). O preço do módulo ganha a tela de investimento própria, no mesmo molde "12× R$ X".

Âncora Glassdoor

Três ou quatro cards com faixa, salário-base médio e o Custo CLT no rodapé em tinta. O título arredonda a soma para baixo ("mais de R$ 25 mil", "mais de R$ 30 mil"). Entra em toda proposta em português de serviço contínuo; sai das versões em inglês. Cargos e valores do catálogo oficial no método geral.

Pergunta de investimento e CTA

A pergunta retoma a dor central em uma frase e termina com "E qual o investimento para…". O CTA é fixo: "Demos o primeiro passo. / Agora é a sua vez." com comercial@agenciamestre.com e o telefone, sem closer nomeado. Em versões com closer definido, entra e-mail e ramal da pessoa.

Investimento (parcelado)

Sempre parcelado ("12× R$ 15.000", "3× R$ 14.000"), nunca o total do contrato. Em dólar, a linha de referência em t-md cinza logo abaixo ("≈ 3× US$ 2.800 · referência de R$ 5,00 por dólar em 09/10/2026"). Com âncora, o valor riscado entra em t-lg .strike acima do t-hero.

Setup + Fee mensal (mídia paga)

Uma tela só com "Setup + Fee mensal" na mesma linha; a tabela de gerenciamento vem na tela seguinte, sempre, com o exemplo de leitura para a verba do lead. Faixas e valores vigentes são os do arquivo "Escopos e Valores". A versão em dólar usa .mrow com .usd.

Cenários de verba e tarja de fase

Cenários: três cards com a conta completa (verba + gestão = total), o recomendado invertido. A tarja de fase entra em propostas de duas fases, acima do título, para não deixar dúvida sobre a que valor cada tela se refere; o número fantasma repete a fase. Âncora riscada em .strike só quando houver condição real com prazo.

Reforço do incluso e premissas

Premissas em duas colunas de itens com régua (a classe .tight compacta listas longas sem cortar premissa). A permanência vai na caixa de duas colunas com o "OU" central, nunca como item de lista. Em módulos mensais dentro de um projeto fechado, a caixa recebe o kicker "Permanência e saída dos módulos mensais".

Blueprint do deck

A ordem é uma sequência de persuasão. Cada bloco prepara o seguinte; nenhum troca de lugar. Blocos marcados como condicionais entram quando a condição existe e saem sem deixar buraco.

Movimento

Toda animação usa a mesma curva, cubic-bezier(.22,1,.36,1), e só anima transform, opacity e clip-path. A ordem de entrada é controlada por --d, em passos de 90ms.

Sequência padrão de --d em uma tela de conteúdo: kicker (k) → título (1) → parágrafo de abertura (2) → blocos ou cards (3 a 7, um passo cada) → régua (line) → caixa final ou linha de fonte (8 a 9). Cards de uma mesma fileira podem pular de dois em dois (2, 4, 6) para a leitura acompanhar o olho.

Teclado: setas, PageUp/PageDown, espaço, Home, End e F para tela cheia. Toque: arrastar 50px troca de tela. O índice vai para o hash da URL, então um link #12 abre direto na tela 13. Tudo desliga sob prefers-reduced-motion: reduce, com contadores fixos no valor final.

Conteúdo e copy

Tom

Consultivo, em primeira pessoa do plural, com o lead no "vocês". O título de cada tela afirma algo que o leitor reconhece ("O site novo subiu. O MQL caiu.", "Na saúde, o Google só confia em quem assina."), e o corpo prova com número, fonte e consequência de negócio. A proposta fala como alguém que já estudou a casa, não como um catálogo.

Fórmulas que se repetem

Fatos que não mudam sem confirmação

Regras comerciais nas telas de preço

Engenharia

Um arquivo HTML, sem dependência além da fonte. O design é um ativo congelado (o kit); o conteúdo é o que muda. Abaixo, o esqueleto, o kit completo e o pipeline de build e QA.

Esqueleto do arquivo

<!-- head -->
<title>Plano Mestre · Nome do Cliente</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;900&display=swap" rel="stylesheet">
<style> /* kit congelado + adições do deck + CSS aditivo + @media */ </style>

<!-- uma tela -->
<section class="slide light">
  <div class="num-ghost" style="position:absolute;right:7vw;top:6vh;font-size:clamp(90px,13vw,13rem)">3</div>
  <div class="kicker" data-a="k">Etapa 3 · Implementação</div>
  <h2 class="t-xl mt1" data-a style="--d:1">Nós documentamos. <span class="bk">Nós implementamos.</span></h2>
  <div class="cols c2 mt3" style="align-items:start">
    <div data-a style="--d:4"><div class="t-md b">…</div><p class="t-body mt1">…</p></div>
    <div data-a style="--d:5">…</div>
  </div>
  <div class="inkbox mt3" data-a style="--d:7"><div class="lbl">…</div><p class="t-md mt1" style="line-height:1.45">… <span class="b" style="color:var(--paper)">…</span></p></div>
</section>

<!-- chrome fixo, depois da última tela -->
<div id="progress"></div>
<div id="brand">Agência Mestre</div>
<div id="hint"><span id="pg">1</span> / <span id="tot">30</span> · <span class="navbtn" id="prev">←</span> <span class="navbtn" id="next">→</span></div>
<script> /* navegação, abaixo */ </script>

CSS aditivo obrigatório (antes do @media, sem tocar no kit)

h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
/* medida de linha no escuro, já consolidada nos decks recentes */
.dark .t-md{line-height:1.5}
.dark .t-body{line-height:1.62;font-weight:500}
.dark .t-small{font-weight:500}

:root{
  --ink:#0a0a0a; --paper:#f4f2ed; --grey:#6b6760; --grey-d:#93908a;
  --mid:#4a4740; --tone:#e3dfd4; --tone-ink:#151515; --line:#dcd8cc;
  --ease:cubic-bezier(.22,1,.36,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{width:100%;height:100%;overflow:hidden;background:var(--ink)}
body{font-family:'Outfit',system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:var(--ink);color:var(--paper)}

/* ---------- SLIDES ---------- */
.slide{position:fixed;inset:0;display:flex;flex-direction:column;justify-content:center;
  padding:7vh 7vw;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .75s var(--ease),transform .75s var(--ease),visibility 0s .75s;
  transform:scale(.988);overflow:hidden;isolation:isolate}
.slide.active{opacity:1;visibility:visible;pointer-events:auto;transform:scale(1);transition-delay:0s}
.dark{background:var(--ink);color:var(--paper)}
.light{background:var(--paper);color:var(--ink)}

/* grain nos slides escuros */
.dark::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

/* diagonais brutalistas (fundo) */
.diag{position:absolute;top:-12vh;bottom:-12vh;width:9vw;z-index:-1;background:var(--tone-ink);
  transform:skewX(-16deg);pointer-events:none}
.light .diag{background:#ecE8dd}

/* wordmark fantasma */
.ghost{position:absolute;left:50%;top:50%;z-index:-1;transform:translate(-50%,-50%);
  font-weight:900;font-size:24vw;letter-spacing:-.01em;color:#101010;
  pointer-events:none;user-select:none;white-space:nowrap}

/* ---------- TIPOGRAFIA ---------- */
.kicker{font-weight:500;font-size:clamp(12px,1vw,13px);letter-spacing:.34em;text-transform:uppercase;color:var(--grey)}
.dark .kicker{color:var(--grey-d)}
.t-hero{font-weight:900;font-size:clamp(72px,17vw,19rem);line-height:.92;letter-spacing:-.015em}
.t-big{font-weight:900;font-size:clamp(40px,7.2vw,7.5rem);line-height:1;letter-spacing:-.01em}
.t-xl{font-size:clamp(30px,4.2vw,4.2rem);line-height:1.16}
.t-lg{font-size:clamp(24px,3vw,3rem);line-height:1.2}
.t-md{font-size:clamp(17px,1.55vw,1.65rem);line-height:1.4}
.t-body{font-size:clamp(14px,1.15vw,1.2rem);line-height:1.55;color:var(--grey)}
.dark .t-body{color:var(--grey-d)}
.t-small{font-size:clamp(13px,.95vw,1rem);line-height:1.55;color:var(--grey)}
.dark .t-small{color:var(--grey-d)}
.b{font-weight:700}.bk{font-weight:900}.lt{font-weight:300}
.muted{color:var(--grey)}.dark .muted{color:var(--grey-d)}

/* ---------- LAYOUT HELPERS ---------- */
.cols{display:grid;gap:3.4vw}
.c3{grid-template-columns:repeat(3,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}
.c2{grid-template-columns:repeat(2,1fr)}
.mt1{margin-top:1.4vh}.mt2{margin-top:3vh}.mt3{margin-top:5vh}.mt4{margin-top:7vh}
.hr{height:1px;background:var(--line);border:0;transform-origin:left;width:100%}
.dark .hr{background:#242424}
.num-ghost{font-weight:900;font-size:clamp(56px,7.5vw,8rem);line-height:1;color:var(--tone);z-index:-1}
.chip{display:inline-block;border:1px solid var(--ink);padding:.7em 1.1em;font-size:clamp(12px,1.05vw,1.1rem)}
.inkbox{background:var(--ink);color:var(--paper);padding:2.6vh 2.2vw}
.inkbox .lbl{font-weight:500;font-size:clamp(11px,.85vw,.85rem);letter-spacing:.32em;text-transform:uppercase;color:var(--grey-d)}
.dashbox{border:1px dashed var(--grey);display:flex;align-items:center;justify-content:center;text-align:center;
  color:var(--grey);font-weight:300;letter-spacing:.22em;text-transform:uppercase;font-size:clamp(10px,.95vw,.95rem);line-height:2}

/* ---------- ANIMAÇÃO DE ENTRADA ---------- */
[data-a]{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:calc(var(--d,0)*.09s + .15s)}
.active [data-a]{opacity:1;transform:none}
[data-a="clip"]{transform:none;clip-path:inset(0 0 102% 0);transition:opacity .9s var(--ease),clip-path 1.1s var(--ease);transition-delay:calc(var(--d,0)*.09s + .15s)}
.active [data-a="clip"]{clip-path:inset(-2% 0 -6% 0)}
[data-a="line"]{transform:scaleX(0);transition:transform 1.1s var(--ease);transition-delay:calc(var(--d,0)*.09s + .2s)}
.active [data-a="line"]{transform:scaleX(1)}
[data-a="k"]{letter-spacing:.6em;transition:opacity 1s var(--ease),letter-spacing 1.2s var(--ease),transform .9s var(--ease);transition-delay:.1s}
.active [data-a="k"]{letter-spacing:.34em}

/* ---------- LOGOS ---------- */
.logo-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:4.5vh 2.5vw;align-items:center;justify-items:center}
.logo-grid img{max-height:clamp(26px,4.6vh,46px);max-width:100%;width:auto;object-fit:contain}

/* ---------- CITAÇÃO ---------- */
.quote-mark{position:absolute;top:4vh;left:6vw;z-index:-1;font-weight:900;font-size:26vh;line-height:1;color:#161616;user-select:none}

/* ---------- NAVEGAÇÃO ---------- */
#progress{position:fixed;top:0;left:0;height:2px;background:#f4f2ed;mix-blend-mode:difference;width:100%;transform:scaleX(0);transform-origin:left;z-index:60;transition:transform .5s var(--ease)}
.li{border-top:1px solid var(--line);padding-top:1.4vh}
#hint{position:fixed;bottom:24px;right:32px;font-size:12px;font-weight:300;letter-spacing:.08em;opacity:.55;z-index:50;color:#f4f2ed;mix-blend-mode:difference;user-select:none}
.navbtn{cursor:pointer;display:inline-block;padding:10px 12px;margin:-10px -4px;font-size:15px;transition:opacity .25s}
.navbtn:hover{opacity:1;transform:none}
#brand{position:fixed;bottom:24px;left:32px;font-size:11px;font-weight:300;letter-spacing:.3em;text-transform:uppercase;opacity:.35;z-index:50;color:#f4f2ed;mix-blend-mode:difference;user-select:none}

/* ---------- VISUAIS ILUSTRATIVOS ---------- */
.flow{display:flex;align-items:center;width:100%}
.node{border:1px solid #2e2e2e;padding:1.8vh 1.1vw;text-align:center;font-weight:700;font-size:clamp(10px,.95vw,1rem);letter-spacing:.08em;flex:none}
.node small{display:block;font-weight:300;font-size:.72em;letter-spacing:.22em;color:var(--grey-d);margin-top:.5vh}
.light .node{border-color:var(--ink)}
.link{flex:1;height:1px;background:#2e2e2e;min-width:1.5vw}
.light .link{background:var(--ink)}
.xmark,.okmark{width:5vh;height:5vh;border:1px solid var(--paper);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:2.3vh;flex:none;color:var(--paper)}
.persona{border:1px solid var(--ink);padding:3.2vh 1.8vw;position:relative;background:var(--paper)}
.persona .ptag{position:absolute;top:-1.4vh;right:1.4vw;background:var(--ink);color:var(--paper);font-size:clamp(8px,.7vw,.7rem);letter-spacing:.28em;padding:.6em 1.2em;font-weight:300;text-transform:uppercase}
.pfield{font-size:clamp(11px,.75vw,.8rem);letter-spacing:.26em;text-transform:uppercase;color:var(--grey);font-weight:500;margin-top:2vh}
.serp{background:#0e0e0e;border:1px solid #262626;padding:2.4vh 1.5vw}
.sbar{border:1px solid #303030;border-radius:99px;padding:1.3vh 1.3vw;font-size:clamp(11px,.95vw,1rem);color:var(--paper);display:flex;align-items:center;gap:.7vw}
.skel{height:1.1vh;background:#1d1d1d;border-radius:2px;margin-top:1.3vh}
.srcchip{display:inline-flex;align-items:center;gap:.5vw;border:1px solid var(--paper);color:var(--paper);padding:.7vh 1vw;font-size:clamp(10px,.85vw,.9rem);font-weight:700;margin-top:2vh}
.doc{border:1px solid var(--ink);background:var(--paper)}
.dhead{display:flex;align-items:center;gap:.45vw;padding:1.3vh 1.1vw;border-bottom:1px solid var(--ink)}
.dot{width:1.1vh;height:1.1vh;border:1px solid var(--ink);border-radius:50%}
.skel-l{height:1vh;background:var(--tone);border-radius:2px;margin-top:1.4vh}
.gbar{height:4vh;background:var(--ink);transform-origin:left;transform:scaleX(0);transition:transform 1.1s var(--ease);transition-delay:calc(var(--d,0)*.09s + .3s)}
.active .gbar{transform:scaleX(1)}
.gtrack{position:relative;height:4vh;margin-top:1.6vh}
.vbar{width:100%;transform-origin:bottom;transform:scaleY(0);transition:transform .9s var(--ease);transition-delay:calc(var(--d,0)*.07s + .35s)}
.active .vbar{transform:scaleY(1)}
.vok{background:var(--paper)}
.vbad{background:repeating-linear-gradient(45deg,var(--paper) 0 2px,transparent 2px 7px);box-shadow:inset 0 0 0 1px var(--paper)}
.chart polyline{stroke-dasharray:900;stroke-dashoffset:900}
.active .chart polyline{animation:draw 1.7s var(--ease) .6s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.org{border:1px solid var(--ink);padding:1.3vh .9vw;text-align:center;font-size:clamp(10px,.82vw,.88rem);font-weight:700;letter-spacing:.04em}
.orgline{width:1px;height:2.4vh;background:var(--ink);margin:0 auto}
.tagf{display:inline-block;border:1px solid var(--grey);color:var(--grey);font-size:.6em;letter-spacing:.2em;padding:.3em .7em;margin-left:.8em;vertical-align:middle;font-weight:300}

h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
@media (max-width:820px){
  .slide{padding:6vh 7vw}
  .cols{grid-template-columns:1fr!important;gap:3vh!important}
  .logo-grid{grid-template-columns:repeat(3,1fr)}
  .ghost{font-size:34vw}
  .flow{flex-wrap:wrap;gap:1.2vh .8vw}
  .link{min-width:6vw}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{transition:none!important;animation:none!important}
  [data-a],[data-a="clip"],[data-a="k"]{opacity:1;transform:none;clip-path:none}
  [data-a="line"]{transform:scaleX(1)}
  .gbar{transform:scaleX(1)}
  .vbar{transform:scaleY(1)}
  .chart polyline{stroke-dasharray:none;stroke-dashoffset:0}
}

/* ---------- ADIÇÕES · projeto de site (SocialLadder) ---------- */
.tcard{border:1px solid var(--ink);padding:2.2vh 1.1vw;display:flex;flex-direction:column;background:var(--paper)}
.tcard .ttag{display:inline-block;align-self:flex-start;background:var(--ink);color:var(--paper);font-size:clamp(9px,.68vw,.72rem);letter-spacing:.24em;text-transform:uppercase;padding:.55em 1em;font-weight:500}
.tcard .t-md{min-height:1.4em;white-space:nowrap}
.tcard .ttag{white-space:nowrap}
.lcard{border:1px solid var(--ink);padding:2.6vh 1.6vw;display:flex;flex-direction:column;background:var(--paper)}
.lcard-ink{background:var(--ink);color:var(--paper)}
.lcard-ink .t-body{color:var(--grey-d)}
.dcard{border:1px solid #2e2e2e;padding:2.6vh 1.6vw;display:flex;flex-direction:column}
.dcard-on{border-color:var(--paper)}
.vcard{border:1px solid var(--ink);padding:2vh 1.1vw;display:flex;flex-direction:column;background:var(--paper)}
.vcard .t-md{min-height:2.6em}
.mrow{display:grid;grid-template-columns:2.6fr .7fr .8fr .5fr 1.3fr;gap:.8vw;align-items:center;padding:.9vh 0;border-top:1px solid var(--line);font-size:clamp(11px,.82vw,.9rem);line-height:1.3}
.mrow.mhead{border-top:0;font-weight:500;letter-spacing:.16em;text-transform:uppercase;font-size:clamp(9px,.68vw,.72rem);color:var(--grey)}
.mrow span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cimg{border:1px solid var(--ink);overflow:hidden;background:var(--tone)}
.cimg img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.cimg.kvp{aspect-ratio:2.32/1;height:auto;background:#fff}
.cimg.kvp img{object-fit:contain;object-position:center}
.cimg.kvc{aspect-ratio:1/1;height:auto;background:#000}
.cimg.kvc img{object-fit:contain;object-position:center}
.usd{display:block;font-weight:400;color:var(--grey);font-size:.82em;line-height:1.25;margin-top:.15em}

/* ---------- ADIÇÕES · diagnóstico SEO & GEO (Assis e Mendes) ---------- */
.t-lead{font-weight:400;font-size:clamp(20px,2.1vw,2.1rem);line-height:1.3;letter-spacing:-.005em}
.tight .li{padding:.9vh 0;font-size:clamp(15px,1.3vw,1.45rem)}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}
.dark .t-body{font-weight:500}
.dark .t-small{font-weight:500}
.chatq{display:flex;justify-content:flex-end}
.chatq .bub{background:#1c1c1c;border:1px solid #2c2c2c;border-radius:14px 14px 2px 14px;padding:1.4vh 1.2vw;font-size:clamp(12px,1.05vw,1.1rem);color:var(--paper);max-width:78%}
.chata{margin-top:1.8vh}
.bars .row{display:grid;grid-template-columns:1fr 3fr auto;gap:1.4vw;align-items:center;margin-top:1.6vh}
.bars .lab{font-size:clamp(13px,1.15vw,1.2rem);font-weight:700;line-height:1.2}
.bars .lab small{display:block;font-weight:300;color:var(--grey);font-size:.82em;letter-spacing:.04em}
.bars .val{font-weight:900;font-size:clamp(20px,2.1vw,2.2rem);line-height:1;min-width:4.2ch;text-align:right}
.serp .res{display:flex;align-items:baseline;gap:1vw;padding:1vh 0;border-bottom:1px solid #1e1e1e}
.serp .res .pos{font-weight:900;color:var(--grey-d);min-width:2.4ch;font-size:clamp(12px,1vw,1.05rem)}
.serp .res .dom{font-size:clamp(12px,1vw,1.05rem);color:var(--paper)}
.serp .res .dom small{color:var(--grey-d);font-weight:300;margin-left:.6vw}
.excerpt{border:1px solid var(--ink);padding:2vh 1.4vw;background:#efece4;font-size:clamp(13px,1.1vw,1.15rem);line-height:1.55;color:var(--mid)}
.excerpt mark{background:var(--ink);color:var(--paper);padding:.05em .3em;font-weight:700}
.tree .lvl{display:grid;gap:.9vw}
.pill{display:inline-block;border:1px solid var(--ink);padding:.55em .9em;font-size:clamp(11px,.95vw,1rem);margin:.4vh .4vw .4vh 0;font-weight:500}
.pill.dim{border-color:var(--grey);color:var(--grey);font-weight:300}
.release{border:1px solid var(--ink);background:var(--paper);padding:2vh 1.4vw}
.release .rh{font-weight:900;font-size:clamp(16px,1.5vw,1.6rem);line-height:1.25}
.release .rq{font-style:italic;color:var(--mid);margin-top:1.4vh;font-size:clamp(12px,1.05vw,1.1rem);line-height:1.5}
.release u{text-decoration:none;background:#e3dfd4;padding:0 .2em}
.strike{text-decoration:line-through;text-decoration-thickness:.08em;color:var(--grey);font-weight:400}

(function(){
  const slides=[...document.querySelectorAll('.slide')];
  const tot=slides.length, pg=document.getElementById('pg');
  document.getElementById('tot').textContent=tot;
  const bar=document.getElementById('progress');
  let idx=Math.min(tot-1,Math.max(0,parseInt(location.hash.slice(1))||0));
  let animLock=false, booted=false;

  const RM = (typeof matchMedia === 'function') ? matchMedia('(prefers-reduced-motion: reduce)').matches : false;
  function fmt(n,mode){
    if(mode==='dec')return n.toFixed(2).replace('.',',');
    return Math.round(n).toLocaleString('pt-BR');
  }
  function runCounters(slide){
    slide.querySelectorAll('[data-count]').forEach(el=>{
      const target=parseFloat(el.dataset.target), mode=el.dataset.fmt==='dec'?'dec':'int';
      if(RM){el.textContent=fmt(target,mode);return;}
      const dur=1600, t0=performance.now();
      function tick(t){
        const p=Math.min(1,(t-t0)/dur), e=1-Math.pow(2,-10*p); // easeOutExpo
        el.textContent=fmt(target*e,mode);
        if(p<1)requestAnimationFrame(tick); else el.textContent=fmt(target,mode);
      }
      requestAnimationFrame(tick);
    });
  }
  function go(n){
    if(animLock)return;
    n=Math.max(0,Math.min(tot-1,n));
    if(n===idx&&slides[n].classList.contains('active'))return;
    if(booted){animLock=true; setTimeout(()=>animLock=false,420);} booted=true;
    slides.forEach((s,i)=>{s.classList.toggle('active',i===n);s.setAttribute('aria-hidden',i===n?'false':'true');});
    idx=n; pg.textContent=n+1;
    bar.style.transform='scaleX('+((n+1)/tot)+')';
    // reinicia contadores do slide ativo
    slides[n].querySelectorAll('[data-count]').forEach(el=>el.textContent=fmt(0,el.dataset.fmt==='dec'?'dec':'int'));
    setTimeout(()=>runCounters(slides[n]),350);
    try{history.replaceState(null,'','#'+n);}catch(e){}
  }
  addEventListener('keydown',e=>{
    if(['ArrowRight','ArrowDown','PageDown',' '].includes(e.key)){e.preventDefault();go(idx+1);}
    else if(['ArrowLeft','ArrowUp','PageUp'].includes(e.key)){e.preventDefault();go(idx-1);}
    else if(e.key==='Home')go(0);
    else if(e.key==='End')go(tot-1);
    else if(e.key.toLowerCase()==='f'){document.fullscreenElement?document.exitFullscreen():document.documentElement.requestFullscreen();}
  });
  document.getElementById('next').addEventListener('click',()=>go(idx+1));
  document.getElementById('prev').addEventListener('click',()=>go(idx-1));
  let tx=null;
  addEventListener('touchstart',e=>tx=e.touches[0].clientX,{passive:true});
  addEventListener('touchend',e=>{
    if(tx===null)return;
    const dx=e.changedTouches[0].clientX-tx;
    if(Math.abs(dx)>50)go(idx+(dx<0?1:-1));
    tx=null;
  },{passive:true});
  addEventListener('hashchange',()=>{const h=parseInt(location.hash.slice(1)); if(!isNaN(h))go(h);});
  go(idx);
})();

Pipeline de build

Harness de QA (Playwright, 1600×900)

Ativação de tela no harness: location.hash = índice (base 0), depois document.fonts.ready e 1,4 a 1,7s de espera para as transições fecharem antes de medir.

Checklist de QA

• Ordem das telas igual ao blueprint; blocos condicionais entraram só com a condição
• Momento, desafios, diagnóstico e etapas escritos para este lead; zero sobra de outro cliente (nome, segmento, exemplo, diagrama)
• Todo número do lead com linha de fonte e data; todo número de case conferido na página individual
• 65 colaboradores, 18 anos, 500+ empresas; dia 05; permanência 12 meses com 40% ou 90 dias
• Nenhum nome de ferramenta fora de escopo e premissas; nenhum nome de decisor; nenhum travessão
• Sucesso do Cliente no organograma, na cadência de contato e no escopo
• Preço parcelado, sem total; tabela de mídia logo após o preço quando há mídia; horas em tela própria
• t-hero só com dígitos e caixa alta; manifestos t-big em uma linha; folga de descendente ≥ 0.22em
• Sem measure/max-width em parágrafo; text-wrap balance/pretty injetados
• Decorativos com z-index:-1 e .slide com isolation:isolate; URL do Google Fonts com os seis pesos
• Contadores com data-target coerentes; pares de section fechados; hash abre a tela certa
• Harness em 1600×900 com zero nos quatro testes, medições reportadas junto da entrega
• PDF gerado pelo script canônico, com o número de páginas igual ao de telas
• Escopo, quantidades e valores batendo com o arquivo "Escopos e Valores"

Marca e logo

O nome é Mestre, sem "Agência", em todo texto novo. "Fabio Ricotta" se escreve sem acento. O logo preto vai em fundo claro, o branco em fundo escuro. Prefira sempre o SVG; use PNG só quando o meio não aceita vetor.

Arquivos oficiais

mestre-logo-preto.svgBaixar SVG

mestre-logo-branco.svgBaixar SVG

mestre-insignia-preto.svgBaixar SVG

mestre-insignia-branco.svgBaixar SVG

A insígnia (o quadrado com o M) anda sozinha em avatar, favicon e espaços quadrados; o logo horizontal é a forma padrão.

Voz da marca

Cor e tipografia do site

Os tokens abaixo vêm do CSS em produção do site novo (no ar desde 03/11/2026). O site divide com o deck a dupla tinta e papel, mas ganha um acento que o deck não tem: o amarelo.

Tokens de cor

Tipografia do site

Outfit, família única, pesos de 300 a 900. A hierarquia vem de peso e tamanho, como no deck. A escala é fluida, com clamp:

Espaço, forma e movimento

O que muda do deck para o site

Componentes do site

Cada bloco abaixo está renderizado com o estilo real do site, dentro de uma moldura de documentação. A alternância de faixas é a espinha dorsal: escuro para parar (topo, prova, perguntas, fim), claro para ler. Na Home e nas páginas de serviço a alternância vai até o rodapé.

Cabeçalho

Cabeçalho escurologo à esquerda · menu · busca

Sem botão de orçamento quando há formulário na mesma vista: nunca dois na tela.

Botões e link de texto

Formulário de orçamento

Título visível no próprio cartão, frase sem prometer prazo, campos em duas colunas com "(obrigatório)" em cinza. Os campos ficam sempre alinhados, mesmo quando um rótulo ocupa duas linhas: cada campo é uma coluna flexível e o input desce com margin-top:auto.

Números de prova e trilha

Número grande em peso 800/900 com sufixo pequeno (%, +, ×), métrica curta embaixo e nome do cliente em cinza. Valores de exemplo sempre marcados como exemplo.

Perguntas frequentes

Cartão de case e outras frentes

No mouse o cartão vai a #121212 e o quadrado do ícone fica amarelo com o ícone em tinta.

Chamadas finais e rodapé

Rodapérégua de 1px (#2a2a2a) separando da faixa anterior

© 2026 Mestre. Todos os direitos reservados. +55 00 0000-0000 (exemplo)

O telefone aparece só no rodapé (e na página de contato). Nenhuma seção chama para o telefone.

Ícones

Os 50 ícones do site, em grade de 24×24, traço de 1,75 ou 2px e cor herdada do texto (currentColor). Clique em um ícone para copiar o SVG; o botão baixa o arquivo. O sprite completo está em /marca/icones.svg e os originais na subpasta 02 Ícones da pasta oficial do Drive.

Regras de layout e texto do site

As regras abaixo valem para o site e para qualquer landing page nova. Elas existem para que nenhuma página precise ser rediscutida do zero.

Landing pages

Toda landing page de serviço segue o blueprint abaixo, na ordem. A página /landing mostra o blueprint montado com os componentes da seção 15.

Checklist de publicação

• Formulário inteiro na primeira tela (cartão e botão) a 1366×768 e 1440×900
• Sem rolagem lateral nas 6 larguras (320, 375, 768, 1024, 1366, 1440)
• Um H1 só na página
• Sem segundo botão de orçamento na vista (menu e chamada fixa do celular inclusos)
• Telefone só no rodapé

Slides do dia a dia

A visão /slides é uma apresentação 16:9 com referência de 1600×900, como o deck, escalada para caber na tela. O texto é editável direto no slide e fica salvo no navegador; o botão "Exportar PDF" gera um slide por página. Os slides seguem a linguagem das propostas (seções 01 a 08): tinta e papel, Outfit, peso como hierarquia, raio zero, sem sombra, sem amarelo.