feat(site): blocos 3D da marca, novas ofertas e hero mais abrangente

Hero e movimento
- cena 3D em tempo real com os blocos da marca (kit feito no Blender, 3d/blocos.py):
  marca, tela, integrações e dados; segue a rolagem, tem vida em repouso, reage ao
  cursor e, parada no topo, passa sozinha pelos estados com legenda
- três níveis de aparelho (full, lite, static); sem WebGL fica o pôster
- título novo: "Sites e sistemas sob medida para o jeito que a sua empresa trabalha."
- faixa de clientes com o ramo, linha do primeiro passo, hero alinhado às seções
- rótulos digitados, entrada dos blocos, cortina de blocos entre páginas e capa
  compartilhada entre a lista de cases e o case

Ofertas
- atendimento no WhatsApp com IA e nota fiscal para a reforma tributária
  (páginas de serviço, cartões da home, formulário e aviso com data de validade)
- página /ia atualizada, com fontes
- peças 3D em loop nos cartões e topos de página (3d/pecas.py)

Design
- hover por papel (bloco nos botões, barra nos links), rótulos sem caixa alta
- um destino por rótulo: "Falar sobre meu projeto" leva ao formulário,
  "Chamar no WhatsApp" abre o WhatsApp
- logo montado em blocos, 404 redesenhado, grades sem célula vazia
- ícones do PWA e manifesto novos

Specs em specs/, contexto de design em DESIGN.md e PRODUCT.md.

app/privacidade/page.test.tsx

@@ -64,12 +64,18 @@ it("uses the same shell as the home, with no narrow max-width", () => {
   expect(metadata.title).toBe("Privacidade e consentimento");
 });
 
-it("opens with the same lower one-column strip as the other inner pages", () => {
+it("opens with the same lower strip as the other inner pages, with the decorative block piece beside the text from 1024 px", () => {
   const { container } = render(<PrivacyPage />);
 
   const hero = container.querySelector("section");
   expect(hero?.className).toContain("md:!pb-sp-12");
-  expect(hero?.querySelector(".ds-section-shell")).not.toHaveClass("grid");
+  // a trilha também tem aria-hidden (as barras): a peça é a dona da imagem
+  const image = hero?.querySelector("img");
+  expect(image?.getAttribute("src")).toContain("estado-dados.webp");
+  expect(image?.closest('[aria-hidden="true"]')).toHaveClass(
+    "hidden",
+    "lg:block",
+  );
 });
 
 it("keeps the lime fill for contact actions only", () => {

app/privacidade/page.tsx

@@ -1,8 +1,12 @@
 import type { Metadata } from "next";
-import { compactHero } from "@/app/cases/_components/hero-styles";
+import {
+  compactHero,
+  heroWithMediaGrid,
+} from "@/app/cases/_components/hero-styles";
 import { Breadcrumb } from "@/app/components/Breadcrumb";
 import { pageTop } from "@/app/components/button-styles";
 import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
+import { PagePiece } from "@/app/components/PagePiece";
 import { safeJsonLd } from "@/lib/jsonld";
 import { buildBreadcrumbList, buildPageSocialMetadata } from "@/lib/seo";
 import { siteUrl } from "@/lib/site-content";
@@ -41,20 +45,23 @@ export default function PrivacyPage() {
       <section
         className={`ds-section ds-section-dark ${pageTop} ${compactHero}`}
       >
-        <div className="ds-section-shell">
-          <Breadcrumb
-            items={[
-              { label: "Início", href: "/" },
-              { label: "Privacidade", href: "/privacidade" },
-            ]}
-          />
-          <h1 className="ds-section-title text-white">
-            Privacidade e consentimento
-          </h1>
-          <p className="ds-copy max-w-[70ch] !text-[rgba(255,255,255,.78)]">
-            Esta página explica, de forma objetiva, como funcionam o contato e
-            as escolhas de analytics neste portfólio.
-          </p>
+        <div className={`ds-section-shell ${heroWithMediaGrid}`}>
+          <div className="min-w-0">
+            <Breadcrumb
+              items={[
+                { label: "Início", href: "/" },
+                { label: "Privacidade", href: "/privacidade" },
+              ]}
+            />
+            <h1 className="ds-section-title text-white">
+              Privacidade e consentimento
+            </h1>
+            <p className="ds-copy max-w-[70ch] !text-[rgba(255,255,255,.78)]">
+              Esta página explica, de forma objetiva, como funcionam o contato e
+              as escolhas de analytics neste portfólio.
+            </p>
+          </div>
+          <PagePiece image="/3d/estado-dados.webp" />
         </div>
       </section>
 
@@ -68,7 +75,7 @@ export default function PrivacyPage() {
                 O responsável pelo site é Evandro Fonseca Junior. Para contato
                 ou solicitações relacionadas a esta página, escreva para{" "}
                 <a
-                  className="font-medium underline underline-offset-4"
+                  className="py-1 font-medium underline underline-offset-4"
                   href="mailto:[email protected]"
                 >
                   evandrofonsecajunior@gmail.com