From 27f4fa32d1d2b7ea1a4aab8d11279d4c673a7bdf Mon Sep 17 00:00:00 2001
From: Francisco Solla <fsolla@pm.me>
Date: Mon, 17 Aug 2026 22:00:38 -0300
Subject: [PATCH] =?UTF-8?q?style(plans=20S1-S4):=20prettier=20nos=20planos?=
 =?UTF-8?q?=20e=20no=20rascunho=20UI=20(format=20p=C3=B3s-commit=20do=20lo?=
 =?UTF-8?q?te)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 docs/plans/secao-conteudos-home-artigos.md    |   2 +-
 docs/plans/secao-conteudos-home-instagram.md  |   2 +-
 docs/plans/secao-conteudos-home-ui-draft.html | 154 +++++++++++++-----
 docs/plans/secao-conteudos-home-youtube.md    |   2 +-
 4 files changed, 115 insertions(+), 45 deletions(-)

diff --git a/docs/plans/secao-conteudos-home-artigos.md b/docs/plans/secao-conteudos-home-artigos.md
index cb97a3c2..d026757f 100644
--- a/docs/plans/secao-conteudos-home-artigos.md
+++ b/docs/plans/secao-conteudos-home-artigos.md
@@ -49,7 +49,7 @@ Fonte iterável: [`secao-conteudos-home-ui-draft.html`](secao-conteudos-home-ui-
 
 - **Vou apresentar dados?** Sim, superfície neste item — mas são **conteúdos** (artigos), não métricas.
 - **Decisões desbloqueadas:** o visitante decide qual artigo ler (clique); nenhum número novo de campanha é inventado aqui.
-- **Forma:** *adiada ao plano de implementação* — restrição de produto: meta = data/categoria do post (já exibidas no site), sem contadores inventados.
+- **Forma:** _adiada ao plano de implementação_ — restrição de produto: meta = data/categoria do post (já exibidas no site), sem contadores inventados.
 
 ## Direção no codebase (hipótese)
 
diff --git a/docs/plans/secao-conteudos-home-instagram.md b/docs/plans/secao-conteudos-home-instagram.md
index 15b5c2e9..5becbc1a 100644
--- a/docs/plans/secao-conteudos-home-instagram.md
+++ b/docs/plans/secao-conteudos-home-instagram.md
@@ -50,7 +50,7 @@ Fonte iterável: [`secao-conteudos-home-ui-draft.html`](secao-conteudos-home-ui-
 
 - **Vou apresentar dados?** Sim, superfície neste item — metadados do post (imagem, legenda, data) vindos da plataforma.
 - **Decisões desbloqueadas:** o visitante decide qual post abrir; nada de métricas inventadas.
-- **Forma:** *adiada ao plano de implementação* — restrição de produto: legenda/data como a plataforma mostra; sem contadores derivados.
+- **Forma:** _adiada ao plano de implementação_ — restrição de produto: legenda/data como a plataforma mostra; sem contadores derivados.
 
 ## Direção no codebase (hipótese)
 
diff --git a/docs/plans/secao-conteudos-home-ui-draft.html b/docs/plans/secao-conteudos-home-ui-draft.html
index 97dd6868..7b0566b2 100644
--- a/docs/plans/secao-conteudos-home-ui-draft.html
+++ b/docs/plans/secao-conteudos-home-ui-draft.html
@@ -9,9 +9,9 @@
   <body class="bg-zinc-950 text-zinc-100 antialiased">
     <main class="mx-auto max-w-5xl p-8">
       <p class="text-sm text-zinc-400">
-        Visitante da home pública de campanha (jorgesolla1313). Seção 3 da página: logo após a
-        prova social, imediatamente antes de "Por que essa eleição importa". Card de conteúdo
-        generalizado (Artigo / YouTube / Instagram) — clique leva ao artigo ou à plataforma.
+        Visitante da home pública de campanha (jorgesolla1313). Seção 3 da página: logo após a prova
+        social, imediatamente antes de "Por que essa eleição importa". Card de conteúdo generalizado
+        (Artigo / YouTube / Instagram) — clique leva ao artigo ou à plataforma.
       </p>
 
       <!-- ============ CENA: desktop (estado final, 3 fontes) ============ -->
@@ -30,16 +30,16 @@
               <p class="text-xs font-extrabold tracking-[0.14em] text-zinc-500 uppercase">
                 Acompanhe de perto
               </p>
-              <h2 class="mt-1 text-2xl font-extrabold text-zinc-900">
-                A caminhada, em tempo real
-              </h2>
+              <h2 class="mt-1 text-2xl font-extrabold text-zinc-900">A caminhada, em tempo real</h2>
               <p class="mt-1 text-sm text-zinc-500">
                 Bastidores, caravanas e as lutas do mandato: conteúdo atualizado, direto das redes.
               </p>
             </div>
             <div class="flex gap-4 text-sm font-bold">
               <a href="#" class="text-red-700 underline-offset-4 hover:underline">Ver artigos →</a>
-              <a href="#" class="text-red-700 underline-offset-4 hover:underline">Seguir no Instagram →</a>
+              <a href="#" class="text-red-700 underline-offset-4 hover:underline"
+                >Seguir no Instagram →</a
+              >
               <a href="#" class="text-red-700 underline-offset-4 hover:underline">YouTube →</a>
             </div>
           </div>
@@ -47,17 +47,26 @@
           <!-- bento: 1 grande + 4 pequenos -->
           <div class="mt-5 grid gap-4 md:grid-cols-4">
             <!-- card grande: artigo destaque -->
-            <a href="#" class="group col-span-2 row-span-2 flex flex-col gap-3 rounded-xl border border-zinc-200 bg-white p-3">
+            <a
+              href="#"
+              class="group col-span-2 row-span-2 flex flex-col gap-3 rounded-xl border border-zinc-200 bg-white p-3"
+            >
               <div class="relative aspect-[16/9] overflow-hidden rounded-lg bg-zinc-200">
-                <span class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase">
+                <span
+                  class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase"
+                >
                   Artigo
                 </span>
-                <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400">
+                <span
+                  class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
+                >
                   capa 16:9 (placeholder)
                 </span>
               </div>
               <div class="flex flex-1 flex-col gap-1">
-                <h3 class="text-base leading-snug font-extrabold text-zinc-900 group-hover:underline">
+                <h3
+                  class="text-base leading-snug font-extrabold text-zinc-900 group-hover:underline"
+                >
                   Título do artigo em destaque, duas ou três linhas para caber
                 </h3>
                 <p class="text-xs leading-relaxed text-zinc-500">
@@ -68,12 +77,19 @@
             </a>
 
             <!-- pequeno: vídeo YouTube -->
-            <a href="#" class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3">
+            <a
+              href="#"
+              class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3"
+            >
               <div class="relative aspect-video overflow-hidden rounded-lg bg-zinc-200">
-                <span class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase">
+                <span
+                  class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase"
+                >
                   YouTube
                 </span>
-                <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400">
+                <span
+                  class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
+                >
                   thumb 16:9
                 </span>
               </div>
@@ -84,12 +100,19 @@
             </a>
 
             <!-- pequeno: vídeo YouTube -->
-            <a href="#" class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3">
+            <a
+              href="#"
+              class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3"
+            >
               <div class="relative aspect-video overflow-hidden rounded-lg bg-zinc-200">
-                <span class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase">
+                <span
+                  class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase"
+                >
                   YouTube
                 </span>
-                <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400">
+                <span
+                  class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
+                >
                   thumb 16:9
                 </span>
               </div>
@@ -100,12 +123,19 @@
             </a>
 
             <!-- pequeno: Instagram -->
-            <a href="#" class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3">
+            <a
+              href="#"
+              class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3"
+            >
               <div class="relative aspect-square overflow-hidden rounded-lg bg-zinc-200">
-                <span class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase">
+                <span
+                  class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase"
+                >
                   Instagram
                 </span>
-                <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400">
+                <span
+                  class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
+                >
                   post 1:1
                 </span>
               </div>
@@ -116,12 +146,19 @@
             </a>
 
             <!-- pequeno: Instagram -->
-            <a href="#" class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3">
+            <a
+              href="#"
+              class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3"
+            >
               <div class="relative aspect-square overflow-hidden rounded-lg bg-zinc-200">
-                <span class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase">
+                <span
+                  class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase"
+                >
                   Instagram
                 </span>
-                <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400">
+                <span
+                  class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
+                >
                   post 1:1
                 </span>
               </div>
@@ -146,7 +183,10 @@
       </section>
 
       <!-- ============ CENA: mobile (carrossel — 1 conteúdo por tela) ============ -->
-      <section data-shot="mobile" class="mt-8 w-[390px] rounded-2xl bg-white p-4 text-zinc-900 shadow-xl">
+      <section
+        data-shot="mobile"
+        class="mt-8 w-[390px] rounded-2xl bg-white p-4 text-zinc-900 shadow-xl"
+      >
         <!-- contexto: prova social -->
         <div class="flex items-center justify-center gap-6 rounded-xl bg-zinc-100 py-2.5">
           <span class="text-xs font-bold text-zinc-400">3.333 proposições</span>
@@ -167,12 +207,19 @@
           <!-- carrossel: 1 card por tela + dots -->
           <div class="mt-4 overflow-hidden rounded-xl">
             <!-- card ativo -->
-            <a href="#" class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3">
+            <a
+              href="#"
+              class="group flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3"
+            >
               <div class="relative aspect-video overflow-hidden rounded-lg bg-zinc-200">
-                <span class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase">
+                <span
+                  class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase"
+                >
                   YouTube
                 </span>
-                <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400">
+                <span
+                  class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
+                >
                   thumb 16:9
                 </span>
               </div>
@@ -191,23 +238,34 @@
             <span class="h-2 w-2 rounded-full bg-zinc-300"></span>
             <span class="h-2 w-2 rounded-full bg-zinc-300"></span>
           </div>
-          <p class="mt-2 text-center text-xs font-semibold text-zinc-500">1 de 5 · deslize para ver os próximos</p>
+          <p class="mt-2 text-center text-xs font-semibold text-zinc-500">
+            1 de 5 · deslize para ver os próximos
+          </p>
         </div>
       </section>
 
       <!-- ============ CENA: card com compartilhar (S4 — WhatsApp) ============ -->
-      <section data-shot="compartilhar" class="mt-8 rounded-2xl bg-white p-6 text-zinc-900 shadow-xl">
+      <section
+        data-shot="compartilhar"
+        class="mt-8 rounded-2xl bg-white p-6 text-zinc-900 shadow-xl"
+      >
         <p class="text-sm font-bold text-zinc-700">
-          Card de conteúdo com botão discreto de compartilhamento (canto do card, sem competir com
-          o CTA primário): abre WhatsApp com mensagem pré-configurada + opção de copiar link.
+          Card de conteúdo com botão discreto de compartilhamento (canto do card, sem competir com o
+          CTA primário): abre WhatsApp com mensagem pré-configurada + opção de copiar link.
         </p>
         <div class="mt-4 grid max-w-3xl grid-cols-3 gap-4">
-          <div class="group relative flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3">
+          <div
+            class="group relative flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3"
+          >
             <div class="relative aspect-video overflow-hidden rounded-lg bg-zinc-200">
-              <span class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase">
+              <span
+                class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase"
+              >
                 YouTube
               </span>
-              <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400">
+              <span
+                class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
+              >
                 thumb 16:9
               </span>
             </div>
@@ -223,12 +281,18 @@
               ↗
             </button>
           </div>
-          <div class="group relative flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3">
+          <div
+            class="group relative flex flex-col gap-2 rounded-xl border border-zinc-200 bg-white p-3"
+          >
             <div class="relative aspect-video overflow-hidden rounded-lg bg-zinc-200">
-              <span class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase">
+              <span
+                class="absolute top-2 left-2 rounded-full bg-zinc-800 px-2 py-0.5 text-[10px] font-extrabold tracking-wider text-white uppercase"
+              >
                 Artigo
               </span>
-              <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400">
+              <span
+                class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-zinc-400"
+              >
                 capa 16:9
               </span>
             </div>
@@ -244,15 +308,21 @@
               ↗
             </button>
           </div>
-          <div class="flex flex-col justify-center gap-2 rounded-xl border border-dashed border-zinc-300 bg-zinc-50 p-3">
+          <div
+            class="flex flex-col justify-center gap-2 rounded-xl border border-dashed border-zinc-300 bg-zinc-50 p-3"
+          >
             <p class="text-xs font-semibold text-zinc-500">
               Menu aberto (v1): "Compartilhar no WhatsApp" (mensagem pré-configurada com título +
               link) e "Copiar link".
             </p>
-            <div class="rounded-lg border border-zinc-200 bg-white p-2 text-xs font-semibold text-zinc-700">
+            <div
+              class="rounded-lg border border-zinc-200 bg-white p-2 text-xs font-semibold text-zinc-700"
+            >
               WhatsApp ↗
             </div>
-            <div class="rounded-lg border border-zinc-200 bg-white p-2 text-xs font-semibold text-zinc-700">
+            <div
+              class="rounded-lg border border-zinc-200 bg-white p-2 text-xs font-semibold text-zinc-700"
+            >
               Copiar link
             </div>
           </div>
@@ -263,8 +333,8 @@
       <section data-shot="vazio" class="mt-8 rounded-2xl bg-white p-6 text-zinc-900 shadow-xl">
         <p class="text-sm font-bold text-zinc-700">
           Vazio / fail-closed — nenhuma fonte com conteúdo disponível (artigos invisíveis ou APIs
-          sem snapshot). Recomendação: a seção inteira é ocultada; a página mantém o fluxo
-          Prova → Por que essa eleição importa, sem zona morta.
+          sem snapshot). Recomendação: a seção inteira é ocultada; a página mantém o fluxo Prova →
+          Por que essa eleição importa, sem zona morta.
         </p>
         <div class="mt-4 flex items-center justify-center gap-10 rounded-xl bg-zinc-100 py-3">
           <span class="text-sm font-bold text-zinc-400">3.333 proposições</span>
diff --git a/docs/plans/secao-conteudos-home-youtube.md b/docs/plans/secao-conteudos-home-youtube.md
index b17634bb..00c04a68 100644
--- a/docs/plans/secao-conteudos-home-youtube.md
+++ b/docs/plans/secao-conteudos-home-youtube.md
@@ -50,7 +50,7 @@ Fonte iterável: [`secao-conteudos-home-ui-draft.html`](secao-conteudos-home-ui-
 
 - **Vou apresentar dados?** Sim, superfície neste item — metadados do vídeo (título, thumbnail, data, visualizações) vindos da plataforma.
 - **Decisões desbloqueadas:** o visitante decide qual vídeo assistir (clique); visualizações são fato da plataforma (não inventar).
-- **Forma:** *adiada ao plano de implementação* — restrição de produto: mostrar views como a plataforma mostra (ex. "12,4 mil"), nunca métrica derivada da campanha.
+- **Forma:** _adiada ao plano de implementação_ — restrição de produto: mostrar views como a plataforma mostra (ex. "12,4 mil"), nunca métrica derivada da campanha.
 
 ## Direção no codebase (hipótese)