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/servicos/_components/ServiceHero.tsx

@@ -8,6 +8,7 @@ import {
   primaryButton,
   secondaryButtonDark,
 } from "@/app/components/button-styles";
+import { PagePiece } from "@/app/components/PagePiece";
 import WhatsAppLink from "@/app/components/WhatsAppLink";
 import { buttonLabels, type ServicePageContent } from "@/lib/site-content";
 import { ServiceDiagram } from "./ServiceDiagram";
@@ -16,7 +17,8 @@ import type { ServiceHeroData } from "./service-page";
 
 /**
  * Topo da página do serviço: trilha, título, resposta, botão de contato e, na coluna ao lado, a capa do case escolhido
- * ou o esquema de fluxo. Sem nenhum dos dois, o topo é uma coluna só e mais baixo.
+ * ou o esquema de fluxo. Sem nenhum dos dois, o topo é uma coluna só e mais baixo; com `heroLoop`, a peça de blocos
+ * ocupa a coluna ao lado de 1024 px em diante, sem mudar a altura do topo.
  */
 export function ServiceHero({
   service,
@@ -26,6 +28,7 @@ export function ServiceHero({
   hero: ServiceHeroData;
 }) {
   const { heroCase, heroDevice, diagram, hasHeroSide, hasCaseCards } = hero;
+  const loop = hasHeroSide ? undefined : service.heroLoop;
 
   return (
     <section
@@ -34,9 +37,9 @@ export function ServiceHero({
       }`}
     >
       <div
-        className={`ds-section-shell ${hasHeroSide ? heroWithMediaGrid : ""}`}
+        className={`ds-section-shell ${hasHeroSide || loop ? heroWithMediaGrid : ""}`}
       >
-        <div className="max-w-[860px]">
+        <div className="min-w-0 max-w-[860px]">
           <Breadcrumb
             items={[
               { label: "Início", href: "/" },
@@ -44,7 +47,6 @@ export function ServiceHero({
               { label: service.navLabel, href: `/servicos/${service.slug}` },
             ]}
           />
-          <p className="ds-eyebrow">{service.eyebrow}</p>
           <h1 className="ds-section-title max-w-[22ch] text-balance text-white">
             {service.headline}
           </h1>
@@ -57,7 +59,7 @@ export function ServiceHero({
               placement="service_detail_hero"
               className={primaryButton}
             >
-              {buttonLabels.contact}
+              {buttonLabels.whatsapp}
             </WhatsAppLink>
             {hasCaseCards ? (
               <a href="#casos-relacionados" className={secondaryButtonDark}>
@@ -72,6 +74,8 @@ export function ServiceHero({
         </div>
         {diagram ? (
           <ServiceDiagram kind={diagram} />
+        ) : loop ? (
+          <PagePiece loop={loop} />
         ) : (
           <ServiceHeroCover
             caseStudy={heroCase}