feat: rediseño «El documento» en curso, contacto real y enlaces externos

Primitivas y contenido del rediseño (escala tipográfica, Revelar,
MarcaSeccion, Seccion, Antetitulo, SimboloMarca, Resplandor, ClaridadHero,
sección Proceso de ocho etapas, lib/content.ts reestructurado en seis
secciones con alias para las viejas). Mecanismo y FormaTrabajar se retiran.

Encima, lo de esta sesión:
- recorrido: creeer vuelve a responder cada situación en vez de repetirla
  (el alias apuntaba respuesta a situacion); respuestas en plural. Créditos
  de las seis fotos de México.
- contacto: WhatsApp, email (con mailto:) y LinkedIn reales; iconos de las
  redes en el cierre y el footer (IconoRed, trazos de Simple Icons, CC0).
- enlaces: lo externo abre en otra pestaña con noopener y aviso para
  lectores de pantalla (lib/enlaces.ts); mailto y anclas se quedan.
- Proceso: las ocho tarjetas no aparecían nunca en móvil (amount 0.3 sobre
  una lista de ~3000px); ahora cada una se revela sola. El ≡ de la 08 ya no
  tapa un entregable, título equilibrado, etiqueta a 12px, sin elevar al
  hover lo que no es clicable.
- Disciplinas: la frase «No son la promesa — son los medios» gana peso y
  se agrupa con título e ilustración; sin cortes huérfanos en móvil.

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

components/sections/PuntosInflexion.tsx

@@ -3,6 +3,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { motion, useMotionValue, useMotionValueEvent, useSpring, useTransform } from 'framer-motion';
 import { Container } from '@/components/primitives/Container';
+import { Antetitulo } from '@/components/primitives/Antetitulo';
 import { FondoPuntos } from '@/components/primitives/FondoPuntos';
 import { FondoFoto } from '@/components/primitives/FondoFoto';
 import { ParDialogo } from '@/components/primitives/ParDialogo';
@@ -23,12 +24,12 @@ const TOTAL = items.length;
 // ever brings its own colour onto the page. Under the veils below they read as
 // texture, not as stock photography.
 const FOTOS = [
-  '/images/recorrido/crecer.jpg',        // a financial district still going up, cranes and all
-  '/images/recorrido/consolidarse.jpg',  // an empty meeting room: order before more weight
-  '/images/recorrido/rentabilidad.jpg',  // the harvest — effort actually turned into result
-  '/images/recorrido/simplificar.jpg',   // a trading screen too dense to read
-  '/images/recorrido/expandirse.jpg',    // a departures board: markets you have not flown to
-  '/images/recorrido/portafolio.jpg',    // a skyline of towers, every one of them a front
+  '/images/recorrido/crecer.jpg',        // Torre Mitikah, CDMX, still topped by its crane
+  '/images/recorrido/consolidarse.jpg',  // an office built in a hurry: boxes before order
+  '/images/recorrido/rentabilidad.jpg',  // the agave harvest — effort actually turned into result
+  '/images/recorrido/simplificar.jpg',   // overpasses stacked over overpasses, CDMX
+  '/images/recorrido/expandirse.jpg',    // Cancún's boarding gates: markets you have not flown to
+  '/images/recorrido/portafolio.jpg',    // Monterrey's skyline, every tower a front
 ];
 
 // Reduced motion, and the server's first paint, get the whole conversation laid
@@ -37,10 +38,10 @@ const FOTOS = [
 // sixths of the copy behind a scroll position is not an option either way.
 function Estatica() {
   return (
-    <section className="bg-gris-claro relative overflow-hidden">
+    <section className="bg-gris-claro bg-hondo-claro relative overflow-hidden">
       <FondoPuntos className="-bottom-6 -right-12 w-80 md:w-[32rem] text-azul-profundo/10" distance={32} />
       <Container className="relative py-16 md:py-24">
-        <h2 className="text-xs tracking-[0.3em] uppercase font-black text-dorado">{puntosInflexion.lead}</h2>
+        <Antetitulo as="h2">{puntosInflexion.lead}</Antetitulo>
         <ul className="mt-8 list-none p-0 flex flex-col gap-16 md:gap-24">
           {items.map((item, i) => (
             <ParDialogo key={item.name} n={i + 1} {...item} activo reducido onActivar={() => {}} />
@@ -185,9 +186,9 @@ function Escenificado() {
                 the recorrido its <h2>, and a section this size with no heading
                 at all is a hole in the document outline — for a screen reader
                 the six exchanges would hang off nothing. */}
-            <h2 className="absolute top-24 left-6 md:left-12 text-xs tracking-[0.3em] uppercase font-black text-dorado md:top-28">
+            <Antetitulo as="h2" sobre="oscuro" className="absolute top-24 left-6 md:left-12 md:top-28">
               {puntosInflexion.lead}
-            </h2>
+            </Antetitulo>
 
             {/* The rail. Where you are in the conversation, and how much is
                 left — a pinned section without it feels like a page that