# Ruta al Cierre — Especificación de Rediseño Visual
**Objetivo: que la plataforma SEA la carta de ventas. Impresionar en los primeros 5 segundos de demo.**
Marca: B2B-Integra | Estilo de referencia: experiencias gamificadas tipo Pandapé (SaaS moderno, amigable, con progresión visible)

---

## 1. Principio rector

Ruta al Cierre tiene dos audiencias y el diseño debe servir a ambas:

- **El candidato** vive una experiencia tipo juego (misiones, progreso, feedback inmediato) que se siente moderna y respetuosa de su tiempo.
- **El dueño/director** ve la plataforma 5 minutos en una demo desde tu celular y piensa: *"esto no lo tiene mi competencia, esto vale dinero."*

Regla de oro de la demo: **cada pantalla debe verse premium sin explicación.** Si necesitas explicar por qué algo se ve así, rediséñalo.

---

## 2. Design tokens (implementar como variables CSS)

```css
:root {
  /* Marca B2B-Integra */
  --navy:        #002D48;  /* primario: headers, texto fuerte, fondo hero */
  --navy-800:    #0A3D5C;  /* variante para cards sobre navy */
  --navy-100:    #E6EEF3;  /* fondos suaves de sección */
  --silver:      #AFB1B3;  /* secundario: bordes, texto muted, iconografía pasiva */
  --amber:       #E8821A;  /* acento: CTAs, progreso, logros. USO EXCLUSIVO para acción/avance */
  --amber-soft:  #FDF1E3;  /* fondo de chips/badges de logro */
  --success:     #1E9E6A;  /* aciertos, semáforo verde */
  --alert:       #D9534F;  /* semáforo rojo (solo dashboard cliente, nunca al candidato) */
  --bg:          #F7F9FB;  /* fondo general app */
  --card:        #FFFFFF;
  --text:        #1A2B38;
  --text-muted:  #5C6B78;

  --radius-card: 16px;
  --radius-btn:  12px;
  --shadow-card: 0 4px 16px rgba(0,45,72,.08);
  --shadow-pop:  0 8px 24px rgba(0,45,72,.16);
}
```

**Tipografía:** títulos `Poppins` 600/700 (Google Fonts, gratis, es la familia visual del SaaS gamificado moderno); cuerpo `Inter` 400/500. Escala: H1 28-32px, H2 22px, cuerpo 16px, caption 13px. Nunca menos de 16px en el flujo del candidato (mobile-first).

**Prohibido:** gradientes arcoíris, más de un acento por pantalla, sombras duras, tablas HTML crudas visibles al candidato, cualquier elemento que parezca formulario de gobierno.

---

## 3. Landing page = carta de ventas (`/ruta-al-cierre`)

Estructura de scroll, en este orden. Es una página de ventas para el DUEÑO, no para el candidato.

### 3.1 Hero (fondo navy, texto blanco)
- **Headline:** "Deja de contratar vendedores por corazonada."
- **Subhead:** "Ruta al Cierre evalúa a tu equipo comercial y a tus candidatos con escenarios reales de venta. Datos, no feeling."
- CTA primario (ámbar): **"Ver demo de 3 minutos"** · CTA secundario (ghost): "Hablar con un consultor"
- **Elemento firma:** a la derecha del hero, un mockup de teléfono flotante mostrando una pregunta situacional real con sus opciones — la plataforma es el héroe, no una ilustración de stock. Ligera animación de flotación (6s ease-in-out, respetar `prefers-reduced-motion`).
- Barra de confianza bajo el hero: "Desarrollado por B2B-Integra · 30 años de dirección comercial B2B · 7 dimensiones evaluadas"

### 3.2 El problema (fondo claro)
Tres stats grandes en cards (número 48px ámbar, label abajo):
- "6-9 meses de sueldo" → costo de una mala contratación comercial
- "79% vs 58%" → directores que prometieron vender más vs. los que esperan estancamiento (KPMG 2026)
- "0 datos" → con lo que se decide la mayoría de las contrataciones de ventas

### 3.3 Cómo funciona (3 pasos con iconos en círculos ámbar)
1. **El candidato juega** — 20-25 minutos de escenarios reales de venta, desde su celular.
2. **La plataforma mide** — 7 dimensiones del perfil comercial, incluida Liderazgo Situacional para gerentes.
3. **Tú decides con datos** — reporte con semáforo, ranking y perfil dimensional por persona.

### 3.4 Muestra del reporte (la sección que vende)
Screenshot/render del dashboard con un radar chart de 7 dimensiones y un ranking de 4-5 candidatos ficticios con semáforo. Caption: *"Esto es lo que llega a tu escritorio."* El dueño compra ESTE reporte, no el juego.

### 3.5 Para quién / planes (3 cards)
Diagnóstico Express → Dirección Comercial Fraccional → Licencia mensual. Precios visibles u "desde", CTA en cada card.

### 3.6 Quién está detrás
Foto profesional de Paco + 3 líneas: 30 años B2B, EY/Cisco/Baker Tilly, atleta de equipo nacional (disciplina de alto rendimiento como sello — úsalo, es memorable).

### 3.7 CTA final (fondo navy)
"Tu meta de 2026 no se va a cerrar sola." + botón ámbar "Agendar diagnóstico".

---

## 4. Experiencia del candidato (el "juego")

### 4.1 Onboarding (una sola pantalla)
- Logo B2B-Integra + nombre y logo de la EMPRESA cliente (white-label: variable `client_name`, `client_logo` — esto es lo que cobras en la personalización).
- "Hola [nombre] 👋 — Vas a recorrer la **Ruta al Cierre**: [N] situaciones reales de venta. No hay respuestas con trampa: responde como actuarías de verdad. Tiempo estimado: 20 min."
- Botón ámbar grande: **"Comenzar la ruta"**.

### 4.2 Pantalla de escenario (la pantalla más importante)
- **Header fijo:** barra de progreso ámbar con hitos (⛳ estaciones de la "ruta") + "Escenario 4 de 18" + chip de la etapa del funnel ("Prospección", "Objeciones", "Cierre"...).
- **Card del escenario:** contexto en 2-3 líneas, tipografía generosa, un emoji/icono de situación (📞 🤝 📊) — nada de párrafos densos.
- **Opciones:** cards seleccionables (no radio buttons): borde silver por defecto, al hover/tap borde ámbar 2px + elevación sutil. Tap = seleccionar; botón "Continuar" se activa en ámbar.
- **Microinteracción al continuar:** la estación de la ruta se "enciende" en la barra de progreso (transición 300ms). Cada 5-6 escenarios, interstitial de 1.5s: "🔥 Vas a buen ritmo — Etapa de Negociación completada" con confeti sutil. Esto es lo que hace que se sienta Pandapé y no examen.
- **Sin retroceso visible y sin mostrar aciertos** (es evaluación, no trivia): la gamificación premia AVANCE, no respuestas correctas.

### 4.3 Pantalla final del candidato
- "🏁 ¡Completaste la Ruta al Cierre!" + badge visual descargable/compartible con marca B2B-Integra (marketing gratuito cuando lo comparten en LinkedIn).
- Mensaje: "Tus resultados fueron enviados a [empresa]. Gracias por tu tiempo."
- NUNCA mostrar puntajes al candidato.

---

## 5. Dashboard del cliente (lo que enseñas en la demo)

1. **Vista de proceso:** cards de vacante con contador de candidatos evaluados y anillo de progreso ámbar.
2. **Ranking:** tabla estilizada (cards-row, no tabla cruda) — foto/inicial, nombre, score global grande, semáforo (verde/ámbar/rojo), botón "Ver perfil".
3. **Perfil individual — la pantalla estrella:** radar chart de 7 dimensiones (Chart.js, línea navy, relleno ámbar 20% de opacidad), fortaleza principal y riesgo principal en dos chips, y 2-3 líneas de recomendación generada. **Botón "Descargar PDF"** — ese PDF con logo del cliente es el entregable físico del diagnóstico.
4. **Vista comparativa:** hasta 3 candidatos superpuestos en el mismo radar.

---

## 6. Priorización (para llegar al 18 de julio)

| Prioridad | Item | Impacto en venta |
|---|---|---|
| P0 | Tokens CSS + tipografía en toda la app | Todo se ve premium de golpe |
| P0 | Pantalla de escenario rediseñada (cards + progreso con hitos) | Es lo que muestras en demo |
| P0 | Radar chart + semáforo en perfil individual | Es lo que compra el dueño |
| P1 | Landing/carta de ventas completa | Cierra a los que no viste en persona |
| P1 | White-label (logo/nombre cliente por variable) | Justifica el setup de $29,500 |
| P2 | Interstitials con confeti, badge compartible, PDF automatizado | Pulido — puede entrar la semana del 20 |

**No hacer antes de agosto:** apps nuevas, más dimensiones, panel de administración bonito (solo tú lo ves), animaciones complejas.

---

## 7. Prompt listo para Claude Code

Copia y pega esto en Claude Code dentro del proyecto:

```
Rediseña la interfaz de Ruta al Cierre (PHP/MySQL/JS, hosting compartido Namecheap) siguiendo la especificación en spec-rediseno-ruta-al-cierre.md. Prioridades en orden: (1) implementar los design tokens como variables CSS globales y aplicar tipografía Poppins/Inter vía Google Fonts en todas las vistas; (2) rediseñar la pantalla de escenario del candidato: opciones como cards seleccionables, barra de progreso fija con hitos tipo "estaciones de ruta", chip de etapa del funnel, mobile-first; (3) crear la vista de perfil individual del dashboard cliente con radar chart de 7 dimensiones usando Chart.js (CDN), semáforo de score y chips de fortaleza/riesgo; (4) agregar soporte white-label: variables client_name y client_logo tomadas de la tabla de empresa, mostradas en onboarding y reportes. No tocar la lógica de scoring ni el modelo de datos. Mantener compatibilidad con el stack actual (sin build tools, sin frameworks). Respetar prefers-reduced-motion en todas las animaciones.
```