<!DOCTYPE html>
<html lang="pt-BR" class="scroll-smooth">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Guia Avançado: Componentes e Variações no Figma</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .step-content ol {
            list-style-type: decimal;
            margin-left: 1.5rem;
            padding-left: 0.5rem;
        }
        .step-content li::marker {
            color: #6366f1;
            font-weight: 700;
        }
        .step-content kbd {
            background: linear-gradient(135deg, #4f46e5, #7c3aed);
            color: #ffffff;
            padding: 0.3rem 0.7rem;
            border-radius: 0.5rem;
            font-weight: 600;
            font-family: monospace;
            border: none;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }
        .step-content .note {
            background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
            border-left: 4px solid #0ea5e9;
            padding: 1.5rem;
            margin: 2rem 0;
            border-radius: 0 1rem 1rem 0;
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
            position: relative;
        }
        .step-content .note::before {
            content: "💡";
            position: absolute;
            top: -0.5rem;
            left: -0.5rem;
            background: #0ea5e9;
            border-radius: 50%;
            width: 2rem;
            height: 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
        }
        .nav-link.completed {
            text-decoration: line-through;
            color: #10b981;
            background: linear-gradient(135deg, #d1fae5, #a7f3d0);
        }
        .nav-link.completed > div::before {
            content: '🎉';
            color: #10b981;
            margin-right: 0.5rem;
            font-weight: 700;
        }
        .nav-link.active {
            color: #ffffff;
            background: linear-gradient(135deg, #6366f1, #8b5cf6);
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            transform: translateX(0.25rem);
            transition: all 0.3s ease;
        }
        .accordion-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .accordion-button svg {
            transition: transform 0.3s ease-in-out;
        }
        .accordion-button[aria-expanded="true"] svg {
            transform: rotate(180deg);
        }
        .progress-glow {
            background: linear-gradient(90deg, #f59e0b, #10b981, #3b82f6, #8b5cf6);
            background-size: 400% 400%;
            animation: progressGlow 3s ease infinite;
        }
        @keyframes progressGlow {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        .celebration {
            animation: celebrate 0.6s ease-in-out;
        }
        @keyframes celebrate {
            0%, 100% { transform: scale(1); }
            50% { transform: scale(1.05); }
        }
        .step-checkbox:checked + label {
            animation: checkboxSuccess 0.4s ease-in-out;
        }
        @keyframes checkboxSuccess {
            0% { transform: scale(1); }
            50% { transform: scale(1.1); }
            100% { transform: scale(1); }
        }
        .achievement-badge {
            background: linear-gradient(135deg, #fbbf24, #f59e0b);
            color: white;
            padding: 0.5rem 1rem;
            border-radius: 2rem;
            font-weight: bold;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
            animation: badgeAppear 0.5s ease-out;
        }
        @keyframes badgeAppear {
            0% { opacity: 0; transform: translateY(-10px) scale(0.8); }
            100% { opacity: 1; transform: translateY(0) scale(1); }
        }
        .glass-effect {
            background: rgba(255, 255, 255, 0.15);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        .hover-lift {
            transition: all 0.3s ease;
        }
        .hover-lift:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        }
        .mobile-menu-button {
            display: none;
        }
        @media (max-width: 1023px) {
            .mobile-menu-button {
                display: block;
                position: fixed;
                top: 1rem;
                left: 1rem;
                z-index: 1001;
                background: linear-gradient(135deg, #6366f1, #8b5cf6);
                color: white;
                border: none;
                border-radius: 0.5rem;
                padding: 0.75rem;
                box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
                cursor: pointer;
            }
            .mobile-sidebar {
                position: fixed;
                top: 0;
                left: -100%;
                width: 80%;
                max-width: 300px;
                height: 100vh;
                background: rgba(255, 255, 255, 0.15);
                backdrop-filter: blur(10px);
                border-right: 1px solid rgba(255, 255, 255, 0.2);
                transition: left 0.3s ease-in-out;
                z-index: 1000;
                overflow-y: auto;
                padding: 5rem 1.5rem 1.5rem;
            }
            .mobile-sidebar.open {
                left: 0;
            }
            .mobile-overlay {
                position: fixed;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background: rgba(0, 0, 0, 0.5);
                z-index: 999;
                opacity: 0;
                visibility: hidden;
                transition: all 0.3s ease-in-out;
            }
            .mobile-overlay.open {
                opacity: 1;
                visibility: visible;
            }
        }
    </style>
</head>
<body class="text-slate-800">
    <div class="flex">
        <button class="mobile-menu-button" id="mobile-menu-toggle">
            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
            </svg>
        </button>
        
        <div class="mobile-overlay" id="mobile-overlay"></div>

        <aside class="w-1/4 h-screen sticky top-0 glass-effect border-r border-white/20 p-6 hidden lg:flex flex-col mobile-sidebar" id="sidebar">
            <div class="text-center mb-6">
                <h2 class="text-xl font-bold text-white mb-2">🎯 Missões do Figma</h2>
                <div id="user-level" class="achievement-badge inline-block">
                    <span>📊 Nível 1</span>
                </div>
                <div id="user-xp" class="text-white text-sm mt-2">0 / 100 XP</div>
            </div>
            <nav id="step-navigation" class="mt-4 overflow-y-auto">
                <ul class="space-y-1">
                    <li><a href="#part1" class="nav-link font-semibold text-white hover:bg-white/20 rounded-lg p-3 block hover-lift">🚀 Parte 1: O Componente Básico</a></li>
                    <ul class="ml-4 pl-2 border-l border-white/30 space-y-1">
                        <li><a href="#activity1-1" id="nav-activity1-1" class="nav-link text-sm text-white/80 hover:bg-white/10 rounded-lg p-2 pr-0 block hover-lift"><div class="truncate">⭐ 1.1: Criando o Botão</div></a></li>
                        <li><a href="#activity1-2" id="nav-activity1-2" class="nav-link text-sm text-white/80 hover:bg-white/10 rounded-lg p-2 pr-0 block hover-lift"><div class="truncate">🔄 1.2: Criando Instâncias</div></a></li>
                        <li><a href="#activity1-3" id="nav-activity1-3" class="nav-link text-sm text-white/80 hover:bg-white/10 rounded-lg p-2 pr-0 block hover-lift"><div class="truncate">✨ 1.3: Testando a Mágica</div></a></li>
                        <li><a href="#activity1-4" id="nav-activity1-4" class="nav-link text-sm text-white/80 hover:bg-white/10 rounded-lg p-2 pr-0 block hover-lift"><div class="truncate">🔓 1.4: Desvinculando Instâncias</div></a></li>
                    </ul>
                    <li><a href="#part2" class="nav-link font-semibold text-white hover:bg-white/20 rounded-lg p-3 block hover-lift mt-2">🎨 Parte 2: Propriedades e Variações</a></li>
                    <ul class="ml-4 pl-2 border-l border-white/30 space-y-1">
                        <li><a href="#activity2-1" id="nav-activity2-1" class="nav-link text-sm text-white/80 hover:bg-white/10 rounded-lg p-2 pr-0 block hover-lift"><div class="truncate">🎭 2.1: Criando Variações</div></a></li>
                        <li><a href="#activity2-2" id="nav-activity2-2" class="nav-link text-sm text-white/80 hover:bg-white/10 rounded-lg p-2 pr-0 block hover-lift"><div class="truncate">📝 2.2: Propriedade de Texto</div></a></li>
                        <li><a href="#activity2-3" id="nav-activity2-3" class="nav-link text-sm text-white/80 hover:bg-white/10 rounded-lg p-2 pr-0 block hover-lift"><div class="truncate">🔘 2.3: Propriedade Booleana</div></a></li>
                        <li><a href="#activity2-4" id="nav-activity2-4" class="nav-link text-sm text-white/80 hover:bg-white/10 rounded-lg p-2 pr-0 block hover-lift"><div class="truncate">🔄 2.4: Troca de Instância</div></a></li>
                    </ul>
                    <li><a href="#final-activity" class="nav-link font-semibold text-white hover:bg-white/20 rounded-lg p-3 block hover-lift mt-2">🏆 Atividade Final: Seu Cartão</a></li>
                    <ul class="ml-4 pl-2 border-l border-white/30 space-y-1">
                         <li><a href="#final-activity-1" id="nav-final-activity-1" class="nav-link text-sm text-white/80 hover:bg-white/10 rounded-lg p-2 pr-0 block hover-lift"><div class="truncate">🎯 1: Criar o Card Mestre</div></a></li>
                        <li><a href="#final-activity-2" id="nav-final-activity-2" class="nav-link text-sm text-white/80 hover:bg-white/10 rounded-lg p-2 pr-0 block hover-lift"><div class="truncate">🌟 2: Adicionar Variações</div></a></li>
                        <li><a href="#final-activity-3" id="nav-final-activity-3" class="nav-link text-sm text-white/80 hover:bg-white/10 rounded-lg p-2 pr-0 block hover-lift"><div class="truncate">⚙️ 3: Adicionar Propriedades</div></a></li>
                        <li><a href="#final-activity-4" id="nav-final-activity-4" class="nav-link text-sm text-white/80 hover:bg-white/10 rounded-lg p-2 pr-0 block hover-lift"><div class="truncate">🎨 4: Criar Várias Instâncias</div></a></li>
                    </ul>
                     <li><a href="#sharing" class="nav-link font-semibold text-white hover:bg-white/20 rounded-lg p-3 block hover-lift mt-2">📤 Compartilhando seu Trabalho</a></li>
                </ul>
            </nav>
        </aside>

        <main class="w-full lg:w-3/4 p-6 md:p-10">
            <header class="mb-8 text-center">
                <div class="glass-effect rounded-2xl p-8 hover-lift">
                    <h1 class="text-5xl font-extrabold text-white mb-4">
                        🎮 Figma Academy 
                        <span class="bg-gradient-to-r from-yellow-400 to-orange-500 bg-clip-text text-transparent">
                            Level Up!
                        </span>
                    </h1>
                    <p class="text-xl text-white/90 mb-4">Domine os componentes do Figma como um verdadeiro designer! 🚀</p>
                    <div class="flex justify-center space-x-4 text-sm text-white/80 mb-4">
                        <span>🎯 1º DS - Etec Mogi Guaçu</span>
                        <span>⚡ Design Digital</span>
                    </div>
                    <div class="flex justify-center">
                        <a href="quiz.html" class="bg-gradient-to-r from-yellow-500 to-orange-500 hover:from-yellow-600 hover:to-orange-600 text-white font-bold py-3 px-6 rounded-xl transform hover:scale-105 transition-all duration-300 shadow-lg">
                            🎯 Fazer Quiz - Teste seus Conhecimentos!
                        </a>
                    </div>
                </div>
            </header>
            
            <div class="sticky top-0 glass-effect backdrop-blur-sm py-6 z-10 rounded-xl mb-6 hover-lift">
                <div class="px-6">
                    <div class="flex justify-between items-center mb-3">
                        <span class="text-white font-bold">🎯 Progresso da Missão</span>
                        <div id="achievement-container" class="flex space-x-2"></div>
                    </div>
                    <div class="w-full bg-white/20 rounded-full h-4 overflow-hidden">
                        <div id="progress-bar" class="progress-glow h-4 rounded-full transition-all duration-1000 flex items-center justify-end pr-2" style="width: 0%">
                            <span class="text-white text-xs font-bold">🔥</span>
                        </div>
                    </div>
                    <div class="flex justify-between items-center mt-3">
                        <p id="progress-text" class="text-white/90 font-medium">🚀 Iniciando a jornada...</p>
                        <span id="streak-counter" class="text-white/80 text-sm">🔥 Sequência: 0</span>
                    </div>
                </div>
            </div>

            <div class="prose max-w-none mt-6 space-y-8">
                
                <!-- Acordião Parte 1 -->
                <div class="accordion-item glass-effect rounded-2xl shadow-2xl border border-white/20 overflow-hidden hover-lift">
                    <button class="accordion-button w-full text-left p-6 flex justify-between items-center" aria-expanded="true">
                        <h2 id="part1" class="text-2xl font-bold text-white">🚀 Parte 1: O Componente Básico (O Botão Mágico)</h2>
                        <svg class="w-6 h-6 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                    </button>
                    <div class="accordion-content step-content px-6 pb-6">
                        <p class="mb-4 text-white/90">⭐ Componentes são como modelos reutilizáveis. Pensem neles como uma "matriz" ou um "molde" de um elemento que vocês usarão várias vezes. A grande vantagem é que, se vocês mudarem a matriz, todas as "cópias" (instâncias) mudam automaticamente! 🎯</p>

                        <div id="activity1-1" class="activity-step border-t border-white/20 pt-6">
                            <h3 class="text-xl font-semibold mb-3 flex items-center text-white">
                                <input type="checkbox" class="step-checkbox mr-3 h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" data-nav-target="nav-activity1-1">
                                ⭐ 1.1: Criando seu Primeiro Componente
                            </h3>
                            <ol class="text-white/80 space-y-2">
                                <li>🎨 Abra o Figma e crie um novo arquivo de design.</li>
                                <li>✍️ Pressione a tecla <kbd>T</kbd> para selecionar a ferramenta de texto. Clique na tela e digite "Botão".</li>
                                <li>📦 Com o texto selecionado, pressione <kbd>Shift</kbd> + <kbd>A</kbd> para aplicar um <strong>Auto Layout Frame</strong>.</li>
                                <li>🏷️ No painel "Layers" à esquerda, renomeie o frame para "Botão Primário".</li>
                                <li>🎨 No painel "Design" à direita, adicione um <strong>Fill</strong> (Preenchimento) e escolha uma cor.</li>
                                <li>📏 Ajuste o <strong>Padding</strong> na seção Auto Layout: Horizontal para <kbd>20</kbd> e Vertical para <kbd>10</kbd>.</li>
                                <li>🔵 Ajuste o <strong>Corner radius</strong> para <kbd>8</kbd> para arredondar os cantos.</li>
                            </ol>
                        </div>

                        <div id="activity1-2" class="activity-step border-t border-white/20 pt-6 mt-6">
                             <h3 class="text-xl font-semibold mb-3 flex items-center text-white">
                                <input type="checkbox" class="step-checkbox mr-3 h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" data-nav-target="nav-activity1-2">
                                🔄 1.2: Transformando em Componente e Criando Instâncias
                            </h3>
                            <ol class="text-white/80 space-y-2">
                               <li>👆 Selecione seu "Botão Primário".</li>
                                <li>💎 Na barra de ferramentas superior, clique no ícone de quatro losangos (<strong>Create Component</strong>). A borda do seu botão ficará roxa. Este é o seu <strong>Componente Mestre</strong>! 👑</li>
                                <li>📋 Vá para o painel <strong>Assets</strong> (à esquerda), encontre seu "Botão Primário" e arraste 3 ou 4 cópias para a tela. Essas são as <strong>instâncias</strong>.</li>
                            </ol>
                        </div>
                        
                        <div id="activity1-3" class="activity-step border-t border-white/20 pt-6 mt-6">
                            <h3 class="text-xl font-semibold mb-3 flex items-center text-white">
                                <input type="checkbox" class="step-checkbox mr-3 h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" data-nav-target="nav-activity1-3">
                                ✨ 1.3: Testando a Mágica dos Componentes
                            </h3>
                            <ol class="text-white/80 space-y-2">
                                <li>👑 Selecione o <strong>Componente Mestre</strong> (o original com borda roxa).</li>
                                <li>🎨 Altere a cor de fundo (Fill), o arredondamento dos cantos (Corner radius) e o texto para "Começar Agora".</li>
                                <li>🪄 Observe como todas as instâncias são atualizadas instantaneamente! É mágica! ✨</li>
                            </ol>
                        </div>

                        <div id="activity1-4" class="activity-step border-t border-white/20 pt-6 mt-6">
                            <h3 class="text-xl font-semibold mb-3 flex items-center text-white">
                                <input type="checkbox" class="step-checkbox mr-3 h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" data-nav-target="nav-activity1-4">
                                🔓 1.4: Sobrescrevendo e Desvinculando Instâncias
                            </h3>
                            <ol class="text-white/80 space-y-2">
                               <li>🎯 Selecione apenas <strong>uma instância</strong> e altere sua cor de fundo. Apenas ela mudará.</li>
                                <li>⛓️‍💥 Com a mesma instância selecionada, vá ao painel Design, clique nos três pontinhos e selecione <strong>Detach instance</strong> para desvinculá-la completamente.</li>
                            </ol>
                        </div>
                    </div>
                </div>

                <!-- Acordião Parte 2 -->
                <div class="accordion-item glass-effect rounded-2xl shadow-2xl border border-white/20 overflow-hidden hover-lift">
                    <button class="accordion-button w-full text-left p-6 flex justify-between items-center" aria-expanded="false">
                        <h2 id="part2" class="text-2xl font-bold text-white">🎨 Parte 2: Dominando as Propriedades e Variações</h2>
                        <svg class="w-6 h-6 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                    </button>
                    <div class="accordion-content step-content px-6 pb-6">
                        <p class="mb-4 text-white/90">🚀 Agora vamos para a parte mais avançada: as propriedades que tornam seus componentes super flexíveis! É aqui que a mágica acontece de verdade! ⚡</p>
                        
                        <div id="activity2-1" class="activity-step border-t border-white/20 pt-6">
                            <h3 class="text-xl font-semibold mb-3 flex items-center text-white">
                                 <input type="checkbox" class="step-checkbox mr-3 h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" data-nav-target="nav-activity2-1">
                                🎭 2.1: Criando Variações (Variants)
                            </h3>
                            <ol class="text-white/80 space-y-2">
                                <li>🎯 Selecione seu componente mestre e, no painel "Properties", clique no <kbd>+</kbd> e selecione <strong>Variant</strong>.</li>
                                <li>📦 Isso cria um <strong>Component Set</strong>. Renomeie a `Property 1` para "Estado".</li>
                                <li>➕ Clique no <kbd>+</kbd> na borda do Component Set para adicionar uma nova variação.</li>
                                <li>🌟 Selecione a nova variação, escureça sua cor e renomeie seu valor de "Variant 2" para "Hover".</li>
                                <li>🎮 Arraste uma instância para a tela e teste a troca de "Estado" no painel Design.</li>
                            </ol>
                        </div>

                        <div id="activity2-2" class="activity-step border-t border-white/20 pt-6 mt-6">
                            <h3 class="text-xl font-semibold mb-3 flex items-center text-white">
                                <input type="checkbox" class="step-checkbox mr-3 h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" data-nav-target="nav-activity2-2">
                                📝 2.2: Propriedade de Texto (Text Property)
                            </h3>
                             <ol class="text-white/80 space-y-2">
                                <li>🎯 Selecione o <strong>Component Set</strong>. Em "Properties", clique no <kbd>+</kbd> e selecione <strong>Text</strong>.</li>
                                 <li>🏷️ Nomeie a propriedade como "Rótulo" e o valor padrão como "Clique Aqui".</li>
                                 <li>🔗 Selecione o texto dentro de <strong>cada variação</strong> do seu botão. No painel Design, na seção "Text", clique no ícone "Apply property" e vincule-o à propriedade "Rótulo".</li>
                                 <li>✨ Teste em uma instância, alterando o valor do "Rótulo" no painel Design.</li>
                            </ol>
                        </div>

                        <div id="activity2-3" class="activity-step border-t border-white/20 pt-6 mt-6">
                             <h3 class="text-xl font-semibold mb-3 flex items-center text-white">
                                <input type="checkbox" class="step-checkbox mr-3 h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" data-nav-target="nav-activity2-3">
                                🔘 2.3: Propriedade Booleana (Boolean Property)
                            </h3>
                            <ol class="text-white/80 space-y-2">
                                <li>🏠 Crie um componente de ícone (ex: um ícone de casa, nomeie-o "Icone/Home").</li>
                                <li>📌 Arraste uma instância desse ícone para dentro de <strong>cada variação</strong> do seu botão.</li>
                                <li>🔘 Selecione o <strong>Component Set</strong>. Adicione uma propriedade <strong>Boolean</strong> chamada "Tem Ícone", com valor padrão "True".</li>
                                <li>🔗 Selecione o ícone dentro de <strong>cada variação</strong>. No painel Design, na seção "Layer", clique no ícone "Apply property" e vincule à propriedade "Tem Ícone".</li>
                                <li>💫 Teste em uma instância, ligando e desligando o seletor "Tem Ícone".</li>
                            </ol>
                        </div>

                        <div id="activity2-4" class="activity-step border-t border-white/20 pt-6 mt-6">
                            <h3 class="text-xl font-semibold mb-3 flex items-center text-white">
                                <input type="checkbox" class="step-checkbox mr-3 h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" data-nav-target="nav-activity2-4">
                                🔄 2.4: Propriedade de Troca de Instância (Instance Swap)
                            </h3>
                            <ol class="text-white/80 space-y-2">
                                <li>🎨 Crie mais dois componentes de ícone (ex: "Icone/Share", "Icone/Download").</li>
                                <li>🔄 Selecione o <strong>Component Set</strong>. Adicione uma propriedade <strong>Instance Swap</strong> chamada "Ícone", com valor padrão "Icone/Home".</li>
                                <li>🔗 Selecione o ícone dentro de <strong>cada variação</strong>. No painel Design, na seção "Instance", clique no ícone "Apply property" e vincule à propriedade "Ícone".</li>
                                <li>🎮 Teste em uma instância, trocando o ícone através do novo seletor "Ícone".</li>
                            </ol>
                        </div>
                    </div>
                </div>
                
                <!-- Acordião Atividade Final -->
                 <div class="accordion-item glass-effect rounded-2xl shadow-2xl border border-white/20 overflow-hidden hover-lift">
                    <button class="accordion-button w-full text-left p-6 flex justify-between items-center" aria-expanded="false">
                        <h2 id="final-activity" class="text-2xl font-bold text-white">🏆 Atividade Final: Seu Cartão com Variações</h2>
                        <svg class="w-6 h-6 text-yellow-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
                    </button>
                    <div class="accordion-content step-content px-6 pb-6">
                         <p class="text-white/90">🚀 Agora é a hora de aplicar tudo o que vocês aprenderam! Vamos criar algo incrível! 💪</p>
                         
                         <div id="final-activity-1" class="activity-step border-t border-white/20 pt-6 mt-6">
                             <h3 class="text-xl font-semibold mb-3 flex items-center text-white">
                                <input type="checkbox" class="step-checkbox mr-3 h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" data-nav-target="nav-final-activity-1">
                                🎯 1: Criar o Card Mestre
                            </h3>
                            <ol class="text-white/80 space-y-2">
                                <li>📏 Crie um Frame (200x250px) com imagem, título, descrição e preço.</li>
                                <li>🔧 Use Auto Layout para organizar tudo e transforme o card em um <strong>Componente Mestre</strong>. 👑</li>
                            </ol>
                         </div>

                         <div id="final-activity-2" class="activity-step border-t border-white/20 pt-6 mt-6">
                             <h3 class="text-xl font-semibold mb-3 flex items-center text-white">
                                <input type="checkbox" class="step-checkbox mr-3 h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" data-nav-target="nav-final-activity-2">
                                🌟 2: Adicionar Variações de Estado
                            </h3>
                            <ol class="text-white/80 space-y-2">
                                <li>🎭 Transforme em um <strong>Component Set</strong> e crie duas variações: "Default" e "Em Promoção". 🔥</li>
                            </ol>
                         </div>

                         <div id="final-activity-3" class="activity-step border-t border-white/20 pt-6 mt-6">
                             <h3 class="text-xl font-semibold mb-3 flex items-center text-white">
                                <input type="checkbox" class="step-checkbox mr-3 h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" data-nav-target="nav-final-activity-3">
                                ⚙️ 3: Adicionar Propriedades
                            </h3>
                            <ol class="text-white/80 space-y-2">
                                <li>🔗 Adicione e vincule propriedades de <strong>Texto</strong> (Título, Descrição, Preço) e <strong>Booleana</strong> (Tem Favorito). ❤️</li>
                            </ol>
                         </div>

                         <div id="final-activity-4" class="activity-step border-t border-white/20 pt-6 mt-6">
                             <h3 class="text-xl font-semibold mb-3 flex items-center text-white">
                                <input type="checkbox" class="step-checkbox mr-3 h-5 w-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" data-nav-target="nav-final-activity-4">
                                🎨 4: Criar Várias Instâncias
                            </h3>
                            <ol class="text-white/80 space-y-2">
                                <li>✨ Crie pelo menos 4 instâncias do seu card e personalize cada uma usando as propriedades que você criou. Seja criativo! 🌈</li>
                            </ol>
                         </div>
                    </div>
                </div>

                <div id="sharing" class="glass-effect rounded-2xl shadow-2xl border border-white/20 p-6 step-content activity-step hover-lift">
                    <h2 class="text-2xl font-bold mb-4 text-white">📤 Compartilhando Seu Trabalho</h2>
                    <ol class="text-white/80 space-y-2">
                        <li>🔗 No canto superior direito do Figma, clique em <strong>Share</strong>.</li>
                        <li>⚙️ Mude a permissão de "Anyone with the link" para <strong>Can edit</strong>.</li>
                        <li>📋 Clique em <strong>Copy link</strong> e cole o link na tarefa do Microsoft Teams.</li>
                    </ol>
                    <div class="note">
                        <p><strong>🎉 Parabéns, designer!</strong> A prática leva à perfeição! Quanto mais vocês experimentarem, mais intuitivo o processo se tornará. Vocês arrasaram! 🚀✨</p>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const checkboxes = document.querySelectorAll('.step-checkbox');
            const progressBar = document.getElementById('progress-bar');
            const progressText = document.getElementById('progress-text');
            const userLevel = document.getElementById('user-level');
            const userXp = document.getElementById('user-xp');
            const achievementContainer = document.getElementById('achievement-container');
            const streakCounter = document.getElementById('streak-counter');
            const totalSteps = checkboxes.length;
            
            let currentXP = 0;
            let currentLevel = 1;
            let streak = 0;
            let achievements = [];
            
            const achievements_list = [
                { id: 'first_step', name: '🌟 Primeiro Passo', description: 'Complete sua primeira atividade', requirement: 1 },
                { id: 'quarter_master', name: '🚀 Decolando', description: 'Complete 25% das atividades', requirement: Math.ceil(totalSteps * 0.25) },
                { id: 'half_master', name: '⚡ Meio Caminho', description: 'Complete 50% das atividades', requirement: Math.ceil(totalSteps * 0.5) },
                { id: 'almost_there', name: '🔥 Quase Lá', description: 'Complete 75% das atividades', requirement: Math.ceil(totalSteps * 0.75) },
                { id: 'master', name: '🏆 Mestre Figma', description: 'Complete todas as atividades', requirement: totalSteps },
                { id: 'part1_master', name: '🎯 Básico Dominado', description: 'Complete toda a Parte 1', requirement: 'part1' },
                { id: 'part2_master', name: '🎨 Avançado Dominado', description: 'Complete toda a Parte 2', requirement: 'part2' },
                { id: 'final_master', name: '🌟 Projeto Final', description: 'Complete a atividade final', requirement: 'final' }
            ];

            function calculateLevel(xp) { return Math.floor(xp / 100) + 1; }

            function showCelebration(message) {
                const celebration = document.createElement('div');
                celebration.innerHTML = `<div style="position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: linear-gradient(135deg, #fbbf24, #f59e0b); color: white; padding: 2rem; border-radius: 1rem; font-size: 1.5rem; font-weight: bold; z-index: 1000; text-align: center; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); animation: celebrate 0.6s ease-in-out;">${message}</div>`;
                document.body.appendChild(celebration);
                setTimeout(() => { document.body.removeChild(celebration); }, 2000);
            }

            function checkAchievements(completedSteps) {
                achievements_list.forEach(achievement => {
                    if (achievements.includes(achievement.id)) return;
                    let unlocked = false;
                    if (typeof achievement.requirement === 'number' && completedSteps >= achievement.requirement) {
                        unlocked = true;
                    } else if (achievement.requirement === 'part1') {
                        const part1Checkboxes = document.querySelectorAll('[data-nav-target^="nav-activity1"]');
                        unlocked = Array.from(part1Checkboxes).every(cb => cb.checked);
                    } else if (achievement.requirement === 'part2') {
                        const part2Checkboxes = document.querySelectorAll('[data-nav-target^="nav-activity2"]');
                        unlocked = Array.from(part2Checkboxes).every(cb => cb.checked);
                    } else if (achievement.requirement === 'final') {
                        const finalCheckboxes = document.querySelectorAll('[data-nav-target^="nav-final-activity"]');
                        unlocked = Array.from(finalCheckboxes).every(cb => cb.checked);
                    }
                    if (unlocked) {
                        achievements.push(achievement.id);
                        showAchievement(achievement);
                        showCelebration(`🎉 Conquista desbloqueada! ${achievement.name}`);
                        setTimeout(() => updateProgress(), 100);
                    }
                });
            }

            function showAchievement(achievement) {
                const badge = document.createElement('span');
                badge.className = 'achievement-badge text-xs';
                badge.innerHTML = achievement.name;
                badge.title = achievement.description;
                achievementContainer.appendChild(badge);
            }

            function getMotivationalMessage(percentage) {
                if (percentage === 0) return '🚀 Iniciando a jornada...';
                if (percentage < 25) return '💪 Aquecendo os motores!';
                if (percentage < 50) return '🔥 Pegando o ritmo!';
                if (percentage < 75) return '⚡ Voando alto!';
                if (percentage < 100) return '🏁 Reta final!';
                return '🏆 Missão cumprida! Você é incrível!';
            }

            function updateProgress() {
                const checkedSteps = document.querySelectorAll('.step-checkbox:checked').length;
                const percentage = totalSteps > 0 ? (checkedSteps / totalSteps) * 100 : 0;
                
                let baseXP = checkedSteps * 25;
                let bonusXP = achievements.length * 50;
                currentXP = baseXP + bonusXP;
                
                const newLevel = calculateLevel(currentXP);
                if (newLevel > currentLevel) {
                    currentLevel = newLevel;
                    showCelebration(`🎉 Level Up! Agora você é nível ${currentLevel}!`);
                }
                
                streak = checkedSteps > 0 ? checkedSteps : 0;
                
                const currentLevelXP = (currentLevel - 1) * 100;
                const nextLevelXP = currentLevel * 100;
                const xpInCurrentLevel = currentXP - currentLevelXP;
                const xpNeededForNextLevel = nextLevelXP - currentLevelXP;
                
                progressBar.style.width = `${percentage}%`;
                progressText.textContent = getMotivationalMessage(percentage);
                userLevel.innerHTML = `📊 Nível ${currentLevel}`;
                
                if (percentage === 100 && currentXP >= totalSteps * 25 + 8 * 50) {
                    userXp.textContent = `🏆 MESTRE MÁXIMO! ${currentXP} XP`;
                } else {
                    userXp.textContent = `${xpInCurrentLevel} / ${xpNeededForNextLevel} XP`;
                }
                
                streakCounter.textContent = `🔥 Sequência: ${streak}`;
                
                if (percentage === 100) {
                    progressBar.classList.add('progress-glow');
                    showCelebration('🎊 PARABÉNS! Você completou tudo! Você é um MESTRE do Figma! 🏆');
                }

                checkboxes.forEach(checkbox => {
                    const navTargetId = checkbox.getAttribute('data-nav-target');
                    const navLink = document.getElementById(navTargetId);
                    if (navLink) {
                        if (checkbox.checked) {
                            navLink.classList.add('completed');
                            checkbox.closest('.activity-step').classList.add('celebration');
                            setTimeout(() => { checkbox.closest('.activity-step').classList.remove('celebration'); }, 600);
                        } else {
                            navLink.classList.remove('completed');
                        }
                    }
                });
                
                checkAchievements(checkedSteps);
            }

            checkboxes.forEach(checkbox => {
                checkbox.addEventListener('change', (e) => {
                    if (e.target.checked) {
                        e.target.closest('h3').style.animation = 'checkboxSuccess 0.4s ease-in-out';
                    }
                    updateProgress();
                });
            });

            // Lógica do Acordião
            const accordionButtons = document.querySelectorAll('.accordion-button');
            accordionButtons.forEach(button => {
                const content = button.nextElementSibling;
                if (button.getAttribute('aria-expanded') === 'true') {
                    content.style.maxHeight = content.scrollHeight + 'px';
                }
                button.addEventListener('click', () => {
                    const isExpanded = button.getAttribute('aria-expanded') === 'true';
                    button.setAttribute('aria-expanded', !isExpanded);
                    if (!isExpanded) {
                        content.style.maxHeight = content.scrollHeight + 'px';
                    } else {
                        content.style.maxHeight = '0px';
                    }
                });
            });

            // Lógica da Navegação Ativa com Scroll
            const navLinks = document.querySelectorAll('#step-navigation a');
            const sections = document.querySelectorAll('.activity-step, h2[id]');
            
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const id = entry.target.id;
                        navLinks.forEach(link => {
                            link.classList.remove('active');
                            if (link.getAttribute('href') === `#${id}` || (link.id && `nav-${id}` === link.id) ) {
                                link.classList.add('active');
                            }
                        });
                    }
                });
            }, { rootMargin: '-30% 0px -70% 0px', threshold: 0 });

            sections.forEach(section => { observer.observe(section); });
            
            // Mobile Menu Logic
            const mobileMenuToggle = document.getElementById('mobile-menu-toggle');
            const mobileOverlay = document.getElementById('mobile-overlay');
            const sidebar = document.getElementById('sidebar');
            
            function toggleMobileMenu() {
                sidebar.classList.toggle('open');
                mobileOverlay.classList.toggle('open');
            }
            
            function closeMobileMenu() {
                sidebar.classList.remove('open');
                mobileOverlay.classList.remove('open');
            }
            
            mobileMenuToggle.addEventListener('click', toggleMobileMenu);
            mobileOverlay.addEventListener('click', closeMobileMenu);
            
            navLinks.forEach(link => {
                link.addEventListener('click', (e) => {
                    if (window.innerWidth < 1024) { closeMobileMenu(); }
                    
                    const href = link.getAttribute('href');
                    if (href && href.startsWith('#')) {
                        const targetId = href.substring(1);
                        const targetElement = document.getElementById(targetId);
                        
                        if (targetElement) {
                            if (targetId === 'part1' || targetId === 'part2' || targetId === 'final-activity') {
                                const sectionAccordion = targetElement.closest('.accordion-item');
                                if (sectionAccordion) {
                                    const accordionButton = sectionAccordion.querySelector('.accordion-button');
                                    const accordionContent = sectionAccordion.querySelector('.accordion-content');
                                    if (accordionButton && accordionContent) {
                                        accordionButton.setAttribute('aria-expanded', 'true');
                                        accordionContent.style.maxHeight = accordionContent.scrollHeight + 'px';
                                    }
                                }
                            } else {
                                let accordionContent = targetElement.closest('.accordion-content');
                                if (!accordionContent) {
                                    accordionContent = targetElement.parentElement?.querySelector('.accordion-content');
                                }
                                if (accordionContent) {
                                    const accordionButton = accordionContent.previousElementSibling;
                                    if (accordionButton && accordionButton.classList.contains('accordion-button')) {
                                        const isExpanded = accordionButton.getAttribute('aria-expanded') === 'true';
                                        if (!isExpanded) {
                                            accordionButton.setAttribute('aria-expanded', 'true');
                                            accordionContent.style.maxHeight = accordionContent.scrollHeight + 'px';
                                        }
                                    }
                                }
                            }
                            setTimeout(() => {
                                const yOffset = -100;
                                const y = targetElement.getBoundingClientRect().top + window.pageYOffset + yOffset;
                                window.scrollTo({top: y, behavior: 'smooth'});
                            }, 100);
                        }
                    }
                });
            });
            
            updateProgress();
            setTimeout(() => { showCelebration('🎮 Bem-vindos à Figma Academy! Prontos para virar mestres do design? 🚀'); }, 1000);
        });
    </script>
</body>
</html>