<html lang="pt-BR">

<head>
    <link rel="manifest" href="./manifest.json">

    <meta name="theme-color" content="#0d9488">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link rel="apple-touch-icon" href="./img/icon-192.png">

    <title>Grego Koiné (Coinê) — Curso Grátis, Gramática, Dicionário e NT Interlinear</title>
    <meta name="description"
        content="Aprenda Grego Koiné (Coinê / Bíblico) 100% grátis: Curso completo passo a passo (Gramática do Novo Testamento), Dicionário Léxico Strong, Leitor Interlinear, Flashcards e Jogos.">
    <meta name="keywords"
        content="grego koiné, grego coine, grego coinê, grego koine, curso de grego bíblico grátis, gramática grego do novo testamento, dicionário grego koiné, novo testamento interlinear grego, aprender grego bíblico, koine greek, griego koiné">
    <link rel="canonical" href="https://grego-koine.com">

    <link rel="icon" href="./icon.svg" type="image/png">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <meta name="author" content="Koiné - Gramática de Grego Bíblico">
    <meta name="robots" content="index, follow">

    <link rel="stylesheet" href="./styles.css?v=1.1">
    <link rel="stylesheet" href="./homepage.css?v=1.1">
    <link rel="stylesheet" href="./modals.css?v=1.1">
    <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp" rel="stylesheet" />

    <meta name="google-site-verification" content="oXaesfezWKgtLF-y4wt6U69q7xoFPclCb-ZEkEOX1lM" />
    <script>
        if (window.location.hostname.endsWith('.web.app') || window.location.hostname.endsWith('.firebaseapp.com')) {
            window.location.replace('https://grego-koine.com' + window.location.pathname + window.location.search + window.location.hash);
        }
    </script>
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@graph": [
        {
          "@type": "WebApplication",
          "name": "Koiné — Grego Bíblico Interativo (Grego Koiné / Coinê)",
          "alternateName": ["Grego Koiné App", "Grego Coinê", "Koine Greek Studio"],
          "url": "https://grego-koine.web.app/",
          "applicationCategory": "EducationalApplication",
          "operatingSystem": "Android, iOS, Windows, macOS, Web",
          "inLanguage": ["pt-BR", "en", "es"],
          "offers": {
            "@type": "Offer",
            "price": "0",
            "priceCurrency": "BRL"
          },
          "description": "Aplicativo e curso gratuito de Grego Koiné (Coinê): 21 capítulos de gramática do Novo Testamento, Dicionário Léxico com 5.500 vocábulos, Estúdio de Exegese Interlinear e Flashcards."
        },
        {
          "@type": "Course",
          "name": "Curso Completo de Grego do Novo Testamento (Koiné / Coinê)",
          "description": "Curso gratuito estruturado em 20 capítulos e anexos baseado na Gramática de Introdução ao Grego do Novo Testamento do Prof. Dr. Gerson Luis Linden.",
          "provider": {
            "@type": "Organization",
            "name": "Koiné — Grego Bíblico",
            "sameAs": "https://grego-koine.web.app/"
          },
          "isAccessibleForFree": true,
          "inLanguage": ["pt-BR", "en", "es"]
        }
      ]
    }
    </script>
    <style>
        .beta-badge {
            background: #f59e0b;
            color: #fff;
            font-size: 0.65rem;
            padding: 0.2rem 0.5rem;
            border-radius: 12px;
            vertical-align: middle;
            margin-left: 0.5rem;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
        }

        /* Cores de destaque para os cards do Beta */
        .card-azul {
            border-top: 4px solid #3b82f6 !important;
        }

        .card-roxo {
            border-top: 4px solid #a855f7 !important;
        }

        .card-verde {
            border-top: 4px solid #10b981 !important;
        }

        .card-azul .topic-icon {
            color: #3b82f6 !important;
        }

        .card-roxo .topic-icon {
            color: #a855f7 !important;
        }

        .card-verde .topic-icon {
            color: #10b981 !important;
        }
    </style>

    <script>
        const savedTheme = localStorage.getItem('theme') || localStorage.getItem('koine-theme');
        if (savedTheme === 'dark' || (!savedTheme && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
            document.documentElement.setAttribute('data-theme', 'dark');
        }
    </script>
</head>

<body>
    <nav class="navbar" role="navigation" aria-label="Main navigation">
        <div class="nav-container">
            <div class="nav-brand">
                <a href="/" class="logo-link">
                    <span class="logo-text">Κοινή</span>
                </a>
            </div>

            <button class="nav-toggle" aria-label="Toggle navigation menu" aria-expanded="false">
                <span class="hamburger"></span>
                <span class="hamburger"></span>
                <span class="hamburger"></span>
            </button>

            <div class="nav-menu" id="nav-menu">

                <div class="nav-actions">
                    <div class="user-section">
                        <div class="user-profile" id="user-profile" style="display: none;">
                            <img class="user-avatar" id="user-avatar" src="" alt="User Avatar">
                            <span class="user-name" id="user-name"></span>
                            <button class="user-menu-btn" id="user-menu-btn" aria-label="Abrir menu do usuário">
                                <span class="material-symbols-sharp">expand_more</span>
                            </button>
                        </div>
                        <button class="login-button" id="login-button" aria-label="Abrir modal de login">
                            <span class="material-symbols-sharp">person</span>
                            <span>Login</span>
                        </button>
                    </div>

                    <button class="theme-switch" aria-label="Alternar tema claro/escuro">
                        <svg class="theme-icon sun" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20"
                            height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round" style="display: none;">
                            <circle cx="12" cy="12" r="5"></circle>
                            <line x1="12" y1="1" x2="12" y2="3"></line>
                            <line x1="12" y1="21" x2="12" y2="23"></line>
                            <line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
                            <line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
                            <line x1="1" y1="12" x2="3" y2="12"></line>
                            <line x1="21" y1="12" x2="23" y2="12"></line>
                            <line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
                            <line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
                        </svg>
                        <svg class="theme-icon moon" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="20"
                            height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                            stroke-linecap="round" stroke-linejoin="round">
                            <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
                        </svg>
                    </button>
                    <button id="donation" class="donation-button">
                        <span class="material-symbols-sharp">favorite</span>
                        Apoie este projeto
                    </button>
                </div>
            </div>
        </div>
    </nav>

    <header class="hero-header" role="banner">
        <h1 class="logo">Κοινή</h1>
        <p class="welcome-text" role="doc-introduction">
            Descubra o grego bíblico através de uma gramática introdutória completa e intuitiva.
            Estude o idioma original do Novo Testamento com lições graduais, exercícios práticos e vocabulário
            essencial.
        </p>
        <a href="./TRILHA-DE-ESTUDOS/index.html" class="start-button">Iniciar Estudos</a>
    </header>

    <main class="main-content" role="main">
        <!-- LAUNCHER EXCLUSIVO MOBILE / APP (Oculto no PC, Visível no Celular) -->
        <section class="mobile-app-launcher" aria-label="Menu Rápido do Aplicativo">
            <a href="./TRILHA-DE-ESTUDOS/index.html" class="launcher-hero-card">
                <div class="launcher-hero-info">
                    <span class="launcher-badge">▶ Curso Principal</span>
                    <h2>Trilha de Estudos</h2>
                    <p>Gramática do NT passo a passo + Certificado</p>
                </div>
                <span class="material-symbols-sharp launcher-hero-icon">school</span>
            </a>

            <div class="launcher-section-label">Vocabulário & Jogos</div>
            <div class="launcher-grid-4">
                <a href="./VOCABULARIO/VOCABULOS/index.html" class="launcher-tile">
                    <span class="material-symbols-sharp tile-icon" style="color:#0d9488;">menu_book</span>
                    <span>Léxico</span>
                </a>
                <a href="./VOCABULARIO/LISTS/index.html" class="launcher-tile">
                    <span class="material-symbols-sharp tile-icon" style="color:#0d9488;">inventory_2</span>
                    <span>Listas</span>
                </a>
                <a href="./VOCABULARIO/CARDS/index.html" class="launcher-tile">
                    <span class="material-symbols-sharp tile-icon" style="color:#0d9488;">style</span>
                    <span>Cards 3D</span>
                </a>
                <a href="./VOCABULARIO/MATCH-GAME/index.html" class="launcher-tile">
                    <span class="material-symbols-sharp tile-icon" style="color:#0d9488;">extension</span>
                    <span>Match</span>
                </a>
            </div>

            <div class="launcher-section-label">Laboratórios & Exegese Bíblica</div>
            <div class="launcher-grid-2">
                <a href="./EXEGESE/estudio.html" class="launcher-card-wide green">
                    <span class="material-symbols-sharp">manage_search</span>
                    <div>
                        <strong>Estúdio de Exegese</strong>
                        <small>NT Interlinear & Análise</small>
                    </div>
                </a>
                <a href="./VERBOS/index.html" class="launcher-card-wide blue">
                    <span class="material-symbols-sharp">bolt</span>
                    <div>
                        <strong>Treino de Verbos</strong>
                        <small>Tempos, Vozes e Modos</small>
                    </div>
                </a>
                <a href="./SUBSTANTIVOS/index.html" class="launcher-card-wide purple">
                    <span class="material-symbols-sharp">category</span>
                    <div>
                        <strong>Substantivos</strong>
                        <small>Casos e Declinações</small>
                    </div>
                </a>
                <a href="./ALFABETO/index.html" class="launcher-card-wide amber">
                    <span class="material-symbols-sharp">sort_by_alpha</span>
                    <div>
                        <strong>Alfabeto Grego</strong>
                        <small>Sons e Leitura Básica</small>
                    </div>
                </a>
            </div>
        </section>

        <section class="topics-section" aria-labelledby="topics-title">
            <h2 id="topics-title">Explore os Recursos</h2>
            <div class="topics-grid">
                <div class="topic-card">
                    <a href="./TRILHA-DE-ESTUDOS/index.html"></a>
                    <span class="topic-icon material-symbols-sharp">school</span>
                    <h3>Trilhas de Estudo</h3>
                    <p>Siga um caminho estruturado de aprendizado com lições progressivas e exercícios práticos</p>
                </div>

                <div class="topic-card">
                    <a href="./VOCABULARIO/LISTS/index.html"></a>
                    <span class="topic-icon material-symbols-sharp">list</span>
                    <h3>Gerenciar Listas</h3>
                    <p>Crie e organize suas próprias listas de vocabulário personalizadas</p>
                </div>

                <div class="topic-card">
                    <a href="./VOCABULARIO/VOCABULOS/index.html" class="suite-tab"></a>
                    <span class="material-symbols-sharp">menu_book</span>
                    <h3>Vocábulos (Léxico)</h3>
                    <p>Aprenda o vocabulário essencial do grego bíblico</p>
                </div>

                <!-- <div class="topic-card">
                    <a href="./src/html/conteudo/sintaxe.html"></a>
                    <span class="topic-icon material-symbols-sharp">hub</span>
                    <h3>Sintaxe</h3>
                    <p>Entenda como as frases são construídas nos textos bíblicos originais</p>
                </div> -->
            </div>
        </section>
        <section class="topics-section" style="margin-top: 3rem;">
            <h2>
                <span class="material-symbols-sharp"
                    style="font-size: 2.2rem; vertical-align: middle; color: var(--accent);">science</span>
                Laboratório de Prática
            </h2>
            <p style="color: var(--text-secondary); margin-bottom: 2rem; font-size: 1.1rem;">Teste as nossas novas
                ferramentas interativas (Versão Beta).</p>

            <div class="topics-grid">
                <div class="topic-card card-azul">
                    <a href="./VERBOS/index.html"></a> <span class="topic-icon material-symbols-sharp">spellcheck</span>
                    <h3>Verbos <span class="beta-badge">BETA</span></h3>
                    <p>Treine a conjugação de verbos regulares e contratos em todos os tempos, modos e vozes.</p>
                </div>

                <div class="topic-card card-roxo">
                    <a href="./SUBSTANTIVOS/index.html"></a> <span
                        class="topic-icon material-symbols-sharp">category</span>
                    <h3>Substantivos <span class="beta-badge">BETA</span></h3>
                    <p>Pratique a declinação de casos morfológicos, identificando género, número e caso.</p>
                </div>

                <div class="topic-card card-verde">
                    <a href="./EXEGESE/estudio.html"></a> <span
                        class="topic-icon material-symbols-sharp">manage_search</span>
                    <h3>Exegese <span class="beta-badge">BETA</span></h3>
                    <p>Analise textos originais do Novo Testamento, fazendo a ponte entre a gramática e a tradução.</p>
                </div>
            </div>
        </section>
        <section class="exercises-section">
            <h2 class="exercises-title">
                <span style="font-size: xxx-large;" class="material-symbols-sharp">stadia_controller</span>
                Aprenda com GAMES
            </h2>

            <div class="exercise-card">
                <a class="link-click" href="./VOCABULARIO/CARDS/index.html">
                    <h4>Cartões de Vocabulário</h4>
                </a>
                <p>Crie suas próprias listas de palavras e acompanhe seu progresso de memorização.</p>
            </div>
            <div class="exercise-card">
                <a class="link-click" href="./VOCABULARIO/MATCH-GAME/index.html">
                    <h4>Jogo de Associação</h4>
                </a>
                <p>Conecte palavras gregas com suas traduções. Pratique seu vocabulário de forma divertida e interativa.
                </p>
            </div>
        </section>

        <div class="decorative-animation">
            <div class="shape shape-1"></div>
            <div class="shape shape-2"></div>
            <div class="shape shape-3"></div>
        </div>
    </main>

    <footer class="footer" role="contentinfo">
        <div class="footer-content">
            <div class="footer-section">
                <h4>Koiné - Grego Bíblico</h4>
                <p>Plataforma completa para o aprendizado do grego bíblico (Koiné) com recursos interativos, trilhas de
                    estudo e vocabulário essencial do Novo Testamento.</p>
            </div>

            <div class="footer-section">
                <h4>Recursos</h4>
                <nav class="footer-links" aria-label="Footer navigation">
                    <a href="./TRILHA-DE-ESTUDOS/index.html">Trilhas de Estudo</a>
                    <a href="./ALFABETO/index.html">Alfabeto Grego</a>
                    <a href="./VOCABULARIO/CARDS/index.html">Cartões de Vocabulário</a>
                    <a href="./VOCABULARIO/MATCH-GAME/index.html">Match Game</a>
                    <a href="./VERBOS/index.html">Treino de Verbos</a>
                    <a href="./SUBSTANTIVOS/index.html">Treino de Substantivos</a>
                    <a href="./EXEGESE/estudio.html">Estúdio de Exegese</a>
                    <a href="./catalogo-aulas.html">Catálogo Completo de Aulas (PT/EN/ES)</a>
                    <a href="./instalar.html">Baixar Aplicativo (Android/PC)</a>
                </nav>
            </div>

            <div class="footer-section">
                <h4>Sobre o Projeto</h4>
                <nav class="footer-links">
                    <a href="#sobre">Sobre</a>
                    <a href="#contato">Contato</a>
                    <a href="#recursos">Recursos</a>
                    <a href="#privacidade">Privacidade</a>

                </nav>
            </div>

            <div class="footer-section">
                <h4>Apoie o Projeto</h4>
                <p>Este projeto é gratuito e de código aberto. Sua contribuição nos ajuda a manter e melhorar a
                    plataforma.</p>
                <div class="donation-section">
                    <button id="donation" class="donation-button">
                        <span class="material-symbols-sharp">favorite</span>
                        Apoie este projeto
                    </button>
                </div>
            </div>
        </div>
        <section class="faq-section container" id="faq">
            <div class="faq-header">
                <span class="material-symbols-sharp accent-icon">help_center</span>
                <h2>Perguntas Frequentes</h2>
                <p>Tire as suas dúvidas sobre o projeto e sobre o estudo do Grego Bíblico.</p>
            </div>

            <div class="faq-container">
                <div class="faq-item">
                    <button class="faq-trigger">
                        <h3>Este curso de grego bíblico koiné é realmente grátis?</h3>
                        <span class="material-symbols-sharp icon">keyboard_arrow_down</span>
                    </button>
                    <div class="faq-content">
                        <div class="faq-content-inner">
                            <p>Sim! O projeto Koiné é um <strong>curso grátis</strong> criado para democratizar o acesso
                                ao estudo das Escrituras no idioma original. Nosso objetivo é fornecer ferramentas de
                                alta qualidade (gramática, vocabulário e exercícios interativos) para seminaristas,
                                pastores e qualquer pessoa interessada em aprender <strong>grego bíblico
                                    gratuito</strong> online.</p>
                        </div>
                    </div>
                </div>

                <div class="faq-item">
                    <button class="faq-trigger">
                        <h3>Qual a diferença entre Grego Koiné e Grego Coine?</h3>
                        <span class="material-symbols-sharp icon">keyboard_arrow_down</span>
                    </button>
                    <div class="faq-content">
                        <div class="faq-content-inner">
                            <p>Morfologicamente, nenhuma. Trata-se da mesma língua (κοινή διάλεκτος - língua comum). A
                                diferença está apenas na forma de transliterar a palavra grega para o português.
                                Enquanto "Koiné" mantém a grafia mais próxima do original com 'K', muitas pessoas
                                escrevem e pesquisam por <strong>grego coine</strong> usando 'C'. Nosso sistema abrange
                                ambas as nomenclaturas.</p>
                        </div>
                    </div>
                </div>

                <div class="faq-item">
                    <button class="faq-trigger">
                        <h3>Koiné ou Koinê (com til): qual a escrita correta?</h3>
                        <span class="material-symbols-sharp icon">keyboard_arrow_down</span>
                    </button>
                    <div class="faq-content">
                        <div class="faq-content-inner">
                            <p>Em português, a forma acentuada com o acento agudo (Koiné) é a mais frequente para
                                representar a pronúncia. No entanto, o uso do acento circunflexo (<strong>grego
                                    koinê</strong>) também é muito comum em pesquisas e em alguns textos teológicos para
                                indicar o som fechado da vogal 'e' (eta - η). Ambas as formas referem-se ao grego do
                                Novo Testamento.</p>
                        </div>
                    </div>
                </div>

                <div class="faq-item">
                    <button class="faq-trigger">
                        <h3>Para quem é indicado este curso online de grego?</h3>
                        <span class="material-symbols-sharp icon">keyboard_arrow_down</span>
                    </button>
                    <div class="faq-content">
                        <div class="faq-content-inner">
                            <p>Este sistema é ideal para iniciantes que desejam <strong>aprender grego bíblico do
                                    zero</strong>, estudantes de teologia que precisam reforçar a gramática para
                                exegese, ou pastores que querem manter o vocabulário ativo. Se você procura um
                                <strong>curso de grego online gratuito</strong> com foco na leitura do Novo Testamento,
                                o Koiné foi feito para você.
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <div class="footer-bottom">
            <p>&copy; 2024 Koiné - Grego Bíblico. Todos os direitos reservados.</p>
            <p>Desenvolvido com 💙 para estudantes do grego bíblico</p>
        </div>
    </footer>
    <div class="modal" id="donation-modal">
        <div class="modal-content" style="max-width: 500px;">
            <button class="close-modal" id="close-donation-modal">&times;</button>

            <div style="text-align: center; margin-bottom: 1.5rem;">
                <span class="material-symbols-sharp"
                    style="font-size: 3rem; color: var(--accent); margin-bottom: 0.5rem;">volunteer_activism</span>
                <h2 style="margin: 0; color: var(--text-primary);">Apoie o Projeto Koiné</h2>
            </div>

            <div class="modal-body">
                <p
                    style="color: var(--text-secondary); text-align: center; font-size: 0.95rem; line-height: 1.5; margin-bottom: 1.5rem;">
                    O Koiné é e sempre será gratuito. A sua contribuição voluntária ajuda-nos a cobrir os custos de
                    servidores, base de dados e domínio, permitindo-nos dedicar mais tempo a criar novas ferramentas de
                    estudo para a comunidade.
                </p>

                <div class="donation-tabs">
                    <button class="tab-btn active" data-tab="tab-unica">Doação Única</button>
                    <button class="tab-btn" data-tab="tab-assinatura">Assinatura Mensal</button>
                </div>

                <div class="tab-content active" id="tab-unica">
                    <p
                        style="text-align: center; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1rem;">
                        Pagamento único via Mercado Pago (PIX, Cartão ou Boleto).</p>
                    <div class="donation-grid">
                        <a href="https://mpago.la/2V6CtrR" target="_blank" class="donation-btn">R$ 5</a>
                        <a href="https://mpago.la/1Lgubxm" target="_blank" class="donation-btn">R$ 10</a>
                        <a href="https://mpago.la/1qbPpWp" target="_blank" class="donation-btn">R$ 20</a>
                        <a href="https://mpago.la/1rt4CZ1" target="_blank" class="donation-btn">R$ 100</a>
                        <a href="https://link.mercadopago.com.br/gregokoine" target="_blank"
                            class="donation-btn custom">Outro
                            Valor</a>
                    </div>
                </div>

                <div class="tab-content" id="tab-assinatura">
                    <p
                        style="text-align: center; font-size: 0.85rem; color: var(--text-secondary); margin-bottom: 1rem;">
                        Cancele quando quiser. Ideal para nos ajudar a prever os custos do mês.</p>
                    <div class="donation-grid">
                        <a href="https://www.mercadopago.com.br/subscriptions/checkout?preapproval_plan_id=e07be777f404463298e22a44e0b389dc"
                            target="_blank" class="donation-btn">R$ 5 / mês</a>
                        <a href="https://www.mercadopago.com.br/subscriptions/checkout?preapproval_plan_id=ee97397242dd4c448011098cedebe670"
                            target="_blank" class="donation-btn">R$ 10 / mês</a>
                        <a href="https://www.mercadopago.com.br/subscriptions/checkout?preapproval_plan_id=fdc6229419a5474f83d3384cbf53c248"
                            target="_blank" class="donation-btn">R$ 50 / mês</a>
                        <a href="https://www.mercadopago.com.br/subscriptions/checkout?preapproval_plan_id=4ae6839c9a3a4bafb6d05bf319385967"
                            target="_blank" class="donation-btn custom" style="grid-column: span 2;">Valor
                            Personalizado</a>
                    </div>
                </div>

                <div
                    style="margin-top: 2rem; text-align: center; border-top: 1px solid var(--border-color); padding-top: 1rem;">
                    <p
                        style="font-size: 0.8rem; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; gap: 0.5rem;">
                        <span class="material-symbols-sharp"
                            style="font-size: 1rem; color: #009ee3;">verified_user</span>
                        Pagamento 100% seguro via Mercado Pago
                    </p>
                </div>
            </div>
        </div>
    </div>
    <script type="module" src="./firebase-auth.js?v=1.4"></script>
    <script type="module" src="./offline-manager.js?v=1.5"></script>
    <script type="module" src="./bug-reporter.js?v=1.4" defer></script>
    <script>
        // Mobile navigation toggle
        document.addEventListener('DOMContentLoaded', function () {
            const navToggle = document.querySelector('.nav-toggle');
            const navMenu = document.querySelector('.nav-menu');
            const dropdownToggles = document.querySelectorAll('.dropdown-toggle');

            // Toggle mobile menu
            navToggle.addEventListener('click', function () {
                navMenu.classList.toggle('active');
                const isExpanded = navToggle.getAttribute('aria-expanded') === 'true';
                navToggle.setAttribute('aria-expanded', !isExpanded);
                document.body.classList.toggle('nav-open');
            });

            // Handle dropdown menus
            dropdownToggles.forEach(toggle => {
                toggle.addEventListener('click', function (e) {
                    e.preventDefault();
                    const dropdown = this.parentNode;
                    dropdown.classList.toggle('active');
                    const isExpanded = this.getAttribute('aria-expanded') === 'true';
                    this.setAttribute('aria-expanded', !isExpanded);
                });
            });

            // Close menu when clicking outside
            document.addEventListener('click', function (e) {
                if (!e.target.closest('.navbar')) {
                    navMenu.classList.remove('active');
                    navToggle.setAttribute('aria-expanded', 'false');
                    document.body.classList.remove('nav-open');

                    // Close dropdowns
                    document.querySelectorAll('.dropdown.active').forEach(dropdown => {
                        dropdown.classList.remove('active');
                        dropdown.querySelector('.dropdown-toggle').setAttribute('aria-expanded', 'false');
                    });
                }
            });

            // Close menu when pressing Escape
            document.addEventListener('keydown', function (e) {
                if (e.key === 'Escape') {
                    navMenu.classList.remove('active');
                    navToggle.setAttribute('aria-expanded', 'false');
                    document.body.classList.remove('nav-open');
                }
            });
        });

        document.addEventListener('DOMContentLoaded', () => {
            // 1. Lógica de Abrir e Fechar o Modal
            const donationModal = document.getElementById('donation-modal');
            // Substitua '#btn-ajude' pelo ID ou classe do botão "Apoie este projeto" que está no seu header/footer
            const openDonationBtns = document.querySelectorAll('#donation');
            const closeDonationBtn = document.getElementById('close-donation-modal');

            if (donationModal) {
                // Abrir Modal
                openDonationBtns.forEach(btn => {
                    btn.addEventListener('click', (e) => {
                        e.preventDefault();
                        donationModal.style.display = 'flex';
                    });
                });

                // Fechar Modal
                const fecharModal = () => donationModal.style.display = 'none';

                if (closeDonationBtn) closeDonationBtn.addEventListener('click', fecharModal);

                // Clicar fora do modal fecha
                window.addEventListener('click', (e) => {
                    if (e.target === donationModal) fecharModal();
                });
            }

            // 2. Lógica das Abas (Assinatura vs Única)
            const tabBtns = document.querySelectorAll('.donation-tabs .tab-btn');
            const tabContents = document.querySelectorAll('.tab-content');

            tabBtns.forEach(btn => {
                btn.addEventListener('click', () => {
                    // Remove a classe active de todos
                    tabBtns.forEach(b => b.classList.remove('active'));
                    tabContents.forEach(c => c.classList.remove('active'));

                    // Adiciona a classe active no botão clicado e na aba correspondente
                    btn.classList.add('active');
                    const tabId = btn.getAttribute('data-tab');
                    document.getElementById(tabId).classList.add('active');
                });
            });
        });
        /* =========================================
   LÓGICA INTERATIVA DO FAQ (ACCORDION)
   ========================================= */

        document.addEventListener('DOMContentLoaded', () => {
            const faqItems = document.querySelectorAll('.faq-item');

            if (faqItems.length === 0) return; // Segurança caso a seção não exista na página

            faqItems.forEach(item => {
                const trigger = item.querySelector('.faq-trigger');
                const content = item.querySelector('.faq-content');

                trigger.addEventListener('click', () => {
                    const isActive = item.classList.contains('active');

                    // 1. Fecha todos os outros itens abertos (Opcional, mas recomendado para efeito sanfona)
                    faqItems.forEach(otherItem => {
                        if (otherItem !== item) {
                            otherItem.classList.remove('active');
                            otherItem.querySelector('.faq-content').style.maxHeight = null;
                        }
                    });

                    // 2. Alterna o estado do item clicado
                    if (isActive) {
                        // Se estava aberto, fecha
                        item.classList.remove('active');
                        content.style.maxHeight = null;
                    } else {
                        // Se estava fechado, abre calculando a altura real do conteúdo (scrollHeight)
                        item.classList.add('active');
                        content.style.maxHeight = content.scrollHeight + "px";
                    }
                });
            });
        });
    </script>
    <script>
        if ('serviceWorker' in navigator) {
            window.addEventListener('load', () => {
                navigator.serviceWorker.register('./sw.js?v=1.5')
                    .then(registration => {
                        console.log('Service Worker registrado com sucesso no escopo:', registration.scope);
                    })
                    .catch(error => {
                        console.error('Falha ao registrar o Service Worker:', error);
                    });
            });
        }
    </script>
</body>

</html>