feat(recorrido): los seis puntos dejan de ser tarjetas y pasan a contestar

Cada punto de inflexión enuncia ahora la situación en segunda persona y
creeer responde qué hace al respecto. 01 y 05 son los dos intercambios
que la dueña improvisó en la llamada del 31/jul, redactados.

El test de segunda persona cazó cuatro situaciones impersonales que yo
había escrito ("El esfuerzo dejó de traducirse en resultado" no
interpela a nadie). Se corrigió el copy, no el test.

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

components/sections/PuntosInflexion.tsx

@@ -3,27 +3,11 @@
 import { motion } from 'framer-motion';
 import { Container } from '@/components/primitives/Container';
 import { FondoPuntos } from '@/components/primitives/FondoPuntos';
-import { Carrusel } from '@/components/primitives/Carrusel';
-import { TarjetaSpotlight } from '@/components/primitives/TarjetaSpotlight';
+import { ParDialogo } from '@/components/primitives/ParDialogo';
 import { IlustracionInflexion } from '@/components/primitives/IlustracionInflexion';
 import { puntosInflexion } from '@/lib/content';
 import { fadeInUp, staggerContainer, viewportOnce, usePrefersReducedMotion, motionProps } from '@/lib/motion';
 
-function Tarjeta({ n, name, desc }: { n: number; name: string; desc: string }) {
-  return (
-    <TarjetaSpotlight className="relative h-full rounded-md border-t-2 border-dorado pt-5 pl-1 pr-1 pb-1 overflow-visible">
-      {/* An index, not a watermark. At 48px and 6% opacity these collided with
-          the titles and with the gold rule while carrying no contrast of their
-          own; sat on the rule they encode the sequence and stay out of the way. */}
-      <span aria-hidden="true" className="pointer-events-none absolute -top-1.5 right-0 bg-gris-claro pl-2 font-sans font-black text-xs tracking-[0.2em] text-dorado leading-none select-none">
-        {String(n).padStart(2, '0')}
-      </span>
-      <h3 className="relative font-sans font-bold text-xl text-azul-profundo">{name}</h3>
-      <p className="relative mt-2 text-gris-medio leading-relaxed">{desc}</p>
-    </TarjetaSpotlight>
-  );
-}
-
 export function PuntosInflexion() {
   const reduced = usePrefersReducedMotion();
   return (
@@ -43,22 +27,18 @@ export function PuntosInflexion() {
           </motion.div>
         </div>
 
-        {/* Swipeable carousel on mobile ("01 / 06" counter, as on en-ti.com); fixed grid from md up. */}
-        <div className="mt-12 md:hidden">
-          <Carrusel
-            ariaLabel="Los seis puntos de inflexión"
-            mostrarContador
-            slides={puntosInflexion.items.map((item, i) => <Tarjeta key={item.name} n={i + 1} {...item} />)}
-            slideClassName="pr-4"
-          />
-        </div>
+        <motion.p variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
+          className="mt-14 text-xs tracking-[0.3em] uppercase font-black text-dorado">{puntosInflexion.lead}</motion.p>
+
+        {/* The conversation. One <li> per exchange, read top to bottom — no
+            carousel at any breakpoint, because "te bajas" is the whole shape
+            the dueña asked for. The stagger reaches ParDialogo's two halves
+            through React context, so each pair arrives in two beats: the
+            situation, then the answer. */}
         <motion.ul variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
-          className="mt-12 hidden md:grid md:grid-cols-3 md:gap-8 list-none p-0">
+          className="mt-8 list-none p-0 flex flex-col gap-12 md:gap-16">
           {puntosInflexion.items.map((item, i) => (
-            <motion.li key={item.name} variants={fadeInUp}
-              className="transition-transform duration-300 ease-out hover:-translate-y-1.5 motion-reduce:transform-none motion-reduce:transition-none">
-              <Tarjeta n={i + 1} {...item} />
-            </motion.li>
+            <ParDialogo key={item.name} n={i + 1} {...item} />
           ))}
         </motion.ul>
       </Container>