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/cases/page.tsx

@@ -8,6 +8,7 @@ import {
   textLink,
 } from "@/app/components/button-styles";
 import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
+import { PagePiece } from "@/app/components/PagePiece";
 import WhatsAppLink from "@/app/components/WhatsAppLink";
 import { safeJsonLd } from "@/lib/jsonld";
 import { buildBreadcrumbList, buildPageSocialMetadata } from "@/lib/seo";
@@ -20,7 +21,7 @@ import {
 } from "@/lib/site-content";
 import { CASES_SUBJECT } from "@/lib/whatsapp";
 import { CaseCoverLink } from "./_components/CaseCoverLink";
-import { compactHero } from "./_components/hero-styles";
+import { compactHero, heroWithMediaGrid } from "./_components/hero-styles";
 
 const pageUrl = `${siteUrl}/cases`;
 const pageTitle = "Cases: sites e sistemas para empresas";
@@ -42,45 +43,60 @@ export const metadata: Metadata = {
   }),
 };
 
-/** Cartão de um case de cliente, com a capa do site (quando há captura gravada), o resumo e o botão do case. */
+/**
+ * Cartão de um case de cliente, com a capa do site (quando há captura gravada), o resumo e o botão do case.
+ * `wide`: o cartão que sobraria sozinho na última linha ocupa a linha inteira, capa à esquerda e texto à direita.
+ */
 function ClientCaseCard({
   caseStudy,
   priority = false,
+  wide = false,
 }: {
   caseStudy: CaseStudyContent;
   /** Capa que abre a página: sem mosaico no topo, a primeira capa é a maior imagem visível. */
   priority?: boolean;
+  wide?: boolean;
 }) {
   return (
-    <article className="ds-card !h-auto">
+    <article
+      className={`ds-card !h-auto ${
+        // a partir de 1025 px, onde .ds-grid-2 (globals.css) passa a duas colunas; o "!" vence o display:flex de .ds-card,
+        // que fica fora das camadas do Tailwind
+        wide
+          ? "min-[1025px]:col-span-2 min-[1025px]:!grid min-[1025px]:grid-cols-2 min-[1025px]:items-center min-[1025px]:gap-x-sp-8 min-[1025px]:[&>:first-child]:mb-0"
+          : ""
+      }`}
+    >
       <CaseCoverLink
         id={caseStudy.id}
         title={caseStudy.title}
         demoUrl={caseStudy.demoUrl}
         priority={priority}
       />
-      <div className="ds-kicker">{caseStudy.title}</div>
-      <h3 className="ds-card-title">{caseStudy.headline}</h3>
-      <p className="ds-copy">{caseStudy.summary}</p>
-      <div className="mt-sp-6 flex flex-wrap items-center gap-sp-3">
-        <HoverPrefetchLink
-          href={`/cases/${caseStudy.id}`}
-          className={secondaryButtonLight}
-        >
-          {buttonLabels.case}
-          <span className="sr-only"> {caseStudy.title}</span>
-        </HoverPrefetchLink>
-        {caseStudy.demoUrl ? (
-          <a
-            href={caseStudy.demoUrl}
-            className={textLink}
-            target="_blank"
-            rel="noreferrer"
+      <div>
+        <div className="ds-kicker">{caseStudy.title}</div>
+        <h3 className="ds-card-title">{caseStudy.headline}</h3>
+        <p className="ds-copy">{caseStudy.summary}</p>
+        <div className="mt-sp-6 flex flex-wrap items-center gap-sp-3">
+          <HoverPrefetchLink
+            href={`/cases/${caseStudy.id}`}
+            className={secondaryButtonLight}
           >
-            {buttonLabels.site}
+            {buttonLabels.case}
             <span className="sr-only"> {caseStudy.title}</span>
-          </a>
-        ) : null}
+          </HoverPrefetchLink>
+          {caseStudy.demoUrl ? (
+            <a
+              href={caseStudy.demoUrl}
+              className={textLink}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              {buttonLabels.site}
+              <span className="sr-only"> {caseStudy.title}</span>
+            </a>
+          ) : null}
+        </div>
       </div>
     </article>
   );
@@ -144,15 +160,14 @@ export default function CasesPage() {
       <section
         className={`ds-section ds-section-dark ${pageTop} ${compactHero}`}
       >
-        <div className="ds-section-shell">
-          <div className="max-w-[860px]">
+        <div className={`ds-section-shell ${heroWithMediaGrid}`}>
+          <div className="min-w-0 max-w-[860px]">
             <Breadcrumb
               items={[
                 { label: "Início", href: "/" },
                 { label: "Cases", href: "/cases" },
               ]}
             />
-            <p className="ds-eyebrow">Trabalhos entregues</p>
             <h1 className="ds-section-title max-w-[18ch] text-balance text-white">
               Veja o que já fiz para empresas.
             </h1>
@@ -160,6 +175,7 @@ export default function CasesPage() {
               {pageLead}
             </p>
           </div>
+          <PagePiece image="/3d/estado-tela.webp" />
         </div>
       </section>
 
@@ -169,11 +185,12 @@ export default function CasesPage() {
             Projetos de clientes
           </h2>
           <div className="ds-grid-2 mt-sp-8 items-start">
-            {clientCasesForListing.map((caseStudy, index) => (
+            {clientCasesForListing.map((caseStudy, index, all) => (
               <ClientCaseCard
                 key={caseStudy.id}
                 caseStudy={caseStudy}
                 priority={index === 0}
+                wide={index === all.length - 1 && all.length % 2 === 1}
               />
             ))}
           </div>
@@ -211,7 +228,7 @@ export default function CasesPage() {
               placement="cases_hub_footer"
               className={primaryButton}
             >
-              {buttonLabels.contact}
+              {buttonLabels.whatsapp}
             </WhatsAppLink>
             <HoverPrefetchLink href="/servicos" className={secondaryButtonDark}>
               {buttonLabels.allServices}