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

app/page.tsx

@@ -6,6 +6,7 @@ import { PuntosInflexion } from '@/components/sections/PuntosInflexion';
 import { Dolores } from '@/components/sections/Dolores';
 import { ParaQuien } from '@/components/sections/ParaQuien';
 import { Mecanismo } from '@/components/sections/Mecanismo';
+import { FormaTrabajar } from '@/components/sections/FormaTrabajar';
 import { Disciplinas } from '@/components/sections/Disciplinas';
 import { Estratega } from '@/components/sections/Estratega';
 import { ComoEmpezar } from '@/components/sections/ComoEmpezar';
@@ -34,6 +35,7 @@ export default function Home() {
         <FraseAncla />
         <Dolores />
         <Mecanismo />
+        <FormaTrabajar />
         <Disciplinas />
         <ParaQuien />
         <Estratega />

components/layout/Header.tsx

@@ -8,10 +8,6 @@ import { Container } from '@/components/primitives/Container';
 import { ProgresoLectura } from '@/components/primitives/ProgresoLectura';
 import { header } from '@/lib/content';
 
-// Navy like the hero it sits on, so the top of the page is one block instead of
-// a white bar stuck over a dark opening. Over the light sections further down it
-// reads as the brand's own bar rather than as page chrome.
-//
 // The header tightens once the reader leaves the hero: less chrome, more page.
 // Client component because the compaction needs scroll state on the <header>
 // itself; there is no server-rendered data here to lose.
@@ -27,16 +23,16 @@ export function Header() {
 
   return (
     <header
-      className={`sticky top-0 z-50 relative border-b border-white/10 bg-azul-profundo/90 backdrop-blur transition-[padding] duration-300 motion-reduce:transition-none ${
+      className={`sticky top-0 z-50 relative border-b border-azul-profundo/10 bg-white/80 backdrop-blur transition-[padding] duration-300 motion-reduce:transition-none ${
         compacto ? 'py-0' : 'py-3'
       }`}
     >
       <Container className="flex items-center justify-between">
         <a href="#top" aria-label="creeer — inicio" className="block transition-transform duration-300 origin-left motion-reduce:transition-none">
-          <Wordmark size={compacto ? 'sm' : 'md'} onDark />
+          <Wordmark size={compacto ? 'sm' : 'md'} />
         </a>
         <nav aria-label="Principal">
-          <CTA href="#contacto" label={header.cta} variant="dark" />
+          <CTA href="#contacto" label={header.cta} variant="light" />
         </nav>
       </Container>
       <ProgresoLectura />

components/primitives/CTA.tsx

@@ -1,14 +1,10 @@
-// The names say which ground the button is standing on, not what colour it is:
+type Variant = 'light' | 'dark' | 'ghost';
-// `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 }) {

components/primitives/Icono.tsx

@@ -15,7 +15,8 @@ export type IconoNombre =
   | 'plan'
   | 'comunicacion'
   | 'digital'
-  | 'experiencias';
+  | 'experiencias'
+  | 'reloj';
 
 const PATHS: Record<IconoNombre, ReactNode> = {
   // A line dives through two layers down to a core point — "me sumerjo
@@ -101,6 +102,13 @@ const PATHS: Record<IconoNombre, ReactNode> = {
       <circle cx="12" cy="12" r="9" strokeOpacity={0.55} />
     </>
   ),
+  // Simple clock — "cada proceso tiene su ritmo".
+  reloj: (
+    <>
+      <circle cx="12" cy="12" r="9" />
+      <path d="M12 7v5l3.5 3.5" />
+    </>
+  ),
 };
 
 export function Icono({ nombre, className = '' }: { nombre: IconoNombre; className?: string }) {

components/sections/FormaTrabajar.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { motion } from 'framer-motion';
+import { Container } from '@/components/primitives/Container';
+import { FondoPuntos } from '@/components/primitives/FondoPuntos';
+import { TarjetaSpotlight } from '@/components/primitives/TarjetaSpotlight';
+import { Icono, type IconoNombre } from '@/components/primitives/Icono';
+import { formaTrabajar } from '@/lib/content';
+import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, motionProps } from '@/lib/motion';
+
+// Reuses existing icons where the metaphor fits; only 'reloj' is new.
+const ICONOS: IconoNombre[] = [
+  'estrategia',    // Metodología — ascending path to a flag
+  'comunicacion',  // Quién participa — dialogue bubbles
+  'inmersion',     // De dónde partimos — diving through layers
+  'plan',          // Qué te llevas — checklist
+  'reloj',         // Duración — clock
+];
+
+/**
+ * "Así es trabajar conmigo" — practical details of the engagement.
+ * Inspired by en-ti.com's card-based solutions grid, adapted to creeer's
+ * identity: white cards on gris-claro, dorado accents, TarjetaSpotlight glow.
+ * Sits between Mecanismo (high-level method) and Disciplinas (the tools).
+ */
+export function FormaTrabajar() {
+  const reduced = usePrefersReducedMotion();
+
+  return (
+    <section className="bg-gris-claro relative overflow-hidden">
+      <FondoPuntos className="-top-10 -left-12 w-72 md:w-[28rem] text-azul-profundo/[0.06]" distance={32} />
+      <Container className="relative py-16 md:py-24">
+        {/* ── Header ── */}
+        <motion.p
+          variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
+          className="text-xs tracking-[0.3em] uppercase font-black text-dorado"
+        >
+          {formaTrabajar.eyebrow}
+        </motion.p>
+        <motion.h2
+          variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
+          className="mt-4 font-sans font-black text-seccion text-azul-profundo"
+        >
+          {formaTrabajar.title}
+        </motion.h2>
+
+        {/* ── Card grid ── */}
+        <motion.ul
+          variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
+          className="mt-12 grid gap-5 sm:grid-cols-2 lg:grid-cols-3 list-none p-0"
+        >
+          {formaTrabajar.items.map((item, i) => (
+            <motion.li
+              key={item.name}
+              variants={fadeInUp}
+              className="transition-transform duration-300 ease-out hover:-translate-y-1.5 motion-reduce:transform-none motion-reduce:transition-none"
+            >
+              <TarjetaSpotlight className="h-full rounded-2xl border border-white bg-white p-7 transition-[border-color,box-shadow] duration-300 hover:border-dorado/30 hover:shadow-[0_20px_50px_-20px_rgba(196,148,46,0.2)]">
+                {/* Icon */}
+                <div className="grid place-items-center w-14 h-14 rounded-full bg-azul-profundo">
+                  <Icono nombre={ICONOS[i]} className="w-7 h-7 text-dorado" />
+                </div>
+                {/* Copy */}
+                <h3 className="mt-5 font-sans font-black text-xl text-azul-profundo">
+                  {item.name}
+                </h3>
+                <p className="mt-3 text-gris-medio leading-relaxed text-sm">
+                  {item.desc}
+                </p>
+              </TarjetaSpotlight>
+            </motion.li>
+          ))}
+        </motion.ul>
+      </Container>
+    </section>
+  );
+}

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="#contacto" label={hero.cta} variant="light" className="text-center md:whitespace-nowrap" />
-              <CTA href="#mecanismo" label={hero.ctaSecundario} variant="ghostDark" 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>

lib/content.ts

@@ -129,6 +129,39 @@ export const mecanismo = {
   ],
 };
 
+// Practical details of the engagement — what the reader can expect when
+// working with creeer. Sits between Mecanismo (the high-level HOW) and
+// Disciplinas (the tools). All copy derived from approved sources:
+// mecanismo steps, puntosInflexion respuestas, comoEmpezar.
+// ⚠️ «Duración» left deliberately open — the dueña hasn't specified a
+// timeline. The card invites a conversation instead of committing a number.
+export const formaTrabajar = {
+  eyebrow: 'qué esperar',
+  title: 'Así es trabajar conmigo',
+  items: [
+    {
+      name: 'Metodología',
+      desc: 'Inmersión en tu empresa, desafío de lo que todos dan por hecho y construcción conjunta de tu estrategia.',
+    },
+    {
+      name: 'Quién participa',
+      desc: 'Tú y yo. Sin intermediarios. Trabajo directo con quien toma las decisiones.',
+    },
+    {
+      name: 'De dónde partimos',
+      desc: 'Tu operación real: números, procesos, equipo. Me sumerjo hasta comprenderla desde dentro.',
+    },
+    {
+      name: 'Qué te llevas',
+      desc: 'Un diagnóstico claro, tus prioridades ordenadas y una estrategia ejecutable. Por escrito, no en tu cabeza.',
+    },
+    {
+      name: 'Duración',
+      desc: 'Cada proceso tiene su ritmo. Lo definimos juntos en la sesión de diagnóstico.',
+    },
+  ],
+};
+
 export const disciplinas = {
   eyebrow: 'las herramientas',
   title: 'Las disciplinas que uso',