feat(pasos): el numeral pasa a ser el gráfico en Mecanismo y ComoEmpezar

Las dos secciones de pasos toman prestado el recurso del recorrido: la
cifra enorme y casi transparente. En Mecanismo sigue al paso activo del
autoplay, así que la sección respira sin pedirle atención a nadie. En
ComoEmpezar el numeral pequeño en dorado crece y se apaga, y el acento
dorado se queda en el icono, para que no compitan dos marcadores.

El objetivo no es añadir efectos: es que el recorrido no parezca de otra
página. Mismo lenguaje, distinto contenido.

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

components/sections/ComoEmpezar.tsx

@@ -28,7 +28,11 @@ export function ComoEmpezar() {
               <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>
+                {/* The numeral is the graphic, not a label: big and nearly
+                    transparent, like the recorrido's. The gold accent moves to
+                    the icon beside the step's name, so the step keeps its
+                    marker without two of them competing. */}
+                <div className="font-sans font-black text-6xl md:text-7xl text-azul-profundo/[0.13] leading-[0.8] shrink-0 select-none">{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" />