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/PinnedReel.tsx

@@ -9,13 +9,16 @@ import {
   useMemo,
   useRef,
   useState,
+  ViewTransition,
 } from "react";
+import { coverTransitionProps } from "@/app/cases/_components/cover-transition";
 import { isWebKit } from "@/lib/device";
 import {
   chapterIndexAtScroll,
   chapterScrollFraction,
   getScrubSource,
   getShowcaseAssets,
+  projectKicker,
   videoFractionAtScroll,
 } from "@/lib/project-showcase";
 import { BrowserFrame, displayUrl } from "./BrowserFrame";
@@ -550,15 +553,17 @@ function ReelLayer({
         <div className="ds-reel-screen">
           {/* o pôster é a imagem de baixo (uma só, otimizada): o vídeo, por cima, cobre-a ao carregar */}
           {poster && (
-            <Image
-              src={desktop.poster}
-              alt=""
-              width={desktop.width}
-              height={desktop.height}
-              sizes={LAPTOP_POSTER_SIZES}
-              loading="eager"
-              fetchPriority="low"
-            />
+            <ActiveCover id={config.id} active={isActive}>
+              <Image
+                src={desktop.poster}
+                alt=""
+                width={desktop.width}
+                height={desktop.height}
+                sizes={LAPTOP_POSTER_SIZES}
+                loading="eager"
+                fetchPriority="low"
+              />
+            </ActiveCover>
           )}
           <video
             ref={videoRef}
@@ -592,6 +597,29 @@ function ReelLayer({
   );
 }
 
+/**
+ * Só o projeto em cena leva o nome da capa (`case-<id>`): em "Ver case", o pôster do notebook viaja até o topo do
+ * case. É o pôster, e não o vídeo por cima dele, porque é a mesma imagem do topo do case (o vídeo está no meio da
+ * rolagem do site). O nome não troca de lugar numa atualização: o React só esquece um nome quando o
+ * <ViewTransition> sai da árvore, e um nome trocado no lugar ficava preso ao projeto antigo (aviso de nome
+ * repetido ao abrir a capa dele depois). Por isso o projeto que entra em cena ganha um <ViewTransition> novo,
+ * e só a imagem remonta (o vídeo fica).
+ */
+function ActiveCover({
+  id,
+  active,
+  children,
+}: {
+  id: string;
+  active: boolean;
+  children: React.ReactNode;
+}) {
+  if (!active) return children;
+  return (
+    <ViewTransition {...coverTransitionProps(id)}>{children}</ViewTransition>
+  );
+}
+
 const pad = (value: number) => String(value).padStart(2, "0");
 
 /**
@@ -643,7 +671,7 @@ function ReelCaption({
   return (
     <div className="ds-reel-caption" data-leaving={leaving ? "" : undefined}>
       <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>}