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/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">