From 6078318b10214b222b0d3e9e4c7b082d856360f8 Mon Sep 17 00:00:00 2001
From: erikgh <erikguzh@outlook.es>
Date: Mon, 3 Aug 2026 14:31:02 -0600
Subject: [PATCH] =?UTF-8?q?feat(recorrido):=20pel=C3=ADcula=20negra=20en?=
 =?UTF-8?q?=20la=20pregunta,=20en=20vez=20de=20blanca?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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 |  4 ++--
 components/sections/PuntosInflexion.tsx | 14 ++++++++------
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/components/primitives/EscenaDialogo.tsx b/components/primitives/EscenaDialogo.tsx
index aab2aa4..306ce4c 100644
--- a/components/primitives/EscenaDialogo.tsx
+++ b/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>
diff --git a/components/sections/PuntosInflexion.tsx b/components/sections/PuntosInflexion.tsx
index 3a287d8..7b977ce 100644
--- a/components/sections/PuntosInflexion.tsx
+++ b/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">