feat: hover micro-interactions on cards, steps and CTA arrow

Disciplinas cards and Mecanismo/ComoEmpezar steps get a subtle lift +
border intensify on hover; the CTA arrow slides right. All gated with
motion-reduce so prefers-reduced-motion users see no movement.

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

components/primitives/CTA.tsx

@@ -8,9 +8,10 @@ export function CTA({ href, label, variant = 'light', className = '' }: { href:
   return (
     <a
       href={href}
-      className={`inline-block font-sans font-bold uppercase tracking-wider px-7 py-3.5 text-sm transition-colors ${styles[variant]} ${className}`}
+      className={`group inline-block font-sans font-bold uppercase tracking-wider px-7 py-3.5 text-sm transition-colors ${styles[variant]} ${className}`}
     >
-      {label} <span aria-hidden="true">→</span>
+      {label}{' '}
+      <span aria-hidden="true" className="inline-block transition-transform duration-300 ease-out group-hover:translate-x-1 motion-reduce:transform-none motion-reduce:transition-none">→</span>
     </a>
   );
 }

components/sections/ComoEmpezar.tsx

@@ -19,7 +19,8 @@ export function ComoEmpezar() {
         <motion.ol variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
           className="mt-12 grid gap-10 md:grid-cols-3">
           {comoEmpezar.steps.map((step) => (
-            <motion.li key={step.n} variants={fadeInUp} className="border-t border-gold/30 pt-6">
+            <motion.li key={step.n} variants={fadeInUp}
+              className="border-t border-gold/30 pt-6 transition-all duration-300 ease-out hover:-translate-y-1.5 hover:border-gold/70 motion-reduce:transform-none motion-reduce:transition-none">
               <div className="font-serif italic font-black text-5xl md:text-6xl text-gold leading-none">{step.n}</div>
               <h3 className="mt-4 font-sans font-bold text-xl text-ink">{step.name}</h3>
               <p className="mt-3 text-muted leading-relaxed">{step.desc}</p>

components/sections/Disciplinas.tsx

@@ -18,7 +18,8 @@ export function Disciplinas() {
         <motion.ul variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
           className="mt-12 grid gap-8 md:grid-cols-3 list-none p-0">
           {disciplinas.items.map((item) => (
-            <motion.li key={item.name} variants={fadeInUp} className="border-t-2 border-gold pt-5">
+            <motion.li key={item.name} variants={fadeInUp}
+              className="border-t-2 border-gold pt-5 transition-all duration-300 ease-out hover:-translate-y-1.5 hover:border-gold-deep motion-reduce:transform-none motion-reduce:transition-none">
               <h3 className="font-serif italic font-bold text-2xl text-ink">{item.name}</h3>
               <p className="mt-3 text-muted leading-relaxed">{item.desc}</p>
             </motion.li>

components/sections/Mecanismo.tsx

@@ -17,7 +17,8 @@ export function Mecanismo() {
         <motion.ol variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
           className="mt-12 grid gap-10 md:grid-cols-3">
           {mecanismo.steps.map((step) => (
-            <motion.li key={step.n} variants={fadeInUp} className="border-t border-gold-bright/30 pt-6">
+            <motion.li key={step.n} variants={fadeInUp}
+              className="border-t border-gold-bright/30 pt-6 transition-all duration-300 ease-out hover:-translate-y-1.5 hover:border-gold-bright/70 motion-reduce:transform-none motion-reduce:transition-none">
               <div className="font-serif italic font-black text-5xl md:text-6xl text-gold-bright leading-none">{step.n}</div>
               <h3 className="mt-4 font-sans font-bold text-xl">{step.name}</h3>
               <p className="mt-3 text-muted-dark leading-relaxed">{step.desc}</p>