From bd14ae5f299f3991c5c183822fcc22c96761617e Mon Sep 17 00:00:00 2001
From: erikgh <erikguzh@outlook.es>
Date: Mon, 3 Aug 2026 15:54:59 -0600
Subject: [PATCH] =?UTF-8?q?feat(hero):=20el=20hero=20pasa=20a=20azul=20pro?=
 =?UTF-8?q?fundo,=20con=20toda=20su=20capa=20gr=C3=A1fica?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 |  6 +++++-
 components/sections/Hero.tsx  | 14 +++++++-------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/components/primitives/CTA.tsx b/components/primitives/CTA.tsx
index a09ecda..2299567 100644
--- a/components/primitives/CTA.tsx
+++ b/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 }) {
diff --git a/components/sections/Hero.tsx b/components/sections/Hero.tsx
index 0668906..f1fcfd4 100644
--- a/components/sections/Hero.tsx
+++ b/components/sections/Hero.tsx
@@ -22,21 +22,21 @@ export function Hero({ variant = 'editorial' }: { variant?: Variant }) {
   const clarityBorder = isHormozi ? 'border-b-[5px] border-dorado pb-0.5' : 'border-b-[3px] border-dorado pb-0.5';
 
   return (
-    <section className="bg-white relative overflow-hidden">
+    <section className="bg-azul-profundo relative overflow-hidden">
       {/* Kept clear of the wordmark on narrow screens: at 390px the md field
           reached back across the logotype and the tagline, so the pattern read
           as collision rather than texture. */}
-      <FondoPuntos className="top-80 -right-20 w-56 md:top-24 md:-right-16 md:w-[28rem] text-azul-profundo/10" interactivo />
+      <FondoPuntos className="top-80 -right-20 w-56 md:top-24 md:-right-16 md:w-[28rem] text-white/10" interactivo />
       <FondoPuntos className="bottom-16 -left-20 w-64 md:w-96 text-dorado/20" distance={28} rows={2} />
       <Container className="relative min-h-[80vh] lg:min-h-[88vh] flex items-center py-16 md:py-24">
         <div className="grid gap-8 lg:gap-14 lg:grid-cols-[1.1fr_0.9fr] lg:items-center w-full">
           <motion.div variants={staggerContainer} initial="hidden" animate="visible" {...motionProps(reduced)}
             className="min-w-0 flex flex-col items-center text-center lg:items-start lg:text-left">
-            <motion.div variants={fadeInUp}><Wordmark size="xl" showTagline /></motion.div>
+            <motion.div variants={fadeInUp}><Wordmark size="xl" showTagline onDark /></motion.div>
             <motion.p variants={fadeInUp} className="mt-6 text-xs md:text-sm tracking-[0.3em] uppercase font-black text-dorado">
               {hero.eyebrow}
             </motion.p>
-            <motion.h1 variants={fadeInUp} className={`mt-8 ${headlineBase} ${headlineSize} text-azul-profundo`}>
+            <motion.h1 variants={fadeInUp} className={`mt-8 ${headlineBase} ${headlineSize} text-white`}>
               <TextoDesenfoque
                 as="span"
                 segments={[
@@ -51,8 +51,8 @@ export function Hero({ variant = 'editorial' }: { variant?: Variant }) {
                 came out ragged and unequal, which read as an accident rather
                 than as hierarchy. */}
             <motion.div variants={fadeInUp} className="mt-10 w-full flex flex-col md:flex-row items-stretch md:items-center md:w-auto gap-4">
-              <CTA href="#contacto" label={hero.cta} variant="light" className="text-center md:whitespace-nowrap" />
-              <CTA href="#mecanismo" label={hero.ctaSecundario} variant="ghost" className="text-center md:whitespace-nowrap" />
+              <CTA href="#contacto" label={hero.cta} variant="dark" className="text-center md:whitespace-nowrap" />
+              <CTA href="#mecanismo" label={hero.ctaSecundario} variant="ghostDark" className="text-center md:whitespace-nowrap" />
             </motion.div>
           </motion.div>
           {/* Complexity → focus, left unresolved: the hero poses the tension
@@ -61,7 +61,7 @@ export function Hero({ variant = 'editorial' }: { variant?: Variant }) {
               of the brand's own graphic language at all. */}
           <motion.div variants={fadeInUp} initial="hidden" animate="visible" {...motionProps(reduced)}
             className="min-w-0">
-            <SecuenciaClaridad variant="hero" className="w-32 lg:w-full max-w-md mx-auto text-azul-profundo" />
+            <SecuenciaClaridad variant="hero" className="w-32 lg:w-full max-w-md mx-auto text-white/70" />
           </motion.div>
         </div>
       </Container>