fix(recorrido): un fotograma, una cosa

La pregunta y la respuesta compartían fotograma: la tarjeta de creeer
entraba debajo de la del lector y se veían las dos a la vez. El flujo que
pidió la dueña es pregunta → scroll → respuesta → scroll → pregunta, con
una sola cosa en pantalla cada vez.

Las dos tarjetas pasan a ocupar la misma celda de la rejilla, así que la
segunda toma el escenario que deja la primera en vez de apilarse bajo
ella, y entran desde márgenes opuestos para que el cambio se lea como un
relevo. Verificado tiempo a tiempo: los doce muestran exactamente una.

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

components/primitives/EscenaDialogo.tsx

@@ -62,42 +62,50 @@ export function EscenaDialogo({
         {n}
       </motion.span>
 
-      {/* The reader's card. It gives way a little once the answer lands: still
-          legible, no longer the thing you are looking at. */}
-      <motion.div
-        animate={{
-          opacity: respondida ? 0.72 : 1,
-          rotate: respondida ? -1.8 : -0.6,
-          y: respondida ? -14 : 0,
-        }}
-        transition={{ duration: 0.5, ease: EASE }}
-        className="relative z-10 max-w-xl rounded-xl border border-azul-profundo/10 bg-white p-7 shadow-[0_28px_70px_-32px_rgba(10,29,61,0.5)] md:p-9"
-      >
-        <p className="text-[0.65rem] font-black uppercase tracking-[0.34em] text-dorado">
-          {n} · {name}
-        </p>
-        <p className="mt-4 font-sans font-black leading-[1.12] text-azul-profundo text-2xl md:text-4xl">
-          «{situacion}»
-        </p>
-      </motion.div>
+      {/* One card per frame — never both. Both live in the same grid cell so
+          the second can take the stage the first leaves, instead of stacking
+          under it: the question is asked, it goes, and then the answer is the
+          only thing on screen. They come in from opposite sides so the swap
+          reads as one card replacing another, not as one fading into the same
+          spot. */}
+      <div className="grid">
+        <motion.div
+          animate={{
+            opacity: respondida ? 0 : 1,
+            y: respondida ? -52 : 0,
+            rotate: respondida ? -3.4 : -0.8,
+            scale: respondida ? 0.96 : 1,
+          }}
+          transition={{ duration: 0.5, ease: EASE }}
+          style={{ pointerEvents: respondida ? 'none' : 'auto' }}
+          className="col-start-1 row-start-1 self-center justify-self-start max-w-xl rounded-xl border border-azul-profundo/10 bg-white p-7 shadow-[0_28px_70px_-32px_rgba(10,29,61,0.5)] md:p-9"
+        >
+          <p className="text-[0.65rem] font-black uppercase tracking-[0.34em] text-dorado">
+            {n} · {name}
+          </p>
+          <p className="mt-4 font-sans font-black leading-[1.12] text-azul-profundo text-2xl md:text-4xl">
+            «{situacion}»
+          </p>
+        </motion.div>
 
-      {/* creeer's card, handed back. Navy against the reader's white, tilted the
-          other way, overlapping the corner — two cards on a table, not two
-          paragraphs in a column. */}
-      <motion.div
-        animate={{
-          opacity: respondida ? 1 : 0,
-          y: respondida ? 0 : 70,
-          scale: respondida ? 1 : 0.94,
-          rotate: respondida ? 1.6 : 5.5,
-        }}
-        transition={{ duration: 0.55, ease: EASE }}
-        className="relative z-20 -mt-5 ml-auto max-w-lg rounded-xl bg-azul-profundo p-7 shadow-[0_34px_80px_-30px_rgba(10,29,61,0.75)] md:-mt-8 md:mr-6 md:p-9"
-      >
-        <span aria-hidden="true" className="absolute left-0 top-7 h-10 w-[3px] rounded-r bg-dorado md:top-9" />
-        <Wordmark size="sm" onDark />
-        <p className="mt-4 text-base leading-relaxed text-white/75 md:text-xl">{respuesta}</p>
-      </motion.div>
+        {/* creeer's card, handed back: navy against the reader's white, tilted
+            the other way, and coming in from the opposite margin. */}
+        <motion.div
+          animate={{
+            opacity: respondida ? 1 : 0,
+            y: respondida ? 0 : 64,
+            rotate: respondida ? 1.6 : 5,
+            scale: respondida ? 1 : 0.95,
+          }}
+          transition={{ duration: 0.55, ease: EASE }}
+          style={{ pointerEvents: respondida ? 'auto' : 'none' }}
+          className="col-start-1 row-start-1 self-center justify-self-end max-w-xl rounded-xl bg-azul-profundo p-7 shadow-[0_34px_80px_-30px_rgba(10,29,61,0.75)] md:mr-6 md:p-9"
+        >
+          <span aria-hidden="true" className="absolute left-0 top-7 h-10 w-[3px] rounded-r bg-dorado md:top-9" />
+          <Wordmark size="sm" onDark />
+          <p className="mt-4 text-base leading-relaxed text-white/75 md:text-xl">{respuesta}</p>
+        </motion.div>
+      </div>
     </motion.li>
   );
 }