<section id="inventario-equipo" 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 backdrop-blur">
  <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">🎒 Inventario y Equipo</h2>
  <p class="text-slate-200">
    Gestiona todos tus items y equipa armas, armaduras y capas para mejorar tus estadísticas.
  </p>

  <div class="space-y-4">
    <div class="rounded-2xl border border-white/5 bg-slate-900/60 p-5">
      <h3 class="text-lg font-semibold text-white mb-3">📦 Ver tu Inventario</h3>
      <div class="space-y-3 text-sm">
        <div class="bg-slate-900/50 p-3 rounded-lg">
          <code class="text-indigo-200">!inventario [página|filtro]</code>
          <p class="text-xs text-slate-400 mt-1">Aliases: <code class="text-xs">!inv</code></p>
        </div>
        <p class="text-slate-300">Muestra todos tus items con cantidades, información de herramientas y estadísticas.</p>
      </div>
    </div>

    <div class="rounded-2xl border border-white/5 bg-slate-900/60 p-5">
      <h3 class="text-lg font-semibold text-white mb-3">🧤 Equipar Items</h3>
      <div class="space-y-3 text-sm">
        <div class="bg-slate-900/50 p-3 rounded-lg">
          <code class="text-indigo-200">!equipar &lt;slot&gt; &lt;itemKey&gt;</code>
          <p class="text-xs text-slate-400 mt-1">Aliases: <code class="text-xs">!equip</code></p>
        </div>
        <div class="grid gap-3 md:grid-cols-3 mt-3">
          <div class="bg-indigo-500/10 border border-indigo-500/30 rounded-lg p-3">
            <p class="font-semibold text-indigo-200 mb-1">⚔️ weapon</p>
            <p class="text-xs text-slate-300">Armas que aumentan tu daño (ATK)</p>
          </div>
          <div class="bg-indigo-500/10 border border-indigo-500/30 rounded-lg p-3">
            <p class="font-semibold text-indigo-200 mb-1">🛡️ armor</p>
            <p class="text-xs text-slate-300">Armaduras que aumentan tu defensa (DEF)</p>
          </div>
          <div class="bg-indigo-500/10 border border-indigo-500/30 rounded-lg p-3">
            <p class="font-semibold text-indigo-200 mb-1">🧥 cape</p>
            <p class="text-xs text-slate-300">Capas con bonos especiales (HP, stats)</p>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="rounded-2xl border border-emerald-500/30 bg-emerald-500/10 p-5 text-sm text-emerald-100">
    <strong class="block text-base font-semibold text-emerald-200 mb-2">💡 Tip:</strong>
    <p>Usa <code class="rounded bg-emerald-500/20 px-1.5 py-0.5 font-mono text-xs">!player</code> para ver rápidamente tu equipo actual y las estadísticas que te otorgan.</p>
  </div>
</section>
