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>

tailwind.config.ts

@@ -10,6 +10,14 @@ const config: Config = {
         'azul-profundo': '#0A1D3D',    // Pantone 2965 C — texto, fondos oscuros, CTAs
         'dorado': {
           DEFAULT: '#C4942E',           // Pantone 872 C — acentos, títulos, símbolo ≡
+          // El dorado del manual sobre fondo claro es un problema de lectura,
+          // no de gusto: 2,76:1 sobre blanco y 2,46:1 sobre gris-claro, cuando
+          // AA pide 4,5:1 para texto pequeño. Sobre azul profundo da 6,07:1 y
+          // ahí no se toca. Éste es el mismo tono bajado hasta 5,3:1 sobre
+          // blanco y 4,7:1 sobre gris-claro, y existe para una sola cosa:
+          // TEXTO PEQUEÑO SOBRE FONDO CLARO. Rellenos, reglas, iconos, el ≡ y
+          // todo lo que vaya sobre navy siguen usando el DEFAULT.
+          texto: '#8A6520',
         },
         // Colores neutros
         'azul-claro': '#C8EEF5',       // fondos alternativos, secciones suaves
@@ -24,13 +32,49 @@ const config: Config = {
         // (mismo diseñador: Steve Matteson). Cero autoalojamiento, cero problemas de licencia.
         sans: ['var(--font-open-sans)', 'system-ui', 'sans-serif'],
       },
+      // Profundidad. Un color plano de fondo se lee como bloque impreso: no
+      // tiene fuente de luz y todas las secciones pesan igual. Cada uno de
+      // estos degradados levanta un punto y hunde los bordes, así que la
+      // página gana relieve sin salirse de la paleta del manual.
+      //
+      // Van siempre acompañados de su color sólido (`bg-azul-profundo
+      // bg-hondo-navy`): el color pinta `background-color` y el degradado
+      // `background-image`, de modo que si el segundo no carga queda el fondo
+      // correcto y no un hueco blanco.
+      backgroundImage: {
+        'hondo-navy': 'radial-gradient(125% 95% at 12% 0%, #18345F 0%, #0A1D3D 52%, #061530 100%)',
+        'hondo-claro': 'radial-gradient(120% 100% at 85% 0%, #FFFFFF 0%, #F2F2F2 58%, #E7E9EC 100%)',
+        'hondo-blanco': 'radial-gradient(110% 90% at 18% 0%, #FFFFFF 0%, #FBFBFC 55%, #F0F2F5 100%)',
+        // Dorado como superficie, no como muestra de color: más claro arriba,
+        // como si le diera la luz.
+        'dorado-metal': 'linear-gradient(145deg, #E2B75C 0%, #C4942E 46%, #9C7222 100%)',
+        // Halo para soltar sobre las secciones oscuras.
+        'velo-dorado': 'radial-gradient(50% 50% at 50% 50%, rgba(196,148,46,0.20) 0%, rgba(196,148,46,0) 70%)',
+        'velo-frio': 'radial-gradient(50% 50% at 50% 50%, rgba(200,238,245,0.14) 0%, rgba(200,238,245,0) 70%)',
+      },
+      boxShadow: {
+        // Dos sombras en vez de una: un contacto corto y cerrado que apoya la
+        // tarjeta en la página, y una difusa y lejana que le da aire. Una sola
+        // sombra siempre parece calcomanía.
+        tarjeta: '0 1px 2px rgba(10,29,61,0.06), 0 12px 32px -12px rgba(10,29,61,0.14)',
+        'tarjeta-alta': '0 2px 4px rgba(10,29,61,0.08), 0 28px 60px -20px rgba(10,29,61,0.28)',
+      },
       maxWidth: {
-        content: '1152px',
+        content: '1280px',
+        // Medida de texto corrido. La tensión entre reglas anchas (1280px) y
+        // texto angosto (68ch) es lo que hace que la composición se lea
+        // editorial en vez de como un bloque de landing.
+        medida: '68ch',
       },
       fontSize: {
-        // Two title roles, so a brand statement never looks like a section
-        // heading. Fluid so they hold from 360px to desktop without a stack of
-        // breakpoint overrides.
+        // Cinco roles. `display` se gasta UNA sola vez en toda la página.
+        display: ['clamp(3.5rem, 9vw, 7rem)', { lineHeight: '0.94', letterSpacing: '-0.03em' }],
+        titulo: ['clamp(2.25rem, 4.5vw, 3.5rem)', { lineHeight: '1', letterSpacing: '-0.02em' }],
+        sumario: ['clamp(1.375rem, 2vw, 1.75rem)', { lineHeight: '1.35', letterSpacing: '-0.01em' }],
+        cuerpo: ['1.0625rem', { lineHeight: '1.7' }],
+        rotulo: ['0.75rem', { lineHeight: '1.2', letterSpacing: '0.3em' }],
+        // Se van con la limpieza de la Tarea 13, cuando ya no queden secciones
+        // viejas que los usen.
         ancla: ['clamp(2.5rem, 6.5vw, 4.5rem)', { lineHeight: '0.98', letterSpacing: '-0.025em' }],
         seccion: ['clamp(2rem, 4vw, 3.25rem)', { lineHeight: '1.02', letterSpacing: '-0.02em' }],
       },