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>

app/globals.css

@@ -18,9 +18,43 @@
 }
 
 @layer base {
-  a:focus-visible, button:focus-visible {
-    outline: 3px solid #C4942E;
+  /* The ring needs to contrast against the background it appears on, not
+     against the brand. The global gold gave 2.76:1 on white, below the 3:1
+     WCAG 2.2 requires for a focus indicator. Deep blue on white gives 16.7:1;
+     and on the two navy sections, where the navy would disappear, gold takes
+     over, which gives 6.07:1 there. */
+  a:focus-visible,
+  button:focus-visible {
+    outline: 3px solid #0a1d3d;
     outline-offset: 3px;
     border-radius: 2px;
   }
+
+  .bg-azul-profundo a:focus-visible,
+  .bg-azul-profundo button:focus-visible {
+    outline-color: #c4942e;
+  }
+}
+
+/* The page's only motion gesture. The hidden state depends on `.js`, which an
+   inline script in <head> sets before first paint: without JavaScript the
+   class never lands, nothing is hidden, and the page reads in full. Anyone
+   who asked for less motion is also excluded here — the media query leaves
+   them out entirely rather than neutralising it afterwards. */
+@media (prefers-reduced-motion: no-preference) {
+  .js [data-revelar] {
+    opacity: 0;
+    transform: translateY(12px);
+  }
+  .js [data-revelar][data-visible] {
+    animation: revelar 400ms cubic-bezier(0.22, 1, 0.36, 1) both;
+    animation-delay: calc(var(--i, 0) * 60ms);
+  }
+}
+
+@keyframes revelar {
+  to {
+    opacity: 1;
+    transform: none;
+  }
 }