feat(hero): el hero pasa a azul profundo, con toda su capa gráfica

Fondo azul, wordmark en negativo con el ≡ dorado, titular en blanco
manteniendo «más esfuerzo» y el subrayado de «más claridad» en dorado,
la secuencia de líneas al 70% de blanco y el campo de puntos invertido.

CTA gana una variante `ghostDark`. Los nombres de las variantes dicen
sobre qué fondo se apoya el botón, no de qué color es: `light` y `ghost`
son para secciones claras, `dark` y `ghostDark` para azul profundo.
Dejar el hero con `light` habría pintado azul sobre azul.

El header no se toca: ya flota como barra blanca sobre FraseAncla,
Mecanismo y Cierre, así que sobre el hero hace lo que ya hacía en media
página.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

components/primitives/CTA.tsx

@@ -1,10 +1,14 @@
-type Variant = 'light' | 'dark' | 'ghost';
+// The names say which ground the button is standing on, not what colour it is:
+// `light` and `ghost` are for light sections, `dark` and `ghostDark` for
+// azul-profundo. Getting that backwards paints navy on navy.
+type Variant = 'light' | 'dark' | 'ghost' | 'ghostDark';
 // Every variant carries border-2 so filled and outlined CTAs line up when
 // they sit side by side.
 const styles: Record<Variant, string> = {
   light: 'border-2 border-transparent bg-azul-profundo text-white hover:bg-azul-profundo/90',
   dark: 'border-2 border-transparent bg-dorado text-white hover:bg-dorado/90',
   ghost: 'border-2 border-azul-profundo text-azul-profundo hover:bg-azul-profundo hover:text-white',
+  ghostDark: 'border-2 border-white/45 text-white hover:bg-white hover:text-azul-profundo',
 };
 
 export function CTA({ href, label, variant = 'light', className = '' }: { href: string; label: string; variant?: Variant; className?: string }) {