feat(cases): mídia no topo, títulos de busca curtos e CreativeWork

Case com mídia ao lado do título e play acessível; problema de cada cliente reescrito com base nos dados; serviços relacionados em 2 cards; FAQ antes do próximo passo e bloco 'Onde já apliquei isso'; Apolo citada em IoT e arquitetura. metaTitle até 43 caracteres e descrições até 155 com teste; JSON-LD CreativeWork; imagens de compartilhamento abaixo de 100 KB; 404 e robots corrigidos; server-only nos módulos com node:.

app/cases/[slug]/opengraph-image.paths.test.tsx

@@ -1,15 +1,50 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
 import { notFound } from "next/navigation";
 import { ImageResponse } from "next/og";
 import { isValidElement } from "react";
-import { OG_SIZE, OgCard } from "@/lib/og-card";
+import {
+  OG_IMAGE_MAX_BYTES,
+  OG_SIZE,
+  OgCard,
+  readProjectOgImage,
+} from "@/lib/og-card";
 import { caseStudies } from "@/lib/site-content";
-import Image from "./opengraph-image";
+import Image, { generateImageMetadata } from "./opengraph-image";
 
 /**
  * Testes de caminhos-base de Image (imagem de compartilhamento do case):
- * slug desconhecido, id da imagem diferente do case, case de cliente e projeto de laboratório.
+ * slug desconhecido, id da imagem diferente do case, case com capa gravada (entregue como está, em JPEG,
+ * abaixo de 150 KB), capa pesada demais (cartão simples) e projeto de laboratório.
  */
 
+/** O jsdom não tem `Response`; a rota roda no Node e devolve uma. Aqui basta guardar o corpo e os cabeçalhos. */
+class FakeResponse {
+  constructor(
+    readonly body: Uint8Array,
+    readonly init: { headers: Record<string, string> },
+  ) {}
+}
+
+beforeAll(() => {
+  Object.assign(globalThis, { Response: FakeResponse });
+});
+
+jest.mock("@/lib/og-card", () => {
+  const actual = jest.requireActual("@/lib/og-card");
+  return { ...actual, readProjectOgImage: jest.fn(actual.readProjectOgImage) };
+});
+
+const mockedReadProjectOgImage = jest.mocked(readProjectOgImage);
+const actualReadProjectOgImage =
+  jest.requireActual<typeof import("@/lib/og-card")>(
+    "@/lib/og-card",
+  ).readProjectOgImage;
+
+afterEach(() => {
+  mockedReadProjectOgImage.mockImplementation(actualReadProjectOgImage);
+});
+
 jest.mock("next/navigation", () => ({
   notFound: jest.fn(() => {
     throw new Error("NEXT_NOT_FOUND");
@@ -47,11 +82,32 @@ function sentCard() {
 }
 
 describe("opengraph-image Image", () => {
-  it("path: client case with the matching image id -> card labelled as a client case", async () => {
+  it("path: case with a recorded cover -> the cover itself, in JPEG, under 150 KB, and no generated card", async () => {
     const caseStudy = getCase("sev-modaintima");
-    await renderImage(caseStudy.id, caseStudy.id);
+    const response = (await renderImage(
+      caseStudy.id,
+      caseStudy.id,
+    )) as unknown as FakeResponse;
 
     expect(notFound).not.toHaveBeenCalled();
+    expect(mockedImageResponse).not.toHaveBeenCalled();
+    expect(response).toBeInstanceOf(FakeResponse);
+    expect(response.init.headers["Content-Type"]).toBe("image/jpeg");
+    const cover = readFileSync(
+      join(process.cwd(), "public/videos/sev-modaintima/og.jpg"),
+    );
+    expect(Buffer.from(response.body).equals(cover)).toBe(true);
+    expect(response.body.length).toBeLessThan(150_000);
+  });
+
+  it("path: cover that weighs 150 KB or more -> the plain generated card, with no background", async () => {
+    const caseStudy = getCase("sev-modaintima");
+    mockedReadProjectOgImage.mockReturnValue(undefined);
+    expect(OG_IMAGE_MAX_BYTES).toBe(150_000);
+
+    const response = await renderImage(caseStudy.id, caseStudy.id);
+
+    expect(response).not.toBeInstanceOf(FakeResponse);
     expect(mockedImageResponse).toHaveBeenCalledTimes(1);
     const { card, options } = sentCard();
     expect(card.type).toBe(OgCard);
@@ -60,10 +116,31 @@ describe("opengraph-image Image", () => {
       title: caseStudy.title,
       description: caseStudy.summary,
     });
-    expect(card.props.backgroundImage).toMatch(/^data:image\/jpeg;base64,/);
+    expect(card.props.backgroundImage).toBeUndefined();
     expect(options).toEqual(OG_SIZE);
   });
 
+  it("path: image metadata -> JPEG for covers, PNG for generated cards, and every case listed without a slug", () => {
+    const [sev] = generateImageMetadata({ params: { slug: "sev-modaintima" } });
+    const [twins] = generateImageMetadata({ params: { slug: "twins-lab" } });
+    expect(sev).toMatchObject({
+      id: "sev-modaintima",
+      contentType: "image/jpeg",
+      size: OG_SIZE,
+    });
+    expect(twins).toMatchObject({
+      id: "twins-lab",
+      contentType: "image/png",
+      size: OG_SIZE,
+    });
+
+    const all = generateImageMetadata({ params: {} });
+    expect(all.map(({ id }) => id)).toEqual(caseStudies.map(({ id }) => id));
+    expect(
+      all.filter(({ contentType }) => contentType === "image/jpeg"),
+    ).toHaveLength(5);
+  });
+
   it("path: unknown slug -> notFound() and no image", async () => {
     await expect(renderImage("nao-existe", "nao-existe")).rejects.toThrow(
       "NEXT_NOT_FOUND",

app/cases/[slug]/opengraph-image.tsx

@@ -2,9 +2,10 @@ import { notFound } from "next/navigation";
 import { ImageResponse } from "next/og";
 import {
   OG_CONTENT_TYPE,
+  OG_PHOTO_CONTENT_TYPE,
   OG_SIZE,
   OgCard,
-  readProjectOgBackground,
+  readProjectOgImage,
 } from "@/lib/og-card";
 import { caseStudies, isClientCase } from "@/lib/site-content";
 
@@ -12,12 +13,15 @@ function getCaseStudy(slug: string) {
   return caseStudies.find(({ id }) => id === slug);
 }
 
+// Quem tem a capa gravada (public/videos/<id>/og.jpg, abaixo de 150 KB) a entrega como está, em JPEG: o cartão em PNG com a capa de fundo passava de 270 KB.
 function getImageMetadata(caseStudy: (typeof caseStudies)[number]) {
   return {
     id: caseStudy.id,
     alt: `Case ${caseStudy.title} — Evandro Fonseca Junior`,
     size: OG_SIZE,
-    contentType: OG_CONTENT_TYPE,
+    contentType: readProjectOgImage(caseStudy.id)
+      ? OG_PHOTO_CONTENT_TYPE
+      : OG_CONTENT_TYPE,
   };
 }
 
@@ -46,6 +50,16 @@ export default async function Image({
   const caseStudy = getCaseStudy(slug);
   if (!caseStudy || imageId !== caseStudy.id) notFound();
 
+  const photo = readProjectOgImage(caseStudy.id);
+  if (photo) {
+    return new Response(new Uint8Array(photo), {
+      headers: {
+        "Content-Type": OG_PHOTO_CONTENT_TYPE,
+        "Cache-Control": "public, max-age=86400",
+      },
+    });
+  }
+
   return new ImageResponse(
     <OgCard
       eyebrow={
@@ -53,7 +67,6 @@ export default async function Image({
       }
       title={caseStudy.title}
       description={caseStudy.summary}
-      backgroundImage={readProjectOgBackground(caseStudy.id)}
     />,
     OG_SIZE,
   );

app/cases/[slug]/page.facts.paths.test.tsx

@@ -0,0 +1,36 @@
+import { render, screen } from "@testing-library/react";
+import { caseStudies } from "@/lib/site-content";
+import CasePage from "./page";
+
+/**
+ * Teste de caminhos-base de CasePage: os "fatos do projeto" no topo.
+ * O teste principal cobre a lista ausente (`undefined`) e a lista preenchida; aqui, a lista vazia (`[]`).
+ */
+
+jest.mock("next/navigation", () => ({ notFound: jest.fn() }));
+
+function getCase(id: string) {
+  const caseStudy = caseStudies.find((item) => item.id === id);
+  if (!caseStudy) throw new Error(`Missing case ${id}`);
+  return caseStudy;
+}
+
+describe("CasePage: fatos do projeto", () => {
+  it("path: empty facts list -> no list in the hero, summary stays", async () => {
+    const caseStudy = getCase("lavacao-047");
+    caseStudy.facts = [];
+    try {
+      const ui = await CasePage({
+        params: Promise.resolve({ slug: caseStudy.id }),
+      });
+      render(ui);
+
+      expect(
+        screen.queryByRole("list", { name: "Fatos do projeto" }),
+      ).toBeNull();
+      expect(screen.getByText(caseStudy.summary)).toBeVisible();
+    } finally {
+      delete caseStudy.facts;
+    }
+  });
+});

app/cases/[slug]/page.paths.test.tsx

@@ -66,12 +66,20 @@ describe("CasePage: caminhos que o teste principal não cobre", () => {
       screen.getByRole("heading", { level: 2, name: "Como ficou" }),
     ).toBeVisible();
     expect(
-      screen.getByLabelText(`Vídeo do site ${caseStudy.title} no celular`),
+      screen.getByRole("button", {
+        name: `Reproduzir o vídeo do site ${caseStudy.title} no celular`,
+      }),
     ).toBeInTheDocument();
     expect(
-      screen.queryByLabelText(`Vídeo do site ${caseStudy.title} no computador`),
+      screen.queryByRole("button", {
+        name: `Reproduzir o vídeo do site ${caseStudy.title} no computador`,
+      }),
     ).toBeNull();
+    // sem captura do computador, o topo fica em uma coluna, sem moldura de navegador
     expect(container.querySelector(".ds-bframe")).toBeNull();
+    expect(
+      container.querySelector("section")?.querySelector(".grid"),
+    ).toBeNull();
     expect(container.querySelector(".ds-phone")).not.toBeNull();
     expect(screen.queryByRole("link", { name: /^Abrir o site/ })).toBeNull();
   });
@@ -115,11 +123,12 @@ describe("CasePage: caminhos que o teste principal não cobre", () => {
     await renderCase(caseStudy.id);
 
     expect(screen.getByText(/Projeto de laboratório/)).toBeVisible();
+    expect(screen.queryByRole("link", { name: /^Ver o serviço:/ })).toBeNull();
+    expect(screen.queryByText("Serviços ligados a este projeto")).toBeNull();
     expect(
-      screen.queryByRole("link", { name: /^Ver serviço relacionado:/ }),
-    ).toBeNull();
-    expect(
-      screen.getByRole("link", { name: "Conversar sobre um projeto parecido" }),
+      screen.getByRole("link", {
+        name: "Tem um problema parecido? Vamos conversar.",
+      }),
     ).toBeVisible();
     expect(
       screen.getByRole("link", { name: "Ver outros cases" }),

app/cases/[slug]/page.test.tsx

@@ -1,4 +1,4 @@
-import { render, screen, within } from "@testing-library/react";
+import { fireEvent, render, screen, within } from "@testing-library/react";
 import { caseStudies, getRelatedServices, siteUrl } from "@/lib/site-content";
 import CasesPage from "../page";
 import CasePage, { generateMetadata, generateStaticParams } from "./page";
@@ -49,24 +49,34 @@ function readJsonLdEntities(container: HTMLElement): Record<string, unknown>[] {
   });
 }
 
-/** Nenhum link para /#contact nem para o GitHub; o contato é o WhatsApp com o contexto do case. */
-function expectContactAndNoDeadLinks(caseStudy: { title: string }) {
+/**
+ * Nenhum link para /#contact nem para o GitHub; o contato é o WhatsApp com o contexto do case.
+ * Case de cliente: "projeto parecido"; projeto de laboratório: "problema parecido".
+ */
+function expectContactAndNoDeadLinks(caseStudy: { id: string; title: string }) {
   const hrefs = screen
     .getAllByRole("link")
     .map((link) => link.getAttribute("href") ?? "");
   expect(hrefs).not.toContain("/#contact");
   expect(hrefs.some((href) => /github/i.test(href))).toBe(false);
 
+  const isClient = clientCaseIds.includes(caseStudy.id);
   const cta = screen.getByRole("link", {
-    name: "Conversar sobre um projeto parecido",
+    name: isClient
+      ? "Conversar sobre um projeto parecido"
+      : "Tem um problema parecido? Vamos conversar.",
   });
   const destination = new URL(cta.getAttribute("href") ?? "");
   expect(destination.origin).toBe("https://wa.me");
   expect(destination.searchParams.get("text")).toContain(
-    `um projeto parecido com o da ${caseStudy.title}`,
+    isClient
+      ? `um projeto parecido com o da ${caseStudy.title}`
+      : `um problema parecido com o do projeto ${caseStudy.title}`,
   );
   expect(cta).toHaveAttribute("target", "_blank");
   expect(cta).toHaveAttribute("rel", expect.stringContaining("noopener"));
+  // limão preenchido só no contato: o botão de play e os demais não o usam
+  expect(cta.className).toContain("bg-[var(--slash)]");
 }
 
 it("exposes the eight public cases, the two new client cases among them", async () => {
@@ -80,16 +90,16 @@ it("exposes the eight public cases, the two new client cases among them", async
   for (const id of ["sev-modaintima", "lavacao-047", "as-servicos"]) {
     const caseStudy = getCase(id);
     const url = `${siteUrl}/cases/${caseStudy.id}`;
-    const title = `${caseStudy.title}: ${caseStudy.subtitle}`;
+    const { metaTitle: title, metaDescription: description } = caseStudy;
     const metadata = await generateMetadata({
       params: Promise.resolve({ slug: caseStudy.id }),
     });
     expect(metadata).toMatchObject({
       title,
-      description: caseStudy.summary,
+      description,
       alternates: { canonical: url },
-      openGraph: { title, description: caseStudy.summary, url },
-      twitter: { title, description: caseStudy.summary },
+      openGraph: { title, description, url },
+      twitter: { title, description },
     });
     expect(metadata).not.toHaveProperty("keywords");
   }
@@ -101,7 +111,7 @@ it("renders a client case in the sales order, with media, contact and collapsed
 
   const heading = screen.getByRole("heading", { level: 1 });
   expect(heading).toHaveTextContent(caseStudy.headline);
-  expect(heading.nextElementSibling).toHaveTextContent(caseStudy.summary);
+  expect(isBefore(heading, screen.getByText(caseStudy.summary))).toBe(true);
   expect(screen.getByText(/Case de cliente/)).toBeVisible();
 
   const sectionNames = [
@@ -130,33 +140,28 @@ it("renders a client case in the sales order, with media, contact and collapsed
   // sem dado real, não há seção de resultado
   expect(screen.queryByRole("heading", { name: "Resultado" })).toBeNull();
 
-  // mídia: pôster e vídeo do computador e do celular
-  const desktopVideo = screen.getByLabelText(
-    `Vídeo do site ${caseStudy.title} no computador`,
+  // mídia: o pôster do computador e do celular com um botão de play; nenhum vídeo parado com controles
+  expect(container.querySelector("video")).toBeNull();
+  const desktopPlay = screen.getByRole("button", {
+    name: `Reproduzir o vídeo do site ${caseStudy.title} no computador`,
+  });
+  const mobilePlay = screen.getByRole("button", {
+    name: `Reproduzir o vídeo do site ${caseStudy.title} no celular`,
+  });
+  const mediaSection = screen
+    .getByRole("heading", { level: 2, name: "Como ficou" })
+    .closest("section");
+  expect(mediaSection?.querySelector(".ds-bframe")).toContainElement(
+    desktopPlay,
   );
-  const mobileVideo = screen.getByLabelText(
-    `Vídeo do site ${caseStudy.title} no celular`,
-  );
-  expect(desktopVideo).toHaveAttribute(
-    "poster",
-    `/videos/${caseStudy.id}/desktop.webp`,
-  );
-  expect(mobileVideo).toHaveAttribute(
-    "poster",
-    `/videos/${caseStudy.id}/mobile.webp`,
-  );
-  expect(
-    desktopVideo.querySelectorAll("source[src^='/videos/sev-modaintima/']"),
-  ).toHaveLength(2);
-  expect(container.querySelector(".ds-bframe")).toContainElement(desktopVideo);
-  expect(container.querySelector(".ds-phone")).toContainElement(mobileVideo);
+  expect(mediaSection?.querySelector(".ds-phone")).toContainElement(mobilePlay);
   expect(
     screen.getByRole("link", { name: `Abrir o site ${caseStudy.title}` }),
   ).toHaveAttribute("href", caseStudy.demoUrl);
 
   expectContactAndNoDeadLinks(caseStudy);
 
-  // detalhes técnicos: recolhidos, no fim da página
+  // detalhes técnicos: recolhidos, junto do conteúdo (logo depois do que foi feito), não numa faixa à parte
   const details = container.querySelector("details");
   if (!details) throw new Error("Missing technical details");
   expect(details).not.toHaveAttribute("open");
@@ -167,11 +172,16 @@ it("renders a client case in the sales order, with media, contact and collapsed
   for (const decision of caseStudy.decisions) {
     expect(within(details).getByText(decision)).not.toBeVisible();
   }
-  const contactHeading = sectionHeadings[sectionHeadings.length - 1];
-  expect(isBefore(contactHeading, details)).toBe(true);
+  const doneSection = sectionHeadings[2].closest("section");
+  expect(doneSection).toContainElement(details);
+  expect(isBefore(screen.getByText(caseStudy.deliveries[0]), details)).toBe(
+    true,
+  );
+  expect(isBefore(details, sectionHeadings[3])).toBe(true);
   expect(container.querySelectorAll("details")).toHaveLength(1);
-  const lastSection = container.querySelector("article")?.lastElementChild;
-  expect(lastSection).toContainElement(details);
+  expect(
+    container.querySelector("section[aria-label='Detalhes técnicos']"),
+  ).toBeNull();
 
   // o que saiu: desafio verificável, limites da evidência, fontes e commits
   for (const name of [
@@ -186,11 +196,14 @@ it("renders a client case in the sales order, with media, contact and collapsed
   expect(container.textContent).not.toMatch(/Commit:|[0-9a-f]{40}/);
 
   const graph = readJsonLdEntities(container);
-  expect(graph.map((node) => node["@type"])).toEqual(["BreadcrumbList"]);
+  expect(graph.map((node) => node["@type"])).toEqual([
+    "CreativeWork",
+    "BreadcrumbList",
+  ]);
   expect(JSON.stringify(graph)).not.toMatch(
     /Article|FAQPage|ProfessionalService|LocalBusiness/,
   );
-  const breadcrumb = graph[0] as {
+  const breadcrumb = graph[1] as {
     itemListElement: Array<{
       "@type": string;
       position: number;
@@ -216,7 +229,7 @@ it("renders a client case in the sales order, with media, contact and collapsed
   ]);
 
   const visibleBreadcrumb = screen.getByRole("navigation", {
-    name: "Breadcrumb",
+    name: "Trilha de navegação",
   });
   expect(
     within(visibleBreadcrumb)
@@ -253,7 +266,7 @@ it("renders the two new client cases from the portfolio data", async () => {
   }
 });
 
-it("labels a laboratory case, skips the media block and links its service", async () => {
+it("labels a laboratory case, skips the media block and shows its service as a card", async () => {
   const caseStudy = getCase("twins-lab");
   const { container } = await renderCase(caseStudy.id);
 
@@ -263,11 +276,12 @@ it("labels a laboratory case, skips the media block and links its service", asyn
   ).toBeVisible();
   expect(screen.queryByRole("heading", { name: "Como ficou" })).toBeNull();
   expect(container.querySelector("video")).toBeNull();
+  expect(container.querySelector(".ds-bframe")).toBeNull();
   expect(screen.queryByRole("link", { name: /^Abrir o site/ })).toBeNull();
   expect(screen.queryByText(/indispon/i)).toBeNull();
 
   const relatedLinks = screen.getAllByRole("link", {
-    name: /^Ver serviço relacionado:/,
+    name: /^Ver o serviço:/,
   });
   expect(relatedLinks.map((link) => link.getAttribute("href"))).toEqual(
     getRelatedServices(caseStudy.id).map(({ slug }) => `/servicos/${slug}`),
@@ -276,6 +290,24 @@ it("labels a laboratory case, skips the media block and links its service", asyn
   expectContactAndNoDeadLinks(caseStudy);
 });
 
+it("turns the contact of a laboratory case into the 'problema parecido' invitation", async () => {
+  for (const id of labCaseIds) {
+    const { unmount } = await renderCase(id);
+
+    expect(screen.queryByText("Quer um projeto parecido com este?")).toBeNull();
+    expect(
+      screen.queryByRole("link", {
+        name: "Conversar sobre um projeto parecido",
+      }),
+    ).toBeNull();
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Fale sobre o seu caso" }),
+    ).toBeVisible();
+    expectContactAndNoDeadLinks(getCase(id));
+    unmount();
+  }
+});
+
 it("shows the author's role and no site button for a client project without a public site", async () => {
   const caseStudy = getCase("as-servicos");
   expect(caseStudy.demoUrl).toBeNull();
@@ -289,7 +321,9 @@ it("shows the author's role and no site button for a client project without a pu
   expect(screen.queryByText(/indispon/i)).toBeNull();
   // a capa continua nas molduras
   expect(
-    screen.getByLabelText(`Vídeo do site ${caseStudy.title} no computador`),
+    screen.getByRole("button", {
+      name: `Reproduzir o vídeo do site ${caseStudy.title} no computador`,
+    }),
   ).toBeInTheDocument();
 });
 
@@ -327,26 +361,195 @@ it("shows the result section only when the case has real data", async () => {
   }
 });
 
-it("links every service related to a client case", async () => {
-  const caseStudy = getCase("sc-plus");
+it("shows at most two related services, as cards under the contact button", async () => {
+  // sev-modaintima tem quatro serviços ligados; só os dois primeiros viram cards
+  const sev = getCase("sev-modaintima");
+  const all = getRelatedServices(sev.id);
+  expect(all.length).toBeGreaterThan(2);
+  const { unmount } = await renderCase(sev.id);
+
+  const cards = screen.getAllByRole("link", { name: /^Ver o serviço:/ });
+  expect(cards).toHaveLength(2);
+  expect(cards.map((link) => link.getAttribute("href"))).toEqual(
+    all.slice(0, 2).map(({ slug }) => `/servicos/${slug}`),
+  );
+  for (const link of cards) {
+    const card = link.closest("article");
+    expect(card).toHaveClass("ds-card");
+    expect(
+      within(card as HTMLElement).getByRole("heading", { level: 3 }),
+    ).toBeVisible();
+  }
+  expect(
+    screen.queryByRole("link", { name: /^Ver serviço relacionado:/ }),
+  ).toBeNull();
+  const contact = screen.getByRole("link", {
+    name: "Conversar sobre um projeto parecido",
+  });
+  expect(isBefore(contact, cards[0])).toBe(true);
+  unmount();
+
+  // sc-plus tem dois; as-servicos, um
+  for (const [id, expected] of [
+    ["sc-plus", 2],
+    ["as-servicos", 1],
+  ] as const) {
+    const { unmount: unmountCase } = await renderCase(id);
+    const links = screen.getAllByRole("link", { name: /^Ver o serviço:/ });
+    expect(links).toHaveLength(expected);
+    expect(links.map((link) => link.getAttribute("href"))).toEqual(
+      getRelatedServices(id)
+        .slice(0, 2)
+        .map(({ slug }) => `/servicos/${slug}`),
+    );
+    expectContactAndNoDeadLinks(getCase(id));
+    unmountCase();
+  }
+});
+
+it("writes the CreativeWork of a client case with creator, client and keywords", async () => {
+  const caseStudy = getCase("lavacao-047");
   const { container } = await renderCase(caseStudy.id);
 
-  const relatedLinks = screen.getAllByRole("link", {
-    name: /^Ver serviço relacionado:/,
-  });
-  expect(
-    relatedLinks
-      .map((link) => link.getAttribute("href"))
-      .sort((a, b) => (a ?? "").localeCompare(b ?? "")),
-  ).toEqual(
-    getRelatedServices(caseStudy.id)
-      .map(({ slug }) => `/servicos/${slug}`)
-      .sort(),
+  const work = readJsonLdEntities(container).find(
+    (node) => node["@type"] === "CreativeWork",
   );
-  expectContactAndNoDeadLinks(caseStudy);
-  expect(readJsonLdEntities(container).map((node) => node["@type"])).toEqual([
-    "BreadcrumbList",
-  ]);
+  expect(work).toEqual({
+    "@type": "CreativeWork",
+    "@id": `${siteUrl}/cases/lavacao-047#creative-work`,
+    name: "Lavação 047: Site e painel para lavação automotiva",
+    description: caseStudy.metaDescription,
+    url: `${siteUrl}/cases/lavacao-047`,
+    image: `${siteUrl}/cases/lavacao-047/opengraph-image/lavacao-047`,
+    inLanguage: "pt-BR",
+    creator: { "@id": `${siteUrl}/#person` },
+    sourceOrganization: {
+      "@type": "Organization",
+      name: "Lavação 047",
+      url: "https://landing-page-lavacao047.vercel.app",
+    },
+    keywords: caseStudy.stack.join(", "),
+  });
+});
+
+it("writes the CreativeWork of a laboratory case without a client", async () => {
+  const caseStudy = getCase("twins-lab");
+  const { container } = await renderCase(caseStudy.id);
+
+  const work = readJsonLdEntities(container).find(
+    (node) => node["@type"] === "CreativeWork",
+  );
+  expect(work).toMatchObject({
+    name: "Twins Lab: Painel ao vivo de um reator simulado",
+    url: `${siteUrl}/cases/twins-lab`,
+    creator: { "@id": `${siteUrl}/#person` },
+    keywords: "Next.js, TypeScript, NextAuth, MongoDB, SSE",
+  });
+  expect(work).not.toHaveProperty("sourceOrganization");
+});
+
+it("puts the project cover next to the title, and below it on a phone, in a browser frame", async () => {
+  const caseStudy = getCase("sev-modaintima");
+  const { container } = await renderCase(caseStudy.id);
+
+  const hero = container.querySelector("section");
+  if (!hero) throw new Error("Missing hero");
+  const frame = hero.querySelector(".ds-bframe");
+  if (!frame) throw new Error("Missing hero frame");
+  expect(frame.querySelector("img")).toHaveAttribute(
+    "alt",
+    `Captura de tela do site ${caseStudy.title}`,
+  );
+  expect(frame.querySelector(".ds-bframe-url")).toHaveTextContent(
+    "sevmodaintima.com.br",
+  );
+  // a capa abre a página: carrega antes das demais imagens
+  expect(frame.querySelector("img")).not.toHaveAttribute("loading", "lazy");
+
+  // ordem do documento (a do celular): título, mídia, resumo
+  const heading = screen.getByRole("heading", { level: 1 });
+  const summary = screen.getByText(caseStudy.summary);
+  expect(hero).toContainElement(summary);
+  expect(isBefore(heading, frame)).toBe(true);
+  expect(isBefore(frame, summary)).toBe(true);
+  // no computador: duas colunas, texto à esquerda e mídia à direita
+  const grid = frame.closest(".grid");
+  expect(grid?.className).toContain("lg:grid-cols-[");
+  expect(frame.parentElement?.className).toContain("lg:col-start-2");
+  expect(heading.parentElement?.className).toContain("lg:col-start-1");
+});
+
+it("keeps the hero in one column when the case has no capture", async () => {
+  const { container } = await renderCase("twins-lab");
+
+  const hero = container.querySelector("section");
+  expect(hero?.querySelector(".ds-bframe")).toBeNull();
+  expect(hero?.querySelector(".grid")).toBeNull();
+});
+
+it("shows the optional facts only when they are filled in", async () => {
+  const caseStudy = getCase("lavacao-047");
+  const empty = await renderCase(caseStudy.id);
+  expect(screen.queryByRole("list", { name: "Fatos do projeto" })).toBeNull();
+  empty.unmount();
+
+  caseStudy.facts = ["Fato de teste um", "Fato de teste dois"];
+  try {
+    await renderCase(caseStudy.id);
+    const list = screen.getByRole("list", { name: "Fatos do projeto" });
+    expect(within(list).getAllByRole("listitem")).toHaveLength(2);
+    expect(within(list).getByText("Fato de teste um")).toBeVisible();
+    expect(isBefore(screen.getByText(caseStudy.summary), list)).toBe(true);
+  } finally {
+    delete caseStudy.facts;
+  }
+});
+
+it("starts the video only when the visitor presses play, and moves focus to it", async () => {
+  const caseStudy = getCase("sev-modaintima");
+  const { container } = await renderCase(caseStudy.id);
+
+  const play = screen.getByRole("button", {
+    name: `Reproduzir o vídeo do site ${caseStudy.title} no computador`,
+  });
+  expect(play).toBeVisible();
+  expect(play.className).not.toContain("--slash");
+  expect(container.querySelector("video")).toBeNull();
+
+  fireEvent.click(play);
+
+  const video = screen.getByLabelText(
+    `Vídeo do site ${caseStudy.title} no computador`,
+  );
+  expect(video.tagName).toBe("VIDEO");
+  expect(video).toHaveAttribute(
+    "poster",
+    `/videos/${caseStudy.id}/desktop.webp`,
+  );
+  expect(video).toHaveAttribute("controls");
+  expect(video).toHaveFocus();
+  expect(
+    video.querySelectorAll("source[src^='/videos/sev-modaintima/']"),
+  ).toHaveLength(2);
+  expect(video.closest(".ds-bframe")).not.toBeNull();
+  expect(
+    screen.queryByRole("button", {
+      name: `Reproduzir o vídeo do site ${caseStudy.title} no computador`,
+    }),
+  ).toBeNull();
+  // o celular continua com o pôster até a pessoa tocar nele
+  expect(
+    screen.getByRole("button", {
+      name: `Reproduzir o vídeo do site ${caseStudy.title} no celular`,
+    }),
+  ).toBeVisible();
+});
+
+it("gives the case page the same shell as the home, with no narrow max-width", async () => {
+  const { container } = await renderCase("sev-modaintima");
+  for (const shell of container.querySelectorAll(".ds-section-shell")) {
+    expect(shell.className).not.toMatch(/max-w-/);
+  }
 });
 
 it("lists client cases with a cover first, then the laboratory, and keeps the schema aligned", () => {
@@ -409,7 +612,7 @@ it("lists client cases with a cover first, then the laboratory, and keeps the sc
   expect(new URL(cta.getAttribute("href") ?? "").origin).toBe("https://wa.me");
 
   const visibleBreadcrumb = screen.getByRole("navigation", {
-    name: "Breadcrumb",
+    name: "Trilha de navegação",
   });
   expect(
     within(visibleBreadcrumb)

app/cases/[slug]/page.tsx

@@ -1,18 +1,15 @@
 import type { Metadata } from "next";
-import Link from "next/link";
 import { notFound } from "next/navigation";
-import { Breadcrumb } from "@/app/components/Breadcrumb";
-import {
-  pageTop,
-  primaryButton,
-  secondaryButtonDark,
-} from "@/app/components/button-styles";
-import WhatsAppLink from "@/app/components/WhatsAppLink";
 import { safeJsonLd } from "@/lib/jsonld";
-import { buildBreadcrumbList, buildPageSocialMetadata } from "@/lib/seo";
+import {
+  buildBreadcrumbList,
+  buildCaseJsonLd,
+  buildPageSocialMetadata,
+} from "@/lib/seo";
 import { caseStudies, isClientCase, siteUrl } from "@/lib/site-content";
+import { CaseContactSection } from "../_components/CaseContactSection";
+import { CaseHero } from "../_components/CaseHero";
 import { CaseMediaSection } from "../_components/CaseMediaSection";
-import { CaseRelatedServices } from "../_components/CaseRelatedServices";
 import { CaseResultSection } from "../_components/CaseResultSection";
 
 interface CasePageProps {
@@ -32,14 +29,13 @@ export async function generateMetadata({
   if (!caseStudy) return { title: "Case não encontrado" };
 
   const url = `${siteUrl}/cases/${caseStudy.id}`;
-  const title = `${caseStudy.title}: ${caseStudy.subtitle}`;
   return {
-    title,
-    description: caseStudy.summary,
+    title: caseStudy.metaTitle,
+    description: caseStudy.metaDescription,
     ...buildPageSocialMetadata({
       url,
-      title,
-      description: caseStudy.summary,
+      title: caseStudy.metaTitle,
+      description: caseStudy.metaDescription,
       type: "article",
     }),
   };
@@ -55,6 +51,7 @@ export default async function CasePage({ params }: CasePageProps) {
   const jsonLd = {
     "@context": "https://schema.org",
     "@graph": [
+      buildCaseJsonLd(caseStudy),
       buildBreadcrumbList(pageUrl, [
         ["Início", siteUrl],
         ["Cases", `${siteUrl}/cases`],
@@ -67,32 +64,12 @@ export default async function CasePage({ params }: CasePageProps) {
     <main>
       <script type="application/ld+json">{safeJsonLd(jsonLd)}</script>
       <article>
-        <section className={`ds-section ds-section-dark ${pageTop}`}>
-          <div className="ds-section-shell max-w-[960px]">
-            <Breadcrumb
-              items={[
-                { label: "Início", href: "/" },
-                { label: "Cases", href: "/cases" },
-                { label: caseStudy.title, href: `/cases/${caseStudy.id}` },
-              ]}
-            />
-            <p className="ds-eyebrow">
-              {isClient ? "Case de cliente" : "Projeto de laboratório"} ·{" "}
-              {caseStudy.title}
-            </p>
-            <h1 className="ds-section-title text-balance text-white">
-              {caseStudy.headline}
-            </h1>
-            <p className="ds-copy max-w-[68ch] !text-[rgba(255,255,255,.78)]">
-              {caseStudy.summary}
-            </p>
-          </div>
-        </section>
+        <CaseHero caseStudy={caseStudy} isClient={isClient} />
 
         <section className="ds-section" aria-labelledby="case-context">
-          <div className="ds-section-shell max-w-[960px]">
+          <div className="ds-section-shell">
             <div className="ds-grid-2 items-start">
-              <div>
+              <div className="max-w-[68ch]">
                 <h2 id="case-context" className="ds-card-title !mt-0">
                   {isClient
                     ? "O cliente e o contexto"
@@ -108,7 +85,7 @@ export default async function CasePage({ params }: CasePageProps) {
                   </p>
                 ) : null}
               </div>
-              <div>
+              <div className="max-w-[68ch]">
                 <h2 id="case-problem" className="ds-card-title !mt-0">
                   O problema
                 </h2>
@@ -119,15 +96,41 @@ export default async function CasePage({ params }: CasePageProps) {
         </section>
 
         <section className="ds-section" aria-labelledby="case-done">
-          <div className="ds-section-shell max-w-[960px]">
-            <h2 id="case-done" className="ds-card-title !mt-0">
-              O que foi feito
-            </h2>
-            <ul className="ds-list space-y-sp-3 pl-[1.15rem]">
-              {caseStudy.deliveries.map((delivery) => (
-                <li key={delivery}>{delivery}</li>
-              ))}
-            </ul>
+          <div className="ds-section-shell">
+            <div className="max-w-[860px]">
+              <h2 id="case-done" className="ds-card-title !mt-0">
+                O que foi feito
+              </h2>
+              <ul className="ds-list space-y-sp-3 pl-[1.15rem]">
+                {caseStudy.deliveries.map((delivery) => (
+                  <li key={delivery}>{delivery}</li>
+                ))}
+              </ul>
+              <details className="mt-sp-8 border border-[var(--border)] bg-white/70 p-sp-5 md:p-sp-6">
+                <summary className="cursor-pointer py-sp-2 text-base font-semibold leading-relaxed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[var(--ink)]">
+                  Detalhes técnicos
+                </summary>
+                <div className="max-w-[80ch]">
+                  <p className="ds-kicker mt-sp-5">Tecnologias</p>
+                  <ul
+                    className="ds-tags !mt-sp-3 !pt-0"
+                    aria-label="Tecnologias do projeto"
+                  >
+                    {caseStudy.stack.map((item) => (
+                      <li key={item} className="ds-tag !whitespace-normal">
+                        {item}
+                      </li>
+                    ))}
+                  </ul>
+                  <p className="ds-kicker mt-sp-6">Decisões técnicas</p>
+                  <ul className="ds-list !mt-sp-3 space-y-sp-2">
+                    {caseStudy.decisions.map((decision) => (
+                      <li key={decision}>{decision}</li>
+                    ))}
+                  </ul>
+                </div>
+              </details>
+            </div>
           </div>
         </section>
 
@@ -135,62 +138,7 @@ export default async function CasePage({ params }: CasePageProps) {
 
         <CaseResultSection result={caseStudy.result} />
 
-        <section
-          className="ds-section ds-section-dark"
-          aria-labelledby="case-contact"
-        >
-          <div className="ds-section-shell max-w-[960px]">
-            <h2 id="case-contact" className="ds-card-title !mt-0 text-white">
-              Quer um projeto parecido com este?
-            </h2>
-            <p className="ds-copy max-w-[60ch]">
-              Conte o que você precisa. A conversa começa direto no WhatsApp,
-              sem formulário.
-            </p>
-            <div className="mt-sp-6 flex flex-wrap items-center gap-sp-3">
-              <WhatsAppLink
-                service={`um projeto parecido com o da ${caseStudy.title}`}
-                placement="case_detail"
-                className={primaryButton}
-              >
-                Conversar sobre um projeto parecido
-              </WhatsAppLink>
-              <Link href="/cases" className={secondaryButtonDark}>
-                Ver outros cases
-              </Link>
-            </div>
-            <CaseRelatedServices caseId={caseStudy.id} />
-          </div>
-        </section>
-
-        <section className="ds-section" aria-label="Detalhes técnicos">
-          <div className="ds-section-shell max-w-[960px]">
-            <details className="border border-[var(--border)] bg-white/70 p-sp-5 md:p-sp-6">
-              <summary className="cursor-pointer py-sp-2 text-base font-semibold leading-relaxed focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-[var(--ink)]">
-                Detalhes técnicos
-              </summary>
-              <div className="max-w-[80ch]">
-                <p className="ds-kicker mt-sp-5">Tecnologias</p>
-                <ul
-                  className="ds-tags !mt-sp-3 !pt-0"
-                  aria-label="Tecnologias do projeto"
-                >
-                  {caseStudy.stack.map((item) => (
-                    <li key={item} className="ds-tag !whitespace-normal">
-                      {item}
-                    </li>
-                  ))}
-                </ul>
-                <p className="ds-kicker mt-sp-6">Decisões técnicas</p>
-                <ul className="ds-list !mt-sp-3 space-y-sp-2">
-                  {caseStudy.decisions.map((decision) => (
-                    <li key={decision}>{decision}</li>
-                  ))}
-                </ul>
-              </div>
-            </details>
-          </div>
-        </section>
+        <CaseContactSection caseStudy={caseStudy} isClient={isClient} />
       </article>
     </main>
   );

app/cases/_components/CaseContactSection.paths.test.tsx

@@ -0,0 +1,67 @@
+import { render, screen } from "@testing-library/react";
+import { getRelatedServices } from "@/lib/site-content";
+import { CaseContactSection } from "./CaseContactSection";
+
+/**
+ * Testes de caminhos-base de CaseContactSection: o convite de um case de cliente ("projeto parecido") e o de
+ * um projeto de laboratório ("problema parecido"), o link para a lista de cases e os serviços ligados.
+ */
+
+const sev = { id: "sev-modaintima", title: "SEV Moda Íntima" };
+const nutri = { id: "nutriscan", title: "NutriScan" };
+
+function messageOf(link: HTMLElement) {
+  return new URL(link.getAttribute("href") ?? "").searchParams.get("text");
+}
+
+describe("CaseContactSection", () => {
+  it("path: client case -> 'projeto parecido' invitation, WhatsApp with the case title, services listed", () => {
+    render(<CaseContactSection caseStudy={sev} isClient />);
+
+    expect(
+      screen.getByRole("heading", {
+        level: 2,
+        name: "Quer um projeto parecido com este?",
+      }),
+    ).toBeVisible();
+    const cta = screen.getByRole("link", {
+      name: "Conversar sobre um projeto parecido",
+    });
+    expect(cta).toHaveAttribute("target", "_blank");
+    expect(messageOf(cta)).toContain(
+      `Quero conversar sobre um projeto parecido com o da ${sev.title}.`,
+    );
+    expect(getRelatedServices(sev.id).length).toBeGreaterThan(0);
+    expect(
+      screen.getAllByRole("link", { name: /^Ver o serviço:/ }).length,
+    ).toBeGreaterThan(0);
+    expect(
+      screen.getByRole("link", { name: "Ver outros cases" }),
+    ).toHaveAttribute("href", "/cases");
+  });
+
+  it("path: laboratory case -> 'problema parecido' invitation and no mention of a similar project", () => {
+    render(<CaseContactSection caseStudy={nutri} isClient={false} />);
+
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Fale sobre o seu caso" }),
+    ).toBeVisible();
+    const cta = screen.getByRole("link", {
+      name: "Tem um problema parecido? Vamos conversar.",
+    });
+    expect(messageOf(cta)).toContain(
+      `Quero conversar sobre um problema parecido com o do projeto ${nutri.title}.`,
+    );
+    expect(
+      screen.queryByRole("link", {
+        name: "Conversar sobre um projeto parecido",
+      }),
+    ).toBeNull();
+    // o NutriScan não é citado por nenhum serviço: sem cartões, o convite continua
+    expect(getRelatedServices(nutri.id)).toHaveLength(0);
+    expect(screen.queryByRole("link", { name: /^Ver o serviço:/ })).toBeNull();
+    expect(
+      screen.getByRole("link", { name: "Ver outros cases" }),
+    ).toBeVisible();
+  });
+});

app/cases/_components/CaseContactSection.tsx

@@ -0,0 +1,64 @@
+import Link from "next/link";
+import {
+  primaryButton,
+  secondaryButtonDark,
+} from "@/app/components/button-styles";
+import WhatsAppLink from "@/app/components/WhatsAppLink";
+import type { CaseStudyContent } from "@/lib/site-content";
+import { CaseRelatedServices } from "./CaseRelatedServices";
+
+/** Textos do convite ao contato: o case de cliente fala de um projeto parecido; o de laboratório, de um problema parecido. */
+const contactCopy = {
+  client: {
+    title: "Quer um projeto parecido com este?",
+    action: "Conversar sobre um projeto parecido",
+    subject: (title: string) => `um projeto parecido com o da ${title}`,
+  },
+  lab: {
+    title: "Fale sobre o seu caso",
+    action: "Tem um problema parecido? Vamos conversar.",
+    subject: (title: string) =>
+      `um problema parecido com o do projeto ${title}`,
+  },
+} as const;
+
+/** Fecho do case: convite ao WhatsApp, volta para a lista de cases e os serviços ligados ao projeto. */
+export function CaseContactSection({
+  caseStudy,
+  isClient,
+}: {
+  caseStudy: Pick<CaseStudyContent, "id" | "title">;
+  isClient: boolean;
+}) {
+  const copy = contactCopy[isClient ? "client" : "lab"];
+
+  return (
+    <section
+      className="ds-section ds-section-dark"
+      aria-labelledby="case-contact"
+    >
+      <div className="ds-section-shell">
+        <h2 id="case-contact" className="ds-card-title !mt-0 text-white">
+          {copy.title}
+        </h2>
+        <p className="ds-copy max-w-[60ch]">
+          Conte o que você precisa. A conversa começa direto no WhatsApp, sem
+          formulário.
+        </p>
+        <div className="mt-sp-6 flex flex-wrap items-center gap-sp-3">
+          <WhatsAppLink
+            service={copy.subject(caseStudy.title)}
+            placement="case_detail"
+            className={primaryButton}
+          >
+            {copy.action}
+          </WhatsAppLink>
+          <Link href="/cases" className={secondaryButtonDark}>
+            Ver outros cases
+          </Link>
+        </div>
+        <CaseRelatedServices caseId={caseStudy.id} />
+      </div>
+    </section>
+  );
+}

app/cases/_components/CaseCover.tsx

@@ -4,7 +4,6 @@ import {
   displayUrl,
 } from "@/app/components/showcase/BrowserFrame";
 import { getCaseMedia } from "./case-media";
-import "../../components/showcase/showcase.css";
 
 /** Capa do case: o pôster do site dentro de uma moldura de navegador. Sem captura gravada, não mostra nada. */
 export function CaseCover({

app/cases/_components/CaseCoverLink.paths.test.tsx

@@ -0,0 +1,102 @@
+import { render, screen } from "@testing-library/react";
+import { getShowcaseAssets } from "@/lib/project-showcase";
+import { CaseCoverLink } from "./CaseCoverLink";
+import { getCaseMedia } from "./case-media";
+
+/**
+ * Testes de caminhos-base de CaseCoverLink: sem captura (nada), com captura (link fora da leitura e do teclado,
+ * com a capa dentro), os valores padrão de `sizes`, `priority` e `prefetch`, e os valores dados.
+ */
+
+jest.mock("./case-media", () => ({ getCaseMedia: jest.fn() }));
+jest.mock("next/link", () => ({
+  __esModule: true,
+  default: ({
+    children,
+    prefetch,
+    ...props
+  }: { children?: React.ReactNode; prefetch?: boolean | null } & Record<
+    string,
+    unknown
+  >) => (
+    <a data-prefetch={String(prefetch)} {...props}>
+      {children}
+    </a>
+  ),
+}));
+
+const mockedGetCaseMedia = jest.mocked(getCaseMedia);
+const props = {
+  id: "sev-modaintima",
+  title: "SEV Moda Íntima",
+  demoUrl: "https://sevmodaintima.com.br",
+};
+
+afterEach(() => {
+  mockedGetCaseMedia.mockReset();
+});
+
+describe("CaseCoverLink", () => {
+  it("path: no desktop capture -> renders nothing, not even the link", () => {
+    mockedGetCaseMedia.mockReturnValue(undefined);
+    const { container } = render(<CaseCoverLink {...props} />);
+
+    expect(container).toBeEmptyDOMElement();
+    expect(mockedGetCaseMedia).toHaveBeenCalledWith(props.id, "desktop");
+  });
+
+  it("path: capture found -> a link to the case, out of reading order and tab order, around the cover", () => {
+    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
+    const { container } = render(<CaseCoverLink {...props} />);
+
+    const link = container.querySelector("a");
+    expect(link).toHaveAttribute("href", `/cases/${props.id}`);
+    expect(link).toHaveAttribute("aria-hidden", "true");
+    expect(link).toHaveAttribute("tabindex", "-1");
+    expect(link?.querySelector(".ds-bframe-url")).toHaveTextContent(
+      "sevmodaintima.com.br",
+    );
+    expect(
+      screen.getByAltText(`Captura de tela do site ${props.title}`),
+    ).toBeInTheDocument();
+  });
+
+  it("path: sizes, priority and prefetch omitted -> default sizes, lazy image and the link's own prefetch", () => {
+    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
+    const { container } = render(<CaseCoverLink {...props} />);
+
+    const image = screen.getByAltText(`Captura de tela do site ${props.title}`);
+    expect(image).toHaveAttribute("sizes", "(min-width: 1024px) 560px, 100vw");
+    expect(image).toHaveAttribute("loading", "lazy");
+    expect(container.querySelector("a")).toHaveAttribute(
+      "data-prefetch",
+      "undefined",
+    );
+  });
+
+  it("path: sizes, priority and prefetch given -> all of them are used", () => {
+    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
+    const { container } = render(
+      <CaseCoverLink {...props} sizes="320px" priority prefetch={false} />,
+    );
+
+    const image = screen.getByAltText(`Captura de tela do site ${props.title}`);
+    expect(image).toHaveAttribute("sizes", "320px");
+    expect(image).not.toHaveAttribute("loading", "lazy");
+    expect(container.querySelector("a")).toHaveAttribute(
+      "data-prefetch",
+      "false",
+    );
+  });
+
+  it("path: no demo address -> the browser bar falls back to the project title", () => {
+    mockedGetCaseMedia.mockImplementation(getShowcaseAssets);
+    const { container } = render(
+      <CaseCoverLink id={props.id} title={props.title} demoUrl={null} />,
+    );
+
+    expect(container.querySelector(".ds-bframe-url")).toHaveTextContent(
+      props.title,
+    );
+  });
+});

app/cases/_components/CaseCoverLink.tsx

@@ -0,0 +1,43 @@
+import Link from "next/link";
+import { CaseCover } from "./CaseCover";
+import { getCaseMedia } from "./case-media";
+
+/**
+ * Capa do case dentro de um cartão: a imagem leva ao case, mas fica fora da leitura e da ordem de tabulação,
+ * porque o link de texto do mesmo cartão já leva ao mesmo lugar. Sem captura gravada, não mostra nada.
+ */
+export function CaseCoverLink({
+  id,
+  title,
+  demoUrl,
+  sizes = "(min-width: 1024px) 560px, 100vw",
+  priority = false,
+  prefetch,
+}: {
+  id: string;
+  title: string;
+  demoUrl?: string | null;
+  sizes?: string;
+  priority?: boolean;
+  prefetch?: boolean;
+}) {
+  if (!getCaseMedia(id, "desktop")) return null;
+
+  return (
+    <Link
+      href={`/cases/${id}`}
+      aria-hidden="true"
+      tabIndex={-1}
+      prefetch={prefetch}
+      className="mb-sp-5 block"
+    >
+      <CaseCover
+        id={id}
+        title={title}
+        demoUrl={demoUrl}
+        sizes={sizes}
+        priority={priority}
+      />
+    </Link>
+  );
+}

app/cases/_components/CaseHero.paths.test.tsx

@@ -0,0 +1,130 @@
+import { render, screen } from "@testing-library/react";
+import { getShowcaseAssets } from "@/lib/project-showcase";
+import { caseStudies } from "@/lib/site-content";
+import { CaseHero } from "./CaseHero";
+import { getCaseMedia } from "./case-media";
+
+/**
+ * Testes de caminhos-base de CaseHero e dos fatos do projeto: com e sem captura gravada, case de cliente e de
+ * laboratório, e a lista de fatos ausente, vazia ou preenchida. A existência da captura é simulada em getCaseMedia.
+ */
+
+jest.mock("./case-media", () => ({ getCaseMedia: jest.fn() }));
+
+const mockedGetCaseMedia = jest.mocked(getCaseMedia);
+
+function getCase(id: string) {
+  const caseStudy = caseStudies.find((item) => item.id === id);
+  if (!caseStudy) throw new Error(`Missing case ${id}`);
+  return caseStudy;
+}
+
+const client = getCase("sev-modaintima");
+const lab = getCase("twins-lab");
+
+function withCapture(has: boolean) {
+  mockedGetCaseMedia.mockImplementation((id, device) =>
+    has ? getShowcaseAssets(id, device) : undefined,
+  );
+}
+
+afterEach(() => {
+  mockedGetCaseMedia.mockReset();
+});
+
+describe("CaseHero: captura gravada e tipo de case", () => {
+  it("path: client case with a capture -> two columns, the cover on the right, the client eyebrow", () => {
+    withCapture(true);
+    const { container } = render(<CaseHero caseStudy={client} isClient />);
+
+    expect(container.querySelector(".ds-section-shell")).toHaveClass("grid");
+    expect(container.querySelector(".ds-bframe")).toBeInTheDocument();
+    expect(screen.getByText(/Case de cliente/)).toBeVisible();
+    expect(
+      screen.getByRole("heading", { level: 1, name: client.headline }),
+    ).toBeVisible();
+  });
+
+  it("path: client case without a capture -> one column and no cover", () => {
+    withCapture(false);
+    const { container } = render(<CaseHero caseStudy={client} isClient />);
+
+    expect(container.querySelector(".ds-section-shell")).not.toHaveClass(
+      "grid",
+    );
+    expect(container.querySelector(".ds-bframe")).toBeNull();
+    expect(screen.getByText(client.summary)).toBeVisible();
+  });
+
+  it("path: laboratory case with a capture -> the cover shows, with the laboratory eyebrow", () => {
+    withCapture(true);
+    const { container } = render(<CaseHero caseStudy={lab} isClient={false} />);
+
+    expect(container.querySelector(".ds-bframe")).toBeInTheDocument();
+    expect(screen.getByText(/Projeto de laboratório/)).toBeVisible();
+    expect(screen.queryByText(/Case de cliente/)).toBeNull();
+  });
+
+  it("path: laboratory case without a capture -> one column, laboratory eyebrow, title and summary", () => {
+    withCapture(false);
+    const { container } = render(<CaseHero caseStudy={lab} isClient={false} />);
+
+    expect(container.querySelector(".ds-section-shell")).not.toHaveClass(
+      "grid",
+    );
+    expect(container.querySelector(".ds-bframe")).toBeNull();
+    expect(screen.getByText(/Projeto de laboratório/)).toBeVisible();
+    expect(screen.getByText(lab.summary)).toBeVisible();
+  });
+
+  it("path: breadcrumb -> Início, Cases and the case itself as the current page", () => {
+    withCapture(false);
+    render(<CaseHero caseStudy={client} isClient />);
+
+    const links = screen.getAllByRole("link");
+    expect(links.map((link) => link.getAttribute("href"))).toEqual([
+      "/",
+      "/cases",
+      `/cases/${client.id}`,
+    ]);
+    expect(links[2]).toHaveAttribute("aria-current", "page");
+  });
+});
+
+describe("CaseHero: fatos do projeto", () => {
+  const withFacts = (facts: string[] | undefined) => ({
+    ...client,
+    facts,
+  });
+
+  it("path: no facts field -> no list", () => {
+    withCapture(false);
+    render(<CaseHero caseStudy={withFacts(undefined)} isClient />);
+
+    expect(screen.queryByRole("list", { name: "Fatos do projeto" })).toBeNull();
+  });
+
+  it("path: empty facts list -> no list", () => {
+    withCapture(false);
+    render(<CaseHero caseStudy={withFacts([])} isClient />);
+
+    expect(screen.queryByRole("list", { name: "Fatos do projeto" })).toBeNull();
+  });
+
+  it("path: filled facts -> one item each, after the summary", () => {
+    withCapture(false);
+    render(
+      <CaseHero
+        caseStudy={withFacts(["No ar desde 2025", "Dois painéis"])}
+        isClient
+      />,
+    );
+
+    const list = screen.getByRole("list", { name: "Fatos do projeto" });
+    expect(list.querySelectorAll("li")).toHaveLength(2);
+    expect(
+      screen.getByText(client.summary).compareDocumentPosition(list) &
+        Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+});

app/cases/_components/CaseHero.tsx

@@ -0,0 +1,86 @@
+import { Breadcrumb } from "@/app/components/Breadcrumb";
+import { pageTop } from "@/app/components/button-styles";
+import type { CaseStudyContent } from "@/lib/site-content";
+import { CaseCover } from "./CaseCover";
+import { getCaseMedia } from "./case-media";
+
+/** Fatos verificáveis do projeto. Sem nenhum, a lista não aparece. */
+function CaseFacts({ facts }: { facts?: string[] }) {
+  if (!facts?.length) return null;
+
+  return (
+    <ul
+      className="mt-sp-5 flex flex-wrap gap-x-sp-6 gap-y-sp-2 text-[15px] leading-6 text-white/80"
+      aria-label="Fatos do projeto"
+    >
+      {facts.map((fact) => (
+        <li key={fact}>{fact}</li>
+      ))}
+    </ul>
+  );
+}
+
+/** Pôster do site na coluna da direita (no celular, logo abaixo do título). */
+function CaseHeroCover({ caseStudy }: { caseStudy: CaseStudyContent }) {
+  return (
+    <div className="min-w-0 lg:col-start-2 lg:row-span-2 lg:row-start-1">
+      <CaseCover
+        id={caseStudy.id}
+        title={caseStudy.title}
+        demoUrl={caseStudy.demoUrl}
+        sizes="(min-width: 1024px) 560px, 100vw"
+        priority
+      />
+    </div>
+  );
+}
+
+/**
+ * Topo do case: trilha, título, resumo e fatos. Com captura gravada, o texto fica à esquerda e o pôster à direita;
+ * no celular a mídia vem logo abaixo do título.
+ */
+export function CaseHero({
+  caseStudy,
+  isClient,
+}: {
+  caseStudy: CaseStudyContent;
+  isClient: boolean;
+}) {
+  const hasMedia = Boolean(getCaseMedia(caseStudy.id, "desktop"));
+
+  return (
+    <section className={`ds-section ds-section-dark ${pageTop}`}>
+      <div
+        className={`ds-section-shell ${
+          hasMedia
+            ? "grid items-center gap-y-sp-6 lg:grid-cols-[minmax(0,1.1fr)_minmax(0,1fr)] lg:gap-x-sp-16 lg:gap-y-0"
+            : ""
+        }`}
+      >
+        <div className="max-w-[860px] lg:col-start-1 lg:row-start-1 lg:self-end">
+          <Breadcrumb
+            items={[
+              { label: "Início", href: "/" },
+              { label: "Cases", href: "/cases" },
+              { label: caseStudy.title, href: `/cases/${caseStudy.id}` },
+            ]}
+          />
+          <p className="ds-eyebrow">
+            {isClient ? "Case de cliente" : "Projeto de laboratório"} ·{" "}
+            {caseStudy.title}
+          </p>
+          <h1 className="ds-section-title text-balance text-white">
+            {caseStudy.headline}
+          </h1>
+        </div>
+        {hasMedia ? <CaseHeroCover caseStudy={caseStudy} /> : null}
+        <div className="max-w-[68ch] lg:col-start-1 lg:row-start-2 lg:self-start">
+          <p className="ds-copy !text-[rgba(255,255,255,.78)]">
+            {caseStudy.summary}
+          </p>
+          <CaseFacts facts={caseStudy.facts} />
+        </div>
+      </div>
+    </section>
+  );
+}

app/cases/_components/CaseMedia.paths.test.tsx

@@ -1,10 +1,11 @@
-import { render, screen } from "@testing-library/react";
+import { fireEvent, render, screen } from "@testing-library/react";
 import { getShowcaseAssets } from "@/lib/project-showcase";
 import { CaseMedia } from "./CaseMedia";
 import { getCaseMedia } from "./case-media";
 
 /**
  * Testes de caminhos-base de CaseMedia: com computador e celular, só um dos dois, ou nenhum.
+ * Cada quadro mostra o pôster com um botão de play; o vídeo só aparece depois do clique.
  * A existência dos arquivos em disco é simulada em getCaseMedia, para o teste não depender de public/.
  */
 
@@ -23,8 +24,10 @@ const props = {
   title: "SEV Moda Íntima",
   demoUrl: "https://sevmodaintima.com.br",
 };
-const desktopLabel = `Vídeo do site ${props.title} no computador`;
-const mobileLabel = `Vídeo do site ${props.title} no celular`;
+const desktopPlay = `Reproduzir o vídeo do site ${props.title} no computador`;
+const mobilePlay = `Reproduzir o vídeo do site ${props.title} no celular`;
+const desktopVideo = `Vídeo do site ${props.title} no computador`;
+const mobileVideo = `Vídeo do site ${props.title} no celular`;
 
 afterEach(() => {
   mockedGetCaseMedia.mockReset();
@@ -36,10 +39,10 @@ describe("CaseMedia", () => {
     const { container } = render(<CaseMedia {...props} />);
 
     expect(container.querySelector(".ds-bframe")).toContainElement(
-      screen.getByLabelText(desktopLabel),
+      screen.getByRole("button", { name: desktopPlay }),
     );
     expect(container.querySelector(".ds-phone")).toContainElement(
-      screen.getByLabelText(mobileLabel),
+      screen.getByRole("button", { name: mobilePlay }),
     );
     expect(container.querySelector(".ds-bframe-url")).toHaveTextContent(
       "sevmodaintima.com.br",
@@ -63,8 +66,10 @@ describe("CaseMedia", () => {
     withCaptures(["mobile"]);
     const { container } = render(<CaseMedia {...props} />);
 
-    expect(screen.getByLabelText(mobileLabel)).toBeInTheDocument();
-    expect(screen.queryByLabelText(desktopLabel)).toBeNull();
+    expect(
+      screen.getByRole("button", { name: mobilePlay }),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: desktopPlay })).toBeNull();
     expect(container.querySelector(".ds-bframe")).toBeNull();
     expect(container.querySelector(".ds-phone")).not.toBeNull();
     expect(screen.queryByText(/no computador\./)).toBeNull();
@@ -74,13 +79,47 @@ describe("CaseMedia", () => {
     withCaptures(["desktop"]);
     const { container } = render(<CaseMedia {...props} />);
 
-    expect(screen.getByLabelText(desktopLabel)).toBeInTheDocument();
-    expect(screen.queryByLabelText(mobileLabel)).toBeNull();
+    expect(
+      screen.getByRole("button", { name: desktopPlay }),
+    ).toBeInTheDocument();
+    expect(screen.queryByRole("button", { name: mobilePlay })).toBeNull();
     expect(container.querySelector(".ds-phone")).toBeNull();
     expect(container.querySelector(".ds-bframe")).not.toBeNull();
     expect(screen.queryByText("No celular.")).toBeNull();
   });
 
+  it("path: both captures -> no video until play, then only the pressed frame plays", () => {
+    withCaptures(["desktop", "mobile"]);
+    const { container } = render(<CaseMedia {...props} />);
+
+    expect(container.querySelector("video")).toBeNull();
+    // o pôster do computador vem com texto alternativo vazio: o botão já descreve o quadro
+    expect(container.querySelector(".ds-bframe img")).toHaveAttribute(
+      "alt",
+      "",
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: mobilePlay }));
+
+    const phone = screen.getByLabelText(mobileVideo);
+    expect(container.querySelector(".ds-phone")).toContainElement(phone);
+    expect(phone).toHaveAttribute("poster", `/videos/${props.id}/mobile.webp`);
+    expect(phone.querySelectorAll("source")).toHaveLength(2);
+    expect(screen.queryByLabelText(desktopVideo)).toBeNull();
+    expect(
+      screen.getByRole("button", { name: desktopPlay }),
+    ).toBeInTheDocument();
+    expect(container.querySelectorAll("video")).toHaveLength(1);
+
+    fireEvent.click(screen.getByRole("button", { name: desktopPlay }));
+    expect(screen.getByLabelText(desktopVideo)).toHaveAttribute(
+      "poster",
+      `/videos/${props.id}/desktop.webp`,
+    );
+    expect(container.querySelectorAll("video")).toHaveLength(2);
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
   it("path: no demo address -> the browser bar falls back to the project title", () => {
     withCaptures(["desktop"]);
     const { container } = render(

app/cases/_components/CaseMedia.tsx

@@ -3,43 +3,13 @@ import {
   displayUrl,
 } from "@/app/components/showcase/BrowserFrame";
 import { PhoneFrame } from "@/app/components/showcase/PhoneFrame";
-import type { ShowcaseAssets } from "@/lib/project-showcase";
+import { CasePlayer } from "./CasePlayer";
 import { getCaseMedia } from "./case-media";
-import "../../components/showcase/showcase.css";
-
-function CaseVideo({
-  assets,
-  label,
-  className,
-}: {
-  assets: ShowcaseAssets;
-  label: string;
-  className: string;
-}) {
-  return (
-    <video
-      className={className}
-      controls
-      muted
-      loop
-      playsInline
-      preload="none"
-      poster={assets.poster}
-      width={assets.width}
-      height={assets.height}
-      aria-label={label}
-      disablePictureInPicture
-    >
-      {assets.sources.map((source) => (
-        <source key={source.src} src={source.src} type={source.type} />
-      ))}
-    </video>
-  );
-}
 
 /**
  * Pôster e vídeo do projeto: o site no computador (moldura de navegador) e no celular (moldura de celular).
- * O vídeo só baixa quando a pessoa aperta o play. Sem captura gravada, não mostra nada.
+ * Cada quadro mostra o pôster com um botão de play; o vídeo só baixa quando a pessoa aperta o botão.
+ * Sem captura gravada, não mostra nada.
  */
 export function CaseMedia({
   id,
@@ -55,16 +25,12 @@ export function CaseMedia({
   if (!desktop && !mobile) return null;
 
   return (
-    <div className="mt-sp-8 grid items-end gap-sp-8 md:grid-cols-[minmax(0,1fr)_auto]">
+    <div className="mt-sp-8 grid max-w-[1040px] items-end gap-sp-8 md:grid-cols-[minmax(0,1fr)_auto]">
       {desktop ? (
         <figure className="min-w-0">
           <BrowserFrame url={displayUrl({ demoUrl, title })}>
             <div className="relative aspect-[16/10] bg-[#0a0a0a]">
-              <CaseVideo
-                assets={desktop}
-                label={`Vídeo do site ${title} no computador`}
-                className="absolute inset-0 h-full w-full object-cover object-top"
-              />
+              <CasePlayer assets={desktop} title={title} device="desktop" />
             </div>
           </BrowserFrame>
           <figcaption className="mt-sp-3 font-[family-name:var(--font-body)] text-[15px] text-white/70">
@@ -75,11 +41,7 @@ export function CaseMedia({
       {mobile ? (
         <figure className="mx-auto w-[min(62vw,220px)] md:mx-0">
           <PhoneFrame poster={mobile.poster}>
-            <CaseVideo
-              assets={mobile}
-              label={`Vídeo do site ${title} no celular`}
-              className="absolute inset-0 h-full w-full object-cover object-top"
-            />
+            <CasePlayer assets={mobile} title={title} device="mobile" />
           </PhoneFrame>
           <figcaption className="mt-sp-3 text-center font-[family-name:var(--font-body)] text-[15px] text-white/70">
             No celular.

app/cases/_components/CaseMediaSection.tsx

@@ -28,7 +28,7 @@ export function CaseMediaSection({
       className="ds-section ds-section-dark"
       aria-labelledby="case-media"
     >
-      <div className="ds-section-shell max-w-[960px]">
+      <div className="ds-section-shell">
         <h2 id="case-media" className="ds-card-title !mt-0 text-white">
           Como ficou
         </h2>

app/cases/_components/CasePlayer.test.tsx

@@ -0,0 +1,85 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { getShowcaseAssets } from "@/lib/project-showcase";
+import { CasePlayer } from "./CasePlayer";
+
+const title = "SEV Moda Íntima";
+
+describe("CasePlayer", () => {
+  it("shows the poster and an accessible play button instead of a paused video", () => {
+    const { container } = render(
+      <div className="relative">
+        <CasePlayer
+          assets={getShowcaseAssets("sev-modaintima", "desktop")}
+          title={title}
+          device="desktop"
+        />
+      </div>,
+    );
+
+    expect(container.querySelector("video")).toBeNull();
+    // a imagem é decorativa: o botão já diz o que o quadro mostra
+    const poster = container.querySelector("img");
+    expect(poster).toHaveAttribute("alt", "");
+    expect(poster?.getAttribute("src")).toContain(
+      encodeURIComponent("/videos/sev-modaintima/desktop.webp"),
+    );
+    const button = screen.getByRole("button", {
+      name: `Reproduzir o vídeo do site ${title} no computador`,
+    });
+    expect(button).toHaveAttribute("type", "button");
+    // só botão de contato é limão: o de play é escuro, com contorno branco
+    expect(button.innerHTML).not.toContain("--slash");
+    expect(button.querySelector("[aria-hidden='true']")).not.toBeNull();
+  });
+
+  it("mounts the video with its sources only after the click, muted and looping, with focus on it", () => {
+    const assets = getShowcaseAssets("lavacao-047", "desktop");
+    render(
+      <div className="relative">
+        <CasePlayer assets={assets} title="Lavação 047" device="desktop" />
+      </div>,
+    );
+
+    fireEvent.click(screen.getByRole("button"));
+
+    const video = screen.getByLabelText(
+      "Vídeo do site Lavação 047 no computador",
+    );
+    expect(video).toHaveFocus();
+    expect(video).toHaveAttribute("controls");
+    expect(video).toHaveAttribute("poster", assets.poster);
+    expect(video).toHaveAttribute("width", String(assets.width));
+    expect(video).toHaveAttribute("height", String(assets.height));
+    expect((video as HTMLVideoElement).muted).toBe(true);
+    expect((video as HTMLVideoElement).loop).toBe(true);
+    expect(
+      [...video.querySelectorAll("source")].map((source) => [
+        source.getAttribute("src"),
+        source.getAttribute("type"),
+      ]),
+    ).toEqual(assets.sources.map(({ src, type }) => [src, type]));
+    expect(screen.queryByRole("button")).toBeNull();
+  });
+
+  it("leaves the poster to the phone frame on mobile and names the device in the labels", () => {
+    const { container } = render(
+      <div className="relative">
+        <CasePlayer
+          assets={getShowcaseAssets("sc-plus", "mobile")}
+          title="SC Plus Aquicultura"
+          device="mobile"
+        />
+      </div>,
+    );
+
+    expect(container.querySelector("img")).toBeNull();
+    fireEvent.click(
+      screen.getByRole("button", {
+        name: "Reproduzir o vídeo do site SC Plus Aquicultura no celular",
+      }),
+    );
+    expect(
+      screen.getByLabelText("Vídeo do site SC Plus Aquicultura no celular"),
+    ).toHaveAttribute("poster", "/videos/sc-plus/mobile.webp");
+  });
+});

app/cases/_components/CasePlayer.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { Play } from "lucide-react";
+import Image from "next/image";
+import { useEffect, useRef, useState } from "react";
+import type { Device, ShowcaseAssets } from "@/lib/project-showcase";
+
+const deviceLabel: Record<Device, string> = {
+  desktop: "no computador",
+  mobile: "no celular",
+};
+
+/**
+ * Pôster com um botão de play. O vídeo só é montado, e só baixa, quando a pessoa aperta o botão:
+ * antes disso a página mostra a imagem do site, não um vídeo parado em 0:00 com controles do navegador.
+ * Vai dentro de um quadro com `position: relative` (moldura de navegador ou de celular) que dá o tamanho.
+ */
+export function CasePlayer({
+  assets,
+  title,
+  device,
+  sizes = "(min-width: 1280px) 900px, 100vw",
+}: {
+  assets: ShowcaseAssets;
+  title: string;
+  device: Device;
+  sizes?: string;
+}) {
+  const [playing, setPlaying] = useState(false);
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  // o botão sai de cena ao tocar: o foco vai para o vídeo, para quem usa o teclado não o perder
+  useEffect(() => {
+    if (playing) videoRef.current?.focus();
+  }, [playing]);
+
+  if (playing) {
+    return (
+      <video
+        ref={videoRef}
+        className="absolute inset-0 h-full w-full object-cover object-top"
+        autoPlay
+        controls
+        muted
+        loop
+        playsInline
+        poster={assets.poster}
+        width={assets.width}
+        height={assets.height}
+        tabIndex={0}
+        aria-label={`Vídeo do site ${title} ${deviceLabel[device]}`}
+        disablePictureInPicture
+      >
+        {assets.sources.map((source) => (
+          <source key={source.src} src={source.src} type={source.type} />
+        ))}
+      </video>
+    );
+  }
+
+  return (
+    <>
+      {/* o quadro do celular já mostra o pôster como fundo; no computador a imagem entra aqui */}
+      {device === "desktop" ? (
+        <Image
+          src={assets.poster}
+          alt=""
+          fill
+          sizes={sizes}
+          className="object-cover object-top"
+        />
+      ) : null}
+      <button
+        type="button"
+        onClick={() => setPlaying(true)}
+        aria-label={`Reproduzir o vídeo do site ${title} ${deviceLabel[device]}`}
+        className="group absolute inset-0 grid place-items-center focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-white"
+      >
+        <span
+          aria-hidden="true"
+          className="grid size-14 place-items-center rounded-full border border-white/70 bg-black/65 text-white transition-colors group-hover:bg-black/85 motion-reduce:transition-none sm:size-16"
+        >
+          <Play className="ml-1 size-6" fill="currentColor" />
+        </span>
+      </button>
+    </>
+  );
+}

app/cases/_components/CaseRelatedServices.tsx

@@ -1,23 +1,34 @@
 import Link from "next/link";
-import { textLink } from "@/app/components/button-styles";
+import { textLinkDark } from "@/app/components/button-styles";
 import { getRelatedServices } from "@/lib/site-content";
 
-/** Links para os serviços que citam este case. Sem serviço relacionado, não mostra nada. */
+/** Quantos serviços aparecem no fim do case: dois cards bastam para levar a pessoa ao serviço certo sem virar um menu. */
+export const MAX_RELATED_SERVICES = 2;
+
+/** Cards dos serviços que citam este case (no máximo dois), sobre fundo escuro. Sem serviço relacionado, não mostra nada. */
 export function CaseRelatedServices({ caseId }: { caseId: string }) {
-  const services = getRelatedServices(caseId);
+  const services = getRelatedServices(caseId).slice(0, MAX_RELATED_SERVICES);
   if (services.length === 0) return null;
 
   return (
-    <div className="mt-sp-6 flex flex-wrap gap-x-sp-6">
-      {services.map((service) => (
-        <Link
-          key={service.slug}
-          className={textLink}
-          href={`/servicos/${service.slug}`}
-        >
-          Ver serviço relacionado: {service.navLabel}
-        </Link>
-      ))}
+    <div className="mt-sp-10">
+      <p className="ds-kicker">Serviços ligados a este projeto</p>
+      <ul className="mt-sp-4 grid gap-sp-4 md:grid-cols-2">
+        {services.map((service) => (
+          <li key={service.slug} className="flex">
+            <article className="ds-card w-full">
+              <h3 className="ds-card-title !mt-0">{service.navLabel}</h3>
+              <p className="ds-copy">{service.intro}</p>
+              <Link
+                className={`${textLinkDark} mt-sp-4 self-start`}
+                href={`/servicos/${service.slug}`}
+              >
+                Ver o serviço: {service.navLabel}
+              </Link>
+            </article>
+          </li>
+        ))}
+      </ul>
     </div>
   );
 }

app/cases/_components/CaseResultSection.tsx

@@ -4,11 +4,11 @@ export function CaseResultSection({ result }: { result?: string[] }) {
 
   return (
     <section className="ds-section" aria-labelledby="case-result">
-      <div className="ds-section-shell max-w-[960px]">
+      <div className="ds-section-shell">
         <h2 id="case-result" className="ds-card-title !mt-0">
           Resultado
         </h2>
-        <ul className="ds-list space-y-sp-3 pl-[1.15rem]">
+        <ul className="ds-list max-w-[78ch] space-y-sp-3 pl-[1.15rem]">
           {result.map((item) => (
             <li key={item}>{item}</li>
           ))}

app/cases/_components/case-media.ts

@@ -1,3 +1,4 @@
+import "server-only";
 import { existsSync } from "node:fs";
 import { join } from "node:path";
 import {

app/cases/page.loading.test.tsx

@@ -0,0 +1,66 @@
+import { render } from "@testing-library/react";
+import type { ComponentProps } from "react";
+import { clientCases } from "@/lib/site-content";
+import CasesPage from "./page";
+
+/**
+ * Carregamento da lista de cases: a primeira capa (a maior imagem acima da dobra) tem prioridade,
+ * e os links das capas não pré-carregam as páginas dos cases sozinhos.
+ */
+
+type LinkProps = ComponentProps<typeof import("next/link").default>;
+
+/** Propriedades de cada `Link` renderizado: o `prefetch` não aparece no HTML, então a rota é espiada aqui. */
+const mockLinkProps: LinkProps[] = [];
+
+jest.mock("next/link", () => ({
+  __esModule: true,
+  default: ({ children, href, prefetch, ...anchor }: LinkProps) => {
+    mockLinkProps.push({ children, href, prefetch, ...anchor });
+    return (
+      <a href={String(href)} {...(anchor as Record<string, unknown>)}>
+        {children}
+      </a>
+    );
+  },
+}));
+
+beforeEach(() => {
+  mockLinkProps.length = 0;
+});
+
+function coverImages(container: HTMLElement) {
+  return clientCases.map((caseStudy) => {
+    const image = container
+      .querySelector(`a[href="/cases/${caseStudy.id}"][aria-hidden="true"]`)
+      ?.querySelector("img");
+    if (!image) throw new Error(`Missing cover of ${caseStudy.id}`);
+    return image;
+  });
+}
+
+describe("CasesPage: carregamento das capas", () => {
+  it("loads the first cover with priority and the others lazily", () => {
+    const { container } = render(<CasesPage />);
+
+    const [first, ...others] = coverImages(container);
+    expect(first).not.toHaveAttribute("loading", "lazy");
+    expect(others.length).toBeGreaterThan(0);
+    for (const image of others) {
+      expect(image).toHaveAttribute("loading", "lazy");
+    }
+  });
+
+  it("does not prefetch the case pages from the cover links, nor from the card buttons", () => {
+    render(<CasesPage />);
+
+    const toCases = mockLinkProps.filter(({ href }) =>
+      String(href).startsWith("/cases/"),
+    );
+    // uma capa e um botão por case de cliente, e um botão por projeto do laboratório
+    expect(toCases.length).toBeGreaterThanOrEqual(clientCases.length * 2);
+    for (const props of toCases) {
+      expect(props.prefetch).toBe(false);
+    }
+  });
+});

app/cases/page.tsx

@@ -17,13 +17,12 @@ import {
   labCases,
   siteUrl,
 } from "@/lib/site-content";
-import { CaseCover } from "./_components/CaseCover";
-import { getCaseMedia } from "./_components/case-media";
+import { CaseCoverLink } from "./_components/CaseCoverLink";
 
 const pageUrl = `${siteUrl}/cases`;
-const pageTitle = "Cases: Sites e Sistemas Feitos para Empresas";
+const pageTitle = "Cases: sites e sistemas para empresas";
 const pageDescription =
-  "Veja o que já foi feito para empresas: loja virtual com pedido pelo WhatsApp, site com painel para o dono, páginas institucionais e mais. Confira cada projeto e converse sobre o seu.";
+  "Veja o que já foi feito para empresas: loja virtual com pedido pelo WhatsApp, site com painel para o dono e páginas institucionais.";
 const allCases = [...clientCases, ...labCases];
 
 export const metadata: Metadata = {
@@ -41,33 +40,34 @@ function CaseCard({
   caseStudy,
   withCover,
   ctaLabel,
+  priority = false,
 }: {
   caseStudy: CaseStudyContent;
   withCover: boolean;
   ctaLabel: string;
+  /** Capa que abre a página (a primeira, o maior elemento visível): carrega antes das demais. */
+  priority?: boolean;
 }) {
   return (
     <article className="ds-card !h-auto">
-      {withCover && getCaseMedia(caseStudy.id, "desktop") ? (
-        <Link
-          href={`/cases/${caseStudy.id}`}
-          aria-hidden="true"
-          tabIndex={-1}
-          className="mb-sp-5 block"
-        >
-          <CaseCover
-            id={caseStudy.id}
-            title={caseStudy.title}
-            demoUrl={caseStudy.demoUrl}
-            sizes="(min-width: 1024px) 560px, 100vw"
-          />
-        </Link>
+      {withCover ? (
+        <CaseCoverLink
+          id={caseStudy.id}
+          title={caseStudy.title}
+          demoUrl={caseStudy.demoUrl}
+          priority={priority}
+          prefetch={false}
+        />
       ) : null}
       <div className="ds-kicker">{caseStudy.title}</div>
       <h3 className="ds-card-title">{caseStudy.headline}</h3>
       <p className="ds-copy">{caseStudy.summary}</p>
       <div className="mt-sp-6 flex flex-wrap items-center gap-sp-3">
-        <Link href={`/cases/${caseStudy.id}`} className={secondaryButtonLight}>
+        <Link
+          href={`/cases/${caseStudy.id}`}
+          prefetch={false}
+          className={secondaryButtonLight}
+        >
           {ctaLabel}
         </Link>
         {caseStudy.demoUrl ? (
@@ -142,12 +142,13 @@ export default function CasesPage() {
             Projetos de clientes
           </h2>
           <div className="ds-grid-2 mt-sp-8 items-start">
-            {clientCases.map((caseStudy) => (
+            {clientCases.map((caseStudy, index) => (
               <CaseCard
                 key={caseStudy.id}
                 caseStudy={caseStudy}
                 withCover
                 ctaLabel="Ver o case"
+                priority={index === 0}
               />
             ))}
           </div>

app/components/Breadcrumb.paths.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen } from "@testing-library/react";
+import { Breadcrumb } from "./Breadcrumb";
+
+/**
+ * Testes de caminhos-base de Breadcrumb: o primeiro item não tem separador,
+ * os seguintes têm, e só o último é a página atual (inclusive quando é o único).
+ */
+
+describe("Breadcrumb", () => {
+  it("path: several items -> a separator before every item but the first", () => {
+    const { container } = render(
+      <Breadcrumb
+        items={[
+          { label: "Início", href: "/" },
+          { label: "Cases", href: "/cases" },
+          { label: "SEV Moda Íntima", href: "/cases/sev-modaintima" },
+        ]}
+      />,
+    );
+
+    const entries = Array.from(container.querySelectorAll("li"));
+    expect(entries).toHaveLength(3);
+    expect(entries[0].querySelector("span[aria-hidden='true']")).toBeNull();
+    expect(
+      entries[1].querySelector("span[aria-hidden='true']"),
+    ).toHaveTextContent("/");
+    expect(
+      entries[2].querySelector("span[aria-hidden='true']"),
+    ).toHaveTextContent("/");
+    expect(entries[0].className).toBe("");
+    expect(entries[1].className).toContain("flex");
+  });
+
+  it("path: a single item -> no separator, and it is the current page", () => {
+    const { container } = render(
+      <Breadcrumb items={[{ label: "Início", href: "/" }]} />,
+    );
+
+    expect(container.querySelector("span[aria-hidden='true']")).toBeNull();
+    expect(screen.getByRole("link", { name: "Início" })).toHaveAttribute(
+      "aria-current",
+      "page",
+    );
+  });
+
+  it("path: no items -> an empty list inside the navigation", () => {
+    render(<Breadcrumb items={[]} />);
+
+    const nav = screen.getByRole("navigation");
+    expect(nav.querySelectorAll("li")).toHaveLength(0);
+    expect(screen.queryByRole("link")).toBeNull();
+  });
+});

app/components/Breadcrumb.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen, within } from "@testing-library/react";
+import { Breadcrumb } from "./Breadcrumb";
+
+describe("Breadcrumb", () => {
+  const items = [
+    { label: "Início", href: "/" },
+    { label: "Cases", href: "/cases" },
+    { label: "SEV Moda Íntima", href: "/cases/sev-modaintima" },
+  ];
+
+  it("marks only the last item as the current page", () => {
+    render(<Breadcrumb items={items} />);
+
+    const links = within(
+      screen.getByRole("navigation", { name: "Trilha de navegação" }),
+    ).getAllByRole("link");
+    expect(links.map((link) => link.getAttribute("aria-current"))).toEqual([
+      null,
+      null,
+      "page",
+    ]);
+  });
+
+  it("keeps the text at 15 px or more, as the body text of the inner pages", () => {
+    const { container } = render(<Breadcrumb items={items} />);
+
+    const list = container.querySelector("ol");
+    expect(list).toHaveClass("text-[15px]");
+    expect(list?.className).not.toMatch(/text-(xs|sm)\b|text-\[1[0-4]px\]/);
+  });
+});

app/components/Breadcrumb.tsx

@@ -7,8 +7,8 @@ export function Breadcrumb({
   items: readonly { label: string; href: string }[];
 }) {
   return (
-    <nav aria-label="Breadcrumb" className="mb-sp-6">
-      <ol className="flex flex-wrap items-center gap-sp-2 text-sm">
+    <nav aria-label="Trilha de navegação" className="mb-sp-6">
+      <ol className="flex flex-wrap items-center gap-sp-2 text-[15px]">
         {items.map(({ label, href }, index) => (
           <li
             key={href}

app/curriculo/page.test.tsx

@@ -1,13 +1,39 @@
 import { fireEvent, render, screen, within } from "@testing-library/react";
 import { trackCvDownload } from "@/lib/analytics";
-import CurriculoPage from "./page";
+import CurriculoPage, { metadata } from "./page";
 
 jest.mock("@/lib/analytics", () => ({ trackCvDownload: jest.fn() }));
 
+it("uses the same shell as the home, with no narrow max-width, and a template-friendly title", () => {
+  const { container } = render(CurriculoPage());
+
+  const shells = container.querySelectorAll(".ds-section-shell");
+  expect(shells.length).toBeGreaterThan(0);
+  for (const shell of shells) {
+    expect(shell.className).not.toMatch(/max-w-/);
+  }
+  // o sufixo " | Evandro.dev.br" vem do layout: o título não o repete
+  expect(metadata.title).toBe("Currículo de Evandro Fonseca Junior");
+  expect(metadata.alternates?.canonical).toBe(
+    "https://evandro.dev.br/curriculo",
+  );
+});
+
+it("shows the Innovo company name with the right accents", () => {
+  render(CurriculoPage());
+
+  expect(
+    screen.getByText(/Innovo Tecnologia da Informação Ltda\./),
+  ).toBeVisible();
+  expect(document.body.textContent).not.toMatch(/Informacao/);
+});
+
 it("shows a matching breadcrumb and keeps consulting secondary to hiring", () => {
   render(CurriculoPage());
 
-  const breadcrumb = screen.getByRole("navigation", { name: "Breadcrumb" });
+  const breadcrumb = screen.getByRole("navigation", {
+    name: "Trilha de navegação",
+  });
   const breadcrumbLinks = within(breadcrumb).getAllByRole("link");
   expect(breadcrumbLinks.map((link) => link.textContent)).toEqual([
     "Início",

app/curriculo/page.tsx

@@ -9,20 +9,21 @@ import {
   buildPageSocialMetadata,
   buildProfilePageJsonLd,
 } from "@/lib/seo";
-import { siteName, siteUrl } from "@/lib/site-content";
+import { siteUrl } from "@/lib/site-content";
 import CvDownloadLink from "./CvDownloadLink";
 
 const pageUrl = `${siteUrl}/curriculo`;
+const pageTitle = "Currículo de Evandro Fonseca Junior";
+const pageDescription =
+  "Currículo profissional de Evandro Fonseca Junior, engenheiro da computação e desenvolvedor de software: experiência, formação e competências técnicas.";
 
 export const metadata: Metadata = {
-  title: { absolute: `Currículo de Evandro Fonseca Junior | ${siteName}` },
-  description:
-    "Currículo profissional de Evandro Fonseca Junior, engenheiro da computação e desenvolvedor de software, com experiência, formação e competências técnicas.",
+  title: pageTitle,
+  description: pageDescription,
   ...buildPageSocialMetadata({
     url: pageUrl,
-    title: `Currículo de Evandro Fonseca Junior | ${siteName}`,
-    description:
-      "Experiência profissional, formação e competências técnicas de Evandro Fonseca Junior para avaliação de contratação.",
+    title: pageTitle,
+    description: pageDescription,
     type: "profile",
   }),
 };
@@ -43,7 +44,7 @@ export default function CurriculoPage() {
     <main>
       <script type="application/ld+json">{safeJsonLd(jsonLd)}</script>
       <section className={`ds-section ds-section-dark ${pageTop}`}>
-        <div className="ds-section-shell max-w-[960px]">
+        <div className="ds-section-shell">
           <Breadcrumb
             items={[
               { label: "Início", href: "/" },

app/metadata-limits.test.ts

@@ -0,0 +1,162 @@
+import type { Metadata } from "next";
+import { caseStudies, servicePages, siteUrl } from "@/lib/site-content";
+import { generateMetadata as generateCaseMetadata } from "./cases/[slug]/page";
+import { metadata as casesMetadata } from "./cases/page";
+import { metadata as curriculoMetadata } from "./curriculo/page";
+import { metadata as layoutMetadata } from "./layout";
+import { metadata as notFoundMetadata } from "./not-found";
+import { metadata as privacyMetadata } from "./privacidade/page";
+import { generateMetadata as generateServiceMetadata } from "./servicos/[slug]/page";
+import { metadata as servicesMetadata } from "./servicos/page";
+
+jest.mock("next/navigation", () => ({ notFound: jest.fn() }));
+// o layout importa a fonte do Google e o CSS global; fora do Next nenhum dos dois existe
+jest.mock("next/font/google", () => ({
+  Geist_Mono: () => ({ variable: "font-mono-var" }),
+  Space_Grotesk: () => ({ variable: "font-display-var" }),
+}));
+jest.mock("./globals.css", () => ({}));
+
+/** Sufixo que o layout acrescenta a todo título (" | Evandro.dev.br"): 17 caracteres, não 16; por isso o teto efetivo do título é 43. */
+const TITLE_SUFFIX = " | Evandro.dev.br";
+const MAX_META_TITLE = 44;
+const MAX_FULL_TITLE = 60;
+const MAX_DESCRIPTION = 155;
+
+interface Route {
+  route: string;
+  metadata: Metadata;
+}
+
+async function collectRoutes(): Promise<Route[]> {
+  const cases = await Promise.all(
+    caseStudies.map(async ({ id }) => ({
+      route: `/cases/${id}`,
+      metadata: await generateCaseMetadata({
+        params: Promise.resolve({ slug: id }),
+      }),
+    })),
+  );
+  const services = await Promise.all(
+    servicePages.map(async ({ slug }) => ({
+      route: `/servicos/${slug}`,
+      metadata: await generateServiceMetadata({
+        params: Promise.resolve({ slug }),
+      }),
+    })),
+  );
+
+  return [
+    { route: "/cases", metadata: casesMetadata },
+    ...cases,
+    { route: "/servicos", metadata: servicesMetadata },
+    ...services,
+    { route: "/curriculo", metadata: curriculoMetadata },
+    { route: "/privacidade", metadata: privacyMetadata },
+    { route: "/not-found", metadata: notFoundMetadata },
+  ];
+}
+
+function textOf(value: unknown): string {
+  if (typeof value === "string") return value;
+  throw new Error(`Esperava um texto, recebi ${JSON.stringify(value)}`);
+}
+
+describe("títulos e descrições das rotas de cases, serviços, currículo, privacidade e 404", () => {
+  it("cobre as 19 rotas do escopo", async () => {
+    expect(await collectRoutes()).toHaveLength(1 + 8 + 1 + 6 + 1 + 1 + 1);
+    expect(TITLE_SUFFIX).toHaveLength(17);
+  });
+
+  it(`mantém o título em até ${MAX_META_TITLE} caracteres, ${MAX_FULL_TITLE} com o sufixo do layout`, async () => {
+    const violations = (await collectRoutes()).flatMap(
+      ({ route, metadata }) => {
+        const title = textOf(metadata.title);
+        const full = `${title}${TITLE_SUFFIX}`;
+        return title.length > MAX_META_TITLE || full.length > MAX_FULL_TITLE
+          ? [`${route}: "${title}" tem ${title.length} caracteres`]
+          : [];
+      },
+    );
+    expect(violations).toEqual([]);
+  });
+
+  it("não repete o nome do site dentro do título (o layout já o acrescenta)", async () => {
+    const violations = (await collectRoutes()).flatMap(
+      ({ route, metadata }) => {
+        const title = textOf(metadata.title);
+        return /\||Evandro\.dev\.br/.test(title) ? [`${route}: ${title}`] : [];
+      },
+    );
+    expect(violations).toEqual([]);
+  });
+
+  it(`mantém a descrição em até ${MAX_DESCRIPTION} caracteres`, async () => {
+    const violations = (await collectRoutes()).flatMap(
+      ({ route, metadata }) => {
+        const description = textOf(metadata.description);
+        return description.length > MAX_DESCRIPTION || description.length < 40
+          ? [`${route}: a descrição tem ${description.length} caracteres`]
+          : [];
+      },
+    );
+    expect(violations).toEqual([]);
+  });
+
+  it("repete no cartão de compartilhamento o título e a descrição, dentro dos mesmos limites", async () => {
+    for (const { route, metadata } of await collectRoutes()) {
+      // o 404 não tem cartão próprio: só noindex
+      if (route === "/not-found") continue;
+      for (const card of [metadata.openGraph, metadata.twitter]) {
+        expect(textOf(card?.title)).toBe(textOf(metadata.title));
+        expect(textOf(card?.description)).toBe(textOf(metadata.description));
+      }
+    }
+  });
+
+  it("não repete título nem descrição entre rotas", async () => {
+    const routes = await collectRoutes();
+    const titles = routes.map(({ metadata }) => textOf(metadata.title));
+    const descriptions = routes.map(({ metadata }) =>
+      textOf(metadata.description),
+    );
+    expect(new Set(titles).size).toBe(titles.length);
+    expect(new Set(descriptions).size).toBe(descriptions.length);
+  });
+
+  it("dá a cada página a própria canônica, e nenhuma ao 404", async () => {
+    for (const { route, metadata } of await collectRoutes()) {
+      if (route === "/not-found") {
+        expect(metadata.alternates).toEqual({ canonical: null });
+      } else {
+        expect(metadata.alternates?.canonical).toBe(`${siteUrl}${route}`);
+      }
+    }
+  });
+});
+
+describe("título e descrição da home, que moram no layout", () => {
+  // o `title.default` não passa pelo template do layout, então já leva o sufixo
+  const homeTitle = (layoutMetadata.title as { default: string }).default;
+
+  it(`mantém o título da home em até ${MAX_FULL_TITLE} caracteres, sufixo incluído`, () => {
+    expect(homeTitle.endsWith(TITLE_SUFFIX)).toBe(true);
+    expect(homeTitle.length).toBeLessThanOrEqual(MAX_FULL_TITLE);
+  });
+
+  it(`mantém a descrição da home em até ${MAX_DESCRIPTION} caracteres`, () => {
+    const description = textOf(layoutMetadata.description);
+    expect(description.length).toBeLessThanOrEqual(MAX_DESCRIPTION);
+    expect(description.length).toBeGreaterThanOrEqual(40);
+  });
+
+  it("não repete o título nem a descrição da home em outra rota", async () => {
+    const routes = await collectRoutes();
+    const titles = routes.map(({ metadata }) => textOf(metadata.title));
+    const descriptions = routes.map(({ metadata }) =>
+      textOf(metadata.description),
+    );
+    expect(titles).not.toContain(homeTitle.slice(0, -TITLE_SUFFIX.length));
+    expect(descriptions).not.toContain(textOf(layoutMetadata.description));
+  });
+});

app/not-found.test.tsx

@@ -0,0 +1,33 @@
+import { render, screen } from "@testing-library/react";
+import NotFound, { metadata } from "./not-found";
+
+describe("not-found", () => {
+  it("has no canonical (the home one does not apply to a 404) and no generic robots tag of its own", () => {
+    // o Next já escreve <meta name="robots" content="noindex"> no 404: repeti-lo duplicaria a tag
+    expect(metadata.alternates).toEqual({ canonical: null });
+    expect(metadata.robots).not.toHaveProperty("index");
+    expect(metadata.robots).not.toHaveProperty("follow");
+  });
+
+  it("keeps Googlebot out, since the root layout lets it index", () => {
+    expect(metadata.robots).toEqual({
+      googleBot: { index: false, follow: false },
+    });
+  });
+
+  it("explains the problem and offers a way back, in Portuguese", () => {
+    render(<NotFound />);
+
+    expect(screen.getByRole("heading", { level: 1 })).toHaveTextContent("404");
+    expect(
+      screen.getByRole("heading", { level: 2, name: "Página não encontrada" }),
+    ).toBeVisible();
+    expect(
+      screen.getByRole("link", { name: "Voltar ao início" }),
+    ).toHaveAttribute("href", "/");
+    expect(screen.getByRole("link", { name: "Ver os cases" })).toHaveAttribute(
+      "href",
+      "/cases",
+    );
+  });
+});

app/not-found.tsx

@@ -2,15 +2,13 @@ import { ArrowLeft, Code2, Home } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";
 
-// O layout raiz libera a indexação (inclusive para o Googlebot); aqui a regra inteira é trocada por noindex.
+// O Next já escreve <meta name="robots" content="noindex"> em toda página 404; repetir `robots` aqui duplicaria a tag.
+// O layout raiz libera a indexação para o Googlebot, então só essa regra é trocada. A canônica da home também não vale num 404.
 export const metadata: Metadata = {
   title: "Página não encontrada",
   description: "A página que você procura não existe ou foi movida.",
-  robots: {
-    index: false,
-    follow: false,
-    googleBot: { index: false, follow: false },
-  },
+  alternates: { canonical: null },
+  robots: { googleBot: { index: false, follow: false } },
 };
 
 export default function NotFound() {

app/privacidade/page.test.tsx

@@ -4,7 +4,9 @@ import PrivacyPage, { metadata } from "./page";
 it("preserves breadcrumb navigation and a breadcrumb-only JSON-LD graph", () => {
   const { container } = render(<PrivacyPage />);
 
-  const breadcrumb = screen.getByRole("navigation", { name: "Breadcrumb" });
+  const breadcrumb = screen.getByRole("navigation", {
+    name: "Trilha de navegação",
+  });
   const breadcrumbLinks = within(breadcrumb).getAllByRole("link");
   expect(breadcrumbLinks.map((link) => link.textContent)).toEqual([
     "Início",
@@ -50,6 +52,18 @@ it("mentions no GitHub link and no English jargon in the visible text", () => {
   }
 });
 
+it("uses the same shell as the home, with no narrow max-width", () => {
+  const { container } = render(<PrivacyPage />);
+
+  const shells = container.querySelectorAll(".ds-section-shell");
+  expect(shells.length).toBeGreaterThan(0);
+  for (const shell of shells) {
+    expect(shell.className).not.toMatch(/max-w-/);
+  }
+  // o sufixo " | Evandro.dev.br" vem do layout: o título não o repete
+  expect(metadata.title).toBe("Privacidade e consentimento");
+});
+
 it("keeps the lime fill for contact actions only", () => {
   const { container } = render(<PrivacyPage />);
 

app/privacidade/page.tsx

@@ -4,19 +4,20 @@ import { Breadcrumb } from "@/app/components/Breadcrumb";
 import { pageTop } from "@/app/components/button-styles";
 import { safeJsonLd } from "@/lib/jsonld";
 import { buildBreadcrumbList, buildPageSocialMetadata } from "@/lib/seo";
-import { siteName, siteUrl } from "@/lib/site-content";
+import { siteUrl } from "@/lib/site-content";
 
 const pageUrl = `${siteUrl}/privacidade`;
+const pageTitle = "Privacidade e consentimento";
+const pageDescription =
+  "Como o portfólio trata dados de contato, consentimento de analytics, links externos e solicitações de privacidade.";
 
 export const metadata: Metadata = {
-  title: "Privacidade e consentimento",
-  description:
-    "Como o portfólio trata dados de contato, consentimento de analytics, links externos e solicitações de privacidade.",
+  title: pageTitle,
+  description: pageDescription,
   ...buildPageSocialMetadata({
     url: pageUrl,
-    title: `Privacidade e consentimento | ${siteName}`,
-    description:
-      "Informações factuais sobre contato, analytics e preferências de privacidade no portfólio.",
+    title: pageTitle,
+    description: pageDescription,
     type: "website",
   }),
 };
@@ -37,7 +38,7 @@ export default function PrivacyPage() {
       <script type="application/ld+json">{safeJsonLd(jsonLd)}</script>
 
       <section className={`ds-section ds-section-dark ${pageTop}`}>
-        <div className="ds-section-shell max-w-[960px]">
+        <div className="ds-section-shell">
           <Breadcrumb
             items={[
               { label: "Início", href: "/" },

app/robots.test.ts

@@ -0,0 +1,29 @@
+import { readFileSync } from "node:fs";
+import { join } from "node:path";
+import { siteUrl } from "@/lib/site-content";
+import robots from "./robots";
+
+describe("robots", () => {
+  it("allows everything, points to the sitemap at the site address and lists no route that does not exist", () => {
+    expect(robots()).toEqual({
+      rules: [
+        {
+          userAgent: "*",
+          allow: ["/", "/_next/static/", "/_next/image/"],
+        },
+      ],
+      sitemap: `${siteUrl}/sitemap.xml`,
+    });
+  });
+
+  it("has no host (Yandex only, deprecated) and blocks no /api/ or /admin/", () => {
+    const result = robots();
+    expect(result).not.toHaveProperty("host");
+    expect(JSON.stringify(result)).not.toMatch(/\/api\/|\/admin\/|disallow/i);
+  });
+
+  it("is saved without a byte order mark", () => {
+    const bytes = readFileSync(join(__dirname, "robots.ts"));
+    expect([...bytes.subarray(0, 3)]).not.toEqual([0xef, 0xbb, 0xbf]);
+  });
+});

app/robots.ts

@@ -1,4 +1,5 @@
-import type { MetadataRoute } from "next";
+import type { MetadataRoute } from "next";
+import { siteUrl } from "@/lib/site-content";
 
 export default function robots(): MetadataRoute.Robots {
   return {
@@ -6,10 +7,8 @@ export default function robots(): MetadataRoute.Robots {
       {
         userAgent: "*",
         allow: ["/", "/_next/static/", "/_next/image/"],
-        disallow: ["/api/", "/admin/"],
       },
     ],
-    sitemap: "https://evandro.dev.br/sitemap.xml",
-    host: "https://evandro.dev.br",
+    sitemap: `${siteUrl}/sitemap.xml`,
   };
 }

app/servicos/[slug]/page.test.tsx

@@ -4,6 +4,8 @@ import {
   caseStudies,
   getRelatedCases,
   getServicePage,
+  isClientCase,
+  servicePages,
   siteUrl,
 } from "@/lib/site-content";
 import ServicesIndexPage from "../page";
@@ -62,16 +64,16 @@ it("keeps static params and route metadata canonical", async () => {
   const url = `${siteUrl}/servicos/${service.slug}`;
 
   expect(metadata).toMatchObject({
-    title: service.seoTitle,
+    title: service.metaTitle,
     description: service.metaDescription,
     alternates: { canonical: url },
     openGraph: {
-      title: service.seoTitle,
+      title: service.metaTitle,
       description: service.metaDescription,
       url,
     },
     twitter: {
-      title: service.seoTitle,
+      title: service.metaTitle,
       description: service.metaDescription,
     },
   });
@@ -192,7 +194,7 @@ it("renders answer-first consulting, reciprocal case links and minimal schema",
   ]);
 
   const visibleBreadcrumb = screen.getByRole("navigation", {
-    name: "Breadcrumb",
+    name: "Trilha de navegação",
   });
   expect(
     within(visibleBreadcrumb)
@@ -273,7 +275,7 @@ it("shows the client cases first, right after the hero, with the first cover in
 
   const casesHeading = screen.getByRole("heading", {
     level: 2,
-    name: "Veja projetos parecidos, já prontos",
+    name: "Onde já apliquei isso",
   });
   expect(
     isBefore(screen.getByRole("heading", { level: 1 }), casesHeading),
@@ -311,9 +313,7 @@ it("hides the related block and the hero frame when a service has no case", asyn
   const { container } = await renderService("tauri-rust");
 
   expect(
-    screen.queryByRole("heading", {
-      name: "Veja projetos parecidos, já prontos",
-    }),
+    screen.queryByRole("heading", { name: "Onde já apliquei isso" }),
   ).toBeNull();
   expect(screen.queryByRole("link", { name: /^Ler case:/ })).toBeNull();
   expect(
@@ -331,11 +331,122 @@ it("labels the Twins Lab prototype as a laboratory project on the IoT service",
   expect(caseLinks.map((link) => link.getAttribute("href"))).toEqual([
     "/cases/twins-lab",
   ]);
-  expect(screen.getByText(/Protótipo de laboratório/)).toBeVisible();
+  expect(screen.getByText("Twins Lab · Projeto próprio")).toBeVisible();
+  expect(screen.queryByText(/Protótipo de laboratório/)).toBeNull();
   // sem captura gravada, não há moldura nem imagem
   expect(container.querySelector(".ds-bframe")).toBeNull();
 });
 
+it("labels only the laboratory projects as 'Projeto próprio'", async () => {
+  for (const slug of ["criacao-de-sites", "integracao-hardware-software-iot"]) {
+    const { unmount } = await renderService(slug);
+    const related = getRelatedCases(getServicePage(slug)?.relatedCaseIds ?? []);
+    expect(related.length).toBeGreaterThan(0);
+    const labels = screen.queryAllByText(/· Projeto próprio$/);
+    expect(labels).toHaveLength(related.filter((c) => !isClientCase(c)).length);
+    unmount();
+  }
+});
+
+it("says in one sentence, per case, why it matters to the service", async () => {
+  for (const { slug, relatedCaseIds, caseRelevance } of servicePages) {
+    if (relatedCaseIds.length === 0) continue;
+    const { unmount } = await renderService(slug);
+
+    for (const id of relatedCaseIds) {
+      const sentence = caseRelevance[id];
+      expect(sentence).toBeTruthy();
+      const card = screen.getByText(sentence).closest("article");
+      expect(card).toContainElement(
+        screen.getByRole("link", {
+          name: `Ler case: ${caseStudies.find((c) => c.id === id)?.title}`,
+        }),
+      );
+    }
+    unmount();
+  }
+});
+
+it("cites the Apolo Energia experience in text on the IoT and architecture pages, with no link", async () => {
+  for (const slug of [
+    "integracao-hardware-software-iot",
+    "arquitetura-de-software",
+  ]) {
+    const note = getServicePage(slug)?.experienceNote ?? "";
+    const { container, unmount } = await renderService(slug);
+
+    const paragraph = screen.getByText(/Apolo Energia/);
+    expect(paragraph).toBeVisible();
+    expect(paragraph.textContent).toContain(note);
+    expect(paragraph.textContent).toMatch(/Desde 2022/);
+    expect(paragraph.closest("a")).toBeNull();
+    expect(paragraph.querySelector("a")).toBeNull();
+    // dentro do bloco "Onde já apliquei isso", antes dos cards
+    const block = screen.getByRole("heading", {
+      name: "Onde já apliquei isso",
+    });
+    expect(isBefore(block, paragraph)).toBe(true);
+    expect(
+      isBefore(
+        paragraph,
+        container.querySelector("article.ds-card") as Element,
+      ),
+    ).toBe(true);
+    const hrefs = screen
+      .getAllByRole("link")
+      .map((link) => link.getAttribute("href") ?? "");
+    expect(hrefs.some((href) => /apolo/i.test(href))).toBe(false);
+    unmount();
+  }
+});
+
+it("does not mention Apolo Energia on the other service pages", async () => {
+  for (const slug of [
+    "criacao-de-sites",
+    "engenharia-de-software",
+    "consultoria-nextjs",
+    "tauri-rust",
+  ]) {
+    const { container, unmount } = await renderService(slug);
+    expect(container.textContent).not.toMatch(/Apolo/);
+    unmount();
+  }
+});
+
+it("puts the FAQ before the next step and ends every service page with a contact button", async () => {
+  for (const { slug, faq, ctaLabel } of servicePages) {
+    const { container, unmount } = await renderService(slug);
+
+    const nextStep = screen.getByRole("heading", {
+      level: 2,
+      name: "Conte o que você precisa resolver.",
+    });
+    if (faq?.length) {
+      const faqHeading = screen.getByRole("heading", {
+        level: 2,
+        name: "Perguntas frequentes",
+      });
+      expect(isBefore(faqHeading, nextStep)).toBe(true);
+    }
+
+    // o botão de contato vem depois das dúvidas: o último elemento da página é a seção do próximo passo
+    const last = container.querySelector("main")?.lastElementChild;
+    expect(last).toContainElement(nextStep);
+    const cta = within(last as HTMLElement).getByRole("link", {
+      name: `${ctaLabel} no WhatsApp`,
+    });
+    expect(new URL(cta.getAttribute("href") ?? "").origin).toBe(
+      "https://wa.me",
+    );
+    for (const question of faq ?? []) {
+      expect(
+        isBefore(screen.getByRole("heading", { name: question.question }), cta),
+      ).toBe(true);
+    }
+    unmount();
+  }
+});
+
 it("renders the offer block only when some field is filled in", async () => {
   const empty = await renderService("criacao-de-sites");
   expect(

app/servicos/[slug]/page.tsx

@@ -51,11 +51,11 @@ export async function generateMetadata({
   const url = `${siteUrl}/servicos/${service.slug}`;
 
   return {
-    title: service.seoTitle,
+    title: service.metaTitle,
     description: service.metaDescription,
     ...buildPageSocialMetadata({
       url,
-      title: service.seoTitle,
+      title: service.metaTitle,
       description: service.metaDescription,
       type: "article",
     }),
@@ -129,7 +129,7 @@ export default async function ServicePage({ params }: ServicePageProps) {
                 </a>
               ) : null}
             </div>
-            <p className="mt-sp-4 text-sm leading-6 text-white/70">
+            <p className="mt-sp-4 text-[15px] md:text-sm leading-6 text-white/70">
               Fale diretamente com Evandro. Abre uma conversa, sem precisar
               preencher um formulário. Atendimento remoto a partir de Garuva,
               SC.
@@ -139,7 +139,11 @@ export default async function ServicePage({ params }: ServicePageProps) {
         </div>
       </section>
 
-      <ServiceRelatedCases cases={relatedCases} />
+      <ServiceRelatedCases
+        cases={relatedCases}
+        relevance={service.caseRelevance}
+        experienceNote={service.experienceNote}
+      />
 
       <section className="ds-section">
         <div className="ds-section-shell">
@@ -171,7 +175,7 @@ export default async function ServicePage({ params }: ServicePageProps) {
             <article className="min-w-0">
               <div className="ds-kicker">Da conversa à entrega</div>
               <h2 className="ds-card-title">Como trabalhamos</h2>
-              <ol className="mt-sp-5 list-decimal space-y-sp-4 pl-sp-5 text-sm leading-8 text-[var(--ink-80)]">
+              <ol className="mt-sp-5 list-decimal space-y-sp-4 pl-sp-5 text-[15px] md:text-sm leading-8 text-[var(--ink-80)]">
                 {service.process.map((step) => (
                   <li key={step} className="pl-sp-2">
                     {step}
@@ -224,7 +228,9 @@ export default async function ServicePage({ params }: ServicePageProps) {
 
       <ServiceOffer service={service} />
 
-      <section className="ds-section ds-section-dark pb-sp-6">
+      <ServiceFaq faq={service.faq} />
+
+      <section className="ds-section ds-section-dark">
         <div className="ds-section-shell">
           <div className="ds-card border-white/10 bg-[rgba(255,255,255,0.03)]">
             <div className="ds-kicker">Próximo passo</div>
@@ -252,8 +258,6 @@ export default async function ServicePage({ params }: ServicePageProps) {
           </div>
         </div>
       </section>
-
-      <ServiceFaq faq={service.faq} />
     </main>
   );
 }

app/servicos/_components/ServiceRelatedCases.paths.test.tsx

@@ -0,0 +1,179 @@
+import { render, screen, within } from "@testing-library/react";
+import { getCaseMedia } from "@/app/cases/_components/case-media";
+import { getShowcaseAssets } from "@/lib/project-showcase";
+import { caseStudies, isClientCase } from "@/lib/site-content";
+import { ServiceRelatedCases } from "./ServiceRelatedCases";
+
+/**
+ * Testes de caminhos-base de ServiceRelatedCases, direto no componente:
+ * sem case nem experiência, só a experiência, case sem frase de relação, case de laboratório,
+ * case sem captura e case sem site no ar. A existência dos arquivos em disco é simulada em getCaseMedia.
+ */
+
+jest.mock("@/app/cases/_components/case-media", () => ({
+  getCaseMedia: jest.fn(),
+}));
+
+const mockedGetCaseMedia = jest.mocked(getCaseMedia);
+
+function getCase(id: string) {
+  const caseStudy = caseStudies.find((item) => item.id === id);
+  if (!caseStudy) throw new Error(`Missing case ${id}`);
+  return caseStudy;
+}
+
+function withDesktopCapture() {
+  mockedGetCaseMedia.mockImplementation((id, device) =>
+    device === "desktop" ? getShowcaseAssets(id, device) : undefined,
+  );
+}
+
+const sev = getCase("sev-modaintima"); // cliente, com site no ar
+const asServicos = getCase("as-servicos"); // cliente, sem site público
+const twins = getCase("twins-lab"); // laboratório, sem site público
+const TITLE = "Onde já apliquei isso";
+const NOTE = "Texto de experiência de teste.";
+
+beforeEach(() => {
+  mockedGetCaseMedia.mockReturnValue(undefined);
+});
+
+afterEach(() => {
+  mockedGetCaseMedia.mockReset();
+});
+
+describe("ServiceRelatedCases", () => {
+  it("path: no case and no experience note -> renders nothing", () => {
+    const { container } = render(
+      <ServiceRelatedCases cases={[]} relevance={{}} />,
+    );
+
+    expect(container).toBeEmptyDOMElement();
+  });
+
+  it("path: no case but an experience note -> keeps the block with the note and no case card", () => {
+    const { container } = render(
+      <ServiceRelatedCases cases={[]} relevance={{}} experienceNote={NOTE} />,
+    );
+
+    expect(
+      screen.getByRole("heading", { level: 2, name: TITLE }),
+    ).toBeVisible();
+    expect(screen.getByText(NOTE)).toBeVisible();
+    expect(container.querySelectorAll("article")).toHaveLength(0);
+    expect(screen.queryByRole("link", { name: /^Ler case:/ })).toBeNull();
+  });
+
+  it("path: cases and no experience note (main path) -> one card per case, no 'Na prática' paragraph", () => {
+    withDesktopCapture();
+    const { container } = render(
+      <ServiceRelatedCases
+        cases={[sev]}
+        relevance={{ [sev.id]: "Frase de relação do SEV." }}
+      />,
+    );
+
+    expect(
+      screen.getByRole("heading", { level: 2, name: TITLE }),
+    ).toBeVisible();
+    expect(screen.queryByText("Na prática:")).toBeNull();
+    const card = container.querySelector("article");
+    if (!card) throw new Error("Missing case card");
+    expect(within(card).getByText(sev.headline)).toBeVisible();
+    // case de cliente: o kicker é só o nome
+    expect(within(card).getByText(sev.title)).toBeVisible();
+    expect(within(card).queryByText(/Projeto próprio/)).toBeNull();
+    expect(within(card).getByText("Frase de relação do SEV.")).toBeVisible();
+    expect(
+      within(card).getByRole("link", { name: `Ler case: ${sev.title}` }),
+    ).toHaveAttribute("href", `/cases/${sev.id}`);
+    expect(
+      within(card).getByRole("link", { name: `Abrir o site: ${sev.title}` }),
+    ).toHaveAttribute("href", sev.demoUrl);
+  });
+
+  it("path: cases and an experience note -> the note comes first, in text only, with no link", () => {
+    render(
+      <ServiceRelatedCases
+        cases={[sev]}
+        relevance={{ [sev.id]: "Frase de relação do SEV." }}
+        experienceNote={NOTE}
+      />,
+    );
+
+    const note = screen.getByText(NOTE, { exact: false });
+    expect(screen.getByText("Na prática:")).toBeVisible();
+    expect(note.closest("a")).toBeNull();
+    expect(note.querySelector("a")).toBeNull();
+    expect(
+      note.compareDocumentPosition(
+        screen.getByRole("link", { name: `Ler case: ${sev.title}` }),
+      ) & Node.DOCUMENT_POSITION_FOLLOWING,
+    ).toBeTruthy();
+  });
+
+  it("path: case with a desktop capture -> cover link with the poster, hidden from assistive tech", () => {
+    withDesktopCapture();
+    const { container } = render(
+      <ServiceRelatedCases cases={[sev]} relevance={{ [sev.id]: "Frase." }} />,
+    );
+
+    const coverLink = container.querySelector(
+      `article a[aria-hidden="true"][href="/cases/${sev.id}"]`,
+    );
+    expect(coverLink).not.toBeNull();
+    expect(coverLink).toHaveAttribute("tabindex", "-1");
+    expect(coverLink?.querySelector(".ds-bframe img")).toHaveAttribute(
+      "alt",
+      `Captura de tela do site ${sev.title}`,
+    );
+  });
+
+  it("path: case without a desktop capture -> no cover link, text and buttons stay", () => {
+    const { container } = render(
+      <ServiceRelatedCases cases={[sev]} relevance={{ [sev.id]: "Frase." }} />,
+    );
+
+    expect(container.querySelector("a[aria-hidden='true']")).toBeNull();
+    expect(container.querySelector(".ds-bframe")).toBeNull();
+    expect(container.querySelector("img")).toBeNull();
+    expect(
+      screen.getByRole("link", { name: `Ler case: ${sev.title}` }),
+    ).toBeVisible();
+  });
+
+  it("path: laboratory case -> kicker marks it as 'Projeto próprio'", () => {
+    expect(isClientCase(twins)).toBe(false);
+    render(
+      <ServiceRelatedCases
+        cases={[twins]}
+        relevance={{ [twins.id]: "Frase." }}
+      />,
+    );
+
+    expect(screen.getByText(`${twins.title} · Projeto próprio`)).toBeVisible();
+  });
+
+  it("path: no relevance sentence for the case -> falls back to the case summary", () => {
+    render(<ServiceRelatedCases cases={[sev]} relevance={{}} />);
+
+    const card = screen.getByRole("heading", { level: 3 }).closest("article");
+    expect(card).not.toBeNull();
+    expect(within(card as HTMLElement).getByText(sev.summary)).toBeVisible();
+  });
+
+  it("path: case without a public site -> no 'Abrir o site' link", () => {
+    expect(asServicos.demoUrl).toBeNull();
+    render(
+      <ServiceRelatedCases
+        cases={[asServicos]}
+        relevance={{ [asServicos.id]: "Frase." }}
+      />,
+    );
+
+    expect(
+      screen.getByRole("link", { name: `Ler case: ${asServicos.title}` }),
+    ).toBeVisible();
+    expect(screen.queryByRole("link", { name: /^Abrir o site/ })).toBeNull();
+  });
+});

app/servicos/_components/ServiceRelatedCases.test.tsx

@@ -0,0 +1,48 @@
+import { render, screen } from "@testing-library/react";
+import { caseStudies } from "@/lib/site-content";
+import { ServiceRelatedCases } from "./ServiceRelatedCases";
+
+const caseStudy = caseStudies[0];
+const note = "Desde 2022 trabalho com isso, em sistemas internos.";
+
+it("renders nothing without cases and without an experience note", () => {
+  const { container } = render(
+    <ServiceRelatedCases cases={[]} relevance={{}} />,
+  );
+  expect(container).toBeEmptyDOMElement();
+});
+
+it("shows only the experience note, without the 'open the case' sentence, when there are no cases", () => {
+  const { container } = render(
+    <ServiceRelatedCases cases={[]} relevance={{}} experienceNote={note} />,
+  );
+
+  expect(
+    screen.getByRole("heading", { level: 2, name: "Onde já apliquei isso" }),
+  ).toBeVisible();
+  expect(screen.getByText(note)).toBeVisible();
+  expect(screen.queryByText(/Abra o case/)).toBeNull();
+  expect(screen.queryByRole("link")).toBeNull();
+  expect(container.querySelector(".ds-grid-2")).toBeNull();
+});
+
+it("invites to open the case and lists each case when there are some", () => {
+  render(
+    <ServiceRelatedCases
+      cases={[caseStudy]}
+      relevance={{ [caseStudy.id]: "Frase própria sobre a relação." }}
+    />,
+  );
+
+  expect(screen.getByText(/Abra o case/)).toBeVisible();
+  expect(screen.getByText("Frase própria sobre a relação.")).toBeVisible();
+  expect(
+    screen.getByRole("link", { name: `Ler case: ${caseStudy.title}` }),
+  ).toHaveAttribute("href", `/cases/${caseStudy.id}`);
+});
+
+it("falls back to the case summary when no relevance sentence is given", () => {
+  render(<ServiceRelatedCases cases={[caseStudy]} relevance={{}} />);
+
+  expect(screen.getByText(caseStudy.summary)).toBeVisible();
+});

app/servicos/_components/ServiceRelatedCases.tsx

@@ -1,16 +1,67 @@
 import Link from "next/link";
-import { CaseCover } from "@/app/cases/_components/CaseCover";
-import { getCaseMedia } from "@/app/cases/_components/case-media";
+import { CaseCoverLink } from "@/app/cases/_components/CaseCoverLink";
 import { secondaryButtonLight, textLink } from "@/app/components/button-styles";
 import { type CaseStudyContent, isClientCase } from "@/lib/site-content";
 
-/** "Veja projetos parecidos": os cases ligados ao serviço. Sem case relacionado, não mostra nada. */
+function ServiceCaseCard({
+  caseStudy,
+  relevance,
+}: {
+  caseStudy: CaseStudyContent;
+  /** Por que este case interessa ao serviço; sem frase própria, vale o resumo do case. */
+  relevance?: string;
+}) {
+  return (
+    <article className="ds-card">
+      <CaseCoverLink
+        id={caseStudy.id}
+        title={caseStudy.title}
+        demoUrl={caseStudy.demoUrl}
+      />
+      <div className="ds-kicker">
+        {isClientCase(caseStudy)
+          ? caseStudy.title
+          : `${caseStudy.title} · Projeto próprio`}
+      </div>
+      <h3 className="ds-card-title">{caseStudy.headline}</h3>
+      <p className="ds-kicker mt-sp-5">Relação com este serviço</p>
+      <p className="ds-copy !mt-sp-2">{relevance ?? caseStudy.summary}</p>
+      <div className="mt-sp-6 flex flex-wrap items-center gap-sp-3">
+        <Link href={`/cases/${caseStudy.id}`} className={secondaryButtonLight}>
+          Ler case: {caseStudy.title}
+        </Link>
+        {caseStudy.demoUrl ? (
+          <a
+            href={caseStudy.demoUrl}
+            className={textLink}
+            target="_blank"
+            rel="noreferrer"
+          >
+            Abrir o site: {caseStudy.title}
+          </a>
+        ) : null}
+      </div>
+    </article>
+  );
+}
+
+/**
+ * "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.
+ */
 export function ServiceRelatedCases({
   cases,
+  relevance,
+  experienceNote,
 }: {
   cases: readonly CaseStudyContent[];
+  /** Por que cada case interessa a este serviço (chave: id do case). */
+  relevance: Readonly<Record<string, string>>;
+  experienceNote?: string;
 }) {
-  if (cases.length === 0) return null;
+  const hasCases = cases.length > 0;
+  if (!hasCases && !experienceNote) return null;
 
   return (
     <section
@@ -23,61 +74,37 @@ export function ServiceRelatedCases({
           <div className="ds-section-meta">
             <p className="ds-eyebrow">Trabalhos parecidos</p>
             <h2 id="casos-relacionados-titulo" className="ds-section-title">
-              Veja projetos parecidos, já prontos
+              Onde já apliquei isso
             </h2>
-            <p className="ds-section-description">
-              Projetos reais nesta área. Abra o case para ver o que foi feito e
-              como ficou.
-            </p>
+            {hasCases ? (
+              <p className="ds-section-description">
+                Cada projeto tem a ver com este serviço de um jeito. Abra o case
+                para ver o que foi feito e como ficou.
+              </p>
+            ) : null}
           </div>
         </div>
 
-        <div className="ds-grid-2">
-          {cases.map((caseStudy) => (
-            <article key={caseStudy.id} className="ds-card">
-              {getCaseMedia(caseStudy.id, "desktop") ? (
-                <Link
-                  href={`/cases/${caseStudy.id}`}
-                  aria-hidden="true"
-                  tabIndex={-1}
-                  className="mb-sp-5 block"
-                >
-                  <CaseCover
-                    id={caseStudy.id}
-                    title={caseStudy.title}
-                    demoUrl={caseStudy.demoUrl}
-                    sizes="(min-width: 1024px) 560px, 100vw"
-                  />
-                </Link>
-              ) : null}
-              <div className="ds-kicker">
-                {isClientCase(caseStudy)
-                  ? caseStudy.title
-                  : `${caseStudy.title} · Protótipo de laboratório`}
-              </div>
-              <h3 className="ds-card-title">{caseStudy.headline}</h3>
-              <p className="ds-copy">{caseStudy.summary}</p>
-              <div className="mt-sp-6 flex flex-wrap items-center gap-sp-3">
-                <Link
-                  href={`/cases/${caseStudy.id}`}
-                  className={secondaryButtonLight}
-                >
-                  Ler case: {caseStudy.title}
-                </Link>
-                {caseStudy.demoUrl ? (
-                  <a
-                    href={caseStudy.demoUrl}
-                    className={textLink}
-                    target="_blank"
-                    rel="noreferrer"
-                  >
-                    Abrir o site: {caseStudy.title}
-                  </a>
-                ) : null}
-              </div>
-            </article>
-          ))}
-        </div>
+        {experienceNote ? (
+          <p className="ds-copy mb-sp-8 max-w-[72ch]">
+            <strong className="font-semibold text-[var(--ink)]">
+              Na prática:
+            </strong>{" "}
+            {experienceNote}
+          </p>
+        ) : null}
+
+        {hasCases ? (
+          <div className="ds-grid-2">
+            {cases.map((caseStudy) => (
+              <ServiceCaseCard
+                key={caseStudy.id}
+                caseStudy={caseStudy}
+                relevance={relevance[caseStudy.id]}
+              />
+            ))}
+          </div>
+        ) : null}
       </div>
     </section>
   );

app/servicos/page.tsx

@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { CaseCover } from "@/app/cases/_components/CaseCover";
-import { getCaseMedia } from "@/app/cases/_components/case-media";
+import { CaseCoverLink } from "@/app/cases/_components/CaseCoverLink";
 import { Breadcrumb } from "@/app/components/Breadcrumb";
 import {
   pageTop,
@@ -15,9 +14,9 @@ import { buildBreadcrumbList, buildPageSocialMetadata } from "@/lib/seo";
 import { clientCases, serviceHubLinks, siteUrl } from "@/lib/site-content";
 
 const pageUrl = `${siteUrl}/servicos`;
-const pageTitle = "Sites, Sistemas e Aplicativos sob Medida para Empresas";
+const pageTitle = "Sites, sistemas e aplicativos sob medida";
 const pageDescription =
-  "Sites, sistemas web e aplicativos sob medida para sua empresa apresentar o negócio e organizar a operação. Evandro, desenvolvedor em Garuva-SC, atende Joinville, região e todo o Brasil de forma remota.";
+  "Sites, sistemas web e aplicativos sob medida para apresentar seu negócio e organizar a operação. Atendimento de Garuva-SC para todo o Brasil.";
 
 const businessIntents = [
   {
@@ -188,21 +187,11 @@ export default function ServicesIndexPage() {
                 key={caseStudy.id}
                 className="border-t border-[var(--border)] pt-sp-6"
               >
-                {getCaseMedia(caseStudy.id, "desktop") ? (
-                  <Link
-                    href={`/cases/${caseStudy.id}`}
-                    aria-hidden="true"
-                    tabIndex={-1}
-                    className="mb-sp-5 block"
-                  >
-                    <CaseCover
-                      id={caseStudy.id}
-                      title={caseStudy.title}
-                      demoUrl={caseStudy.demoUrl}
-                      sizes="(min-width: 1024px) 560px, 100vw"
-                    />
-                  </Link>
-                ) : null}
+                <CaseCoverLink
+                  id={caseStudy.id}
+                  title={caseStudy.title}
+                  demoUrl={caseStudy.demoUrl}
+                />
                 <p className="ds-kicker">{caseStudy.title}</p>
                 <h3 className="ds-card-title">{caseStudy.headline}</h3>
                 <p className="ds-copy">{caseStudy.summary}</p>
@@ -241,7 +230,7 @@ export default function ServicesIndexPage() {
           </div>
           <div>
             <h2 className="ds-card-title">Antes de contratar</h2>
-            <dl className="mt-sp-5 space-y-sp-6 text-sm">
+            <dl className="mt-sp-5 space-y-sp-6 text-[15px] md:text-sm">
               <div>
                 <dt className="font-semibold">
                   Quanto custa e quanto tempo leva?