Infografia para jovenes

 Para adaptar este *prompt* a un público de 15 a 21 años, es necesario abandonar el enfoque infantil (mascotas, colores primarios, Comic Sans, lectura estrictamente lineal) y evolucionar hacia una estética mucho más madura, tecnológica y dinámica. A esta edad, los usuarios responden mejor a diseños inspirados en interfaces de videojuegos deportivos (como FIFA/EA Sports), apps de fitness o dashboards de análisis de datos.

Además, corregí la sección de "Funcionalidades Deseadas" (que en tu original contenía un mensaje de error sobre un documento de ASP.NET) para que le pida a la IA características interactivas reales.

Aquí tienes el prompt actualizado y listo para usar:

---

**Eres un experto en desarrollo de aplicaciones web con dominio en HTML, CSS y JavaScript.**

Crea una aplicación PWA (Progressive Web App) con los siguientes requisitos:

### Nombre de la Aplicación

Infografía Interactiva: Dinámica y Táctica del Balonmano

### Propósito / Función Principal

El texto enfatiza que la función es lograr un diseño efectivo, atractivo y estimulante para jóvenes y adultos jóvenes. Aplicando los criterios de la clase al tema del balonmano, la infografía tendrá los siguientes propósitos específicos:

* **Transmitir conceptos tácticos y dinámicos:** Explicar no solo reglas básicas, sino estrategias, posiciones y el ritmo del juego con información precisa, estructurada y directa.

* **Conectar mediante la estética deportiva:** Captar la atención usando un tono dinámico y moderno (inspirado en la interfaz de videojuegos deportivos, estadísticas o apps de rendimiento físico).

* **Facilitar la exploración visual interactiva:** Permitir una lectura no lineal. El usuario debe poder explorar la información a su propio ritmo interactuando con paneles, modales o tarjetas 3D, descubriendo capas de información más profundas al hacer clic o *hover*.

* **Retener la atención con microinteracciones:** Usar efectos visuales avanzados (vidriomorfismo, elementos 3D, expansiones) para premiar la interacción y hacer el aprendizaje inmersivo, manteniendo la interfaz limpia.

### Público Objetivo

Jóvenes de 15 a 21 años.

### Funcionalidades Deseadas

La infografía debe comportarse como una experiencia web inmersiva que incluya:

* Un **hub central o grilla (estilo Bento UI)** desde donde el usuario pueda explorar diferentes aspectos del balonmano (Reglas, La Cancha, Posiciones, Jugadas).

* **Tarjetas interactivas** para cada posición de jugador que revelen estadísticas o roles específicos al interactuar con ellas.

* Uso intensivo de animaciones CSS avanzadas para dar retroalimentación visual inmediata a las acciones del usuario.

* Diseño "Dark Mode" (modo oscuro) por defecto para resaltar los colores y las animaciones brillantes.

### Diseño y Estilo Visual

El diseño y estilo visual de la infografía debe seguir estas directrices:

* **Complejidad visual y contenido:** Diseño modular o de "dashboard". La información se organiza en capas: un resumen visual impactante en la superficie y detalles técnicos (como las dimensiones de la cancha o faltas específicas) que se revelan al interactuar.

* **Tipografía:** Se deben utilizar fuentes sans-serif modernas, geométricas y de aspecto tecnológico (por ejemplo, Montserrat, Roboto, Poppins o Inter). Títulos en negrita e itálica para dar sensación de velocidad y movimiento, con un tamaño de cuerpo de texto de al menos 16px para legibilidad.

* **Paleta cromática:** Esquemas de alto contraste. Se exige un "Dark Mode" (fondos oscuros en grises profundos o azul marino) con acentos de colores vibrantes o neón (cian, naranja eléctrico, verde lima o magenta) para un aspecto energético y "gamer".

* **Iconografía e ilustración:** Estilo urbano, isométrico o de siluetas dinámicas. En lugar de dibujos animados, usar vectores estilizados que transmitan movimiento, atletismo y precisión geométrica (ej. diagramas tácticos reales o jugadores en suspensión).

* **Estructura visual:** Disposición en bloques o cuadrículas (grids) donde el usuario elige qué explorar. La jerarquía se marca con el tamaño de las tarjetas y el uso del color.

* **Tono visual e interactividad:** Serio, competitivo y estimulante. Las ilustraciones deben parecerse a gráficos de análisis deportivo ("sports analytics").

### Interacción y Comportamiento

Emplea las siguientes animaciones y efectos CSS para enriquecer la experiencia interactiva de los jóvenes:

* **Tarjeta holográfica:** Aplica un efecto de escala (`transform: scale(1.05)`) y una sombra brillante (`box-shadow: 0 0 20px rgba(0, 255, 255, 0.5)`) al pasar el cursor sobre elementos clave.

* **Morfo líquido:** Al pasar el cursor, botones o iconos reducen el radio de su borde y aplican una rotación (15deg).

* **Efecto de texto explosivo:** Usa los pseudoelementos `::before` y `::after` para crear un efecto de degradado radial, aumento de escala y rotación en los títulos principales al pasar el cursor.

* **Tarjeta de doble cara:** Emplea `transform-style: preserve-3d` y `rotateY(180deg)` para crear tarjetas que, al girar, muestren información adicional (por ejemplo, frente: silueta del jugador; reverso: estadísticas de la posición).

* **Tarjeta de vidriomorfosis (Glassmorphism):** Añade un efecto de cristal esmerilado a los contenedores usando la propiedad `backdrop-filter: blur()`, fondos translúcidos y bordes brillantes.

* **Cubo giratorio:** Usa propiedades como `translateZ`, `rotateX` y `rotateY` para mostrar conceptos tácticos en un cubo 3D interactivo.

* **Efecto de desplazamiento y volcado:** Aplica `transform: rotateY` para girar iconos o botones 360 grados sobre el eje Y.

* **Menú y paneles emergentes:** Usa transiciones suaves (`opacity` y `transform: translateY`) para mostrar menús o revelar datos ocultos.

### Tecnologías y Estructura

Estructura arquitectónica (Simulada para frontend puro en este caso, basándose en principios modernos):

* En el lado del cliente, las tecnologías fundamentales serán HTML5, CSS3 avanzado (con Grid y Flexbox) y Vanilla JavaScript.

* Si se requiere simular la carga de datos (como estadísticas de balonmano), utiliza el formato JSON (JavaScript Object Notation), manipulando el DOM de forma dinámica.

* La lógica de presentación debe estar completamente separada de los datos, simulando un entorno de consultas asíncronas para actualizar la interfaz sin recargar la página.

### Instrucciones Finales

* Entrega toda la aplicación en un **único archivo HTML** listo para ejecutarse (con el CSS y JS integrados).

* Usa **Bootstrap 5** para la estructura base, complementado con el CSS personalizado para las animaciones mencionadas.

* Incluye lógica básica de Service Worker (en bloque `<script>`) y un `manifest.json` embebido mediante Data URI para que funcione como una PWA.

* Asegúrate de que el diseño sea **completamente responsivo**, adaptando las grillas y los efectos 3D perfectamente a pantallas de teléfonos móviles.