# PROMPT MAESTRO — "Operación Retórica Visual · UTP 2026"

## Rol

Actúa como **desarrollador front-end senior + diseñador instruccional**. Dominas HTML/CSS/JavaScript vanilla, animación con CSS y `requestAnimationFrame`, gamificación educativa y Diseño Universal para el Aprendizaje (DUA).

## Objetivo

Crea una **aplicación web educativa gamificada** para la asignatura **Semiótica Visual** de la Universidad Tecnológica del Perú (UTP), titulada **"Operación Retórica Visual"**. Enseña a analizar el discurso publicitario: **denotación/connotación**, **figuras retóricas**, y **funciones del texto (anclaje y relevo, Barthes)**, mediante una narrativa de "agencia de espionaje" dividida en misiones que los equipos resuelven en clase.

## Restricciones técnicas (obligatorias)

- **Un solo archivo** `operacion_retorica.html`, **autocontenido**: todo el CSS y el JavaScript van inline. **Sin dependencias externas, sin frameworks, sin build, sin CDN.**

- **100 % del lado del cliente**, funciona offline abriendo el archivo. No envía datos a ningún servidor.

- **Idioma de toda la interfaz: español.**

- Responsive (escritorio y móvil). Sin errores de consola; el JS debe parsear y ejecutarse limpio.

- Imágenes de afiches: usa seis identificadas como **A–F**; si las embebidas fallan, respaldo con archivos `A.jpg`…`F.jpg` en la misma carpeta (atributo `onerror`).

## Sistema de diseño

- **Estética:** indigenista / serigrafía peruana, tono "expediente de inteligencia". Bordes, texturas y títulos con `letter-spacing` amplio en mayúsculas.

- **Paleta (variables CSS `:root`):**

  - `--bg:#F0E6D2` · `--ink:#2C1810` · `--red:#8B2500` · `--purple:#1B3A5C`

  - `--gold:#C19A6B` · `--green:#3D5C3D` · `--blue:#2E4A62` · `--orange:#A0522D` · `--cream:#D4C4A8`

  - sombras: `--shadow:0 8px 32px rgba(44,24,16,.3)` y `--glow:0 0 20px rgba(193,154,107,.4)`

- **Tipografías (sistema, sin importar nada):** cuerpo `'Segoe UI', system-ui, sans-serif`; títulos/HUD `'Helvetica Neue', Helvetica, Arial, sans-serif` en mayúsculas.

- **Animaciones CSS** (define keyframes): `slideInUp`, `slideInLeft/Right`, `fadeScale`, `pulse`, `float`, `shimmer`, `confetti-fall`, `popIn`, `msgBounce`, `creatureShot`, `impactBurst`, `painFloat`, `scopePulse`, y una `cdPop` para la cuenta regresiva.

## Estructura general

Una sola página con **6 pantallas** conmutadas por JS (clase `.screen` + `.active`):

- **Pantalla 0 — Registro del equipo.**

- **Pantallas 1–5 — las 5 misiones.**

Elementos persistentes:

- **HUD superior** con puntaje (`hud-score`, formato `000000`).

- **Barra de progreso** con "pills" por misión (se desbloquean al completar la anterior).

- **Modal de briefing** al entrar a cada misión (texto narrativo del operativo).

- **Ticker** de avisos, **banner de logros**, y **confeti** en celebraciones.

- **Música ambiental** opcional (toggle) y **efectos de sonido** generados con la **Web Audio API** (`click`, `ok`, `bad`, `shot`), sin archivos de audio.

## Registro de equipo (pantalla 0)

- Selecciona **número de equipo (1–10)** y **carrera**: Diseño Gráfico, Diseño de Interiores, Diseño de Modas, Comunicación Audiovisual.

- **Estilo de avatar/alias**: Aleatorio, Bloque del Este (soviético), Bloque Occidental (espía), Operativo Andino.

- Hasta **4 integrantes**, cada uno con **nombres, apellidos, código y correo**; a cada uno se le asigna automáticamente un **alias de agente** según el estilo elegido.

- Validación: marca en rojo los campos faltantes; guarda todo en un objeto de estado `state.team = { equipo, carrera, miembros:[...] }`.

## Las 5 misiones (contenido)

1. **🔍 El Ojo del Agente** — Denotación vs. connotación. El equipo analiza afiches separando "lo que muestra" de "lo que sugiere" (respuestas abiertas) + preguntas de opción tipo "detective".

2. **💡 El Lenguaje que se Disfraza** — Utilidad retórica de la publicidad (p. ej. Derby 2010, Mundial FIFA 26): qué venden más allá del evento. Mezcla preguntas de opción y desarrollo.

3. **📚 El Manual del Agente** — Transformación retórica: **anclaje y relevo** (Barthes); análisis de un afiche y opción correcta.

4. **🎨 Taller Retórico** — Práctica creativa: el equipo propone su propio diseño (figura retórica, boceto, norma transgredida). Incluye **preguntas de elección libre** (brief y función del texto): **no hay respuesta correcta**; el sistema da feedback no evaluativo que invita a **justificar la decisión de diseño** (enfoque DUA), sugiriendo además un prompt de "abogado del diablo" con IA para iterar.

5. **🏆 Debriefing y Medallas** — Cierre metacognitivo: reflexiones finales, medallas/insignias, puntaje total y exportación del informe.

## Minijuego de la paloma mensajera (estilo "Duck Hunt")

Mecánica central que se dispara **al fallar una pregunta de opción** (no bloquea el avance, lo convierte en juego):

1. **Fase OBSERVACIÓN:** todos los personajes pasean por la pantalla. Crea un array `creatureTypes` con bandera `air` (vuela) / `isTarget` (lleva el mensaje). Incluye **varias aves** (palomas, cuervos, pájaro, águila) para generar confusión, más personajes terrestres (perro 🐕, gato 🐈, persona 👤). Solo **una paloma 🕊️ lleva el mensaje 📜** (`isTarget:true`).

   - **Aves vuelan por toda la pantalla** (movimiento horizontal+vertical con rebote en bordes, vía `requestAnimationFrame`).

   - **Perro, gato y persona caminan rápido de izquierda a derecha** en una franja a ~¾ de la altura (claramente visibles, no escondidos abajo). Voltean según su dirección (`scaleX`).

2. **Cuenta regresiva 3 · 2 · 1 · ¡YA!** (overlay animado) antes de habilitar el disparo.

3. **Fase DISPARO:** aparece una **mira telescópica** que sigue el cursor/touch. Al hacer clic:

   - Si aciertas la paloma con 📜: animación de captura, suma puntos, **revela la respuesta correcta y la marca automáticamente** en la pregunta, luego cierra el juego.

   - Si fallas: muestra "¡OUCH!" y una **"pregunta SORRY"** de repaso teórico; al responderla bien puede **repetir el paseo**.

- Solo se puede disparar en la fase de disparo; el movimiento se detiene al acertar/fallar o cerrar.

## Lógica de preguntas

- Preguntas de opción vía `confirmThenFeedback(el, qid, val, mensaje, 'correct'|'wrong')`:

  - **Correcta:** sella **solo las opciones de esa pregunta** (acótalas por su `qid`, **no** por el contenedor de la tarjeta, para no bloquear otras preguntas de la misma tarjeta), muestra feedback verde, suma puntaje y logro.

  - **Incorrecta:** pide reconsiderar (modal) y, al confirmar, abre el minijuego de la paloma para "cazar" la respuesta.

- Respuestas correctas en un objeto `correctAnswers`.

- Preguntas de **elección libre** (misión 4): handler propio que registra el valor y muestra feedback **neutral** (sin correcto/incorrecto), invitando a justificar.

## Puntaje, logros y cierre

- `addScore`, banner de logros, `showScorePop`, confeti, medallas en la misión 5.

## Exportación del informe (crítico, debe estar completo)

Botones **Imprimir PDF** (abre ventana imprimible) y **Descargar CSV**. El informe debe incluir, **sin omisiones**:

- **Datos del equipo** y **tabla de integrantes** con nombres, apellidos, código y correo (¡que los nombres aparezcan!).

- **Avance por misión.**

- **Tabla de respuestas CERRADAS:** respuesta del equipo, respuesta correcta y estado (correcta / incorrecta / sin responder); las de elección libre se marcan como "elección libre".

- **Respuestas ABIERTAS:** todas las áreas de desarrollo etiquetadas con su pregunta y el texto escrito por el equipo. **Escapa el HTML** del contenido del usuario.

- Pie con: *Universidad Tecnológica del Perú · UTP · Semiótica Visual · 2026 · Docente: Mg. Mario Quiroz Martínez · d3magindesign © 2026*.

## Calidad y entrega

- Código ordenado, funciones con nombres claros, comentarios solo donde el "porqué" no sea obvio.

- Accesible y usable en proyector de aula.

- **Entrega:** el archivo `operacion_retorica.html` completo y funcional.