<div class="space-y-6 xl:space-y-8">
  <!-- Ko-fi card -->
  <div class="rounded-2xl border border-white/10 bg-slate-900/70 shadow-2xl shadow-indigo-500/10 overflow-hidden">
    <div class="p-4 border-b border-white/10">
      <h3 class="text-sm font-semibold text-slate-200">Apoya el proyecto</h3>
    </div>
    <div class="p-2 bg-slate-900">
      <iframe class="rounded-2xl"  id="kofiframe" src="https://ko-fi.com/shnimlz/?hidefeed=true&widget=true&embed=true&preview=true"
              style="border:none;width:100%;padding:4px;background:#0b1020;"
              height="712" title="shnimlz"></iframe>
    </div>
  </div>

  <!-- Info cards -->
  <div class="rounded-2xl border border-indigo-500/20 bg-indigo-500/10 p-4">
    <h4 class="text-sm font-semibold text-indigo-200 mb-2">Novedades</h4>
    <ul class="space-y-1 text-xs text-slate-300">
      <li>• Nueva guía con layout EJS</li>
      <li>• Mejoras de rendimiento del bot</li>
      <li>• Sistema de economía ampliado</li>
    </ul>
  </div>

  <div class="rounded-2xl border border-emerald-500/20 bg-emerald-500/10 p-4">
    <h4 class="text-sm font-semibold text-emerald-200 mb-2">Recursos útiles</h4>
    <ul class="space-y-1 text-xs text-slate-300">
      <li><a class="hover:text-white" href="#primeros-pasos">• Primeros pasos</a></li>
      <li><a class="hover:text-white" href="#economia">• Economía</a></li>
      <li><a class="hover:text-white" href="#faq">• FAQ</a></li>
    </ul>
  </div>
</div>
