teqo-backup/docs/plans/reels-tutoriais-ui-design.html
Francisco Solla 8504b3b13a feat(C196): skill /reels-tutoriais — captura mobile + composição de vídeo
- skill + command finos: shot list é a fonte única; ajuste regenera, nada publica
- scripts/build-reel.mjs + scripts/lib/reel*.mjs: captura CDP com timestamps de
  parede (sem drift), cursor/halo DOM-injected, zoompan do log de cliques,
  legendas queimadas, capa 1080x1350-safe, concat H.264 1080x1920/30fps
- ffmpeg: FFMPEG_PATH -> PATH -> @ffmpeg-installer (registry-only) com probe fail-closed
- kit oficial da campanha: public/campaign-kit (marcas positiva/negativa, numero,
  estrela) + manual em docs/campaign-kit + README de regras; skill e agente de
  design referenciam o material
- 26 testes unit novos + pin do command; changelog 2026-09-18-c196

Closes #1155
2026-09-18 21:50:28 -03:00

890 lines
42 KiB
HTML
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="pt-BR" data-theme="campaign-site">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
<title>Design — C196 · Sistema visual dos reels tutoriais</title>
<style type="text/tailwindcss">
@theme inline {
--font-sans: Inter, ui-sans-serif, system-ui, sans-serif;
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-primary: var(--kit-red);
--color-primary-foreground: #ffffff;
--color-muted: #ebe9e9;
--color-muted-foreground: var(--campaign-muted);
--color-border: var(--campaign-line);
}
[data-theme='campaign-site'] {
--background: #fff8f2;
--foreground: #000000;
--kit-red: #e4102f;
--kit-blue: #184e92;
--kit-yellow: #ffeb00;
--kit-green: #009647;
--kit-orange: #f89c0e;
--site-red: #a21c1c;
--site-yellow: #ffe607;
--pt-red: var(--kit-red);
--pt-red-dark: #184e92;
--pt-yellow: var(--kit-yellow);
--campaign-cream: #fff8f2;
--campaign-muted: #6c615e;
--campaign-surface: #f9faff;
--campaign-band: #ebe9e9;
--campaign-line: rgb(0 0 0 / 12%);
}
* {
box-sizing: border-box;
}
body {
font-family: Inter, ui-sans-serif, system-ui, sans-serif;
}
.brexter {
/* Brexter Bold 700 is the approved face; Impact is only the standalone fallback. */
font-family: Brexter, Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
font-weight: 700;
}
.artifact-grid {
background-color: #ebe9e9;
background-image: radial-gradient(rgb(71 19 14 / 10%) 0.7px, transparent 0.7px);
background-size: 18px 18px;
}
.frame {
position: relative;
aspect-ratio: 9 / 16;
overflow: hidden;
background: #fff8f2;
container-type: inline-size;
}
.crop-preview {
container-type: inline-size;
}
.frame-shadow {
box-shadow: 0 22px 62px rgb(71 19 14 / 18%);
}
.site-placeholder {
background:
linear-gradient(180deg, rgb(255 255 255 / 6%), transparent 24%),
linear-gradient(145deg, #dedbd8, #aaa39e);
}
.safe-line {
border-color: rgb(255 230 7 / 82%);
}
.crop-line {
border-color: rgb(255 255 255 / 78%);
}
.kit-asset {
display: block;
height: auto;
object-fit: contain;
}
.cursor {
filter: drop-shadow(0 2px 2px rgb(0 0 0 / 35%));
}
</style>
</head>
<body class="artifact-grid min-h-screen text-foreground antialiased">
<main class="mx-auto max-w-[1500px] px-4 py-10 md:px-8 md:py-14">
<header class="max-w-4xl">
<div class="flex flex-wrap items-center gap-2">
<span class="rounded-full bg-(--pt-red) px-2.5 py-1 text-xs font-semibold text-white"
>C196 · gate hi-fi</span
>
<span
class="rounded-full border border-black/10 bg-(--campaign-cream) px-2.5 py-1 text-xs font-medium"
>Vídeo 1080 × 1920 · 9:16</span
>
<span
class="rounded-full border border-black/10 bg-(--campaign-cream) px-2.5 py-1 text-xs font-medium"
>Sem áudio · legenda queimada</span
>
</div>
<h1 class="mt-4 text-3xl font-semibold tracking-tight">Tutorial que se entende no mudo</h1>
<p class="mt-2 max-w-3xl text-sm leading-6 text-muted-foreground">
Um sistema de frames para ensinar o site com ritmo, contraste e marca — sem competir com a
gravação. O vermelho enquadra a história; amarelo aponta a ação; Brexter carrega o
impacto. O kit oficial 2026 assina as cenas gráficas; a captura conserva a aparência real
do site.
</p>
<div class="mt-5 flex flex-wrap gap-2 text-xs">
<a
href="#sequencia"
class="rounded-full border border-black/10 bg-white px-3 py-1.5 font-medium"
>01–03 · Sequência</a
>
<a
href="#kit"
class="rounded-full border border-black/10 bg-white px-3 py-1.5 font-medium"
>04 · Kit oficial</a
>
<a
href="#safe-zone"
class="rounded-full border border-black/10 bg-white px-3 py-1.5 font-medium"
>05 · Safe zone</a
>
<a
href="#capa"
class="rounded-full border border-black/10 bg-white px-3 py-1.5 font-medium"
>06 · Capa e recortes</a
>
<a
href="#spec"
class="rounded-full border border-black/10 bg-white px-3 py-1.5 font-medium"
>07 · Sistema</a
>
</div>
</header>
<!-- SEQUÊNCIA -->
<section id="sequencia" class="mt-16" aria-labelledby="sequencia-title">
<div class="mb-5">
<p class="text-xs font-semibold text-(--pt-red)">CENAS 01–03 · LINHA DO TEMPO</p>
<h2 id="sequencia-title" class="mt-1 text-xl font-semibold tracking-tight">
Hook → gesto → ação
</h2>
<p class="mt-1 text-sm text-muted-foreground">
Frames em escala. Tudo crítico permanece no miolo seguro.
</p>
</div>
<div class="grid gap-8 md:grid-cols-3">
<!-- HOOK -->
<article>
<div class="mb-3 flex items-end justify-between">
<div>
<p class="text-sm font-semibold">01 · Hook</p>
<p class="text-xs text-muted-foreground">0–1,5s</p>
</div>
<span class="rounded-full bg-black px-2 py-1 text-[10px] font-semibold text-white"
>ABERTURA</span
>
</div>
<div
class="frame frame-shadow mx-auto w-full max-w-[360px] rounded-[22px] border border-black/15 bg-(--pt-red)"
>
<div
class="absolute inset-0 bg-[linear-gradient(160deg,#e4102f_0%,#e4102f_62%,#184e92_145%)]"
></div>
<img
src="../../public/campaign-kit/estrela.png"
alt=""
class="kit-asset absolute left-[250px] top-[54px] size-[88px] rounded-full bg-white"
/>
<div class="absolute left-[6%] right-[6%] top-[14%]">
<div
class="inline-flex rounded-full bg-(--pt-yellow) px-[4%] py-[1.7%] text-[3.5cqw] font-black text-black"
>
FAÇA PARTE
</div>
<h3
class="brexter mt-[8%] max-w-full text-[9.5cqw] leading-[0.9] uppercase tracking-[-0.05em] text-white"
>
<span class="block whitespace-nowrap">Seu apoio</span>
<span class="block whitespace-nowrap">vira card</span>
<span class="block whitespace-nowrap text-(--pt-yellow)">em segundos.</span>
</h3>
</div>
<div class="absolute left-[22px] top-[356px] w-[170px]">
<p class="text-[3.8cqw] font-semibold leading-[1.2] text-white">
Veja como criar o seu pelo celular.
</p>
</div>
<img
src="../../public/campaign-kit/marca-negativa-completa.png"
alt="Jorge Solla 1313 · Mais Saúde, Mais Futuro"
class="kit-asset absolute left-[206px] top-[322px] w-[132px]"
/>
<span
class="absolute bottom-[5%] left-[6%] rounded bg-black/45 px-2 py-1 text-[2.5cqw] text-white"
>KIT OFICIAL · marca negativa completa</span
>
</div>
<p class="mx-auto mt-3 max-w-[360px] text-xs leading-5 text-muted-foreground">
<strong class="text-foreground">Movimento:</strong> título entra em dois beats; a
estrela oficial deriva 8px para dentro com fade, sem pulsar. Sem zoom de site ainda.
</p>
<div
class="mx-auto mt-3 max-w-[360px] rounded-xl border border-(--pt-red)/25 bg-(--campaign-cream) p-3 text-xs leading-5"
>
<p class="font-bold text-(--pt-red)">CALIBRAÇÃO · BREXTER BOLD OFICIAL @ 360PX</p>
<p class="mt-1 text-muted-foreground">
Título: <strong class="text-foreground">34,2px (9,5cqw)</strong> · entrelinha
<strong class="text-foreground">30,78px (0,9)</strong> · tracking
<strong class="text-foreground">−1,71px (−0,05em)</strong> · largura máxima
<strong class="text-foreground">316,8px (100% do bloco entre insets de 6%)</strong>.
As três linhas são explícitas e não quebram internamente.
</p>
</div>
</article>
<!-- PASSO -->
<article>
<div class="mb-3 flex items-end justify-between">
<div>
<p class="text-sm font-semibold">02 · Passo</p>
<p class="text-xs text-muted-foreground">demonstração</p>
</div>
<span
class="rounded-full bg-(--pt-yellow) px-2 py-1 text-[10px] font-black text-black"
>1 / 3</span
>
</div>
<div
class="frame frame-shadow mx-auto w-full max-w-[360px] rounded-[22px] border border-black/15 bg-black"
>
<div class="site-placeholder absolute inset-0">
<div class="absolute inset-x-0 top-0 h-[7%] bg-(--site-red)">
<div
class="absolute left-[6%] top-1/2 h-[18%] w-[28%] -translate-y-1/2 rounded-full bg-white/75"
></div>
<div
class="absolute right-[6%] top-1/2 size-[7%] -translate-y-1/2 rounded-full bg-white/25"
></div>
</div>
<div class="absolute inset-x-[6%] top-[11%] text-center">
<p class="text-[2.4cqw] font-black tracking-[0.1em] text-(--site-red) uppercase">
Faça parte
</p>
<h4 class="mt-[1%] text-[5cqw] font-black leading-tight">
Mostre que você está com Solla
</h4>
<p
class="mx-auto mt-[2%] max-w-[86%] text-[2.7cqw] leading-[1.3] text-(--campaign-muted)"
>
Escolha um modelo, coloque seu nome ou sua foto e baixe seu card.
</p>
</div>
<div class="absolute inset-x-[6%] top-[28%] flex gap-[3%]">
<div
class="aspect-square flex-1 rounded-[6%] border border-black/10 bg-(--campaign-cream) p-[3%]"
>
<div class="h-full rounded-[5%] bg-(--site-red)"></div>
<p class="mt-[3%] text-center text-[2.1cqw] font-bold">Card com seu nome</p>
</div>
<div
class="aspect-square flex-1 rounded-[6%] border border-black/10 bg-white p-[3%] opacity-70"
>
<div class="h-full rounded-[5%] bg-stone-300"></div>
</div>
</div>
<div
class="absolute inset-x-[5%] bottom-[22%] rounded-[5%] bg-white p-[5%] shadow-xl ring-1 ring-black/10"
>
<p class="text-[4.5cqw] font-black">Personalize com seu nome</p>
<div
class="mt-[4%] h-[10cqw] rounded-lg border border-black/20 px-[4%] py-[3%] text-[3.3cqw] text-black/60"
>
Seu nome
</div>
<div
class="mt-[4%] h-[10cqw] rounded-lg bg-(--site-red) pt-[3%] text-center text-[3.2cqw] font-bold text-white"
>
Criar meu card
</div>
</div>
</div>
<!-- badge de passo -->
<div
class="absolute left-[6%] top-[15%] flex items-center gap-[2%] rounded-full bg-(--pt-yellow) px-[4%] py-[2%] text-[3.2cqw] font-black text-black shadow-lg"
>
<span
class="grid size-[6cqw] place-items-center rounded-full bg-black text-[2.8cqw] text-white"
>1</span
>Escolha um modelo
</div>
<!-- zoom target -->
<div
class="absolute left-[87px] top-[196px] h-[246px] w-[186px] rounded-[16px] border-[3px] border-(--kit-yellow) shadow-[0_0_0_5px_rgb(255_235_0/20%)]"
></div>
<svg
class="cursor absolute left-[40%] top-[49%] w-[8%] text-white"
viewBox="0 0 24 30"
fill="currentColor"
stroke="#000"
stroke-width="1.4"
>
<path d="M3 2v22l6-6 4 9 4-2-4-9h8L3 2Z" />
</svg>
<div class="absolute inset-x-[6%] top-[60%] flex justify-center">
<p
class="max-w-[90%] rounded-[4%] bg-black/86 px-[5%] py-[3.5%] text-center text-[4.1cqw] font-bold leading-[1.18] text-white shadow-xl"
>
Toque em <span class="text-(--pt-yellow)">“Card com seu nome”</span>.
</p>
</div>
<div
class="absolute left-[214px] top-[22px] grid h-[68px] w-[124px] place-items-center rounded-[8px] bg-white/92 p-[6px] shadow-sm"
>
<img
src="../../public/campaign-kit/jorge-solla-positivo.png"
alt="Jorge Solla · Deputado Federal"
class="kit-asset h-[56px] w-[112px]"
/>
</div>
<span
class="absolute bottom-[5%] left-[6%] rounded bg-black/55 px-2 py-1 text-[2.5cqw] text-white"
>CAPTURA REAL · chrome com marca positiva</span
>
</div>
<p class="mx-auto mt-3 max-w-[360px] text-xs leading-5 text-muted-foreground">
<strong class="text-foreground">Câmera:</strong> zoom suave até 118% no tile; cursor
chega 180ms antes do clique; halo acompanha o tile real em
<strong class="text-foreground">x87 · y196 · 186 × 246px @360</strong> e pulsa uma
vez. Após o clique, some em até 300ms e não permanece sobre o drawer aberto. A legenda
fica a ~1160px no arquivo final.
</p>
</article>
<!-- CTA -->
<article>
<div class="mb-3 flex items-end justify-between">
<div>
<p class="text-sm font-semibold">03 · Fechamento / CTA</p>
<p class="text-xs text-muted-foreground">últimos 2–3s</p>
</div>
<span class="rounded-full bg-black px-2 py-1 text-[10px] font-semibold text-white"
>FINAL</span
>
</div>
<div
class="frame frame-shadow mx-auto w-full max-w-[360px] rounded-[22px] border border-black/15 bg-white"
>
<div class="absolute inset-x-0 top-0 h-[47%] bg-(--pt-red)">
<img
src="../../public/campaign-kit/estrela.png"
alt=""
class="kit-asset absolute left-[20px] top-[48px] size-[72px] rounded-full bg-white"
/>
</div>
<div class="absolute inset-x-[7%] top-[14%] text-center text-white">
<p class="text-[3cqw] font-black tracking-[0.12em] uppercase text-(--pt-yellow)">
Seu card, sua voz
</p>
<h3
class="brexter mx-auto mt-[4%] max-w-full text-[11.5cqw] leading-[0.9] uppercase"
>
Agora é<br />com você.
</h3>
</div>
<div
class="absolute inset-x-[7%] top-[51%] rounded-[6%] bg-white p-[7%] text-center shadow-[0_14px_40px_rgb(71_19_14/14%)] ring-1 ring-black/10"
>
<div
class="mx-auto grid size-[14cqw] place-items-center rounded-full bg-(--pt-yellow)"
>
<svg
class="size-[7cqw]"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2.3"
>
<path d="M10 13a5 5 0 0 0 7.5.5l3-3a5 5 0 0 0-7-7l-1.7 1.7" />
<path d="M14 11a5 5 0 0 0-7.5-.5l-3 3a5 5 0 0 0 7 7l1.7-1.7" />
</svg>
</div>
<p class="mt-[5%] text-[4cqw] font-semibold">Acesse o site pelo</p>
<p class="brexter mt-[1%] text-[8cqw] leading-none uppercase text-(--kit-blue)">
link na bio
</p>
<p class="mt-[4%] text-[3cqw] leading-[1.35] text-(--campaign-muted)">
Escolha seu modelo, crie e compartilhe.
</p>
</div>
<div class="absolute inset-x-[7%] bottom-[5%] flex items-end justify-between">
<p class="max-w-[52%] text-[2.8cqw] font-semibold leading-[1.3] text-(--kit-blue)">
jorgesolla1313.com.br
</p>
<img
src="../../public/campaign-kit/marca-positiva-completa.png"
alt="Jorge Solla 1313 · Mais Saúde, Mais Futuro"
class="kit-asset w-[132px]"
/>
</div>
<span
class="absolute bottom-[4%] left-[7%] rounded bg-black/75 px-2 py-1 text-[2.5cqw] text-white"
>KIT OFICIAL · marca positiva completa</span
>
</div>
<p class="mx-auto mt-3 max-w-[360px] text-xs leading-5 text-muted-foreground">
<strong class="text-foreground">Final:</strong> sem botão falso. “Link na bio” é a
única instrução; URL reforça a origem. Segura por 2s para leitura.
</p>
</article>
</div>
</section>
<!-- KIT OFICIAL -->
<section id="kit" class="mt-20" aria-labelledby="kit-title">
<div class="mb-5">
<p class="text-xs font-semibold text-(--kit-red)">CENA 04 · KIT OFICIAL 2026</p>
<h2 id="kit-title" class="mt-1 text-xl font-semibold tracking-tight">
Uma assinatura oficial para cada superfície
</h2>
<p class="mt-1 max-w-3xl text-sm text-muted-foreground">
Medidas abaixo são CSS px no compositor 360 × 640; o arquivo final multiplica tudo por
3. Não recortar, recolorir, redesenhar ou aplicar sombra aos PNGs do kit.
</p>
</div>
<div class="overflow-hidden rounded-2xl border border-black/10 bg-white">
<div class="overflow-x-auto">
<table class="w-full min-w-[900px] border-collapse text-left text-sm">
<thead class="bg-(--campaign-band)">
<tr>
<th class="px-4 py-3 font-semibold">Superfície</th>
<th class="px-4 py-3 font-semibold">Ativo oficial</th>
<th class="px-4 py-3 font-semibold">Caixa @360</th>
<th class="px-4 py-3 font-semibold">Regra</th>
</tr>
</thead>
<tbody class="divide-y divide-black/10">
<tr>
<td class="px-4 py-3 font-semibold">Hook</td>
<td class="px-4 py-3 font-mono text-xs">marca-negativa-completa.png</td>
<td class="px-4 py-3 font-mono text-xs">x206 · y322 · 132×88</td>
<td class="px-4 py-3 text-muted-foreground">
Sobre vermelho; slogan só no próprio ativo.
</td>
</tr>
<tr>
<td class="px-4 py-3 font-semibold">Captura / chrome</td>
<td class="px-4 py-3 font-mono text-xs">jorge-solla-positivo.png</td>
<td class="px-4 py-3 font-mono text-xs">x220 · y28 · 112×56</td>
<td class="px-4 py-3 text-muted-foreground">
Plate branco 92% em x214 · y22 · 124×68, no fundo dimmed acima do drawer; nunca
cobrir input, ajuda ou botão. Nunca usar a negativa sobre o sheet branco.
</td>
</tr>
<tr>
<td class="px-4 py-3 font-semibold">CTA</td>
<td class="px-4 py-3 font-mono text-xs">marca-positiva-completa.png</td>
<td class="px-4 py-3 font-mono text-xs">x203 · y520 · 132×88</td>
<td class="px-4 py-3 text-muted-foreground">
Sobre branco, 6px abaixo do card; URL e “link na bio” em azul oficial.
</td>
</tr>
<tr>
<td class="px-4 py-3 font-semibold">Capa</td>
<td class="px-4 py-3 font-mono text-xs">marca-negativa-completa.png</td>
<td class="px-4 py-3 font-mono text-xs">x205 · y448 · 133×89</td>
<td class="px-4 py-3 text-muted-foreground">
Inteira dentro do recorte central 4:5.
</td>
</tr>
<tr>
<td class="px-4 py-3 font-semibold">Badges 1 / 2 / 3</td>
<td class="px-4 py-3 font-mono text-xs">nenhum</td>
<td class="px-4 py-3 font-mono text-xs">x22 · y96 · h36</td>
<td class="px-4 py-3 text-muted-foreground">
Controle funcional amarelo/preto; não miniaturizar marca, número oficial ou
estrela.
</td>
</tr>
<tr>
<td class="px-4 py-3 font-semibold">Decoração gráfica</td>
<td class="px-4 py-3 font-mono text-xs">estrela.png</td>
<td class="px-4 py-3 font-mono text-xs">hook x250 · y54 · 88²</td>
<td class="px-4 py-3 text-muted-foreground">
PNG a 100%, sem filtro/recoloração, sobre disco branco do mesmo diâmetro para a
estrela vermelha não sumir no fundo. Capa: x250 · y54 · 88². CTA: x20 · y48 ·
72². Fade + deriva de 8px; sem rotação.
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="mt-5 grid gap-5 md:grid-cols-2">
<article class="rounded-2xl bg-(--kit-red) p-5 text-white">
<p class="text-xs font-bold text-(--kit-yellow)">FUNDO POSITIVO · VERMELHO</p>
<img
src="../../public/campaign-kit/marca-negativa-completa.png"
alt="Jorge Solla 1313 · Mais Saúde, Mais Futuro"
class="kit-asset mx-auto mt-5 w-[220px]"
/>
</article>
<article class="rounded-2xl border border-black/10 bg-white p-5">
<p class="text-xs font-bold text-(--kit-blue)">FUNDO CLARO</p>
<img
src="../../public/campaign-kit/marca-positiva-completa.png"
alt="Jorge Solla 1313 · Mais Saúde, Mais Futuro"
class="kit-asset mx-auto mt-5 w-[220px]"
/>
</article>
</div>
</section>
<!-- SAFE ZONE -->
<section id="safe-zone" class="mt-20" aria-labelledby="safe-zone-title">
<div class="mb-5">
<p class="text-xs font-semibold text-(--pt-red)">CENA 05 · SAFE ZONE</p>
<h2 id="safe-zone-title" class="mt-1 text-xl font-semibold tracking-tight">
O Instagram ocupa as bordas; o tutorial ocupa o miolo
</h2>
<p class="mt-1 max-w-3xl text-sm text-muted-foreground">
Guias são apenas de produção e não aparecem no render final.
</p>
</div>
<div class="grid gap-8 lg:grid-cols-[400px_minmax(0,1fr)]">
<div
class="frame frame-shadow mx-auto w-full max-w-[400px] rounded-[22px] border border-black/15 bg-black"
>
<div class="site-placeholder absolute inset-0 opacity-85">
<div class="absolute inset-x-0 top-0 h-[7%] bg-(--site-red)"></div>
<div class="absolute inset-x-[8%] top-[23%] h-[31%] rounded-[4%] bg-white/70"></div>
</div>
<div
class="absolute inset-x-[6%] top-[14%] bottom-[35%] border-2 border-dashed safe-line"
></div>
<div class="absolute inset-x-0 top-0 h-[14%] bg-(--pt-red-dark)/72 p-[5%] text-white">
<p class="text-[3.4cqw] font-bold">~250px · topo</p>
<p class="mt-[1%] text-[2.5cqw] text-white/80">nome, áudio e chrome podem cobrir</p>
</div>
<div
class="absolute inset-x-0 bottom-0 h-[35%] bg-(--pt-red-dark)/78 p-[5%] text-white"
>
<p class="text-[3.4cqw] font-bold">~672px · base conservadora</p>
<p class="mt-[1%] max-w-[64%] text-[2.5cqw] leading-tight text-white/80">
legenda, descrição e botões do Instagram disputam esta área
</p>
</div>
<div class="absolute inset-y-[14%] left-0 w-[6%] bg-(--pt-yellow)/45"></div>
<div class="absolute inset-y-[14%] right-0 w-[6%] bg-(--pt-yellow)/45"></div>
<div class="absolute inset-x-[6%] top-[47%] flex justify-center">
<p
class="max-w-[88%] rounded-[4%] bg-black/88 px-[5%] py-[3.5%] text-center text-[4cqw] font-bold leading-[1.18] text-white"
>
Legenda entre <span class="text-(--pt-yellow)">1100–1250px</span>, até 900px de
largura.
</p>
</div>
<div
class="absolute left-[8%] top-[16%] rounded bg-(--pt-yellow) px-[3%] py-[1.5%] text-[2.7cqw] font-black"
>
MIOLO ÚTIL ~1080 × 1420
</div>
</div>
<div class="rounded-2xl border border-black/10 bg-(--campaign-cream) p-6 md:p-8">
<h3 class="text-lg font-semibold">Regras que o compositor não pode quebrar</h3>
<ol class="mt-5 space-y-5">
<li class="flex gap-4">
<span
class="grid size-8 shrink-0 place-items-center rounded-full bg-(--pt-red) text-sm font-bold text-white"
>1</span
>
<div>
<p class="text-sm font-semibold">Gancho abaixo do topo crítico</p>
<p class="mt-1 text-sm leading-6 text-muted-foreground">
A primeira linha começa depois de ~250px. Marca pode encostar mais na borda
apenas como elemento redundante.
</p>
</div>
</li>
<li class="flex gap-4">
<span
class="grid size-8 shrink-0 place-items-center rounded-full bg-(--pt-red) text-sm font-bold text-white"
>2</span
>
<div>
<p class="text-sm font-semibold">Legenda curta, central e queimada</p>
<p class="mt-1 text-sm leading-6 text-muted-foreground">
Uma ideia por bloco, até duas linhas, peso alto, branco sobre preto ≥86%.
Palavras de ação recebem amarelo.
</p>
</div>
</li>
<li class="flex gap-4">
<span
class="grid size-8 shrink-0 place-items-center rounded-full bg-(--pt-red) text-sm font-bold text-white"
>3</span
>
<div>
<p class="text-sm font-semibold">Alvo visível antes do clique</p>
<p class="mt-1 text-sm leading-6 text-muted-foreground">
Cursor sintético + halo amarelo. O zoom amplia a ação, sem cortar o elemento
clicado nem desalinhá-lo.
</p>
</div>
</li>
<li class="flex gap-4">
<span
class="grid size-8 shrink-0 place-items-center rounded-full bg-(--pt-red) text-sm font-bold text-white"
>4</span
>
<div>
<p class="text-sm font-semibold">Rodapé não carrega instrução crítica</p>
<p class="mt-1 text-sm leading-6 text-muted-foreground">
A base conservadora admite apenas marca redundante. CTA e resultado ficam acima
dela.
</p>
</div>
</li>
</ol>
<div class="mt-6 rounded-xl border border-(--pt-red)/25 bg-white p-4">
<p class="text-xs font-bold text-(--pt-red)">ATIVOS RESOLVIDOS</p>
<p class="mt-1 text-sm leading-6 text-muted-foreground">
Captura real do site em viewport mobile + PNGs de `public/campaign-kit/`. Foto
oficial continua fora deste template; não é necessária para o reel de cards.
</p>
</div>
</div>
</div>
</section>
<!-- CAPA -->
<section id="capa" class="mt-20" aria-labelledby="capa-title">
<div class="mb-5">
<p class="text-xs font-semibold text-(--pt-red)">CENA 06 · CAPA</p>
<h2 id="capa-title" class="mt-1 text-xl font-semibold tracking-tight">
Título no núcleo que todos os recortes preservam
</h2>
<p class="mt-1 text-sm text-muted-foreground">
Composição própria — não um frame aleatório do vídeo.
</p>
</div>
<div class="grid gap-8 xl:grid-cols-[400px_minmax(0,1fr)]">
<div
class="frame frame-shadow mx-auto w-full max-w-[400px] rounded-[22px] border border-black/15 bg-(--pt-red)"
>
<div
class="absolute inset-0 bg-[linear-gradient(160deg,#e4102f_0%,#e4102f_62%,#184e92_145%)]"
></div>
<img
src="../../public/campaign-kit/estrela.png"
alt=""
class="kit-asset absolute left-[250px] top-[54px] size-[88px] rounded-full bg-white"
/>
<!-- central 1080x1350 = 70.3125% height, centered -->
<div
class="absolute inset-x-0 top-[14.84375%] h-[70.3125%] border-y-2 border-dashed crop-line"
></div>
<div class="absolute left-[7%] right-[7%] top-[22%]">
<span
class="inline-flex rounded-full bg-(--pt-yellow) px-[4%] py-[1.5%] text-[3cqw] font-black text-black"
>TUTORIAL DO SITE</span
>
<h3 class="brexter mt-[7%] text-[12cqw] leading-[0.88] uppercase text-white">
Crie seu<br />card de<br /><span class="text-(--pt-yellow)">apoio.</span>
</h3>
<p class="mt-[6%] max-w-[65%] text-[3.7cqw] font-semibold leading-[1.2] text-white">
Seu nome ou sua foto, direto pelo celular.
</p>
</div>
<p
class="absolute left-[25px] top-[500px] rounded bg-black/40 px-[11px] py-[5px] text-[8.6px] text-white"
>
#cards
</p>
<img
src="../../public/campaign-kit/marca-negativa-completa.png"
alt="Jorge Solla 1313 · Mais Saúde, Mais Futuro"
class="kit-asset absolute left-[205px] top-[448px] w-[133px]"
/>
<div
class="absolute left-[2%] top-[15.5%] rounded bg-white px-2 py-1 text-[2.5cqw] font-bold text-black"
>
RECORTE CENTRAL ~1080 × 1350
</div>
<span
class="absolute bottom-[4%] left-[7%] rounded bg-black/55 px-2 py-1 text-[2.5cqw] text-white"
>KIT OFICIAL · marca negativa completa</span
>
</div>
<div class="grid content-start gap-5 md:grid-cols-2">
<article class="rounded-2xl border border-black/10 bg-white p-5">
<div class="mb-3 flex items-center justify-between">
<div>
<p class="text-sm font-semibold">Feed 4:5</p>
<p class="text-xs text-muted-foreground">1080 × 1350</p>
</div>
<span class="rounded-full bg-(--campaign-band) px-2 py-1 text-[10px] font-bold"
>SOBREVIVE</span
>
</div>
<div
class="crop-preview relative mx-auto aspect-[4/5] max-w-[270px] overflow-hidden rounded-xl bg-[linear-gradient(155deg,#e4102f,#184e92)] p-[7%] text-white"
>
<span
class="inline-flex rounded-full bg-(--pt-yellow) px-[4%] py-[2%] text-[2.3cqw] font-black text-black"
>TUTORIAL DO SITE</span
>
<p class="brexter mt-[9%] text-[9cqw] leading-[0.88] uppercase">
Crie seu<br />card de<br /><span class="text-(--pt-yellow)">apoio.</span>
</p>
<img
src="../../public/campaign-kit/jorge-solla-negativo.png"
alt="Jorge Solla · Deputado Federal"
class="kit-asset absolute bottom-[7%] right-[7%] w-[35%]"
/>
</div>
<p class="mt-3 text-xs leading-5 text-muted-foreground">
Eyebrow, título inteiro e marca continuam visíveis. Copy auxiliar pode sair.
</p>
</article>
<article class="rounded-2xl border border-black/10 bg-white p-5">
<div class="mb-3 flex items-center justify-between">
<div>
<p class="text-sm font-semibold">Grade 1:1 / 3:4</p>
<p class="text-xs text-muted-foreground">recorte central</p>
</div>
<span class="rounded-full bg-(--campaign-band) px-2 py-1 text-[10px] font-bold"
>SOBREVIVE</span
>
</div>
<div
class="crop-preview relative mx-auto aspect-square max-w-[270px] overflow-hidden rounded-xl bg-[linear-gradient(155deg,#e4102f,#184e92)] p-[7%] text-white"
>
<span
class="inline-flex rounded-full bg-(--pt-yellow) px-[4%] py-[2%] text-[2.3cqw] font-black text-black"
>TUTORIAL</span
>
<p class="brexter mt-[9%] text-[9cqw] leading-[0.88] uppercase">
Crie seu<br />card de<br /><span class="text-(--pt-yellow)">apoio.</span>
</p>
<img
src="../../public/campaign-kit/jorge-solla-negativo.png"
alt="Jorge Solla · Deputado Federal"
class="kit-asset absolute bottom-[7%] right-[7%] w-[35%]"
/>
</div>
<p class="mt-3 text-xs leading-5 text-muted-foreground">
Título nunca depende do terço inferior. A marca reduz, mas não desaparece.
</p>
</article>
<div
class="md:col-span-2 rounded-xl border border-black/10 bg-(--campaign-cream) p-4 text-sm leading-6"
>
<strong>Hierarquia da capa:</strong> “Crie seu card de apoio” é a mensagem; “Tutorial
do site” só categoriza. Não usar screenshot legível como fundo — vira ruído na grade.
</div>
</div>
</div>
</section>
<!-- SISTEMA -->
<section id="spec" class="mt-20" aria-labelledby="spec-title">
<div class="mb-5">
<p class="text-xs font-semibold text-(--pt-red)">CENA 07 · SISTEMA VISUAL</p>
<h2 id="spec-title" class="mt-1 text-xl font-semibold tracking-tight">
Receita consistente, não vinheta pesada
</h2>
</div>
<div class="grid gap-5 md:grid-cols-2 xl:grid-cols-4">
<article class="rounded-2xl border border-black/10 bg-white p-5">
<p class="text-xs font-bold text-(--pt-red)">TIPOGRAFIA</p>
<p class="brexter mt-4 text-4xl leading-[0.9] uppercase">Texto de<br />impacto.</p>
<p class="mt-4 text-sm leading-6 text-muted-foreground">
Brexter Bold só em hook, capa e CTA final. Inter no badge de passo e legendas.
</p>
</article>
<article class="rounded-2xl border border-black/10 bg-white p-5">
<p class="text-xs font-bold text-(--pt-red)">PALETA</p>
<div class="mt-4 grid grid-cols-2 gap-2">
<div
class="aspect-[3/2] rounded-lg bg-(--pt-red) p-2 text-[10px] font-bold text-white"
>
#E4102F
</div>
<div class="aspect-[3/2] rounded-lg bg-(--pt-yellow) p-2 text-[10px] font-bold">
#FFEB00
</div>
<div
class="aspect-[3/2] rounded-lg bg-(--kit-blue) p-2 text-[10px] font-bold text-white"
>
#184E92
</div>
<div
class="aspect-[3/2] rounded-lg bg-(--kit-green) p-2 text-[10px] font-bold text-white"
>
#009647
</div>
</div>
<p class="mt-4 text-sm leading-6 text-muted-foreground">
Cenas gráficas usam o kit. Capturas não são recoloridas: nelas, o site mantém
#A21C1C/#FFE607/creme e só o chrome usa amarelo oficial.
</p>
</article>
<article class="rounded-2xl border border-black/10 bg-white p-5">
<p class="text-xs font-bold text-(--pt-red)">LEGENDA</p>
<div class="mt-4 rounded-xl bg-stone-400 p-5">
<p
class="rounded-lg bg-black/90 px-4 py-3 text-center text-base font-bold leading-tight text-white"
>
Toque em <span class="text-(--pt-yellow)">“Card com seu nome”</span>.
</p>
</div>
<p class="mt-4 text-sm leading-6 text-muted-foreground">
Máx. 2 linhas · largura ≤900px · centro em 1100–1250px.
</p>
</article>
<article class="rounded-2xl border border-black/10 bg-white p-5">
<p class="text-xs font-bold text-(--pt-red)">GESTO</p>
<div class="relative mt-4 aspect-[3/2] overflow-hidden rounded-xl bg-stone-300">
<div
class="absolute left-[18%] top-[12%] h-[76%] w-[58%] rounded-xl border-[3px] border-(--pt-yellow) shadow-[0_0_0_6px_rgb(255_235_0/22%)]"
></div>
<svg
class="cursor absolute left-[61%] top-[56%] w-[12%] text-white"
viewBox="0 0 24 30"
fill="currentColor"
stroke="#000"
stroke-width="1.4"
>
<path d="M3 2v22l6-6 4 9 4-2-4-9h8L3 2Z" />
</svg>
</div>
<p class="mt-4 text-sm leading-6 text-muted-foreground">
Zoom 108–122%; cursor chega antes; halo retangular 3:4 acompanha o alvo e pulsa uma
vez; easing suave. No frame de Passo 1: x87 · y196 · 186 × 246px @360.
</p>
</article>
</div>
<div
class="mt-5 rounded-2xl border border-black/10 bg-(--campaign-cream) p-5 text-sm leading-6"
>
<p class="text-xs font-bold text-(--pt-red)">FIT CHECK · BREXTER BOLD OFICIAL @ 360PX</p>
<p class="mt-2 text-muted-foreground">
<strong class="text-foreground">Capa:</strong> mantém 43,2px (12cqw), entrelinha 38,02px
(0,88), tracking 0 e largura útil 309,6px. “Crie seu” (255px), “card de” (246px) e
“apoio.” (191px) cabem sem ajuste.
</p>
<p class="mt-1 text-muted-foreground">
<strong class="text-foreground">CTA:</strong> título ajustado para 41,4px (11,5cqw),
entrelinha 37,26px (0,9), tracking 0 e largura máxima 309,6px; “com você.” passa de
306px para 293,25px. “Link na bio” permanece em 28,8px (8cqw), entrelinha 28,8px,
tracking 0, dentro dos 259,2px úteis do card.
</p>
<p class="mt-1 text-muted-foreground">
<strong class="text-foreground">Marca e slogan:</strong> hook e capa usam
`marca-negativa-completa.png`; CTA usa `marca-positiva-completa.png`; chrome usa
`jorge-solla-positivo.png`. “Mais Saúde, Mais Futuro” entra somente dentro dos três
ativos completos, com altura visual aproximada de 8px @360 (24px no render), nunca como
headline concorrente. Não aplicar recorte, filtro, sombra ou recoloração.
</p>
</div>
</section>
<footer class="mt-16 border-t border-black/15 pt-6 text-xs leading-5 text-muted-foreground">
<p>
<strong class="text-foreground">ATIVOS:</strong> o único conteúdo ainda capturado em tempo
de geração é o fluxo real `#cards`. Marca, número, slogan e decoração vêm exclusivamente
de `public/campaign-kit/`; o SVG branco legado e lockups tipográficos deixam de ser
usados.
</p>
<p class="mt-1">
<strong class="text-foreground">Fonte:</strong> o port deve carregar o Brexter Bold
oficial em peso 700. As medidas de hook, capa e CTA acima foram recalibradas com essa
face; este HTML usa a fallback condensada apenas quando Brexter não estiver instalada
localmente.
</p>
<p class="mt-1">
<strong class="text-foreground">Revalidação no PR:</strong> esta integração do kit é uma
mudança material: o gate humano deve confirmar a estrela oficial em vez do aro, as marcas
completas com slogan e a paleta #E4102F/#184E92/#FFEB00. A métrica aprovada da Brexter
permanece: hook 9,5cqw, capa 12cqw e CTA 11,5cqw.
</p>
</footer>
</main>
</body>
</html>