Redesign das páginas internas no novo design system (AAA) (#2)

* feat(design): redesign das páginas internas no novo design system

Padroniza todas as páginas e componentes internos nos tokens e primitivos
de app/globals.css, com contraste AAA (7:1) nos dois temas e alvos de toque
de 44px.

- Páginas reescritas: glossário, séries, série, seletor, comparador,
  diagnóstico, catálogo, component registry, frameworks, framework, sobre
  e a nova 404.
- Componentes: PageHero e SectionHead novos; BoardCard, CodeExample,
  PinRestrictions, SeriesTabMenu e ConnectionsDiagram refeitos, com abas
  e diálogo acessíveis.
- Remove emojis, cores avulsas por série, caixa alta com tracking, texto
  menor que 12px e os pares slate-*/dark:*.
- Comparador: "mostrar só as diferenças" e leitura de ?chips=.
- Corrige overflow em 320/390px e ajusta accent/copper do tema claro
  para fechar 7:1.
- scripts/auditar-temas.mjs passa a travar paleta crua, dark:, texto
  pequeno, emoji e contraste dos tokens.

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016W1xmizFcmXLrmabSvfSuc

* ci: roda lint, auditorias de design e build em cada PR

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016W1xmizFcmXLrmabSvfSuc

---------

Co-authored-by: Claude Sonnet 5.5 <noreply@anthropic.com>

app/not-found.jsx

@@ -0,0 +1,58 @@
+import Header from "@/components/Header";
+import Footer from "@/components/Footer";
+import Link from "next/link";
+import { ArrowRight, BookOpen, Compass, Scale, SlidersHorizontal } from "lucide-react";
+
+export const metadata = {
+	title: "Página não encontrada",
+	robots: { index: false, follow: false },
+};
+
+const CAMINHOS = [
+	{ href: "/series", icon: Compass, titulo: "Séries ESP32", texto: "As 12 famílias, com pinagem e especificações." },
+	{ href: "/seletor", icon: SlidersHorizontal, titulo: "Seletor de chip", texto: "Responda a oito perguntas e receba os modelos indicados." },
+	{ href: "/comparacao", icon: Scale, titulo: "Comparador", texto: "Até quatro séries lado a lado." },
+	{ href: "/glossario", icon: BookOpen, titulo: "Glossário", texto: "Termos de hardware explicados em português." },
+];
+
+export default function NotFound() {
+	return (
+		<div className="site-canvas min-h-screen">
+			<Header />
+
+			<main id="conteudo" className="shell section">
+				<div className="mx-auto max-w-2xl text-center">
+					<p className="eyebrow justify-center">Erro 404</p>
+					<h1 className="page-title mt-4">Essa página não existe.</h1>
+					<p className="lede mx-auto mt-5 max-w-xl">
+						O endereço pode ter mudado ou estar digitado errado. Escolha um destes caminhos para continuar.
+					</p>
+					<div className="mt-8 flex justify-center">
+						<Link href="/" className="btn btn-primary">
+							Voltar ao início
+							<ArrowRight className="h-4 w-4" aria-hidden="true" />
+						</Link>
+					</div>
+				</div>
+
+				<ul className="mx-auto mt-14 grid max-w-4xl gap-3 sm:grid-cols-2">
+					{CAMINHOS.map(({ href, icon: Icon, titulo, texto }) => (
+						<li key={href}>
+							<Link href={href} className="card card-interactive group flex h-full items-start gap-4 p-5">
+								<span className="grid h-10 w-10 shrink-0 place-items-center rounded-full bg-accent-soft text-accent">
+									<Icon className="h-5 w-5" aria-hidden="true" />
+								</span>
+								<span>
+									<span className="block font-semibold text-ink">{titulo}</span>
+									<span className="mt-0.5 block text-sm text-muted">{texto}</span>
+								</span>
+							</Link>
+						</li>
+					))}
+				</ul>
+			</main>
+
+			<Footer />
+		</div>
+	);
+}