feat(servicos): ofertas no topo de /servicos, capa por assunto e diagramas

/servicos abre com as 3 ofertas e depois outros serviços; H1 de criação de sites e de engenharia com o nome da oferta; capa de cada serviço pelo assunto (SEV fora do próprio case cai de ~11 para 2 imagens); diagrama de fluxo em SVG nos serviços sem case; cases com o que o cliente passou a poder fazer e contato logo depois de Como ficou; FAQ num componente só; lastmod por rota; ProfessionalService com areaServed.

app/servicos/_components/ServiceRelatedCases.tsx

@@ -1,7 +1,11 @@
 import { CaseCoverLink } from "@/app/cases/_components/CaseCoverLink";
 import { secondaryButtonLight, textLink } from "@/app/components/button-styles";
 import HoverPrefetchLink from "@/app/components/HoverPrefetchLink";
-import { type CaseStudyContent, isClientCase } from "@/lib/site-content";
+import {
+  buttonLabels,
+  type CaseStudyContent,
+  isClientCase,
+} from "@/lib/site-content";
 
 function ServiceCaseCard({
   caseStudy,
@@ -31,7 +35,8 @@ function ServiceCaseCard({
           href={`/cases/${caseStudy.id}`}
           className={secondaryButtonLight}
         >
-          Ler case: {caseStudy.title}
+          {buttonLabels.case}
+          <span className="sr-only"> {caseStudy.title}</span>
         </HoverPrefetchLink>
         {caseStudy.demoUrl ? (
           <a
@@ -40,7 +45,8 @@ function ServiceCaseCard({
             target="_blank"
             rel="noreferrer"
           >
-            Abrir o site: {caseStudy.title}
+            {buttonLabels.site}
+            <span className="sr-only"> {caseStudy.title}</span>
           </a>
         ) : null}
       </div>
@@ -49,22 +55,30 @@ function ServiceCaseCard({
 }
 
 /**
- * "Onde já apliquei isso": os cases ligados ao serviço, cada um com uma frase sobre o que ele tem a ver com ele,
- * e a experiência profissional citada em texto (sem link). Sem case, fica só a nota de experiência, sem a frase
- * que manda abrir o case; sem case nem experiência, não mostra nada.
+ * Prova do serviço. Com algum case de cliente, é "Onde já apliquei isso": os cases ligados ao serviço, cada um com uma
+ * frase sobre o que ele tem a ver com ele, e a experiência profissional citada em texto (sem link). Sem case de cliente
+ * (só projeto próprio, só experiência ou nada), o título é "Como eu trabalho nisso", porque não há cliente para citar.
+ * Sem case, fica só a nota de experiência, sem a frase que manda abrir o case; sem case nem experiência, não mostra nada.
+ * O case cuja capa abre a página (`heroCaseId`) não ganha cartão aqui: a legenda da capa já o cita, com a mesma frase de
+ * relação, e a imagem e o nome dele não aparecem duas vezes na mesma página.
  */
 export function ServiceRelatedCases({
-  cases,
+  cases: allCases,
   relevance,
   experienceNote,
+  heroCaseId,
 }: {
   cases: readonly CaseStudyContent[];
   /** Por que cada case interessa a este serviço (chave: id do case). */
   relevance: Readonly<Record<string, string>>;
   experienceNote?: string;
+  /** Case cuja capa já está no topo da página, com legenda: fica de fora dos cartões. */
+  heroCaseId?: string;
 }) {
+  const cases = allCases.filter(({ id }) => id !== heroCaseId);
   const hasCases = cases.length > 0;
   if (!hasCases && !experienceNote) return null;
+  const hasClientCase = cases.some(isClientCase);
 
   return (
     <section
@@ -75,9 +89,13 @@ export function ServiceRelatedCases({
       <div className="ds-section-shell">
         <div className="ds-section-header">
           <div className="ds-section-meta">
-            <p className="ds-eyebrow">Trabalhos parecidos</p>
+            <p className="ds-eyebrow">
+              {hasClientCase ? "Trabalhos parecidos" : "Experiência"}
+            </p>
             <h2 id="casos-relacionados-titulo" className="ds-section-title">
-              Onde já apliquei isso
+              {hasClientCase
+                ? "Onde já apliquei isso"
+                : "Como eu trabalho nisso"}
             </h2>
             {hasCases ? (
               <p className="ds-section-description">