<!doctype html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Inter+Tight:wght@600;700;800;900&display=swap" rel="stylesheet" />
    <link rel="preconnect" href="https://firebasestorage.googleapis.com" crossorigin />
    <link rel="dns-prefetch" href="https://firebasestorage.googleapis.com" />
    <link rel="preconnect" href="https://lh3.googleusercontent.com" crossorigin />
    <link rel="preload" as="image" href="/DARK LOGO (1).png" fetchpriority="high" />
    <link rel="icon" type="image/png" href="./DARK LOGO (2).png" />
    
    <!-- viewport-fit=cover: content extends into safe areas; iOS Safari bottom bar -->
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta http-equiv="Cross-Origin-Opener-Policy" content="same-origin-allow-popups" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="color-scheme" content="dark" />
    <meta name="theme-color" content="#121212" />
    <script>
    (function () {
      try {
        var t = localStorage.getItem('clubsive_theme');
        var theme = t === 'light' ? 'light' : 'dark';
        var root = document.documentElement;
        root.classList.add(theme === 'light' ? 'light-theme' : 'dark-theme');
        root.classList.remove(theme === 'light' ? 'dark-theme' : 'light-theme');
        root.style.colorScheme = theme;
        var meta = document.querySelector('meta[name="theme-color"]');
        if (meta) meta.setAttribute('content', theme === 'light' ? '#e4e6ea' : '#121212');
        var cs = document.querySelector('meta[name="color-scheme"]');
        if (cs) cs.setAttribute('content', theme);
      } catch (e) {
        document.documentElement.classList.add('dark-theme');
      }
    })();
    </script>
    
    <!-- SEO Principal -->
    <title>Clubsive – Social SaaS Platform for Nightlife & Events</title>
    <meta name="description" content="Descubre las mejores discotecas y eventos en Madrid. Magazine exclusivo con tendencias, entrevistas y noticias. Reserva entradas, mesas VIP y conecta con la comunidad nocturna." />
    <meta name="keywords" content="clubsive, discotecas madrid, eventos madrid, vida nocturna, magazine clubsive, dj madrid, reservas vip, entradas eventos, tech house, melodic techno, fiestas madrid" />
    <meta name="author" content="Clubsive" />
    <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1" />
    <meta name="googlebot" content="index, follow" />
    <link rel="canonical" href="https://clubsive.com/" />
    
    <!-- Open Graph / Facebook -->
    <meta property="og:type" content="website" />
    <meta property="og:site_name" content="Clubsive" />
    <meta property="og:locale" content="es_ES" />
    <meta property="og:url" content="https://clubsive.com/" />
    <meta property="og:title" content="Clubsive – Social SaaS Platform for Nightlife & Events" />
    <meta property="og:description" content="Descubre las mejores discotecas, eventos y magazine exclusivo. Reserva entradas, mesas VIP y vive la mejor noche de Madrid." />
    <meta property="og:image" content="https://clubsive.com/DARK%20LOGO%20(2).png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="Clubsive - Vida Nocturna Madrid" />
    <meta property="og:image:type" content="image/png" />
    
    <!-- Twitter Card -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:site" content="@clubsive" />
    <meta name="twitter:creator" content="@clubsive" />
    <meta name="twitter:url" content="https://clubsive.com/" />
    <meta name="twitter:title" content="Clubsive - La Mejor Vida Nocturna de Madrid" />
    <meta name="twitter:description" content="Descubre las mejores discotecas, eventos y magazine exclusivo. Reserva entradas, mesas VIP y vive la mejor noche de Madrid." />
    <meta name="twitter:image" content="https://clubsive.com/DARK%20LOGO%20(2).png" />
    <meta name="twitter:image:alt" content="Clubsive Logo" />
    
    <!-- Structured Data para Google (Enhanced) -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebSite",
      "name": "Clubsive",
      "alternateName": "Clubsive Madrid",
      "url": "https://clubsive.com/",
      "description": "Plataforma líder de ocio nocturno en Madrid. Descubre las mejores discotecas, eventos, DJs y reserva entradas. Magazine con tendencias, entrevistas y noticias del mundo de la noche.",
      "image": {
        "@type": "ImageObject",
        "url": "https://clubsive.com/DARK%20LOGO%20(2).png",
        "width": 1200,
        "height": 630
      },
      "logo": {
        "@type": "ImageObject",
        "url": "https://clubsive.com/DARK%20LOGO%20(2).png"
      },
      "sameAs": [
        "https://www.clubsive.com/",
        "https://clubsive.com/magazine",
        "https://clubsive.com/discotecas",
        "https://clubsive.com/eventos"
      ],
      "potentialAction": {
        "@type": "SearchAction",
        "target": "https://clubsive.com/search?q={search_term_string}",
        "query-input": "required name=search_term_string"
      }
    }
    </script>

    <!-- Organization Structured Data -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Organization",
      "name": "Clubsive",
      "url": "https://clubsive.com/",
      "logo": "https://clubsive.com/DARK%20LOGO%20(2).png",
      "description": "Social SaaS Platform for Nightlife & Events",
      "founder": {
        "@type": "Person",
        "name": "Jaime de Rodrigo",
        "jobTitle": "Founder & Software Engineer",
        "url": "https://jaimederodrigo.com",
        "image": "https://clubsive.com/jaime.jpg",
        "sameAs": [
          "https://www.instagram.com/jaime.derodrigo/",
          "https://www.linkedin.com/in/jaime-derodrigo-fernandez/"
        ]
      },
      "areaServed": {
        "@type": "City",
        "name": "Madrid",
        "addressCountry": "ES"
      },
      "knowsAbout": [
        "Discotecas Madrid",
        "Eventos Nocturnos",
        "DJs",
        "Música Electrónica",
        "Tech House",
        "Melodic Techno",
        "Vida Nocturna"
      ]
    }
    </script>
    
    <!-- PWA Meta Tags -->
    <meta name="application-name" content="Clubsive" />
    <meta name="apple-mobile-web-app-title" content="Clubsive" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-TileColor" content="#121212" />
    <meta name="msapplication-tap-highlight" content="no" />
    
    <!-- Critical Resource Hints para Performance -->
    <link rel="dns-prefetch" href="//fonts.googleapis.com" />
    <link rel="dns-prefetch" href="//fonts.gstatic.com" />
    <link rel="dns-prefetch" href="//firestore.googleapis.com" />
    <link rel="dns-prefetch" href="//firebasestorage.googleapis.com" />
    <link rel="dns-prefetch" href="//www.google-analytics.com" />
    <link rel="dns-prefetch" href="//maps.googleapis.com" />
    <link rel="dns-prefetch" href="//api.mapbox.com" />
    
    <link rel="preconnect" href="https://firestore.googleapis.com" />
    <link rel="preconnect" href="https://firebasestorage.googleapis.com" />
    
    <!-- Additional Links for SEO -->
    <link rel="sitemap" type="application/xml" href="/sitemap.xml" />
    
    <style>
      /* Consistente con tailwind: negro base, gradiente lo pinta la capa fija (Tailwind) */
      :root {
        --app-top-bg: #0b1f4b;
        --app-bg: #121212;
        --safe-bottom: env(safe-area-inset-bottom, 0px);
        --screen-pad-bottom: calc(16px + var(--safe-bottom));
        --screen-pad-top: env(safe-area-inset-top, 0px);
      }
      html, body {
        margin: 0;
        padding: 0;
        min-height: 100%;
        min-height: 100dvh;
        min-height: 100svh;
        min-height: -webkit-fill-available;
        overscroll-behavior-y: contain; background: transparent;
      }
      #root {
        background: transparent;
        min-height: 100%;
        min-height: 100dvh;
        min-height: -webkit-fill-available;
        padding: 0;
        margin: 0;
      }
      /* iOS Safari: pinta env(safe-area-inset-bottom) con #000 (negro máximo) por defecto */
  #ios-safe-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: env(safe-area-inset-bottom, 0px);
        min-height: env(safe-area-inset-bottom, 0px);
        background: #121212;
        pointer-events: none;
        z-index: 1;
      }
      /* iOS notch: solo blur (sin tinte ni línea) para fundir la barra de estado con la pantalla */
      #ios-safe-top {
        position: fixed;
        top: 0; left: 0; right: 0;
        height: env(safe-area-inset-top);
        min-height: env(safe-area-inset-top);
        background: transparent;
        border-bottom: none;
        backdrop-filter: blur(20px) saturate(140%);
        -webkit-backdrop-filter: blur(20px) saturate(140%);
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        z-index: 2147483647;
        pointer-events: none;
      }
      @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
        #ios-safe-top {
          background: rgba(10, 18, 35, 0.85);
        }
      }
      
      /* Favicon con esquinas redondeadas */
      link[rel="icon"] {
        border-radius: 25% !important;
        clip-path: inset(0 round 25%) !important;
      }
      
      link[rel*="icon"] {
        border-radius: 8px !important;
      }

      /* Loading (antes de que React monte) — blur + logo grande, 1 giro (igual Splash/LoadingScreen) */
      .app-loading {
        position: fixed;
        inset: 0;
        z-index: 99999;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
        box-sizing: border-box;
        background: rgba(10, 14, 24, 0.58);
        backdrop-filter: blur(22px) saturate(165%);
        -webkit-backdrop-filter: blur(22px) saturate(165%);
        box-shadow: inset 0 0 80px rgba(0, 0, 0, 0.35);
      }
      .app-loading__logo,
      .app-loading img {
        width: clamp(120px, 28vw, 200px);
        height: auto;
        max-height: min(40vh, 200px);
        object-fit: contain;
        filter: drop-shadow(0 8px 32px rgba(0, 0, 0, 0.45));
      }
      @media (prefers-reduced-motion: no-preference) {
        .app-loading__logo--spin,
        .app-loading img {
          animation: clubsive-boot-logo 1s ease-out 1 forwards;
        }
      }
      @keyframes clubsive-boot-logo {
        from { opacity: 0; transform: scale(0.72) rotate(-180deg); }
        to { opacity: 1; transform: scale(1) rotate(0deg); }
      }
      @media (prefers-reduced-motion: reduce) {
        .app-loading__logo--spin,
        .app-loading img { animation: none; opacity: 1; }
      }
    </style>

    <!-- App version: bump on deploy. Cleanup runs ONLY when version changes. -->
    <script>
    (function() {
      'use strict';
      var CACHE_VERSION = '20260728001';

      function needsUpdate() {
        try {
          return localStorage.getItem('appCacheVersion') !== CACHE_VERSION;
        } catch (e) {
          return true;
        }
      }

      function performUpdate() {
        // 1. Unregister any legacy service workers (no SW used; clears stale PWA shells)
        if ('serviceWorker' in navigator) {
          navigator.serviceWorker.getRegistrations().then(function(regs) {
            regs.forEach(function(r) { r.unregister(); });
          });
        }

        // 2. Clear Cache API caches (stale PWA/shell caches only when version changes)
        if (window.caches) {
          caches.keys().then(function(names) {
            names.forEach(function(n) { caches.delete(n); });
          });
        }

        // 3. Update stored version
        try {
          localStorage.setItem('appCacheVersion', CACHE_VERSION);
        } catch (e) {}

        // 4. Hard reload once so module graph cannot keep old Home-*.js chunks
        try {
          sessionStorage.removeItem('reloaded_' + CACHE_VERSION);
        } catch (e) {}
        if (!sessionStorage.getItem('reloaded_' + CACHE_VERSION)) {
          sessionStorage.setItem('reloaded_' + CACHE_VERSION, '1');
          var u = new URL(window.location.href);
          u.searchParams.set('_cv', CACHE_VERSION);
          window.location.replace(u.toString());
        }
      }

      if (needsUpdate()) {
        performUpdate();
      }
    })();
    </script>
    <script type="module" crossorigin src="/index-C4VIT-XF.js"></script>
    <link rel="modulepreload" crossorigin href="/router-CpBNuK5Y.js">
    <link rel="modulepreload" crossorigin href="/ui-V_P2jdvC.js">
    <link rel="modulepreload" crossorigin href="/firebase-CWnYkWuh.js">
    <link rel="stylesheet" crossorigin href="/index-pFiTF_n0.css">
  </head>
  <body>
    <!-- iOS notch overlay: fills status bar area -->
    <div id="ios-safe-top" aria-hidden="true"></div>
    <!-- iOS Safari: pinta env(safe-area-inset-bottom) con #000 (cambia a #0f172a solo en Share/Selector cuenta) -->
    <div id="ios-safe-bottom" aria-hidden="true"></div>
    <!-- App Root -->
    <div id="root">
      <!-- Loading inicial: blur + logo grande (igual Splash/LoadingScreen) -->
      <div class="app-loading" role="status" aria-label="Cargando Clubsive">
        <img class="app-loading__logo app-loading__logo--spin" src="/DARK LOGO (1).png" alt="" />
      </div>
    </div>
    
    <!-- Main App Entry Point -->
  </body>
</html>

