Módulo 1 — Wireframe técnico e instrucciones para el agente del repositorio

1. Arquitectura general

Ruta

/app/paidar/unam/

Comportamiento

SPA-like wizard (una sola página, múltiples "pantallas" / steps).
Sin recarga de página entre pantallas.
Barra de progreso visible en todo momento.
Mobile-first (la mayoría de Operativos accederá desde celular).

Flujo de pantallas

[Lobby /unam/]
    │
    ▼
[Pantalla 1: Bienvenida + Perfil]
    │
    ▼
[Pantalla 2: Percepciones]
    │
    ▼
[Pantalla 3: Antigüedad]
    │
    ▼
[Pantalla 4: Deducciones]
    │
    ▼
[Pantalla 5: Neto y Margen]
    │
    ▼
[Pantalla 6: Resultados + Puente M2]

2. Mecanismo de personalización por perfil

Jerarquía de fuentes (prioridad)

1. URL param  →  ?p=operativo | ?p=administrativo | ?p=academico
2. localStorage  →  paidar_unam_profile (si existe y no expiró)
3. Selector  →  Pantalla 1 del módulo (usuario elige)

Reglas

Si ?p= está presente → se usa ese valor, se guarda en localStorage, se salta confirmación en Pantalla 1 (solo muestra texto de bienvenida + botón "Empezar").
Si no hay ?p= pero hay localStorage válido (< 30 días) → se precarga ese perfil, pero se muestra confirmación suave: "La última vez elegiste Operativo. ¿Es correcto?" [Sí / Cambiar].
Si no hay nada → Pantalla 1 completa (selector de perfil).

Almacenamiento

// Al elegir perfil
localStorage.setItem('paidar_unam_profile', JSON.stringify({
  profile: 'operativo',   // operativo | administrativo | academico
  ts: Date.now()
}));

// Al leer: validar que ts < 30 días

Expiración

30 días. Si expiró, se borra y se trata como "sin perfil".

Parámetro `ref` (tracking, separado del perfil)

?ref=dxn_mant, ?ref=qr_poster, etc.
Se guarda en localStorage como paidar_unam_ref.
Se envía junto con el lead al final.
NO afecta personalización de contenido.

3. Estructura de datos del contenido

Archivo de contenido recomendado

src/_data/markets/unam/modulo1.json

Schema sugerido

{
  "moduleId": "m1",
  "title": "Fundamentos de Nómina UNAM",
  "duration": "6–8 min",
  "screens": [
    {
      "id": "s1",
      "title": "Bienvenida + Perfil",
      "objective": "Identificar perfil para personalizar",
      "lesson": {
        "universal": "Texto de bienvenida…"
      },
      "postSelection": {
        "operativo": "Texto operativo…",
        "administrativo": "Texto administrativo…",
        "academico": "Texto académico…"
      },
      "questions": [
        {
          "id": "q1",
          "text": "¿Cuál se parece más a tu función?",
          "type": "single",
          "options": [
            { "value": "operativo", "label": "Operativo…" },
            { "value": "administrativo", "label": "Administrativo…" },
            { "value": "academico", "label": "Académico…" }
          ]
        }
      ]
    }
  ],
  "glossary": [
    { "term": "Percepciones", "definition": "…" }
  ],
  "scoring": {
    "claridad": { },
    "margen": { },
    "capacidad": { },
    "antiguedad": { },
    "alertas": { }
  }
}

Nota: El contenido completo de cada screen, question, lesson y copy por perfil está en el archivo modulo-1-contenido.md. Este schema es la estructura técnica para consumirlo.

4. Componentes por pantalla

4.1 Componente: ProgressBar

Muestra step actual / total (ej. "2 de 6").
Barra visual de progreso.
Siempre visible (top).

4.2 Componente: ScreenLayout

┌─────────────────────────────┐
│  ProgressBar                │
├─────────────────────────────┤
│  Título de pantalla         │
├─────────────────────────────┤
│  Microlección (texto)       │
│  [Ejemplos por perfil]      │
├─────────────────────────────┤
│  Pregunta(s)                │
│  [Opciones: radio/check]    │
├─────────────────────────────┤
│  Microtip (colapsable)      │
├─────────────────────────────┤
│  [Botón: Siguiente →]       │
└─────────────────────────────┘

4.3 Componente: ProfileBadge

Pequeño badge visible (esquina sup. derecha o bajo ProgressBar).
Muestra perfil activo: "Operativo ✓ (cambiar)".
Click en "cambiar" → regresa a Pantalla 1.

4.4 Componente: MicrotipCard

Ícono 💡 + texto breve.
Inicia colapsado (solo ícono + "Ver más").
Se expande al hacer click/tap.

4.5 Componente: ResultCard (para Pantalla 6)

┌─────────────────────────────┐
│  🟢 / 🟡 / 🔴              │
│  Título del semáforo        │
│  Descripción (2 líneas)     │
└─────────────────────────────┘

3 ResultCards: Claridad, Margen, Capacidad.

4.6 Componente: BenefitsTeaser (colapsable, Pantalla 6)

┌─────────────────────────────┐
│  📋 Beneficios que ya tienes│
│  ▸ Seguro colectivo de vida │
│  ▸ Pago de marcha           │
│  ▸ Fondo de retiro          │
│  ▸ Prestaciones periódicas  │
│  (texto completo colapsado) │
└─────────────────────────────┘

4.7 Componente: CTABlock (Pantalla 6)

┌─────────────────────────────┐
│  [Continuar al Módulo 2]    │  ← Botón primario
│  [Enviarme mi radiografía]  │  ← Botón secundario
└─────────────────────────────┘

5. Gestión de estado (State Management)

Qué se almacena durante el flujo

const moduleState = {
  profile: 'operativo',        // Q1 o precargado
  ref: 'dxn_mant',             // de URL param
  answers: {
    q1: 'operativo',
    q2: 'a_veces',
    q3: '5_10',
    q4: '1_2',
    q5: ['prestamo', 'ahorro'],
    q6: 'no',
    q7: '10_30',
    q8: 'nomina'
  },
  scores: {
    claridad: 'amarillo',
    margen: 'medio',
    capacidad: '250_500',
    antiguedad_msg: '…',
    alertas: []
  },
  completedAt: null,            // timestamp al terminar
  contactCaptured: false
};

Se persiste en localStorage como paidar_unam_m1_state.
Se limpia/actualiza si el usuario reinicia el módulo.
Al completar: completedAt = Date.now().

6. Lógica de scoring (pseudocódigo)

// ── SEMÁFORO DE CLARIDAD ──
if q2 == "no_casi_nunca" AND q4 != "no_seguro" AND q5.length > 0:
    claridad = "verde"
elif q2 == "si_seguido" AND (q4 == "no_seguro" OR "no_se" in q5):
    claridad = "rojo"
else:
    claridad = "amarillo"

// ── SEMÁFORO DE MARGEN ──
if q7 == "mayor_30" AND q6 == "no":
    margen = "alto"
elif q7 == "menor_10" OR (q4 == "3_mas" AND q6 == "si"):
    margen = "bajo"
else:
    margen = "medio"

// ── CAPACIDAD DE PRIMA ──
switch margen:
    "bajo"  → capacidad = "$100–$250"
    "medio" → capacidad = "$250–$500"
    "alto"  → capacidad = "$500+"

// ── ALERTA DE DEDUCCIONES ──
alertas = []
if q4 == "3_mas":
    alertas.push("Tienes 3+ compromisos activos en nómina…")
if q6 == "si":
    alertas.push("Las deudas con interés fuera de nómina…")

// ── MENSAJE DE ANTIGÜEDAD ──
switch q3:
    "menos_5"  → msg = "Tu compensación se acumula…"
    "5_10"     → msg = "Ya deberías ver un extra…"
    "11_20"    → msg = "Tu antigüedad ya representa…"
    "mas_20"   → msg = "Con más de 20 años, tu %…"

7. Personalización visual (CSS Variables por mercado)

En el layout base (`paidar-unam.njk`):

<style>
  :root {
    --paidar-primary: #0B3D91;       /* Azul UNAM */
    --paidar-primary-light: #1A5BB5;
    --paidar-accent: #C5A03F;        /* Dorado UNAM */
    --paidar-bg: #F8F9FA;
    --paidar-text: #1A1A2E;
    --paidar-success: #28A745;
    --paidar-warning: #FFC107;
    --paidar-danger: #DC3545;
  }
</style>

Tema por perfil (opcional, sutil):

Solo cambia un accent o un gradiente del hero para diferenciar visualmente.
No es indispensable para MVP.

8. Consideraciones responsive (Mobile-first)

Operativos (prioridad: celular)

Botones grandes (min-height: 48px, idealmente 56px).
Texto ≥ 16px.
Opciones tipo "card" clickeable (no radio buttons pequeños).
Scroll vertical simple.

Administrativos (celular + desktop)

Mismo layout, se beneficia de más espacio para microtips.

Académicos (puede ser desktop)

Layout funciona igual; el contenido es un poco más denso.
Microtips pueden mostrarse expandidos por defecto en desktop.

Breakpoints sugeridos

/* Mobile */  max-width: 640px
/* Tablet */  641px – 1024px
/* Desktop */ 1025px+

9. Navegación y transiciones

Entre pantallas

Botón "Siguiente →" (habilitado solo cuando la pregunta obligatoria tiene respuesta).
Botón "← Anterior" (siempre visible excepto en Pantalla 1).
Transición suave (fade o slide-left, 200–300ms).

Pantalla 6 → Módulo 2

Botón primario: "Continuar al Módulo 2" → navega a /app/paidar/unam/m2 (o cambia estado del wizard a módulo 2).
Guarda m1_completed: true en localStorage.

10. Captura de contacto (lead capture)

¿Cuándo?

En Pantalla 6, botón secundario: "Enviarme mi radiografía".
Modal o inline form:
- Nombre (texto)
- WhatsApp o correo (uno basta)
- Perfil (precargado, solo confirmar)
- Método de pago preferido (precargado de Q8)

¿Qué se envía?

Datos de contacto + moduleState.scores + profile + ref.

Integración futura (Pipedrive)

Pipeline: UNAM Nómina
Etapa: "PAIDAR First – M1 completado"
Tags: UNAM-{profile}
Campos custom:
- Claridad: verde / amarillo / rojo
- Margen: alto / medio / bajo
- CapacidadPrima: rango
- PagoPreferido: nómina / tarjeta
- Ref: valor de ref param
Nota del deal: resumen automático del diagnóstico

Para MVP: guardar en localStorage y/o enviar por webhook simple. Pipedrive se integra en Sprint 2.

11. Resumen de archivos a crear / modificar

Nuevos

Archivo	Propósito
`src/_data/markets/unam/modulo1.json`	Contenido: pantallas, copy por perfil, preguntas, opciones, glosario, scoring rules
`src/app/paidar/unam/index.njk`	Lobby / policía de tránsito
`src/app/paidar/unam/m1.njk`	Template del Módulo 1 (wizard)
`src/_includes/components/paidar/progress-bar.njk`	Barra de progreso
`src/_includes/components/paidar/screen-layout.njk`	Layout de pantalla (lesson + question + tip)
`src/_includes/components/paidar/profile-badge.njk`	Badge de perfil activo
`src/_includes/components/paidar/microtip-card.njk`	Tarjeta de tip colapsable
`src/_includes/components/paidar/result-card.njk`	Tarjeta de resultado (semáforo)
`src/_includes/components/paidar/benefits-teaser.njk`	Teaser de beneficios institucionales
`src/_includes/components/paidar/cta-block.njk`	Bloque de CTAs
`src/_includes/layouts/paidar-unam.njk`	Layout de PAIDAR UNAM (hereda de base)
`src/assets/paidar/unam/styles.css`	CSS específico UNAM (variables, overrides)
`src/assets/paidar/shared/wizard.js`	JS del wizard (navegación, estado, scoring, personalización)

Existentes a modificar (posiblemente)

Archivo	Cambio
`src/_includes/layouts/paidar-minimal-base.njk`	Crear si no existe; layout base compartido
`src/_data/markets/unam.json`	Agregar metadata del mercado (theme, profiles, routes)

12. Orden de implementación sugerido (3 sprints)

Sprint 1 — Estructura + Lobby + Pantallas 1–5 (5–7 días)

Crear estructura de archivos.
Implementar lobby (/unam/) con selector de perfil.
Implementar mecanismo ?p= + localStorage.
Construir wizard (navegación entre pantallas).
Pantallas 1–5 con contenido de modulo1.json.
CSS base + variables UNAM.

Sprint 2 — Resultados + Scoring + Lead capture (3–5 días)

Implementar lógica de scoring (JS).
Pantalla 6: ResultCards + BenefitsTeaser + CTABlock.
Modal/form de captura de contacto.
Persistencia en localStorage.
Envío básico (webhook o email).

Sprint 3 — Pulido + Integración (3–5 días)

Transiciones y animaciones.
Responsive testing (celular prepago / baja resolución).
Integración Pipedrive (o preparación del payload).
QA por perfil (3 recorridos completos).
Deploy a producción.

13. Criterios de aceptación (QA checklist)

[ ] El lobby /app/paidar/unam/ funciona sin parámetros (muestra selector).
[ ] Con ?p=operativo se salta selector y muestra bienvenida personalizada.
[ ] El perfil se guarda en localStorage y se recupera en visitas posteriores.
[ ] localStorage expira a 30 días.
[ ] Las 6 pantallas se navegan correctamente (siguiente/anterior).
[ ] El botón "Siguiente" se habilita solo con respuesta obligatoria.
[ ] El copy cambia según perfil (verificar los 3).
[ ] Los microtips se colapsan/expanden correctamente.
[ ] El scoring genera semáforos correctos (probar 5+ combinaciones).
[ ] La capacidad de prima se muestra según el margen calculado.
[ ] El bloque de beneficios institucionales se colapsa/expande.
[ ] El CTA "Enviarme mi radiografía" abre captura de contacto.
[ ] Los datos se persisten en localStorage al completar.
[ ] Mobile: botones ≥ 48px, texto ≥ 16px, scroll fluido.
[ ] El "cambiar perfil" en ProfileBadge funciona sin perder respuestas anteriores (o las reinicia limpiamente).

Módulo 1 — Wireframe técnico e instrucciones para el agente del repositorio

1. Arquitectura general

Ruta

Comportamiento

Flujo de pantallas

2. Mecanismo de personalización por perfil

Jerarquía de fuentes (prioridad)

Reglas

Almacenamiento

Expiración

Parámetro ref (tracking, separado del perfil)

3. Estructura de datos del contenido

Archivo de contenido recomendado

Schema sugerido

4. Componentes por pantalla

4.1 Componente: ProgressBar

4.2 Componente: ScreenLayout

4.3 Componente: ProfileBadge

4.4 Componente: MicrotipCard

4.5 Componente: ResultCard (para Pantalla 6)

4.6 Componente: BenefitsTeaser (colapsable, Pantalla 6)

4.7 Componente: CTABlock (Pantalla 6)

5. Gestión de estado (State Management)

Qué se almacena durante el flujo

6. Lógica de scoring (pseudocódigo)

7. Personalización visual (CSS Variables por mercado)

En el layout base (paidar-unam.njk):

Tema por perfil (opcional, sutil):

8. Consideraciones responsive (Mobile-first)

Operativos (prioridad: celular)

Administrativos (celular + desktop)

Académicos (puede ser desktop)

Breakpoints sugeridos

9. Navegación y transiciones

Entre pantallas

Pantalla 6 → Módulo 2

10. Captura de contacto (lead capture)

¿Cuándo?

¿Qué se envía?

Integración futura (Pipedrive)

11. Resumen de archivos a crear / modificar

Nuevos

Existentes a modificar (posiblemente)

12. Orden de implementación sugerido (3 sprints)

Sprint 1 — Estructura + Lobby + Pantallas 1–5 (5–7 días)

Sprint 2 — Resultados + Scoring + Lead capture (3–5 días)

Sprint 3 — Pulido + Integración (3–5 días)

13. Criterios de aceptación (QA checklist)

Parámetro `ref` (tracking, separado del perfil)

En el layout base (`paidar-unam.njk`):