Quiero transformar el mapa estático del hero section en un tracker de vuelos en tiempo real usando datos reales de la API pública de OpenSky Network. Mantén todo el resto de la página exactamente igual — solo cambia el mapa. ## LO QUE DEBE HACER EL NUEVO MAPA **Fuente de datos:** Llamar cada 15 segundos a esta URL: https://opensky-network.org/api/states/all?lamin=35&lomin=-10&lamax=44&lomax=5 (cubre la Península Ibérica, Baleares, Canarias parcial y norte de Marruecos) Cada vuelo devuelve un array con esta estructura (por índice): - [0] icao24 — identificador único del avión - [1] callsign — indicativo del vuelo (ej: IBE3456) - [2] origin_country — país de origen - [5] longitude — longitud - [6] latitude — latitud - [7] baro_altitude — altitud en metros - [9] velocity — velocidad en m/s - [10] true_track — dirección en grados (0 = norte, 90 = este) - [8] on_ground — true si está en tierra **Comportamiento:** - Filtrar y descartar aviones que estén on_ground o sin posición GPS (lat/lon null) - Mostrar cada vuelo como un icono SVG de avión pequeño (no emoji) rotado según true_track - Color del icono: cyan (#00e5cc) para aviones en vuelo normal - Si baro_altitude > 10.000 metros: icono blanco (vuelo de crucero) - Si baro_altitude < 1.000 metros: icono amarillo (aproximación o despegue) - Al hacer hover sobre un avión: mostrar tooltip con callsign, altitud en pies, velocidad en km/h y país - Al hacer click en un avión: abrir un panel lateral derecho con todos sus datos formateados, incluyendo un mini indicador visual de altitud (barra vertical) y velocidad (barra horizontal) **Actualizaciones:** - Refrescar posiciones cada 15 segundos - En cada refresco, los aviones existentes se mueven suavemente a su nueva posición con una transición CSS de 2 segundos (no deben "saltar") - Los aviones nuevos aparecen con fade-in - Los aviones que desaparecen de la respuesta se desvanecen con fade-out **UI adicional:** - El contador del banner superior "47.293 vuelos" debe sustituirse por el número real de vuelos activos sobre Iberia, actualizándose en cada refresco - Añadir en la esquina inferior izquierda del mapa: "Última actualización: hace X segundos" con un indicador circular que se vacía y rellena con cada ciclo de 15 segundos - Añadir en la esquina inferior derecha: un pequeño panel "REGIÓN: IBERIA" con las coordenadas del bounding box en formato militar (35°N–44°N / 10°W–5°E) **Manejo de errores:** - Si la API devuelve error 429 (rate limit): mostrar mensaje "Reconectando..." en el mapa y reintentar en 30 segundos sin romper la página - Si no hay conexión: mantener los últimos aviones visibles con opacidad reducida y un badge "DATOS OFFLINE" parpadeando en rojo ## ESTÉTICA Mantener exactamente la misma paleta y tipografía de la landing. El mapa debe parecer una pantalla de control de tráfico aéreo real: - Fondo del mapa #050810 - Cuadrícula de meridianos y paralelos cada 2 grados, líneas muy finas en #1a2540 - Contorno de la Península Ibérica, Baleares y Canarias en #1e3a5f (relleno) con borde #0a84ff muy sutil - Los iconos de avión con sombra-glow cyan suave ## REQUISITOS TÉCNICOS - Seguir en un único archivo HTML autocontenido - Usar canvas o SVG puro para el mapa — NO usar Leaflet ni ninguna librería externa - La proyección del mapa debe ser equirectangular simple (lat/lon → x/y proporcional al bounding box) - Toda la lógica de la API en una función fetchFlights() asíncrona con async/await - El intervalo de refresco con setInterval, cancelable si el usuario cierra el panel lateral