style(S23,S24): formata designs hi-fi com prettier (Related #1234 #1235)

2026-11-12 22:13:05 +00:00 · 2026-09-20 20:32:31 -03:00 · 2026-09-20 20:32:31 -03:00 · 9d2be30ef2
commit 9d2be30ef2
parent a27729c6e4
2 changed files with 649 additions and 112 deletions
--- a/docs/plans/cards-time-de-voce-drawer-mobile-ui-design.html
+++ b/docs/plans/cards-time-de-voce-drawer-mobile-ui-design.html
@ -23,18 +23,41 @@
        --font-arimo: Arimo, Arial, sans-serif;
      }

-      * { box-sizing: border-box; }
-      html { color-scheme: light; }
-      body { margin: 0; font-family: var(--font-arimo); }
-      button, input { font: inherit; }
-      button { cursor: pointer; }
-      button:focus-visible, input:focus-visible, [tabindex]:focus-visible {
+      * {
+        box-sizing: border-box;
+      }
+      html {
+        color-scheme: light;
+      }
+      body {
+        margin: 0;
+        font-family: var(--font-arimo);
+      }
+      button,
+      input {
+        font: inherit;
+      }
+      button {
+        cursor: pointer;
+      }
+      button:focus-visible,
+      input:focus-visible,
+      [tabindex]:focus-visible {
        outline: 2px solid var(--pt-red);
        outline-offset: 2px;
      }
-      .font-display { font-family: var(--font-exo2); }
-      .stage-shadow { box-shadow: 0 26px 80px rgb(0 0 0 / 32%); }
-      .mobile-screen { width: 390px; height: 844px; overflow: hidden; background: #fff; }
+      .font-display {
+        font-family: var(--font-exo2);
+      }
+      .stage-shadow {
+        box-shadow: 0 26px 80px rgb(0 0 0 / 32%);
+      }
+      .mobile-screen {
+        width: 390px;
+        height: 844px;
+        overflow: hidden;
+        background: #fff;
+      }
      .drawer-full {
        position: absolute;
        inset: 0;
@ -47,7 +70,12 @@
        background: var(--background);
        color: var(--foreground);
      }
-      .swipe-handle { width: 96px; height: 4px; border-radius: 999px; background: #ebe9e9; }
+      .swipe-handle {
+        width: 96px;
+        height: 4px;
+        border-radius: 999px;
+        background: #ebe9e9;
+      }
      .control-button {
        display: inline-flex;
        width: 44px;
@ -113,7 +141,8 @@
        background: white;
        box-shadow: 0 1px 2px rgb(0 0 0 / 25%);
      }
-      .primary-button, .secondary-button {
+      .primary-button,
+      .secondary-button {
        display: inline-flex;
        min-height: 44px;
        flex: 1;
@ -124,54 +153,96 @@
        font-size: 14px;
        font-weight: 800;
      }
-      .primary-button { border: 0; background: var(--pt-red); color: white; }
+      .primary-button {
+        border: 0;
+        background: var(--pt-red);
+        color: white;
+      }
      .secondary-button {
        border: 2px solid var(--campaign-line);
        background: white;
        color: var(--pt-red);
      }
-      .gate-dash { background-image: linear-gradient(90deg, #a21c1c 50%, transparent 50%); background-size: 8px 1px; }
+      .gate-dash {
+        background-image: linear-gradient(90deg, #a21c1c 50%, transparent 50%);
+        background-size: 8px 1px;
+      }
    </style>
  </head>
  <body class="bg-zinc-950 text-zinc-100 antialiased">
-    <div class="border-b border-emerald-400/40 bg-emerald-400/10 px-4 py-2 text-center text-[11px] font-black tracking-[0.14em] text-emerald-300 uppercase">
+    <div
+      class="border-b border-emerald-400/40 bg-emerald-400/10 px-4 py-2 text-center text-[11px] font-black tracking-[0.14em] text-emerald-300 uppercase"
+    >
      Design tier: openai/gpt-5.6-sol · frontier · gate humano obrigatório
    </div>

    <main class="mx-auto max-w-[1440px] px-4 py-10 sm:px-6 lg:px-10">
      <header class="max-w-4xl">
-        <p class="m-0 text-xs font-black tracking-[0.12em] text-red-400 uppercase">Gate visual · S23</p>
-        <h1 class="mt-2 text-2xl font-black tracking-[-0.02em] sm:text-3xl">Ajuste fino sem vaivém no celular</h1>
+        <p class="m-0 text-xs font-black tracking-[0.12em] text-red-400 uppercase">
+          Gate visual · S23
+        </p>
+        <h1 class="mt-2 text-2xl font-black tracking-[-0.02em] sm:text-3xl">
+          Ajuste fino sem vaivém no celular
+        </h1>
        <p class="mt-3 max-w-3xl text-sm leading-6 text-zinc-400">
-          Alvo do port: no mobile de 390px, o drawer do estúdio ocupa toda a viewport, respeitando a safe-area. O aviso abre a área rolável e sai de cena ao descer; nada fica sobre a prévia. Zoom e setas continuam no mesmo fluxo. O shell do dialog desktop mantém sua geometria.
+          Alvo do port: no mobile de 390px, o drawer do estúdio ocupa toda a viewport, respeitando a
+          safe-area. O aviso abre a área rolável e sai de cena ao descer; nada fica sobre a prévia.
+          Zoom e setas continuam no mesmo fluxo. O shell do dialog desktop mantém sua geometria.
        </p>
        <div class="mt-5 flex flex-wrap gap-2 text-[11px] font-bold text-zinc-300">
-          <span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2">390px · alvo do port</span>
-          <span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2">1280px · conferência de escopo</span>
-          <span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2">Conteúdo da prévia · NEEDS ASSET</span>
+          <span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
+            >390px · alvo do port</span
+          >
+          <span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
+            >1280px · conferência de escopo</span
+          >
+          <span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
+            >Conteúdo da prévia · NEEDS ASSET</span
+          >
        </div>
      </header>

      <section class="mt-12" aria-labelledby="scene-01-title">
        <div class="mb-5 flex flex-wrap items-end justify-between gap-3">
          <div>
-            <p class="text-[11px] font-black tracking-[0.12em] text-emerald-300 uppercase">Cena 01 · mobile 390 × 844</p>
-            <h2 id="scene-01-title" class="mt-1 text-xl font-black">Altura total · aviso no fluxo, prévia e controles</h2>
+            <p class="text-[11px] font-black tracking-[0.12em] text-emerald-300 uppercase">
+              Cena 01 · mobile 390 × 844
+            </p>
+            <h2 id="scene-01-title" class="mt-1 text-xl font-black">
+              Altura total · aviso no fluxo, prévia e controles
+            </h2>
          </div>
-          <span class="rounded-full bg-emerald-400/15 px-3 py-1.5 text-xs font-bold text-emerald-300">Alvo do port</span>
+          <span
+            class="rounded-full bg-emerald-400/15 px-3 py-1.5 text-xs font-bold text-emerald-300"
+            >Alvo do port</span
+          >
        </div>

        <div class="overflow-x-auto pb-4">
-          <div class="mobile-screen stage-shadow relative mx-auto text-black" data-theme="campaign-site">
+          <div
+            class="mobile-screen stage-shadow relative mx-auto text-black"
+            data-theme="campaign-site"
+          >
            <div class="absolute inset-0 bg-black/10" aria-hidden="true"></div>
            <article class="drawer-full" aria-label="Drawer do estúdio de cards">
-              <div class="flex h-3 shrink-0 items-end justify-center"><div class="swipe-handle"></div></div>
+              <div class="flex h-3 shrink-0 items-end justify-center">
+                <div class="swipe-handle"></div>
+              </div>
              <header class="flex shrink-0 items-start gap-3 px-5 pt-5">
                <div class="min-w-0 flex-1 text-left">
-                  <p class="m-0 text-[10px] font-black tracking-[0.1em] text-(--pt-red) uppercase">Time de você</p>
-                  <h3 class="m-0 mt-0.5 text-lg leading-tight font-black tracking-[-0.01em]">Confira seu card</h3>
+                  <p class="m-0 text-[10px] font-black tracking-[0.1em] text-(--pt-red) uppercase">
+                    Time de você
+                  </p>
+                  <h3 class="m-0 mt-0.5 text-lg leading-tight font-black tracking-[-0.01em]">
+                    Confira seu card
+                  </h3>
                </div>
-                <button class="inline-flex size-11 shrink-0 items-center justify-center rounded-lg text-xl text-(--campaign-muted)" aria-label="Fechar">×</button>
+                <button
+                  class="inline-flex size-11 shrink-0 items-center justify-center rounded-lg text-xl text-(--campaign-muted)"
+                  aria-label="Fechar"
+                >
+                  ×
+                </button>
              </header>

              <div class="min-h-0 flex-1 overflow-hidden px-5 pt-3 pb-4">
@ -181,29 +252,52 @@
                <div class="relative mx-auto w-[180px]" tabindex="0" aria-label="Ajuste da foto">
                  <div class="preview-placeholder" aria-hidden="true"></div>
                </div>
-                <p class="m-0 mt-1 text-center text-[9px] font-black tracking-[0.08em] text-zinc-500 uppercase">Prévia real do visitante · NEEDS ASSET</p>
+                <p
+                  class="m-0 mt-1 text-center text-[9px] font-black tracking-[0.08em] text-zinc-500 uppercase"
+                >
+                  Prévia real do visitante · NEEDS ASSET
+                </p>

                <div class="mt-4">
                  <div class="flex items-center gap-3">
                    <label for="zoom-1" class="text-sm font-bold">Zoom</label>
                    <button class="control-button" aria-label="Diminuir zoom">−</button>
-                    <input id="zoom-1" class="range h-11 w-full flex-1" type="range" value="47" aria-label="Zoom da foto" />
+                    <input
+                      id="zoom-1"
+                      class="range h-11 w-full flex-1"
+                      type="range"
+                      value="47"
+                      aria-label="Zoom da foto"
+                    />
                    <button class="control-button" aria-label="Aumentar zoom">+</button>
                  </div>
                  <div class="mt-3">
                    <p class="m-0 text-sm font-bold">Ajuste fino</p>
                    <div class="mt-2 grid grid-cols-4 gap-2">
-                      <button class="control-button w-full" aria-label="Mover foto para a esquerda">←</button>
-                      <button class="control-button w-full" aria-label="Mover foto para cima">↑</button>
-                      <button class="control-button w-full" aria-label="Mover foto para baixo">↓</button>
-                      <button class="control-button w-full" aria-label="Mover foto para a direita">→</button>
+                      <button class="control-button w-full" aria-label="Mover foto para a esquerda">
+                        ←
+                      </button>
+                      <button class="control-button w-full" aria-label="Mover foto para cima">
+                        ↑
+                      </button>
+                      <button class="control-button w-full" aria-label="Mover foto para baixo">
+                        ↓
+                      </button>
+                      <button class="control-button w-full" aria-label="Mover foto para a direita">
+                        →
+                      </button>
                    </div>
                  </div>
-                  <div class="mt-3 flex min-h-11 items-start gap-3 rounded-lg border border-(--campaign-line) bg-white p-3 opacity-60">
+                  <div
+                    class="mt-3 flex min-h-11 items-start gap-3 rounded-lg border border-(--campaign-line) bg-white p-3 opacity-60"
+                  >
                    <span class="switch mt-1.5" aria-hidden="true"></span>
                    <span class="min-w-0">
                      <span class="block text-sm font-bold">Harmonizar cores</span>
-                      <span class="mt-0.5 block text-xs leading-5 text-(--campaign-muted)">Ajusta o brilho e as cores da sua foto para combinar com as fotos do card.</span>
+                      <span class="mt-0.5 block text-xs leading-5 text-(--campaign-muted)"
+                        >Ajusta o brilho e as cores da sua foto para combinar com as fotos do
+                        card.</span
+                      >
                    </span>
                  </div>
                </div>
@ -216,45 +310,95 @@
            </article>
          </div>
        </div>
-        <p class="mx-auto mt-3 max-w-[620px] text-center text-xs leading-5 text-zinc-400">O topo branco coincide com a viewport e reserva a safe-area. A área rolável começa no aviso; imagem, zoom e setas vêm em seguida, sem qualquer camada sobre a prévia.</p>
+        <p class="mx-auto mt-3 max-w-[620px] text-center text-xs leading-5 text-zinc-400">
+          O topo branco coincide com a viewport e reserva a safe-area. A área rolável começa no
+          aviso; imagem, zoom e setas vêm em seguida, sem qualquer camada sobre a prévia.
+        </p>
      </section>

      <section class="mt-16" aria-labelledby="scene-02-title">
        <div class="mb-5">
-          <p class="text-[11px] font-black tracking-[0.12em] text-amber-300 uppercase">Cena 02 · mobile 390 × 844 · conteúdo rolado</p>
-          <h2 id="scene-02-title" class="mt-1 text-xl font-black">Aviso fora de cena · nada sobre a prévia</h2>
+          <p class="text-[11px] font-black tracking-[0.12em] text-amber-300 uppercase">
+            Cena 02 · mobile 390 × 844 · conteúdo rolado
+          </p>
+          <h2 id="scene-02-title" class="mt-1 text-xl font-black">
+            Aviso fora de cena · nada sobre a prévia
+          </h2>
        </div>
        <div class="grid items-start gap-6 lg:grid-cols-[390px_1fr] lg:justify-center">
-          <div class="mobile-screen stage-shadow relative mx-auto text-black lg:mx-0" data-theme="campaign-site">
+          <div
+            class="mobile-screen stage-shadow relative mx-auto text-black lg:mx-0"
+            data-theme="campaign-site"
+          >
            <article class="drawer-full">
-              <div class="flex h-3 shrink-0 items-end justify-center"><div class="swipe-handle"></div></div>
+              <div class="flex h-3 shrink-0 items-end justify-center">
+                <div class="swipe-handle"></div>
+              </div>
              <header class="flex shrink-0 items-start gap-3 px-5 pt-5">
                <div class="min-w-0 flex-1">
-                  <p class="m-0 text-[10px] font-black tracking-[0.1em] text-(--pt-red) uppercase">Time de você</p>
+                  <p class="m-0 text-[10px] font-black tracking-[0.1em] text-(--pt-red) uppercase">
+                    Time de você
+                  </p>
                  <h3 class="m-0 mt-0.5 text-lg leading-tight font-black">Confira seu card</h3>
                </div>
-                <button class="inline-flex size-11 items-center justify-center rounded-lg text-xl text-(--campaign-muted)" aria-label="Fechar">×</button>
+                <button
+                  class="inline-flex size-11 items-center justify-center rounded-lg text-xl text-(--campaign-muted)"
+                  aria-label="Fechar"
+                >
+                  ×
+                </button>
              </header>
              <div class="min-h-0 flex-1 overflow-hidden px-5 pt-3 pb-4">
                <div class="relative mx-auto w-[180px]">
                  <div class="preview-placeholder" aria-hidden="true"></div>
                </div>
-                <p class="m-0 mt-1 text-center text-[9px] font-black tracking-[0.08em] text-zinc-500 uppercase">Prévia real do visitante · NEEDS ASSET</p>
+                <p
+                  class="m-0 mt-1 text-center text-[9px] font-black tracking-[0.08em] text-zinc-500 uppercase"
+                >
+                  Prévia real do visitante · NEEDS ASSET
+                </p>
                <div class="mt-4 flex items-center gap-3">
-                  <span class="text-sm font-bold">Zoom</span><button class="control-button">−</button><div class="range h-1 flex-1"></div><button class="control-button">+</button>
+                  <span class="text-sm font-bold">Zoom</span
+                  ><button class="control-button">−</button>
+                  <div class="range h-1 flex-1"></div>
+                  <button class="control-button">+</button>
                </div>
                <p class="m-0 mt-3 text-sm font-bold">Ajuste fino</p>
-                <div class="mt-2 grid grid-cols-4 gap-2"><button class="control-button w-full">←</button><button class="control-button w-full">↑</button><button class="control-button w-full">↓</button><button class="control-button w-full">→</button></div>
+                <div class="mt-2 grid grid-cols-4 gap-2">
+                  <button class="control-button w-full">←</button
+                  ><button class="control-button w-full">↑</button
+                  ><button class="control-button w-full">↓</button
+                  ><button class="control-button w-full">→</button>
+                </div>
              </div>
-              <footer class="flex shrink-0 gap-3 border-t border-(--campaign-line) px-5 py-4"><button class="secondary-button">Cancelar</button><button class="primary-button">Criar meu card</button></footer>
+              <footer class="flex shrink-0 gap-3 border-t border-(--campaign-line) px-5 py-4">
+                <button class="secondary-button">Cancelar</button
+                ><button class="primary-button">Criar meu card</button>
+              </footer>
            </article>
          </div>

-          <aside class="mx-auto max-w-xl rounded-2xl border border-amber-400/35 bg-amber-400/10 p-5 lg:mx-0">
-            <p class="m-0 text-[11px] font-black tracking-[0.12em] text-amber-300 uppercase">Estado após rolar</p>
-            <p class="mt-3 text-sm leading-6 text-zinc-200"><strong>O aviso continua existindo</strong>, mas ficou acima do recorte visível da área rolável. Ele se move com o conteúdo — não acompanha a imagem nem fica preso ao header.</p>
-            <p class="mt-4 text-sm leading-6 text-zinc-200"><strong>O badge “Arraste para ajustar” sai.</strong> A prévia permanece totalmente limpa; gesto, zoom e setas comunicam o ajuste sem cobrir a foto.</p>
-            <div class="mt-5 rounded-xl border border-zinc-700 bg-zinc-900 p-4 text-xs leading-5 text-zinc-400">Esta cena é o mesmo drawer da Cena 01 depois de rolar até os controles. Não há anotação inserida dentro da interface-alvo.</div>
+          <aside
+            class="mx-auto max-w-xl rounded-2xl border border-amber-400/35 bg-amber-400/10 p-5 lg:mx-0"
+          >
+            <p class="m-0 text-[11px] font-black tracking-[0.12em] text-amber-300 uppercase">
+              Estado após rolar
+            </p>
+            <p class="mt-3 text-sm leading-6 text-zinc-200">
+              <strong>O aviso continua existindo</strong>, mas ficou acima do recorte visível da
+              área rolável. Ele se move com o conteúdo — não acompanha a imagem nem fica preso ao
+              header.
+            </p>
+            <p class="mt-4 text-sm leading-6 text-zinc-200">
+              <strong>O badge “Arraste para ajustar” sai.</strong> A prévia permanece totalmente
+              limpa; gesto, zoom e setas comunicam o ajuste sem cobrir a foto.
+            </p>
+            <div
+              class="mt-5 rounded-xl border border-zinc-700 bg-zinc-900 p-4 text-xs leading-5 text-zinc-400"
+            >
+              Esta cena é o mesmo drawer da Cena 01 depois de rolar até os controles. Não há
+              anotação inserida dentro da interface-alvo.
+            </div>
          </aside>
        </div>
      </section>
@ -262,41 +406,86 @@
      <section class="mt-16" aria-labelledby="scene-03-title">
        <div class="mb-5 flex flex-wrap items-end justify-between gap-3">
          <div>
-            <p class="text-[11px] font-black tracking-[0.12em] text-sky-300 uppercase">Cena 03 · desktop 1280 × 800</p>
-            <h2 id="scene-03-title" class="mt-1 text-xl font-black">Dialog desktop · aviso no fluxo, imagem limpa</h2>
+            <p class="text-[11px] font-black tracking-[0.12em] text-sky-300 uppercase">
+              Cena 03 · desktop 1280 × 800
+            </p>
+            <h2 id="scene-03-title" class="mt-1 text-xl font-black">
+              Dialog desktop · aviso no fluxo, imagem limpa
+            </h2>
          </div>
-          <span class="rounded-full border border-sky-400/30 bg-sky-400/10 px-3 py-1.5 text-xs font-bold text-sky-200">Sem mudança no shell desktop</span>
+          <span
+            class="rounded-full border border-sky-400/30 bg-sky-400/10 px-3 py-1.5 text-xs font-bold text-sky-200"
+            >Sem mudança no shell desktop</span
+          >
        </div>

        <div class="overflow-x-auto pb-4">
-          <div class="stage-shadow relative mx-auto h-[800px] w-[1280px] overflow-hidden bg-[#fff8f2] text-black" data-theme="campaign-site">
+          <div
+            class="stage-shadow relative mx-auto h-[800px] w-[1280px] overflow-hidden bg-[#fff8f2] text-black"
+            data-theme="campaign-site"
+          >
            <div class="absolute inset-0 bg-black/60"></div>
-            <article class="absolute top-1/2 left-1/2 flex max-h-[736px] w-[512px] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl border border-(--campaign-line) bg-white shadow-2xl">
+            <article
+              class="absolute top-1/2 left-1/2 flex max-h-[736px] w-[512px] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden rounded-xl border border-(--campaign-line) bg-white shadow-2xl"
+            >
              <header class="flex shrink-0 items-start gap-3 px-5 pt-5">
                <div class="min-w-0 flex-1">
-                  <p class="m-0 text-xs font-black tracking-[0.1em] text-(--pt-red) uppercase">Time de você</p>
+                  <p class="m-0 text-xs font-black tracking-[0.1em] text-(--pt-red) uppercase">
+                    Time de você
+                  </p>
                  <h3 class="m-0 mt-0.5 text-xl font-black tracking-[-0.01em]">Confira seu card</h3>
                </div>
-                <button class="inline-flex size-11 items-center justify-center rounded-lg text-xl text-(--campaign-muted)" aria-label="Fechar">×</button>
+                <button
+                  class="inline-flex size-11 items-center justify-center rounded-lg text-xl text-(--campaign-muted)"
+                  aria-label="Fechar"
+                >
+                  ×
+                </button>
              </header>
              <div class="min-h-0 flex-1 overflow-y-auto px-5 pt-4 pb-5">
-                <p class="mx-auto mb-4 max-w-[420px] text-sm leading-5 text-(--campaign-muted)">O recorte já foi centralizado. Se precisar, arraste a foto ou use os controles.</p>
+                <p class="mx-auto mb-4 max-w-[420px] text-sm leading-5 text-(--campaign-muted)">
+                  O recorte já foi centralizado. Se precisar, arraste a foto ou use os controles.
+                </p>
                <div class="relative mx-auto w-[240px]">
                  <div class="preview-placeholder" aria-hidden="true"></div>
                </div>
-                <p class="m-0 mt-1 text-center text-[9px] font-black tracking-[0.08em] text-zinc-500 uppercase">Prévia real do visitante · NEEDS ASSET</p>
+                <p
+                  class="m-0 mt-1 text-center text-[9px] font-black tracking-[0.08em] text-zinc-500 uppercase"
+                >
+                  Prévia real do visitante · NEEDS ASSET
+                </p>
                <div class="mx-auto mt-5 max-w-[420px]">
-                  <div class="flex items-center gap-3"><span class="text-sm font-bold">Zoom</span><button class="control-button">−</button><div class="range h-1 flex-1"></div><button class="control-button">+</button></div>
+                  <div class="flex items-center gap-3">
+                    <span class="text-sm font-bold">Zoom</span
+                    ><button class="control-button">−</button>
+                    <div class="range h-1 flex-1"></div>
+                    <button class="control-button">+</button>
+                  </div>
                  <p class="m-0 mt-4 text-sm font-bold">Ajuste fino</p>
-                  <div class="mt-2 grid grid-cols-4 gap-2"><button class="control-button w-full">←</button><button class="control-button w-full">↑</button><button class="control-button w-full">↓</button><button class="control-button w-full">→</button></div>
+                  <div class="mt-2 grid grid-cols-4 gap-2">
+                    <button class="control-button w-full">←</button
+                    ><button class="control-button w-full">↑</button
+                    ><button class="control-button w-full">↓</button
+                    ><button class="control-button w-full">→</button>
+                  </div>
                </div>
              </div>
-              <footer class="flex shrink-0 gap-3 border-t border-(--campaign-line) px-5 py-4"><button class="secondary-button">Cancelar</button><button class="primary-button">Criar meu card</button></footer>
+              <footer class="flex shrink-0 gap-3 border-t border-(--campaign-line) px-5 py-4">
+                <button class="secondary-button">Cancelar</button
+                ><button class="primary-button">Criar meu card</button>
+              </footer>
            </article>
-            <div class="absolute top-6 right-6 rounded-full border border-white/25 bg-black/50 px-4 py-2 text-xs font-black tracking-[0.08em] text-white uppercase">Dialog 512px · 92dvh</div>
+            <div
+              class="absolute top-6 right-6 rounded-full border border-white/25 bg-black/50 px-4 py-2 text-xs font-black tracking-[0.08em] text-white uppercase"
+            >
+              Dialog 512px · 92dvh
+            </div>
          </div>
        </div>
-        <p class="mt-3 text-xs leading-5 text-zinc-400">O dialog permanece centralizado, com largura e teto atuais. A nova regra vale no conteúdo compartilhado: aviso dentro do fluxo rolável e nenhuma camada sobre a imagem.</p>
+        <p class="mt-3 text-xs leading-5 text-zinc-400">
+          O dialog permanece centralizado, com largura e teto atuais. A nova regra vale no conteúdo
+          compartilhado: aviso dentro do fluxo rolável e nenhuma camada sobre a imagem.
+        </p>
      </section>

      <section class="mt-16 rounded-2xl border border-zinc-800 bg-zinc-900/70 p-6">
--- a/docs/plans/radio-embed-direto-ui-design.html
+++ b/docs/plans/radio-embed-direto-ui-design.html
@ -22,15 +22,41 @@
        --font-exo2: 'Exo 2', 'Arial Black', sans-serif;
        --font-arimo: Arimo, Arial, sans-serif;
      }
-      * { box-sizing: border-box; }
-      html { color-scheme: light; }
-      body { margin: 0; font-family: var(--font-arimo); }
-      .font-display, .campaign-section-eyebrow, .campaign-section-title { font-family: var(--font-exo2); }
-      .campaign-section-eyebrow { font-size: clamp(10px, calc(0.32vw + 8.75px), 12px); line-height: 1.25; }
-      .campaign-section-title { font-size: clamp(34px, calc(1.7vw + 18px), 40px); line-height: 1.02; }
-      .campaign-section-copy { font-size: clamp(14px, calc(0.32vw + 12.75px), 16px); line-height: 1.55; }
-      .stage-shadow { box-shadow: 0 26px 80px rgb(0 0 0 / 30%); }
-      .screen { overflow: hidden; background: white; color: black; }
+      * {
+        box-sizing: border-box;
+      }
+      html {
+        color-scheme: light;
+      }
+      body {
+        margin: 0;
+        font-family: var(--font-arimo);
+      }
+      .font-display,
+      .campaign-section-eyebrow,
+      .campaign-section-title {
+        font-family: var(--font-exo2);
+      }
+      .campaign-section-eyebrow {
+        font-size: clamp(10px, calc(0.32vw + 8.75px), 12px);
+        line-height: 1.25;
+      }
+      .campaign-section-title {
+        font-size: clamp(34px, calc(1.7vw + 18px), 40px);
+        line-height: 1.02;
+      }
+      .campaign-section-copy {
+        font-size: clamp(14px, calc(0.32vw + 12.75px), 16px);
+        line-height: 1.55;
+      }
+      .stage-shadow {
+        box-shadow: 0 26px 80px rgb(0 0 0 / 30%);
+      }
+      .screen {
+        overflow: hidden;
+        background: white;
+        color: black;
+      }
      .player-frame {
        overflow: hidden;
        border: 1px solid rgb(0 0 0 / 12%);
@ -58,7 +84,13 @@
        border: 1px dashed rgb(0 0 0 / 24%);
        border-radius: 9px;
      }
-      .jingle-card { overflow: hidden; border: 1px solid var(--campaign-line); border-radius: 14px; background: white; box-shadow: 0 12px 34px rgb(71 19 14 / 8%); }
+      .jingle-card {
+        overflow: hidden;
+        border: 1px solid var(--campaign-line);
+        border-radius: 14px;
+        background: white;
+        box-shadow: 0 12px 34px rgb(71 19 14 / 8%);
+      }
      .cover-placeholder {
        position: relative;
        display: flex;
@ -68,75 +100,391 @@
        background: #dedbd8;
        color: #57534e;
      }
-      .cover-placeholder::after { content: ''; position: absolute; inset: 58% 0 0; background: linear-gradient(to bottom, transparent, rgb(24 10 9 / 20%)); }
-      .play-control { display: inline-flex; width: 56px; height: 56px; flex: none; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: var(--pt-yellow); color: #000; box-shadow: 0 6px 0 #cfb900, 0 10px 22px rgb(0 0 0 / 15%); }
-      .download-control { display: inline-flex; min-height: 44px; width: 100%; align-items: center; justify-content: center; gap: 8px; border: 1.5px solid rgb(162 28 28 / 32%); border-radius: 10px; color: var(--pt-red); font-family: var(--font-exo2); font-weight: 800; }
-      .mobile-screen { width: 390px; overflow: hidden; }
-      @media (max-width: 639px) { .widget-placeholder { height: 150px; } }
+      .cover-placeholder::after {
+        content: '';
+        position: absolute;
+        inset: 58% 0 0;
+        background: linear-gradient(to bottom, transparent, rgb(24 10 9 / 20%));
+      }
+      .play-control {
+        display: inline-flex;
+        width: 56px;
+        height: 56px;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        border: 0;
+        border-radius: 999px;
+        background: var(--pt-yellow);
+        color: #000;
+        box-shadow:
+          0 6px 0 #cfb900,
+          0 10px 22px rgb(0 0 0 / 15%);
+      }
+      .download-control {
+        display: inline-flex;
+        min-height: 44px;
+        width: 100%;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
+        border: 1.5px solid rgb(162 28 28 / 32%);
+        border-radius: 10px;
+        color: var(--pt-red);
+        font-family: var(--font-exo2);
+        font-weight: 800;
+      }
+      .mobile-screen {
+        width: 390px;
+        overflow: hidden;
+      }
+      @media (max-width: 639px) {
+        .widget-placeholder {
+          height: 150px;
+        }
+      }
    </style>
  </head>
  <body class="bg-zinc-950 text-zinc-100 antialiased">
-    <div class="border-b border-emerald-400/40 bg-emerald-400/10 px-4 py-2 text-center text-[11px] font-black tracking-[0.14em] text-emerald-300 uppercase">Design tier: openai/gpt-5.6-sol · frontier · gate humano obrigatório</div>
+    <div
+      class="border-b border-emerald-400/40 bg-emerald-400/10 px-4 py-2 text-center text-[11px] font-black tracking-[0.14em] text-emerald-300 uppercase"
+    >
+      Design tier: openai/gpt-5.6-sol · frontier · gate humano obrigatório
+    </div>

    <main class="mx-auto max-w-[1440px] px-4 py-10 sm:px-6 lg:px-10">
      <header class="max-w-4xl">
-        <p class="m-0 text-xs font-black tracking-[0.12em] text-red-400 uppercase">Gate visual · S24</p>
-        <h1 class="mt-2 text-2xl font-black tracking-[-0.02em] sm:text-3xl">Rádio 1313: o player já está na página</h1>
-        <p class="mt-3 max-w-3xl text-sm leading-6 text-zinc-400">A seção mantém seu cabeçalho e sua copy. No lugar do card-facade entra somente o embed oficial, em moldura mínima e com footprint reservado. O widget fica nu: sem arte, eyebrow interno, escudo, botão intermediário, link “Abrir no Zeno” ou aviso de terceiro.</p>
-        <div class="mt-5 flex flex-wrap gap-2 text-[11px] font-bold text-zinc-300"><span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2">1280px · desktop</span><span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2">390px · alvo mobile do port</span><span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2">Widget zeno.fm · NEEDS ASSET</span></div>
+        <p class="m-0 text-xs font-black tracking-[0.12em] text-red-400 uppercase">
+          Gate visual · S24
+        </p>
+        <h1 class="mt-2 text-2xl font-black tracking-[-0.02em] sm:text-3xl">
+          Rádio 1313: o player já está na página
+        </h1>
+        <p class="mt-3 max-w-3xl text-sm leading-6 text-zinc-400">
+          A seção mantém seu cabeçalho e sua copy. No lugar do card-facade entra somente o embed
+          oficial, em moldura mínima e com footprint reservado. O widget fica nu: sem arte, eyebrow
+          interno, escudo, botão intermediário, link “Abrir no Zeno” ou aviso de terceiro.
+        </p>
+        <div class="mt-5 flex flex-wrap gap-2 text-[11px] font-bold text-zinc-300">
+          <span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
+            >1280px · desktop</span
+          ><span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
+            >390px · alvo mobile do port</span
+          ><span class="rounded-full border border-zinc-700 bg-zinc-900 px-3 py-2"
+            >Widget zeno.fm · NEEDS ASSET</span
+          >
+        </div>
      </header>

      <section class="mt-12" aria-labelledby="radio-scene-01">
-        <div class="mb-5 flex flex-wrap items-end justify-between gap-3"><div><p class="text-[11px] font-black tracking-[0.12em] text-emerald-300 uppercase">Cena 01 · desktop 1280 · 0 jingles publicados</p><h2 id="radio-scene-01" class="mt-1 text-xl font-black">Rádio sozinha · estado real de produção</h2></div><span class="rounded-full bg-emerald-400/15 px-3 py-1.5 text-xs font-bold text-emerald-300">Variante compact preservada</span></div>
+        <div class="mb-5 flex flex-wrap items-end justify-between gap-3">
+          <div>
+            <p class="text-[11px] font-black tracking-[0.12em] text-emerald-300 uppercase">
+              Cena 01 · desktop 1280 · 0 jingles publicados
+            </p>
+            <h2 id="radio-scene-01" class="mt-1 text-xl font-black">
+              Rádio sozinha · estado real de produção
+            </h2>
+          </div>
+          <span
+            class="rounded-full bg-emerald-400/15 px-3 py-1.5 text-xs font-bold text-emerald-300"
+            >Variante compact preservada</span
+          >
+        </div>
        <div class="overflow-x-auto pb-4">
-          <div class="screen stage-shadow relative mx-auto min-h-[650px] w-[1280px] border-b border-(--campaign-line) bg-(--campaign-cream)" data-theme="campaign-site">
-            <div class="pointer-events-none absolute -top-28 -right-20 h-64 w-64 rounded-full bg-(--pt-yellow)/45"></div>
+          <div
+            class="screen stage-shadow relative mx-auto min-h-[650px] w-[1280px] border-b border-(--campaign-line) bg-(--campaign-cream)"
+            data-theme="campaign-site"
+          >
+            <div
+              class="pointer-events-none absolute -top-28 -right-20 h-64 w-64 rounded-full bg-(--pt-yellow)/45"
+            ></div>
            <div class="relative mx-auto w-full max-w-[1160px] px-10 py-16">
-              <header class="mx-auto max-w-2xl text-center"><p class="campaign-section-eyebrow m-0 font-black tracking-[0.1em] text-(--pt-red) uppercase">A trilha da nossa caminhada</p><h3 class="campaign-section-title m-0 mt-2 font-black tracking-[-0.03em] text-balance">Sintonize com a Rádio 1313</h3><p class="campaign-section-copy mx-auto mt-3 max-w-xl text-(--campaign-muted)">Ainda não há jingles publicados por aqui. Enquanto isso, ouça a Rádio Jorge Solla 1313.</p></header>
-              <article class="player-frame mx-auto mt-8 max-w-[880px] p-4" aria-label="Player da Rádio Jorge Solla 1313">
-                <div class="widget-placeholder"><span class="relative z-10 rounded-lg border border-black/10 bg-white/90 px-4 py-3 text-center text-xs font-black tracking-[0.08em] text-zinc-600 uppercase">Embed oficial zeno.fm<br /><span class="mt-1 block text-[10px] font-bold tracking-normal normal-case">conteúdo de terceiro · NEEDS ASSET</span></span></div>
+              <header class="mx-auto max-w-2xl text-center">
+                <p
+                  class="campaign-section-eyebrow m-0 font-black tracking-[0.1em] text-(--pt-red) uppercase"
+                >
+                  A trilha da nossa caminhada
+                </p>
+                <h3
+                  class="campaign-section-title m-0 mt-2 font-black tracking-[-0.03em] text-balance"
+                >
+                  Sintonize com a Rádio 1313
+                </h3>
+                <p class="campaign-section-copy mx-auto mt-3 max-w-xl text-(--campaign-muted)">
+                  Ainda não há jingles publicados por aqui. Enquanto isso, ouça a Rádio Jorge Solla
+                  1313.
+                </p>
+              </header>
+              <article
+                class="player-frame mx-auto mt-8 max-w-[880px] p-4"
+                aria-label="Player da Rádio Jorge Solla 1313"
+              >
+                <div class="widget-placeholder">
+                  <span
+                    class="relative z-10 rounded-lg border border-black/10 bg-white/90 px-4 py-3 text-center text-xs font-black tracking-[0.08em] text-zinc-600 uppercase"
+                    >Embed oficial zeno.fm<br /><span
+                      class="mt-1 block text-[10px] font-bold tracking-normal normal-case"
+                      >conteúdo de terceiro · NEEDS ASSET</span
+                    ></span
+                  >
+                </div>
              </article>
-              <div class="mx-auto mt-7 flex max-w-[880px] items-center gap-3 rounded-xl border border-dashed border-(--pt-red)/35 bg-white/45 px-4 py-3 text-xs text-(--campaign-muted)"><span class="font-black text-(--pt-red)">168px reservados</span><span>O espaço do widget existe desde o primeiro paint: sem salto quando o iframe responder.</span></div>
+              <div
+                class="mx-auto mt-7 flex max-w-[880px] items-center gap-3 rounded-xl border border-dashed border-(--pt-red)/35 bg-white/45 px-4 py-3 text-xs text-(--campaign-muted)"
+              >
+                <span class="font-black text-(--pt-red)">168px reservados</span
+                ><span
+                  >O espaço do widget existe desde o primeiro paint: sem salto quando o iframe
+                  responder.</span
+                >
+              </div>
            </div>
          </div>
        </div>
      </section>

      <section class="mt-16" aria-labelledby="radio-scene-02">
-        <div class="mb-5"><p class="text-[11px] font-black tracking-[0.12em] text-amber-300 uppercase">Cena 02 · mobile 390 · 0 jingles publicados</p><h2 id="radio-scene-02" class="mt-1 text-xl font-black">Player direto sem overflow horizontal</h2></div>
-        <div class="mobile-screen screen stage-shadow relative mx-auto bg-(--campaign-cream) text-black" data-theme="campaign-site">
-          <div class="pointer-events-none absolute -top-16 -right-16 size-44 rounded-full bg-(--pt-yellow)/45"></div>
+        <div class="mb-5">
+          <p class="text-[11px] font-black tracking-[0.12em] text-amber-300 uppercase">
+            Cena 02 · mobile 390 · 0 jingles publicados
+          </p>
+          <h2 id="radio-scene-02" class="mt-1 text-xl font-black">
+            Player direto sem overflow horizontal
+          </h2>
+        </div>
+        <div
+          class="mobile-screen screen stage-shadow relative mx-auto bg-(--campaign-cream) text-black"
+          data-theme="campaign-site"
+        >
+          <div
+            class="pointer-events-none absolute -top-16 -right-16 size-44 rounded-full bg-(--pt-yellow)/45"
+          ></div>
          <div class="relative px-5 py-12">
-            <header class="mx-auto text-center"><p class="campaign-section-eyebrow m-0 font-black tracking-[0.1em] text-(--pt-red) uppercase">A trilha da nossa caminhada</p><h3 class="campaign-section-title m-0 mt-2 text-[34px] font-black tracking-[-0.03em] text-balance">Sintonize com a Rádio 1313</h3><p class="campaign-section-copy mx-auto mt-3 text-(--campaign-muted)">Ainda não há jingles publicados por aqui. Enquanto isso, ouça a Rádio Jorge Solla 1313.</p></header>
-            <article class="player-frame mt-8 p-3"><div class="widget-placeholder"><span class="relative z-10 rounded-lg border border-black/10 bg-white/90 px-3 py-2 text-center text-[11px] font-black tracking-[0.07em] text-zinc-600 uppercase">Embed oficial zeno.fm<br /><span class="block text-[9px] font-bold tracking-normal normal-case">NEEDS ASSET · 150px reservados</span></span></div></article>
+            <header class="mx-auto text-center">
+              <p
+                class="campaign-section-eyebrow m-0 font-black tracking-[0.1em] text-(--pt-red) uppercase"
+              >
+                A trilha da nossa caminhada
+              </p>
+              <h3
+                class="campaign-section-title m-0 mt-2 text-[34px] font-black tracking-[-0.03em] text-balance"
+              >
+                Sintonize com a Rádio 1313
+              </h3>
+              <p class="campaign-section-copy mx-auto mt-3 text-(--campaign-muted)">
+                Ainda não há jingles publicados por aqui. Enquanto isso, ouça a Rádio Jorge Solla
+                1313.
+              </p>
+            </header>
+            <article class="player-frame mt-8 p-3">
+              <div class="widget-placeholder">
+                <span
+                  class="relative z-10 rounded-lg border border-black/10 bg-white/90 px-3 py-2 text-center text-[11px] font-black tracking-[0.07em] text-zinc-600 uppercase"
+                  >Embed oficial zeno.fm<br /><span
+                    class="block text-[9px] font-bold tracking-normal normal-case"
+                    >NEEDS ASSET · 150px reservados</span
+                  ></span
+                >
+              </div>
+            </article>
+          </div>
+          <div
+            class="border-t border-dashed border-(--pt-red)/30 bg-white/50 px-5 py-3 text-center text-[10px] font-black tracking-[0.08em] text-(--pt-red) uppercase"
+          >
+            390px · alvo mobile do port · sem botão intermediário
          </div>
-          <div class="border-t border-dashed border-(--pt-red)/30 bg-white/50 px-5 py-3 text-center text-[10px] font-black tracking-[0.08em] text-(--pt-red) uppercase">390px · alvo mobile do port · sem botão intermediário</div>
        </div>
      </section>

      <section class="mt-16" aria-labelledby="radio-scene-03">
-        <div class="mb-5"><p class="text-[11px] font-black tracking-[0.12em] text-sky-300 uppercase">Cena 03 · desktop 1280 · com jingles</p><h2 id="radio-scene-03" class="mt-1 text-xl font-black">Embed direto + grade existente com 3 cards</h2></div>
+        <div class="mb-5">
+          <p class="text-[11px] font-black tracking-[0.12em] text-sky-300 uppercase">
+            Cena 03 · desktop 1280 · com jingles
+          </p>
+          <h2 id="radio-scene-03" class="mt-1 text-xl font-black">
+            Embed direto + grade existente com 3 cards
+          </h2>
+        </div>
        <div class="overflow-x-auto pb-4">
-          <div class="screen stage-shadow relative mx-auto w-[1280px] bg-(--campaign-cream)" data-theme="campaign-site">
-            <div class="pointer-events-none absolute -top-28 -right-20 h-64 w-64 rounded-full bg-(--pt-yellow)/45"></div>
+          <div
+            class="screen stage-shadow relative mx-auto w-[1280px] bg-(--campaign-cream)"
+            data-theme="campaign-site"
+          >
+            <div
+              class="pointer-events-none absolute -top-28 -right-20 h-64 w-64 rounded-full bg-(--pt-yellow)/45"
+            ></div>
            <div class="relative mx-auto w-full max-w-[1160px] px-10 py-16">
-              <header class="mx-auto max-w-2xl text-center"><p class="campaign-section-eyebrow m-0 font-black tracking-[0.1em] text-(--pt-red) uppercase">A trilha da nossa caminhada</p><h3 class="campaign-section-title m-0 mt-2 font-black tracking-[-0.03em] text-balance">Cante, baixe e espalhe</h3><p class="campaign-section-copy mx-auto mt-3 max-w-xl text-(--campaign-muted)">Ouça a Rádio Jorge Solla 1313 e os jingles oficiais da campanha. Dê o play e baixe o seu preferido para levar com você.</p></header>
-              <article class="player-frame mt-9 p-4"><div class="widget-placeholder"><span class="relative z-10 rounded-lg border border-black/10 bg-white/90 px-4 py-3 text-center text-xs font-black tracking-[0.08em] text-zinc-600 uppercase">Embed oficial zeno.fm<br /><span class="block text-[10px] font-bold tracking-normal normal-case">conteúdo de terceiro · NEEDS ASSET</span></span></div></article>
-              <div class="mt-12 flex items-end justify-between gap-6"><div><p class="campaign-section-eyebrow m-0 font-black tracking-[0.1em] text-(--pt-red) uppercase">Jingles oficiais</p><h3 class="font-display m-0 mt-1 text-2xl font-black tracking-[-0.02em]">Dê o play. O próximo ritmo é seu.</h3></div><span class="text-sm text-(--campaign-muted)">Um jingle toca por vez.</span></div>
-              <div class="mt-6 grid grid-cols-3 gap-6">
-                <article class="jingle-card"><div class="cover-placeholder"><span class="relative z-10 text-center text-[10px] font-black tracking-[0.08em] uppercase">Capa do jingle<br />NEEDS ASSET</span></div><div class="p-5"><div class="flex items-center gap-4"><button class="play-control" aria-label="Tocar jingle"><svg viewBox="0 0 24 24" class="size-6 fill-current"><path d="m8 5 11 7-11 7z" /></svg></button><div class="min-w-0"><h4 class="font-display m-0 truncate text-[26px] leading-none font-black">Nome do jingle</h4><p class="mt-2 text-sm text-(--campaign-muted)">Pronto para tocar</p></div></div><div class="mt-5 h-1.5 rounded-full bg-[#dedbd8]"></div><div class="mt-2 flex justify-between text-[10px] font-bold text-black/50 uppercase"><span>Tempo —:—</span><span>Duração —:—</span></div><a class="download-control mt-5">↓ Baixar MP3</a></div></article>
-                <article class="jingle-card"><div class="cover-placeholder"><span class="relative z-10 text-center text-[10px] font-black tracking-[0.08em] uppercase">Capa do jingle<br />NEEDS ASSET</span></div><div class="p-5"><div class="flex items-center gap-4"><button class="play-control" aria-label="Tocar jingle"><svg viewBox="0 0 24 24" class="size-6 fill-current"><path d="m8 5 11 7-11 7z" /></svg></button><div class="min-w-0"><h4 class="font-display m-0 truncate text-[26px] leading-none font-black">Nome do jingle</h4><p class="mt-2 text-sm text-(--campaign-muted)">Pronto para tocar</p></div></div><div class="mt-5 h-1.5 rounded-full bg-[#dedbd8]"></div><div class="mt-2 flex justify-between text-[10px] font-bold text-black/50 uppercase"><span>Tempo —:—</span><span>Duração —:—</span></div><a class="download-control mt-5">↓ Baixar MP3</a></div></article>
-                <article class="jingle-card"><div class="cover-placeholder"><span class="relative z-10 text-center text-[10px] font-black tracking-[0.08em] uppercase">Capa do jingle<br />NEEDS ASSET</span></div><div class="p-5"><div class="flex items-center gap-4"><button class="play-control" aria-label="Tocar jingle"><svg viewBox="0 0 24 24" class="size-6 fill-current"><path d="m8 5 11 7-11 7z" /></svg></button><div class="min-w-0"><h4 class="font-display m-0 truncate text-[26px] leading-none font-black">Nome do jingle</h4><p class="mt-2 text-sm text-(--campaign-muted)">Pronto para tocar</p></div></div><div class="mt-5 h-1.5 rounded-full bg-[#dedbd8]"></div><div class="mt-2 flex justify-between text-[10px] font-bold text-black/50 uppercase"><span>Tempo —:—</span><span>Duração —:—</span></div><a class="download-control mt-5">↓ Baixar MP3</a></div></article>
+              <header class="mx-auto max-w-2xl text-center">
+                <p
+                  class="campaign-section-eyebrow m-0 font-black tracking-[0.1em] text-(--pt-red) uppercase"
+                >
+                  A trilha da nossa caminhada
+                </p>
+                <h3
+                  class="campaign-section-title m-0 mt-2 font-black tracking-[-0.03em] text-balance"
+                >
+                  Cante, baixe e espalhe
+                </h3>
+                <p class="campaign-section-copy mx-auto mt-3 max-w-xl text-(--campaign-muted)">
+                  Ouça a Rádio Jorge Solla 1313 e os jingles oficiais da campanha. Dê o play e baixe
+                  o seu preferido para levar com você.
+                </p>
+              </header>
+              <article class="player-frame mt-9 p-4">
+                <div class="widget-placeholder">
+                  <span
+                    class="relative z-10 rounded-lg border border-black/10 bg-white/90 px-4 py-3 text-center text-xs font-black tracking-[0.08em] text-zinc-600 uppercase"
+                    >Embed oficial zeno.fm<br /><span
+                      class="block text-[10px] font-bold tracking-normal normal-case"
+                      >conteúdo de terceiro · NEEDS ASSET</span
+                    ></span
+                  >
+                </div>
+              </article>
+              <div class="mt-12 flex items-end justify-between gap-6">
+                <div>
+                  <p
+                    class="campaign-section-eyebrow m-0 font-black tracking-[0.1em] text-(--pt-red) uppercase"
+                  >
+                    Jingles oficiais
+                  </p>
+                  <h3 class="font-display m-0 mt-1 text-2xl font-black tracking-[-0.02em]">
+                    Dê o play. O próximo ritmo é seu.
+                  </h3>
+                </div>
+                <span class="text-sm text-(--campaign-muted)">Um jingle toca por vez.</span>
+              </div>
+              <div class="mt-6 grid grid-cols-3 gap-6">
+                <article class="jingle-card">
+                  <div class="cover-placeholder">
+                    <span
+                      class="relative z-10 text-center text-[10px] font-black tracking-[0.08em] uppercase"
+                      >Capa do jingle<br />NEEDS ASSET</span
+                    >
+                  </div>
+                  <div class="p-5">
+                    <div class="flex items-center gap-4">
+                      <button class="play-control" aria-label="Tocar jingle">
+                        <svg viewBox="0 0 24 24" class="size-6 fill-current">
+                          <path d="m8 5 11 7-11 7z" />
+                        </svg>
+                      </button>
+                      <div class="min-w-0">
+                        <h4 class="font-display m-0 truncate text-[26px] leading-none font-black">
+                          Nome do jingle
+                        </h4>
+                        <p class="mt-2 text-sm text-(--campaign-muted)">Pronto para tocar</p>
+                      </div>
+                    </div>
+                    <div class="mt-5 h-1.5 rounded-full bg-[#dedbd8]"></div>
+                    <div
+                      class="mt-2 flex justify-between text-[10px] font-bold text-black/50 uppercase"
+                    >
+                      <span>Tempo —:—</span><span>Duração —:—</span>
+                    </div>
+                    <a class="download-control mt-5">↓ Baixar MP3</a>
+                  </div>
+                </article>
+                <article class="jingle-card">
+                  <div class="cover-placeholder">
+                    <span
+                      class="relative z-10 text-center text-[10px] font-black tracking-[0.08em] uppercase"
+                      >Capa do jingle<br />NEEDS ASSET</span
+                    >
+                  </div>
+                  <div class="p-5">
+                    <div class="flex items-center gap-4">
+                      <button class="play-control" aria-label="Tocar jingle">
+                        <svg viewBox="0 0 24 24" class="size-6 fill-current">
+                          <path d="m8 5 11 7-11 7z" />
+                        </svg>
+                      </button>
+                      <div class="min-w-0">
+                        <h4 class="font-display m-0 truncate text-[26px] leading-none font-black">
+                          Nome do jingle
+                        </h4>
+                        <p class="mt-2 text-sm text-(--campaign-muted)">Pronto para tocar</p>
+                      </div>
+                    </div>
+                    <div class="mt-5 h-1.5 rounded-full bg-[#dedbd8]"></div>
+                    <div
+                      class="mt-2 flex justify-between text-[10px] font-bold text-black/50 uppercase"
+                    >
+                      <span>Tempo —:—</span><span>Duração —:—</span>
+                    </div>
+                    <a class="download-control mt-5">↓ Baixar MP3</a>
+                  </div>
+                </article>
+                <article class="jingle-card">
+                  <div class="cover-placeholder">
+                    <span
+                      class="relative z-10 text-center text-[10px] font-black tracking-[0.08em] uppercase"
+                      >Capa do jingle<br />NEEDS ASSET</span
+                    >
+                  </div>
+                  <div class="p-5">
+                    <div class="flex items-center gap-4">
+                      <button class="play-control" aria-label="Tocar jingle">
+                        <svg viewBox="0 0 24 24" class="size-6 fill-current">
+                          <path d="m8 5 11 7-11 7z" />
+                        </svg>
+                      </button>
+                      <div class="min-w-0">
+                        <h4 class="font-display m-0 truncate text-[26px] leading-none font-black">
+                          Nome do jingle
+                        </h4>
+                        <p class="mt-2 text-sm text-(--campaign-muted)">Pronto para tocar</p>
+                      </div>
+                    </div>
+                    <div class="mt-5 h-1.5 rounded-full bg-[#dedbd8]"></div>
+                    <div
+                      class="mt-2 flex justify-between text-[10px] font-bold text-black/50 uppercase"
+                    >
+                      <span>Tempo —:—</span><span>Duração —:—</span>
+                    </div>
+                    <a class="download-control mt-5">↓ Baixar MP3</a>
+                  </div>
+                </article>
+              </div>
+              <div class="mt-8 text-center">
+                <a
+                  class="inline-flex min-h-11 items-center gap-1.5 rounded-md px-2 font-bold text-(--pt-red) underline-offset-4"
+                  >Ver todos os jingles <span aria-hidden="true">›</span></a
+                >
              </div>
-              <div class="mt-8 text-center"><a class="inline-flex min-h-11 items-center gap-1.5 rounded-md px-2 font-bold text-(--pt-red) underline-offset-4">Ver todos os jingles <span aria-hidden="true">›</span></a></div>
            </div>
          </div>
        </div>
      </section>

      <section class="mt-16 grid gap-6 lg:grid-cols-2">
-        <div class="rounded-2xl border border-zinc-800 bg-zinc-900/70 p-6"><p class="text-[11px] font-black tracking-[0.12em] text-red-300 uppercase">Removido da superfície</p><h2 class="mt-2 text-lg font-black">Nada entre a seção e o player</h2><ul class="mt-4 space-y-2 text-sm leading-6 text-zinc-300"><li>• Sem arte “Rádio online” e ondas.</li><li>• Sem eyebrow “Sintonize com a gente” dentro do card.</li><li>• Sem título/textos próprios da facade.</li><li>• Sem escudo, “Ouvir a rádio” ou “Abrir no Zeno”.</li><li>• Sem estados da facade nem aviso de serviço externo.</li></ul></div>
-        <div class="rounded-2xl border border-zinc-800 bg-zinc-900/70 p-6"><p class="text-[11px] font-black tracking-[0.12em] text-emerald-300 uppercase">Mantido no port</p><h2 class="mt-2 text-lg font-black">Seção e footprint reservado</h2><ul class="mt-4 space-y-2 text-sm leading-6 text-zinc-300"><li>• Header/copy variam com 0 ou N jingles como hoje.</li><li>• Embed direto ocupa 150px mobile / 168px desktop na cena.</li><li>• Moldura mínima: borda, raio e sombra baixa.</li><li>• Widget nu, sem linha, chip, badge ou escudo abaixo.</li><li>• Grade e “Ver todos os jingles” seguem abaixo quando existirem.</li></ul></div>
+        <div class="rounded-2xl border border-zinc-800 bg-zinc-900/70 p-6">
+          <p class="text-[11px] font-black tracking-[0.12em] text-red-300 uppercase">
+            Removido da superfície
+          </p>
+          <h2 class="mt-2 text-lg font-black">Nada entre a seção e o player</h2>
+          <ul class="mt-4 space-y-2 text-sm leading-6 text-zinc-300">
+            <li>• Sem arte “Rádio online” e ondas.</li>
+            <li>• Sem eyebrow “Sintonize com a gente” dentro do card.</li>
+            <li>• Sem título/textos próprios da facade.</li>
+            <li>• Sem escudo, “Ouvir a rádio” ou “Abrir no Zeno”.</li>
+            <li>• Sem estados da facade nem aviso de serviço externo.</li>
+          </ul>
+        </div>
+        <div class="rounded-2xl border border-zinc-800 bg-zinc-900/70 p-6">
+          <p class="text-[11px] font-black tracking-[0.12em] text-emerald-300 uppercase">
+            Mantido no port
+          </p>
+          <h2 class="mt-2 text-lg font-black">Seção e footprint reservado</h2>
+          <ul class="mt-4 space-y-2 text-sm leading-6 text-zinc-300">
+            <li>• Header/copy variam com 0 ou N jingles como hoje.</li>
+            <li>• Embed direto ocupa 150px mobile / 168px desktop na cena.</li>
+            <li>• Moldura mínima: borda, raio e sombra baixa.</li>
+            <li>• Widget nu, sem linha, chip, badge ou escudo abaixo.</li>
+            <li>• Grade e “Ver todos os jingles” seguem abaixo quando existirem.</li>
+          </ul>
+        </div>
      </section>
    </main>
  </body>