<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <link rel="icon" type="image/svg+xml" href="/alex5.svg" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>BoatTrip Planner - Planifica tu viaje náutico con IA</title>
  
  <!-- Meta tags SEO -->
  <meta name="description" content="Planifica tu viaje náutico perfecto con IA. Descubre destinos, calcula rutas, encuentra equipamiento y disfruta de la navegación." />
  <meta name="keywords" content="viaje náutico, planificación, navegación, destinos marítimos, equipamiento náutico, IA, inteligencia artificial" />
  <meta name="author" content="BoatTrip Planner" />
  <meta name="robots" content="index, follow" />
  
  <!-- Open Graph / Facebook -->
  <meta property="og:type" content="website" />
  <meta property="og:url" content="https://boattrip-planner.com/" />
  <meta property="og:title" content="BoatTrip Planner - Planifica tu viaje náutico con IA" />
  <meta property="og:description" content="Planifica tu viaje náutico perfecto con IA. Descubre destinos, calcula rutas, encuentra equipamiento y disfruta de la navegación." />
  <meta property="og:image" content="https://boattrip-planner.com/images/og-image.jpg" />
  
  <!-- Twitter -->
  <meta property="twitter:card" content="summary_large_image" />
  <meta property="twitter:url" content="https://boattrip-planner.com/" />
  <meta property="twitter:title" content="BoatTrip Planner - Planifica tu viaje náutico con IA" />
  <meta property="twitter:description" content="Planifica tu viaje náutico perfecto con IA. Descubre destinos, calcula rutas, encuentra equipamiento y disfruta de la navegación." />
  <meta property="twitter:image" content="https://boattrip-planner.com/images/og-image.jpg" />
  
  <!-- 🚤 FAVICON PRINCIPAL - CONFIGURACIÓN ROBUSTA PARA WWW Y NO-WWW -->
  <!-- Favicon SVG principal - alex5.svg como estándar universal -->
  <link rel="icon" type="image/svg+xml" sizes="any" href="/alex5.svg?v=2025-08-23" />
  <link rel="shortcut icon" href="/alex5.svg?v=2025-08-23" />
  <!-- Favicon principal para todos los navegadores -->
  <link rel="icon" href="/alex5.svg?v=2025-08-23" />
  <!-- Fallbacks adicionales para máxima compatibilidad -->
  <link rel="icon" type="image/svg+xml" href="/alex5.svg?v=2025-08-23" />
  <link rel="icon" href="/favicon.ico?v=2025-08-23" />
  <!-- Favicon PNG principal para máxima compatibilidad -->
  <link rel="icon" type="image/png" sizes="96x96" href="/favicon-96x96.png?v=2025-08-23" />
  <link rel="shortcut icon" type="image/png" href="/favicon-96x96.png?v=2025-08-23" />
  
  <!-- Favicons específicos para diferentes tamaños y dispositivos -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png?v=2025-08-23" />
  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-96x96.png?v=2025-08-23" />
  
  <!-- Apple Touch Icon para dispositivos iOS -->
  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png?v=2025-08-23" />
  <link rel="apple-touch-icon" sizes="152x152" href="/web-app-manifest-192x192.png?v=2025-08-23" />
  <link rel="apple-touch-icon" sizes="144x144" href="/web-app-manifest-192x192.png?v=2025-08-23" />
  <link rel="apple-touch-icon" sizes="120x120" href="/web-app-manifest-192x192.png?v=2025-08-23" />
  <link rel="apple-touch-icon" sizes="114x114" href="/web-app-manifest-192x192.png?v=2025-08-23" />
  <link rel="apple-touch-icon" sizes="76x76" href="/web-app-manifest-192x192.png?v=2025-08-23" />
  <link rel="apple-touch-icon" sizes="72x72" href="/web-app-manifest-192x192.png?v=2025-08-23" />
  <link rel="apple-touch-icon" sizes="60x60" href="/web-app-manifest-192x192.png?v=2025-08-23" />
  <link rel="apple-touch-icon" sizes="57x57" href="/web-app-manifest-192x192.png?v=2025-08-23" />
  
  <!-- Windows Tiles -->
  <meta name="msapplication-TileImage" content="/web-app-manifest-192x192.png?v=2025-08-23" />
  <meta name="msapplication-TileColor" content="#0d9488" />
  <meta name="msapplication-config" content="/browserconfig.xml" />
  
  <!-- PWA Manifest -->
  <link rel="manifest" href="/site.webmanifest?v=2025-08-23" />
  
  <!-- Google específico - Favicon para resultados de búsqueda -->
  <link rel="icon" type="image/svg+xml" sizes="32x32" href="/alex5.svg?v=2025" />
  <link rel="icon" type="image/svg+xml" sizes="16x16" href="/alex5.svg?v=2025" />
  
  <!-- PWA Meta Tags -->
  <meta name="theme-color" content="#0d9488" />
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="default" />
  <meta name="apple-mobile-web-app-title" content="BoatTrip" />
  <meta name="mobile-web-app-capable" content="yes" />
  <meta name="application-name" content="BoatTrip Planner" />
  <meta name="msapplication-TileColor" content="#0d9488" />
  <meta name="msapplication-tap-highlight" content="no" />
  
  <!-- 🚨 SAFARI-ANDROID CONSISTENCY FIXES -->
  <script>
    // Enhanced Safari-Android consistency fixes
    document.addEventListener('DOMContentLoaded', function() {
      // Force consistent viewport behavior across all browsers
      const viewport = document.querySelector('meta[name=viewport]');
      if (viewport) {
        viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover');
      }
      
      // Safari-specific fixes
      if (navigator.userAgent.includes('Safari') && !navigator.userAgent.includes('Chrome')) {
        // Fix for Safari viewport issues
        setTimeout(function() {
          if (viewport) {
            viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes, viewport-fit=cover');
          }
        }, 100);
        
        // Fix for Safari touch events
        document.addEventListener('touchstart', function() {}, {passive: true});
        document.addEventListener('touchmove', function() {}, {passive: true});
      }
    });
  </script>
  
  <!-- 🔧 Service Worker Configuration - Prevenir errores de red -->
  <script src="/sw-config.js"></script>
  
  <!-- 🧹 Service Worker Cache Manager - Para debugging -->
  <script src="/clear-sw-cache.js"></script>
  
  <!-- 🚨 PERFORMANCE OPTIMIZATIONS -->
  <!-- Preload de recursos críticos para mejorar performance -->
  <link rel="preload" href="/assets/css/index.css" as="style" />
  <link rel="preload" href="/assets/js/react-core.js" as="script" />
  <link rel="preload" href="/assets/js/routing.js" as="script" />
  
  <!-- Preload de fuentes críticas -->
  <link rel="preload" href="/assets/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin />
  
  <!-- DNS prefetch para APIs externas -->
  <link rel="dns-prefetch" href="//fonts.googleapis.com" />
  <link rel="dns-prefetch" href="//unsplash.com" />
  <link rel="dns-prefetch" href="//api.accuweather.com" />
  <link rel="dns-prefetch" href="//generativelanguage.googleapis.com" />
  
  <!-- Preconnect para conexiones críticas -->
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link rel="preconnect" href="https://unsplash.com" />
  <link rel="preconnect" href="https://api.accuweather.com" />
  
  <!-- Critical CSS inline para mejorar FCP -->
  <style>
    /* Critical CSS para mejorar First Contentful Paint */
    body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif; }
    #root { min-height: 100vh; }
    .loading-skeleton { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
    @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
    
    /* Preload spinner */
    .app-loading { 
      display: flex; 
      justify-content: center; 
      align-items: center; 
      height: 100vh; 
      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
      color: white;
    }
    .spinner { 
      width: 40px; 
      height: 40px; 
      border: 4px solid rgba(255,255,255,0.3); 
      border-top: 4px solid white; 
      border-radius: 50%; 
      animation: spin 1s linear infinite; 
    }
    @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
  </style>
  
  <script>
    // Performance optimizations mejoradas
    document.addEventListener('DOMContentLoaded', function() {
      // Preload critical resources with proper 'as' attribute
      const criticalResources = [
        { href: '/alex5.svg', as: 'image' },
        { href: '/assets/css/index.css', as: 'style' },
        { href: '/assets/js/react-core.js', as: 'script' }
      ];
      
      criticalResources.forEach(resource => {
        const link = document.createElement('link');
        link.rel = 'preload';
        link.href = resource.href;
        link.as = resource.as;
        document.head.appendChild(link);
      });
      
      // Optimize images loading con Intersection Observer
      if ('IntersectionObserver' in window) {
        const imageObserver = new IntersectionObserver((entries, observer) => {
          entries.forEach(entry => {
            if (entry.isIntersecting) {
              const img = entry.target;
              if (img.dataset.src) {
                img.src = img.dataset.src;
                img.removeAttribute('data-src');
                observer.unobserve(img);
              }
            }
          });
        });
        
        document.querySelectorAll('img[data-src]').forEach(img => {
          imageObserver.observe(img);
        });
      }
      
      // Preload de componentes críticos
      const criticalComponents = [
        '/src/components/Header.tsx',
        '/src/components/LandingPage.tsx'
      ];
      
      // Preload de componentes críticos en background
      setTimeout(() => {
        criticalComponents.forEach(component => {
          const link = document.createElement('link');
          link.rel = 'prefetch';
          link.href = component;
          document.head.appendChild(link);
        });
      }, 1000);
    });
  </script>
  
  <!-- 🚨 ANALYTICS Y TRACKING -->
  <!-- Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-VR3KE7RXBD"></script>
  <script src="/gtag.js"></script>
  
  <!-- Performance monitoring -->
  <script>
    if ('performance' in window) {
      window.addEventListener('load', function() {
        setTimeout(function() {
          const perfData = performance.getEntriesByType('navigation')[0];
          if (perfData) {
            console.log('🚀 Performance Metrics:', {
              'Time to First Byte': perfData.responseStart - perfData.requestStart + 'ms',
              'DOM Content Loaded': perfData.domContentLoadedEventEnd - perfData.domContentLoadedEventStart + 'ms',
              'Load Complete': perfData.loadEventEnd - perfData.loadEventStart + 'ms',
              'Total Load Time': perfData.loadEventEnd - perfData.requestStart + 'ms'
            });
          }
        }, 0);
      });
    }
  </script>
  <script type="module" crossorigin src="/assets/js/index-CDNw_pDV.js"></script>
  <link rel="modulepreload" crossorigin href="/assets/js/vendor-g4fnrYyX.js">
  <link rel="modulepreload" crossorigin href="/assets/js/markdown-Du5aKPzq.js">
  <link rel="modulepreload" crossorigin href="/assets/js/react-core-CenSFUNV.js">
  <link rel="modulepreload" crossorigin href="/assets/js/ui-components-By--zbGy.js">
  <link rel="modulepreload" crossorigin href="/assets/js/ai-services-DgWQgb5a.js">
  <link rel="stylesheet" crossorigin href="/assets/css/index-BW02yAAR.css">

        <link rel="preload" href="/assets/css/index.css" as="style">
        <link rel="preload" href="/assets/fonts/inter-var.woff2" as="font" type="font/woff2" crossorigin>
        <link rel="dns-prefetch" href="//fonts.googleapis.com">
        <link rel="dns-prefetch" href="//unsplash.com">
        <link rel="dns-prefetch" href="//api.accuweather.com">
        </head>
        
<body>
  <div id="root">
    <!-- Loading state crítico para mejorar percepción de velocidad -->
    <div class="app-loading">
      <div>
        <div class="spinner"></div>
        <p style="margin-top: 1rem; text-align: center;">Cargando Boat Trip Planner...</p>
      </div>
    </div>
  </div>
</body>
</html>