<!DOCTYPE html>
<html lang="en">
  <head>
    <style data-vite-theme="" data-inject-first="">:root {
      --background: 0 0% 100%;
--foreground: 20 14.3% 4.1%;
--muted: 60 4.8% 95.9%;
--muted-foreground: 25 5.3% 44.7%;
--popover: 0 0% 100%;
--popover-foreground: 20 14.3% 4.1%;
--card: 0 0% 100%;
--card-foreground: 20 14.3% 4.1%;
--border: 20 5.9% 90%;
--input: 20 5.9% 90%;
--primary: 220 84% 56%;
--primary-foreground: 218 100% 99%;
--secondary: 60 4.8% 95.9%;
--secondary-foreground: 24 9.8% 10%;
--accent: 60 4.8% 95.9%;
--accent-foreground: 24 9.8% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 60 9.1% 97.8%;
--ring: 20 14.3% 4.1%;
--radius: 0.5rem;
  }
  .dark {
      --background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--primary: 220 84% 56%;
--primary-foreground: 218 100% 99%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--ring: 240 4.9% 83.9%;
--radius: 0.5rem;
  }</style>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
    
    <title>Estúdio Mágico</title>
    
    <!-- Preconnect para melhorar performance -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link rel="preconnect" href="https://connect.facebook.net">
    <link rel="preconnect" href="https://analytics.tiktok.com">
    <link rel="preconnect" href="https://stape.portalpolonorte.com">
    
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <meta name="description" content="Estúdio Mágico - Transforme o dia da sua criança com um vídeo mágico feito especialmente para ela!" />
    
    <!-- CSS de Fallback para Mobile -->
    <style>
      /* CSS crítico para garantir que a página funcione mesmo se o CSS principal falhar */
      body {
        font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
        margin: 0;
        padding: 0;
        background: #ffffff;
        color: #1a1a1a;
        line-height: 1.6;
      }
      
      #root {
        min-height: 100vh;
        width: 100%;
      }
      
      /* Garantir que botões funcionem */
      button {
        font-family: inherit;
        cursor: pointer;
        border: none;
        border-radius: 8px;
        padding: 12px 24px;
        font-weight: 600;
        transition: all 0.2s;
      }
      
      /* Botão principal - azul Estúdio Mágico */
      .cta-button, button[class*="bg-primary"] {
        background: #2762F2 !important;
        color: white !important;
        padding: 16px 32px !important;
        border-radius: 50px !important;
        font-size: 18px !important;
      }
      
      /* Container principal */
      .container, [class*="max-w"] {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 16px;
      }
      
      /* Responsividade básica */
      @media (max-width: 768px) {
        body {
          font-size: 14px;
        }
        
        .cta-button, button[class*="bg-primary"] {
          width: 100%;
          padding: 20px !important;
          font-size: 16px !important;
        }
      }
      
      /* Estilos de fallback mais agressivos quando CSS principal falha */
      .css-fallback {
        background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%) !important;
      }
      
      .css-fallback * {
        box-sizing: border-box !important;
      }
      
      .css-fallback h1 {
        font-size: 2.5rem !important;
        font-weight: 700 !important;
        color: #1e293b !important;
        margin: 24px 0 !important;
        text-align: center !important;
      }
      
      .css-fallback h2 {
        font-size: 2rem !important;
        font-weight: 600 !important;
        color: #334155 !important;
        margin: 20px 0 !important;
        text-align: center !important;
      }
      
      .css-fallback p {
        font-size: 1.1rem !important;
        color: #475569 !important;
        margin: 16px 0 !important;
        text-align: center !important;
        max-width: 600px !important;
        margin-left: auto !important;
        margin-right: auto !important;
      }
      
      .css-fallback button {
        background: #2762F2 !important;
        color: white !important;
        padding: 20px 40px !important;
        border-radius: 50px !important;
        font-size: 18px !important;
        font-weight: 700 !important;
        border: none !important;
        cursor: pointer !important;
        display: block !important;
        margin: 24px auto !important;
        min-width: 280px !important;
        box-shadow: 0 4px 12px rgba(39, 98, 242, 0.3) !important;
      }
      
      .css-fallback button:hover {
        background: #b91c1c !important;
        transform: translateY(-2px) !important;
      }
    </style>
    
    <!-- Script de Detecção de CSS -->
    <script>
      // Detectar se o CSS principal carregou
      setTimeout(() => {
        const testElement = document.createElement('div');
        testElement.className = 'sr-only'; // Classe do Tailwind
        document.body.appendChild(testElement);
        
        const styles = window.getComputedStyle(testElement);
        const isStyled = styles.position === 'absolute' || styles.clip !== 'auto';
        
        document.body.removeChild(testElement);
        
        if (!isStyled) {
          console.warn('⚠️ CSS principal não carregou. Usando fallback.');
          // Adicionar classe para ativar estilos de fallback mais agressivos
          document.body.className += ' css-fallback';
        }
      }, 1000);
    </script>
    
    <link id="favicon" rel="icon" type="image/png" href="/favicon.png" />
    <link id="appleicon" rel="apple-touch-icon" href="/favicon.png" />
    

<!-- 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);j.async=true;j.src="https://stape.portalpolonorte.com/ronnrqrsh.js?"+i;f.parentNode.insertBefore(j,f);})(window,document,'script','dataLayer','3ga5=ARdPNiYjQzguRSo1KlwoSR5OQF9DSAoBVQMdAwYPAh8HHx0fHRwaCkYQHRw%3D');</script>
<!-- End Google Tag Manager -->
    <script type="module" crossorigin src="/assets/index-DojoYl0z.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/vendor-D2eQIyXF.js">
    <link rel="modulepreload" crossorigin href="/assets/motion-xKCQxDcq.js">
    <link rel="modulepreload" crossorigin href="/assets/utils-CYErry0n.js">
    <link rel="stylesheet" crossorigin href="/assets/index-BxshN6Ai.css">
  </head>
  <body>

    <div id="root"></div>

 
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://stape.portalpolonorte.com/ns.html?id=GTM-WF6XDX2F" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->


  </body>
</html>
