PROMPT COMPLETO PARA RECREAR LA APLICACIÓN:

Necesito que crees una aplicación web COMPLETA en un SOLO archivo HTML que sea una línea de tiempo interactiva sobre la historia de la computación y la tecnología. La aplicación debe ser SUPER interactiva, hermosa, responsive y educativa.

REQUISITOS TÉCNICOS:
- Todo en UN SOLO archivo HTML (HTML, CSS, JavaScript inline)
- Usar CDNs para las librerías externas
- Totalmente responsive para móviles, tablets y desktop
- Sin dependencias de servidor

LIBRERÍAS A INCLUIR (via CDN):
1. Three.js (https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js) - Para fondo 3D animado
2. GSAP (https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js) - Para animaciones profesionales
3. Chart.js (https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.4.0/chart.umd.js) - Para gráficos interactivos

ESTRUCTURA Y DISEÑO:

1. HEADER:
   - Título principal con gradiente animado (morado, azul, rosa)
   - Subtítulo descriptivo
   - Efecto de texto brillante

2. CONTROLES DE FILTRADO:
   - Botones para filtrar por categorías: Todos, Hardware, Software, Internet, IA, Móvil, Gaming
   - Botón de modo oscuro/claro con persistencia en localStorage
   - Botón de activar/desactivar sonidos
   - Diseño glassmorphism con backdrop-filter

3. ESTADÍSTICAS ANIMADAS:
   - 4 tarjetas con contadores animados:
     * Años de Historia
     * Eventos Importantes
     * Innovadores
     * Tecnologías
   - Animación de conteo al cargar
   - Hover effects con transformaciones 3D

4. LÍNEA TEMPORAL CENTRAL:
   - Línea vertical central con gradiente y efecto glow
   - Ancho de 8px para buena visibilidad
   - Animación de pulso luminoso que recorre la línea
   - Efectos de partículas al interactuar

5. EVENTOS DE LA LÍNEA TEMPORAL:
   Incluir MÍNIMO 80 eventos desde 1614 hasta 2024, organizados por eras:
   
   ERA MECÁNICA (1614-1890):
   - Logaritmos de Napier (1614)
   - La Pascalina (1642)
   - Calculadora de Leibniz (1673)
   - Telar de Jacquard (1801)
   - Máquina Analítica de Babbage (1837)
   - Primer Algoritmo de Ada Lovelace (1843)
   - Máquina Tabuladora de Hollerith (1890)

   ERA ELECTROMECÁNICA (1936-1945):
   - Máquina de Turing (1936)
   - Computadora Z1 de Zuse (1937)
   - Colossus (1943)
   - Harvard Mark I (1944)

   ERA ELECTRÓNICA (1946-1970):
   - ENIAC (1946)
   - Transistor (1947)
   - UNIVAC I (1951)
   - Primer Disco Duro IBM (1956)
   - FORTRAN (1957)
   - Circuito Integrado (1958)
   - BASIC (1964)
   - Ley de Moore (1965)
   - ARPANET (1969)
   - UNIX (1969)

   ERA DEL MICROPROCESADOR (1971-1980):
   - Intel 4004 (1971)
   - Primer Email (1971)
   - Lenguaje C (1972)
   - Pong de Atari (1972)
   - Ethernet (1973)
   - Primer móvil Motorola (1973)
   - Altair 8800 (1975)
   - Microsoft (1975)
   - Apple I (1976)
   - Apple II (1977)

   ERA DEL PC (1981-1992):
   - IBM PC (1981)
   - MS-DOS (1981)
   - TCP/IP e Internet (1983)
   - Macintosh (1984)
   - Windows 1.0 (1985)
   - Nintendo NES (1985)
   - World Wide Web (1989)
   - Linux (1991)

   ERA DE INTERNET (1993-2003):
   - Navegador Mosaic (1993)
   - Amazon (1994)
   - JavaScript (1995)
   - Windows 95 (1995)
   - DVD (1996)
   - Deep Blue vence a Kasparov (1997)
   - Google (1998)
   - Napster (1999)
   - Wikipedia (2001)
   - iPod (2001)
   - MySpace (2003)

   ERA MÓVIL Y SOCIAL (2004-2010):
   - Facebook (2004)
   - YouTube (2005)
   - Twitter (2006)
   - iPhone (2007)
   - Android (2008)
   - App Store (2008)
   - Bitcoin (2009)
   - iPad (2010)
   - Instagram (2010)

   ERA DE IA Y DATOS (2011-2024):
   - Siri (2011)
   - Deep Learning Revolution (2012)
   - Alexa (2014)
   - TensorFlow (2015)
   - AlphaGo (2016)
   - Transformers (2017)
   - GDPR (2018)
   - 5G (2019)
   - Supremacía Cuántica (2019)
   - GPT-3 (2020)
   - Metaverso (2021)
   - NFTs (2021)
   - ChatGPT (2022)
   - IA Generativa Masiva (2023)
   - AGI en el Horizonte (2024)

6. ESTRUCTURA DE CADA EVENTO:
   ```javascript
   {
     year: año,
     title: "Título del evento",
     description: "Descripción breve",
     category: "hardware|software|internet|ai|mobile|gaming",
     technologies: ["Tech1", "Tech2"],
     details: "Descripción detallada para el modal",
     innovator: "Nombre del innovador",
     image: "emoji representativo",
     era: "Nombre de la era"
   }
   ```

7. TARJETAS DE EVENTOS:
   - Diseño alternado izquierda/derecha
   - Tamaño compacto (max-width: 480px)
   - Padding de 1rem
   - Border-radius de 12px
   - Hover effect con scale y shadow
   - Click para abrir modal con detalles

8. MODAL DE DETALLES:
   - Información completa del evento
   - Diseño elegante con gradientes
   - Botón de cerrar animado
   - Backdrop blur effect
   - Animación slideUp al abrir

9. NAVEGACIÓN POR AÑOS:
   - Barra lateral derecha con puntos de navegación
   - Tooltips con décadas
   - Scroll suave al hacer click
   - Indicador de posición actual

10. FONDO 3D ANIMADO:
    - Sistema de partículas con Three.js
    - 2000 partículas de colores
    - Líneas conectoras entre partículas
    - Efecto parallax con el mouse
    - Rotación continua

11. GRÁFICO INTERACTIVO:
    - Chart.js mostrando evolución de transistores y velocidad
    - Escala logarítmica
    - Tooltips informativos
    - Gradientes en las líneas
    - Responsive

12. EFECTOS ESPECIALES:
    - Partículas al hacer click (30 partículas de colores)
    - Animaciones GSAP para entrada de elementos
    - Progress bar en la parte superior
    - Fun facts que aparecen cada 15 segundos
    - Sonidos opcionales con Web Audio API

13. DATOS CURIOSOS (Fun Facts):
    Incluir al menos 25 datos curiosos que roten, como:
    - "El primer bug fue una polilla real"
    - "Google se iba a llamar BackRub"
    - "El @ se eligió porque no aparecía en nombres"
    [... incluir todos los 25 fun facts ...]

14. CARACTERÍSTICAS ADICIONALES:
    - LocalStorage para preferencias (modo oscuro)
    - Intersection Observer para animaciones al scroll
    - Teclado: ESC cierra modales, flechas para navegar
    - Contador de estadísticas actualizable por filtros
    - Scrollbar personalizado con gradiente

15. INDICADORES DE ERA:
    - Separadores visuales entre eras históricas
    - Título de era con diseño glassmorphism
    - Líneas decorativas con gradiente

16. FOOTER:
    - Información de créditos
    - Botón para ver el prompt de recreación
    - Enlaces de compartir
    - Diseño con gradiente y glassmorphism

17. RESPONSIVE DESIGN:
    - Mobile first approach
    - Breakpoint principal en 768px
    - Línea temporal a la izquierda en móvil
    - Tarjetas apiladas verticalmente
    - Navegación lateral oculta en móvil

18. OPTIMIZACIONES:
    - RequestAnimationFrame para animaciones
    - Debouncing en scroll events
    - Lazy loading de animaciones
    - CSS transforms para mejor performance

19. COLORES Y TEMA:
    - Gradiente principal: #667eea a #764ba2
    - Colores de acento: #6366f1, #a855f7, #f43f5e
    - Fondo claro: blanco con opacidad
    - Texto: #1e293b (títulos), #64748b (descripciones)
    - Glassmorphism en elementos flotantes

20. ANIMACIONES CSS:
    - fadeInUp para entrada de elementos
    - pulse para puntos de la línea temporal
    - gradientShift para textos con gradiente
    - particle-animation para efectos de click
    - spin para loader inicial

IMPORTANTE:
- El código debe ser completamente funcional
- Todas las animaciones deben ser suaves (60fps)
- Los datos deben ser históricamente precisos
- La aplicación debe cargar rápidamente
- Debe funcionar sin conexión después de cargar
- El diseño debe ser profesional y educativo

Por favor, genera el código completo en un solo bloque HTML que incluya todo lo mencionado. La aplicación será usada para capacitación docente en historia de la tecnología.