feat(movimiento): un solo autoplay, tres pasos legibles y parallax en las fotos

ComoEmpezar deja de rotar pasos: las tres anotaciones se leen de una, sin
botones ni opacidad. Mecanismo conserva su autoplay pero distingue el paso
activo por borde y elevación, no apagando los demás. Las dos fotos
(fondo del Mecanismo y panel del ComoEmpezar) reciben un parallax suave
ligado al scroll de página.

El test de autoplay que Comompezar tenía se retira: afirmaba el
comportamiento que este cambio borra, y choca con el test nuevo que pide
cero botones.

components/sections/ComoEmpezar.tsx

@@ -1,46 +1,41 @@
 'use client';
 
-import { motion } from 'framer-motion';
+import { motion, useScroll, useTransform } from 'framer-motion';
 import Image from 'next/image';
 import { Container } from '@/components/primitives/Container';
 import { CTA } from '@/components/primitives/CTA';
 import { Icono, type IconoNombre } from '@/components/primitives/Icono';
 import { comoEmpezar, cierre } from '@/lib/content';
-import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, motionProps, useAutoStep } from '@/lib/motion';
+import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, motionProps } from '@/lib/motion';
 
 const ICONOS: IconoNombre[] = ['escribeme', 'diagnostico', 'plan'];
 
 export function ComoEmpezar() {
   const reduced = usePrefersReducedMotion();
   const waHref = `${cierre.contact.whatsapp.href}?text=${encodeURIComponent(comoEmpezar.whatsappText)}`;
-  const { active, setActive, hoverProps } = useAutoStep(comoEmpezar.steps.length, 3200);
+  // Page-level scroll (no target ref) keeps this to a single listener and
+  // avoids jsdom's "container has a static position" warning.
+  const { scrollYProgress } = useScroll();
+  const desplazamiento = useTransform(scrollYProgress, [0, 1], [20, -20]);
   return (
     <section className="bg-white">
       <Container className="py-24 md:py-32 grid gap-12 md:grid-cols-[1fr_auto] md:items-center">
         <motion.div variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}>
           <motion.p variants={fadeInUp} className="text-xs tracking-[0.3em] uppercase font-black text-dorado">{comoEmpezar.eyebrow}</motion.p>
           <motion.h2 variants={fadeInUp} className="mt-4 font-sans font-black text-seccion text-azul-profundo max-w-xl">{comoEmpezar.title}</motion.h2>
-          <motion.ol variants={staggerContainer} {...hoverProps} className="mt-12 grid gap-10 sm:grid-cols-3 md:grid-cols-1 md:gap-8">
+          <motion.ol variants={staggerContainer} className="mt-12 grid gap-10 sm:grid-cols-3 md:grid-cols-1 md:gap-8">
             {comoEmpezar.steps.map((step, i) => (
-              <motion.li key={step.n} variants={fadeInUp}>
-                <button
-                  type="button"
-                  onClick={() => setActive(i)}
-                  aria-pressed={active === i}
-                  className={`w-full text-left border-t pt-6 transition-all duration-300 ease-out hover:-translate-y-1.5 motion-reduce:transform-none motion-reduce:transition-none
-                             md:flex md:items-baseline md:gap-4 md:border-t-0 md:border-l-2 md:pt-0 md:pl-5 ${
-                    active === i ? 'border-dorado' : 'border-dorado/30 md:opacity-40'
-                  }`}
-                >
-                  <div className="font-sans font-black text-5xl md:text-3xl text-dorado leading-none shrink-0">{step.n}</div>
-                  <div>
-                    <div className="mt-4 md:mt-0 flex items-center gap-3">
-                      <Icono nombre={ICONOS[i]} className="w-6 h-6 text-dorado shrink-0" />
-                      <h3 className="font-sans font-bold text-xl text-azul-profundo">{step.name}</h3>
-                    </div>
-                    <p className="mt-3 md:mt-1 text-gris-medio leading-relaxed">{step.desc}</p>
+              <motion.li key={step.n} variants={fadeInUp}
+                className="border-t border-dorado/40 pt-6 transition-transform duration-300 ease-out hover:-translate-y-1 motion-reduce:transform-none motion-reduce:transition-none
+                           md:flex md:items-baseline md:gap-4 md:border-t-0 md:border-l-2 md:pt-0 md:pl-5">
+                <div className="font-sans font-black text-5xl md:text-3xl text-dorado leading-none shrink-0">{step.n}</div>
+                <div>
+                  <div className="mt-4 md:mt-0 flex items-center gap-3">
+                    <Icono nombre={ICONOS[i]} className="w-6 h-6 text-dorado shrink-0" />
+                    <h3 className="font-sans font-bold text-xl text-azul-profundo">{step.name}</h3>
                   </div>
-                </button>
+                  <p className="mt-3 md:mt-1 text-gris-medio leading-relaxed">{step.desc}</p>
+                </div>
               </motion.li>
             ))}
           </motion.ol>
@@ -52,6 +47,7 @@ export function ComoEmpezar() {
             modificada (duotono) — créditos en el footer. "Tu siguiente movimiento
             empieza…": el amanecer como metáfora del comienzo. */}
         <motion.div variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
+          style={reduced ? undefined : { y: desplazamiento }}
           className="hidden md:block relative w-72 lg:w-96 aspect-[4/5] rounded-lg overflow-hidden shadow-2xl shadow-azul-profundo/20 rotate-2 motion-reduce:rotate-0">
           <div className="absolute inset-0 bg-gradient-to-br from-azul-profundo to-dorado" />
           <Image src="/images/comoempezar-bg.jpg" alt="" fill sizes="(min-width: 1024px) 384px, 288px"

components/sections/Mecanismo.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { motion } from 'framer-motion';
+import { motion, useScroll, useTransform } from 'framer-motion';
 import { Container } from '@/components/primitives/Container';
 import { FondoFoto } from '@/components/primitives/FondoFoto';
 import { Icono, type IconoNombre } from '@/components/primitives/Icono';
@@ -12,10 +12,18 @@ const ICONOS: IconoNombre[] = ['inmersion', 'desafiar', 'estrategia'];
 export function Mecanismo() {
   const reduced = usePrefersReducedMotion();
   const { active, setActive, hoverProps } = useAutoStep(mecanismo.steps.length, 3200);
+  const { scrollYProgress } = useScroll();
+  const desplazamientoFoto = useTransform(scrollYProgress, [0, 1], [-24, 24]);
   return (
     <section id="mecanismo" className="bg-azul-profundo text-white scroll-mt-24 relative overflow-hidden">
       {/* Foto: Golden Gate Bridge, Dietmar Rabich, CC BY-SA 4.0, modificada (duotono) — créditos en el footer */}
-      <FondoFoto src="/images/mecanismo-bg.jpg" className="inset-0 opacity-25" wash="bg-azul-profundo/80" />
+      <motion.div
+        aria-hidden="true"
+        className="absolute inset-0 pointer-events-none"
+        style={reduced ? undefined : { y: desplazamientoFoto }}
+      >
+        <FondoFoto src="/images/mecanismo-bg.jpg" className="inset-0 opacity-25" wash="bg-azul-profundo/80" />
+      </motion.div>
       <Container className="relative py-24 md:py-32">
         <motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
           className="text-xs tracking-[0.3em] uppercase font-black text-dorado">{mecanismo.eyebrow}</motion.p>
@@ -64,7 +72,7 @@ export function Mecanismo() {
                 onClick={() => setActive(i)}
                 aria-pressed={active === i}
                 className={`w-full text-left border-t pt-6 transition-all duration-300 ease-out hover:-translate-y-1.5 motion-reduce:transform-none motion-reduce:transition-none ${
-                  active === i ? 'border-dorado md:-translate-y-1.5' : 'border-dorado/30 md:opacity-40'
+                  active === i ? 'border-dorado md:-translate-y-1.5' : 'border-white/20'
                 }`}
               >
                 <div className="flex items-center justify-between">

components/sections/__tests__/ComoEmpezar.test.tsx

@@ -1,5 +1,5 @@
-import { render, screen, act } from '@testing-library/react';
-import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest';
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
 import { ComoEmpezar } from '../ComoEmpezar';
 
 describe('<ComoEmpezar />', () => {
@@ -24,17 +24,17 @@ describe('<ComoEmpezar />', () => {
     expect(img).toHaveAttribute('alt', '');
   });
 
-  describe('auto-advancing step highlight', () => {
-    beforeEach(() => { vi.useFakeTimers(); });
-    afterEach(() => { vi.useRealTimers(); });
+  it('keeps all three steps readable without interaction', () => {
+    const { container } = render(<ComoEmpezar />);
+    // The steps used to sit at opacity-40 until the reader hovered or the
+    // autoplay reached them, which made two of every three illegible.
+    expect(container.innerHTML).not.toContain('opacity-40');
+  });
 
-    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');
-    });
+  it('presents the steps as content, not as controls', () => {
+    render(<ComoEmpezar />);
+    // Without autoplay there is nothing to steer, so the steps stop being
+    // buttons and go back to being a plain ordered list.
+    expect(screen.queryAllByRole('button')).toHaveLength(0);
   });
 });