feat(cases): prova certa por serviço, páginas internas com trabalho no topo

Diagnóstico sem case que não cabe; desktop com o GCC Installer como projeto próprio; IoT com o Twins Lab e a nota da Apolo. Mosaico de pôsteres em /servicos e /cases, faixa baixa em uma coluna no currículo, privacidade e laboratório; Laboratório como lista compacta; SEV começando por catálogo, pedido no WhatsApp e painel; Joinville e SC nos títulos; imagens do LCP com fetchPriority e sizes reais; pré-carregamento só no hover; 404 com Open Graph próprio.

app/cases/_components/hero-styles.ts

@@ -0,0 +1,15 @@
+/**
+ * Faixa de topo de uma página interna que não tem imagem ao lado: uma coluna só e mais baixa que a padrão.
+ * O "!" vence o CSS sem camada de globals.css (.ds-section: 72 a 112 px de folga em cima e embaixo).
+ * Em cima fica a altura do cabeçalho fixo mais um respiro, para a trilha não ficar por baixo dele; embaixo, 48 px.
+ * No celular vale o padding de `pageTop` (button-styles.ts) e o padrão de baixo.
+ */
+export const compactHero =
+  "md:!pt-[calc(var(--site-header-height)+var(--sp-10))] md:!pb-sp-12";
+
+/**
+ * Topo com imagem: texto à esquerda e a mídia à direita a partir de 1024 px (1,1 parte para 1), uma coluna abaixo disso.
+ * Os `sizes` das imagens (CaseCover e PosterMosaic) seguem esta grade.
+ */
+export const heroWithMediaGrid =
+  "grid items-center gap-y-sp-8 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,1fr)] lg:gap-x-sp-16";