</... ``` Aqui está o código completo. Integrei os alunos da lista que você mandou (Maria Eduarda, Lucas Emanuel, Lavinia, etc.) diretamente na nossa estrutura de **Carrossel Infinito ("Marquee")**, mantendo o design que já tínhamos criado (com os cards deslizantes e etiquetas coloridas). **O que foi feito:** 1. **Novos Alunos Inseridos:** Maria Eduarda (940), Lavinia, Ana Julia, João Márcio, Elizyane, Sofia, Letícia, Joana, e Isabella D. Oliveira foram adicionados. 2. **Atualização de Nomes:** Usei as versões dos nomes que você forneceu (ex: "Lucas Emanuel Zaninelli" em vez do nome completo do CSV) para as notas do ENEM, para ficar igual ao seu pedido. 3. **Remoção de Duplicatas:** Se o aluno já tinha nota do ENEM no CSV antigo (como o Lucas e a Roberta), usei a versão nova que você mandou para não aparecer duas vezes. 4. **Ordenação:** Todos foram reordenados da maior nota para a menor. ### Código HTML Final Basta copiar e colar no seu bloco de "HTML Personalizado" no WordPress. O CSS já está embutido no início para garantir que funcione perfeitamente. ```html /* --- Container Geral --- */ .ranking-marquee-wrapper { font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background-color: #f8f9fa; /* Fundo leve */ padding: 40px 0; overflow: hidden; /* Esconde o que sai da tela */ position: relative; max-width: 100%; } /* Título */ .marquee-header { text-align: center; margin-bottom: 30px; padding: 0 20px; } .marquee-header h2 { color: #004a80; font-weight: 800; margin: 0; text-transform: uppercase; letter-spacing: 1px; font-size: 1.8rem; } .marquee-header p { color: #666; margin-top: 5px; font-size: 1rem; } /* --- A Pista do Carrossel (Track) --- */ .marquee-track-container { width: 100%; overflow: hidden; position: relative; } /* Gradientes laterais para suavizar entrada/saída */ .marquee-track-container::before, .marquee-track-container::after { content: ""; position: absolute; top: 0; width: 100px; height: 100%; z-index: 2; pointer-events: none; } .marquee-track-container::before { left: 0; background: linear-gradient(to right, #f8f9fa, transparent); } .marquee-track-container::after { right: 0; background: linear-gradient(to left, #f8f9fa, transparent); } /* A Animação */ .marquee-track { display: flex; gap: 25px; width: max-content; /* Largura se ajusta ao conteúdo */ animation: scroll-left 120s linear infinite; /* Velocidade da animação */ padding: 10px 0; /* Espaço para sombras */ } /* Pausar ao passar o mouse */ .marquee-track:hover { animation-play-state: paused; cursor: grab; } @keyframes scroll-left { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } /* Move metade */ } /* --- O Design do Card "Premium" --- */ .card-item { flex: 0 0 260px; /* Largura fixa */ background: #fff; border-radius: 16px; box-shadow: 0 10px 20px rgba(0,0,0,0.05), 0 2px 6px rgba(0,0,0,0.02); padding: 25px 20px; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; overflow: hidden; border: 1px solid #fff; transition: transform 0.3s ease, box-shadow 0.3s ease; } .card-item:hover { transform: translateY(-5px) scale(1.02); box-shadow: 0 15px 30px rgba(0,0,0,0.1); z-index: 10; } /* Barra colorida no topo */ .card-top-accent { position: absolute; top: 0; left: 0; right: 0; height: 6px; } /* Ícone Troféu */ .trophy-icon { font-size: 2.5rem; margin-bottom: 15px; filter: drop-shadow(0 4px 2px rgba(0,0,0,0.1)); animation: float 3s ease-in-out infinite; } @keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } } /* Informações do Aluno */ .student-info { margin-bottom: 15px; width: 100%; } .student-name { font-size: 1.1rem; font-weight: 700; color: #333; margin: 0 0 10px 0; line-height: 1.3; height: 44px; /* Altura fixa para 2 linhas */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Etiquetas (Tags) de Diferenciação */ .exam-badge { display: inline-block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; padding: 4px 12px; border-radius: 20px; letter-spacing: 0.5px; color: #fff; } /* Cores das Tags */ .tag-vestibular { background: linear-gradient(135deg, #005696, #004a80); } /* Azul UFMS */ .tag-passe { background: linear-gradient(135deg, #00897b, #00695c); } /* Verde Petróleo */ .tag-enem { background: linear-gradient(135deg, #d81b60, #ad1457); } /* Rosa/Roxo */ .tag-default { background: #666; } /* Pontuação */ .score-container { background-color: #f8fafc; width: 100%; padding: 10px; border-radius: 12px; border: 1px solid #eef2f6; } .score-value { display: block; font-size: 2rem; font-weight: 800; color: #1e293b; line-height: 1; } .score-label { font-size: 0.8rem; color: #64748b; text-transform: uppercase; letter-spacing: 1px; } /* Mobile */ @media (max-width: 600px) { .card-item { flex: 0 0 220px; } .score-value { font-size: 1.8rem; } .marquee-header h2 { font-size: 1.5rem; } }