<section id="logros" class="rounded-3xl bg-gradient-to-br from-slate-800/50 to-slate-900/50 backdrop-blur-xl border border-white/10 p-8 shadow-2xl shadow-indigo-500/10">
  <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-white to-indigo-200">🏆 Logros</h2>
  <p class="text-slate-200">Completa objetivos para obtener recompensas únicas y mostrar tu progreso.</p>

  <div class="grid gap-6 md:grid-cols-2">
    <div class="space-y-3 rounded-2xl border border-white/5 bg-slate-900/60 p-5">
      <h3 class="text-lg font-semibold text-white">📊 Ver tus Logros</h3>
      <div class="bg-slate-900/50 p-3 rounded-lg text-sm">
        <code class="text-indigo-200">!logros</code>
      </div>
      <p class="text-slate-300 text-sm">Muestra logros completados y pendientes, con su progreso.</p>
    </div>
    <div class="space-y-3 rounded-2xl border border-white/5 bg-slate-900/60 p-5">
      <h3 class="text-lg font-semibold text-white">🎯 Progreso</h3>
      <ul class="list-disc space-y-1 pl-5 text-sm text-slate-200">
        <li>Juega minijuegos y combates</li>
        <li>Completa misiones</li>
        <li>Alcanza rachas diarias</li>
        <li>Explora nuevas funciones (crafteo, fundición, etc.)</li>
      </ul>
    </div>
  </div>

  <div class="mt-6 rounded-2xl border border-fuchsia-500/30 bg-fuchsia-500/10 p-5 text-sm text-fuchsia-100">
    <strong class="block text-base font-semibold text-fuchsia-200 mb-2">Tip</strong>
    <p>Algunos logros otorgan títulos o insignias visibles en el servidor. ¡Presúmelos!</p>
  </div>
</section>
