feat(secciones): puntos de inflexión y dolores, con gráfico en toda la página

Dos secciones nuevas tomadas del deck de la dueña, verbatim y sin
reescribir: los 6 puntos de inflexión y los 4 dolores en primera persona.

El resto de las secciones incorpora la capa gráfica: fondos de puntos,
duotono sobre foto en Mecanismo y Cómo empezar, pantalla partida sí/no en
Para quién, y pasos conectados con línea de progreso.

Las fotos son CC BY-SA 4.0 y llevan crédito en el footer, como exige la
licencia al haberlas modificado.

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

components/sections/__tests__/ComoEmpezar.test.tsx

@@ -1,5 +1,5 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
+import { render, screen, act } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { ComoEmpezar } from '../ComoEmpezar';
 
 describe('<ComoEmpezar />', () => {
@@ -15,4 +15,26 @@ describe('<ComoEmpezar />', () => {
     expect(href).toMatch(/^https:\/\/wa\.me\//);
     expect(href).toContain('text=');
   });
+  it('renders the sunrise photo panel as decorative, not real content', () => {
+    const { container } = render(<ComoEmpezar />);
+    const img = container.querySelector('img');
+    // next/image rewrites `src` through its loader in this test environment;
+    // the static export (images.unoptimized: true) serves the plain path.
+    expect(img?.getAttribute('src')).toContain('comoempezar-bg.jpg');
+    expect(img).toHaveAttribute('alt', '');
+  });
+
+  describe('auto-advancing step highlight', () => {
+    beforeEach(() => { vi.useFakeTimers(); });
+    afterEach(() => { vi.useRealTimers(); });
+
+    it('highlights the first step by default, then advances on its own', () => {
+      render(<ComoEmpezar />);
+      const first = screen.getByText('Escríbeme').closest('button');
+      const second = screen.getByText('Sesión de diagnóstico').closest('button');
+      expect(first).toHaveAttribute('aria-pressed', 'true');
+      act(() => { vi.advanceTimersByTime(3300); });
+      expect(second).toHaveAttribute('aria-pressed', 'true');
+    });
+  });
 });

components/sections/__tests__/Dolores.test.tsx

@@ -0,0 +1,23 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Dolores } from '../Dolores';
+
+describe('<Dolores />', () => {
+  it('renders the four pains verbatim, in the client\'s first person', () => {
+    render(<Dolores />);
+    expect(screen.getByText(/Trabajo más y gano casi lo mismo que hace dos años\./)).toBeInTheDocument();
+    expect(screen.getByText(/no sé en cuál enfocar mi tiempo y mi dinero\./)).toBeInTheDocument();
+    expect(screen.getByText(/no puede crecer si yo no estoy en cada decisión\./)).toBeInTheDocument();
+    expect(screen.getByText(/ya no me sirve para el siguiente nivel\./)).toBeInTheDocument();
+    expect(screen.getAllByRole('listitem')).toHaveLength(4);
+  });
+  it('closes with the resolution, not with more effort', () => {
+    const { container } = render(<Dolores />);
+    expect(container.textContent).toContain('Esto no se resuelve con más esfuerzo.');
+    expect(container.textContent).toContain('Se resuelve con una estrategia clara.');
+  });
+  it('does NOT introduce scarcity', () => {
+    const { container } = render(<Dolores />);
+    expect(container.textContent).not.toMatch(/cupos|cohorte|generación fundadora/i);
+  });
+});

components/sections/__tests__/Estratega.test.tsx

@@ -11,4 +11,12 @@ describe('<Estratega />', () => {
     render(<Estratega />);
     expect(screen.getByText(/El tiempo no se compra/i)).toBeInTheDocument();
   });
+  it('never lets CSS uppercase turn the brand name into CREEER', () => {
+    const { container } = render(<Estratega />);
+    const brand = screen.getByText('creeer');
+    expect(brand.className).toContain('normal-case');
+    // the eyebrow around it may be uppercase, the brand name may not
+    expect(brand.closest('p')?.className).toContain('uppercase');
+    expect(container.textContent).not.toMatch(/CREEER|Creeer/);
+  });
 });

components/sections/__tests__/FraseAncla.test.tsx

@@ -1,11 +1,11 @@
-import { render, screen } from '@testing-library/react';
+import { render } from '@testing-library/react';
 import { describe, it, expect } from 'vitest';
 import { FraseAncla } from '../FraseAncla';
 
 describe('<FraseAncla />', () => {
   it('renders the anchor quote', () => {
-    render(<FraseAncla />);
-    expect(screen.getByText(/Las empresas no dejan de crecer/i)).toBeInTheDocument();
-    expect(screen.getByText(/falta de claridad/i)).toBeInTheDocument();
+    const { container } = render(<FraseAncla />);
+    expect(container.textContent).toMatch(/Las empresas no dejan de crecer/i);
+    expect(container.textContent).toMatch(/falta de claridad/i);
   });
 });

components/sections/__tests__/Hero.test.tsx

@@ -8,17 +8,26 @@ describe('<Hero />', () => {
     expect(screen.getByText(/tu estratega de crecimiento/i)).toBeInTheDocument();
   });
   it('renders the headline copy', () => {
-    render(<Hero variant="hormozi" />);
-    expect(screen.getByText(/Tu negocio/i)).toBeInTheDocument();
-    expect(screen.getByText(/más esfuerzo/i)).toBeInTheDocument();
-    expect(screen.getByText(/más claridad/i)).toBeInTheDocument();
+    const { container } = render(<Hero variant="hormozi" />);
+    expect(container.textContent).toMatch(/Tu negocio/i);
+    expect(container.textContent).toMatch(/más esfuerzo/i);
+    expect(container.textContent).toMatch(/más claridad/i);
   });
   it('renders the CTA', () => {
     render(<Hero variant="editorial" />);
-    expect(screen.getByRole('link', { name: /define tu siguiente movimiento/i })).toBeInTheDocument();
+    expect(screen.getByRole('link', { name: /define tu siguiente movimiento/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');
   });
   it('does NOT render scarcity (cupos/cohorte)', () => {
     const { container } = render(<Hero variant="editorial" />);
     expect(container.textContent).not.toMatch(/cupos|cohorte|generación fundadora/i);
   });
+  it('mirrors the client\'s own words back in a rotating carousel', () => {
+    render(<Hero variant="editorial" />);
+    expect(screen.getByRole('group', { name: /lo que sienten nuestros clientes/i })).toBeInTheDocument();
+    expect(screen.getByText(/Trabajo más y gano casi lo mismo/i)).toBeInTheDocument();
+  });
 });

components/sections/__tests__/Mecanismo.test.tsx

@@ -1,5 +1,5 @@
-import { render, screen } from '@testing-library/react';
-import { describe, it, expect } from 'vitest';
+import { render, screen, fireEvent, act } from '@testing-library/react';
+import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
 import { Mecanismo } from '../Mecanismo';
 
 describe('<Mecanismo />', () => {
@@ -13,4 +13,31 @@ describe('<Mecanismo />', () => {
     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

@@ -7,10 +7,23 @@ describe('<ParaQuien />', () => {
     render(<ParaQuien />);
     expect(screen.getByText(/punto de inflexión/i)).toBeInTheDocument();
   });
-  it('renders all 3 criteria', () => {
+  it('renders the qualifying criteria', () => {
     render(<ParaQuien />);
     expect(screen.getByText(/tienes tracción/i)).toBeInTheDocument();
     expect(screen.getByText(/trabajar más ya no rinde/i)).toBeInTheDocument();
     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', () => {
+    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(/un curso, no una transformación/i)).toBeInTheDocument();
+    expect(screen.getByText(/crisis de supervivencia/i)).toBeInTheDocument();
+  });
+  it('keeps the disqualifiers impersonal, so they read as a profile and not an accusation', () => {
+    render(<ParaQuien />);
+    expect(screen.getByText(/fase inicial o sin tracción/i).textContent).not.toMatch(/\btú\b|\btu\b/i);
   });
 });

components/sections/__tests__/PuntosInflexion.test.tsx

@@ -0,0 +1,24 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { PuntosInflexion } from '../PuntosInflexion';
+
+describe('<PuntosInflexion />', () => {
+  it('renders the section title', () => {
+    render(<PuntosInflexion />);
+    expect(screen.getByText(/llegan a un punto de inflexión/i)).toBeInTheDocument();
+  });
+  it('renders the six inflection points from the dueña deck', () => {
+    render(<PuntosInflexion />);
+    // Each point renders twice in the markup — once in the mobile carousel,
+    // once in the desktop grid — with CSS `hidden`/`md:` toggling which one
+    // is actually visible at a given breakpoint.
+    for (const name of ['Crecer', 'Consolidarse', 'Recuperar rentabilidad', 'Simplificar', 'Expandirse', 'Replantear el portafolio']) {
+      expect(screen.getAllByText(name).length).toBeGreaterThanOrEqual(1);
+    }
+    expect(screen.getAllByRole('listitem')).toHaveLength(6);
+  });
+  it('does NOT introduce scarcity', () => {
+    const { container } = render(<PuntosInflexion />);
+    expect(container.textContent).not.toMatch(/cupos|cohorte|generación fundadora/i);
+  });
+});