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__/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);
   });
 });