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

Eres un experto en desarrollo de aplicaciones web con dominio en HTML, CSS y JavaScript, especializado en experiencias educativas interactivas para adultos de 30 a 50 años.

Crea una aplicación PWA (Progressive Web App) en un único archivo HTML, completamente funcional, responsiva y visualmente impactante, titulada:

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

OBJETIVO GENERAL

Diseña una experiencia educativa inmersiva que explique de forma clara, atractiva y técnicamente sólida los fundamentos tácticos, dinámicos y visuales del balonmano para usuarios de 30 a 50 años. La propuesta debe evitar cualquier estética infantil o excesivamente juvenil y, en su lugar, adoptar un lenguaje visual maduro, profesional, tecnológico y contemporáneo.

PROPÓSITO PEDAGÓGICO

La aplicación debe:

- Explicar conceptos tácticos, posiciones, reglas y dinámica del balonmano con precisión, claridad y utilidad práctica.

- Organizar la información en bloques modulares que permitan exploración autónoma y no lineal.

- Favorecer la comprensión mediante interacción, señalización visual, jerarquía tipográfica y capas de información progresiva.

- Conectar los contenidos con situaciones reales, análisis del juego y toma de decisiones tácticas.

- Mantener equilibrio entre impacto visual y legibilidad, evitando elementos decorativos irrelevantes.

- Funcionar como una infografía educativa digital con estética premium, profesional y deportiva.

PÚBLICO OBJETIVO

Adultos de 30 a 50 años, con interés en aprendizaje práctico, comprensión clara, navegación autónoma y contenidos aplicables. El tono debe ser profesional, accesible, serio y estimulante, respetando la experiencia previa del usuario y facilitando una exploración a su propio ritmo.

ENFOQUE VISUAL Y DIDÁCTICO

La interfaz debe responder a criterios de educación para adultos y educación superior:

- Estructura modular o tipo dashboard.

- Lectura no lineal con navegación exploratoria.

- Contenido organizado por niveles de profundidad.

- Tipografía sans-serif limpia o profesional.

- Interacciones orientadas a exploración y profundización.

- Lenguaje informativo, claro, técnico y accesible.

- Diseño centrado en relevancia, comprensión rápida y aplicación práctica.

DISEÑO Y ESTILO VISUAL

Aplica estas reglas:

- Dark mode sofisticado por defecto, o apariencia híbrida oscura-profesional.

- Fondo principal en grafito, azul marino profundo o negro azulado.

- Acentos controlados en cian, verde petróleo, ámbar, naranja deportivo o azul eléctrico, evitando saturación excesiva.

- Estética inspirada en dashboards deportivos, sports analytics, visualización táctica y plataformas de formación profesional.

- Uso de glassmorphism sutil, paneles translúcidos, líneas luminosas discretas y profundidad visual elegante.

- Layout basado en Bento UI o grid dashboard.

- Tarjetas con jerarquía visual clara, escalas diferenciadas y zonas de foco.

- Iconografía lineal, táctica, geométrica o técnica.

- Diagramas deportivos, siluetas estilizadas y recursos visuales funcionales, evitando caricaturas.

- Composición limpia, sobria, tecnológica y de alta legibilidad.

ESTRUCTURA DE CONTENIDO

La aplicación debe incluir como mínimo estas secciones interactivas:

1. Portada o hero principal con título, subtítulo y llamada a la exploración.

2. Hub central o grilla Bento UI con acceso a:

   - Reglas básicas

   - La cancha

   - Posiciones

   - Jugadas tácticas

   - Datos rápidos

   - Aplicación práctica o autoevaluación

3. Panel de cancha con dimensiones, zonas y distribución visual.

4. Tarjetas interactivas de posiciones:

   - Portero

   - Extremo izquierdo

   - Extremo derecho

   - Lateral izquierdo

   - Lateral derecho

   - Central

   - Pivote

5. Sección de jugadas o dinámica del juego.

6. Mini panel de estadísticas o datos relevantes.

7. Cierre con resumen visual, ideas clave y mensaje final de aprendizaje.

FUNCIONALIDADES DESEADAS

La experiencia debe incluir:

- Un hub central estilo Bento UI para explorar temas.

- Tarjetas interactivas que revelen información adicional al hacer clic, hover o focus.

- Tarjetas flip 3D para mostrar frente y reverso con rol, funciones y datos clave.

- Paneles emergentes con transiciones suaves para ampliar conceptos.

- Microinteracciones visuales en botones, títulos, iconos y tarjetas, sin sobrecargar la experiencia.

- Contenido cargado desde objetos JSON simulados en JavaScript.

- Navegación fluida sin recargar la página.

- Modo mobile-first, cuidando rendimiento, legibilidad y facilidad de uso.

- Accesibilidad básica con buen contraste, focus visible y textos legibles.

- Secciones que permitan profundización voluntaria en reglas, táctica o análisis del juego.

COMPORTAMIENTO E INTERACCIÓN

Aplica las siguientes animaciones y efectos CSS de forma controlada y elegante:

- Tarjeta destacada con scale(1.03) y glow sutil.

- Glassmorphism con backdrop-filter: blur().

- Tarjeta flip con preserve-3d y rotateY(180deg).

- Hover con rotación ligera, cambios de iluminación y variación suave del borde.

- Títulos con efectos discretos mediante ::before y ::after.

- Módulo táctico 3D o cubo rotatorio para representar conceptos estratégicos.

- Aparición progresiva de paneles con opacity y translateY.

- Efectos de pulso, energía o recorrido de luz en conectores y separadores, con sobriedad.

- Animaciones fluidas, profesionales y no invasivas.

REFERENCIA ESTÉTICA CENTRAL

Toda la app debe inspirarse en la lógica visual de un mapa conceptual 3D vertical premium, futurista y educativo:

- Núcleo central impactante representando el concepto principal: balonmano.

- Ramas conectadas a conceptos secundarios mediante líneas finas luminosas o conectores holográficos elegantes.

- Entre 4 y 8 módulos flotantes alrededor del núcleo.

- Cada módulo con mini iconos, etiquetas claras y explicaciones breves fáciles de comprender.

- Sensación de estructura mental avanzada, claridad, inteligencia visual y aprendizaje inmersivo.

- Añadir un guía visual estilizado o asistente tecnológico discreto dentro de la interfaz, señalando ideas importantes o paneles de datos.

- Encabezado potente en la zona superior.

- Banda inferior elegante con resumen, palabras clave o takeaway táctico.

DATOS Y LÓGICA

- Usa HTML5, CSS3 avanzado, Bootstrap 5 y JavaScript vanilla.

- Separa visualmente la presentación de los datos.

- Simula carga dinámica mediante JSON local.

- Manipula el DOM para renderizar tarjetas, paneles y detalles sin recarga.

- El contenido debe estar bien estructurado para permitir mantenimiento futuro.

- Prioriza claridad, orden visual y facilidad de exploración.

REQUISITOS PWA

- Todo en un solo archivo HTML.

- Incluir manifest embebido mediante Data URI.

- Incluir lógica básica de service worker dentro de un bloque <script>.

- Debe ser instalable como PWA.

- La app debe responder bien en móviles, tablets y escritorio.

CRITERIOS DE CALIDAD

Asegúrate de que el resultado final:

- Sea completamente responsivo.

- Tenga apariencia premium, moderna y educativa.

- Evite estética infantil o excesivamente juvenil.

- Mantenga legibilidad alta en modo oscuro.

- Combine impacto visual con claridad didáctica.

- Use jerarquía clara, exploración intuitiva y profundidad progresiva de contenidos.

- Responda a un público adulto que valora utilidad, claridad, autonomía y aplicación práctica.

- Sea una experiencia visualmente atractiva, pero funcional como recurso pedagógico real.

ENTREGA FINAL

Devuelve únicamente el código completo en un solo archivo HTML, con CSS y JavaScript integrados, listo para ejecutar.