From 62d1018979e33b4a841d80e59d54f3f576e52d17 Mon Sep 17 00:00:00 2001
From: Francisco Solla <fsolla@pm.me>
Date: Thu, 24 Sep 2026 00:42:54 -0300
Subject: [PATCH] style(S36,C220,S37,S38,S39): formata os designs hi-fi dos
 planos

---
 ...conteudos-cards-no-catalogo-ui-design.html | 680 ++++++++++++++++--
 .../central-conteudos-cards-no-catalogo.md    |   2 +-
 ...ntral-conteudos-header-logo-ui-design.html | 218 +++++-
 docs/plans/central-conteudos-header-logo.md   |   4 +-
 ...entral-conteudos-liderancas-ui-design.html | 426 ++++++++++-
 docs/plans/central-conteudos-liderancas.md    |   2 +-
 ...al-conteudos-link-instagram-ui-design.html | 392 +++++++++-
 ...entral-conteudos-secao-home-ui-design.html | 559 ++++++++++++--
 8 files changed, 2102 insertions(+), 181 deletions(-)

diff --git a/docs/plans/central-conteudos-cards-no-catalogo-ui-design.html b/docs/plans/central-conteudos-cards-no-catalogo-ui-design.html
index 42e82344..abda87e9 100644
--- a/docs/plans/central-conteudos-cards-no-catalogo-ui-design.html
+++ b/docs/plans/central-conteudos-cards-no-catalogo-ui-design.html
@@ -6,88 +6,650 @@
     <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
     <title>Design — S35 · Cards misturados ao catálogo</title>
     <style type="text/tailwindcss">
-      @theme { --font-sans: Arimo, Arial, sans-serif; }
-      :root { --red:#a21c1c;--kit:#e4102f;--blue:#184e92;--yellow:#ffe607;--cream:#fff8f2;--muted:#6c615e;--line:rgb(0 0 0/.12);--display:'Exo 2','Arial Black',sans-serif; }
-      *{box-sizing:border-box}.display{font-family:var(--display)}
-      .board{background:#e7e3e0;background-image:radial-gradient(rgb(24 78 146/.09) .7px,transparent .7px);background-size:18px 18px}
-      .frame{box-shadow:0 22px 60px rgb(39 25 22/.13)}.desktop{width:1280px}.phone{width:390px;border-radius:28px}.scene:after{content:'';height:1px;flex:1;background:#cfc9c5}
-      .field{min-height:44px;border:1px solid rgb(0 0 0/.18);border-radius:10px;background:#fff;padding:10px 13px;font-size:15px}
-      .chip{display:inline-flex;min-height:36px;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;background:#fff;padding:6px 11px;font-size:12px;font-weight:700}.active{border-color:rgb(24 78 146/.35);background:#eef4fb;color:#184e92}
-      .card{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 8px 24px rgb(71 19 14/.07)}
-      .tag{display:inline-flex;min-height:23px;align-items:center;border-radius:999px;background:#eef4fb;padding:4px 8px;color:#184e92;font-size:11px;font-weight:800}
-      .alias{display:inline-flex;border:1px solid rgb(0 0 0/.1);border-radius:999px;background:#fff;padding:3px 7px;color:#6c615e;font-size:10px;font-weight:700}
-      .btn{display:inline-flex;min-height:44px;align-items:center;justify-content:center;border-radius:10px;border:1.5px solid rgb(162 28 28/.28);background:#fff;padding:9px 13px;color:#a21c1c;font-size:13px;font-weight:800}
-      .art{position:relative;display:grid;place-items:center;overflow:hidden;background:linear-gradient(145deg,#184e92,#0876ac);color:#fff}.art:before{content:'1313';position:absolute;font-family:var(--display);font-size:66px;font-weight:900;color:rgb(255 255 255/.08);transform:rotate(-8deg)}.art-red{background:linear-gradient(145deg,#e4102f,#a21c1c)}.art-light{background:linear-gradient(145deg,#eee9e5,#fff)}
-      .piece-art{display:grid;place-items:center;background:linear-gradient(135deg,#e5e2df,#f7f5f3);color:#6c615e;text-align:center;font-size:10px;font-weight:800;letter-spacing:.04em}
+      @theme {
+        --font-sans: Arimo, Arial, sans-serif;
+      }
+      :root {
+        --red: #a21c1c;
+        --kit: #e4102f;
+        --blue: #184e92;
+        --yellow: #ffe607;
+        --cream: #fff8f2;
+        --muted: #6c615e;
+        --line: rgb(0 0 0/0.12);
+        --display: 'Exo 2', 'Arial Black', sans-serif;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      .display {
+        font-family: var(--display);
+      }
+      .board {
+        background: #e7e3e0;
+        background-image: radial-gradient(rgb(24 78 146/0.09) 0.7px, transparent 0.7px);
+        background-size: 18px 18px;
+      }
+      .frame {
+        box-shadow: 0 22px 60px rgb(39 25 22/0.13);
+      }
+      .desktop {
+        width: 1280px;
+      }
+      .phone {
+        width: 390px;
+        border-radius: 28px;
+      }
+      .scene:after {
+        content: '';
+        height: 1px;
+        flex: 1;
+        background: #cfc9c5;
+      }
+      .field {
+        min-height: 44px;
+        border: 1px solid rgb(0 0 0/0.18);
+        border-radius: 10px;
+        background: #fff;
+        padding: 10px 13px;
+        font-size: 15px;
+      }
+      .chip {
+        display: inline-flex;
+        min-height: 36px;
+        align-items: center;
+        gap: 6px;
+        border: 1px solid var(--line);
+        border-radius: 999px;
+        background: #fff;
+        padding: 6px 11px;
+        font-size: 12px;
+        font-weight: 700;
+      }
+      .active {
+        border-color: rgb(24 78 146/0.35);
+        background: #eef4fb;
+        color: #184e92;
+      }
+      .card {
+        overflow: hidden;
+        border: 1px solid var(--line);
+        border-radius: 14px;
+        background: #fff;
+        box-shadow: 0 8px 24px rgb(71 19 14/0.07);
+      }
+      .tag {
+        display: inline-flex;
+        min-height: 23px;
+        align-items: center;
+        border-radius: 999px;
+        background: #eef4fb;
+        padding: 4px 8px;
+        color: #184e92;
+        font-size: 11px;
+        font-weight: 800;
+      }
+      .alias {
+        display: inline-flex;
+        border: 1px solid rgb(0 0 0/0.1);
+        border-radius: 999px;
+        background: #fff;
+        padding: 3px 7px;
+        color: #6c615e;
+        font-size: 10px;
+        font-weight: 700;
+      }
+      .btn {
+        display: inline-flex;
+        min-height: 44px;
+        align-items: center;
+        justify-content: center;
+        border-radius: 10px;
+        border: 1.5px solid rgb(162 28 28/0.28);
+        background: #fff;
+        padding: 9px 13px;
+        color: #a21c1c;
+        font-size: 13px;
+        font-weight: 800;
+      }
+      .art {
+        position: relative;
+        display: grid;
+        place-items: center;
+        overflow: hidden;
+        background: linear-gradient(145deg, #184e92, #0876ac);
+        color: #fff;
+      }
+      .art:before {
+        content: '1313';
+        position: absolute;
+        font-family: var(--display);
+        font-size: 66px;
+        font-weight: 900;
+        color: rgb(255 255 255/0.08);
+        transform: rotate(-8deg);
+      }
+      .art-red {
+        background: linear-gradient(145deg, #e4102f, #a21c1c);
+      }
+      .art-light {
+        background: linear-gradient(145deg, #eee9e5, #fff);
+      }
+      .piece-art {
+        display: grid;
+        place-items: center;
+        background: linear-gradient(135deg, #e5e2df, #f7f5f3);
+        color: #6c615e;
+        text-align: center;
+        font-size: 10px;
+        font-weight: 800;
+        letter-spacing: 0.04em;
+      }
     </style>
   </head>
   <body class="board min-h-screen text-black antialiased">
     <main class="mx-auto max-w-[1480px] space-y-14 px-4 py-12 md:px-8">
       <header class="max-w-3xl">
-        <span class="rounded-full bg-[#e4102f] px-3 py-1 text-xs font-bold text-white">S35 · revisão do gate</span>
+        <span class="rounded-full bg-[#e4102f] px-3 py-1 text-xs font-bold text-white"
+          >S35 · revisão do gate</span
+        >
         <h1 class="display mt-4 text-4xl font-black">Cards e peças vivem no mesmo board.</h1>
-        <p class="mt-2 text-sm leading-6 text-[#6c615e]">Cada modelo é um item individual na ordem normal do catálogo. Não existe faixa, cabeçalho ou agrupamento próprio para cards.</p>
+        <p class="mt-2 text-sm leading-6 text-[#6c615e]">
+          Cada modelo é um item individual na ordem normal do catálogo. Não existe faixa, cabeçalho
+          ou agrupamento próprio para cards.
+        </p>
       </header>
 
       <section>
-        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 01</span><h2>Board padrão · desktop 1280 · peças e modelos misturados</h2></div>
+        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
+          <span>CENA 01</span>
+          <h2>Board padrão · desktop 1280 · peças e modelos misturados</h2>
+        </div>
         <div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white">
-          <header class="flex h-16 items-center justify-between bg-[#ae1603] px-10"><div class="h-9 w-44 rounded bg-white/20"></div><b class="text-sm text-white">Central de Conteúdos</b></header>
+          <header class="flex h-16 items-center justify-between bg-[#ae1603] px-10">
+            <div class="h-9 w-44 rounded bg-white/20"></div>
+            <b class="text-sm text-white">Central de Conteúdos</b>
+          </header>
           <div class="mx-auto max-w-6xl px-10 py-10">
-            <div class="rounded-xl bg-[#fff8f2] p-4"><div class="field text-[#6c615e]">Encontre uma peça por assunto, cidade ou tema…</div><div class="mt-3 flex gap-2"><span class="chip">Tipo⌄</span><span class="chip">Cidade⌄</span><span class="chip">Região⌄</span><span class="chip">Tema⌄</span><span class="chip">Instituição⌄</span></div></div>
-            <div class="mt-8"><h2 class="display text-2xl font-black">Escolha, compartilhe e peça voto</h2><p class="mt-1 text-sm text-[#6c615e]">Uma lista só: peças oficiais e convites para criar seu card.</p></div>
-            <div class="mt-5 grid grid-cols-3 gap-6">
-              <article class="card"><div class="piece-art relative aspect-video"><span>NEEDS ASSET · POSTER REAL</span><span class="absolute grid size-12 place-items-center rounded-full bg-[#ffe607] text-xl text-black shadow">▶</span></div><div class="p-4"><span class="tag">Vídeo</span><h3 class="mt-2 font-extrabold">Título da peça publicada</h3><p class="mt-1 text-xs text-[#6c615e]">Tema · Cidade</p><div class="mt-4 grid grid-cols-2 gap-2"><span class="btn">Baixar</span><span class="btn">Compartilhar</span></div></div></article>
-              <article class="card"><div class="art aspect-video"><b class="relative display text-2xl">#SOU ____</b></div><div class="p-4"><span class="tag">Card</span><h3 class="mt-2 font-extrabold">Card com seu nome</h3><p class="mt-1 text-xs leading-5 text-[#6c615e]">Coloque seu nome no card oficial.</p><div class="mt-2 flex gap-1"><span class="alias">nome</span></div><a class="btn mt-4 w-full">Escolher este modelo →</a></div></article>
-              <article class="card"><div class="piece-art aspect-video">NEEDS ASSET · FOTO REAL</div><div class="p-4"><span class="tag">Foto</span><h3 class="mt-2 font-extrabold">Outra peça publicada</h3><p class="mt-1 text-xs text-[#6c615e]">Tema da peça</p><div class="mt-4 grid grid-cols-2 gap-2"><span class="btn">Baixar</span><span class="btn">Compartilhar</span></div></div></article>
-              <article class="card"><div class="art aspect-video"><div class="relative text-center"><b class="display block bg-[#e4102f] px-4 py-1 text-lg text-[#ffeb00]">TIME DE</b><b class="display mt-1 block bg-[#0061a5] px-4 py-1 text-2xl">VOCÊ</b></div><span class="absolute right-2 bottom-2 text-[9px] font-black">PLACEHOLDER · ARTE EXISTENTE</span></div><div class="p-4"><span class="tag">Card</span><h3 class="mt-2 font-extrabold">Time de você</h3><p class="mt-1 text-xs text-[#6c615e]">Entre para o time com sua foto.</p><div class="mt-2 flex gap-1"><span class="alias">santinho</span></div><a class="btn mt-4 w-full">Escolher este modelo →</a></div></article>
-              <article class="card"><div class="piece-art relative aspect-video"><span>NEEDS ASSET · CAPA REAL</span><span class="absolute grid size-12 place-items-center rounded-full bg-[#ffe607] text-xl text-black shadow">▶</span></div><div class="p-4"><span class="tag">Áudio</span><h3 class="mt-2 font-extrabold">Mensagem para compartilhar</h3><p class="mt-1 text-xs text-[#6c615e]">Campanha</p><div class="mt-4 grid grid-cols-2 gap-2"><span class="btn">Baixar</span><span class="btn">Compartilhar</span></div></div></article>
-              <article class="card border-2 border-[#e4102f]"><div class="art art-red aspect-video"><span class="absolute top-2 right-2 rounded-full bg-white px-2 py-1 text-[9px] font-black text-[#184e92]">NOVO</span><b class="relative display text-xl text-[#ffeb00]">MINHA COLINHA</b><span class="absolute right-2 bottom-2 text-[9px] font-black">PLACEHOLDER · ARTE EXISTENTE</span></div><div class="p-4"><span class="tag">Card</span><h3 class="mt-2 font-extrabold">Minha colinha</h3><p class="mt-1 text-xs text-[#6c615e]">Monte sua cola de votação.</p><div class="mt-2 flex gap-1"><span class="alias">santinho</span><span class="alias">colinha</span></div><a class="btn mt-4 w-full">Escolher este modelo →</a></div></article>
+            <div class="rounded-xl bg-[#fff8f2] p-4">
+              <div class="field text-[#6c615e]">Encontre uma peça por assunto, cidade ou tema…</div>
+              <div class="mt-3 flex gap-2">
+                <span class="chip">Tipo⌄</span><span class="chip">Cidade⌄</span
+                ><span class="chip">Região⌄</span><span class="chip">Tema⌄</span
+                ><span class="chip">Instituição⌄</span>
+              </div>
+            </div>
+            <div class="mt-8">
+              <h2 class="display text-2xl font-black">Escolha, compartilhe e peça voto</h2>
+              <p class="mt-1 text-sm text-[#6c615e]">
+                Uma lista só: peças oficiais e convites para criar seu card.
+              </p>
+            </div>
+            <div class="mt-5 grid grid-cols-3 gap-6">
+              <article class="card">
+                <div class="piece-art relative aspect-video">
+                  <span>NEEDS ASSET · POSTER REAL</span
+                  ><span
+                    class="absolute grid size-12 place-items-center rounded-full bg-[#ffe607] text-xl text-black shadow"
+                    >▶</span
+                  >
+                </div>
+                <div class="p-4">
+                  <span class="tag">Vídeo</span>
+                  <h3 class="mt-2 font-extrabold">Título da peça publicada</h3>
+                  <p class="mt-1 text-xs text-[#6c615e]">Tema · Cidade</p>
+                  <div class="mt-4 grid grid-cols-2 gap-2">
+                    <span class="btn">Baixar</span><span class="btn">Compartilhar</span>
+                  </div>
+                </div>
+              </article>
+              <article class="card">
+                <div class="art aspect-video">
+                  <b class="relative display text-2xl">#SOU ____</b>
+                </div>
+                <div class="p-4">
+                  <span class="tag">Card</span>
+                  <h3 class="mt-2 font-extrabold">Card com seu nome</h3>
+                  <p class="mt-1 text-xs leading-5 text-[#6c615e]">
+                    Coloque seu nome no card oficial.
+                  </p>
+                  <div class="mt-2 flex gap-1"><span class="alias">nome</span></div>
+                  <a class="btn mt-4 w-full">Escolher este modelo →</a>
+                </div>
+              </article>
+              <article class="card">
+                <div class="piece-art aspect-video">NEEDS ASSET · FOTO REAL</div>
+                <div class="p-4">
+                  <span class="tag">Foto</span>
+                  <h3 class="mt-2 font-extrabold">Outra peça publicada</h3>
+                  <p class="mt-1 text-xs text-[#6c615e]">Tema da peça</p>
+                  <div class="mt-4 grid grid-cols-2 gap-2">
+                    <span class="btn">Baixar</span><span class="btn">Compartilhar</span>
+                  </div>
+                </div>
+              </article>
+              <article class="card">
+                <div class="art aspect-video">
+                  <div class="relative text-center">
+                    <b class="display block bg-[#e4102f] px-4 py-1 text-lg text-[#ffeb00]"
+                      >TIME DE</b
+                    ><b class="display mt-1 block bg-[#0061a5] px-4 py-1 text-2xl">VOCÊ</b>
+                  </div>
+                  <span class="absolute right-2 bottom-2 text-[9px] font-black"
+                    >PLACEHOLDER · ARTE EXISTENTE</span
+                  >
+                </div>
+                <div class="p-4">
+                  <span class="tag">Card</span>
+                  <h3 class="mt-2 font-extrabold">Time de você</h3>
+                  <p class="mt-1 text-xs text-[#6c615e]">Entre para o time com sua foto.</p>
+                  <div class="mt-2 flex gap-1"><span class="alias">santinho</span></div>
+                  <a class="btn mt-4 w-full">Escolher este modelo →</a>
+                </div>
+              </article>
+              <article class="card">
+                <div class="piece-art relative aspect-video">
+                  <span>NEEDS ASSET · CAPA REAL</span
+                  ><span
+                    class="absolute grid size-12 place-items-center rounded-full bg-[#ffe607] text-xl text-black shadow"
+                    >▶</span
+                  >
+                </div>
+                <div class="p-4">
+                  <span class="tag">Áudio</span>
+                  <h3 class="mt-2 font-extrabold">Mensagem para compartilhar</h3>
+                  <p class="mt-1 text-xs text-[#6c615e]">Campanha</p>
+                  <div class="mt-4 grid grid-cols-2 gap-2">
+                    <span class="btn">Baixar</span><span class="btn">Compartilhar</span>
+                  </div>
+                </div>
+              </article>
+              <article class="card border-2 border-[#e4102f]">
+                <div class="art art-red aspect-video">
+                  <span
+                    class="absolute top-2 right-2 rounded-full bg-white px-2 py-1 text-[9px] font-black text-[#184e92]"
+                    >NOVO</span
+                  ><b class="relative display text-xl text-[#ffeb00]">MINHA COLINHA</b
+                  ><span class="absolute right-2 bottom-2 text-[9px] font-black"
+                    >PLACEHOLDER · ARTE EXISTENTE</span
+                  >
+                </div>
+                <div class="p-4">
+                  <span class="tag">Card</span>
+                  <h3 class="mt-2 font-extrabold">Minha colinha</h3>
+                  <p class="mt-1 text-xs text-[#6c615e]">Monte sua cola de votação.</p>
+                  <div class="mt-2 flex gap-1">
+                    <span class="alias">santinho</span><span class="alias">colinha</span>
+                  </div>
+                  <a class="btn mt-4 w-full">Escolher este modelo →</a>
+                </div>
+              </article>
+            </div>
+            <div
+              class="mt-7 rounded-xl border border-[#184e92]/20 bg-[#eef4fb] p-4 text-sm leading-6 text-[#184e92]"
+            >
+              <b>Regra do gate:</b> a ordem acima mistura itens por relevância/ordem do catálogo.
+              “Card” é apenas o tipo do item — nunca um cabeçalho ou uma seção dentro do board.
             </div>
-            <div class="mt-7 rounded-xl border border-[#184e92]/20 bg-[#eef4fb] p-4 text-sm leading-6 text-[#184e92]"><b>Regra do gate:</b> a ordem acima mistura itens por relevância/ordem do catálogo. “Card” é apenas o tipo do item — nunca um cabeçalho ou uma seção dentro do board.</div>
           </div>
         </div>
       </section>
 
       <section>
-        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 02</span><h2>Mobile 390 · board misto e Tipo “Card” ativo</h2></div>
-        <div class="flex flex-wrap justify-center gap-8"><div class="phone frame min-h-[960px] overflow-hidden bg-white"><header class="flex h-14 items-center justify-between bg-[#ae1603] px-4"><div class="h-7 w-32 rounded bg-white/20"></div><span class="text-white">☰</span></header><div class="p-4"><div class="field text-sm text-[#6c615e]">Busque uma peça ou card…</div><div class="mt-3 flex gap-2 overflow-hidden"><span class="chip shrink-0">Tipo⌄</span><span class="chip shrink-0">Cidade⌄</span><span class="chip shrink-0">Tema⌄</span></div><h2 class="display mt-6 text-2xl font-black">Escolha, compartilhe e peça voto</h2><div class="mt-4 space-y-4">
-          <article class="card grid grid-cols-[128px_1fr]"><div class="piece-art min-h-40">NEEDS ASSET<br/>POSTER REAL</div><div class="p-4"><span class="tag">Vídeo</span><h3 class="mt-2 text-sm font-extrabold">Título da peça publicada</h3><a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a></div></article>
-          <article class="card grid grid-cols-[128px_1fr]"><div class="art min-h-40"><b class="relative display text-xl">#SOU</b></div><div class="p-4"><span class="tag">Card</span><h3 class="mt-2 text-sm font-extrabold">Card com seu nome</h3><span class="alias mt-2">nome</span><a class="mt-3 block text-xs font-bold text-[#a21c1c]">Escolher →</a></div></article>
-          <article class="card grid grid-cols-[128px_1fr]"><div class="piece-art min-h-40">NEEDS ASSET<br/>FOTO REAL</div><div class="p-4"><span class="tag">Foto</span><h3 class="mt-2 text-sm font-extrabold">Outra peça publicada</h3><a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a></div></article>
-          <article class="card grid grid-cols-[128px_1fr]"><div class="art art-red min-h-40"><b class="relative display text-center text-lg text-[#ffeb00]">MINHA<br/>COLINHA</b></div><div class="p-4"><span class="tag">Card · NOVO</span><h3 class="mt-2 text-sm font-extrabold">Minha colinha</h3><div class="mt-2 flex gap-1"><span class="alias">santinho</span><span class="alias">colinha</span></div><a class="mt-3 block text-xs font-bold text-[#a21c1c]">Escolher →</a></div></article>
-        </div><p class="mt-5 text-center text-[11px] leading-4 text-[#6c615e]">Sem divisor “Cards”. A alternância peça → card → peça é intencional.</p></div></div>
-          <div class="phone frame min-h-[960px] overflow-hidden bg-white"><header class="flex h-14 items-center justify-between bg-[#ae1603] px-4"><div class="h-7 w-32 rounded bg-white/20"></div><span class="text-white">☰</span></header><div class="p-4"><div class="field text-sm text-[#6c615e]">Busque um card…</div><div class="mt-3 flex gap-2 overflow-hidden"><span class="chip active shrink-0">Tipo · Card ×</span><span class="chip shrink-0">Tema⌄</span></div><h2 class="display mt-6 text-2xl font-black">Escolha, compartilhe e peça voto</h2><p class="mt-1 text-xs text-[#6c615e]">6 itens com o filtro aplicado.</p><div class="mt-4 space-y-3">
-            <article class="card grid grid-cols-[96px_1fr]"><div class="art min-h-28"><b class="relative display">#SOU</b></div><div class="p-3"><span class="tag">Card</span><h3 class="mt-1 text-sm font-extrabold">Card com seu nome</h3><span class="alias mt-1">nome</span></div></article>
-            <article class="card grid grid-cols-[96px_1fr]"><div class="art art-light min-h-28"><span class="relative text-2xl text-[#a21c1c]">◎</span></div><div class="p-3"><span class="tag">Card</span><h3 class="mt-1 text-sm font-extrabold">Moldura quadrada</h3><span class="alias mt-1">foto de perfil</span></div></article>
-            <article class="card grid grid-cols-[96px_1fr]"><div class="art art-light min-h-28"><span class="relative text-2xl text-[#a21c1c]">▯</span></div><div class="p-3"><span class="tag">Card</span><h3 class="mt-1 text-sm font-extrabold">Moldura vertical</h3><span class="alias mt-1">foto de perfil</span></div></article>
-            <article class="card grid grid-cols-[96px_1fr]"><div class="art min-h-28"><b class="relative display text-center text-xs">TIME DE<br/>VOCÊ</b></div><div class="p-3"><span class="tag">Card</span><h3 class="mt-1 text-sm font-extrabold">Time de você</h3><span class="alias mt-1">santinho</span></div></article>
-            <article class="card grid grid-cols-[96px_1fr]"><div class="art art-red min-h-28"><b class="relative display text-center text-xs text-[#ffeb00]">TIME DO<br/>ESTADUAL</b></div><div class="p-3"><span class="tag">Card</span><h3 class="mt-1 text-sm font-extrabold">Time do estadual</h3><span class="alias mt-1">estadual</span></div></article>
-            <article class="card grid grid-cols-[96px_1fr] border-2 border-[#e4102f]"><div class="art art-red min-h-28"><b class="relative display text-center text-xs text-[#ffeb00]">MINHA<br/>COLINHA</b></div><div class="p-3"><span class="tag">Card · NOVO</span><h3 class="mt-1 text-sm font-extrabold">Minha colinha</h3><div class="mt-1 flex gap-1"><span class="alias">santinho</span><span class="alias">colinha</span></div></div></article>
-          </div></div></div></div>
-      </section>
-
-      <section>
-        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 03</span><h2>Tipo “Card” ativo · os 6 modelos, sem cabeçalho próprio</h2></div>
-        <div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white"><header class="flex h-16 items-center justify-between bg-[#ae1603] px-10"><div class="h-9 w-44 rounded bg-white/20"></div><b class="text-sm text-white">Central de Conteúdos</b></header><div class="mx-auto max-w-6xl px-10 py-10"><div class="rounded-xl bg-[#fff8f2] p-4"><div class="field text-[#6c615e]">Encontre uma peça por assunto, cidade ou tema…</div><div class="mt-3 flex gap-2"><span class="chip active">Tipo · Card ×</span><span class="chip">Cidade⌄</span><span class="chip">Região⌄</span><span class="chip">Tema⌄</span><span class="chip">Instituição⌄</span></div></div><div class="mt-8 flex items-end justify-between"><div><h2 class="display text-2xl font-black">Escolha, compartilhe e peça voto</h2><p class="mt-1 text-sm text-[#6c615e]">Resultados do filtro aplicado.</p></div><span class="text-xs text-[#6c615e]">6 itens</span></div>
-          <div class="mt-5 grid grid-cols-3 gap-6">
-            <article class="card"><div class="art aspect-video"><b class="relative display text-2xl">#SOU ____</b></div><div class="p-4"><span class="tag">Card</span><h3 class="mt-2 font-extrabold">Card com seu nome</h3><p class="mt-1 text-xs text-[#6c615e]">Coloque seu nome no card oficial.</p><span class="alias mt-2">nome</span><a class="btn mt-4 w-full">Escolher este modelo →</a></div></article>
-            <article class="card"><div class="art art-light aspect-video"><div class="relative grid size-20 place-items-center rounded-full border-2 border-dashed border-[#a21c1c]/40 text-3xl text-[#a21c1c]">◎</div></div><div class="p-4"><span class="tag">Card</span><h3 class="mt-2 font-extrabold">Moldura quadrada</h3><p class="mt-1 text-xs text-[#6c615e]">Foto de perfil quadrada.</p><span class="alias mt-2">foto de perfil</span><a class="btn mt-4 w-full">Escolher este modelo →</a></div></article>
-            <article class="card"><div class="art art-light aspect-video"><div class="relative grid h-24 w-16 place-items-center rounded-lg border-2 border-dashed border-[#a21c1c]/40 text-3xl text-[#a21c1c]">◎</div></div><div class="p-4"><span class="tag">Card</span><h3 class="mt-2 font-extrabold">Moldura vertical</h3><p class="mt-1 text-xs text-[#6c615e]">Foto vertical para stories.</p><span class="alias mt-2">foto de perfil</span><a class="btn mt-4 w-full">Escolher este modelo →</a></div></article>
-            <article class="card"><div class="art aspect-video"><b class="relative display text-xl">TIME DE VOCÊ</b></div><div class="p-4"><span class="tag">Card</span><h3 class="mt-2 font-extrabold">Time de você</h3><p class="mt-1 text-xs text-[#6c615e]">Entre para o time com sua foto.</p><span class="alias mt-2">santinho</span><a class="btn mt-4 w-full">Escolher este modelo →</a></div></article>
-            <article class="card"><div class="art art-red aspect-video"><b class="relative display text-xl text-[#ffeb00]">TIME DO ESTADUAL</b></div><div class="p-4"><span class="tag">Card</span><h3 class="mt-2 font-extrabold">Time do estadual</h3><p class="mt-1 text-xs text-[#6c615e]">Escolha o estadual e personalize.</p><span class="alias mt-2">estadual</span><a class="btn mt-4 w-full">Escolher este modelo →</a></div></article>
-            <article class="card border-2 border-[#e4102f]"><div class="art art-red aspect-video"><span class="absolute top-2 right-2 rounded-full bg-white px-2 py-1 text-[9px] font-black text-[#184e92]">NOVO</span><b class="relative display text-xl text-[#ffeb00]">MINHA COLINHA</b></div><div class="p-4"><span class="tag">Card</span><h3 class="mt-2 font-extrabold">Minha colinha</h3><p class="mt-1 text-xs text-[#6c615e]">Monte sua cola de votação.</p><div class="mt-2 flex gap-1"><span class="alias">santinho</span><span class="alias">colinha</span></div><a class="btn mt-4 w-full">Escolher este modelo →</a></div></article>
+        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
+          <span>CENA 02</span>
+          <h2>Mobile 390 · board misto e Tipo “Card” ativo</h2>
+        </div>
+        <div class="flex flex-wrap justify-center gap-8">
+          <div class="phone frame min-h-[960px] overflow-hidden bg-white">
+            <header class="flex h-14 items-center justify-between bg-[#ae1603] px-4">
+              <div class="h-7 w-32 rounded bg-white/20"></div>
+              <span class="text-white">☰</span>
+            </header>
+            <div class="p-4">
+              <div class="field text-sm text-[#6c615e]">Busque uma peça ou card…</div>
+              <div class="mt-3 flex gap-2 overflow-hidden">
+                <span class="chip shrink-0">Tipo⌄</span><span class="chip shrink-0">Cidade⌄</span
+                ><span class="chip shrink-0">Tema⌄</span>
+              </div>
+              <h2 class="display mt-6 text-2xl font-black">Escolha, compartilhe e peça voto</h2>
+              <div class="mt-4 space-y-4">
+                <article class="card grid grid-cols-[128px_1fr]">
+                  <div class="piece-art min-h-40">NEEDS ASSET<br />POSTER REAL</div>
+                  <div class="p-4">
+                    <span class="tag">Vídeo</span>
+                    <h3 class="mt-2 text-sm font-extrabold">Título da peça publicada</h3>
+                    <a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a>
+                  </div>
+                </article>
+                <article class="card grid grid-cols-[128px_1fr]">
+                  <div class="art min-h-40"><b class="relative display text-xl">#SOU</b></div>
+                  <div class="p-4">
+                    <span class="tag">Card</span>
+                    <h3 class="mt-2 text-sm font-extrabold">Card com seu nome</h3>
+                    <span class="alias mt-2">nome</span
+                    ><a class="mt-3 block text-xs font-bold text-[#a21c1c]">Escolher →</a>
+                  </div>
+                </article>
+                <article class="card grid grid-cols-[128px_1fr]">
+                  <div class="piece-art min-h-40">NEEDS ASSET<br />FOTO REAL</div>
+                  <div class="p-4">
+                    <span class="tag">Foto</span>
+                    <h3 class="mt-2 text-sm font-extrabold">Outra peça publicada</h3>
+                    <a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a>
+                  </div>
+                </article>
+                <article class="card grid grid-cols-[128px_1fr]">
+                  <div class="art art-red min-h-40">
+                    <b class="relative display text-center text-lg text-[#ffeb00]"
+                      >MINHA<br />COLINHA</b
+                    >
+                  </div>
+                  <div class="p-4">
+                    <span class="tag">Card · NOVO</span>
+                    <h3 class="mt-2 text-sm font-extrabold">Minha colinha</h3>
+                    <div class="mt-2 flex gap-1">
+                      <span class="alias">santinho</span><span class="alias">colinha</span>
+                    </div>
+                    <a class="mt-3 block text-xs font-bold text-[#a21c1c]">Escolher →</a>
+                  </div>
+                </article>
+              </div>
+              <p class="mt-5 text-center text-[11px] leading-4 text-[#6c615e]">
+                Sem divisor “Cards”. A alternância peça → card → peça é intencional.
+              </p>
+            </div>
           </div>
-        </div></div>
+          <div class="phone frame min-h-[960px] overflow-hidden bg-white">
+            <header class="flex h-14 items-center justify-between bg-[#ae1603] px-4">
+              <div class="h-7 w-32 rounded bg-white/20"></div>
+              <span class="text-white">☰</span>
+            </header>
+            <div class="p-4">
+              <div class="field text-sm text-[#6c615e]">Busque um card…</div>
+              <div class="mt-3 flex gap-2 overflow-hidden">
+                <span class="chip active shrink-0">Tipo · Card ×</span
+                ><span class="chip shrink-0">Tema⌄</span>
+              </div>
+              <h2 class="display mt-6 text-2xl font-black">Escolha, compartilhe e peça voto</h2>
+              <p class="mt-1 text-xs text-[#6c615e]">6 itens com o filtro aplicado.</p>
+              <div class="mt-4 space-y-3">
+                <article class="card grid grid-cols-[96px_1fr]">
+                  <div class="art min-h-28"><b class="relative display">#SOU</b></div>
+                  <div class="p-3">
+                    <span class="tag">Card</span>
+                    <h3 class="mt-1 text-sm font-extrabold">Card com seu nome</h3>
+                    <span class="alias mt-1">nome</span>
+                  </div>
+                </article>
+                <article class="card grid grid-cols-[96px_1fr]">
+                  <div class="art art-light min-h-28">
+                    <span class="relative text-2xl text-[#a21c1c]">◎</span>
+                  </div>
+                  <div class="p-3">
+                    <span class="tag">Card</span>
+                    <h3 class="mt-1 text-sm font-extrabold">Moldura quadrada</h3>
+                    <span class="alias mt-1">foto de perfil</span>
+                  </div>
+                </article>
+                <article class="card grid grid-cols-[96px_1fr]">
+                  <div class="art art-light min-h-28">
+                    <span class="relative text-2xl text-[#a21c1c]">▯</span>
+                  </div>
+                  <div class="p-3">
+                    <span class="tag">Card</span>
+                    <h3 class="mt-1 text-sm font-extrabold">Moldura vertical</h3>
+                    <span class="alias mt-1">foto de perfil</span>
+                  </div>
+                </article>
+                <article class="card grid grid-cols-[96px_1fr]">
+                  <div class="art min-h-28">
+                    <b class="relative display text-center text-xs">TIME DE<br />VOCÊ</b>
+                  </div>
+                  <div class="p-3">
+                    <span class="tag">Card</span>
+                    <h3 class="mt-1 text-sm font-extrabold">Time de você</h3>
+                    <span class="alias mt-1">santinho</span>
+                  </div>
+                </article>
+                <article class="card grid grid-cols-[96px_1fr]">
+                  <div class="art art-red min-h-28">
+                    <b class="relative display text-center text-xs text-[#ffeb00]"
+                      >TIME DO<br />ESTADUAL</b
+                    >
+                  </div>
+                  <div class="p-3">
+                    <span class="tag">Card</span>
+                    <h3 class="mt-1 text-sm font-extrabold">Time do estadual</h3>
+                    <span class="alias mt-1">estadual</span>
+                  </div>
+                </article>
+                <article class="card grid grid-cols-[96px_1fr] border-2 border-[#e4102f]">
+                  <div class="art art-red min-h-28">
+                    <b class="relative display text-center text-xs text-[#ffeb00]"
+                      >MINHA<br />COLINHA</b
+                    >
+                  </div>
+                  <div class="p-3">
+                    <span class="tag">Card · NOVO</span>
+                    <h3 class="mt-1 text-sm font-extrabold">Minha colinha</h3>
+                    <div class="mt-1 flex gap-1">
+                      <span class="alias">santinho</span><span class="alias">colinha</span>
+                    </div>
+                  </div>
+                </article>
+              </div>
+            </div>
+          </div>
+        </div>
       </section>
 
       <section>
-        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENAS 04–05</span><h2>Busca por apelido · “santinho” e “foto de perfil”</h2></div>
+        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
+          <span>CENA 03</span>
+          <h2>Tipo “Card” ativo · os 6 modelos, sem cabeçalho próprio</h2>
+        </div>
+        <div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white">
+          <header class="flex h-16 items-center justify-between bg-[#ae1603] px-10">
+            <div class="h-9 w-44 rounded bg-white/20"></div>
+            <b class="text-sm text-white">Central de Conteúdos</b>
+          </header>
+          <div class="mx-auto max-w-6xl px-10 py-10">
+            <div class="rounded-xl bg-[#fff8f2] p-4">
+              <div class="field text-[#6c615e]">Encontre uma peça por assunto, cidade ou tema…</div>
+              <div class="mt-3 flex gap-2">
+                <span class="chip active">Tipo · Card ×</span><span class="chip">Cidade⌄</span
+                ><span class="chip">Região⌄</span><span class="chip">Tema⌄</span
+                ><span class="chip">Instituição⌄</span>
+              </div>
+            </div>
+            <div class="mt-8 flex items-end justify-between">
+              <div>
+                <h2 class="display text-2xl font-black">Escolha, compartilhe e peça voto</h2>
+                <p class="mt-1 text-sm text-[#6c615e]">Resultados do filtro aplicado.</p>
+              </div>
+              <span class="text-xs text-[#6c615e]">6 itens</span>
+            </div>
+            <div class="mt-5 grid grid-cols-3 gap-6">
+              <article class="card">
+                <div class="art aspect-video">
+                  <b class="relative display text-2xl">#SOU ____</b>
+                </div>
+                <div class="p-4">
+                  <span class="tag">Card</span>
+                  <h3 class="mt-2 font-extrabold">Card com seu nome</h3>
+                  <p class="mt-1 text-xs text-[#6c615e]">Coloque seu nome no card oficial.</p>
+                  <span class="alias mt-2">nome</span
+                  ><a class="btn mt-4 w-full">Escolher este modelo →</a>
+                </div>
+              </article>
+              <article class="card">
+                <div class="art art-light aspect-video">
+                  <div
+                    class="relative grid size-20 place-items-center rounded-full border-2 border-dashed border-[#a21c1c]/40 text-3xl text-[#a21c1c]"
+                  >
+                    ◎
+                  </div>
+                </div>
+                <div class="p-4">
+                  <span class="tag">Card</span>
+                  <h3 class="mt-2 font-extrabold">Moldura quadrada</h3>
+                  <p class="mt-1 text-xs text-[#6c615e]">Foto de perfil quadrada.</p>
+                  <span class="alias mt-2">foto de perfil</span
+                  ><a class="btn mt-4 w-full">Escolher este modelo →</a>
+                </div>
+              </article>
+              <article class="card">
+                <div class="art art-light aspect-video">
+                  <div
+                    class="relative grid h-24 w-16 place-items-center rounded-lg border-2 border-dashed border-[#a21c1c]/40 text-3xl text-[#a21c1c]"
+                  >
+                    ◎
+                  </div>
+                </div>
+                <div class="p-4">
+                  <span class="tag">Card</span>
+                  <h3 class="mt-2 font-extrabold">Moldura vertical</h3>
+                  <p class="mt-1 text-xs text-[#6c615e]">Foto vertical para stories.</p>
+                  <span class="alias mt-2">foto de perfil</span
+                  ><a class="btn mt-4 w-full">Escolher este modelo →</a>
+                </div>
+              </article>
+              <article class="card">
+                <div class="art aspect-video">
+                  <b class="relative display text-xl">TIME DE VOCÊ</b>
+                </div>
+                <div class="p-4">
+                  <span class="tag">Card</span>
+                  <h3 class="mt-2 font-extrabold">Time de você</h3>
+                  <p class="mt-1 text-xs text-[#6c615e]">Entre para o time com sua foto.</p>
+                  <span class="alias mt-2">santinho</span
+                  ><a class="btn mt-4 w-full">Escolher este modelo →</a>
+                </div>
+              </article>
+              <article class="card">
+                <div class="art art-red aspect-video">
+                  <b class="relative display text-xl text-[#ffeb00]">TIME DO ESTADUAL</b>
+                </div>
+                <div class="p-4">
+                  <span class="tag">Card</span>
+                  <h3 class="mt-2 font-extrabold">Time do estadual</h3>
+                  <p class="mt-1 text-xs text-[#6c615e]">Escolha o estadual e personalize.</p>
+                  <span class="alias mt-2">estadual</span
+                  ><a class="btn mt-4 w-full">Escolher este modelo →</a>
+                </div>
+              </article>
+              <article class="card border-2 border-[#e4102f]">
+                <div class="art art-red aspect-video">
+                  <span
+                    class="absolute top-2 right-2 rounded-full bg-white px-2 py-1 text-[9px] font-black text-[#184e92]"
+                    >NOVO</span
+                  ><b class="relative display text-xl text-[#ffeb00]">MINHA COLINHA</b>
+                </div>
+                <div class="p-4">
+                  <span class="tag">Card</span>
+                  <h3 class="mt-2 font-extrabold">Minha colinha</h3>
+                  <p class="mt-1 text-xs text-[#6c615e]">Monte sua cola de votação.</p>
+                  <div class="mt-2 flex gap-1">
+                    <span class="alias">santinho</span><span class="alias">colinha</span>
+                  </div>
+                  <a class="btn mt-4 w-full">Escolher este modelo →</a>
+                </div>
+              </article>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
+          <span>CENAS 04–05</span>
+          <h2>Busca por apelido · “santinho” e “foto de perfil”</h2>
+        </div>
         <div class="grid gap-8 lg:grid-cols-2">
-          <div class="frame rounded-xl bg-white p-7"><div class="field flex justify-between"><span>santinho</span><b class="text-[#6c615e]">×</b></div><div class="mt-3"><span class="chip active">Busca · “santinho” ×</span></div><h3 class="display mt-7 text-xl font-black">2 itens encontrados</h3><div class="mt-4 grid grid-cols-2 gap-4"><article class="card"><div class="art aspect-video"><b class="relative display text-xl">TIME DE VOCÊ</b></div><div class="p-4"><span class="tag">Card</span><h4 class="mt-2 font-extrabold">Time de você</h4><span class="alias mt-2">santinho</span></div></article><article class="card"><div class="art art-red aspect-video"><b class="relative display text-xl text-[#ffeb00]">MINHA COLINHA</b></div><div class="p-4"><span class="tag">Card</span><h4 class="mt-2 font-extrabold">Minha colinha</h4><div class="mt-2 flex gap-1"><span class="alias">santinho</span><span class="alias">colinha</span></div></div></article></div></div>
-          <div class="frame rounded-xl bg-white p-7"><div class="field flex justify-between"><span>foto de perfil</span><b class="text-[#6c615e]">×</b></div><div class="mt-3"><span class="chip active">Busca · “foto de perfil” ×</span></div><h3 class="display mt-7 text-xl font-black">2 itens encontrados</h3><div class="mt-4 grid grid-cols-2 gap-4"><article class="card"><div class="art art-light aspect-video"><div class="relative grid size-16 place-items-center rounded-full border-2 border-dashed border-[#a21c1c]/40 text-[#a21c1c]">◎</div></div><div class="p-4"><span class="tag">Card</span><h4 class="mt-2 font-extrabold">Moldura quadrada</h4><span class="alias mt-2">foto de perfil</span></div></article><article class="card"><div class="art art-light aspect-video"><div class="relative grid h-20 w-12 place-items-center rounded border-2 border-dashed border-[#a21c1c]/40 text-[#a21c1c]">◎</div></div><div class="p-4"><span class="tag">Card</span><h4 class="mt-2 font-extrabold">Moldura vertical</h4><span class="alias mt-2">foto de perfil</span></div></article></div></div>
+          <div class="frame rounded-xl bg-white p-7">
+            <div class="field flex justify-between">
+              <span>santinho</span><b class="text-[#6c615e]">×</b>
+            </div>
+            <div class="mt-3"><span class="chip active">Busca · “santinho” ×</span></div>
+            <h3 class="display mt-7 text-xl font-black">2 itens encontrados</h3>
+            <div class="mt-4 grid grid-cols-2 gap-4">
+              <article class="card">
+                <div class="art aspect-video">
+                  <b class="relative display text-xl">TIME DE VOCÊ</b>
+                </div>
+                <div class="p-4">
+                  <span class="tag">Card</span>
+                  <h4 class="mt-2 font-extrabold">Time de você</h4>
+                  <span class="alias mt-2">santinho</span>
+                </div>
+              </article>
+              <article class="card">
+                <div class="art art-red aspect-video">
+                  <b class="relative display text-xl text-[#ffeb00]">MINHA COLINHA</b>
+                </div>
+                <div class="p-4">
+                  <span class="tag">Card</span>
+                  <h4 class="mt-2 font-extrabold">Minha colinha</h4>
+                  <div class="mt-2 flex gap-1">
+                    <span class="alias">santinho</span><span class="alias">colinha</span>
+                  </div>
+                </div>
+              </article>
+            </div>
+          </div>
+          <div class="frame rounded-xl bg-white p-7">
+            <div class="field flex justify-between">
+              <span>foto de perfil</span><b class="text-[#6c615e]">×</b>
+            </div>
+            <div class="mt-3"><span class="chip active">Busca · “foto de perfil” ×</span></div>
+            <h3 class="display mt-7 text-xl font-black">2 itens encontrados</h3>
+            <div class="mt-4 grid grid-cols-2 gap-4">
+              <article class="card">
+                <div class="art art-light aspect-video">
+                  <div
+                    class="relative grid size-16 place-items-center rounded-full border-2 border-dashed border-[#a21c1c]/40 text-[#a21c1c]"
+                  >
+                    ◎
+                  </div>
+                </div>
+                <div class="p-4">
+                  <span class="tag">Card</span>
+                  <h4 class="mt-2 font-extrabold">Moldura quadrada</h4>
+                  <span class="alias mt-2">foto de perfil</span>
+                </div>
+              </article>
+              <article class="card">
+                <div class="art art-light aspect-video">
+                  <div
+                    class="relative grid h-20 w-12 place-items-center rounded border-2 border-dashed border-[#a21c1c]/40 text-[#a21c1c]"
+                  >
+                    ◎
+                  </div>
+                </div>
+                <div class="p-4">
+                  <span class="tag">Card</span>
+                  <h4 class="mt-2 font-extrabold">Moldura vertical</h4>
+                  <span class="alias mt-2">foto de perfil</span>
+                </div>
+              </article>
+            </div>
+          </div>
+        </div>
+        <div class="mt-7 grid gap-4 md:grid-cols-2">
+          <div
+            class="rounded-xl border border-[#184e92]/20 bg-[#eef4fb] p-4 text-sm leading-6 text-[#184e92]"
+          >
+            <b>Faceta geográfica ativa:</b> os seis modelos somem, pois não são territoriais. Uma
+            peça publicada de tipo Card continua seguindo a regra normal das peças.
+          </div>
+          <div
+            class="rounded-xl border border-dashed bg-white p-4 text-sm leading-6 text-[#6c615e]"
+          >
+            <b class="text-black">Sem convite duplicado:</b> o antigo tile “Card personalizado” foi
+            removido. O estúdio segue acessível por cada modelo e pelo estado vazio já existente.
+          </div>
         </div>
-        <div class="mt-7 grid gap-4 md:grid-cols-2"><div class="rounded-xl border border-[#184e92]/20 bg-[#eef4fb] p-4 text-sm leading-6 text-[#184e92]"><b>Faceta geográfica ativa:</b> os seis modelos somem, pois não são territoriais. Uma peça publicada de tipo Card continua seguindo a regra normal das peças.</div><div class="rounded-xl border border-dashed bg-white p-4 text-sm leading-6 text-[#6c615e]"><b class="text-black">Sem convite duplicado:</b> o antigo tile “Card personalizado” foi removido. O estúdio segue acessível por cada modelo e pelo estado vazio já existente.</div></div>
       </section>
     </main>
   </body>
diff --git a/docs/plans/central-conteudos-cards-no-catalogo.md b/docs/plans/central-conteudos-cards-no-catalogo.md
index a73fd208..50f50f3a 100644
--- a/docs/plans/central-conteudos-cards-no-catalogo.md
+++ b/docs/plans/central-conteudos-cards-no-catalogo.md
@@ -55,7 +55,7 @@ Isso revoga explicitamente a decisão D6 do S27 (`docs/plans/central-conteudos-p
 
 - **Vou apresentar dados?** Não — o item não exibe número/contador; só roteia o visitante ao estúdio. A contagem de uso continua no mecanismo anônimo do C213/S32 (assunto card), sem métrica nova.
 - **Decisões desbloqueadas:** o eleitor escolhe o modelo sem varrer a galeria; a comunicação passa a poder ler quais modelos são procurados no catálogo, se a questão (c) for aceita (leitura pelo mecanismo existente).
-- **Forma:** *adiada ao plano de implementação* — nenhuma tabela/gráfico; quando muito, o evento anônimo já existente.
+- **Forma:** _adiada ao plano de implementação_ — nenhuma tabela/gráfico; quando muito, o evento anônimo já existente.
 
 ## Dados da decisão (literais)
 
diff --git a/docs/plans/central-conteudos-header-logo-ui-design.html b/docs/plans/central-conteudos-header-logo-ui-design.html
index 581ea964..d293b918 100644
--- a/docs/plans/central-conteudos-header-logo-ui-design.html
+++ b/docs/plans/central-conteudos-header-logo-ui-design.html
@@ -6,89 +6,245 @@
     <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
     <title>Design — S33 · Marca no header da Central</title>
     <style type="text/tailwindcss">
-      @theme { --font-sans: Arimo, Arial, sans-serif; }
-      :root { --red:#ae1603; --kit-red:#e4102f; --blue:#184e92; --yellow:#ffeb00; --cream:#fff8f2; --muted:#6c615e; --line:rgb(0 0 0/.12); --display:'Exo 2','Arial Black',sans-serif; }
-      *{box-sizing:border-box} body{font-family:Arimo,Arial,sans-serif}.display{font-family:var(--display)}
-      .board{background:#e7e3e0;background-image:radial-gradient(rgb(24 78 146/.09) .7px,transparent .7px);background-size:18px 18px}
-      .frame{box-shadow:0 22px 60px rgb(39 25 22/.13)}.desktop{width:1280px}.phone{width:390px;border-radius:28px}
-      .scene:after{content:'';height:1px;flex:1;background:#cfc9c5}
-      .trimmed-lockup{position:relative;overflow:hidden;width:188px;height:50px}
-      .trimmed-lockup img{position:absolute;width:246px;max-width:none;left:-29px;top:-38px}
-      .trimmed-lockup.mobile{width:142px;height:39px}.trimmed-lockup.mobile img{width:186px;left:-22px;top:-29px}
-      .option{border:1px solid var(--line);border-radius:14px;background:white;overflow:hidden}.recommended{border:2px solid var(--kit-red);box-shadow:0 10px 26px rgb(228 16 47/.13)}
+      @theme {
+        --font-sans: Arimo, Arial, sans-serif;
+      }
+      :root {
+        --red: #ae1603;
+        --kit-red: #e4102f;
+        --blue: #184e92;
+        --yellow: #ffeb00;
+        --cream: #fff8f2;
+        --muted: #6c615e;
+        --line: rgb(0 0 0/0.12);
+        --display: 'Exo 2', 'Arial Black', sans-serif;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      body {
+        font-family: Arimo, Arial, sans-serif;
+      }
+      .display {
+        font-family: var(--display);
+      }
+      .board {
+        background: #e7e3e0;
+        background-image: radial-gradient(rgb(24 78 146/0.09) 0.7px, transparent 0.7px);
+        background-size: 18px 18px;
+      }
+      .frame {
+        box-shadow: 0 22px 60px rgb(39 25 22/0.13);
+      }
+      .desktop {
+        width: 1280px;
+      }
+      .phone {
+        width: 390px;
+        border-radius: 28px;
+      }
+      .scene:after {
+        content: '';
+        height: 1px;
+        flex: 1;
+        background: #cfc9c5;
+      }
+      .trimmed-lockup {
+        position: relative;
+        overflow: hidden;
+        width: 188px;
+        height: 50px;
+      }
+      .trimmed-lockup img {
+        position: absolute;
+        width: 246px;
+        max-width: none;
+        left: -29px;
+        top: -38px;
+      }
+      .trimmed-lockup.mobile {
+        width: 142px;
+        height: 39px;
+      }
+      .trimmed-lockup.mobile img {
+        width: 186px;
+        left: -22px;
+        top: -29px;
+      }
+      .option {
+        border: 1px solid var(--line);
+        border-radius: 14px;
+        background: white;
+        overflow: hidden;
+      }
+      .recommended {
+        border: 2px solid var(--kit-red);
+        box-shadow: 0 10px 26px rgb(228 16 47/0.13);
+      }
     </style>
   </head>
   <body class="board min-h-screen text-black antialiased">
     <main class="mx-auto max-w-[1480px] space-y-14 px-4 py-12 md:px-8">
       <header class="max-w-3xl">
-        <span class="rounded-full bg-[#e4102f] px-3 py-1 text-xs font-bold text-white">S33 · decisão visual</span>
+        <span class="rounded-full bg-[#e4102f] px-3 py-1 text-xs font-bold text-white"
+          >S33 · decisão visual</span
+        >
         <h1 class="display mt-4 text-4xl font-black">A marca volta a assinar a Central.</h1>
-        <p class="mt-2 text-sm leading-6 text-[#6c615e]">Mesmo header, mesma altura e mesma copy. O gate escolhe somente o ativo e seu peso visual.</p>
+        <p class="mt-2 text-sm leading-6 text-[#6c615e]">
+          Mesmo header, mesma altura e mesma copy. O gate escolhe somente o ativo e seu peso visual.
+        </p>
       </header>
 
       <section>
-        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 01</span><h2>Desktop 1280 · opções A e B lado a lado</h2></div>
+        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
+          <span>CENA 01</span>
+          <h2>Desktop 1280 · opções A e B lado a lado</h2>
+        </div>
         <div class="desktop frame mx-auto overflow-hidden rounded-xl bg-[#f9faff] p-8">
           <div class="grid grid-cols-2 gap-6">
             <article class="option recommended">
               <div class="flex items-center justify-between bg-[#ae1603] px-8 h-16">
-                <div class="trimmed-lockup" aria-label="Jorge Solla"><img src="../../public/campaign-kit/jorge-solla-negativo.png" alt="Jorge Solla" /></div>
+                <div class="trimmed-lockup" aria-label="Jorge Solla">
+                  <img src="../../public/campaign-kit/jorge-solla-negativo.png" alt="Jorge Solla" />
+                </div>
                 <span class="text-sm font-bold text-white">Central de Conteúdos</span>
               </div>
               <div class="p-5">
-                <div class="flex items-center justify-between gap-3"><h3 class="font-extrabold">A · Lockup oficial com recorte técnico</h3><span class="rounded-full bg-[#e4102f] px-2.5 py-1 text-[11px] font-black text-white">RECOMENDADA</span></div>
-                <p class="mt-2 text-sm leading-6 text-[#6c615e]">Preserva a assinatura horizontal desenhada no S27 e remove somente a moldura transparente do PNG. A tinta lê em aproximadamente 46 px, no peso da referência pública.</p>
+                <div class="flex items-center justify-between gap-3">
+                  <h3 class="font-extrabold">A · Lockup oficial com recorte técnico</h3>
+                  <span
+                    class="rounded-full bg-[#e4102f] px-2.5 py-1 text-[11px] font-black text-white"
+                    >RECOMENDADA</span
+                  >
+                </div>
+                <p class="mt-2 text-sm leading-6 text-[#6c615e]">
+                  Preserva a assinatura horizontal desenhada no S27 e remove somente a moldura
+                  transparente do PNG. A tinta lê em aproximadamente 46 px, no peso da referência
+                  pública.
+                </p>
               </div>
             </article>
             <article class="option">
               <div class="flex h-16 items-center justify-between bg-[#ae1603] px-8">
-                <img src="../../public/campaign-kit/marca-negativa-completa.png" class="h-[58px] w-auto object-contain" alt="Jorge Solla 1313 — Mais Saúde, Mais Futuro" />
+                <img
+                  src="../../public/campaign-kit/marca-negativa-completa.png"
+                  class="h-[58px] w-auto object-contain"
+                  alt="Jorge Solla 1313 — Mais Saúde, Mais Futuro"
+                />
                 <span class="text-sm font-bold text-white">Central de Conteúdos</span>
               </div>
               <div class="p-5">
                 <h3 class="font-extrabold">B · Marca negativa completa</h3>
-                <p class="mt-2 text-sm leading-6 text-[#6c615e]">Oficial e correta sobre vermelho, mas comprime nome, número e slogan na barra de 64 px. O slogan perde leitura e a massa vertical compete com o nome da seção.</p>
+                <p class="mt-2 text-sm leading-6 text-[#6c615e]">
+                  Oficial e correta sobre vermelho, mas comprime nome, número e slogan na barra de
+                  64 px. O slogan perde leitura e a massa vertical compete com o nome da seção.
+                </p>
               </div>
             </article>
           </div>
           <div class="mt-7 rounded-xl bg-white p-6">
             <p class="text-xs font-black tracking-[.12em] text-[#e4102f]">DECISÃO RECOMENDADA</p>
-            <p class="display mt-1 text-2xl font-black">A · manter o lockup e corrigir a caixa, não redesenhar o header.</p>
-            <p class="mt-2 max-w-3xl text-sm leading-6 text-[#6c615e]">Altura do header: 64 px. Inset horizontal: 32 px dentro do conteúdo. Lockup visível: 188 × 50 px. Badge existente: 14 px, bold. Sem novo lockup e sem alteração de cor.</p>
+            <p class="display mt-1 text-2xl font-black">
+              A · manter o lockup e corrigir a caixa, não redesenhar o header.
+            </p>
+            <p class="mt-2 max-w-3xl text-sm leading-6 text-[#6c615e]">
+              Altura do header: 64 px. Inset horizontal: 32 px dentro do conteúdo. Lockup visível:
+              188 × 50 px. Badge existente: 14 px, bold. Sem novo lockup e sem alteração de cor.
+            </p>
           </div>
         </div>
       </section>
 
       <section>
-        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 02</span><h2>Mobile 390 · as duas opções na barra real de 56 px</h2></div>
+        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
+          <span>CENA 02</span>
+          <h2>Mobile 390 · as duas opções na barra real de 56 px</h2>
+        </div>
         <div class="flex flex-wrap justify-center gap-8">
           <article class="phone frame overflow-hidden bg-white">
             <div class="flex h-14 items-center justify-between bg-[#ae1603] px-5">
-              <div class="trimmed-lockup mobile"><img src="../../public/campaign-kit/jorge-solla-negativo.png" alt="Jorge Solla" /></div><span class="text-white">☰</span>
+              <div class="trimmed-lockup mobile">
+                <img src="../../public/campaign-kit/jorge-solla-negativo.png" alt="Jorge Solla" />
+              </div>
+              <span class="text-white">☰</span>
+            </div>
+            <div class="p-5">
+              <span class="rounded-full bg-[#e4102f] px-2.5 py-1 text-[10px] font-black text-white"
+                >A · RECOMENDADA</span
+              >
+              <h3 class="display mt-4 text-2xl font-black">Central de Conteúdos</h3>
+              <p class="mt-2 text-sm leading-5 text-[#6c615e]">
+                A assinatura continua reconhecível sem disputar espaço com o menu.
+              </p>
             </div>
-            <div class="p-5"><span class="rounded-full bg-[#e4102f] px-2.5 py-1 text-[10px] font-black text-white">A · RECOMENDADA</span><h3 class="display mt-4 text-2xl font-black">Central de Conteúdos</h3><p class="mt-2 text-sm leading-5 text-[#6c615e]">A assinatura continua reconhecível sem disputar espaço com o menu.</p></div>
           </article>
           <article class="phone frame overflow-hidden bg-white">
-            <div class="flex h-14 items-center justify-between bg-[#ae1603] px-5"><img src="../../public/campaign-kit/marca-negativa-completa.png" class="h-[52px] w-auto object-contain" alt="Jorge Solla 1313 — Mais Saúde, Mais Futuro" /><span class="text-white">☰</span></div>
-            <div class="p-5"><span class="rounded-full border border-black/15 px-2.5 py-1 text-[10px] font-black">B · ALTERNATIVA</span><h3 class="display mt-4 text-2xl font-black">Central de Conteúdos</h3><p class="mt-2 text-sm leading-5 text-[#6c615e]">O conjunto completo fica pequeno demais para o slogan cumprir sua função.</p></div>
+            <div class="flex h-14 items-center justify-between bg-[#ae1603] px-5">
+              <img
+                src="../../public/campaign-kit/marca-negativa-completa.png"
+                class="h-[52px] w-auto object-contain"
+                alt="Jorge Solla 1313 — Mais Saúde, Mais Futuro"
+              /><span class="text-white">☰</span>
+            </div>
+            <div class="p-5">
+              <span class="rounded-full border border-black/15 px-2.5 py-1 text-[10px] font-black"
+                >B · ALTERNATIVA</span
+              >
+              <h3 class="display mt-4 text-2xl font-black">Central de Conteúdos</h3>
+              <p class="mt-2 text-sm leading-5 text-[#6c615e]">
+                O conjunto completo fica pequeno demais para o slogan cumprir sua função.
+              </p>
+            </div>
           </article>
         </div>
       </section>
 
       <section>
-        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 03</span><h2>Página da peça · “Voltar à Central” e badge preservados</h2></div>
+        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
+          <span>CENA 03</span>
+          <h2>Página da peça · “Voltar à Central” e badge preservados</h2>
+        </div>
         <div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white">
           <header class="flex h-16 items-center justify-between bg-[#ae1603] px-10">
-            <div class="trimmed-lockup"><img src="../../public/campaign-kit/jorge-solla-negativo.png" alt="Jorge Solla" /></div><a class="text-sm font-bold text-white">Voltar à Central</a>
+            <div class="trimmed-lockup">
+              <img src="../../public/campaign-kit/jorge-solla-negativo.png" alt="Jorge Solla" />
+            </div>
+            <a class="text-sm font-bold text-white">Voltar à Central</a>
           </header>
           <div class="mx-auto grid max-w-5xl grid-cols-[1.15fr_.85fr] gap-10 px-10 py-12">
-            <div class="grid aspect-video place-items-center rounded-2xl bg-stone-200 text-xs font-black tracking-wide text-stone-500">NEEDS ASSET · PREVIEW REAL DA PEÇA</div>
-            <div><span class="inline-flex rounded-full bg-[#eef4fb] px-2 py-1 text-[11px] font-extrabold text-[#184e92]">Central de Conteúdos</span><h3 class="display mt-3 text-3xl font-black">Título da peça publicada</h3><p class="mt-3 text-sm leading-6 text-[#6c615e]">Descrição editorial da peça, sem alteração neste item.</p><div class="mt-6 h-11 rounded-[10px] bg-[#ffe607]"></div></div>
+            <div
+              class="grid aspect-video place-items-center rounded-2xl bg-stone-200 text-xs font-black tracking-wide text-stone-500"
+            >
+              NEEDS ASSET · PREVIEW REAL DA PEÇA
+            </div>
+            <div>
+              <span
+                class="inline-flex rounded-full bg-[#eef4fb] px-2 py-1 text-[11px] font-extrabold text-[#184e92]"
+                >Central de Conteúdos</span
+              >
+              <h3 class="display mt-3 text-3xl font-black">Título da peça publicada</h3>
+              <p class="mt-3 text-sm leading-6 text-[#6c615e]">
+                Descrição editorial da peça, sem alteração neste item.
+              </p>
+              <div class="mt-6 h-11 rounded-[10px] bg-[#ffe607]"></div>
+            </div>
           </div>
         </div>
         <div class="phone frame mx-auto mt-8 overflow-hidden bg-white">
-          <header class="flex h-14 items-center justify-between bg-[#ae1603] px-5"><div class="trimmed-lockup mobile"><img src="../../public/campaign-kit/jorge-solla-negativo.png" alt="Jorge Solla" /></div><a class="text-xs font-bold text-white">Voltar à Central</a></header>
-          <div class="p-5"><div class="aspect-video rounded-xl bg-stone-200"></div><span class="mt-5 inline-flex rounded-full bg-[#eef4fb] px-2 py-1 text-[11px] font-extrabold text-[#184e92]">Central de Conteúdos</span><h3 class="display mt-2 text-2xl font-black">Título da peça publicada</h3></div>
+          <header class="flex h-14 items-center justify-between bg-[#ae1603] px-5">
+            <div class="trimmed-lockup mobile">
+              <img src="../../public/campaign-kit/jorge-solla-negativo.png" alt="Jorge Solla" />
+            </div>
+            <a class="text-xs font-bold text-white">Voltar à Central</a>
+          </header>
+          <div class="p-5">
+            <div class="aspect-video rounded-xl bg-stone-200"></div>
+            <span
+              class="mt-5 inline-flex rounded-full bg-[#eef4fb] px-2 py-1 text-[11px] font-extrabold text-[#184e92]"
+              >Central de Conteúdos</span
+            >
+            <h3 class="display mt-2 text-2xl font-black">Título da peça publicada</h3>
+          </div>
         </div>
       </section>
     </main>
diff --git a/docs/plans/central-conteudos-header-logo.md b/docs/plans/central-conteudos-header-logo.md
index 03b3f952..fe0c2fd2 100644
--- a/docs/plans/central-conteudos-header-logo.md
+++ b/docs/plans/central-conteudos-header-logo.md
@@ -43,7 +43,7 @@ No header da Central de Conteúdos pública (`/conteudos`), a marca lê muito me
 
 - **Vou apresentar dados?** Não.
 - **Decisões desbloqueadas:** N/A — correção de fidelidade visual; nenhum ator decide com número.
-- **Forma:** *adiada ao plano de implementação* — sem restrição de produto além da referência de peso visual acima.
+- **Forma:** _adiada ao plano de implementação_ — sem restrição de produto além da referência de peso visual acima.
 
 ## Dados da decisão (literais)
 
@@ -96,4 +96,4 @@ No header da Central de Conteúdos pública (`/conteudos`), a marca lê muito me
 3. Persona + job + aceite claros (sem jargão de stack)? 4/5 — aceite fala em peso visual; a aferição exige comparação em staging.
 4. Direção no codebase é hipótese (não contrato técnico)? 5/5 — arquivos e classes são literais de estado atual/evidência, não prescrição.
 5. Zero decisões duras de engenharia no plano? 4/5 — a questão em aberto recomenda decidir no gate; a escolha final (ativo vs compensação) fica para o gate/impl.
-Média: 4,6/5 — ≥4/5.
+   Média: 4,6/5 — ≥4/5.
diff --git a/docs/plans/central-conteudos-liderancas-ui-design.html b/docs/plans/central-conteudos-liderancas-ui-design.html
index 8303ff4f..9003dc34 100644
--- a/docs/plans/central-conteudos-liderancas-ui-design.html
+++ b/docs/plans/central-conteudos-liderancas-ui-design.html
@@ -1,37 +1,425 @@
 <!doctype html>
 <html lang="pt-BR">
   <head>
-    <meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />
+    <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 — S34 · Lideranças nas peças</title>
     <style type="text/tailwindcss">
-      @theme{--font-sans:Arimo,Arial,sans-serif} :root{--red:#a21c1c;--kit:#e4102f;--blue:#184e92;--yellow:#ffe607;--cream:#fff8f2;--muted:#6c615e;--line:rgb(0 0 0/.12);--display:'Exo 2','Arial Black',sans-serif}
-      *{box-sizing:border-box}.display{font-family:var(--display)}.board{background:#e7e3e0;background-image:radial-gradient(rgb(24 78 146/.09) .7px,transparent .7px);background-size:18px 18px}.frame{box-shadow:0 22px 60px rgb(39 25 22/.13)}.desktop{width:1280px}.phone{width:390px;border-radius:28px}.scene:after{content:'';height:1px;flex:1;background:#cfc9c5}
-      .field{min-height:44px;border:1px solid #d6d3d1;border-radius:6px;background:white;padding:10px 12px;font-size:14px}.label{font-size:13px;font-weight:600}.chip{display:inline-flex;min-height:36px;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;background:white;padding:6px 11px;font-size:12px;font-weight:700}.active{border-color:rgb(24 78 146/.35);background:#eef4fb;color:#184e92}.tag{display:inline-flex;align-items:center;gap:5px;border-radius:999px;background:#f4f4f5;padding:5px 8px;font-size:12px;font-weight:600}.btn{display:inline-flex;min-height:44px;align-items:center;justify-content:center;border-radius:8px;padding:9px 14px;font-size:14px;font-weight:700}.primary{background:#c51414;color:white}.catalog-card{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:white;box-shadow:0 8px 24px rgb(71 19 14/.07)}
+      @theme {
+        --font-sans: Arimo, Arial, sans-serif;
+      }
+      :root {
+        --red: #a21c1c;
+        --kit: #e4102f;
+        --blue: #184e92;
+        --yellow: #ffe607;
+        --cream: #fff8f2;
+        --muted: #6c615e;
+        --line: rgb(0 0 0/0.12);
+        --display: 'Exo 2', 'Arial Black', sans-serif;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      .display {
+        font-family: var(--display);
+      }
+      .board {
+        background: #e7e3e0;
+        background-image: radial-gradient(rgb(24 78 146/0.09) 0.7px, transparent 0.7px);
+        background-size: 18px 18px;
+      }
+      .frame {
+        box-shadow: 0 22px 60px rgb(39 25 22/0.13);
+      }
+      .desktop {
+        width: 1280px;
+      }
+      .phone {
+        width: 390px;
+        border-radius: 28px;
+      }
+      .scene:after {
+        content: '';
+        height: 1px;
+        flex: 1;
+        background: #cfc9c5;
+      }
+      .field {
+        min-height: 44px;
+        border: 1px solid #d6d3d1;
+        border-radius: 6px;
+        background: white;
+        padding: 10px 12px;
+        font-size: 14px;
+      }
+      .label {
+        font-size: 13px;
+        font-weight: 600;
+      }
+      .chip {
+        display: inline-flex;
+        min-height: 36px;
+        align-items: center;
+        gap: 6px;
+        border: 1px solid var(--line);
+        border-radius: 999px;
+        background: white;
+        padding: 6px 11px;
+        font-size: 12px;
+        font-weight: 700;
+      }
+      .active {
+        border-color: rgb(24 78 146/0.35);
+        background: #eef4fb;
+        color: #184e92;
+      }
+      .tag {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        border-radius: 999px;
+        background: #f4f4f5;
+        padding: 5px 8px;
+        font-size: 12px;
+        font-weight: 600;
+      }
+      .btn {
+        display: inline-flex;
+        min-height: 44px;
+        align-items: center;
+        justify-content: center;
+        border-radius: 8px;
+        padding: 9px 14px;
+        font-size: 14px;
+        font-weight: 700;
+      }
+      .primary {
+        background: #c51414;
+        color: white;
+      }
+      .catalog-card {
+        overflow: hidden;
+        border: 1px solid var(--line);
+        border-radius: 14px;
+        background: white;
+        box-shadow: 0 8px 24px rgb(71 19 14/0.07);
+      }
     </style>
   </head>
   <body class="board min-h-screen text-black antialiased">
     <main class="mx-auto max-w-[1480px] space-y-14 px-4 py-12 md:px-8">
-      <header class="max-w-3xl"><span class="rounded-full bg-[#e4102f] px-3 py-1 text-xs font-bold text-white">S34 · dois recortes, uma faceta</span><h1 class="display mt-4 text-4xl font-black">Quem aparece na peça fica encontrável — sem expor quem não aparece.</h1><p class="mt-2 text-sm leading-6 text-[#6c615e]">A ficha separa liderança interna de figura pública; a Central pública reúne apenas os nomes presentes em peças publicadas.</p></header>
+      <header class="max-w-3xl">
+        <span class="rounded-full bg-[#e4102f] px-3 py-1 text-xs font-bold text-white"
+          >S34 · dois recortes, uma faceta</span
+        >
+        <h1 class="display mt-4 text-4xl font-black">
+          Quem aparece na peça fica encontrável — sem expor quem não aparece.
+        </h1>
+        <p class="mt-2 text-sm leading-6 text-[#6c615e]">
+          A ficha separa liderança interna de figura pública; a Central pública reúne apenas os
+          nomes presentes em peças publicadas.
+        </p>
+      </header>
 
-      <section><div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 01</span><h2>Ficha interna · desktop 1280 · os dois recortes</h2></div>
-        <div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white" data-theme="campaign"><header class="flex h-14 items-center justify-between border-b bg-[#fafaf9] px-6"><b>Campanha · Comunicação</b><span class="text-sm text-[#6b7280]">Central de Conteúdos</span></header><div class="p-8"><a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a><div class="mt-2 flex items-start justify-between"><div><h2 class="text-xl font-semibold">Título da peça em revisão</h2><div class="mt-2 flex gap-2"><span class="rounded-full bg-green-100 px-2 py-1 text-xs font-semibold text-green-800">Pronto</span><span class="rounded-full bg-[#f4f4f5] px-2 py-1 text-xs font-semibold text-[#6b7280]">Rascunho</span></div></div><button class="btn border bg-white">Publicar</button></div>
-          <div class="mt-7 grid grid-cols-[300px_1fr] gap-8"><aside><div class="grid aspect-video place-items-center rounded-xl bg-stone-200 text-xs font-bold text-stone-500">NEEDS ASSET · PREVIEW REAL</div><dl class="mt-4 space-y-2 text-xs"><div class="flex justify-between"><dt class="text-[#6b7280]">Origem</dt><dd>Arquivo</dd></div><div class="flex justify-between"><dt class="text-[#6b7280]">Tipo</dt><dd>Vídeo</dd></div></dl></aside>
-            <form class="grid grid-cols-2 gap-4"><div class="col-span-2"><p class="label">Título</p><div class="field mt-1">Título da peça em revisão</div></div><div class="col-span-2 rounded-xl border p-5"><div class="flex items-start justify-between gap-6"><div><h3 class="font-semibold">Quem aparece na peça</h3><p class="mt-1 text-xs leading-5 text-[#6b7280]">Marque somente pessoas visíveis ou participantes desta peça. A publicação expõe apenas o nome.</p></div><span class="rounded-full bg-[#fff5ed] px-2 py-1 text-[11px] font-semibold text-[#6b2d15]">Curadoria humana</span></div>
-              <div class="mt-5 grid grid-cols-2 gap-5"><div><p class="label">Lideranças da campanha</p><p class="mt-1 text-xs leading-5 text-[#6b7280]">Busca nos registros existentes. Nenhum telefone, município ou voto vai para a Central pública.</p><div class="mt-2 flex flex-wrap gap-1.5"><span class="tag">Nome da liderança <b>×</b></span></div><div class="field mt-2 flex items-center justify-between text-[#6b7280]"><span>Buscar liderança…</span><span>⌄</span></div><div class="mt-1 rounded-lg border bg-white p-1 shadow-lg"><div class="rounded-md bg-[#f4f4f5] px-3 py-2 text-sm"><b>Nome da liderança</b><span class="block text-xs text-[#6b7280]">Registro da campanha</span></div><div class="px-3 py-2 text-sm">Outra liderança de exemplo</div></div></div>
-                <div><p class="label">Figuras públicas</p><p class="mt-1 text-xs leading-5 text-[#6b7280]">Texto curado com catálogo, no mesmo molde de Instituição.</p><div class="mt-2 flex flex-wrap gap-1.5"><span class="tag">Dep. Estadual Exemplo <b>×</b></span></div><div class="field mt-2 flex items-center justify-between text-[#6b7280]"><span>Digite ou escolha uma figura pública…</span><span>⌄</span></div><div class="mt-1 rounded-lg border bg-white p-1 shadow-lg"><div class="rounded-md bg-[#f4f4f5] px-3 py-2 text-sm"><b>Dep. Estadual Exemplo</b><span class="block text-xs text-[#6b7280]">Figura pública catalogada</span></div><div class="px-3 py-2 text-sm">Personalidade Exemplo</div></div></div></div>
-            </div><div><p class="label">Instituição</p><div class="field mt-1 text-[#6b7280]">Sem instituição</div></div><div><p class="label">Cidade</p><div class="field mt-1 text-[#6b7280]">Sem cidade</div></div><div class="col-span-2 flex justify-end"><button class="btn primary">Salvar alterações</button></div></form>
-          </div></div></div>
+      <section>
+        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
+          <span>CENA 01</span>
+          <h2>Ficha interna · desktop 1280 · os dois recortes</h2>
+        </div>
+        <div
+          class="desktop frame mx-auto overflow-hidden rounded-xl bg-white"
+          data-theme="campaign"
+        >
+          <header class="flex h-14 items-center justify-between border-b bg-[#fafaf9] px-6">
+            <b>Campanha · Comunicação</b
+            ><span class="text-sm text-[#6b7280]">Central de Conteúdos</span>
+          </header>
+          <div class="p-8">
+            <a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a>
+            <div class="mt-2 flex items-start justify-between">
+              <div>
+                <h2 class="text-xl font-semibold">Título da peça em revisão</h2>
+                <div class="mt-2 flex gap-2">
+                  <span
+                    class="rounded-full bg-green-100 px-2 py-1 text-xs font-semibold text-green-800"
+                    >Pronto</span
+                  ><span
+                    class="rounded-full bg-[#f4f4f5] px-2 py-1 text-xs font-semibold text-[#6b7280]"
+                    >Rascunho</span
+                  >
+                </div>
+              </div>
+              <button class="btn border bg-white">Publicar</button>
+            </div>
+            <div class="mt-7 grid grid-cols-[300px_1fr] gap-8">
+              <aside>
+                <div
+                  class="grid aspect-video place-items-center rounded-xl bg-stone-200 text-xs font-bold text-stone-500"
+                >
+                  NEEDS ASSET · PREVIEW REAL
+                </div>
+                <dl class="mt-4 space-y-2 text-xs">
+                  <div class="flex justify-between">
+                    <dt class="text-[#6b7280]">Origem</dt>
+                    <dd>Arquivo</dd>
+                  </div>
+                  <div class="flex justify-between">
+                    <dt class="text-[#6b7280]">Tipo</dt>
+                    <dd>Vídeo</dd>
+                  </div>
+                </dl>
+              </aside>
+              <form class="grid grid-cols-2 gap-4">
+                <div class="col-span-2">
+                  <p class="label">Título</p>
+                  <div class="field mt-1">Título da peça em revisão</div>
+                </div>
+                <div class="col-span-2 rounded-xl border p-5">
+                  <div class="flex items-start justify-between gap-6">
+                    <div>
+                      <h3 class="font-semibold">Quem aparece na peça</h3>
+                      <p class="mt-1 text-xs leading-5 text-[#6b7280]">
+                        Marque somente pessoas visíveis ou participantes desta peça. A publicação
+                        expõe apenas o nome.
+                      </p>
+                    </div>
+                    <span
+                      class="rounded-full bg-[#fff5ed] px-2 py-1 text-[11px] font-semibold text-[#6b2d15]"
+                      >Curadoria humana</span
+                    >
+                  </div>
+                  <div class="mt-5 grid grid-cols-2 gap-5">
+                    <div>
+                      <p class="label">Lideranças da campanha</p>
+                      <p class="mt-1 text-xs leading-5 text-[#6b7280]">
+                        Busca nos registros existentes. Nenhum telefone, município ou voto vai para
+                        a Central pública.
+                      </p>
+                      <div class="mt-2 flex flex-wrap gap-1.5">
+                        <span class="tag">Nome da liderança <b>×</b></span>
+                      </div>
+                      <div class="field mt-2 flex items-center justify-between text-[#6b7280]">
+                        <span>Buscar liderança…</span><span>⌄</span>
+                      </div>
+                      <div class="mt-1 rounded-lg border bg-white p-1 shadow-lg">
+                        <div class="rounded-md bg-[#f4f4f5] px-3 py-2 text-sm">
+                          <b>Nome da liderança</b
+                          ><span class="block text-xs text-[#6b7280]">Registro da campanha</span>
+                        </div>
+                        <div class="px-3 py-2 text-sm">Outra liderança de exemplo</div>
+                      </div>
+                    </div>
+                    <div>
+                      <p class="label">Figuras públicas</p>
+                      <p class="mt-1 text-xs leading-5 text-[#6b7280]">
+                        Texto curado com catálogo, no mesmo molde de Instituição.
+                      </p>
+                      <div class="mt-2 flex flex-wrap gap-1.5">
+                        <span class="tag">Dep. Estadual Exemplo <b>×</b></span>
+                      </div>
+                      <div class="field mt-2 flex items-center justify-between text-[#6b7280]">
+                        <span>Digite ou escolha uma figura pública…</span><span>⌄</span>
+                      </div>
+                      <div class="mt-1 rounded-lg border bg-white p-1 shadow-lg">
+                        <div class="rounded-md bg-[#f4f4f5] px-3 py-2 text-sm">
+                          <b>Dep. Estadual Exemplo</b
+                          ><span class="block text-xs text-[#6b7280]"
+                            >Figura pública catalogada</span
+                          >
+                        </div>
+                        <div class="px-3 py-2 text-sm">Personalidade Exemplo</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div>
+                  <p class="label">Instituição</p>
+                  <div class="field mt-1 text-[#6b7280]">Sem instituição</div>
+                </div>
+                <div>
+                  <p class="label">Cidade</p>
+                  <div class="field mt-1 text-[#6b7280]">Sem cidade</div>
+                </div>
+                <div class="col-span-2 flex justify-end">
+                  <button class="btn primary">Salvar alterações</button>
+                </div>
+              </form>
+            </div>
+          </div>
+        </div>
       </section>
 
-      <section><div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 02</span><h2>Ficha interna · mobile 390 · pessoa marcada e ninguém marcado</h2></div>
-        <div class="flex flex-wrap justify-center gap-8"><div class="phone frame min-h-[760px] overflow-hidden bg-white"><header class="flex h-14 items-center justify-between border-b px-4"><b>Central de Conteúdos</b><span>☰</span></header><div class="p-4"><a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a><h2 class="mt-2 text-lg font-semibold">Título da peça</h2><div class="mt-5 rounded-xl border p-4"><h3 class="font-semibold">Quem aparece na peça</h3><p class="mt-1 text-xs leading-5 text-[#6b7280]">Somente o nome poderá aparecer no filtro público.</p><p class="label mt-5">Lideranças da campanha</p><div class="mt-2 flex"><span class="tag">Nome da liderança <b>×</b></span></div><div class="field mt-2 flex justify-between text-[#6b7280]"><span>Buscar liderança…</span><span>⌄</span></div><p class="label mt-5">Figuras públicas</p><div class="mt-2 flex"><span class="tag">Dep. Estadual Exemplo <b>×</b></span></div><div class="field mt-2 flex justify-between text-[#6b7280]"><span>Digite ou escolha…</span><span>⌄</span></div></div><button class="btn primary mt-5 w-full">Salvar alterações</button></div></div>
-          <div class="phone frame min-h-[620px] overflow-hidden bg-white"><header class="flex h-14 items-center justify-between border-b px-4"><b>Central de Conteúdos</b><span>☰</span></header><div class="p-4"><a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a><h2 class="mt-2 text-lg font-semibold">Peça sem ninguém marcado</h2><div class="mt-5 rounded-xl border p-4"><h3 class="font-semibold">Quem aparece na peça</h3><div class="mt-4 rounded-lg bg-[#f4f4f5] p-3 text-xs leading-5 text-[#6b7280]">Ninguém marcado. A peça pode ser publicada normalmente e não cria nenhum nome na faceta “Lideranças”.</div><p class="label mt-5">Lideranças da campanha</p><div class="field mt-2 text-[#6b7280]">Buscar liderança…</div><p class="label mt-5">Figuras públicas</p><div class="field mt-2 text-[#6b7280]">Digite ou escolha…</div></div><button class="btn primary mt-5 w-full">Salvar alterações</button></div></div></div>
+      <section>
+        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
+          <span>CENA 02</span>
+          <h2>Ficha interna · mobile 390 · pessoa marcada e ninguém marcado</h2>
+        </div>
+        <div class="flex flex-wrap justify-center gap-8">
+          <div class="phone frame min-h-[760px] overflow-hidden bg-white">
+            <header class="flex h-14 items-center justify-between border-b px-4">
+              <b>Central de Conteúdos</b><span>☰</span>
+            </header>
+            <div class="p-4">
+              <a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a>
+              <h2 class="mt-2 text-lg font-semibold">Título da peça</h2>
+              <div class="mt-5 rounded-xl border p-4">
+                <h3 class="font-semibold">Quem aparece na peça</h3>
+                <p class="mt-1 text-xs leading-5 text-[#6b7280]">
+                  Somente o nome poderá aparecer no filtro público.
+                </p>
+                <p class="label mt-5">Lideranças da campanha</p>
+                <div class="mt-2 flex">
+                  <span class="tag">Nome da liderança <b>×</b></span>
+                </div>
+                <div class="field mt-2 flex justify-between text-[#6b7280]">
+                  <span>Buscar liderança…</span><span>⌄</span>
+                </div>
+                <p class="label mt-5">Figuras públicas</p>
+                <div class="mt-2 flex">
+                  <span class="tag">Dep. Estadual Exemplo <b>×</b></span>
+                </div>
+                <div class="field mt-2 flex justify-between text-[#6b7280]">
+                  <span>Digite ou escolha…</span><span>⌄</span>
+                </div>
+              </div>
+              <button class="btn primary mt-5 w-full">Salvar alterações</button>
+            </div>
+          </div>
+          <div class="phone frame min-h-[620px] overflow-hidden bg-white">
+            <header class="flex h-14 items-center justify-between border-b px-4">
+              <b>Central de Conteúdos</b><span>☰</span>
+            </header>
+            <div class="p-4">
+              <a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a>
+              <h2 class="mt-2 text-lg font-semibold">Peça sem ninguém marcado</h2>
+              <div class="mt-5 rounded-xl border p-4">
+                <h3 class="font-semibold">Quem aparece na peça</h3>
+                <div class="mt-4 rounded-lg bg-[#f4f4f5] p-3 text-xs leading-5 text-[#6b7280]">
+                  Ninguém marcado. A peça pode ser publicada normalmente e não cria nenhum nome na
+                  faceta “Lideranças”.
+                </div>
+                <p class="label mt-5">Lideranças da campanha</p>
+                <div class="field mt-2 text-[#6b7280]">Buscar liderança…</div>
+                <p class="label mt-5">Figuras públicas</p>
+                <div class="field mt-2 text-[#6b7280]">Digite ou escolha…</div>
+              </div>
+              <button class="btn primary mt-5 w-full">Salvar alterações</button>
+            </div>
+          </div>
+        </div>
       </section>
 
-      <section><div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 03</span><h2>Catálogo público · faceta única “Lideranças” · desktop e mobile</h2></div>
-        <div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white"><header class="flex h-16 items-center justify-between bg-[#ae1603] px-10"><div class="h-9 w-44 rounded bg-white/20"></div><b class="text-sm text-white">Central de Conteúdos</b></header><div class="mx-auto max-w-6xl px-10 py-10"><div class="rounded-xl bg-[#fff8f2] p-4"><div class="h-11 rounded-[10px] border bg-white px-3 py-3 text-sm text-[#6c615e]">Encontre uma peça por assunto, cidade ou pessoa…</div><div class="mt-3 flex flex-wrap gap-2"><span class="chip">Tipo⌄</span><span class="chip">Cidade⌄</span><span class="chip">Região⌄</span><span class="chip">Tema⌄</span><span class="chip">Instituição⌄</span><details open class="relative"><summary class="chip list-none border-[#184e92]/35 bg-[#eef4fb] text-[#184e92]">Lideranças⌄</summary><div class="absolute z-10 mt-1 w-64 rounded-xl border bg-white p-2 shadow-xl"><p class="px-2 py-1 text-[10px] font-black tracking-wide text-[#6c615e]">EM PEÇAS PUBLICADAS</p><div class="rounded-lg bg-[#f4f4f5] px-3 py-2 text-sm font-medium">Nome da liderança</div><div class="px-3 py-2 text-sm">Dep. Estadual Exemplo</div><div class="px-3 py-2 text-sm">Personalidade Exemplo</div></div></details></div></div><div class="mt-24 flex items-center justify-between"><div><h3 class="display text-2xl font-black">Peças com Nome da liderança</h3><p class="mt-1 text-sm text-[#6c615e]">O filtro combina com cidade, tema e os demais recortes.</p></div><span class="chip active">Lideranças · Nome da liderança ×</span></div><div class="mt-5 grid grid-cols-3 gap-6"><article class="catalog-card"><div class="grid aspect-video place-items-center bg-stone-200 text-[10px] font-black text-stone-500">NEEDS ASSET · PREVIEW REAL</div><div class="p-4"><span class="rounded-full bg-[#eef4fb] px-2 py-1 text-[11px] font-extrabold text-[#184e92]">Vídeo</span><h4 class="mt-2 font-extrabold">Título da peça publicada</h4><p class="mt-1 text-xs text-[#6c615e]">Nome da liderança · Tema</p></div></article></div><div class="mt-7 rounded-lg border border-dashed p-4 text-xs leading-5 text-[#6c615e]"><b class="text-black">Regra visível do gate:</b> este menu é derivado somente das peças publicadas. Despublicar a última peça de um nome remove esse nome da faceta imediatamente. Sem contato, território, organização, status ou votos.</div></div></div>
-        <div class="phone frame mx-auto mt-8 min-h-[740px] overflow-hidden bg-white"><header class="flex h-14 items-center justify-between bg-[#ae1603] px-4"><div class="h-7 w-32 rounded bg-white/20"></div><span class="text-white">☰</span></header><div class="p-4"><div class="h-11 rounded-[10px] border px-3 py-3 text-sm text-[#6c615e]">Busque uma pessoa…</div><div class="mt-3 flex gap-2 overflow-hidden"><span class="chip shrink-0">Tipo⌄</span><span class="chip active shrink-0">Lideranças · Nome da liderança ×</span></div><div class="mt-5 rounded-xl border bg-white p-3 shadow-lg"><p class="px-2 py-1 text-[10px] font-black tracking-wide text-[#6c615e]">LIDERANÇAS · EM PEÇAS PUBLICADAS</p><div class="rounded-lg bg-[#f4f4f5] px-3 py-3 text-sm font-medium">Nome da liderança</div><div class="px-3 py-3 text-sm">Dep. Estadual Exemplo</div></div><article class="catalog-card mt-5"><div class="grid aspect-video place-items-center bg-stone-200 text-[10px] font-black text-stone-500">NEEDS ASSET · PREVIEW REAL</div><div class="p-4"><span class="rounded-full bg-[#eef4fb] px-2 py-1 text-[11px] font-extrabold text-[#184e92]">Vídeo</span><h4 class="mt-2 text-lg font-extrabold">Título da peça publicada</h4><p class="mt-1 text-xs text-[#6c615e]">Nome da liderança</p><button class="btn mt-4 w-full bg-[#ffe607] text-black">Compartilhar</button></div></article></div></div>
+      <section>
+        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
+          <span>CENA 03</span>
+          <h2>Catálogo público · faceta única “Lideranças” · desktop e mobile</h2>
+        </div>
+        <div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white">
+          <header class="flex h-16 items-center justify-between bg-[#ae1603] px-10">
+            <div class="h-9 w-44 rounded bg-white/20"></div>
+            <b class="text-sm text-white">Central de Conteúdos</b>
+          </header>
+          <div class="mx-auto max-w-6xl px-10 py-10">
+            <div class="rounded-xl bg-[#fff8f2] p-4">
+              <div class="h-11 rounded-[10px] border bg-white px-3 py-3 text-sm text-[#6c615e]">
+                Encontre uma peça por assunto, cidade ou pessoa…
+              </div>
+              <div class="mt-3 flex flex-wrap gap-2">
+                <span class="chip">Tipo⌄</span><span class="chip">Cidade⌄</span
+                ><span class="chip">Região⌄</span><span class="chip">Tema⌄</span
+                ><span class="chip">Instituição⌄</span>
+                <details open class="relative">
+                  <summary class="chip list-none border-[#184e92]/35 bg-[#eef4fb] text-[#184e92]">
+                    Lideranças⌄
+                  </summary>
+                  <div class="absolute z-10 mt-1 w-64 rounded-xl border bg-white p-2 shadow-xl">
+                    <p class="px-2 py-1 text-[10px] font-black tracking-wide text-[#6c615e]">
+                      EM PEÇAS PUBLICADAS
+                    </p>
+                    <div class="rounded-lg bg-[#f4f4f5] px-3 py-2 text-sm font-medium">
+                      Nome da liderança
+                    </div>
+                    <div class="px-3 py-2 text-sm">Dep. Estadual Exemplo</div>
+                    <div class="px-3 py-2 text-sm">Personalidade Exemplo</div>
+                  </div>
+                </details>
+              </div>
+            </div>
+            <div class="mt-24 flex items-center justify-between">
+              <div>
+                <h3 class="display text-2xl font-black">Peças com Nome da liderança</h3>
+                <p class="mt-1 text-sm text-[#6c615e]">
+                  O filtro combina com cidade, tema e os demais recortes.
+                </p>
+              </div>
+              <span class="chip active">Lideranças · Nome da liderança ×</span>
+            </div>
+            <div class="mt-5 grid grid-cols-3 gap-6">
+              <article class="catalog-card">
+                <div
+                  class="grid aspect-video place-items-center bg-stone-200 text-[10px] font-black text-stone-500"
+                >
+                  NEEDS ASSET · PREVIEW REAL
+                </div>
+                <div class="p-4">
+                  <span
+                    class="rounded-full bg-[#eef4fb] px-2 py-1 text-[11px] font-extrabold text-[#184e92]"
+                    >Vídeo</span
+                  >
+                  <h4 class="mt-2 font-extrabold">Título da peça publicada</h4>
+                  <p class="mt-1 text-xs text-[#6c615e]">Nome da liderança · Tema</p>
+                </div>
+              </article>
+            </div>
+            <div class="mt-7 rounded-lg border border-dashed p-4 text-xs leading-5 text-[#6c615e]">
+              <b class="text-black">Regra visível do gate:</b> este menu é derivado somente das
+              peças publicadas. Despublicar a última peça de um nome remove esse nome da faceta
+              imediatamente. Sem contato, território, organização, status ou votos.
+            </div>
+          </div>
+        </div>
+        <div class="phone frame mx-auto mt-8 min-h-[740px] overflow-hidden bg-white">
+          <header class="flex h-14 items-center justify-between bg-[#ae1603] px-4">
+            <div class="h-7 w-32 rounded bg-white/20"></div>
+            <span class="text-white">☰</span>
+          </header>
+          <div class="p-4">
+            <div class="h-11 rounded-[10px] border px-3 py-3 text-sm text-[#6c615e]">
+              Busque uma pessoa…
+            </div>
+            <div class="mt-3 flex gap-2 overflow-hidden">
+              <span class="chip shrink-0">Tipo⌄</span
+              ><span class="chip active shrink-0">Lideranças · Nome da liderança ×</span>
+            </div>
+            <div class="mt-5 rounded-xl border bg-white p-3 shadow-lg">
+              <p class="px-2 py-1 text-[10px] font-black tracking-wide text-[#6c615e]">
+                LIDERANÇAS · EM PEÇAS PUBLICADAS
+              </p>
+              <div class="rounded-lg bg-[#f4f4f5] px-3 py-3 text-sm font-medium">
+                Nome da liderança
+              </div>
+              <div class="px-3 py-3 text-sm">Dep. Estadual Exemplo</div>
+            </div>
+            <article class="catalog-card mt-5">
+              <div
+                class="grid aspect-video place-items-center bg-stone-200 text-[10px] font-black text-stone-500"
+              >
+                NEEDS ASSET · PREVIEW REAL
+              </div>
+              <div class="p-4">
+                <span
+                  class="rounded-full bg-[#eef4fb] px-2 py-1 text-[11px] font-extrabold text-[#184e92]"
+                  >Vídeo</span
+                >
+                <h4 class="mt-2 text-lg font-extrabold">Título da peça publicada</h4>
+                <p class="mt-1 text-xs text-[#6c615e]">Nome da liderança</p>
+                <button class="btn mt-4 w-full bg-[#ffe607] text-black">Compartilhar</button>
+              </div>
+            </article>
+          </div>
+        </div>
       </section>
     </main>
   </body>
diff --git a/docs/plans/central-conteudos-liderancas.md b/docs/plans/central-conteudos-liderancas.md
index ffc5214f..450d4e6e 100644
--- a/docs/plans/central-conteudos-liderancas.md
+++ b/docs/plans/central-conteudos-liderancas.md
@@ -51,7 +51,7 @@ A campanha já tem a Central de Conteúdos interna (C211), onde a assessoria cat
 
 - **Vou apresentar dados?** Não — a faceta é uma lista de nomes; sem contagem, sem ranking, sem placar de aparições.
 - **Decisões desbloqueadas:** a comunicação decide quem aparece em cada peça; o eleitor decide qual peça procurar pelo nome de quem aparece nela.
-- **Forma:** *adiada ao plano de implementação* — restrição de produto: só nomes de exibição (sem número, sem contagem por pessoa, sem métrica de aparições).
+- **Forma:** _adiada ao plano de implementação_ — restrição de produto: só nomes de exibição (sem número, sem contagem por pessoa, sem métrica de aparições).
 
 ## Dados da decisão (literais)
 
diff --git a/docs/plans/central-conteudos-link-instagram-ui-design.html b/docs/plans/central-conteudos-link-instagram-ui-design.html
index c7646098..53bddfa3 100644
--- a/docs/plans/central-conteudos-link-instagram-ui-design.html
+++ b/docs/plans/central-conteudos-link-instagram-ui-design.html
@@ -1,44 +1,388 @@
 <!doctype html>
 <html lang="pt-BR" data-theme="campaign">
   <head>
-    <meta charset="utf-8" /><meta name="viewport" content="width=device-width,initial-scale=1" />
+    <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 — C215 · Link do Instagram</title>
     <style type="text/tailwindcss">
-      @theme{--font-sans:Inter,Arial,sans-serif;--color-background:#fff;--color-foreground:#1c1917;--color-primary:#c51414;--color-muted:#f4f4f5;--color-muted-foreground:#6b7280;--color-border:rgb(28 25 23/.12)}
-      *{box-sizing:border-box}.board{background:#ecebea;background-image:radial-gradient(#d5d1cd .7px,transparent .7px);background-size:18px 18px}.frame{box-shadow:0 20px 55px rgb(28 25 23/.12)}.desktop{width:1280px}.phone{width:390px;border-radius:28px}.scene:after{content:'';height:1px;flex:1;background:#cbc7c2}
-      .field{min-height:44px;border:1px solid #d6d3d1;border-radius:6px;background:white;padding:10px 12px;font-size:14px}.label{font-size:13px;font-weight:600}.badge{display:inline-flex;align-items:center;border-radius:999px;padding:3px 8px;font-size:12px;font-weight:600}.btn{display:inline-flex;min-height:44px;align-items:center;justify-content:center;gap:8px;border-radius:6px;padding:9px 14px;font-size:14px;font-weight:600}.primary{background:#c51414;color:white}.outline{border:1px solid #d6d3d1;background:white}.shell{display:grid;grid-template-columns:220px 1fr}.side{background:#fafaf9;border-right:1px solid rgb(28 25 23/.12)}
+      @theme {
+        --font-sans: Inter, Arial, sans-serif;
+        --color-background: #fff;
+        --color-foreground: #1c1917;
+        --color-primary: #c51414;
+        --color-muted: #f4f4f5;
+        --color-muted-foreground: #6b7280;
+        --color-border: rgb(28 25 23/0.12);
+      }
+      * {
+        box-sizing: border-box;
+      }
+      .board {
+        background: #ecebea;
+        background-image: radial-gradient(#d5d1cd 0.7px, transparent 0.7px);
+        background-size: 18px 18px;
+      }
+      .frame {
+        box-shadow: 0 20px 55px rgb(28 25 23/0.12);
+      }
+      .desktop {
+        width: 1280px;
+      }
+      .phone {
+        width: 390px;
+        border-radius: 28px;
+      }
+      .scene:after {
+        content: '';
+        height: 1px;
+        flex: 1;
+        background: #cbc7c2;
+      }
+      .field {
+        min-height: 44px;
+        border: 1px solid #d6d3d1;
+        border-radius: 6px;
+        background: white;
+        padding: 10px 12px;
+        font-size: 14px;
+      }
+      .label {
+        font-size: 13px;
+        font-weight: 600;
+      }
+      .badge {
+        display: inline-flex;
+        align-items: center;
+        border-radius: 999px;
+        padding: 3px 8px;
+        font-size: 12px;
+        font-weight: 600;
+      }
+      .btn {
+        display: inline-flex;
+        min-height: 44px;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        border-radius: 6px;
+        padding: 9px 14px;
+        font-size: 14px;
+        font-weight: 600;
+      }
+      .primary {
+        background: #c51414;
+        color: white;
+      }
+      .outline {
+        border: 1px solid #d6d3d1;
+        background: white;
+      }
+      .shell {
+        display: grid;
+        grid-template-columns: 220px 1fr;
+      }
+      .side {
+        background: #fafaf9;
+        border-right: 1px solid rgb(28 25 23/0.12);
+      }
     </style>
   </head>
   <body class="board min-h-screen text-[#1c1917] antialiased">
     <main class="mx-auto max-w-[1480px] space-y-14 px-4 py-12 md:px-8">
-      <header class="max-w-3xl"><span class="rounded-full bg-[#c51414] px-3 py-1 text-xs font-bold text-white">C215 · ficha existente</span><h1 class="mt-4 text-4xl font-bold tracking-tight">O link nunca degrada em silêncio.</h1><p class="mt-2 text-sm leading-6 text-[#6b7280]">A ficha conta o que está acontecendo, o que foi extraído e por que uma peça ficou apenas como link.</p></header>
+      <header class="max-w-3xl">
+        <span class="rounded-full bg-[#c51414] px-3 py-1 text-xs font-bold text-white"
+          >C215 · ficha existente</span
+        >
+        <h1 class="mt-4 text-4xl font-bold tracking-tight">O link nunca degrada em silêncio.</h1>
+        <p class="mt-2 text-sm leading-6 text-[#6b7280]">
+          A ficha conta o que está acontecendo, o que foi extraído e por que uma peça ficou apenas
+          como link.
+        </p>
+      </header>
 
-      <section><div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6b7280]"><span>CENA 01</span><h2>Desktop 1280 · processando → extraída e catalogada</h2></div>
-        <div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white">
-          <div class="shell min-h-[710px]"><aside class="side p-5"><div class="h-7 w-32 rounded bg-[#c51414]"></div><nav class="mt-8 space-y-2 text-sm"><div class="rounded-md bg-[#f5f5f4] px-3 py-2 font-semibold">Comunicação</div><div class="px-3 py-2 text-[#6b7280]">Central de Conteúdos</div></nav></aside>
-            <div class="p-8"><a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a><div class="mt-2 flex items-start justify-between"><div><h2 class="text-xl font-semibold">Peça adicionada pelo Instagram</h2><div class="mt-2 flex gap-2"><span class="badge bg-amber-100 text-amber-900">Processando</span><span class="badge bg-[#f4f4f5] text-[#6b7280]">Rascunho</span></div></div><button class="btn outline">Publicar</button></div>
-              <div class="mt-7 grid grid-cols-[300px_1fr] gap-8"><aside><div class="grid aspect-video place-items-center rounded-xl border bg-stone-100 text-center text-xs font-semibold text-[#6b7280]">Buscando a mídia<br/>no perfil oficial…</div><dl class="mt-4 space-y-2 text-xs"><div class="flex justify-between"><dt class="text-[#6b7280]">Origem</dt><dd>Instagram</dd></div><div class="flex justify-between gap-3"><dt class="text-[#6b7280]">Link</dt><dd class="truncate text-[#c51414]">instagram.com/…/reel/ABC/</dd></div></dl><div class="mt-5 rounded-lg bg-[#f4f4f5] p-3"><div class="h-2 overflow-hidden rounded-full bg-white"><div class="h-full w-1/2 rounded-full bg-[#c51414]"></div></div><p class="mt-2 text-xs text-[#6b7280]">Procurando a publicação no perfil oficial…</p></div></aside>
-                <div><div class="rounded-xl border p-5"><p class="text-sm font-semibold">Processamento da peça</p><ol class="mt-4 grid grid-cols-3 gap-3 text-xs"><li class="rounded-lg border border-green-200 bg-green-50 p-3"><b>1. Link recebido</b><p class="mt-1 text-green-800">Concluído</p></li><li class="rounded-lg border border-amber-200 bg-amber-50 p-3"><b>2. Mídia oficial</b><p class="mt-1 text-amber-900">Em andamento</p></li><li class="rounded-lg border bg-[#f4f4f5] p-3 text-[#6b7280]"><b>3. Catalogação</b><p class="mt-1">Aguardando</p></li></ol></div><div class="mt-6 grid grid-cols-2 gap-4"><div><p class="label">Título</p><div class="field mt-1 text-[#9a9692]">Disponível após a catalogação</div></div><div><p class="label">Tipo</p><div class="field mt-1 text-[#9a9692]">—</div></div><div class="col-span-2"><p class="label">Transcrição / texto</p><div class="mt-1 h-36 rounded-md border bg-[#fafafa]"></div></div></div></div>
-              </div>
-              <div class="mt-8 border-t pt-8"><div class="flex items-center gap-3"><span class="badge bg-green-100 text-green-800">Pronto</span><b class="text-sm">Estado final — mídia extraída</b></div><div class="mt-4 grid grid-cols-[300px_1fr] gap-8"><div><div class="grid aspect-video place-items-center rounded-xl bg-stone-200 text-[11px] font-bold text-stone-500">NEEDS ASSET · PREVIEW REAL</div><button class="btn outline mt-3 w-full">↓ Baixar arquivo</button></div><div class="rounded-xl border border-green-200 bg-green-50 p-5"><h3 class="font-semibold text-green-900">Arquivo e transcrição prontos</h3><p class="mt-1 text-sm leading-6 text-green-900/80">A mídia oficial foi baixada e a ficha foi catalogada. Revise os campos antes de publicar.</p><div class="mt-4 rounded-md border border-green-200 bg-white p-3 text-sm">“Transcrição gerada aparece aqui para revisão editorial.”</div><button class="btn primary mt-4">Salvar alterações</button></div></div></div>
-            </div></div>
+      <section>
+        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6b7280]">
+          <span>CENA 01</span>
+          <h2>Desktop 1280 · processando → extraída e catalogada</h2>
         </div>
-      </section>
-
-      <section><div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6b7280]"><span>CENA 02</span><h2>Peça-link · motivo honesto e caminho para anexar o original</h2></div>
-        <div class="desktop frame mx-auto rounded-xl bg-white p-8"><div class="flex items-start justify-between"><div><a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a><h2 class="mt-2 text-xl font-semibold">Peça adicionada pelo Instagram</h2><div class="mt-2 flex gap-2"><span class="badge bg-green-100 text-green-800">Pronto</span><span class="badge bg-[#f4f4f5] text-[#6b7280]">Rascunho</span></div></div><button class="btn outline">Publicar</button></div>
-          <div class="mt-7 grid grid-cols-[300px_1fr] gap-8"><aside><div class="grid aspect-video place-items-center rounded-xl border bg-stone-100 text-xs font-semibold text-[#6b7280]">Peça-link</div><div class="mt-5 rounded-lg border border-amber-200 bg-amber-50 p-4"><p class="text-xs font-semibold text-amber-950">A peça continua disponível pelo link</p><p class="mt-1 text-xs leading-5 text-amber-900">A mídia não foi baixada. Você pode revisar a ficha ou anexar o arquivo original.</p><button class="btn outline mt-3 w-full">⌕ Anexar arquivo original</button></div></aside>
-            <div><h3 class="text-sm font-semibold">Motivo da peça-link</h3><p class="mt-1 text-xs text-[#6b7280]">A ficha mostra um destes quatro motivos, sem código de erro nem jargão técnico.</p><div class="mt-4 grid grid-cols-2 gap-3 text-sm"><div class="rounded-lg border p-4"><span class="badge bg-amber-100 text-amber-900">Motivo</span><p class="mt-2 font-medium">Link não encontrado entre as mídias recentes do perfil</p></div><div class="rounded-lg border p-4"><span class="badge bg-amber-100 text-amber-900">Motivo</span><p class="mt-2 font-medium">Carrossel: sem arquivo único para baixar</p></div><div class="rounded-lg border p-4"><span class="badge bg-amber-100 text-amber-900">Motivo</span><p class="mt-2 font-medium">Instagram indisponível no momento</p></div><div class="rounded-lg border p-4"><span class="badge bg-amber-100 text-amber-900">Motivo</span><p class="mt-2 font-medium">Sem credencial do Instagram configurada</p></div></div><div class="mt-5 rounded-lg bg-[#f4f4f5] p-4 text-xs leading-5 text-[#6b7280]">Mídia de terceiro nunca é baixada. Esta peça não foi apagada e continua circulando pelo link.</div></div>
+        <div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white">
+          <div class="shell min-h-[710px]">
+            <aside class="side p-5">
+              <div class="h-7 w-32 rounded bg-[#c51414]"></div>
+              <nav class="mt-8 space-y-2 text-sm">
+                <div class="rounded-md bg-[#f5f5f4] px-3 py-2 font-semibold">Comunicação</div>
+                <div class="px-3 py-2 text-[#6b7280]">Central de Conteúdos</div>
+              </nav>
+            </aside>
+            <div class="p-8">
+              <a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a>
+              <div class="mt-2 flex items-start justify-between">
+                <div>
+                  <h2 class="text-xl font-semibold">Peça adicionada pelo Instagram</h2>
+                  <div class="mt-2 flex gap-2">
+                    <span class="badge bg-amber-100 text-amber-900">Processando</span
+                    ><span class="badge bg-[#f4f4f5] text-[#6b7280]">Rascunho</span>
+                  </div>
+                </div>
+                <button class="btn outline">Publicar</button>
+              </div>
+              <div class="mt-7 grid grid-cols-[300px_1fr] gap-8">
+                <aside>
+                  <div
+                    class="grid aspect-video place-items-center rounded-xl border bg-stone-100 text-center text-xs font-semibold text-[#6b7280]"
+                  >
+                    Buscando a mídia<br />no perfil oficial…
+                  </div>
+                  <dl class="mt-4 space-y-2 text-xs">
+                    <div class="flex justify-between">
+                      <dt class="text-[#6b7280]">Origem</dt>
+                      <dd>Instagram</dd>
+                    </div>
+                    <div class="flex justify-between gap-3">
+                      <dt class="text-[#6b7280]">Link</dt>
+                      <dd class="truncate text-[#c51414]">instagram.com/…/reel/ABC/</dd>
+                    </div>
+                  </dl>
+                  <div class="mt-5 rounded-lg bg-[#f4f4f5] p-3">
+                    <div class="h-2 overflow-hidden rounded-full bg-white">
+                      <div class="h-full w-1/2 rounded-full bg-[#c51414]"></div>
+                    </div>
+                    <p class="mt-2 text-xs text-[#6b7280]">
+                      Procurando a publicação no perfil oficial…
+                    </p>
+                  </div>
+                </aside>
+                <div>
+                  <div class="rounded-xl border p-5">
+                    <p class="text-sm font-semibold">Processamento da peça</p>
+                    <ol class="mt-4 grid grid-cols-3 gap-3 text-xs">
+                      <li class="rounded-lg border border-green-200 bg-green-50 p-3">
+                        <b>1. Link recebido</b>
+                        <p class="mt-1 text-green-800">Concluído</p>
+                      </li>
+                      <li class="rounded-lg border border-amber-200 bg-amber-50 p-3">
+                        <b>2. Mídia oficial</b>
+                        <p class="mt-1 text-amber-900">Em andamento</p>
+                      </li>
+                      <li class="rounded-lg border bg-[#f4f4f5] p-3 text-[#6b7280]">
+                        <b>3. Catalogação</b>
+                        <p class="mt-1">Aguardando</p>
+                      </li>
+                    </ol>
+                  </div>
+                  <div class="mt-6 grid grid-cols-2 gap-4">
+                    <div>
+                      <p class="label">Título</p>
+                      <div class="field mt-1 text-[#9a9692]">Disponível após a catalogação</div>
+                    </div>
+                    <div>
+                      <p class="label">Tipo</p>
+                      <div class="field mt-1 text-[#9a9692]">—</div>
+                    </div>
+                    <div class="col-span-2">
+                      <p class="label">Transcrição / texto</p>
+                      <div class="mt-1 h-36 rounded-md border bg-[#fafafa]"></div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="mt-8 border-t pt-8">
+                <div class="flex items-center gap-3">
+                  <span class="badge bg-green-100 text-green-800">Pronto</span
+                  ><b class="text-sm">Estado final — mídia extraída</b>
+                </div>
+                <div class="mt-4 grid grid-cols-[300px_1fr] gap-8">
+                  <div>
+                    <div
+                      class="grid aspect-video place-items-center rounded-xl bg-stone-200 text-[11px] font-bold text-stone-500"
+                    >
+                      NEEDS ASSET · PREVIEW REAL
+                    </div>
+                    <button class="btn outline mt-3 w-full">↓ Baixar arquivo</button>
+                  </div>
+                  <div class="rounded-xl border border-green-200 bg-green-50 p-5">
+                    <h3 class="font-semibold text-green-900">Arquivo e transcrição prontos</h3>
+                    <p class="mt-1 text-sm leading-6 text-green-900/80">
+                      A mídia oficial foi baixada e a ficha foi catalogada. Revise os campos antes
+                      de publicar.
+                    </p>
+                    <div class="mt-4 rounded-md border border-green-200 bg-white p-3 text-sm">
+                      “Transcrição gerada aparece aqui para revisão editorial.”
+                    </div>
+                    <button class="btn primary mt-4">Salvar alterações</button>
+                  </div>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </section>
 
-      <section><div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6b7280]"><span>CENA 03</span><h2>Mobile 390 · estados essenciais na ficha e lista compacta</h2></div>
+      <section>
+        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6b7280]">
+          <span>CENA 02</span>
+          <h2>Peça-link · motivo honesto e caminho para anexar o original</h2>
+        </div>
+        <div class="desktop frame mx-auto rounded-xl bg-white p-8">
+          <div class="flex items-start justify-between">
+            <div>
+              <a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a>
+              <h2 class="mt-2 text-xl font-semibold">Peça adicionada pelo Instagram</h2>
+              <div class="mt-2 flex gap-2">
+                <span class="badge bg-green-100 text-green-800">Pronto</span
+                ><span class="badge bg-[#f4f4f5] text-[#6b7280]">Rascunho</span>
+              </div>
+            </div>
+            <button class="btn outline">Publicar</button>
+          </div>
+          <div class="mt-7 grid grid-cols-[300px_1fr] gap-8">
+            <aside>
+              <div
+                class="grid aspect-video place-items-center rounded-xl border bg-stone-100 text-xs font-semibold text-[#6b7280]"
+              >
+                Peça-link
+              </div>
+              <div class="mt-5 rounded-lg border border-amber-200 bg-amber-50 p-4">
+                <p class="text-xs font-semibold text-amber-950">
+                  A peça continua disponível pelo link
+                </p>
+                <p class="mt-1 text-xs leading-5 text-amber-900">
+                  A mídia não foi baixada. Você pode revisar a ficha ou anexar o arquivo original.
+                </p>
+                <button class="btn outline mt-3 w-full">⌕ Anexar arquivo original</button>
+              </div>
+            </aside>
+            <div>
+              <h3 class="text-sm font-semibold">Motivo da peça-link</h3>
+              <p class="mt-1 text-xs text-[#6b7280]">
+                A ficha mostra um destes quatro motivos, sem código de erro nem jargão técnico.
+              </p>
+              <div class="mt-4 grid grid-cols-2 gap-3 text-sm">
+                <div class="rounded-lg border p-4">
+                  <span class="badge bg-amber-100 text-amber-900">Motivo</span>
+                  <p class="mt-2 font-medium">
+                    Link não encontrado entre as mídias recentes do perfil
+                  </p>
+                </div>
+                <div class="rounded-lg border p-4">
+                  <span class="badge bg-amber-100 text-amber-900">Motivo</span>
+                  <p class="mt-2 font-medium">Carrossel: sem arquivo único para baixar</p>
+                </div>
+                <div class="rounded-lg border p-4">
+                  <span class="badge bg-amber-100 text-amber-900">Motivo</span>
+                  <p class="mt-2 font-medium">Instagram indisponível no momento</p>
+                </div>
+                <div class="rounded-lg border p-4">
+                  <span class="badge bg-amber-100 text-amber-900">Motivo</span>
+                  <p class="mt-2 font-medium">Sem credencial do Instagram configurada</p>
+                </div>
+              </div>
+              <div class="mt-5 rounded-lg bg-[#f4f4f5] p-4 text-xs leading-5 text-[#6b7280]">
+                Mídia de terceiro nunca é baixada. Esta peça não foi apagada e continua circulando
+                pelo link.
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section>
+        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6b7280]">
+          <span>CENA 03</span>
+          <h2>Mobile 390 · estados essenciais na ficha e lista compacta</h2>
+        </div>
         <div class="flex flex-wrap justify-center gap-8">
-          <div class="phone frame min-h-[780px] overflow-hidden bg-white"><header class="flex h-14 items-center justify-between border-b px-4"><b>Central de Conteúdos</b><span>☰</span></header><div class="p-4"><a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a><h2 class="mt-2 text-lg font-semibold">Peça adicionada pelo Instagram</h2><div class="mt-2 flex gap-2"><span class="badge bg-amber-100 text-amber-900">Processando</span><span class="badge bg-[#f4f4f5] text-[#6b7280]">Rascunho</span></div><div class="mt-5 grid aspect-video place-items-center rounded-xl border bg-stone-100 text-xs text-[#6b7280]">Buscando mídia oficial…</div><div class="mt-4 rounded-lg bg-[#f4f4f5] p-3"><div class="h-2 rounded-full bg-white"><div class="h-full w-1/2 rounded-full bg-[#c51414]"></div></div><p class="mt-2 text-xs text-[#6b7280]">Procurando a publicação no perfil oficial…</p></div><div class="mt-5 space-y-3"><div class="h-11 rounded-md border"></div><div class="h-24 rounded-md border"></div></div></div></div>
-          <div class="phone frame min-h-[780px] overflow-hidden bg-white"><header class="flex h-14 items-center justify-between border-b px-4"><b>Central de Conteúdos</b><span>☰</span></header><div class="p-4"><a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a><h2 class="mt-2 text-lg font-semibold">Peça adicionada pelo Instagram</h2><div class="mt-2 flex gap-2"><span class="badge bg-green-100 text-green-800">Pronto</span><span class="badge bg-[#f4f4f5] text-[#6b7280]">Rascunho</span></div><div class="mt-5 grid aspect-video place-items-center rounded-xl border bg-stone-100 text-xs text-[#6b7280]">Peça-link</div><div class="mt-4 rounded-lg border border-amber-200 bg-amber-50 p-4"><p class="text-xs font-semibold text-amber-950">Por que o arquivo não foi baixado</p><p class="mt-2 text-sm font-medium text-amber-950">Carrossel: sem arquivo único para baixar</p><p class="mt-2 text-xs leading-5 text-amber-900">A peça continua disponível pelo link.</p><button class="btn outline mt-4 w-full">⌕ Anexar arquivo original</button></div><button class="btn primary mt-6 w-full">Salvar alterações</button></div></div>
-          <div class="phone frame min-h-[560px] overflow-hidden bg-white"><header class="flex h-14 items-center justify-between border-b px-4"><b>Conteúdos</b><span>☰</span></header><div class="space-y-3 p-4"><article class="rounded-xl border p-4"><div class="flex justify-between gap-3"><b class="text-sm">Peça adicionada pelo Instagram</b><span class="badge shrink-0 bg-amber-100 text-amber-900">Processando</span></div><p class="mt-2 text-xs text-[#6b7280]">Instagram · Preparando a peça…</p><div class="mt-3 h-2 rounded-full bg-[#f4f4f5]"><div class="h-full w-1/2 rounded-full bg-[#c51414]"></div></div><button class="btn outline mt-3 w-full">Abrir</button></article><article class="rounded-xl border p-4"><div class="flex justify-between gap-3"><b class="text-sm">Peça adicionada pelo Instagram</b><span class="badge shrink-0 bg-green-100 text-green-800">Pronto</span></div><p class="mt-2 text-xs text-[#6b7280]">Instagram · Peça-link</p><button class="btn outline mt-3 w-full">Abrir</button></article><p class="px-2 text-center text-[11px] leading-4 text-[#6b7280]">Recomendação: a lista continua limpa; o motivo completo vive na ficha.</p></div></div>
+          <div class="phone frame min-h-[780px] overflow-hidden bg-white">
+            <header class="flex h-14 items-center justify-between border-b px-4">
+              <b>Central de Conteúdos</b><span>☰</span>
+            </header>
+            <div class="p-4">
+              <a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a>
+              <h2 class="mt-2 text-lg font-semibold">Peça adicionada pelo Instagram</h2>
+              <div class="mt-2 flex gap-2">
+                <span class="badge bg-amber-100 text-amber-900">Processando</span
+                ><span class="badge bg-[#f4f4f5] text-[#6b7280]">Rascunho</span>
+              </div>
+              <div
+                class="mt-5 grid aspect-video place-items-center rounded-xl border bg-stone-100 text-xs text-[#6b7280]"
+              >
+                Buscando mídia oficial…
+              </div>
+              <div class="mt-4 rounded-lg bg-[#f4f4f5] p-3">
+                <div class="h-2 rounded-full bg-white">
+                  <div class="h-full w-1/2 rounded-full bg-[#c51414]"></div>
+                </div>
+                <p class="mt-2 text-xs text-[#6b7280]">
+                  Procurando a publicação no perfil oficial…
+                </p>
+              </div>
+              <div class="mt-5 space-y-3">
+                <div class="h-11 rounded-md border"></div>
+                <div class="h-24 rounded-md border"></div>
+              </div>
+            </div>
+          </div>
+          <div class="phone frame min-h-[780px] overflow-hidden bg-white">
+            <header class="flex h-14 items-center justify-between border-b px-4">
+              <b>Central de Conteúdos</b><span>☰</span>
+            </header>
+            <div class="p-4">
+              <a class="text-xs font-semibold text-[#c51414]">← Conteúdos</a>
+              <h2 class="mt-2 text-lg font-semibold">Peça adicionada pelo Instagram</h2>
+              <div class="mt-2 flex gap-2">
+                <span class="badge bg-green-100 text-green-800">Pronto</span
+                ><span class="badge bg-[#f4f4f5] text-[#6b7280]">Rascunho</span>
+              </div>
+              <div
+                class="mt-5 grid aspect-video place-items-center rounded-xl border bg-stone-100 text-xs text-[#6b7280]"
+              >
+                Peça-link
+              </div>
+              <div class="mt-4 rounded-lg border border-amber-200 bg-amber-50 p-4">
+                <p class="text-xs font-semibold text-amber-950">
+                  Por que o arquivo não foi baixado
+                </p>
+                <p class="mt-2 text-sm font-medium text-amber-950">
+                  Carrossel: sem arquivo único para baixar
+                </p>
+                <p class="mt-2 text-xs leading-5 text-amber-900">
+                  A peça continua disponível pelo link.
+                </p>
+                <button class="btn outline mt-4 w-full">⌕ Anexar arquivo original</button>
+              </div>
+              <button class="btn primary mt-6 w-full">Salvar alterações</button>
+            </div>
+          </div>
+          <div class="phone frame min-h-[560px] overflow-hidden bg-white">
+            <header class="flex h-14 items-center justify-between border-b px-4">
+              <b>Conteúdos</b><span>☰</span>
+            </header>
+            <div class="space-y-3 p-4">
+              <article class="rounded-xl border p-4">
+                <div class="flex justify-between gap-3">
+                  <b class="text-sm">Peça adicionada pelo Instagram</b
+                  ><span class="badge shrink-0 bg-amber-100 text-amber-900">Processando</span>
+                </div>
+                <p class="mt-2 text-xs text-[#6b7280]">Instagram · Preparando a peça…</p>
+                <div class="mt-3 h-2 rounded-full bg-[#f4f4f5]">
+                  <div class="h-full w-1/2 rounded-full bg-[#c51414]"></div>
+                </div>
+                <button class="btn outline mt-3 w-full">Abrir</button>
+              </article>
+              <article class="rounded-xl border p-4">
+                <div class="flex justify-between gap-3">
+                  <b class="text-sm">Peça adicionada pelo Instagram</b
+                  ><span class="badge shrink-0 bg-green-100 text-green-800">Pronto</span>
+                </div>
+                <p class="mt-2 text-xs text-[#6b7280]">Instagram · Peça-link</p>
+                <button class="btn outline mt-3 w-full">Abrir</button>
+              </article>
+              <p class="px-2 text-center text-[11px] leading-4 text-[#6b7280]">
+                Recomendação: a lista continua limpa; o motivo completo vive na ficha.
+              </p>
+            </div>
+          </div>
         </div>
       </section>
     </main>
diff --git a/docs/plans/central-conteudos-secao-home-ui-design.html b/docs/plans/central-conteudos-secao-home-ui-design.html
index a5e351f2..902c6d4e 100644
--- a/docs/plans/central-conteudos-secao-home-ui-design.html
+++ b/docs/plans/central-conteudos-secao-home-ui-design.html
@@ -6,82 +6,553 @@
     <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
     <title>Design — S36 · Central local na home</title>
     <style type="text/tailwindcss">
-      @theme { --font-sans: Arimo, Arial, sans-serif; }
-      :root { --red:#a21c1c;--dark:#47130e;--yellow:#ffe607;--cream:#fff8f2;--band:#ebe9e9;--surface:#f9faff;--muted:#6c615e;--line:rgb(0 0 0/.12);--display:'Exo 2','Arial Black',sans-serif; }
-      *{box-sizing:border-box}.display{font-family:var(--display)}
-      .board{background:#dedbd8;background-image:radial-gradient(rgb(24 78 146/.09) .7px,transparent .7px);background-size:18px 18px}
-      .frame{box-shadow:0 22px 60px rgb(39 25 22/.13)}.desktop{width:1280px}.phone{width:390px;border-radius:28px}.scene:after{content:'';height:1px;flex:1;background:#c6c1bd}
-      .preview{overflow:hidden;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 8px 24px rgb(71 19 14/.07)}
-      .asset{position:relative;display:grid;place-items:center;background:linear-gradient(135deg,#e6e2df,#f7f5f3);color:#77706c;text-align:center;font-size:10px;font-weight:800;letter-spacing:.04em}
-      .tag{display:inline-flex;align-items:center;border-radius:999px;background:#eef4fb;padding:4px 8px;color:#184e92;font-size:11px;font-weight:800}.local{background:#fff3c4;color:#6b5100}
-      .cta{display:inline-flex;min-height:48px;align-items:center;justify-content:center;gap:8px;border-radius:10px;background:#ffe607;padding:10px 18px;color:#171000;font-family:var(--display);font-size:14px;font-weight:900;box-shadow:0 4px 0 #cfb900}
-      .secondary{display:inline-flex;min-height:36px;align-items:center;gap:6px;border-radius:8px;padding:6px 8px;color:#a21c1c;font-size:12px;font-weight:800;text-decoration:underline;text-underline-offset:4px}
-      .surround{border-bottom:1px solid var(--line);padding:26px 40px;text-align:center}.eyebrow{font-size:12px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#a21c1c}
-      .skeleton{background:linear-gradient(100deg,#eee 20%,#ddd 38%,#eee 56%);background-size:220% 100%}
+      @theme {
+        --font-sans: Arimo, Arial, sans-serif;
+      }
+      :root {
+        --red: #a21c1c;
+        --dark: #47130e;
+        --yellow: #ffe607;
+        --cream: #fff8f2;
+        --band: #ebe9e9;
+        --surface: #f9faff;
+        --muted: #6c615e;
+        --line: rgb(0 0 0/0.12);
+        --display: 'Exo 2', 'Arial Black', sans-serif;
+      }
+      * {
+        box-sizing: border-box;
+      }
+      .display {
+        font-family: var(--display);
+      }
+      .board {
+        background: #dedbd8;
+        background-image: radial-gradient(rgb(24 78 146/0.09) 0.7px, transparent 0.7px);
+        background-size: 18px 18px;
+      }
+      .frame {
+        box-shadow: 0 22px 60px rgb(39 25 22/0.13);
+      }
+      .desktop {
+        width: 1280px;
+      }
+      .phone {
+        width: 390px;
+        border-radius: 28px;
+      }
+      .scene:after {
+        content: '';
+        height: 1px;
+        flex: 1;
+        background: #c6c1bd;
+      }
+      .preview {
+        overflow: hidden;
+        border: 1px solid var(--line);
+        border-radius: 14px;
+        background: #fff;
+        box-shadow: 0 8px 24px rgb(71 19 14/0.07);
+      }
+      .asset {
+        position: relative;
+        display: grid;
+        place-items: center;
+        background: linear-gradient(135deg, #e6e2df, #f7f5f3);
+        color: #77706c;
+        text-align: center;
+        font-size: 10px;
+        font-weight: 800;
+        letter-spacing: 0.04em;
+      }
+      .tag {
+        display: inline-flex;
+        align-items: center;
+        border-radius: 999px;
+        background: #eef4fb;
+        padding: 4px 8px;
+        color: #184e92;
+        font-size: 11px;
+        font-weight: 800;
+      }
+      .local {
+        background: #fff3c4;
+        color: #6b5100;
+      }
+      .cta {
+        display: inline-flex;
+        min-height: 48px;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        border-radius: 10px;
+        background: #ffe607;
+        padding: 10px 18px;
+        color: #171000;
+        font-family: var(--display);
+        font-size: 14px;
+        font-weight: 900;
+        box-shadow: 0 4px 0 #cfb900;
+      }
+      .secondary {
+        display: inline-flex;
+        min-height: 36px;
+        align-items: center;
+        gap: 6px;
+        border-radius: 8px;
+        padding: 6px 8px;
+        color: #a21c1c;
+        font-size: 12px;
+        font-weight: 800;
+        text-decoration: underline;
+        text-underline-offset: 4px;
+      }
+      .surround {
+        border-bottom: 1px solid var(--line);
+        padding: 26px 40px;
+        text-align: center;
+      }
+      .eyebrow {
+        font-size: 12px;
+        font-weight: 900;
+        letter-spacing: 0.1em;
+        text-transform: uppercase;
+        color: #a21c1c;
+      }
+      .skeleton {
+        background: linear-gradient(100deg, #eee 20%, #ddd 38%, #eee 56%);
+        background-size: 220% 100%;
+      }
     </style>
   </head>
   <body class="board min-h-screen text-black antialiased">
     <main class="mx-auto max-w-[1480px] space-y-14 px-4 py-12 md:px-8">
       <header class="max-w-3xl">
-        <span class="rounded-full bg-[#e4102f] px-3 py-1 text-xs font-bold text-white">S36 · revisão do gate</span>
+        <span class="rounded-full bg-[#e4102f] px-3 py-1 text-xs font-bold text-white"
+          >S36 · revisão do gate</span
+        >
         <h1 class="display mt-4 text-4xl font-black">A peça do lugar da pessoa vem primeiro.</h1>
-        <p class="mt-2 text-sm leading-6 text-[#6c615e]">Até três peças: município → região → recentes. Sem localização, a seção simplesmente mostra recentes — sem erro, prompt surpresa ou espera eterna.</p>
+        <p class="mt-2 text-sm leading-6 text-[#6c615e]">
+          Até três peças: município → região → recentes. Sem localização, a seção simplesmente
+          mostra recentes — sem erro, prompt surpresa ou espera eterna.
+        </p>
       </header>
 
       <section>
-        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 01</span><h2>Localizada · desktop 1280 · município, região e complemento recente</h2></div>
+        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
+          <span>CENA 01</span>
+          <h2>Localizada · desktop 1280 · município, região e complemento recente</h2>
+        </div>
         <div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white">
-          <div class="surround bg-[#fff8f2]"><p class="eyebrow">Faça parte</p><h3 class="display mt-1 text-2xl font-black">Mostre que você está com Solla</h3><div class="mx-auto mt-4 grid max-w-3xl grid-cols-6 gap-3"><div class="h-20 rounded-lg bg-[#ebe9e9]"></div><div class="h-20 rounded-lg bg-[#ebe9e9]"></div><div class="h-20 rounded-lg bg-[#ebe9e9]"></div><div class="h-20 rounded-lg bg-[#ebe9e9]"></div><div class="h-20 rounded-lg bg-[#ebe9e9]"></div><div class="h-20 rounded-lg bg-[#ebe9e9]"></div></div><p class="mt-3 text-[11px] font-bold text-[#6c615e]">SEÇÃO EXISTENTE · CARDS PERSONALIZÁVEIS</p></div>
-          <section class="relative overflow-hidden border-b border-black/10 bg-white px-10 py-16"><div class="absolute -top-24 -right-20 size-64 rounded-full bg-[#ffe607]/35"></div><div class="absolute -bottom-28 -left-24 size-64 rounded-full bg-[#e4102f]/8"></div><div class="relative mx-auto max-w-[1080px]">
-            <div class="mx-auto max-w-2xl text-center"><p class="eyebrow">Central de Conteúdos</p><h2 class="display mt-2 text-4xl font-black tracking-tight">Peça voto pra Solla 1313</h2><p class="mx-auto mt-3 max-w-xl text-base leading-6 text-[#6c615e]">Comece pelo material do seu território e mande para quem você conhece.</p><div class="mt-3 flex items-center justify-center gap-2"><span class="tag local">⌖ Para seu município</span><span class="text-[11px] text-[#6c615e]">Localização usada só nesta visita</span></div></div>
-            <div class="mt-9 grid grid-cols-3 gap-6">
-              <article class="preview"><div class="asset aspect-video">NEEDS ASSET · FOTO REAL</div><div class="p-4"><div class="flex flex-wrap gap-1"><span class="tag">Foto</span><span class="tag local">Do seu município</span></div><h3 class="mt-2 font-extrabold">Título da peça local</h3><p class="mt-1 text-xs text-[#6c615e]">Seu município · Tema</p><a class="mt-4 inline-block text-xs font-bold text-[#a21c1c]">Ver esta peça →</a></div></article>
-              <article class="preview"><div class="asset relative aspect-video"><span>NEEDS ASSET · POSTER REAL</span><span class="absolute grid size-12 place-items-center rounded-full bg-[#ffe607] text-xl text-black shadow">▶</span><span class="absolute right-3 bottom-3 rounded bg-black/70 px-2 py-1 text-[10px] text-white">Tocar para carregar</span></div><div class="p-4"><div class="flex flex-wrap gap-1"><span class="tag">Vídeo</span><span class="tag local">Da sua região</span></div><h3 class="mt-2 font-extrabold">Título da peça regional</h3><p class="mt-1 text-xs text-[#6c615e]">Sua região · sem autoplay</p><a class="mt-4 inline-block text-xs font-bold text-[#a21c1c]">Ver esta peça →</a></div></article>
-              <article class="preview"><div class="asset relative aspect-video"><span>NEEDS ASSET · CAPA REAL</span><span class="absolute grid size-12 place-items-center rounded-full bg-[#ffe607] text-xl text-black shadow">▶</span></div><div class="p-4"><div class="flex flex-wrap gap-1"><span class="tag">Áudio</span><span class="tag">Mais recente</span></div><h3 class="mt-2 font-extrabold">Mensagem recente para compartilhar</h3><p class="mt-1 text-xs text-[#6c615e]">Completa a seleção local</p><a class="mt-4 inline-block text-xs font-bold text-[#a21c1c]">Ver esta peça →</a></div></article>
+          <div class="surround bg-[#fff8f2]">
+            <p class="eyebrow">Faça parte</p>
+            <h3 class="display mt-1 text-2xl font-black">Mostre que você está com Solla</h3>
+            <div class="mx-auto mt-4 grid max-w-3xl grid-cols-6 gap-3">
+              <div class="h-20 rounded-lg bg-[#ebe9e9]"></div>
+              <div class="h-20 rounded-lg bg-[#ebe9e9]"></div>
+              <div class="h-20 rounded-lg bg-[#ebe9e9]"></div>
+              <div class="h-20 rounded-lg bg-[#ebe9e9]"></div>
+              <div class="h-20 rounded-lg bg-[#ebe9e9]"></div>
+              <div class="h-20 rounded-lg bg-[#ebe9e9]"></div>
             </div>
-            <div class="mt-9 text-center"><a class="cta" href="/conteudos">Ver todas as peças →</a><p class="mt-3 text-xs text-[#6c615e]">Nenhum card personalizável entra nesta amostra.</p></div>
-          </div></section>
-          <div class="surround bg-[#ebe9e9]"><p class="eyebrow">Apoie e acompanhe</p><h3 class="display mt-1 text-2xl font-black">Receba as novidades da campanha</h3><div class="mx-auto mt-5 h-20 max-w-2xl rounded-xl border bg-white"></div></div>
+            <p class="mt-3 text-[11px] font-bold text-[#6c615e]">
+              SEÇÃO EXISTENTE · CARDS PERSONALIZÁVEIS
+            </p>
+          </div>
+          <section class="relative overflow-hidden border-b border-black/10 bg-white px-10 py-16">
+            <div class="absolute -top-24 -right-20 size-64 rounded-full bg-[#ffe607]/35"></div>
+            <div class="absolute -bottom-28 -left-24 size-64 rounded-full bg-[#e4102f]/8"></div>
+            <div class="relative mx-auto max-w-[1080px]">
+              <div class="mx-auto max-w-2xl text-center">
+                <p class="eyebrow">Central de Conteúdos</p>
+                <h2 class="display mt-2 text-4xl font-black tracking-tight">
+                  Peça voto pra Solla 1313
+                </h2>
+                <p class="mx-auto mt-3 max-w-xl text-base leading-6 text-[#6c615e]">
+                  Comece pelo material do seu território e mande para quem você conhece.
+                </p>
+                <div class="mt-3 flex items-center justify-center gap-2">
+                  <span class="tag local">⌖ Para seu município</span
+                  ><span class="text-[11px] text-[#6c615e]">Localização usada só nesta visita</span>
+                </div>
+              </div>
+              <div class="mt-9 grid grid-cols-3 gap-6">
+                <article class="preview">
+                  <div class="asset aspect-video">NEEDS ASSET · FOTO REAL</div>
+                  <div class="p-4">
+                    <div class="flex flex-wrap gap-1">
+                      <span class="tag">Foto</span><span class="tag local">Do seu município</span>
+                    </div>
+                    <h3 class="mt-2 font-extrabold">Título da peça local</h3>
+                    <p class="mt-1 text-xs text-[#6c615e]">Seu município · Tema</p>
+                    <a class="mt-4 inline-block text-xs font-bold text-[#a21c1c]"
+                      >Ver esta peça →</a
+                    >
+                  </div>
+                </article>
+                <article class="preview">
+                  <div class="asset relative aspect-video">
+                    <span>NEEDS ASSET · POSTER REAL</span
+                    ><span
+                      class="absolute grid size-12 place-items-center rounded-full bg-[#ffe607] text-xl text-black shadow"
+                      >▶</span
+                    ><span
+                      class="absolute right-3 bottom-3 rounded bg-black/70 px-2 py-1 text-[10px] text-white"
+                      >Tocar para carregar</span
+                    >
+                  </div>
+                  <div class="p-4">
+                    <div class="flex flex-wrap gap-1">
+                      <span class="tag">Vídeo</span><span class="tag local">Da sua região</span>
+                    </div>
+                    <h3 class="mt-2 font-extrabold">Título da peça regional</h3>
+                    <p class="mt-1 text-xs text-[#6c615e]">Sua região · sem autoplay</p>
+                    <a class="mt-4 inline-block text-xs font-bold text-[#a21c1c]"
+                      >Ver esta peça →</a
+                    >
+                  </div>
+                </article>
+                <article class="preview">
+                  <div class="asset relative aspect-video">
+                    <span>NEEDS ASSET · CAPA REAL</span
+                    ><span
+                      class="absolute grid size-12 place-items-center rounded-full bg-[#ffe607] text-xl text-black shadow"
+                      >▶</span
+                    >
+                  </div>
+                  <div class="p-4">
+                    <div class="flex flex-wrap gap-1">
+                      <span class="tag">Áudio</span><span class="tag">Mais recente</span>
+                    </div>
+                    <h3 class="mt-2 font-extrabold">Mensagem recente para compartilhar</h3>
+                    <p class="mt-1 text-xs text-[#6c615e]">Completa a seleção local</p>
+                    <a class="mt-4 inline-block text-xs font-bold text-[#a21c1c]"
+                      >Ver esta peça →</a
+                    >
+                  </div>
+                </article>
+              </div>
+              <div class="mt-9 text-center">
+                <a class="cta" href="/conteudos">Ver todas as peças →</a>
+                <p class="mt-3 text-xs text-[#6c615e]">
+                  Nenhum card personalizável entra nesta amostra.
+                </p>
+              </div>
+            </div>
+          </section>
+          <div class="surround bg-[#ebe9e9]">
+            <p class="eyebrow">Apoie e acompanhe</p>
+            <h3 class="display mt-1 text-2xl font-black">Receba as novidades da campanha</h3>
+            <div class="mx-auto mt-5 h-20 max-w-2xl rounded-xl border bg-white"></div>
+          </div>
         </div>
       </section>
 
       <section>
-        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 02</span><h2>Localizada · mobile 390 · recorte discreto, sem pedir GPS ao carregar</h2></div>
-        <div class="phone frame mx-auto overflow-hidden bg-white"><div class="border-b bg-[#fff8f2] px-5 py-7 text-center"><p class="eyebrow text-[10px]">Faça parte</p><h3 class="display mt-1 text-xl font-black">Mostre que você está com Solla</h3><div class="mt-4 grid grid-cols-3 gap-2"><div class="h-16 rounded bg-[#ebe9e9]"></div><div class="h-16 rounded bg-[#ebe9e9]"></div><div class="h-16 rounded bg-[#ebe9e9]"></div></div></div>
-          <section class="relative overflow-hidden border-b px-5 py-10"><div class="absolute -top-16 -right-20 size-48 rounded-full bg-[#ffe607]/35"></div><div class="relative text-center"><p class="eyebrow text-[10px]">Central de Conteúdos</p><h2 class="display mt-2 text-[30px] font-black leading-[1.05]">Peça voto pra<br/>Solla 1313</h2><p class="mt-3 text-sm leading-5 text-[#6c615e]">Material do seu território para compartilhar.</p><span class="tag local mt-3">⌖ Para seu município</span></div>
-            <div class="relative mt-6 space-y-4"><article class="preview grid grid-cols-[124px_1fr]"><div class="asset min-h-36">NEEDS ASSET<br/>FOTO REAL</div><div class="p-4 text-left"><span class="tag local">Do seu município</span><h3 class="mt-2 text-sm font-extrabold">Título da peça local</h3><a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a></div></article><article class="preview grid grid-cols-[124px_1fr]"><div class="asset relative min-h-36"><span>NEEDS ASSET<br/>POSTER REAL</span><span class="absolute grid size-10 place-items-center rounded-full bg-[#ffe607] text-black">▶</span></div><div class="p-4 text-left"><span class="tag local">Da sua região</span><h3 class="mt-2 text-sm font-extrabold">Título da peça regional</h3><p class="mt-1 text-[11px] text-[#6c615e]">Só carrega no toque</p><a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a></div></article><article class="preview grid grid-cols-[124px_1fr]"><div class="asset min-h-36">NEEDS ASSET<br/>CAPA REAL</div><div class="p-4 text-left"><span class="tag">Mais recente</span><h3 class="mt-2 text-sm font-extrabold">Mensagem recente</h3><a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a></div></article></div>
-            <a class="cta relative mt-7 w-full" href="/conteudos">Ver todas as peças →</a><p class="relative mt-3 text-center text-[11px] leading-4 text-[#6c615e]">A localização não é guardada. Cards personalizáveis ficam na seção anterior.</p>
-          </section><div class="bg-[#ebe9e9] px-5 py-8 text-center"><p class="eyebrow text-[10px]">Apoie e acompanhe</p><h3 class="display mt-1 text-xl font-black">Receba as novidades</h3><div class="mt-4 h-20 rounded-xl border bg-white"></div></div>
+        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
+          <span>CENA 02</span>
+          <h2>Localizada · mobile 390 · recorte discreto, sem pedir GPS ao carregar</h2>
+        </div>
+        <div class="phone frame mx-auto overflow-hidden bg-white">
+          <div class="border-b bg-[#fff8f2] px-5 py-7 text-center">
+            <p class="eyebrow text-[10px]">Faça parte</p>
+            <h3 class="display mt-1 text-xl font-black">Mostre que você está com Solla</h3>
+            <div class="mt-4 grid grid-cols-3 gap-2">
+              <div class="h-16 rounded bg-[#ebe9e9]"></div>
+              <div class="h-16 rounded bg-[#ebe9e9]"></div>
+              <div class="h-16 rounded bg-[#ebe9e9]"></div>
+            </div>
+          </div>
+          <section class="relative overflow-hidden border-b px-5 py-10">
+            <div class="absolute -top-16 -right-20 size-48 rounded-full bg-[#ffe607]/35"></div>
+            <div class="relative text-center">
+              <p class="eyebrow text-[10px]">Central de Conteúdos</p>
+              <h2 class="display mt-2 text-[30px] font-black leading-[1.05]">
+                Peça voto pra<br />Solla 1313
+              </h2>
+              <p class="mt-3 text-sm leading-5 text-[#6c615e]">
+                Material do seu território para compartilhar.
+              </p>
+              <span class="tag local mt-3">⌖ Para seu município</span>
+            </div>
+            <div class="relative mt-6 space-y-4">
+              <article class="preview grid grid-cols-[124px_1fr]">
+                <div class="asset min-h-36">NEEDS ASSET<br />FOTO REAL</div>
+                <div class="p-4 text-left">
+                  <span class="tag local">Do seu município</span>
+                  <h3 class="mt-2 text-sm font-extrabold">Título da peça local</h3>
+                  <a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a>
+                </div>
+              </article>
+              <article class="preview grid grid-cols-[124px_1fr]">
+                <div class="asset relative min-h-36">
+                  <span>NEEDS ASSET<br />POSTER REAL</span
+                  ><span
+                    class="absolute grid size-10 place-items-center rounded-full bg-[#ffe607] text-black"
+                    >▶</span
+                  >
+                </div>
+                <div class="p-4 text-left">
+                  <span class="tag local">Da sua região</span>
+                  <h3 class="mt-2 text-sm font-extrabold">Título da peça regional</h3>
+                  <p class="mt-1 text-[11px] text-[#6c615e]">Só carrega no toque</p>
+                  <a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a>
+                </div>
+              </article>
+              <article class="preview grid grid-cols-[124px_1fr]">
+                <div class="asset min-h-36">NEEDS ASSET<br />CAPA REAL</div>
+                <div class="p-4 text-left">
+                  <span class="tag">Mais recente</span>
+                  <h3 class="mt-2 text-sm font-extrabold">Mensagem recente</h3>
+                  <a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a>
+                </div>
+              </article>
+            </div>
+            <a class="cta relative mt-7 w-full" href="/conteudos">Ver todas as peças →</a>
+            <p class="relative mt-3 text-center text-[11px] leading-4 text-[#6c615e]">
+              A localização não é guardada. Cards personalizáveis ficam na seção anterior.
+            </p>
+          </section>
+          <div class="bg-[#ebe9e9] px-5 py-8 text-center">
+            <p class="eyebrow text-[10px]">Apoie e acompanhe</p>
+            <h3 class="display mt-1 text-xl font-black">Receba as novidades</h3>
+            <div class="mt-4 h-20 rounded-xl border bg-white"></div>
+          </div>
         </div>
       </section>
 
       <section>
-        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 03</span><h2>Sem localização ou fora da Bahia · recentes, sem erro e sem insistência</h2></div>
+        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
+          <span>CENA 03</span>
+          <h2>Sem localização ou fora da Bahia · recentes, sem erro e sem insistência</h2>
+        </div>
         <div class="grid gap-8 lg:grid-cols-[1fr_390px]">
-          <div class="frame overflow-hidden rounded-xl bg-white"><section class="relative overflow-hidden px-10 py-12"><div class="absolute -top-24 -right-20 size-64 rounded-full bg-[#ffe607]/35"></div><div class="relative"><div class="mx-auto max-w-2xl text-center"><p class="eyebrow">Central de Conteúdos</p><h2 class="display mt-2 text-4xl font-black">Peça voto pra Solla 1313</h2><p class="mt-3 text-base text-[#6c615e]">Veja as peças mais recentes e escolha uma para compartilhar.</p><span class="tag mt-3">Seleção recente</span></div><div class="mt-8 grid grid-cols-3 gap-5"><article class="preview"><div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div><div class="p-4"><span class="tag">Foto</span><h3 class="mt-2 font-extrabold">Peça recente</h3></div></article><article class="preview"><div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div><div class="p-4"><span class="tag">Vídeo</span><h3 class="mt-2 font-extrabold">Outra peça recente</h3></div></article><article class="preview"><div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div><div class="p-4"><span class="tag">Áudio</span><h3 class="mt-2 font-extrabold">Mensagem recente</h3></div></article></div><div class="mt-8 text-center"><a class="cta" href="/conteudos">Ver todas as peças →</a><div><button class="secondary mt-2">⌖ Usar minha localização</button></div><p class="text-[11px] text-[#6c615e]">Opcional e secundário. A seção já funciona sem isso.</p></div></div></section></div>
-          <div class="phone frame overflow-hidden bg-white"><section class="relative overflow-hidden px-5 py-10 text-center"><div class="absolute -top-16 -right-20 size-48 rounded-full bg-[#ffe607]/35"></div><div class="relative"><p class="eyebrow text-[10px]">Central de Conteúdos</p><h2 class="display mt-2 text-[30px] font-black leading-[1.05]">Peça voto pra<br/>Solla 1313</h2><p class="mt-3 text-sm leading-5 text-[#6c615e]">Veja as peças mais recentes.</p><span class="tag mt-3">Seleção recente</span><article class="preview mt-6 text-left"><div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div><div class="p-4"><span class="tag">Foto</span><h3 class="mt-2 font-extrabold">Título da peça recente</h3><a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a></div></article><a class="cta mt-6 w-full" href="/conteudos">Ver todas as peças →</a><button class="secondary mt-3">⌖ Usar minha localização</button><p class="text-[11px] leading-4 text-[#6c615e]">Opcional. Sem prompt no carregamento.</p></div></section></div>
+          <div class="frame overflow-hidden rounded-xl bg-white">
+            <section class="relative overflow-hidden px-10 py-12">
+              <div class="absolute -top-24 -right-20 size-64 rounded-full bg-[#ffe607]/35"></div>
+              <div class="relative">
+                <div class="mx-auto max-w-2xl text-center">
+                  <p class="eyebrow">Central de Conteúdos</p>
+                  <h2 class="display mt-2 text-4xl font-black">Peça voto pra Solla 1313</h2>
+                  <p class="mt-3 text-base text-[#6c615e]">
+                    Veja as peças mais recentes e escolha uma para compartilhar.
+                  </p>
+                  <span class="tag mt-3">Seleção recente</span>
+                </div>
+                <div class="mt-8 grid grid-cols-3 gap-5">
+                  <article class="preview">
+                    <div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div>
+                    <div class="p-4">
+                      <span class="tag">Foto</span>
+                      <h3 class="mt-2 font-extrabold">Peça recente</h3>
+                    </div>
+                  </article>
+                  <article class="preview">
+                    <div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div>
+                    <div class="p-4">
+                      <span class="tag">Vídeo</span>
+                      <h3 class="mt-2 font-extrabold">Outra peça recente</h3>
+                    </div>
+                  </article>
+                  <article class="preview">
+                    <div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div>
+                    <div class="p-4">
+                      <span class="tag">Áudio</span>
+                      <h3 class="mt-2 font-extrabold">Mensagem recente</h3>
+                    </div>
+                  </article>
+                </div>
+                <div class="mt-8 text-center">
+                  <a class="cta" href="/conteudos">Ver todas as peças →</a>
+                  <div><button class="secondary mt-2">⌖ Usar minha localização</button></div>
+                  <p class="text-[11px] text-[#6c615e]">
+                    Opcional e secundário. A seção já funciona sem isso.
+                  </p>
+                </div>
+              </div>
+            </section>
+          </div>
+          <div class="phone frame overflow-hidden bg-white">
+            <section class="relative overflow-hidden px-5 py-10 text-center">
+              <div class="absolute -top-16 -right-20 size-48 rounded-full bg-[#ffe607]/35"></div>
+              <div class="relative">
+                <p class="eyebrow text-[10px]">Central de Conteúdos</p>
+                <h2 class="display mt-2 text-[30px] font-black leading-[1.05]">
+                  Peça voto pra<br />Solla 1313
+                </h2>
+                <p class="mt-3 text-sm leading-5 text-[#6c615e]">Veja as peças mais recentes.</p>
+                <span class="tag mt-3">Seleção recente</span>
+                <article class="preview mt-6 text-left">
+                  <div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div>
+                  <div class="p-4">
+                    <span class="tag">Foto</span>
+                    <h3 class="mt-2 font-extrabold">Título da peça recente</h3>
+                    <a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a>
+                  </div>
+                </article>
+                <a class="cta mt-6 w-full" href="/conteudos">Ver todas as peças →</a
+                ><button class="secondary mt-3">⌖ Usar minha localização</button>
+                <p class="text-[11px] leading-4 text-[#6c615e]">
+                  Opcional. Sem prompt no carregamento.
+                </p>
+              </div>
+            </section>
+          </div>
         </div>
       </section>
 
       <section>
-        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 04</span><h2>Resolução da localização · transitória, não bloqueia e termina em recentes</h2></div>
+        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
+          <span>CENA 04</span>
+          <h2>Resolução da localização · transitória, não bloqueia e termina em recentes</h2>
+        </div>
         <div class="grid gap-6 lg:grid-cols-3">
-          <article class="frame rounded-xl bg-white p-6"><span class="rounded-full bg-[#fff3c4] px-2 py-1 text-[10px] font-black text-[#6b5100]">INSTANTE INICIAL</span><h3 class="display mt-3 text-xl font-black">Peça voto pra Solla 1313</h3><p class="mt-2 text-sm leading-5 text-[#6c615e]">A home já está utilizável. Só esta amostra define a melhor seleção.</p><div class="mt-5 grid grid-cols-3 gap-2"><div class="skeleton aspect-video rounded-lg"></div><div class="skeleton aspect-video rounded-lg"></div><div class="skeleton aspect-video rounded-lg"></div></div><p class="mt-4 text-xs font-bold text-[#6c615e]">Sem modal, sem overlay e sem prompt automático.</p></article>
-          <article class="frame rounded-xl bg-white p-6"><span class="rounded-full bg-green-100 px-2 py-1 text-[10px] font-black text-green-800">LOCALIZAÇÃO ACESSÍVEL</span><h3 class="display mt-3 text-xl font-black">Seleção do seu território</h3><p class="mt-2 text-sm leading-5 text-[#6c615e]">GPS já acessível; senão, recorte aproximado por IP. A interface entrega o mesmo resultado: município → região → recentes.</p><div class="mt-5 flex gap-2"><span class="tag local">Do seu município</span><span class="tag local">Da sua região</span></div><p class="mt-5 text-xs text-[#6c615e]">Nada é guardado, registrado ou usado fora desta seção.</p></article>
-          <article class="frame rounded-xl bg-white p-6"><span class="rounded-full bg-[#eef4fb] px-2 py-1 text-[10px] font-black text-[#184e92]">SEM SINAL ÚTIL</span><h3 class="display mt-3 text-xl font-black">Seleção recente</h3><p class="mt-2 text-sm leading-5 text-[#6c615e]">A espera termina e as peças recentes aparecem. Nenhum erro é mostrado.</p><div class="mt-5 h-24 rounded-lg border bg-[#f9faff] p-3 text-xs text-[#6c615e]">Preview recente disponível</div><p class="mt-4 text-xs font-bold text-[#184e92]">Nunca há spinner eterno.</p></article>
+          <article class="frame rounded-xl bg-white p-6">
+            <span class="rounded-full bg-[#fff3c4] px-2 py-1 text-[10px] font-black text-[#6b5100]"
+              >INSTANTE INICIAL</span
+            >
+            <h3 class="display mt-3 text-xl font-black">Peça voto pra Solla 1313</h3>
+            <p class="mt-2 text-sm leading-5 text-[#6c615e]">
+              A home já está utilizável. Só esta amostra define a melhor seleção.
+            </p>
+            <div class="mt-5 grid grid-cols-3 gap-2">
+              <div class="skeleton aspect-video rounded-lg"></div>
+              <div class="skeleton aspect-video rounded-lg"></div>
+              <div class="skeleton aspect-video rounded-lg"></div>
+            </div>
+            <p class="mt-4 text-xs font-bold text-[#6c615e]">
+              Sem modal, sem overlay e sem prompt automático.
+            </p>
+          </article>
+          <article class="frame rounded-xl bg-white p-6">
+            <span class="rounded-full bg-green-100 px-2 py-1 text-[10px] font-black text-green-800"
+              >LOCALIZAÇÃO ACESSÍVEL</span
+            >
+            <h3 class="display mt-3 text-xl font-black">Seleção do seu território</h3>
+            <p class="mt-2 text-sm leading-5 text-[#6c615e]">
+              GPS já acessível; senão, recorte aproximado por IP. A interface entrega o mesmo
+              resultado: município → região → recentes.
+            </p>
+            <div class="mt-5 flex gap-2">
+              <span class="tag local">Do seu município</span
+              ><span class="tag local">Da sua região</span>
+            </div>
+            <p class="mt-5 text-xs text-[#6c615e]">
+              Nada é guardado, registrado ou usado fora desta seção.
+            </p>
+          </article>
+          <article class="frame rounded-xl bg-white p-6">
+            <span class="rounded-full bg-[#eef4fb] px-2 py-1 text-[10px] font-black text-[#184e92]"
+              >SEM SINAL ÚTIL</span
+            >
+            <h3 class="display mt-3 text-xl font-black">Seleção recente</h3>
+            <p class="mt-2 text-sm leading-5 text-[#6c615e]">
+              A espera termina e as peças recentes aparecem. Nenhum erro é mostrado.
+            </p>
+            <div class="mt-5 h-24 rounded-lg border bg-[#f9faff] p-3 text-xs text-[#6c615e]">
+              Preview recente disponível
+            </div>
+            <p class="mt-4 text-xs font-bold text-[#184e92]">Nunca há spinner eterno.</p>
+          </article>
         </div>
       </section>
 
       <section>
-        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 05</span><h2>Uma peça publicada · sem lacunas, independentemente da localização</h2></div>
-        <div class="grid gap-8 lg:grid-cols-[1fr_390px]"><div class="frame overflow-hidden rounded-xl bg-white"><section class="relative overflow-hidden px-10 py-12"><div class="absolute -top-24 -right-20 size-64 rounded-full bg-[#ffe607]/35"></div><div class="relative grid grid-cols-[1fr_360px] items-center gap-10"><div><p class="eyebrow">Central de Conteúdos</p><h2 class="display mt-2 text-4xl font-black">Peça voto pra Solla 1313</h2><p class="mt-3 max-w-lg text-base leading-6 text-[#6c615e]">Uma peça oficial já está pronta para você compartilhar.</p><a class="cta mt-6" href="/conteudos">Ver todas as peças →</a></div><article class="preview"><div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div><div class="p-4"><span class="tag">Foto</span><h3 class="mt-2 font-extrabold">Título da única peça publicada</h3><a class="mt-3 inline-block text-xs font-bold text-[#a21c1c]">Ver esta peça →</a></div></article></div></section></div>
-          <div class="phone frame overflow-hidden bg-white"><section class="relative overflow-hidden px-5 py-10 text-center"><div class="absolute -top-16 -right-20 size-48 rounded-full bg-[#ffe607]/35"></div><div class="relative"><p class="eyebrow text-[10px]">Central de Conteúdos</p><h2 class="display mt-2 text-[30px] font-black leading-[1.05]">Peça voto pra<br/>Solla 1313</h2><p class="mt-3 text-sm leading-5 text-[#6c615e]">Uma peça oficial já está pronta.</p><article class="preview mt-6 text-left"><div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div><div class="p-4"><span class="tag">Foto</span><h3 class="mt-2 font-extrabold">Título da única peça publicada</h3><a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a></div></article><a class="cta mt-6 w-full" href="/conteudos">Ver todas as peças →</a></div></section></div></div>
+        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
+          <span>CENA 05</span>
+          <h2>Uma peça publicada · sem lacunas, independentemente da localização</h2>
+        </div>
+        <div class="grid gap-8 lg:grid-cols-[1fr_390px]">
+          <div class="frame overflow-hidden rounded-xl bg-white">
+            <section class="relative overflow-hidden px-10 py-12">
+              <div class="absolute -top-24 -right-20 size-64 rounded-full bg-[#ffe607]/35"></div>
+              <div class="relative grid grid-cols-[1fr_360px] items-center gap-10">
+                <div>
+                  <p class="eyebrow">Central de Conteúdos</p>
+                  <h2 class="display mt-2 text-4xl font-black">Peça voto pra Solla 1313</h2>
+                  <p class="mt-3 max-w-lg text-base leading-6 text-[#6c615e]">
+                    Uma peça oficial já está pronta para você compartilhar.
+                  </p>
+                  <a class="cta mt-6" href="/conteudos">Ver todas as peças →</a>
+                </div>
+                <article class="preview">
+                  <div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div>
+                  <div class="p-4">
+                    <span class="tag">Foto</span>
+                    <h3 class="mt-2 font-extrabold">Título da única peça publicada</h3>
+                    <a class="mt-3 inline-block text-xs font-bold text-[#a21c1c]"
+                      >Ver esta peça →</a
+                    >
+                  </div>
+                </article>
+              </div>
+            </section>
+          </div>
+          <div class="phone frame overflow-hidden bg-white">
+            <section class="relative overflow-hidden px-5 py-10 text-center">
+              <div class="absolute -top-16 -right-20 size-48 rounded-full bg-[#ffe607]/35"></div>
+              <div class="relative">
+                <p class="eyebrow text-[10px]">Central de Conteúdos</p>
+                <h2 class="display mt-2 text-[30px] font-black leading-[1.05]">
+                  Peça voto pra<br />Solla 1313
+                </h2>
+                <p class="mt-3 text-sm leading-5 text-[#6c615e]">
+                  Uma peça oficial já está pronta.
+                </p>
+                <article class="preview mt-6 text-left">
+                  <div class="asset aspect-video">NEEDS ASSET · PREVIEW REAL</div>
+                  <div class="p-4">
+                    <span class="tag">Foto</span>
+                    <h3 class="mt-2 font-extrabold">Título da única peça publicada</h3>
+                    <a class="mt-3 block text-xs font-bold text-[#a21c1c]">Ver peça →</a>
+                  </div>
+                </article>
+                <a class="cta mt-6 w-full" href="/conteudos">Ver todas as peças →</a>
+              </div>
+            </section>
+          </div>
+        </div>
       </section>
 
       <section>
-        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]"><span>CENA 06</span><h2>Zero peças · seção inteira ausente (fail-closed)</h2></div>
-        <div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white"><div class="surround bg-[#fff8f2]"><p class="eyebrow">Faça parte</p><h3 class="display mt-1 text-2xl font-black">Mostre que você está com Solla</h3><div class="mx-auto mt-5 h-20 max-w-3xl rounded-xl bg-[#ebe9e9]"></div></div><div class="flex h-16 items-center justify-center border-b border-dashed bg-white text-xs font-bold text-[#6c615e]">A SEÇÃO DA CENTRAL NÃO É RENDERIZADA · SEM LOCALIZAÇÃO, VAZIO OU CTA</div><div class="surround bg-[#ebe9e9]"><p class="eyebrow">Apoie e acompanhe</p><h3 class="display mt-1 text-2xl font-black">Receba as novidades da campanha</h3><div class="mx-auto mt-5 h-20 max-w-2xl rounded-xl border bg-white"></div></div></div>
-        <div class="phone frame mx-auto mt-8 overflow-hidden bg-white"><div class="border-b bg-[#fff8f2] px-5 py-7 text-center"><p class="eyebrow text-[10px]">Faça parte</p><h3 class="display mt-1 text-xl font-black">Mostre que você está com Solla</h3><div class="mt-4 h-16 rounded bg-[#ebe9e9]"></div></div><div class="flex h-14 items-center justify-center border-b border-dashed text-[10px] font-bold text-[#6c615e]">CENTRAL AUSENTE</div><div class="bg-[#ebe9e9] px-5 py-8 text-center"><p class="eyebrow text-[10px]">Apoie e acompanhe</p><h3 class="display mt-1 text-xl font-black">Receba as novidades</h3><div class="mt-4 h-20 rounded-xl border bg-white"></div></div></div>
+        <div class="scene mb-3 flex items-center gap-3 text-xs font-bold text-[#6c615e]">
+          <span>CENA 06</span>
+          <h2>Zero peças · seção inteira ausente (fail-closed)</h2>
+        </div>
+        <div class="desktop frame mx-auto overflow-hidden rounded-xl bg-white">
+          <div class="surround bg-[#fff8f2]">
+            <p class="eyebrow">Faça parte</p>
+            <h3 class="display mt-1 text-2xl font-black">Mostre que você está com Solla</h3>
+            <div class="mx-auto mt-5 h-20 max-w-3xl rounded-xl bg-[#ebe9e9]"></div>
+          </div>
+          <div
+            class="flex h-16 items-center justify-center border-b border-dashed bg-white text-xs font-bold text-[#6c615e]"
+          >
+            A SEÇÃO DA CENTRAL NÃO É RENDERIZADA · SEM LOCALIZAÇÃO, VAZIO OU CTA
+          </div>
+          <div class="surround bg-[#ebe9e9]">
+            <p class="eyebrow">Apoie e acompanhe</p>
+            <h3 class="display mt-1 text-2xl font-black">Receba as novidades da campanha</h3>
+            <div class="mx-auto mt-5 h-20 max-w-2xl rounded-xl border bg-white"></div>
+          </div>
+        </div>
+        <div class="phone frame mx-auto mt-8 overflow-hidden bg-white">
+          <div class="border-b bg-[#fff8f2] px-5 py-7 text-center">
+            <p class="eyebrow text-[10px]">Faça parte</p>
+            <h3 class="display mt-1 text-xl font-black">Mostre que você está com Solla</h3>
+            <div class="mt-4 h-16 rounded bg-[#ebe9e9]"></div>
+          </div>
+          <div
+            class="flex h-14 items-center justify-center border-b border-dashed text-[10px] font-bold text-[#6c615e]"
+          >
+            CENTRAL AUSENTE
+          </div>
+          <div class="bg-[#ebe9e9] px-5 py-8 text-center">
+            <p class="eyebrow text-[10px]">Apoie e acompanhe</p>
+            <h3 class="display mt-1 text-xl font-black">Receba as novidades</h3>
+            <div class="mt-4 h-20 rounded-xl border bg-white"></div>
+          </div>
+        </div>
       </section>
     </main>
   </body>