Prompt para Investigación Noveno

 Actúa como un equipo multidisciplinario conformado por un desarrollador Senior Front-End, un diseñador UX/UI, un especialista en visualización de datos, un diseñador de experiencias interactivas y un experto en SVG, HTML5, CSS3 y JavaScript ES6.

El objetivo es desarrollar una aplicación web interactiva que represente un Árbol de Problemas, con una calidad visual comparable a una infografía digital profesional o a una experiencia interactiva de museo. No quiero un árbol hecho con figuras geométricas básicas ni una página HTML sencilla. Quiero una aplicación moderna, inmersiva, elegante y altamente interactiva. Contexto El problema central corresponde al diagnóstico comunitario del barrio Robledo Aures II (Medellín, Colombia). Problema central: Drogadicción La aplicación debe representar gráficamente la relación entre: causas (raíces) problema central (tronco) consecuencias (copa del árbol) Debe servir como material para una socialización comunitaria. Calidad esperada El resultado debe parecer desarrollado por un estudio profesional de desarrollo web. No quiero un ejercicio académico. Quiero una experiencia visual que sorprenda al usuario. Arquitectura Organiza el proyecto así: ArbolProblemas/ index.html style.css script.js assets/ images/ icons/ sounds/ fonts/ README.md Todo debe estar organizado y comentado. Tecnologías permitidas HTML5 CSS3 SVG JavaScript ES6 No usar Bootstrap. No usar jQuery. No usar frameworks. Todo debe ser Vanilla JavaScript. Diseño general La página debe ocupar el 100 % de la pantalla. El árbol debe estar completamente centrado. Debe adaptarse a: PC Tablet Celular Pantallas grandes Fondo Crear un paisaje ilustrado mediante SVG. Debe incluir: cielo degradado sol nubes animadas montañas césped flores pájaros mariposas pequeñas partículas flotando viento No utilizar imágenes descargadas. Todo debe construirse mediante SVG y CSS. Árbol El árbol debe parecer ilustrado. No usar círculos ni rectángulos. Debe tener: tronco con textura ramas hojas raíces sombras profundidad efecto 3D ligero Animaciones Agregar animaciones suaves: hojas moviéndose ramas balanceándose raíces creciendo al cargar viento brillo de hojas partículas pequeños destellos transiciones suaves Nada debe moverse de forma brusca. Problema central En el tronco debe aparecer: "Drogadicción" Al hacer clic: el tronco debe iluminarse hacer un pequeño pulso mostrar una ventana emergente elegante explicar el problema Raíces (Causas) Propón causas coherentes con el contexto de Robledo Aures II. Ejemplo: Escasas oportunidades culturales Microtráfico Presión de pares Deserción escolar Conflictos familiares Violencia intrafamiliar Problemas económicos Baja oferta deportiva Falta de proyectos juveniles Cada raíz debe ser un nodo interactivo. Al pasar el mouse: se ilumina crece ligeramente cambia de color Consecuencias Diseñar consecuencias como hojas grandes. Ejemplo: Violencia Inseguridad Problemas de salud mental Desempleo Deserción escolar Ruptura familiar Delincuencia Estigmatización Pérdida del proyecto de vida Cada hoja debe ser interactiva. Relaciones Al seleccionar una causa: dibujar una línea luminosa que recorra la raíz suba por el tronco llegue al problema continúe hacia todas las consecuencias relacionadas Debe verse como si la información "viajara" por el árbol. Panel lateral Crear un panel Glassmorphism. Debe contener: Título Descripción Icono Color temático Ejemplos Posibles soluciones Debe aparecer con animación. Soluciones Agregar un botón: "Ver posibles soluciones" Que cambie el árbol de problemas por un: Árbol de Objetivos mediante una animación. Las causas deben convertirse en medios. Las consecuencias en fines. El problema en un objetivo positivo. Modo exploración Permitir: Zoom Arrastrar el árbol Recentrar Pantalla completa Efectos visuales Agregar: Glow Glassmorphism Sombras suaves Blur Gradientes Hover modernos Ripple effect Fade Scale Rotaciones leves Sonidos Agregar sonidos opcionales: viento hojas clic campanas suaves Debe existir un botón para activar/desactivar sonido. Accesibilidad Compatible con teclado. Compatible con lectores de pantalla. Contraste adecuado. Texto legible. Navegación mediante TAB. Rendimiento Animaciones mediante requestAnimationFrame. Optimizar SVG. No bloquear el navegador. Mantener más de 60 FPS. Código Todo el código debe estar: comentado modularizado legible profesional sin duplicaciones siguiendo buenas prácticas. Extras deseados Agregar al menos diez de los siguientes: ✔ Cambio automático día/noche ✔ Lluvia ocasional ✔ Pájaros volando ✔ Mariposas ✔ Hojas cayendo ✔ Efecto parallax ✔ Cursor personalizado ✔ Minimap del árbol ✔ Tutorial inicial ✔ Botón "Reiniciar recorrido" ✔ Estadísticas animadas ✔ Cronología del problema ✔ Modal con imágenes ✔ Buscador de causas ✔ Exportar como PDF ✔ Exportar como PNG ✔ Compartir ✔ Impresión optimizada ✔ Modo oscuro ✔ Modo presentación ✔ Animación de bienvenida ✔ Carga con barra de progreso ✔ Tooltip elegante ✔ Breadcrumb de navegación ✔ Botón "Volver al árbol" ✔ Indicador de progreso Resultado esperado Quiero recibir un proyecto completamente funcional, listo para abrir en el navegador, sin errores. No omitas código. No simplifiques la implementación. No utilices marcadores como "continúa aquí" o "..." para abreviar. Entrega todos los archivos completos. El diseño debe tener una calidad comparable con sitios como Apple, National Geographic, Google Arts & Culture o una visualización interactiva de alto nivel.