feat(404): preparar infraestructura para imagen IA del robot, SVG fallback funcional

- src/pages/404.astro refactorizado: usa <picture> con AVIF/WebP/PNG + onerror que activa SVG inline fallback
- public/images/404/ creado con README.md explicando el workflow de optimizacion
- El SVG procedural del robot (con mate, vapor, ojos medio cerrados, mejillas coral) queda como fallback visible mientras se espera la imagen IA
- Cuando Mauri suba el robot_404.png (o avif/webp), basta con copiar a public/images/404/ y rebuild

Pendiente: que Mauri suba el archivo robot_404.png a public/images/404/ (o confirme la ruta donde lo dejó)

public/images/404/README.md

@@ -0,0 +1,48 @@
+# 404 Robot Image Assets
+
+Cuando se suba la imagen final del robot (PNG/WebP/AVIF), debe ir en esta carpeta:
+
+```
+public/images/404/
+├── robot-mate.png      (fallback, mínimo 480x480)
+├── robot-mate.webp     (preferido moderno, <50KB)
+└── robot-mate.avif     (óptimo, <30KB)
+```
+
+## Cómo se usa
+
+El `src/pages/404.astro` usa `<picture>` con esta estructura:
+
+```html
+<picture>
+  <source type="image/avif" srcset="/images/404/robot-mate.avif" />
+  <source type="image/webp" srcset="/images/404/robot-mate.webp" />
+  <img src="/images/404/robot-mate.png" alt="..." onerror="fallback" />
+</picture>
+```
+
+Si **ninguna** de las versiones existe, el `onerror` muestra el SVG inline de respaldo (mismo robot dibujado en SVG).
+
+## Generar las versiones optimizadas
+
+Una vez que se tenga la imagen original (PNG o JPG) en `public/images/404/robot-mate-original.png`:
+
+```bash
+cd public/images/404
+
+# WebP
+convert robot-mate-original.png -quality 82 -resize 600x600 robot-mate.webp
+
+# AVIF
+avifenc --min 25 --max 35 --speed 6 -o robot-mate.avif robot-mate-original.png
+
+# PNG fallback
+convert robot-mate-original.png -quality 90 -resize 480x480 robot-mate.png
+```
+
+## Reemplazo
+
+1. Mauri guarda la imagen IA final (la del robot vago con mate) en `public/images/404/`
+2. Correr el script de arriba para generar AVIF/WebP/PNG
+3. Rebuild + deploy
+4. El sitio muestra la imagen IA automáticamente; si no carga, fallback SVG

src/pages/404.astro

@@ -11,8 +11,23 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
     <div class="relative max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 w-full">
       <div class="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
 
-        <!-- Robot SVG -->
         <div class="order-2 lg:order-1" aria-hidden="true">
+          <picture>
+            <source type="image/avif" srcset="/images/404/robot-mate.avif" />
+            <source type="image/webp" srcset="/images/404/robot-mate.webp" />
+            <img
+              src="/images/404/robot-mate.png"
+              alt="Robot tomando mate con cara de vago"
+              width="480"
+              height="480"
+              class="w-full max-w-md mx-auto h-auto"
+              loading="eager"
+              decoding="async"
+              onerror="this.style.display='none'; document.getElementById('robot-fallback').style.display='block';"
+            />
+          </picture>
+
+          <div id="robot-fallback" style="display:none;" aria-hidden="true">
             <svg viewBox="0 0 480 480" xmlns="http://www.w3.org/2000/svg" class="w-full max-w-md mx-auto">
               <defs>
                 <linearGradient id="bg-grad" x1="0" y1="0" x2="0" y2="1">
@@ -130,6 +145,7 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
               </g>
             </svg>
           </div>
+        </div>
 
         <div class="order-1 lg:order-2 text-center lg:text-left">
           <div class="inline-block">
@@ -158,7 +174,6 @@ import BaseLayout from '@/layouts/BaseLayout.astro';
             </a>
           </div>
 
-          <!-- Server-side include (SSI) — cPanel pone el HTML y Apache lo procesa -->
           <!--#if expr="$REMOTE_ADDR" -->
           <div class="mt-10 pt-6 border-t" style="border-color: var(--hds-line);">
             <p class="text-xs font-semibold tracking-[0.2em] uppercase mb-3" style="color: var(--color-hds-naranja);">