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/ComoEmpezar.tsx

@@ -3,6 +3,7 @@
 import { motion, useScroll, useTransform } from 'framer-motion';
 import Image from 'next/image';
 import { Container } from '@/components/primitives/Container';
+import { Antetitulo } from '@/components/primitives/Antetitulo';
 import { CTA } from '@/components/primitives/CTA';
 import { Icono, type IconoNombre } from '@/components/primitives/Icono';
 import { comoEmpezar, cierre } from '@/lib/content';
@@ -18,10 +19,10 @@ export function ComoEmpezar() {
   const { scrollYProgress } = useScroll();
   const desplazamiento = useTransform(scrollYProgress, [0, 1], [20, -20]);
   return (
-    <section className="bg-white">
+    <section className="bg-white bg-hondo-blanco">
       <Container className="py-16 md:py-24 grid gap-12 md:grid-cols-[1fr_auto] md:items-center">
         <motion.div variants={staggerContainer} initial="hidden" whileInView="visible" viewport={viewportOnce} {...motionProps(reduced)}>
-          <motion.p variants={fadeInUp} className="text-xs tracking-[0.3em] uppercase font-black text-dorado">{comoEmpezar.eyebrow}</motion.p>
+          <Antetitulo as={motion.p} variants={fadeInUp}>{comoEmpezar.eyebrow}</Antetitulo>
           <motion.h2 variants={fadeInUp} className="mt-4 font-sans font-black text-seccion text-azul-profundo max-w-xl">{comoEmpezar.title}</motion.h2>
           <motion.ol variants={staggerContainer} className="mt-12 grid gap-10 sm:grid-cols-3 md:grid-cols-1 md:gap-8">
             {comoEmpezar.steps.map((step, i) => (
@@ -38,7 +39,7 @@ export function ComoEmpezar() {
                     <Icono nombre={ICONOS[i]} className="w-6 h-6 text-dorado shrink-0" />
                     <h3 className="font-sans font-bold text-xl text-azul-profundo">{step.name}</h3>
                   </div>
-                  <p className="mt-3 md:mt-1 text-gris-medio leading-relaxed">{step.desc}</p>
+                  <p className="mt-3 md:mt-1 text-azul-profundo/70 leading-relaxed">{step.desc}</p>
                 </div>
               </motion.li>
             ))}