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>

components/PageHero.jsx

@@ -0,0 +1,47 @@
+import Link from "next/link";
+
+/**
+ * Abertura padrão das páginas internas: trilha, rótulo, título, frase de apoio
+ * e ações. Mesma voz da /livro e da home, para que nenhuma página pareça
+ * de outro produto.
+ */
+export default function PageHero({ trail = [], icon: Icon, label, title, lede, align = "left", children }) {
+	const center = align === "center";
+	return (
+		<section className="shell pt-8 sm:pt-12">
+			{trail.length > 0 && (
+				<nav aria-label="Trilha de navegação" className="flex flex-wrap items-center gap-2 text-sm text-muted">
+					<Link href="/" className="inline-flex min-h-11 min-w-11 items-center justify-center transition-colors hover:text-accent">
+						Início
+					</Link>
+					{trail.map((item, i) => (
+						<span key={item.label} className="flex min-h-11 items-center gap-2">
+							<span aria-hidden="true" className="text-line-strong">/</span>
+							{item.href && i < trail.length - 1 ? (
+								<Link href={item.href} className="inline-flex min-h-11 min-w-11 items-center justify-center transition-colors hover:text-accent">
+									{item.label}
+								</Link>
+							) : (
+								<span aria-current="page" className="text-ink">
+									{item.label}
+								</span>
+							)}
+						</span>
+					))}
+				</nav>
+			)}
+
+			<div className={`${trail.length ? "mt-8 sm:mt-10" : ""} max-w-3xl ${center ? "mx-auto text-center" : ""}`}>
+				{label && (
+					<span className="chip chip-accent">
+						{Icon && <Icon className="h-3.5 w-3.5" aria-hidden="true" />}
+						{label}
+					</span>
+				)}
+				<h1 className={`page-title ${label ? "mt-5" : ""}`}>{title}</h1>
+				{lede && <p className={`lede mt-5 max-w-2xl ${center ? "mx-auto" : ""}`}>{lede}</p>}
+				{children && <div className={`mt-7 flex flex-wrap gap-3 ${center ? "justify-center" : ""}`}>{children}</div>}
+			</div>
+		</section>
+	);
+}