fix(home): oferta leva ao formulário, ofertas logo depois da vitrine

O botão das ofertas rola até o contato com o tipo marcado e não quebra mais as âncoras; ofertas com o que você recebe e primeiro passo, logo depois da vitrine; bloco de IA fora da home; cartão largo da SEV no hero do celular; separador da faixa de clientes só entre itens; favicon de 13 para 1,8 KB; pré-carregamento só no hover e nunca de /#... fora da home; X do menu e cabeçalho opaco; WhatsApp com "o case"; /ia com 3 passos e modelo de relatório ilustrativo; Sobre alinhado ao currículo; CSP Report-Only com os domínios do Ads.

app/components/HeroWork.tsx

@@ -1,5 +1,6 @@
 import Image from "next/image";
 import { getShowcaseAssets } from "@/lib/project-showcase";
+import HoverPrefetchLink from "./HoverPrefetchLink";
 import { BrowserFrame } from "./showcase/BrowserFrame";
 import { PhoneFrame } from "./showcase/PhoneFrame";
 
@@ -8,24 +9,32 @@ export type HeroWorkUrl = { text: string; secure: boolean } | null;
 
 const DESKTOP_PROJECT = "sev-modaintima";
 const MOBILE_PROJECT = "as-servicos";
-/** No celular a moldura mostra o site da SEV, o mesmo projeto do navegador ao lado do título no computador. */
+/** No celular o cartão mostra o site da SEV, o mesmo projeto do navegador ao lado do título no computador, e leva ao case. */
 const SMALL_SCREEN_PROJECT = "sev-modaintima";
-/** Altura da moldura de celular abaixo dos botões (px); a largura sai da proporção 390x844 do aparelho. */
-const SMALL_PHONE_HEIGHT = 180;
+const SMALL_SCREEN_TITLE = "SEV Moda Íntima";
+const SMALL_SCREEN_HREF = `/cases/${SMALL_SCREEN_PROJECT}`;
+/**
+ * Altura da imagem do cartão de celular (px): a largura é a da coluna (cerca de 350 px num celular de 390 px). Com 72 px
+ * a área da imagem (cerca de 25 mil px²) fica abaixo da do H1 (cerca de 29 mil px² a 390 px): com 96 px ela era maior, e
+ * numa rede lenta a imagem, que chega depois, passava a ser o LCP no lugar do título (medido com rede e CPU limitadas).
+ */
+const SMALL_CARD_IMAGE_HEIGHT = 72;
 
 /**
  * Trabalho real do hero, em dois formatos. Em telas de 1024 px ou mais, ao lado do título: o pôster do site da SEV
  * Moda Íntima no navegador (com o domínio próprio, sevmodaintima.com.br, na barra de endereço) e o do aplicativo
- * da AS Serviços no celular, numa coluna de cerca de 40% da largura. Abaixo de 1024 px, uma moldura de celular
- * pequena (180 px de altura) com o pôster mobile da SEV, abaixo dos botões.
+ * da AS Serviços no celular, numa coluna de cerca de 40% da largura. Abaixo de 1024 px, um cartão largo e clicável
+ * (a largura da coluna, cerca de 350 px num celular) com o pôster do site da SEV, abaixo dos botões, que leva ao
+ * case da SEV; antes era uma moldura de celular de 65 por 160 px, pequena demais para ver o que era.
  * Os pôsteres vão pelo next/image com `sizes` do tamanho em que aparecem (um arquivo de 1440 px para 491 px de tela
- * era banda desperdiçada), em `loading="lazy"` e prioridade baixa: o título segue como o maior elemento da dobra (LCP)
- * e a imagem que fica escondida pelo breakpoint (display: none) nem é baixada.
+ * era banda desperdiçada), em `loading="lazy"` e prioridade baixa: no celular o título segue como o maior elemento da
+ * dobra (LCP; ver SMALL_CARD_IMAGE_HEIGHT), e a imagem que fica escondida pelo breakpoint (display: none) nem é
+ * baixada. Em tela larga o pôster do navegador é maior que o título e, numa rede lenta, vira o LCP quando chega.
  */
 export default function HeroWork({ url = null }: { url?: HeroWorkUrl }) {
   const desktop = getShowcaseAssets(DESKTOP_PROJECT, "desktop");
   const phone = getShowcaseAssets(MOBILE_PROJECT, "mobile");
-  const smallPhone = getShowcaseAssets(SMALL_SCREEN_PROJECT, "mobile");
+  const smallCard = getShowcaseAssets(SMALL_SCREEN_PROJECT, "desktop");
 
   return (
     <>
@@ -64,26 +73,43 @@ export default function HeroWork({ url = null }: { url?: HeroWorkUrl }) {
         </PhoneFrame>
       </div>
 
-      <div
+      <HoverPrefetchLink
         data-testid="hero-work-mobile"
-        className="hero-in pointer-events-none mt-sp-5 flex items-center gap-sp-4 [--d:.8s] lg:hidden"
+        href={SMALL_SCREEN_HREF}
+        className="hero-in group mt-sp-5 flex w-full flex-col overflow-hidden border border-white/20 bg-white/[0.05] font-display no-underline transition-colors hover:border-white/45 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[var(--slash)] motion-reduce:transition-none [--d:.8s] lg:hidden"
       >
-        <PhoneFrame style={{ height: SMALL_PHONE_HEIGHT }}>
+        <span
+          className="relative block w-full overflow-hidden bg-[var(--ink)]"
+          style={{ height: SMALL_CARD_IMAGE_HEIGHT }}
+        >
           <Image
-            src={smallPhone.poster}
-            alt="Site da SEV Moda Íntima aberto no celular"
-            width={smallPhone.width}
-            height={smallPhone.height}
-            sizes="84px"
+            src={smallCard.poster}
+            alt=""
+            width={smallCard.width}
+            height={smallCard.height}
+            sizes="(min-width: 1024px) 1px, 100vw"
             loading="lazy"
             fetchPriority="low"
             className="absolute inset-0 block h-full w-full object-cover object-top"
           />
-        </PhoneFrame>
-        <p className="max-w-[16em] font-display text-[15px] leading-6 text-[rgba(244,242,237,.72)]">
-          Site da SEV Moda Íntima, como aparece no celular.
-        </p>
-      </div>
+        </span>
+        <span className="flex min-h-12 items-center justify-between gap-sp-4 px-sp-4 py-sp-2 text-[15px] leading-6 text-[#f4f2ed]">
+          <span className="flex flex-col">
+            <span className="font-semibold">Site da {SMALL_SCREEN_TITLE}</span>{" "}
+            <span className="text-[rgba(244,242,237,.72)]">Ver case</span>
+          </span>
+          <svg
+            aria-hidden="true"
+            viewBox="0 0 16 16"
+            className="h-4 w-4 shrink-0 transition-transform group-hover:translate-x-1 motion-reduce:transition-none"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+          >
+            <path d="M2 8h11M9 3.5 13.5 8 9 12.5" />
+          </svg>
+        </span>
+      </HoverPrefetchLink>
     </>
   );
 }