From c1f611e9ec179b774fd037fca5f5544313b5de5f Mon Sep 17 00:00:00 2001
From: erikgh <erikguzh@outlook.es>
Date: Mon, 3 Aug 2026 14:54:26 -0600
Subject: [PATCH] =?UTF-8?q?feat(pasos):=20el=20numeral=20pasa=20a=20ser=20?=
 =?UTF-8?q?el=20gr=C3=A1fico=20en=20Mecanismo=20y=20ComoEmpezar?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 |  6 +++++-
 components/sections/Mecanismo.tsx   | 22 ++++++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/components/sections/ComoEmpezar.tsx b/components/sections/ComoEmpezar.tsx
index 10d25ed..ea4284e 100644
--- a/components/sections/ComoEmpezar.tsx
+++ b/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" />
diff --git a/components/sections/Mecanismo.tsx b/components/sections/Mecanismo.tsx
index 62a909f..971b504 100644
--- a/components/sections/Mecanismo.tsx
+++ b/components/sections/Mecanismo.tsx
@@ -25,6 +25,28 @@ export function Mecanismo() {
         <FondoFoto src="/images/mecanismo-bg.jpg" className="inset-0 opacity-25" wash="bg-azul-profundo/80" />
       </motion.div>
       <Container className="relative py-16 md:py-24">
+        {/* The step you are on, set enormous and almost invisible behind the
+            column — the same device the recorrido uses, so the two sections
+            read as one page rather than as one showpiece and its neighbour.
+            It follows the autoplay, which gives the section a slow pulse
+            without adding anything the reader has to attend to. */}
+        {reduced ? (
+          <span aria-hidden="true" className="pointer-events-none absolute top-10 right-6 md:right-12 select-none font-sans font-black leading-none text-white/[0.05] text-[9rem] md:text-[18rem]">
+            {mecanismo.steps[active].n}
+          </span>
+        ) : (
+          <motion.span
+            key={active}
+            aria-hidden="true"
+            initial={{ opacity: 0, y: 18 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.6, ease: [0.22, 1, 0.36, 1] }}
+            className="pointer-events-none absolute top-10 right-6 md:right-12 select-none font-sans font-black leading-none text-white/[0.05] text-[9rem] md:text-[18rem]"
+          >
+            {mecanismo.steps[active].n}
+          </motion.span>
+        )}
+
         <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>
         <motion.h2 variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}