feat: rediseño «El documento» en curso, contacto real y enlaces externos

Primitivas y contenido del rediseño (escala tipográfica, Revelar,
MarcaSeccion, Seccion, Antetitulo, SimboloMarca, Resplandor, ClaridadHero,
sección Proceso de ocho etapas, lib/content.ts reestructurado en seis
secciones con alias para las viejas). Mecanismo y FormaTrabajar se retiran.

Encima, lo de esta sesión:
- recorrido: creeer vuelve a responder cada situación en vez de repetirla
  (el alias apuntaba respuesta a situacion); respuestas en plural. Créditos
  de las seis fotos de México.
- contacto: WhatsApp, email (con mailto:) y LinkedIn reales; iconos de las
  redes en el cierre y el footer (IconoRed, trazos de Simple Icons, CC0).
- enlaces: lo externo abre en otra pestaña con noopener y aviso para
  lectores de pantalla (lib/enlaces.ts); mailto y anclas se quedan.
- Proceso: las ocho tarjetas no aparecían nunca en móvil (amount 0.3 sobre
  una lista de ~3000px); ahora cada una se revela sola. El ≡ de la 08 ya no
  tapa un entregable, título equilibrado, etiqueta a 12px, sin elevar al
  hover lo que no es clicable.
- Disciplinas: la frase «No son la promesa — son los medios» gana peso y
  se agrupa con título e ilustración; sin cortes huérfanos en móvil.

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

components/sections/__tests__/Cierre.test.tsx

@@ -21,3 +21,16 @@ describe('<Cierre />', () => {
     expect(screen.getByRole('navigation', { name: /contacto/i })).toBeInTheDocument();
   });
 });
+
+describe('<Cierre /> — pestañas', () => {
+  it('opens WhatsApp and LinkedIn in a new tab and keeps email in place', () => {
+    render(<Cierre />);
+    for (const nombre of [/whatsapp/i, /linkedin/i]) {
+      for (const a of screen.getAllByRole('link', { name: nombre })) {
+        expect(a).toHaveAttribute('target', '_blank');
+        expect(a).toHaveAttribute('rel', 'noopener noreferrer');
+      }
+    }
+    expect(screen.getByRole('link', { name: /email/i })).not.toHaveAttribute('target');
+  });
+});

components/sections/__tests__/ComoEmpezar.test.tsx

@@ -5,12 +5,12 @@ import { ComoEmpezar } from '../ComoEmpezar';
 describe('<ComoEmpezar />', () => {
   it('renders the on-ramp steps', () => {
     render(<ComoEmpezar />);
-    expect(screen.getByText('Escríbeme')).toBeInTheDocument();
-    expect(screen.getByText('Sesión de diagnóstico')).toBeInTheDocument();
+    expect(screen.getByText('Escríbenos')).toBeInTheDocument();
+    expect(screen.getByText('Sesión de claridad')).toBeInTheDocument();
   });
   it('links the CTA to WhatsApp with a prefilled message', () => {
     render(<ComoEmpezar />);
-    const cta = screen.getByRole('link', { name: /Agenda tu sesión de diagnóstico/i });
+    const cta = screen.getByRole('link', { name: /Agenda tu sesión de claridad/i });
     const href = cta.getAttribute('href') ?? '';
     expect(href).toMatch(/^https:\/\/wa\.me\//);
     expect(href).toContain('text=');

components/sections/__tests__/Estratega.test.tsx

@@ -5,11 +5,18 @@ import { Estratega } from '../Estratega';
 describe('<Estratega />', () => {
   it('renders the bio', () => {
     render(<Estratega />);
-    expect(screen.getByText(/30 años/i)).toBeInTheDocument();
+    expect(screen.getByText(/años construyendo marcas/i)).toBeInTheDocument();
+    expect(screen.getByText(/Hemos acompañado a más de 40 empresas/i)).toBeInTheDocument();
+  });
+  it('shows the confirmed figure — 25+, never the stale 30', () => {
+    // La dueña confirmó 25+ (19/ago/2026); el 30 fue un borrador que
+    // sobrevivió como hardcode después de que el copy pasó a 25.
+    const { container } = render(<Estratega />);
+    expect(container.textContent).not.toMatch(/30/);
   });
   it('renders the institutional quote', () => {
     render(<Estratega />);
-    expect(screen.getByText(/El tiempo no se compra/i)).toBeInTheDocument();
+    expect(screen.getByText(/Tu negocio ya demostró que funciona/i)).toBeInTheDocument();
   });
   it('never lets CSS uppercase turn the brand name into CREEER', () => {
     const { container } = render(<Estratega />);

components/sections/__tests__/FraseAncla.test.tsx

@@ -9,6 +9,11 @@ describe('<FraseAncla />', () => {
     expect(container.textContent).toMatch(/falta de claridad/i);
   });
 
+  it('paints the "after": the anchor names the problem, this line names the outcome', () => {
+    const { container } = render(<FraseAncla />);
+    expect(container.textContent).toMatch(/Sabes exactamente dónde invertir/i);
+  });
+
   it('resolves the brand metaphor into the mark', () => {
     const { container } = render(<FraseAncla />);
     expect(container.querySelectorAll('[data-resolucion]')).toHaveLength(3);

components/sections/__tests__/Hero.test.tsx

@@ -5,7 +5,7 @@ import { Hero } from '../Hero';
 describe('<Hero />', () => {
   it('renders the eyebrow', () => {
     render(<Hero variant="editorial" />);
-    expect(screen.getByText(/tu estratega de crecimiento/i)).toBeInTheDocument();
+    expect(screen.getByText(/claridad estratégica para tu negocio/i)).toBeInTheDocument();
   });
   it('renders the headline copy', () => {
     const { container } = render(<Hero variant="hormozi" />);
@@ -15,11 +15,11 @@ describe('<Hero />', () => {
   });
   it('renders the CTA', () => {
     render(<Hero variant="editorial" />);
-    expect(screen.getByRole('link', { name: /define tu siguiente movimiento/i })).toHaveAttribute('href', '#contacto');
+    expect(screen.getByRole('link', { name: /agenda una sesión de claridad/i })).toHaveAttribute('href', '#contacto');
   });
   it('offers a secondary route into the process for readers not ready to convert', () => {
     render(<Hero variant="editorial" />);
-    expect(screen.getByRole('link', { name: /ver cómo trabajo/i })).toHaveAttribute('href', '#mecanismo');
+    expect(screen.getByRole('link', { name: /ver cómo trabajamos/i })).toHaveAttribute('href', '#proceso');
   });
   it('does NOT render scarcity (cupos/cohorte)', () => {
     const { container } = render(<Hero variant="editorial" />);
@@ -33,13 +33,40 @@ describe('<Hero />', () => {
     expect(container.textContent).not.toMatch(/Trabajo más y gano casi lo mismo/i);
   });
 
-  it('poses the brand metaphor without resolving it', () => {
+  // El hero es el LCP de la página, y la página se abre desde un enlace de
+  // WhatsApp con datos móviles. Mientras el titular naciera en opacity 0
+  // esperando a que hidratara React, montara el IntersectionObserver y corriera
+  // el stagger, lo primero que veía el lector era una pantalla en blanco — y si
+  // el JS fallaba, se quedaba así. El export estático llegó a salir con 126
+  // elementos en opacity 0, el <h1> entre ellos.
+  it('entra pintado: nada del hero nace oculto', () => {
     const { container } = render(<Hero variant="editorial" />);
-    // SecuenciaClaridad is the only thing here drawn from <line>; the dot
-    // fields are circles. variant="hero" plays dispersion and convergence
-    // only — the ≡ resolution is FraseAncla's payoff, and a hero that
-    // resolved would spend the beat before the copy earns it.
-    expect(container.querySelectorAll('line').length).toBeGreaterThan(10);
-    expect(container.querySelectorAll('[data-resolucion]')).toHaveLength(0);
+    const ocultos = Array.from(container.querySelectorAll<HTMLElement>('*')).filter(
+      (el) => el.style.opacity === '0',
+    );
+    expect(ocultos).toHaveLength(0);
+  });
+
+  it('el titular no se difumina palabra a palabra', () => {
+    const { container } = render(<Hero variant="editorial" />);
+    const difuminados = Array.from(container.querySelectorAll<HTMLElement>('*')).filter((el) =>
+      el.style.filter.includes('blur'),
+    );
+    expect(difuminados).toHaveLength(0);
+  });
+
+  // El edificio es three.js: ~185 kB que el titular no puede esperar. Vive tras
+  // next/dynamic con ssr:false, así que el hero se pinta entero sin él y el
+  // export estático no lleva ni un <canvas>. Cuando el dynamic() vivía en el
+  // propio Hero — un server component — Next 14 se negaba a construir.
+  it('el hero se pinta sin esperar al edificio', () => {
+    const { container } = render(<Hero variant="editorial" />);
+    expect(container.querySelector('h1')).toBeInTheDocument();
+    expect(container.querySelector('canvas')).toBeNull();
+  });
+
+  it('renders the Dream Outcome below the headline', () => {
+    const { container } = render(<Hero variant="editorial" />);
+    expect(container.textContent).toMatch(/plan a 12 meses/i);
   });
 });

components/sections/__tests__/Mecanismo.test.tsx

@@ -1,43 +0,0 @@
-import { render, screen, fireEvent, act } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
-import { Mecanismo } from '../Mecanismo';
-
-describe('<Mecanismo />', () => {
-  it('renders the 3 steps in order', () => {
-    render(<Mecanismo />);
-    expect(screen.getByText('Inmersión')).toBeInTheDocument();
-    expect(screen.getByText('Desafiar supuestos')).toBeInTheDocument();
-    expect(screen.getByText('Estrategia ejecutable')).toBeInTheDocument();
-  });
-  it('renders step numbers 01/02/03', () => {
-    const { container } = render(<Mecanismo />);
-    expect(container.textContent).toMatch(/01.+02.+03/);
-  });
-  it('keeps the background photo subtle enough not to fight the text', () => {
-    const { container } = render(<Mecanismo />);
-    const bg = container.querySelector('img');
-    expect(bg).toHaveAttribute('src', '/images/mecanismo-bg.jpg');
-    expect(bg?.closest('[class*="opacity-"]')).not.toBeNull();
-  });
-
-  describe('auto-advancing step indicator', () => {
-    beforeEach(() => { vi.useFakeTimers(); });
-    afterEach(() => { vi.useRealTimers(); });
-
-    it('highlights the first step by default, then advances on its own', () => {
-      render(<Mecanismo />);
-      const tabs = screen.getAllByRole('tab');
-      expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
-      act(() => { vi.advanceTimersByTime(3300); });
-      expect(tabs[1]).toHaveAttribute('aria-selected', 'true');
-    });
-
-    it('stops advancing while the pointer is over the steps', () => {
-      render(<Mecanismo />);
-      const tabs = screen.getAllByRole('tab');
-      fireEvent.mouseEnter(screen.getByRole('tablist'));
-      act(() => { vi.advanceTimersByTime(6000); });
-      expect(tabs[0]).toHaveAttribute('aria-selected', 'true');
-    });
-  });
-});

components/sections/__tests__/ParaQuien.test.tsx

@@ -14,11 +14,11 @@ describe('<ParaQuien />', () => {
     expect(screen.getByText(/necesitas claridad/i)).toBeInTheDocument();
     expect(screen.getByText(/sin perder tu esencia/i)).toBeInTheDocument();
   });
-  it('renders the disqualifying criteria from the dueña deck', () => {
+  it('renders the disqualifying criteria', () => {
     render(<ParaQuien />);
     expect(screen.getByText(/Esto no es para ti si/i)).toBeInTheDocument();
     expect(screen.getByText(/fase inicial o sin tracción/i)).toBeInTheDocument();
-    expect(screen.getByText(/solución rápida de venta/i)).toBeInTheDocument();
+    expect(screen.getByText(/solución rápida, no un cambio de fondo/i)).toBeInTheDocument();
     expect(screen.getByText(/un curso, no una transformación/i)).toBeInTheDocument();
     expect(screen.getByText(/crisis de supervivencia/i)).toBeInTheDocument();
   });

components/sections/__tests__/Proceso.test.tsx

@@ -0,0 +1,119 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Proceso } from '../Proceso';
+import { proceso, creditosFotos } from '@/lib/content';
+
+describe('<Proceso />', () => {
+  it('renders the three approved phases as a strip', () => {
+    render(<Proceso />);
+    expect(proceso.fases).toHaveLength(3);
+    for (const fase of proceso.fases) {
+      expect(screen.getByText(fase)).toBeInTheDocument();
+    }
+  });
+
+  it('renders all eight stages, numbered 01 through 08', () => {
+    render(<Proceso />);
+    expect(proceso.etapas).toHaveLength(8);
+    for (const etapa of proceso.etapas) {
+      expect(screen.getByText(etapa.name)).toBeInTheDocument();
+      expect(screen.getByText(etapa.n)).toBeInTheDocument();
+    }
+  });
+
+  // The argument of the section: "claridad estratégica" is abstract until it
+  // is a document you can hold. The lámina labels this block on all eight of
+  // its cards and marks every line — losing either turns the deliverables back
+  // into a list of service names.
+  it('labels the deliverables block on every card and marks every line', () => {
+    const { container } = render(<Proceso />);
+    expect(screen.getAllByText(proceso.etiquetaEntregables)).toHaveLength(8);
+
+    for (const entregable of proceso.etapas.flatMap((e) => e.entregables)) {
+      expect(screen.getByText(entregable)).toBeInTheDocument();
+    }
+
+    // One <ul> of deliverables per stage, every line of it carrying an icon.
+    const listas = container.querySelectorAll('ul');
+    expect(listas).toHaveLength(proceso.etapas.length);
+    listas.forEach((lista, i) => {
+      const esperados = proceso.etapas[i].entregables.length;
+      expect(lista.querySelectorAll(':scope > li')).toHaveLength(esperados);
+      expect(lista.querySelectorAll(':scope > li > svg')).toHaveLength(esperados);
+    });
+  });
+
+  // The icon map is keyed by the copy itself, so rewording a deliverable in
+  // lib/content.ts without updating the map would render a blank space where
+  // its mark should be. Nothing else would fail.
+  it('gives every deliverable its own icon, none of them empty', () => {
+    const { container } = render(<Proceso />);
+    const items = Array.from(container.querySelectorAll('ul > li'));
+    expect(items).toHaveLength(proceso.etapas.reduce((n, e) => n + e.entregables.length, 0));
+    for (const item of items) {
+      const svg = item.querySelector(':scope > svg');
+      expect(svg, `«${item.textContent}» se quedó sin ícono`).not.toBeNull();
+      expect(svg!.children.length, `el ícono de «${item.textContent}» está vacío`).toBeGreaterThan(0);
+    }
+  });
+
+  // Stage 01's medallion was the magnifier, and so was its own "Diagnóstico
+  // ejecutivo" line — the same glyph twice in one card, which reads as a
+  // mistake. Nothing but the eye catches this, so the eye gets help.
+  it('never repeats a glyph inside the same card', () => {
+    const { container } = render(<Proceso />);
+    const tarjetas = Array.from(container.querySelectorAll('ol'))[1].querySelectorAll(':scope > li');
+    tarjetas.forEach((tarjeta, i) => {
+      const glifos = Array.from(tarjeta.querySelectorAll('svg')).map((s) => s.innerHTML);
+      expect(new Set(glifos).size, `la etapa ${proceso.etapas[i].n} repite un ícono`).toBe(glifos.length);
+    });
+  });
+
+  it('closes on the One Year Plan, the payoff the other seven point at', () => {
+    render(<Proceso />);
+    expect(screen.getByText('One Year Plan')).toBeInTheDocument();
+    expect(screen.getByText('Roadmap a 12 meses')).toBeInTheDocument();
+    expect(screen.getByText('Gobernanza del crecimiento')).toBeInTheDocument();
+  });
+
+  // The stages are a sequence, so the order has to reach assistive tech
+  // through the markup — otherwise it lives only in the drawn number, which is
+  // decorative and never announced.
+  it('carries the order in the markup, not just in the drawn number', () => {
+    const { container } = render(<Proceso />);
+    const listas = container.querySelectorAll('ol');
+    expect(listas).toHaveLength(2); // the phase strip and the eight stages
+    expect(listas[1].querySelectorAll(':scope > li')).toHaveLength(8);
+  });
+
+  // The footer is the only place in the project where the photo licences are
+  // honoured, and it renders `creditosFotos` verbatim. An image added here
+  // without an entry there would go uncredited and nothing else would notice.
+  it('credits every photograph it shows', () => {
+    const { container } = render(<Proceso />);
+    const fotos = Array.from(container.querySelectorAll('img')).map((i) => i.getAttribute('src'));
+    expect(fotos).toHaveLength(proceso.etapas.length);
+    for (const src of fotos) {
+      expect(
+        creditosFotos.some((c) => 'archivo' in c && c.archivo === src),
+        `«${src}» no tiene crédito en creditosFotos`,
+      ).toBe(true);
+    }
+  });
+
+  it('loads the photographs lazily, since none of them is above the fold', () => {
+    const { container } = render(<Proceso />);
+    for (const img of Array.from(container.querySelectorAll('img'))) {
+      expect(img).toHaveAttribute('loading', 'lazy');
+    }
+  });
+
+  // Everything here is adapted from the dueña's working deck for a real
+  // client. None of that client's detail may reach a public page.
+  it('leaks nothing that identifies the client the deck was built for', () => {
+    const { container } = render(<Proceso />);
+    expect(container.textContent).not.toMatch(
+      /cápsulas|gomitas|tabletas|planta|sell in|sell out|mercado mexicano|líderes de la categoría/i,
+    );
+  });
+});

components/sections/__tests__/PuntosInflexion.test.tsx

@@ -38,6 +38,15 @@ describe('<PuntosInflexion />', () => {
     }
   });
 
+  it('never lets creeer answer by repeating the situation back', () => {
+    // The restructure of lib/content.ts once aliased `respuesta` to
+    // `situacion`: problem and answer read the same, and the test above still
+    // passed because the situation renders inside «».
+    for (const { situacion, respuesta } of puntosInflexion.items) {
+      expect(respuesta).not.toBe(situacion);
+    }
+  });
+
   it('states each situation in the second person, as the dueña reads them', () => {
     // Her own phrasing in the 31/jul call: "estás atrapado en tu compañía",
     // "creciste muy rápido pero quieres expandirte". The deck's infinitives