feat(secciones): puntos de inflexión y dolores, con gráfico en toda la página

Dos secciones nuevas tomadas del deck de la dueña, verbatim y sin
reescribir: los 6 puntos de inflexión y los 4 dolores en primera persona.

El resto de las secciones incorpora la capa gráfica: fondos de puntos,
duotono sobre foto en Mecanismo y Cómo empezar, pantalla partida sí/no en
Para quién, y pasos conectados con línea de progreso.

Las fotos son CC BY-SA 4.0 y llevan crédito en el footer, como exige la
licencia al haberlas modificado.

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

components/sections/FraseAncla.tsx

@@ -2,27 +2,35 @@
 
 import { motion } from 'framer-motion';
 import { Container } from '@/components/primitives/Container';
+import { SimboloTresLineas } from '@/components/primitives/SimboloTresLineas';
+import { TextoDesenfoque } from '@/components/primitives/TextoDesenfoque';
 import { fraseAncla } from '@/lib/content';
 import { fadeInUp, viewportOnce, usePrefersReducedMotion, motionProps } from '@/lib/motion';
 
 export function FraseAncla() {
   const reduced = usePrefersReducedMotion();
   return (
-    <section className="bg-white">
-      <Container className="py-24 md:py-32 text-center max-w-4xl">
-        <motion.blockquote
+    <section className="bg-azul-profundo relative overflow-hidden">
+      <Container className="relative py-28 md:py-40 text-center max-w-5xl">
+        <motion.div variants={fadeInUp} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}
+          className="flex justify-center">
+          <SimboloTresLineas className="pointer-events-none select-none w-14 text-dorado" />
+        </motion.div>
+        <motion.p
           variants={fadeInUp}
           initial="hidden"
           whileInView="visible"
           viewport={viewportOnce}
           {...motionProps(reduced)}
-          className="font-sans italic text-2xl md:text-4xl font-bold leading-snug text-azul-profundo"
+          className="mt-10 font-sans font-black text-4xl md:text-6xl leading-[0.95] tracking-tight text-white"
         >
-          <span className="text-dorado">“</span>
-          {fraseAncla.quote.before}{' '}
-          <span className="text-dorado">{fraseAncla.quote.accent}</span>
-          <span className="text-dorado">”</span>
-        </motion.blockquote>
+          <TextoDesenfoque
+            segments={[
+              { text: fraseAncla.quote.before },
+              { text: fraseAncla.quote.accent, className: 'text-dorado' },
+            ]}
+          />
+        </motion.p>
       </Container>
     </section>
   );