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;
+  }
 }

app/layout.tsx

@@ -5,23 +5,29 @@ import './globals.css';
 const openSans = Open_Sans({ subsets: ['latin'], weight: ['400', '600', '700', '800'], style: ['normal', 'italic'], variable: '--font-open-sans', display: 'swap' });
 
 export const metadata: Metadata = {
-  title: 'creeer · tu estratega de crecimiento',
-  description: 'Claridad estratégica para empresarios con tracción que llegaron a su punto de inflexión. Inmersión profunda, estrategia ejecutable.',
+    title: 'creeer · claridad estratégica para tu negocio',
+  description: 'Tu negocio no necesita más esfuerzo — necesita más claridad. Estrategia ejecutable para empresarios con tracción en su punto de inflexión.',
   metadataBase: new URL('https://creeer.com'), // TODO dueña: real domain
   openGraph: {
-    title: 'creeer · tu estratega de crecimiento',
-    description: 'Claridad estratégica para empresarios con tracción en punto de inflexión.',
+  title: 'creeer · claridad estratégica para tu negocio',
+    description: 'Tu negocio no necesita más esfuerzo — necesita más claridad. Estrategia ejecutable para empresarios con tracción.',
     type: 'website',
     locale: 'es',
     images: [{ url: '/og-image.png', width: 1200, height: 630, alt: 'creeer' }],
   },
-  twitter: { card: 'summary_large_image', title: 'creeer', description: 'Claridad estratégica para empresarios.' },
+  twitter: { card: 'summary_large_image', title: 'creeer', description: 'Tu negocio no necesita más esfuerzo — necesita más claridad.' },
   alternates: { canonical: 'https://creeer.com' },
 };
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="es" className={openSans.variable}>
+      <head>
+        {/* Blocking and before first paint on purpose: it decides whether the
+            CSS can hide anything at all. If this doesn't run, there is no
+            hidden state to reveal. */}
+        <script dangerouslySetInnerHTML={{ __html: "document.documentElement.classList.add('js')" }} />
+      </head>
       <body>{children}</body>
     </html>
   );

app/page.tsx

@@ -5,8 +5,7 @@ import { FraseAncla } from '@/components/sections/FraseAncla';
 import { PuntosInflexion } from '@/components/sections/PuntosInflexion';
 import { Dolores } from '@/components/sections/Dolores';
 import { ParaQuien } from '@/components/sections/ParaQuien';
-import { Mecanismo } from '@/components/sections/Mecanismo';
-import { FormaTrabajar } from '@/components/sections/FormaTrabajar';
+import { Proceso } from '@/components/sections/Proceso';
 import { Disciplinas } from '@/components/sections/Disciplinas';
 import { Estratega } from '@/components/sections/Estratega';
 import { ComoEmpezar } from '@/components/sections/ComoEmpezar';
@@ -16,7 +15,7 @@ const jsonLd = {
   '@context': 'https://schema.org',
   '@type': 'ProfessionalService',
   name: 'creeer',
-  description: 'Estratega de crecimiento. Claridad estratégica para empresarios con tracción.',
+  description: 'Claridad estratégica para empresarios con tracción en su punto de inflexión.',
   url: 'https://creeer.com',
 };
 
@@ -27,16 +26,20 @@ export default function Home() {
       <Header />
       {/* El recorrido va en segundo lugar por decisión de la dueña: el lector
           entra por el gancho y cae directo en la secuencia anclada, que plantea
-          seis situaciones y las contesta. FraseAncla y Dolores llegan después,
-          y Mecanismo cierra explicando el método detrás de esas respuestas. */}
+          seis situaciones y las contesta. FraseAncla y Dolores llegan después.
+          Disciplinas precede a Proceso a propósito: su lead —«no son la
+          promesa, son los medios»— tiene que aterrizar ANTES de que el lector
+          se encuentre ocho etapas llamadas «Comunicación y branding» y
+          «Marketing y ventas», o Proceso se lee como catálogo de agencia, que
+          es justo lo que el posicionamiento de la dueña descarta. Después de
+          Proceso llegaba tarde, como nota al pie. */}
       <main>
         <Hero variant="editorial" /> {/* dueña puede cambiar a "hormozi" */}
         <PuntosInflexion />
         <FraseAncla />
         <Dolores />
-        <Mecanismo />
-        <FormaTrabajar />
         <Disciplinas />
+        <Proceso />
         <ParaQuien />
         <Estratega />
         <ComoEmpezar />