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/components/showcase/ProjectList.tsx

@@ -8,8 +8,14 @@ import {
   useId,
   useRef,
   useState,
+  ViewTransition,
 } from "react";
-import { type Device, getShowcaseAssets } from "@/lib/project-showcase";
+import { coverTransitionProps } from "@/app/cases/_components/cover-transition";
+import {
+  type Device,
+  getShowcaseAssets,
+  projectKicker,
+} from "@/lib/project-showcase";
 import { BrowserFrame, displayUrl } from "./BrowserFrame";
 import { PhoneFrame } from "./PhoneFrame";
 import { ProjectActions } from "./ProjectActions";
@@ -78,17 +84,20 @@ function ListItem({
   const ref = useRef<HTMLLIElement>(null);
   const near = useNearViewport(ref);
   const assets = device ? getShowcaseAssets(config.id, device) : null;
-  // só pôster (nunca vídeo): a imagem entra quando o item chega a ~1 tela da janela
+  // só pôster (nunca vídeo): a imagem entra quando o item chega a ~1 tela da janela. É a mesma capa do topo do
+  // case: viaja até lá na troca de página (o item tem uma moldura só, então o nome não se repete)
   const poster =
     assets && near ? (
-      <Image
-        src={assets.poster}
-        alt={`Captura de tela de ${project.title}`}
-        width={assets.width}
-        height={assets.height}
-        // o celular da moldura mede ~160 px no carrossel (o pôster de 390 px viria inteiro para 160 px de tela)
-        sizes={device === "mobile" ? "160px" : "50vw"}
-      />
+      <ViewTransition {...coverTransitionProps(config.id)}>
+        <Image
+          src={assets.poster}
+          alt={`Captura de tela de ${project.title}`}
+          width={assets.width}
+          height={assets.height}
+          // o celular da moldura mede ~160 px no carrossel (o pôster de 390 px viria inteiro para 160 px de tela)
+          sizes={device === "mobile" ? "160px" : "50vw"}
+        />
+      </ViewTransition>
     ) : null;
 
   return (
@@ -111,7 +120,7 @@ function ListItem({
       )}
       <div className="ds-reel-caption">
         <p className="ds-kicker">
-          {project.category} · {project.status}
+          {projectKicker(project.category, project.status)}
         </p>
         <h3 className="ds-reel-title">{project.title}</h3>
         {project.subtitle && <p className="ds-reel-sub">{project.subtitle}</p>}