<!doctype html>
<html lang="pt">
  <head>
    <meta charset="UTF-8" />
    <!-- Favicons -->
    <link rel="icon" type="image/x-icon" href="/favicon.ico" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <link rel="manifest" href="/site.webmanifest" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes" />
    <meta name="description" content="Sulada - Bilhetes e eventos. Siga-nos no Instagram @sincity_entertainment_." />
    <title>Sulada | Eventos e Bilhetes</title>
    <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=Outfit:wght@300;400;500;600;700;800&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <style>
      body {
        margin: 0;
        background: #05070d;
      }

      .boot-loader {
        min-height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        background: #05070d;
      }

      .boot-loader__panel {
        display: inline-flex;
        flex-direction: column;
        align-items: center;
        padding: 28px 32px;
        border-radius: 24px;
        background: #05070d;
        box-shadow: 0 20px 70px rgba(0, 0, 0, 0.35);
        border: 1px solid rgba(255, 255, 255, 0.08);
      }

      .boot-loader__logo {
        width: min(92px, 24vw);
        max-width: 92px;
        height: auto;
        animation: boot-pulse 1.8s ease-in-out infinite;
      }

      .boot-loader__text {
        margin-top: 16px;
        color: rgba(255, 255, 255, 0.72);
        font: 600 11px/1.4 Inter, sans-serif;
        letter-spacing: 0.16em;
        text-transform: uppercase;
      }

      .boot-loader__dots {
        display: flex;
        gap: 8px;
        margin-top: 14px;
      }

      .boot-loader__dot {
        width: 8px;
        height: 8px;
        border-radius: 9999px;
        background: rgba(255, 215, 0, 0.9);
        animation: boot-bounce 1s infinite ease-in-out;
      }

      .boot-loader__dot:nth-child(2) {
        animation-delay: 0.15s;
      }

      .boot-loader__dot:nth-child(3) {
        animation-delay: 0.3s;
      }

      @keyframes boot-pulse {
        0%, 100% { opacity: 0.82; transform: scale(1); }
        50% { opacity: 1; transform: scale(1.03); }
      }

      @keyframes boot-bounce {
        0%, 80%, 100% { transform: translateY(0); }
        40% { transform: translateY(-4px); }
      }
    </style>
    <!-- Instagram Embed Script -->
    <script async src="//www.instagram.com/embed.js"></script>
    
    <!-- Google Tag Manager -->
    <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
    new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
    j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
    'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
    })(window,document,'script','dataLayer','GTM-53ZXHZJP');</script>
    <!-- End Google Tag Manager -->
    <script type="module" crossorigin src="/assets/index-Bewlvge3.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-CkBkYAVM.css">
  </head>
  <body>
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-53ZXHZJP"
    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->
    
    <div id="root">
      <div class="boot-loader" aria-label="A carregar Sulada">
        <div class="boot-loader__panel">
          <img class="boot-loader__logo" src="/logo.png" alt="Sulada" />
          <div class="boot-loader__text">A carregar...</div>
          <div class="boot-loader__dots" aria-hidden="true">
            <span class="boot-loader__dot"></span>
            <span class="boot-loader__dot"></span>
            <span class="boot-loader__dot"></span>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>
