# RUTA AL CIERRE — Rediseño Visual
### Brief de diseño para Claude Code — capa cosmética, sin tocar lógica ni backend

---

## 1. Fundamento

**Qué es:** una simulación de trabajo, no un juego. El candidato ya vive esto como una semana real en el territorio — el diseño debe reforzar esa sensación, no competir con ella con estética de videojuego (nada de mascotas, insignias, barras de XP).

**Quién lo ve y cuándo:**
- **Candidato**, una sola vez, desde el celular — necesita claridad y calma, cero fricción visual
- **Reclutador**, todos los días — necesita densidad de información legible, no decoración
- **Prospecto** (la persona a la que le vendes esto), en vivo, en una demo — necesita ver un producto que se sienta terminado y con criterio propio, no una plantilla

**El nombre ya es el concepto:** "Ruta al Cierre" es un viaje con paradas. Ese es el elemento de firma — no un progress bar genérico, sino una ruta real que se traza a medida que el candidato avanza. Todo lo demás en el sistema debe quedarse en un segundo plano frente a esa idea.

---

## 2. Sistema de diseño

### Paleta (distinta de PHYNIX 360 — este es un producto de Yomp, con audiencia y tono propios)

| Token | Hex | Uso |
|---|---|---|
| `--ink` | `#12151C` | Texto principal, fondo de pantallas de portada/cierre |
| `--paper` | `#EDEFEC` | Fondo claro principal (pantallas de juego) |
| `--route` | `#2E7D6B` | Color de la ruta/progreso, CTA primario — evoca territorio y avance, no "alerta" ni "urgencia" |
| `--close` | `#C4432E` | Reservado para momentos de alto involucramiento: bandera_revisar, escenarios de firmeza/negociación, alertas del panel — úsalo con moderación, no como color decorativo |
| `--graphite` | `#5B5F66` | Texto secundario, bordes, estados inactivos |

### Tipografía

- **Display** (títulos de capítulo, pantalla de bienvenida/cierre): **Space Grotesk** — geométrica con carácter, úsala con moderación en tamaños grandes
- **Cuerpo** (narrativa de escenarios, opciones, todo el panel): **Inter** — la misma que ya usas en tus otros proyectos, mantiene continuidad de marca entre PHYNIX y Yomp
- **Datos/utilitaria** (puntajes, tokens, tablas del panel reclutador): **JetBrains Mono** — le da al panel una sensación de herramienta real de CRM, no de dashboard genérico

### Elemento de firma: la Ruta

Una línea trazada a mano (SVG, trazo tipo "dashed" con textura ligera, no una línea perfecta de vector) que atraviesa la parte superior de cada pantalla de escenario, con un punto por capítulo. El punto del capítulo actual está resaltado en `--route`; los completados quedan marcados; los pendientes en `--graphite` tenue. Reemplaza cualquier barra de progreso genérica — esta ES la ruta al cierre, literalmente.

En el panel del reclutador, este mismo motivo aparece en miniatura en cada fila de candidato (una ruta mini con puntos llenos/vacíos), dando de un vistazo cuánto ha avanzado cada quien sin necesitar una columna de texto.

### Layout

- **Candidato:** una decisión a la vez, pantalla completa, sin distracción — la ruta arriba, la narrativa al centro (con el ícono de medio, ver sección 4), las opciones abajo en botones idénticos entre sí
- **Reclutador:** más denso, tipo CRM real — tabla con la mini-ruta, badges de estado con texto en `--graphite`/`--route`/`--close` según corresponda, tipografía monoespaciada para puntajes y tokens

---

## 3. Pantallas a intervenir

| Pantalla | Qué cambia |
|---|---|
| Bienvenida | Fondo `--ink`, título en Space Grotesk grande, la ruta completa (sin recorrer) se insinúa de fondo como textura sutil |
| Escenario | Ruta con progreso arriba, ícono de medio junto al bloque narrativo, 4 botones de opción visualmente idénticos |
| Transición entre capítulos | Animación breve del punto de la ruta llenándose (única animación con propósito narrativo, sección 5) |
| Cierre | Fondo `--ink`, ruta completa ya recorrida, tono de cierre calmado |
| Login reclutador | Minimalista, `--paper` + `--ink`, sin decoración |
| Dashboard reclutador | Tabla con mini-ruta por fila, badges de estado, botón "Copiar link" con ícono |
| Perfil de candidato (radar) | Redibujar el SVG del radar con la paleta nueva; `--close` solo si `bandera_revisar` está activa; tipografía monoespaciada en la tabla de puntajes |

---

## 4. Iconografía e ilustración

**Sí:** un set de íconos de línea simple (trazo 1.5px, sin relleno) para el campo `medio` de cada escenario — llamada, WhatsApp, notificación de CRM, reunión, mensaje de equipo, observación directa. Refuerzan el realismo de "esto es tu trabajo real", no decoran.

**No:** mascotas, avatares de personajes, ilustraciones narrativas tipo cómic, emojis como iconografía funcional. Esto ya se decidió desde el diseño conceptual por validez aparente frente a candidatos a Gerente — el rediseño visual no debe contradecir esa decisión.

**Textura de fondo permitida:** un patrón sutil tipo mapa/topográfico en `--ink` sobre `--ink` (variación tonal casi imperceptible) únicamente en Bienvenida y Cierre — reinstala la metáfora de "territorio" sin volverse ilustrativo.

---

## 5. Movimiento

Con propósito, no decorativo:
- El punto de la ruta se llena con una transición corta al completar cada capítulo
- Los botones de opción tienen un estado de presión deliberado (no solo hover — el candidato está en celular)
- Nada de animaciones de entrada en cascada, nada de parallax, nada que sugiera "plantilla generada por IA"

Respeta `prefers-reduced-motion` en todas las animaciones.

---

## 6. PWA — íconos de instalación

Revisar que `manifest.json` tenga íconos reales (192px y 512px) con la nueva identidad, no el ícono por defecto. Esto importa para la demo: un prospecto instalando la PWA en su celular y viendo un ícono genérico resta más de lo que parece.

---

## 7. Prompt de arranque para Claude Code

> Aplica un rediseño visual completo a "Ruta al Cierre" usando tu skill de frontend-design. Es una capa cosmética — no toques lógica de negocio, endpoints, ni el esquema de BD. Sistema de diseño: paleta `--ink #12151C`, `--paper #EDEFEC`, `--route #2E7D6B`, `--close #C4432E`, `--graphite #5B5F66`. Tipografía: Space Grotesk para títulos, Inter para cuerpo (ya la usamos en el resto del ecosistema), JetBrains Mono para datos/puntajes en el panel. Elemento de firma obligatorio: una "ruta" trazada (SVG, trazo tipo dashed) que reemplaza cualquier progress bar genérico, con un punto por capítulo, presente en las pantallas de escenario del candidato y como mini-versión en cada fila del dashboard de reclutador. Set de íconos de línea simple para el campo `medio` de cada escenario — nada de mascotas, avatares, ilustración narrativa ni emojis funcionales, eso ya se descartó por validez aparente frente a candidatos a Gerente. Genera íconos reales de PWA (192px/512px) para `manifest.json`. Respeta `prefers-reduced-motion`. Al terminar, toma capturas de las pantallas principales (candidato: bienvenida, escenario, cierre; reclutador: dashboard, perfil con radar) y descríbeme qué cambió pantalla por pantalla antes de que yo pruebe en vivo.

---

*Esto no requiere migración de BD ni cambios en `db.sql` — es una intervención de CSS/assets/SVG sobre la estructura ya validada en producción.*