.elementor-53 .elementor-element.elementor-element-dd78459{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-53 .elementor-element.elementor-element-a4d765b{--display:flex;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS */<head>
  <!-- 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-WQLG82JM');
  </script>
  <!-- End Google Tag Manager -->

  <!-- Microsoft Clarity -->
  <script type="text/javascript">
    (function(c,l,a,r,i,t,y){c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);})(window,document,"clarity","script","vwo27uk7qk");
  </script>

  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vibe Coding na Prática — Crie Web Apps e SaaS com IA sem Programar</title>
  <meta name="description" content="Crie Web Apps, SaaS e Landing Pages com IA do zero ao deploy. Curso Vibe Coding na Prática — 7 módulos, projetos reais, garantia de 15 dias." />
  <link rel="canonical" href="https://vibecodingnapratica.com.br/" />

  <!-- Open Graph -->
  <meta property="og:title" content="Vibe Coding na Prática — Crie Web Apps e SaaS com IA sem Programar" />
  <meta property="og:description" content="Crie Web Apps, SaaS e Landing Pages com IA do zero ao deploy. Curso Vibe Coding na Prática — 7 módulos, projetos reais, garantia de 15 dias." />
  <meta property="og:type" content="website" />
  <meta property="og:locale" content="pt_BR" />
  <meta property="og:url" content="https://vibecodingnapratica.com.br/" />
  <meta property="og:image" content="https://vibecodingnapratica.com.br/og-image.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:image:alt" content="Vibe Coding na Prática — Crie Web Apps e SaaS com IA" />

  <!-- Twitter/X Card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="Vibe Coding na Prática — Crie Web Apps e SaaS com IA sem Programar" />
  <meta name="twitter:description" content="Crie Web Apps, SaaS e Landing Pages com IA do zero ao deploy. Curso Vibe Coding na Prática — 7 módulos, projetos reais, garantia de 15 dias." />
  <meta name="twitter:image" content="https://vibecodingnapratica.com.br/og-image.png" />

  <!-- Schema: Course -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Course",
    "name": "Vibe Coding na Prática",
    "description": "Crie Web Apps, SaaS e Landing Pages com IA do zero ao deploy, sem precisar programar.",
    "url": "https://vibecodingnapratica.com.br",
    "inLanguage": "pt-BR",
    "provider": {
      "@type": "Person",
      "name": "Chiara Costa",
      "url": "https://vibecodingnapratica.com.br"
    },
    "offers": [
      { "@type": "Offer", "name": "Curso Vibe Coding na Prática", "price": "297", "priceCurrency": "BRL", "availability": "https://schema.org/InStock" },
      { "@type": "Offer", "name": "Comunidade Vibe Coding na Prática", "price": "497", "priceCurrency": "BRL", "availability": "https://schema.org/InStock" }
    ],
    "hasCourseInstance": {
      "@type": "CourseInstance",
      "courseMode": "online",
      "courseWorkload": "PT7H"
    }
  }
  </script>

  <!-- Schema: FAQPage -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "FAQPage",
    "mainEntity": [
      { "@type": "Question", "name": "Vou conseguir fazer isso se nunca programei?", "acceptedAnswer": { "@type": "Answer", "text": "Sim! O curso foi desenhado especificamente para quem não tem base técnica, utilizando IA para gerar o código pesado." } },
      { "@type": "Question", "name": "E se eu travar em algum erro técnico?", "acceptedAnswer": { "@type": "Answer", "text": "Erros vão acontecer. Deploy, GitHub e configurações de ambiente são os pontos mais comuns de travamento. Suporte incluído: - Suporte via WhatsApp com atendentes treinados para destravar problemas - Suporte via plataforma do curso (comunidade + área de dúvidas)" } },
      { "@type": "Question", "name": "Consigo migrar meus projetos do Lovable para este método?", "acceptedAnswer": { "@type": "Answer", "text": "Com certeza. A lógica é muito similar, mas aqui você tem controle total do código." } },
      { "@type": "Question", "name": "Preciso do plano pago do Gemini?", "acceptedAnswer": { "@type": "Answer", "text": "Não necessariamente. A maioria das funcionalidades pode ser feita com o plano gratuito ou com a API key inicial." } },
      { "@type": "Question", "name": "Vou poder cobrar clientes com sistemas que eu criar?", "acceptedAnswer": { "@type": "Answer", "text": "Sim, você terá direitos comerciais totais sobre o software que desenvolver." } },
      { "@type": "Question", "name": "Quanto tempo leva para completar o curso?", "acceptedAnswer": { "@type": "Answer", "text": "O curso é direto ao ponto. Em um final de semana dedicado você consegue absorver a maior parte do conteúdo." } }
    ]
  }
  </script>

  <link rel="icon" type="image/png" href="assets/favicon-96x96.png" sizes="96x96" />
  <link rel="icon" type="image/svg+xml" href="assets/favicon.svg" />
  <link rel="shortcut icon" href="assets/favicon.ico" />
  <link rel="apple-touch-icon" sizes="180x180" href="assets/apple-touch-icon.png" />
  <link rel="manifest" href="assets/site.webmanifest" />

  <!-- Fonts -->
  <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=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">

  <link rel="stylesheet" href="styles.css" />
</head>

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

  <!-- ============================================================
       Topbar
       ============================================================ -->
  <div class="topbar">
    <div class="topbar__shimmer shimmer-effect"></div>
    <div class="topbar__inner">
      <p class="topbar__text">
        <span class="animate-pulse-dot" style="display:inline-block">⚠️</span>
        Preço promocional por tempo limitado —
        <span class="topbar__highlight">garanta sua vaga antes do reajuste!</span>
      </p>
    </div>
  </div>

  <main class="lp-main">

    <!-- ============================================================
         Hero
         ============================================================ -->
    <section class="hero">
      <div class="hero__grid bg-grid-pattern"></div>

      <div class="hero__blob hero__blob--1 floating-blob animate-float"></div>
      <div class="hero__blob hero__blob--2 floating-blob animate-float-delayed"></div>
      <div class="hero__blob hero__blob--3 floating-blob animate-float"></div>

      <div class="hero__content">
        <div class="hero__logo-wrap">
          <img src="https://chiaracosta.com/wp-content/uploads/2026/05/vibe-coding-na-pratica-logo.png" alt="Vibe Coding Na Prática" class="hero__logo" />
        </div>

        <div class="hero__tools">
          <img src="https://chiaracosta.com/wp-content/uploads/2026/05/gemini-icon.png" alt="Gemini" title="Gemini" class="hero__tool-icon" />
          <img src="https://chiaracosta.com/wp-content/uploads/2026/05/supabase-icon.png" alt="Supabase" title="Supabase" class="hero__tool-icon" />
          <img src="https://chiaracosta.com/wp-content/uploads/2026/05/antigravity-icon.png" alt="Antigravity" title="Antigravity" class="hero__tool-icon" />
          <img src="https://chiaracosta.com/wp-content/uploads/2026/05/hostinger-icon.png" alt="Hostinger" title="Hostinger" class="hero__tool-icon" />
          <img src="https://chiaracosta.com/wp-content/uploads/2026/05/netflify-icon.png" alt="Netlify" title="Netlify" class="hero__tool-icon" />
          <img src="https://chiaracosta.com/wp-content/uploads/2026/05/claude-icon.png" alt="Claude" title="Claude" class="hero__tool-icon" />
          <img src="https://chiaracosta.com/wp-content/uploads/2026/05/make.png" alt="Make" title="Make" class="hero__tool-icon" />
        </div>

        <h1 class="hero__h1">
          Tire suas ideias da cabeça e coloque para funcionar<br style="display:none" id="hero-br" /> usando <span class="gradient-text">Inteligência Artificial</span> sem precisar programar
        </h1>

        <p class="hero__subtitle">
          Crie Web Apps completos, SaaS e Landing Pages do zero ao deploy usando ferramentas de vibe coding como Google Ai Studio e Google Antigravity
        </p>

        <a href="#pricing" class="hero__cta animate-pulse-glow">
          Quero criar meus próprios sistemas
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 17L17 7M17 7H7M17 7v10" />
          </svg>
        </a>

        <div class="hero__badges">
          <div class="hero__badge">
            <svg fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd"/></svg>
            <span>Acesso imediato</span>
          </div>
          <div class="hero__badge">
            <svg fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd"/></svg>
            <span>Pagamento seguro</span>
          </div>
          <div class="hero__badge">
            <svg fill="currentColor" viewBox="0 0 24 24"><path fill-rule="evenodd" d="M2.25 12c0-5.385 4.365-9.75 9.75-9.75s9.75 4.365 9.75 9.75-4.365 9.75-9.75 9.75S2.25 17.385 2.25 12zm13.36-1.814a.75.75 0 10-1.22-.872l-3.236 4.53L9.53 12.22a.75.75 0 00-1.06 1.06l2.25 2.25a.75.75 0 001.14-.094l3.75-5.25z" clip-rule="evenodd"/></svg>
            <span>Garantia de 15 dias</span>
          </div>
        </div>
      </div>
    </section>

    <!-- ============================================================
         Testimonials
         ============================================================ -->
    <div class="testimonials-wrap">
      <section class="testimonials-section">
        <div class="testimonials-section__decor">
          <div class="testimonials-section__decor-grid"></div>
          <div class="testimonials-section__dot testimonials-section__dot--1"></div>
          <div class="testimonials-section__dot testimonials-section__dot--2"></div>
          <div class="testimonials-section__dot testimonials-section__dot--3"></div>
          <div class="testimonials-section__dot testimonials-section__dot--4"></div>
          <div class="testimonials-section__glow-1"></div>
          <div class="testimonials-section__glow-2"></div>
        </div>

        <div class="testimonials-inner">
          <h2>O que os <span>alunos</span> estão dizendo</h2>
          <p class="testimonials-inner__sub">Prints reais de mensagens enviadas por alunos da comunidade VCP.</p>

          <div class="testimonials-carousel">
            <div>
              <div id="testimonials-grid" class="testimonials-grid">
                <!-- Cards renderizados por script.js -->
              </div>
            </div>

            <button id="testimonials-prev" type="button" class="testimonials-nav testimonials-nav--prev" aria-label="Depoimento anterior">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 18 9 12 15 6"></polyline></svg>
            </button>
            <button id="testimonials-next" type="button" class="testimonials-nav testimonials-nav--next" aria-label="Próximo depoimento">
              <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>
            </button>
          </div>

          <div id="testimonials-dots" class="testimonials-dots"></div>

          <div class="testimonials-cta-wrap">
            <a href="#pricing" class="btn-orange">
              <div class="btn-orange__shine"></div>
              <span>Quero me inscrever agora</span>
              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 17L17 7M17 7H7M17 7v10"/></svg>
            </a>
          </div>
        </div>
      </section>
    </div>

    <!-- ============================================================
         Curriculum
         ============================================================ -->
    <section class="curriculum">
      <div class="curriculum__header">
        <span class="curriculum__tag">Conteúdo do Curso</span>
        <h2 class="curriculum__h2">O que você vai <span>aprender</span></h2>
      </div>

      <div class="curriculum__timeline">
        <div class="curriculum__line"></div>

        <div class="curriculum__modules">

          <!-- Módulo 1 -->
          <div class="module-row">
            <div class="module-row__dot-col">
              <div class="module-dot module-dot--inactive">01</div>
            </div>
            <div class="module-card module-card--plain">
              <span aria-hidden="true" class="module-card__bg-num">01</span>
              <div class="module-card__body">
                <div class="module-mobile-header">
                  <span class="module-mobile-header__label">Módulo 1</span>
                  <div class="module-mobile-header__meta">
                    <span class="module-meta-badge">4 aulas</span>
                    <span class="module-meta-badge">~3 min</span>
                  </div>
                </div>
                <div class="module-card__row">
                  <div class="module-card__info">
                    <p class="module-card__desktop-label">Módulo 1</p>
                    <h3 class="module-card__title">Comece por Aqui</h3>
                    <p class="module-card__desc">Orientações iniciais, suporte e materiais de apoio para você começar com o pé direito.</p>
                  </div>
                  <div class="module-card__stats">
                    <div class="module-stat"><span class="module-stat__dot module-stat__dot--primary"></span>4 aulas</div>
                    <div class="module-stat"><span class="module-stat__dot module-stat__dot--secondary"></span>~3 min</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Módulo 2 -->
          <div class="module-row">
            <div class="module-row__dot-col">
              <div class="module-dot module-dot--active">02</div>
            </div>
            <div class="module-card module-card--featured">
              <div class="module-card__stripe"></div>
              <span aria-hidden="true" class="module-card__bg-num">02</span>
              <div class="module-card__body">
                <div class="module-mobile-header">
                  <span class="module-mobile-header__label">Módulo 2</span>
                  <div class="module-mobile-header__meta">
                    <span class="module-meta-badge">10 aulas</span>
                    <span class="module-meta-badge">~47 min</span>
                  </div>
                </div>
                <div class="module-card__row">
                  <div class="module-card__info">
                    <p class="module-card__desktop-label">Módulo 2</p>
                    <h3 class="module-card__title">Criação de Sites com IA (Google AI Studio)</h3>
                    <p class="module-card__desc">Aprenda a planejar, criar e personalizar sites completos usando inteligência artificial, do design à integração com formulários e responsividade mobile.</p>
                    <div class="module-card__project"><span>🖥️</span><span>Projeto: Landing Page</span></div>
                  </div>
                  <div class="module-card__stats">
                    <div class="module-stat"><span class="module-stat__dot module-stat__dot--primary"></span>10 aulas</div>
                    <div class="module-stat"><span class="module-stat__dot module-stat__dot--secondary"></span>~47 min</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Módulo 3 -->
          <div class="module-row">
            <div class="module-row__dot-col">
              <div class="module-dot module-dot--inactive">03</div>
            </div>
            <div class="module-card module-card--plain">
              <span aria-hidden="true" class="module-card__bg-num">03</span>
              <div class="module-card__body">
                <div class="module-mobile-header">
                  <span class="module-mobile-header__label">Módulo 3</span>
                  <div class="module-mobile-header__meta">
                    <span class="module-meta-badge">10 aulas</span>
                    <span class="module-meta-badge">~37 min</span>
                  </div>
                </div>
                <div class="module-card__row">
                  <div class="module-card__info">
                    <p class="module-card__desktop-label">Módulo 3</p>
                    <h3 class="module-card__title">Colocando o Projeto Online (Deploy, Hospedagem, Domínio)</h3>
                    <p class="module-card__desc">Domine as formas de publicar seu site na internet, desde hospedagem gratuita e paga até deploy automático e conexão de domínio personalizado.</p>
                  </div>
                  <div class="module-card__stats">
                    <div class="module-stat"><span class="module-stat__dot module-stat__dot--primary"></span>10 aulas</div>
                    <div class="module-stat"><span class="module-stat__dot module-stat__dot--secondary"></span>~37 min</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Módulo 4 -->
          <div class="module-row">
            <div class="module-row__dot-col">
              <div class="module-dot module-dot--active">04</div>
            </div>
            <div class="module-card module-card--featured">
              <div class="module-card__stripe"></div>
              <span aria-hidden="true" class="module-card__bg-num">04</span>
              <div class="module-card__body">
                <div class="module-mobile-header">
                  <span class="module-mobile-header__label">Módulo 4</span>
                  <div class="module-mobile-header__meta">
                    <span class="module-meta-badge">12 aulas</span>
                    <span class="module-meta-badge">~58 min</span>
                  </div>
                </div>
                <div class="module-card__row">
                  <div class="module-card__info">
                    <p class="module-card__desktop-label">Módulo 4</p>
                    <h3 class="module-card__title">Banco de Dados, Autenticação e APIs (Google AI Studio)</h3>
                    <p class="module-card__desc">Evolua sua aplicação com banco de dados real, sistema de login, e-mails transacionais e segurança de dados com RLS.</p>
                    <div class="module-card__project"><span>🖥️</span><span>Projeto: TubeAI — App com Auth + Supabase</span></div>
                  </div>
                  <div class="module-card__stats">
                    <div class="module-stat"><span class="module-stat__dot module-stat__dot--primary"></span>12 aulas</div>
                    <div class="module-stat"><span class="module-stat__dot module-stat__dot--secondary"></span>~58 min</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Módulo 5 -->
          <div class="module-row">
            <div class="module-row__dot-col">
              <div class="module-dot module-dot--active">05</div>
            </div>
            <div class="module-card module-card--featured">
              <div class="module-card__stripe"></div>
              <span aria-hidden="true" class="module-card__bg-num">05</span>
              <div class="module-card__body">
                <div class="module-mobile-header">
                  <span class="module-mobile-header__label">Módulo 5</span>
                  <div class="module-mobile-header__meta">
                    <span class="module-meta-badge">13 aulas</span>
                    <span class="module-meta-badge">~1h 44min</span>
                  </div>
                </div>
                <div class="module-card__row">
                  <div class="module-card__info">
                    <p class="module-card__desktop-label">Módulo 5</p>
                    <h3 class="module-card__title">Construindo um CRM de Vendas</h3>
                    <p class="module-card__desc">Construa do zero um CRM funcional com CRUD completo, integração com Supabase, automações com Make e pagamentos via Stripe.</p>
                    <div class="module-card__project"><span>🖥️</span><span>Projeto: VibeCRM — CRM de Vendas (Google AI Studio + Supabase + Make)</span></div>
                  </div>
                  <div class="module-card__stats">
                    <div class="module-stat"><span class="module-stat__dot module-stat__dot--primary"></span>13 aulas</div>
                    <div class="module-stat"><span class="module-stat__dot module-stat__dot--secondary"></span>~1h 44min</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Módulo 6 -->
          <div class="module-row">
            <div class="module-row__dot-col">
              <div class="module-dot module-dot--active">06</div>
            </div>
            <div class="module-card module-card--featured">
              <div class="module-card__stripe"></div>
              <span aria-hidden="true" class="module-card__bg-num">06</span>
              <div class="module-card__body">
                <div class="module-mobile-header">
                  <span class="module-mobile-header__label">Módulo 6</span>
                  <div class="module-mobile-header__meta">
                    <span class="module-meta-badge">9 aulas</span>
                    <span class="module-meta-badge">~49 min</span>
                  </div>
                </div>
                <div class="module-card__row">
                  <div class="module-card__info">
                    <p class="module-card__desktop-label">Módulo 6</p>
                    <h3 class="module-card__title">Introdução ao Antigravity e Segurança de Aplicações</h3>
                    <p class="module-card__desc">Conheça o Antigravity, configure o ambiente local, integre com GitHub e aprenda a proteger webhooks e automações com Edge Functions.</p>
                    <div class="module-card__project"><span>🖥️</span><span>Projeto: TubeAI — Antigravity + Supabase</span></div>
                  </div>
                  <div class="module-card__stats">
                    <div class="module-stat"><span class="module-stat__dot module-stat__dot--primary"></span>9 aulas</div>
                    <div class="module-stat"><span class="module-stat__dot module-stat__dot--secondary"></span>~49 min</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Módulo 7 -->
          <div class="module-row">
            <div class="module-row__dot-col">
              <div class="module-dot module-dot--active">07</div>
            </div>
            <div class="module-card module-card--featured">
              <div class="module-card__stripe"></div>
              <span aria-hidden="true" class="module-card__bg-num">07</span>
              <div class="module-card__body">
                <div class="module-mobile-header">
                  <span class="module-mobile-header__label">Módulo 7</span>
                  <div class="module-mobile-header__meta">
                    <span class="module-meta-badge">14 aulas</span>
                    <span class="module-meta-badge">~1h 48min</span>
                  </div>
                </div>
                <div class="module-card__row">
                  <div class="module-card__info">
                    <p class="module-card__desktop-label">Módulo 7</p>
                    <h3 class="module-card__title">Construindo um SaaS de Assinatura</h3>
                    <p class="module-card__desc">Crie um SaaS completo com planos freemium, pagamento recorrente via Stripe, portal de assinaturas, e-mails transacionais e painel administrativo.</p>
                    <div class="module-card__project"><span>🖥️</span><span>Projeto: TubeAI — SaaS de Assinatura (Antigravity + Supabase + Stripe)</span></div>
                  </div>
                  <div class="module-card__stats">
                    <div class="module-stat"><span class="module-stat__dot module-stat__dot--primary"></span>14 aulas</div>
                    <div class="module-stat"><span class="module-stat__dot module-stat__dot--secondary"></span>~1h 48min</div>
                  </div>
                </div>
              </div>
            </div>
          </div>

        </div>
      </div>

      <div style="display:flex;justify-content:center;margin-top:3rem;margin-bottom:0.5rem">
        <a href="#pricing" class="btn-orange">
          <div class="btn-orange__shine"></div>
          <span>Quero me inscrever agora</span>
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 17L17 7M17 7H7M17 7v10"/></svg>
        </a>
      </div>

      <div class="curriculum__summary">
        <div class="curriculum__summary-item">
          <span class="curriculum__summary-num">72</span>
          <span class="curriculum__summary-label">Aulas</span>
        </div>
        <div class="curriculum__summary-item">
          <span class="curriculum__summary-divider"></span>
          <span class="curriculum__summary-num">~7h</span>
          <span class="curriculum__summary-label">De Conteúdo</span>
        </div>
        <div class="curriculum__summary-item">
          <span class="curriculum__summary-divider"></span>
          <span class="curriculum__summary-num curriculum__summary-num--orange">3</span>
          <span class="curriculum__summary-label">Projetos Completos</span>
        </div>
      </div>
    </section>

    <!-- ============================================================
         Target Audience
         ============================================================ -->
    <section class="audience">
      <div class="audience__glow audience__glow--1"></div>
      <div class="audience__glow audience__glow--2"></div>

      <div class="audience__inner">
        <h2>Esse curso <span>é pra você se</span></h2>

        <div class="audience__grid">
          <div class="audience__card">
            <div class="audience__card-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18h6M10 22h4M12 2a7 7 0 017 7c0 2.38-1.19 4.47-3 5.74V17a1 1 0 01-1 1H9a1 1 0 01-1-1v-2.26C6.19 13.47 5 11.38 5 9a7 7 0 017-7z"/></svg>
            </div>
            <div>
              <h3>Tem ideias de projetos...</h3>
              <p>mas sempre travou por não saber programar</p>
            </div>
          </div>

          <div class="audience__card">
            <div class="audience__card-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M20 7H4a2 2 0 00-2 2v10a2 2 0 002 2h16a2 2 0 002-2V9a2 2 0 00-2-2zM8 7V5a2 2 0 012-2h4a2 2 0 012 2v2"/></svg>
            </div>
            <div>
              <h3>É empreendedor</h3>
              <p>e precisa colocar sistemas no ar sem depender de ninguém</p>
            </div>
          </div>

          <div class="audience__card">
            <div class="audience__card-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M22 7L13.5 15.5 8.5 10.5 2 17M22 7h-7M22 7v7"/></svg>
            </div>
            <div>
              <h3>Já tem uma carreira</h3>
              <p>na sua área e quer usar IA para produzir mais e realizar projetos pessoais</p>
            </div>
          </div>

          <div class="audience__card">
            <div class="audience__card-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z"/></svg>
            </div>
            <div>
              <h3>Quer aprender uma habilidade nova</h3>
              <p>que está em alta demanda no mercado</p>
            </div>
          </div>

          <div class="audience__card">
            <div class="audience__card-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M12 1v22M17 5H9.5a3.5 3.5 0 000 7h5a3.5 3.5 0 010 7H6"/></svg>
            </div>
            <div>
              <h3>Busca uma nova fonte de renda</h3>
              <p>criando projetos para clientes</p>
            </div>
          </div>

          <div class="audience__card">
            <div class="audience__card-icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 00-2.91-.09zM12 15l-3-3a22 22 0 012-3.95A12.88 12.88 0 0122 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 01-4 2zM9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg>
            </div>
            <div>
              <h3>Quer criar seu próprio negócio digital...</h3>
              <p>mas não tem dinheiro para contratar desenvolvedores</p>
            </div>
          </div>
        </div>

        <div class="audience__cta-wrap">
          <a href="#pricing" class="btn-orange">
            <div class="btn-orange__shine"></div>
            <span>Quero me inscrever agora</span>
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 17L17 7M17 7H7M17 7v10"/></svg>
          </a>
        </div>
      </div>
    </section>

    <!-- ============================================================
         Bonus
         ============================================================ -->
    <section class="bonus-section">
      <div class="bonus-section__decor">
        <div class="bonus-section__decor-grid"></div>
        <div class="bonus-section__dot bonus-section__dot--1"></div>
        <div class="bonus-section__dot bonus-section__dot--2"></div>
        <div class="bonus-section__dot bonus-section__dot--3"></div>
        <div class="bonus-section__dot bonus-section__dot--4"></div>
        <div class="bonus-section__glow-1"></div>
        <div class="bonus-section__glow-2"></div>
      </div>

      <div class="bonus-inner">
        <h2><span>Bônus</span> Exclusivos da Comunidade</h2>

        <div class="bonus-grid">
          <!-- Bonus 1 -->
          <div class="bonus-card">
            <div class="bonus-card__glow"></div>
            <div class="bonus-card__shine"></div>
            <div class="bonus-card__tag">Bônus #1</div>
            <div class="bonus-card__icon">
              <img src="https://chiaracosta.com/wp-content/uploads/2026/05/whatsapp-bonus.png" alt="WhatsApp" />
            </div>
            <h3>Grupo de Alunos no WhatsApp</h3>
            <p>Acesso ao grupo exclusivo de alunos no WhatsApp — um espaço para interação, troca de conhecimento e crescimento mútuo. Você vai aprender junto com pessoas que estão na mesma jornada que você.</p>
          </div>

          <!-- Bonus 2 -->
          <div class="bonus-card">
            <div class="bonus-card__glow"></div>
            <div class="bonus-card__shine"></div>
            <div class="bonus-card__tag">Bônus #2</div>
            <div class="bonus-card__icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22.54 6.42a2.78 2.78 0 00-1.95-1.96C18.88 4 12 4 12 4s-6.88 0-8.59.46a2.78 2.78 0 00-1.95 1.96A29 29 0 001 12a29 29 0 00.46 5.58A2.78 2.78 0 003.41 19.6C5.12 20 12 20 12 20s6.88 0 8.59-.46a2.78 2.78 0 001.95-1.95A29 29 0 0023 12a29 29 0 00-.46-5.58z"/><polygon points="9.75 15.02 15.5 12 9.75 8.98 9.75 15.02"/></svg>
            </div>
            <h3>Aulas ao Vivo</h3>
            <p>2 encontros mensais ao vivo para atualização e aprofundamento de temas. Tire dúvidas em tempo real e acompanhe as novidades do mercado.</p>
          </div>

          <!-- Bonus 3 -->
          <div class="bonus-card">
            <div class="bonus-card__glow"></div>
            <div class="bonus-card__shine"></div>
            <div class="bonus-card__tag">Bônus #3</div>
            <div class="bonus-card__icon">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-.61.08-1.21.21-1.78L8.99 15v1c0 1.1.9 2 2 2v1.93C7.06 19.43 4 16.07 4 12zm13.89 5.4A1.99 1.99 0 0016 16h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41C17.92 5.77 20 8.65 20 12c0 2.08-.81 3.98-2.11 5.4z"/></svg>
            </div>
            <h3 class="white">Acesso Vitalício</h3>
            <p>Comprou, é seu para sempre — o acesso ao conteúdo não expira. E durante o primeiro ano, você recebe todas as novas aulas e atualizações do curso sem custo adicional.</p>
          </div>
        </div>

        <div class="bonus-cta-wrap">
          <a href="#pricing" class="btn-orange">
            <div class="btn-orange__shine"></div>
            <span>Quero entrar na comunidade</span>
            <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 17L17 7M17 7H7M17 7v10"/></svg>
          </a>
        </div>
      </div>
    </section>

    <!-- ============================================================
         Pricing
         ============================================================ -->
    <section id="pricing" class="pricing">
      <div class="pricing__header">
        <h2>Quanto custa transformar<br />suas <span>ideias em realidade?</span></h2>
      </div>

      <div class="pricing__grid">

        <!-- Card 1 - Curso -->
        <div class="pricing-card">
          <div style="margin-bottom:1.5rem">
            <h3>Curso Vibe Coding na Prática</h3>
            <p class="pricing-card__sub">Acesso ao curso completo</p>
          </div>

          <div class="pricing-card__features">
            <div class="pricing-card__feature">
              <div class="pricing-check">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
              </div>
              <span>Curso completo</span>
            </div>
            <div class="pricing-card__feature">
              <div class="pricing-check">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
              </div>
              <span>Suporte por e-mail e na plataforma</span>
            </div>
          </div>

          <div style="margin-bottom:2rem">
            <p class="pricing-card__bonus-label">Bônus inclusos</p>
            <div class="pricing-card__bonuses">
              <div class="pricing-card__feature">
                <div class="pricing-check pricing-check--orange">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18M3 12h18M5.6 5.6l12.8 12.8M5.6 18.4l12.8-12.8"/></svg>
                </div>
                <span><span style="font-weight:700;color:#F07637">Replay - Aula ao Vivo:</span> Antigravity Descomplicado - Guia completo para iniciantes</span>
              </div>
              <div class="pricing-card__feature">
                <div class="pricing-check pricing-check--orange">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v18M3 12h18M5.6 5.6l12.8 12.8M5.6 18.4l12.8-12.8"/></svg>
                </div>
                <span><span style="font-weight:700;color:#F07637">Replay - Aula ao Vivo:</span> Skills no Antigravity e Claude Code</span>
              </div>
            </div>
          </div>

          <div class="pricing-card__price">
            <p class="pricing-card__price-label">12x de</p>
            <div class="pricing-card__amount">R$30,72</div>
            <p class="pricing-card__installment">Ou R$297 à vista</p>
          </div>

          <button type="button" data-checkout="curso" class="btn-outline-orange">
            Quero o curso
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
          </button>
        </div>

        <!-- Card 2 - Comunidade (destaque) -->
        <div class="pricing-card--featured">
          <div class="pricing-card--featured__badge">
            <div class="pricing-card--featured__badge-inner">
              <div class="pricing-card--featured__pulse-dot">
                <span class="ping animate-ping"></span>
                <span class="dot"></span>
              </div>
              Recomendado
            </div>
          </div>

          <div class="pricing-card--featured__glow animate-pulse"></div>

          <div class="pricing-card--featured__inner">
            <div style="margin-bottom:1.5rem;margin-top:0.75rem">
              <img src="https://chiaracosta.com/wp-content/uploads/2026/05/comunidade-logo.png" alt="Comunidade Vibe Coding na Prática" style="height:3.5rem;margin-bottom:1.25rem;margin-left:auto;margin-right:auto;display:block" />
              <h3>Comunidade Vibe Coding na Prática</h3>
              <p class="pricing-card__sub">Curso + comunidade ativa de alunos</p>
            </div>

            <div class="pricing-card__features" style="margin-bottom:2rem;flex:1">
              <div class="pricing-card__feature">
                <div class="pricing-check">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                </div>
                <span>Curso Vibe Coding na Prática — <span class="inline-badge">Acesso vitalício</span></span>
              </div>
              <div class="pricing-card__feature">
                <div class="pricing-check">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                </div>
                <span>Grupo de alunos no WhatsApp</span>
              </div>
              <div class="pricing-card__feature">
                <div class="pricing-check">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                </div>
                <span>Aulas ao vivo 2x ao mês</span>
              </div>
              <div class="pricing-card__feature">
                <div class="pricing-check">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                </div>
                <span>Replay de todas as aulas ao vivo</span>
              </div>
              <div class="pricing-card__feature">
                <div class="pricing-check">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>
                </div>
                <span>Suporte por WhatsApp</span>
              </div>
            </div>

            <div class="pricing-card__price">
              <p class="pricing-card__price-label">12x de</p>
              <div class="pricing-card--featured__amount-wrap">
                <div class="pricing-card--featured__amount-glow animate-pulse"></div>
                <div class="pricing-card__amount">R$51,40</div>
              </div>
              <p class="pricing-card__installment">Ou R$497 à vista</p>
            </div>

            <div style="position:relative;margin-bottom:1rem">
              <div class="btn-orange-solid__blur"></div>
              <button type="button" data-checkout="comunidade" class="btn-orange-solid">
                Quero a comunidade
                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
              </button>
            </div>
          </div>
        </div>
      </div>

      <div class="pricing__trust">
        <div class="pricing__trust-item">
          <svg viewBox="0 0 24 24" fill="none" stroke="#F07637" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>
          <span>Garantia de 15 dias</span>
        </div>
        <div class="pricing__trust-item">
          <svg viewBox="0 0 24 24" fill="none" stroke="#F07637" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0110 0v4"/></svg>
          <span>Acesso imediato</span>
        </div>
        <div class="pricing__trust-item">
          <svg viewBox="0 0 24 24" fill="none" stroke="#F07637" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/><path d="M9 12l2 2 4-4"/></svg>
          <span>Pagamento Seguro</span>
        </div>
      </div>
    </section>

    <!-- ============================================================
         Guarantee
         ============================================================ -->
    <section class="guarantee">
      <div class="guarantee__inner">
        <div class="guarantee__glow-1"></div>
        <div class="guarantee__glow-2"></div>

        <div class="guarantee__img-wrap">
          <div class="guarantee__img-glow animate-pulse"></div>
          <img src="https://chiaracosta.com/wp-content/uploads/2026/05/garantia.png" alt="Garantia de 15 dias" class="guarantee__img animate-float" />
        </div>

        <div class="guarantee__text">
          <div style="margin-bottom:1.5rem">
            <div class="guarantee__tag">
              <p>Risco Zero</p>
            </div>
            <h3>15 dias de Garantia</h3>
          </div>
          <p>Você tem 15 dias para acessar o curso, assistir às aulas e decidir se faz sentido pra você. Se por qualquer motivo achar que não é o que esperava, basta enviar um e-mail e devolvemos 100% do seu dinheiro. Sem perguntas, sem burocracia. Você não tem nada a perder.</p>
        </div>
      </div>
    </section>

    <!-- ============================================================
         Instructor
         ============================================================ -->
    <section class="instructor">
      <div class="instructor__decor instructor__decor--1"></div>
      <div class="instructor__decor instructor__decor--2"></div>
      <div class="instructor__decor instructor__decor--3"></div>
      <div class="instructor__decor instructor__decor--4"></div>

      <div class="instructor__inner">
        <div class="instructor__photo-col">
          <div class="instructor__photo-frame">
            <div class="instructor__corner instructor__corner--tl"></div>
            <div class="instructor__corner instructor__corner--tr"></div>
            <div class="instructor__corner instructor__corner--bl"></div>
            <div class="instructor__corner instructor__corner--br"></div>
            <img src="https://chiaracosta.com/wp-content/uploads/2026/05/Chiara23.png" alt="Chiara - Professora do curso Vibe Coding na Prática" class="instructor__photo" />
            <div class="instructor__photo-shadow"></div>
          </div>
        </div>

        <div class="instructor__text-col">
          <h2>Quem é sua <span>professora</span></h2>

          <div class="instructor__bio">
            <p>Oi, sou a Chiara. Com 9+ anos na web, construí um negócio de sucesso com criação de sites e com produção de conteúdo no meu canal do YouTube.</p>
            <p>Agora, ensino você a usar a IA para criar SaaS próprios ou sites profissionais, sem saber programação.</p>
          </div>

          <div class="instructor__tags">
            <div class="instructor__tag">
              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z"/></svg>
              <span>9+ anos de experiência</span>
            </div>
            <a href="https://www.youtube.com/@a_chiaraa" target="_blank" rel="noopener noreferrer" class="instructor__tag">
              <svg fill="currentColor" viewBox="0 0 24 24"><path d="M23.498 6.186a3.016 3.016 0 00-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 00.502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 002.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 002.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z"/></svg>
              <span>YouTuber</span>
            </a>
            <div class="instructor__tag">
              <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/></svg>
              <span>Especialista em IA</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- ============================================================
         FAQ
         ============================================================ -->
    <section class="faq-section">
      <div class="faq-section__glow-1"></div>
      <div class="faq-section__glow-2"></div>

      <div class="faq-section__header">
        <h2><span>Perguntas</span> que você<br/>provavelmente tem agora</h2>
      </div>

      <div class="faq-list" id="faq-list">
        <!-- FAQ 1 -->
        <div class="faq-item" data-faq-index="0">
          <button type="button" class="faq-toggle" aria-expanded="false">
            <div class="faq-toggle__left">
              <div class="faq-number">01</div>
              <h3 class="faq-question-text">Vou conseguir fazer isso se nunca programei?</h3>
            </div>
            <div class="faq-toggle__icon">
              <svg class="faq-icon-plus" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
              <svg class="faq-icon-minus" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
            </div>
          </button>
          <div class="faq-answer-wrapper"><div class="inner"><p>Sim! O curso foi desenhado especificamente para quem não tem base técnica, utilizando IA para gerar o código pesado.</p></div></div>
        </div>

        <!-- FAQ 2 -->
        <div class="faq-item" data-faq-index="1">
          <button type="button" class="faq-toggle" aria-expanded="false">
            <div class="faq-toggle__left">
              <div class="faq-number">02</div>
              <h3 class="faq-question-text">E se eu travar em algum erro técnico?</h3>
            </div>
            <div class="faq-toggle__icon">
              <svg class="faq-icon-plus" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
              <svg class="faq-icon-minus" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
            </div>
          </button>
          <div class="faq-answer-wrapper"><div class="inner"><p>Erros vão acontecer. Deploy, GitHub e configurações de ambiente são os pontos mais comuns de travamento.

Suporte incluído:
- Suporte via WhatsApp com atendentes treinados para destravar problemas
- Suporte via plataforma do curso (comunidade + área de dúvidas)</p></div></div>
        </div>

        <!-- FAQ 3 -->
        <div class="faq-item" data-faq-index="2">
          <button type="button" class="faq-toggle" aria-expanded="false">
            <div class="faq-toggle__left">
              <div class="faq-number">03</div>
              <h3 class="faq-question-text">Consigo migrar meus projetos do Lovable para este método?</h3>
            </div>
            <div class="faq-toggle__icon">
              <svg class="faq-icon-plus" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
              <svg class="faq-icon-minus" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
            </div>
          </button>
          <div class="faq-answer-wrapper"><div class="inner"><p>Com certeza. A lógica é muito similar, mas aqui você tem controle total do código.</p></div></div>
        </div>

        <!-- FAQ 4 -->
        <div class="faq-item" data-faq-index="3">
          <button type="button" class="faq-toggle" aria-expanded="false">
            <div class="faq-toggle__left">
              <div class="faq-number">04</div>
              <h3 class="faq-question-text">Preciso do plano pago do Gemini?</h3>
            </div>
            <div class="faq-toggle__icon">
              <svg class="faq-icon-plus" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
              <svg class="faq-icon-minus" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
            </div>
          </button>
          <div class="faq-answer-wrapper"><div class="inner"><p>Não necessariamente. A maioria das funcionalidades pode ser feita com o plano gratuito ou com a API key inicial.</p></div></div>
        </div>

        <!-- FAQ 5 -->
        <div class="faq-item" data-faq-index="4">
          <button type="button" class="faq-toggle" aria-expanded="false">
            <div class="faq-toggle__left">
              <div class="faq-number">05</div>
              <h3 class="faq-question-text">Vou poder cobrar clientes com sistemas que eu criar?</h3>
            </div>
            <div class="faq-toggle__icon">
              <svg class="faq-icon-plus" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
              <svg class="faq-icon-minus" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
            </div>
          </button>
          <div class="faq-answer-wrapper"><div class="inner"><p>Sim, você terá direitos comerciais totais sobre o software que desenvolver.</p></div></div>
        </div>

        <!-- FAQ 6 -->
        <div class="faq-item" data-faq-index="5">
          <button type="button" class="faq-toggle" aria-expanded="false">
            <div class="faq-toggle__left">
              <div class="faq-number">06</div>
              <h3 class="faq-question-text">Quanto tempo leva para completar o curso?</h3>
            </div>
            <div class="faq-toggle__icon">
              <svg class="faq-icon-plus" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="5" x2="12" y2="19"></line><line x1="5" y1="12" x2="19" y2="12"></line></svg>
              <svg class="faq-icon-minus" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line></svg>
            </div>
          </button>
          <div class="faq-answer-wrapper"><div class="inner"><p>O curso é direto ao ponto. Em um final de semana dedicado você consegue absorver a maior parte do conteúdo.</p></div></div>
        </div>
      </div>
    </section>
  </main>

  <!-- ============================================================
       Footer
       ============================================================ -->
  <footer class="footer">
    <div class="footer__grid-bg bg-grid-pattern"></div>
    <div class="footer__glow footer__glow--1"></div>
    <div class="footer__glow footer__glow--2"></div>
    <div class="footer__dot footer__dot--1 animate-pulse"></div>
    <div class="footer__dot footer__dot--2 animate-pulse"></div>
    <div class="footer__dot footer__dot--3 animate-pulse"></div>

    <div class="footer__cta-area">
      <div class="footer__icon-wrap">
        <div class="footer__icon-bg">
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 15l-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path stroke-linecap="round" stroke-linejoin="round" d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path stroke-linecap="round" stroke-linejoin="round" d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg>
        </div>
      </div>

      <h2 class="footer__heading-1">Pronto para criar</h2>
      <p class="footer__heading-2">seus próprios sistemas?</p>

      <div class="footer__buttons">
        <a href="#pricing" class="btn-orange">
          <div class="btn-orange__shine"></div>
          <span>Quero me inscrever agora</span>
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 17L17 7M17 7H7M17 7v10"/></svg>
        </a>
        <a href="https://wa.me/558892639679?text=Ol%C3%A1%2C%20tenho%20uma%20d%C3%BAvida%20sobre%20o%20Vibe%20Coding%20na%20Pr%C3%A1tica%2C%20pode%20me%20ajudar%3F" target="_blank" rel="noopener noreferrer" class="btn-secondary">
          Quero tirar minhas dúvidas antes
          <svg fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2"><path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/></svg>
        </a>
      </div>
    </div>

    <div class="footer__bar">
      <div>
        <img src="https://chiaracosta.com/wp-content/uploads/2026/05/vibe-coding-na-pratica-logo-off.png" alt="Vibe Coding Na Prática" class="footer__bar-logo" />
      </div>
      <div class="footer__bar-meta">
        <p>Vibe Coding na Prática 2026 - Todos os Direitos Reservados</p>
        <p>
          <a href="https://vibecodingnapratica.com.br/politica-de-privacidade/">Política de Privacidade</a>
          <span class="sep">•</span>
          <a href="https://vibecodingnapratica.com.br/termos-de-uso/">Termos de Uso</a>
        </p>
        <p class="footer__bar-cnpj">CNPJ: 34.283.063/0001-14</p>
      </div>
    </div>
  </footer>

  <!-- ============================================================
       WhatsApp floating button
       ============================================================ -->
  <a href="https://wa.me/558892639679?text=Ol%C3%A1%2C%20tenho%20uma%20d%C3%BAvida%20sobre%20o%20Vibe%20Coding%20na%20Pr%C3%A1tica%2C%20pode%20me%20ajudar%3F" target="_blank" rel="noopener noreferrer" aria-label="Fale conosco pelo WhatsApp" class="wa-float">
    <div class="wa-float__ping animate-ping"></div>
    <div class="wa-float__btn">
      <img src="https://chiaracosta.com/wp-content/uploads/2026/05/WhatsApp.png" alt="WhatsApp" class="wa-float__img" />
    </div>
  </a>

  <!-- ============================================================
       Modal pré-checkout
       ============================================================ -->
  <div id="precheckout-modal" style="position:fixed;inset:0;z-index:50;display:flex;align-items:flex-end;justify-content:center;padding:0" hidden>
    <div id="precheckout-overlay" class="modal-overlay-bg"></div>

    <div class="modal-panel modal-open">
      <div class="modal-header">
        <button id="precheckout-close" type="button" class="modal-close" aria-label="Fechar">
          <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>
        </button>
        <h2 id="precheckout-title">Quase lá! 🚀</h2>
        <p id="precheckout-subtitle">Preencha seus dados para continuar</p>
      </div>

      <form id="precheckout-form" class="modal-form" novalidate>
        <div class="modal-field">
          <label>Nome Completo</label>
          <input id="pc-name" type="text" placeholder="Seu nome completo" class="modal-input" />
          <p class="pc-error hidden" data-error-for="name"></p>
        </div>

        <div class="modal-field">
          <label>E-mail</label>
          <input id="pc-email" type="email" placeholder="seu@email.com" class="modal-input" />
          <p class="pc-error hidden" data-error-for="email"></p>
        </div>

        <div class="modal-field">
          <label>WhatsApp</label>
          <div class="modal-phone-row">
            <div id="pc-country-wrapper" class="pc-country-wrapper">
              <button type="button" id="pc-country-toggle" class="pc-country-toggle">
                <span id="pc-country-flag" class="pc-country-flag">🇧🇷</span>
                <span id="pc-country-dial" class="pc-country-dial">+55</span>
                <svg id="pc-country-chevron" class="pc-country-chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="6 9 12 15 18 9"></polyline></svg>
              </button>

              <div id="pc-country-dropdown" class="pc-country-dropdown hidden">
                <div class="pc-country-search-wrap">
                  <div class="pc-country-search-inner">
                    <svg class="pc-country-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"></circle><line x1="21" y1="21" x2="16.65" y2="16.65"></line></svg>
                    <input id="pc-country-search" type="text" placeholder="Buscar país..." class="pc-country-search" />
                  </div>
                </div>
                <div id="pc-country-list" class="pc-country-list"></div>
              </div>
            </div>

            <input id="pc-phone" type="tel" placeholder="(11) 99999-9999" class="modal-input" style="flex:1" />
          </div>
          <p class="pc-error hidden" data-error-for="phone"></p>
        </div>

        <button id="pc-submit" type="submit" class="pc-submit" disabled>
          <span id="pc-submit-label">IR PARA PAGAMENTO SEGURO</span>
          <svg id="pc-submit-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>
          <svg id="pc-submit-spinner" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="animate-spin pc-submit-spinner hidden"><line x1="12" y1="2" x2="12" y2="6"></line><line x1="12" y1="18" x2="12" y2="22"></line><line x1="4.93" y1="4.93" x2="7.76" y2="7.76"></line><line x1="16.24" y1="16.24" x2="19.07" y2="19.07"></line><line x1="2" y1="12" x2="6" y2="12"></line><line x1="18" y1="12" x2="22" y2="12"></line><line x1="4.93" y1="19.07" x2="7.76" y2="16.24"></line><line x1="16.24" y1="7.76" x2="19.07" y2="4.93"></line></svg>
        </button>
      </form>

      <div class="modal-progress">
        <div class="modal-progress__bar">
          <div class="modal-progress__fill"></div>
        </div>
        <p class="modal-progress__label">90% completo — falta pouco!</p>
      </div>
    </div>
  </div>

  <script src="script.js" defer></script>
</body>/* End custom CSS */