feat: agregar sección 'Así es trabajar conmigo'

Nueva sección FormaTrabajar con 5 tarjetas: Metodología, Quién participa,
De dónde partimos, Qué te llevas y Duración. Inspirada en la estructura
de en-ti.com, adaptada a la identidad creeer.

- Nuevo componente FormaTrabajar.tsx (grid de tarjetas con TarjetaSpotlight)
- Nuevo ícono 'reloj' en Icono.tsx
- Contenido en lib/content.ts (copy derivado de fuentes aprobadas)
- Insertada entre Mecanismo y Disciplinas en page.tsx

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-azul-profundo relative overflow-hidden">
+    <section className="bg-white 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-white/10" interactivo />
+      <FondoPuntos className="top-80 -right-20 w-56 md:top-24 md:-right-16 md:w-[28rem] text-azul-profundo/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 onDark /></motion.div>
+            <motion.div variants={fadeInUp}><Wordmark size="xl" showTagline /></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-white`}>
+            <motion.h1 variants={fadeInUp} className={`mt-8 ${headlineBase} ${headlineSize} text-azul-profundo`}>
               <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="dark" className="text-center md:whitespace-nowrap" />
-              <CTA href="#mecanismo" label={hero.ctaSecundario} variant="ghostDark" className="text-center md:whitespace-nowrap" />
+              <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" />
             </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-white/70" />
+            <SecuenciaClaridad variant="hero" className="w-32 lg:w-full max-w-md mx-auto text-azul-profundo" />
           </motion.div>
         </div>
       </Container>