feat(recorrido): el fotograma es el mensaje, y la respuesta llega en azul

Fuera tarjetas: la situación va a tamaño de titular sobre el fondo claro,
y al bajar el escenario entero se vuelve azul profundo para la respuesta
de creeer, en blanco y del mismo tamaño. No es una tarjeta sobre la
página del lector, es el terreno de creeer.

El rótulo del punto se repite en la respuesta a propósito: como solo hay
una cosa en pantalla, es lo único que la ata a la pregunta que contesta.
El test lo fija con esa razón escrita.

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

components/sections/PuntosInflexion.tsx

@@ -111,11 +111,21 @@ function Escenificado() {
 
       {/* One viewport of stage, six viewports of scroll to move through it. */}
       <div ref={contenedor} className="relative" style={{ height: `${TOTAL * 100}vh` }}>
-        <div data-escena={activo} data-tiempo={tiempo} className="sticky top-0 h-screen overflow-hidden">
+        <div data-escena={activo} data-tiempo={tiempo} className="sticky top-0 h-screen overflow-hidden bg-gris-claro">
           <motion.div style={{ y: fondoY }} className="absolute inset-0">
             <FondoPuntos className="-bottom-10 -right-16 w-80 md:w-[34rem] text-azul-profundo/10" distance={32} />
           </motion.div>
 
+          {/* The frame itself turns over on the answer. The whole stage goes to
+              azul-profundo, not a panel inside it — the answer is not a card on
+              the reader's page, it is creeer's ground. */}
+          <motion.div
+            aria-hidden="true"
+            animate={{ opacity: respondida ? 1 : 0 }}
+            transition={{ duration: 0.55, ease: [0.22, 1, 0.36, 1] }}
+            className="absolute inset-0 bg-azul-profundo"
+          />
+
           <Container className="relative h-full">
             {/* left-6 / md:left-12, not left-0: an absolutely positioned child
                 resolves against Container's padding box, so `left-0` lands on
@@ -133,7 +143,13 @@ function Escenificado() {
                 <li key={item.name}>
                   <span
                     className={`block h-px origin-right transition-all duration-500 ${
-                      i === activo ? 'w-10 bg-dorado' : i < activo ? 'w-6 bg-dorado/40' : 'w-4 bg-azul-profundo/20'
+                      i === activo
+                        ? 'w-10 bg-dorado'
+                        : i < activo
+                          ? 'w-6 bg-dorado/40'
+                          : respondida
+                            ? 'w-4 bg-white/25'
+                            : 'w-4 bg-azul-profundo/20'
                     }`}
                   />
                 </li>