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

@@ -6,14 +6,20 @@ import {
   type ServiceOffer,
 } from "@/lib/site-content";
 
-function OfferCard({ offer }: { offer: ServiceOffer }) {
+function OfferCard({
+  offer,
+  className,
+}: {
+  offer: ServiceOffer;
+  className: string;
+}) {
   const proofCases = offer.proof.caseIds.flatMap((id) => {
     const caseStudy = caseStudies.find((item) => item.id === id);
     return caseStudy ? [caseStudy] : [];
   });
 
   return (
-    <article className="ds-card">
+    <article className={`ds-card ${className}`}>
       <h3 className="ds-card-title !mt-0 text-balance">{offer.name}</h3>
       <p className="ds-copy !flex-grow-0">{offer.summary}</p>
       <ul className="ds-list space-y-sp-2">
@@ -55,16 +61,30 @@ function OfferCard({ offer }: { offer: ServiceOffer }) {
   );
 }
 
-/** As três ofertas, lado a lado no computador: nome, o que a pessoa recebe, onde ver funcionando e o link da página certa. */
+/**
+ * Largura de cada cartão na grade de 6 colunas: três por linha (2 colunas cada), e a última linha incompleta se divide
+ * por inteiro, sem célula vazia (dois cartões: 3 colunas cada; um: a linha toda).
+ */
+function offerSpan(index: number, total: number) {
+  const rest = total % 3;
+  if (index < total - rest) return "lg:col-span-2";
+  return rest === 2 ? "lg:col-span-3" : "lg:col-span-6";
+}
+
+/** As ofertas lado a lado no computador, três por linha: nome, o que a pessoa recebe, onde ver funcionando e o link da página certa. */
 export function ServiceOfferCards({
   offers,
 }: {
   offers: readonly ServiceOffer[];
 }) {
   return (
-    <div className="mt-sp-8 grid items-stretch gap-sp-6 lg:grid-cols-3">
-      {offers.map((offer) => (
-        <OfferCard key={offer.id} offer={offer} />
+    <div className="mt-sp-8 grid items-stretch gap-sp-6 lg:grid-cols-6">
+      {offers.map((offer, index) => (
+        <OfferCard
+          key={offer.id}
+          offer={offer}
+          className={offerSpan(index, offers.length)}
+        />
       ))}
     </div>
   );