feat(recorrido): película negra en la pregunta, en vez de blanca

El fotograma de la pregunta pasa de velo claro a negro al 66%, y su
titular de azul profundo a blanco. La respuesta conserva el azul de
marca, así que las dos mitades siguen distinguiéndose —negro neutro
frente a azul— además de por quién habla.

Con ellas se van al blanco la cifra de fondo y los puntos del patrón, que
sobre negro eran invisibles.

Contraste medido sobre página verificada como hidratada: el peor punto de
los ocho fotogramas es 7,23:1, por encima del 7:1 de AAA incluso para
texto normal. Al 58% bajaba a 5,33:1 —válido para titular, escaso— y de
ahí el 66%.

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

components/primitives/EscenaDialogo.tsx

@@ -61,7 +61,7 @@ export function EscenaDialogo({
       <motion.span
         aria-hidden="true"
         style={{ y: cifraY }}
-        animate={{ color: respondida ? 'rgba(255,255,255,0.06)' : 'rgba(10,29,61,0.05)' }}
+        animate={{ color: respondida ? 'rgba(255,255,255,0.07)' : 'rgba(255,255,255,0.09)' }}
         transition={{ duration: 0.5, ease: EASE }}
         className="pointer-events-none absolute right-0 top-8 select-none font-sans font-black leading-none text-[11rem] md:text-[22rem]"
       >
@@ -79,7 +79,7 @@ export function EscenaDialogo({
           <p className="text-[0.7rem] font-black uppercase tracking-[0.34em] text-dorado md:text-xs">
             {n} · {name}
           </p>
-          <p className="mt-6 font-sans font-black leading-[0.98] text-azul-profundo text-4xl md:text-6xl lg:text-7xl">
+          <p className="mt-6 font-sans font-black leading-[0.98] text-white text-4xl md:text-6xl lg:text-7xl">
             «{situacion}»
           </p>
         </motion.div>

components/sections/PuntosInflexion.tsx

@@ -132,7 +132,7 @@ 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 bg-gris-claro">
+        <div data-escena={activo} data-tiempo={tiempo} className="sticky top-0 h-screen overflow-hidden bg-azul-profundo">
           {/* The photograph of whichever point is on screen, crossfading with
               the beat. Only the active one is opaque; the rest sit at zero, so
               the browser still holds them decoded and the swap costs nothing. */}
@@ -152,14 +152,16 @@ function Escenificado() {
 
           {/* "Respetando la capa azul y blanco": the photograph never carries
               the frame, it only gives it grain. The light veil holds the
-              question legible in azul-profundo type; the navy veil takes the
-              whole stage over for the answer. Both are heavy on purpose —
-              anything thinner and the copy starts fighting the photograph. */}
+              question readable in white; the navy veil takes the whole stage
+              over for the answer. The question's film is neutral black and the
+              answer's is the brand's navy, so the two frames are told apart by
+              temperature as well as by who is speaking. Both are heavy on
+              purpose — anything thinner and the copy fights the photograph. */}
           <motion.div
             aria-hidden="true"
             animate={{ opacity: respondida ? 0 : 1 }}
             transition={{ duration: 0.55, ease: [0.22, 1, 0.36, 1] }}
-            className="absolute inset-0 bg-gris-claro/[0.72]"
+            className="absolute inset-0 bg-black/[0.66]"
           />
           <motion.div
             aria-hidden="true"
@@ -169,7 +171,7 @@ function Escenificado() {
           />
 
           <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} />
+            <FondoPuntos className="-bottom-10 -right-16 w-80 md:w-[34rem] text-white/10" distance={32} />
           </motion.div>
 
           <Container className="relative h-full">