feat: agregar secciones de ejemplos básicos y avanzados, mejorar contenido y diseño en la documentación EJS

src/server/views/pages/index.ejs

@@ -54,16 +54,18 @@
   </div>
 </header>
 
-<div class="mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16 max-w-[90rem]">
+<div class="mx-auto px-4 sm:px-6 lg:px-8 py-12 lg:py-16 max-w-[120rem]">
   <div class="flex min-h-screen flex-col">
 
-    <div class="mx-auto flex w-full max-w-[90rem] flex-1 flex-col gap-10 px-0 md:px-6 pb-16 lg:flex-row lg:px-10">
+  <div class="mx-auto flex w-full max-w-[120rem] flex-1 flex-col gap-10 px-0 md:px-6 pb-16 lg:flex-row lg:px-10">
       <%- await include('../partials/toc') %>
 
-  <main class="flex-1 min-w-0 lg:max-w-[60rem] xl:max-w-[72rem]">
+  <main class="flex-1 min-w-0 lg:max-w-none xl:max-w-none 2xl:max-w-none">
         <div class="mx-auto flex w-full flex-col gap-8">
           <%- await include('../partials/sections/primeros-pasos') %>
           <%- await include('../partials/sections/comandos-basicos') %>
+          <%- await include('../partials/sections/ejemplos-basicos') %>
+          <%- await include('../partials/sections/ejemplos-avanzados') %>
           <%- await include('../partials/sections/sistema-juego') %>
           <%- await include('../partials/sections/minijuegos') %>
           <%- await include('../partials/sections/inventario-equipo') %>

src/server/views/partials/navbar.ejs

@@ -1,5 +1,5 @@
 <nav class="fixed inset-x-0 top-0 z-50 border-b border-white/10 bg-slate-950/70 backdrop-blur">
-  <div class="mx-auto max-w-[90rem] px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
+  <div class="mx-auto max-w-[120rem] px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
     <a href="#" class="text-white font-bold tracking-wide"><%= appName %></a>
     <div class="hidden md:flex items-center gap-4 text-sm">
       <a href="#primeros-pasos" class="text-slate-300 hover:text-white">Guía</a>

src/server/views/partials/sections/crafteo.ejs

@@ -19,8 +19,59 @@
     </div>
   </div>
 
+  <div class="mt-6 grid gap-6 md:grid-cols-2">
+    <div class="rounded-2xl border border-white/5 bg-slate-900/60 p-5">
+      <h3 class="text-lg font-semibold text-white">🧭 Cómo craftear (paso a paso)</h3>
+      <ol class="list-decimal list-inside mt-2 space-y-2 text-slate-300 text-sm">
+        <li>Escribe <span class="font-mono">!recetas</span> y elige el <em>nombre clave</em> de la receta (por ejemplo: <span class="font-mono">espada</span>).</li>
+        <li>Revisa los ingredientes requeridos y tu inventario con <span class="font-mono">!inventario</span>.</li>
+        <li>Si la receta exige nivel/herramienta, verifica tu estado: <span class="font-mono">!perfil</span> y tu equipo con <span class="font-mono">!equipo</span>.</li>
+        <li>Ejecuta <span class="font-mono">!craftear &lt;receta&gt; [cantidad]</span>. Ejemplos:
+          <div class="mt-2 space-y-1">
+            <div class="bg-slate-900/50 p-2 rounded"><code class="text-indigo-200">!craftear espada</code></div>
+            <div class="bg-slate-900/50 p-2 rounded"><code class="text-indigo-200">!craftear espada 3</code></div>
+          </div>
+        </li>
+        <li>Si cumples los requisitos, recibirás el/los objeto(s) al instante en tu inventario.</li>
+      </ol>
+      <p class="text-slate-400 text-xs mt-3">Consejo: si una receta admite múltiples resultados o variantes, en <span class="font-mono">!recetas</span> verás notas adicionales.</p>
+    </div>
+
+    <div class="rounded-2xl border border-white/5 bg-slate-900/60 p-5">
+      <h3 class="text-lg font-semibold text-white">📌 Requisitos típicos</h3>
+      <ul class="mt-2 space-y-2 text-slate-300 text-sm">
+        <li>Ingredientes exactos en cantidad suficiente.</li>
+        <li>Nivel mínimo del jugador para la receta.</li>
+        <li>Herramienta adecuada equipada (si aplica).</li>
+      </ul>
+      <div class="mt-3 rounded-lg border border-yellow-500/30 bg-yellow-500/10 p-3 text-yellow-100 text-xs">
+        Algunas recetas avanzadas podrían requerir materiales raros o pasos previos (p. ej., procesar un material en <em>fundición</em> antes de craftear).
+      </div>
+    </div>
+  </div>
+
+  <div class="mt-6 rounded-2xl border border-white/5 bg-slate-900/60 p-5">
+    <h3 class="text-lg font-semibold text-white">✅ Mensajes esperados</h3>
+    <ul class="mt-2 space-y-2 text-slate-300 text-sm">
+      <li>Éxito: “Has crafteado <span class="font-mono">&lt;objeto&gt;</span> x<span class="font-mono">&lt;cantidad&gt;</span>”.</li>
+      <li>Faltan materiales: “No tienes suficientes <span class="font-mono">&lt;material&gt;</span>”.</li>
+      <li>Requisito: “Nivel insuficiente para esta receta” o “Necesitas <span class="font-mono">&lt;herramienta&gt;</span> equipada”.</li>
+    </ul>
+  </div>
+
   <div class="mt-6 rounded-2xl border border-indigo-500/30 bg-indigo-500/10 p-5 text-sm text-indigo-100">
     <strong class="block text-base font-semibold text-indigo-200 mb-2">Nota</strong>
     <p>Las recetas pueden actualizarse con nuevos parches. Revisa <span class="font-mono">!recetas</span> después de una actualización.</p>
   </div>
+
+  <div class="mt-4 rounded-2xl border border-rose-500/30 bg-rose-500/10 p-5 text-sm text-rose-100">
+    <strong class="block text-base font-semibold text-rose-200 mb-2">Errores comunes y cómo resolverlos</strong>
+    <ul class="list-disc list-inside space-y-2">
+      <li><span class="font-semibold">Receta no encontrada:</span> Asegúrate de usar el nombre correcto tal como aparece en <span class="font-mono">!recetas</span>.</li>
+      <li><span class="font-semibold">Faltan materiales:</span> Junta los recursos con minijuegos o compra/intercambia y vuelve a intentar.</li>
+      <li><span class="font-semibold">Nivel insuficiente:</span> Sube de nivel con actividades del juego hasta cumplir el requisito.</li>
+      <li><span class="font-semibold">Herramienta incorrecta o sin durabilidad:</span> Equipa la herramienta adecuada o repárala/sustitúyela.</li>
+      <li><span class="font-semibold">Cantidad demasiado alta:</span> Reduce la cantidad o craftea en varios intentos.</li>
+    </ul>
+  </div>
 </section>

src/server/views/partials/sections/creacion-contenido.ejs

@@ -1,50 +1,116 @@
 <section id="creacion-contenido" class="rounded-3xl bg-gradient-to-br from-red-900/20 to-orange-900/20 backdrop-blur-xl border border-red-500/30 p-8 shadow-2xl">
   <h2 class="text-3xl sm:text-4xl font-bold mb-3 bg-clip-text text-transparent bg-gradient-to-r from-red-200 to-orange-200">🎨 Creación de Contenido</h2>
-  <p class="text-slate-100">Todo desde Discord, sin tocar código: editores con botones y modales para crear items, áreas, mobs, recetas y ofertas.</p>
+  <p class="text-slate-100">Guía técnica paso a paso para crear <strong>items</strong>, <strong>áreas/niveles</strong>, <strong>mobs</strong> y <strong>ofertas</strong> directamente desde Discord. Requiere permiso <span class="font-mono">Manage Guild</span> o rol de staff.</p>
 
   <div class="grid gap-6 md:grid-cols-2">
     <div class="space-y-3 rounded-2xl border border-white/5 bg-black/20 p-5">
       <h3 class="text-lg font-semibold text-white">📦 Items: crear/editar</h3>
       <div class="bg-black/30 p-3 rounded-lg text-sm">
-        <pre class="text-orange-200 whitespace-pre-wrap">!item-crear &lt;key&gt;
+        <pre class="text-orange-200 whitespace-pre-wrap">1) Crear base
-Base → nombre, descripción, stackable, icon
+!item-crear iron_sword
-Tags → etiquetas
+Base → Nombre: "Espada de Hierro", Descripción, Stackable: false,1
-Props (JSON) → tool/food/breakable/…
+Tags → weapon, tier2
-Receta → ingredientes y output (⭐ nuevo)</pre>
+
+2) Props (JSON) comunes
+{
+  "tool": { "type": "sword", "tier": 2 },
+  "damage": 15,
+  "breakable": { "enabled": true, "maxDurability": 200 }
+}
+
+3) Receta (modal ⭐)
+Habilitar: true
+Produce: 1
+Ingredientes: iron_ingot:3, wood_plank:1
+
+4) Guardar → ✅ Item creado
+Prueba: !craftear iron_sword</pre>
       </div>
       <p class="text-slate-300 text-sm">Usa <span class="font-mono">!item-editar</span>, <span class="font-mono">!item-ver</span>, <span class="font-mono">!items-lista</span> para gestionar.</p>
     </div>
     <div class="space-y-3 rounded-2xl border border-white/5 bg-black/20 p-5">
-      <h3 class="text-lg font-semibold text-white">🧭 Áreas y Niveles</h3>
+      <h3 class="text-lg font-semibold text-white">🧭 Áreas y Niveles (MINE/LAGOON/FIGHT/FARM)</h3>
       <div class="bg-black/30 p-3 rounded-lg text-sm">
-        <pre class="text-orange-200 whitespace-pre-wrap">!area-crear mine.iron_cavern
+  <pre class="text-orange-200 whitespace-pre-wrap">1) Crear área
+!area-crear mine.iron_cavern
+Config (JSON): {
+  "cooldownSeconds": 60,
+  "description": "Caverna rica en hierro",
+  "icon": "⛏️"
+}
+Guardar → ✅ Área creada
+
+2) Crear nivel 1
 !area-nivel mine.iron_cavern 1
-Config → cooldown, descripción, icono
+Requisitos (JSON): {
-Requisitos → herramienta/tier
+  "tool": { "required": true, "toolType": "pickaxe", "minTier": 2 }
-Recompensas → tabla y pesos
+}
-Mobs → tabla y pesos</pre>
+Recompensas (JSON): {
+  "draws": 2,
+  "table": [
+    { "type": "coins", "amount": 50, "weight": 10 },
+    { "type": "item",  "itemKey": "iron_ore", "qty": 2, "weight": 8 }
+  ]
+}
+Mobs (JSON, opcional): {
+  "draws": 1,
+  "table": [ { "mobKey": "cave_spider", "weight": 10 } ]
+}
+Guardar → ✅ Nivel guardado</pre>
+      </div>
+      <div class="bg-black/30 p-3 rounded-lg text-xs">
+        <div class="text-orange-200 font-semibold mb-1">Errores comunes</div>
+        <ul class="list-disc pl-5 space-y-1 text-orange-100">
+          <li><span class="font-mono">mobKey</span> o <span class="font-mono">itemKey</span> inexistente → crea primero o corrige la key</li>
+          <li>Pesos mal balanceados → revisa <span class="font-mono">weight</span> (no negativos; no tienen que sumar 100)</li>
+          <li>Herramienta requerida mal configurada → revisa <span class="font-mono">toolType</span> y <span class="font-mono">minTier</span></li>
+        </ul>
       </div>
     </div>
   </div>
 
   <div class="grid gap-6 md:grid-cols-2 mt-6">
     <div class="space-y-3 rounded-2xl border border-white/5 bg-black/20 p-5">
-      <h3 class="text-lg font-semibold text-white">👹 Mobs</h3>
+      <h3 class="text-lg font-semibold text-white">👹 Mobs (enemigos/NPCs)</h3>
       <div class="bg-black/30 p-3 rounded-lg text-sm">
-        <pre class="text-orange-200 whitespace-pre-wrap">!mob-crear goblin
+        <pre class="text-orange-200 whitespace-pre-wrap">1) Crear mob
-Base → nombre, categoría
+!mob-crear goblin
-Stats (JSON) → attack, hp, defense, xp
+Base → Nombre: Goblin, Categoría: enemies
-Drops (JSON) → tabla con pesos</pre>
+Stats (JSON): { "attack": 10, "hp": 50, "defense": 3, "xpReward": 25 }
+Drops (JSON): {
+  "draws": 2,
+  "table": [
+    { "type": "coins", "amount": 20, "weight": 10 },
+    { "type": "item",  "itemKey": "leather", "qty": 1, "weight": 5 }
+  ]
+}
+Guardar → ✅ Mob creado</pre>
       </div>
+      <p class="text-slate-300 text-xs">Revisa con <span class="font-mono">!mobs-lista</span> y <span class="font-mono">!mob-eliminar &lt;key&gt;</span> si necesitas limpiar datos de prueba.</p>
     </div>
     <div class="space-y-3 rounded-2xl border border-white/5 bg-black/20 p-5">
       <h3 class="text-lg font-semibold text-white">🛒 Ofertas de Tienda</h3>
       <div class="bg-black/30 p-3 rounded-lg text-sm">
-        <pre class="text-orange-200 whitespace-pre-wrap">!offer-crear
+        <pre class="text-orange-200 whitespace-pre-wrap">1) Crear oferta
-Base → itemKey, habilitada
+!offer-crear
-Precio (JSON) → coins y/o items
+Base → itemKey: iron_sword, Habilitada: true
-Límites → por usuario / stock global
+Precio (JSON): { "coins": 100 }
-Ventana → fechas inicio/fin</pre>
+— o —
+Precio (JSON): {
+  "coins": 50,
+  "items": [ { "itemKey": "iron_ore", "qty": 5 } ]
+}
+Límites → por usuario: 5, stock global: 100
+Ventana → inicio/fin ISO (opcional)
+Guardar → ✅ Oferta guardada</pre>
+      </div>
+      <div class="bg-black/30 p-3 rounded-lg text-xs">
+        <div class="text-orange-200 font-semibold mb-1">Errores comunes</div>
+        <ul class="list-disc pl-5 space-y-1 text-orange-100">
+          <li><span class="font-mono">itemKey</span> no existe → crea el ítem primero</li>
+          <li>Formato de precio inválido → respeta estructura de <span class="font-mono">coins</span> e <span class="font-mono">items</span></li>
+          <li>Ventana inválida → usa fechas ISO: <span class="font-mono">YYYY-MM-DDTHH:MM:SSZ</span></li>
+        </ul>
       </div>
     </div>
   </div>

src/server/views/partials/sections/ejemplos-avanzados.ejs

@@ -0,0 +1,55 @@
+<section id="ejemplos-avanzados" 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">🧪 Ejemplos Avanzados</h2>
+  <p class="text-slate-200">Workflows completos inspirados en tu documentación para staff. Sigue los pasos y copia/pega los JSON cuando se soliciten.</p>
+
+  <div class="space-y-6">
+    <div class="space-y-2 rounded-2xl border border-white/5 bg-slate-900/60 p-5">
+      <h3 class="text-lg font-semibold text-white">1) Sistema de Minería (básico)</h3>
+      <pre class="text-indigo-200 text-sm whitespace-pre-wrap bg-slate-900/40 p-3 rounded-lg"># Ítem Herramienta
+!item-crear wooden_pickaxe
+Props (JSON): {"tool": {"type": "pickaxe", "tier": 1}, "breakable": {"enabled": true, "maxDurability": 50, "durabilityPerUse": 1}}
+
+# Ítem Recurso
+!item-crear copper_ore
+Props (JSON): {"craftingOnly": false}
+
+# Área y Nivel
+!area-crear mine.starter
+Config (JSON): {"cooldownSeconds": 30, "icon": "⛏️"}
+!area-nivel mine.starter 1
+Requisitos (JSON): {"tool": {"required": true, "toolType": "pickaxe", "minTier": 1}}
+Recompensas (JSON): {"draws": 2, "table": [{"type":"coins","amount":10,"weight":10},{"type":"item","itemKey":"copper_ore","qty":1,"weight":8}]}</pre>
+    </div>
+
+    <div class="space-y-2 rounded-2xl border border-white/5 bg-slate-900/60 p-5">
+      <h3 class="text-lg font-semibold text-white">2) Cofre de Recompensa Diaria</h3>
+      <pre class="text-indigo-200 text-sm whitespace-pre-wrap bg-slate-900/40 p-3 rounded-lg">!item-crear daily_chest
+Props (JSON): {
+  "chest": {"enabled": true, "rewards": [
+    {"type": "coins", "amount": 500},
+    {"type": "item", "itemKey": "health_potion", "qty": 3}
+  ], "consumeOnOpen": true}
+}</pre>
+    </div>
+
+    <div class="space-y-2 rounded-2xl border border-white/5 bg-slate-900/60 p-5">
+      <h3 class="text-lg font-semibold text-white">3) Espada Legendaria (cadena resumida)</h3>
+      <pre class="text-indigo-200 text-sm whitespace-pre-wrap bg-slate-900/40 p-3 rounded-lg"># Materiales base → fundición → crafteo
+!item-crear magic_dust
+!item-crear steel_ingot
+# (fundición configurada por el equipo)
+
+# Producto intermedio
+!item-crear steel_sword_base
+Props (JSON): {"tool": {"type": "sword", "tier": 3}, "damage": 25}
+
+# Encantamiento aplicado
+!encantar steel_sword_base ruby_core
+
+# Producto final
+!item-crear legendary_dragon_slayer
+Props (JSON): {"damage": 45, "breakable": {"enabled": true, "maxDurability": 300}}
+Receta (modal): steel_sword_base:1, magic_dust:3, dragon_scale:1</pre>
+    </div>
+  </div>
+</section>

src/server/views/partials/sections/ejemplos-basicos.ejs

@@ -0,0 +1,47 @@
+<section id="ejemplos-basicos" 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">🧭 Ejemplos Básicos</h2>
+  <p class="text-slate-200">Un arranque rápido con los comandos más usados. Copia y pega en tu servidor:</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">👤 Perfil y progreso</h3>
+      <div class="bg-slate-900/50 p-3 rounded-lg text-sm">
+        <pre class="text-indigo-200 whitespace-pre-wrap">!player
+!stats
+!logros
+!misiones
+!cooldowns</pre>
+      </div>
+    </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">🎮 Minijuegos</h3>
+      <div class="bg-slate-900/50 p-3 rounded-lg text-sm">
+        <pre class="text-indigo-200 whitespace-pre-wrap">!mina
+!pescar
+!pelear
+!plantar</pre>
+      </div>
+      <p class="text-slate-300 text-xs">Tip: Puedes pasar nivel o herramienta, ej. <span class="font-mono">!mina 2 iron_pickaxe</span></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">🎒 Inventario y equipo</h3>
+      <div class="bg-slate-900/50 p-3 rounded-lg text-sm">
+        <pre class="text-indigo-200 whitespace-pre-wrap">!inventario
+!equipar weapon iron_sword
+!comer minor_healing_potion</pre>
+      </div>
+    </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">💰 Economía</h3>
+      <div class="bg-slate-900/50 p-3 rounded-lg text-sm">
+        <pre class="text-indigo-200 whitespace-pre-wrap">!monedas
+!tienda
+!comprar health_potion 2
+!craftear iron_sword</pre>
+      </div>
+    </div>
+  </div>
+</section>

src/server/views/partials/sections/faq.ejs

@@ -1,4 +1,67 @@
-<section id="faq" 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">
+<section id="faq" 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">❓ Preguntas Frecuentes</h2>
-  <p class="text-slate-300 text-sm">Contenido en migración a EJS…</p>
+  <div class="space-y-4 text-slate-200">
+    <details class="group rounded-2xl border border-white/10 bg-slate-900/50 p-4 open:bg-slate-900/60">
+      <summary class="cursor-pointer font-semibold text-white">¿Puedo editar un item después de crearlo?</summary>
+      <div class="mt-2 text-sm">
+        Sí, usa <span class="font-mono">!item-editar &lt;key&gt;</span>. Para ver detalles sin editar: <span class="font-mono">!item-ver &lt;key&gt;</span>.
+      </div>
+    </details>
+
+    <details class="group rounded-2xl border border-white/10 bg-slate-900/50 p-4">
+      <summary class="cursor-pointer font-semibold text-white">¿Cómo elimino un item?</summary>
+      <div class="mt-2 text-sm">
+        Usa <span class="font-mono">!item-eliminar &lt;key&gt;</span>. Atención: es permanente y no se puede deshacer.
+      </div>
+    </details>
+
+    <details class="group rounded-2xl border border-white/10 bg-slate-900/50 p-4">
+      <summary class="cursor-pointer font-semibold text-white">¿Cómo veo todos los items creados?</summary>
+      <div class="mt-2 text-sm">
+        <span class="font-mono">!items-lista [página]</span> muestra una lista paginada con botones para ver detalles.
+      </div>
+    </details>
+
+    <details class="group rounded-2xl border border-white/10 bg-slate-900/50 p-4">
+      <summary class="cursor-pointer font-semibold text-white">¿Qué formato tienen las fechas ISO?</summary>
+      <div class="mt-2 text-sm">
+        Usa <span class="font-mono">YYYY-MM-DDTHH:MM:SSZ</span>. Ejemplos: <span class="font-mono">2025-01-15T00:00:00Z</span>, <span class="font-mono">2025-12-25T23:59:59Z</span>.
+      </div>
+    </details>
+
+    <details class="group rounded-2xl border border-white/10 bg-slate-900/50 p-4">
+      <summary class="cursor-pointer font-semibold text-white">¿Puedo crear items globales?</summary>
+      <div class="mt-2 text-sm">
+        Solo los administradores del bot pueden crear items globales. Los items que crees serán locales a tu servidor.
+      </div>
+    </details>
+
+    <details class="group rounded-2xl border border-white/10 bg-slate-900/50 p-4">
+      <summary class="cursor-pointer font-semibold text-white">¿Cuántos niveles puedo crear por área?</summary>
+      <div class="mt-2 text-sm">
+        No hay límite técnico; se recomiendan 5–10 por área para una progresión balanceada.
+      </div>
+    </details>
+
+    <details class="group rounded-2xl border border-white/10 bg-slate-900/50 p-4">
+      <summary class="cursor-pointer font-semibold text-white">¿Qué pasa si un jugador no tiene la herramienta requerida?</summary>
+      <div class="mt-2 text-sm">
+        El bot indica la herramienta y el tier mínimo necesarios según los requisitos del nivel.
+      </div>
+    </details>
+
+    <details class="group rounded-2xl border border-white/10 bg-slate-900/50 p-4">
+      <summary class="cursor-pointer font-semibold text-white">¿Cómo funcionan los pesos (weights)?</summary>
+      <div class="mt-2 text-sm">
+        Son probabilidades relativas. Si A tiene peso 10 y B peso 5, A es el doble de probable (10/15 vs 5/15).
+      </div>
+    </details>
+
+    <details class="group rounded-2xl border border-white/10 bg-slate-900/50 p-4">
+      <summary class="cursor-pointer font-semibold text-white">¿Puedo hacer que un ítem cure porcentaje de vida?</summary>
+      <div class="mt-2 text-sm">
+        Sí, en props usa <span class="font-mono">food.healPercent</span> (ej. 50) y un cooldown con <span class="font-mono">food.cooldownSeconds</span>.
+      </div>
+    </details>
+  </div>
 </section>

src/server/views/partials/toc.ejs

@@ -5,6 +5,8 @@
   <ul class="ps-8 mt-4 space-y-4 text-sm">
     <li><a class="text-slate-200 transition hover:text-indigo-300" href="#primeros-pasos">🚀 Primeros Pasos</a></li>
     <li><a class="text-slate-200 transition hover:text-indigo-300" href="#comandos-basicos">⚡ Comandos Básicos</a></li>
+  <li><a class="text-slate-200 transition hover:text-indigo-300" href="#ejemplos-basicos">🧭 Ejemplos Básicos</a></li>
+  <li><a class="text-slate-200 transition hover:text-indigo-300" href="#ejemplos-avanzados">🧪 Ejemplos Avanzados</a></li>
     <li><a class="text-slate-200 transition hover:text-indigo-300" href="#sistema-juego">🎮 Sistema de Juego</a></li>
     <li><a class="text-slate-200 transition hover:text-indigo-300" href="#minijuegos">🎯 Minijuegos y Actividades</a></li>
     <li><a class="text-slate-200 transition hover:text-indigo-300" href="#inventario-equipo">🎒 Inventario y Equipo</a></li>