Capas independientes, projectM en el mapping y catalogo de la galeria

Mapping
- Los clips salian del reves: mapper.js activaba UNPACK_FLIP_Y_WEBGL, pero el
  modelo va con origen arriba-izquierda y texImage2D ya sube la primera fila
  en t=0, asi que el flip la mandaba al final. Comprobado renderizando el
  mapper real en Chromium headless con una fuente mitad roja / mitad azul.
- projectM se puede usar YA en una capa: los .milk de data/presets-projectm se
  traducen a Butterchurn en el navegador al elegirlos (milkdrop-preset-
  converter). La capa MilkDrop gana 'biblioteca' (butter | projectm) sin
  cambiar su firma, para no recrear el contexto WebGL al cambiar de una a otra.
  Medido: 100/100 presets de una muestra convierten, 84/84 de los que llevan
  shaders warp/comp; ~7 ms por preset.
- Cada capa tiene su pestana arriba y su propia vista, y '+ CAPA' crea una y
  entra en ella: con varias capas, ir y volver a MAPPING no era viable.
- Dos capas MilkDrop sin preset ya no salen identicas (cogian el indice 0):
  cada instancia elige uno al azar y lo escribe en el estado.
- Una capa nueva ya no nace en la fuente "motor", que es el lienzo del motor
  activo y hacia que dos capas ensenaran lo mismo.

Galeria de visuales
- scripts/catalogar-visuales.py: ficha de cada clip (pelicula, personajes,
  duracion) y, sobre todo, si es una silueta de verdad y cuanta figura tiene.
  Distingue silueta de corte crudo por el negro puro del fondo: 0,63-0,90
  frente a 0,04-0,06, sin zona gris.
- El panel lista los clips agrupados por pelicula, con nombre legible y aviso
  de los que casi no tienen figura, en vez del nombre del archivo.
- Soporte de siluetas con canal alfa (.webm VP9): transparencia de verdad, sin
  recorte por luminancia. El shader del mapper ya la respeta.

Documentacion
- docs/visuales.md nuevo; pendiente.md al dia con lo hecho y lo que queda.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

README.md

@@ -22,7 +22,7 @@ arranca solo, o en un **portátil Linux** que lanzas cuando quieras. El apartado
             │  (micro USB)
             ▼
    ┌──────────────────┐        Wi-Fi / Ethernet
-   │  Raspberry Pi 5  │◀───────────────────────────  http://192.168.1.71/
+   │  Raspberry Pi 5  │◀───────────────────────────  http://192.168.1.XX/
    │     FOSFENO      │                               (panel en el móvil)
    └────────┬─────────┘
             │  micro-HDMI
@@ -40,9 +40,15 @@ La carpeta [`docs/`](docs/) tiene la guía completa:
 - [Conectarse al panel](docs/conexion.md) — el código QR, `fosfeno.local` y
   el router.
 - [Uso del panel](docs/uso.md) — cómo se maneja y qué hace cada motor.
+- [El Mezclador VJ](docs/mezclador.md) — las mezclas: las dos capas, visuales
+  de fondo, modos de mezcla y efectos.
 - [Projection mapping](docs/mapping.md) — deformar las visuales para encajarlas
   en superficies físicas (malla, máscaras) desde el panel.
 - [Solución de problemas](docs/problemas.md) — qué hacer cuando algo falla.
+- [Seguridad](docs/seguridad.md) — el panel está abierto a la red local por
+  defecto; cómo cerrarlo con una clave si pinchas fuera de casa.
+- [Arquitectura](docs/arquitectura.md) — para tocar el código: piezas, estado,
+  eventos y cómo añadir un motor.
 
 El panel además lleva un botón de información en cada apartado: explica qué
 es, qué necesita y cómo se configura, sin salir del propio panel.
@@ -65,12 +71,30 @@ Visuales de ejemplo — el motor Hydra con su editor de código en vivo:
   <img src="docs/assets/hydra.png" alt="Hydra" width="940">
 </div>
 
-## Projection mapping
+## Projection mapping por capas
 
-Las visuales web (Butterchurn, Hydra, Shaders y Mezclador) se pueden **deformar
-para encajarlas en superficies físicas** desde el panel: superficies con malla
-(curvas), varias a la vez y máscaras para tapar zonas, arrastrando con el ratón
-o el dedo. Se guarda solo en `data/mapping.json`. Guía: [docs/mapping.md](docs/mapping.md).
+Las visuales se pueden **deformar para encajarlas en superficies físicas** desde
+el panel: malla deformable (curvas), varias zonas a la vez y máscaras para tapar
+derrames, arrastrando con el ratón o el dedo.
+
+Y cada zona es una **capa con su propio visual**: MilkDrop a la derecha, otro
+preset distinto a la izquierda y un vídeo en el centro, a la vez.
+
+<div align="center">
+  <img src="docs/assets/capas.png" alt="Tres capas con visuales distintos" width="900">
+</div>
+
+| Fuente de una capa | Qué es |
+|--------------------|--------|
+| El motor de MOTORES | Lo que esté puesto en la otra pestaña del panel |
+| Visuales MilkDrop propias | Un Butterchurn solo para esa capa, con su preset |
+| Shader GLSL | Un shader de la librería, reactivo al audio |
+| Clip o imagen | Un archivo de `data/videos`, en bucle |
+| Cámara | La webcam |
+| Negro | Tapa la zona |
+
+Con opacidad y mezcla (normal o aditiva) por capa. Se guarda solo en
+`data/mapping.json`. Guía: [docs/mapping.md](docs/mapping.md).
 
 ## Hardware necesario
 
@@ -173,6 +197,9 @@ Así se ve el panel de control:
   <img src="docs/assets/panel.png" alt="Panel de control de FOSFENO" width="940">
 </div>
 
+El panel tiene dos pestañas, a la derecha del título: **MOTORES** (el directo)
+y **MAPPING** (el montaje sobre la superficie física).
+
 Desde el panel puedes:
 
 - Encender/apagar las visuales y cambiar de motor.
@@ -182,9 +209,11 @@ Desde el panel puedes:
   **sincronizado al compás**.
 - **Hydra / Shaders**: editor de código integrado para **escribir o pegar**
   tu propio código, más una **librería de fragmentos** lista para cargar.
-- **Mezclador VJ**: activar la cámara, elegir un clip de vídeo, modo de
-  mezcla y efectos de color (tono, saturación, colorama, posterizado,
-  pixelado, caleidoscopio, feedback, invertir…).
+- **Mezclador VJ**: elegir el fondo (cámara o visuales MilkDrop), el clip de
+  encima, el modo de mezcla y los efectos de color (tono, saturación,
+  colorama, posterizado, pixelado, caleidoscopio, feedback, invertir…).
+- **Mapping**: encajar la imagen sobre la superficie física arrastrando los
+  puntos, con malla deformable y máscaras.
 
 FOSFENO en acción — vídeo corto de demostración:
 
@@ -194,12 +223,19 @@ FOSFENO en acción — vídeo corto de demostración:
 
 Si el reproductor no se ve, descarga el vídeo: [demo.mp4](docs/assets/demo.mp4)
 
-### Modo Mezclador (cámara + vídeo)
+### Modo Mezclador (cámara + vídeo + visuales de fondo)
 
-Copia tus clips en `data/videos/` (formatos `.mp4`, `.webm`, `.mov`…) y
-aparecerán en el panel. El mezclador genera código Hydra por debajo a partir
-de los controles, así que mezcla en tiempo real la webcam, los clips y los
-efectos de color — el equivalente a Resolume, pero corriendo en la propia Pi.
+El mezclador monta **dos capas**: un **fondo** —la webcam o las propias
+**visuales MilkDrop**— y un **clip** encima (vídeo o imagen), combinados con el
+modo de mezcla y los efectos de color. Con un clip de silueta sobre negro y el
+modo *Recorte*, el personaje queda **delante de MilkDrop** latiendo con la
+música.
+
+Los clips se copian a `data/videos/` (`.mp4` H.264, `.webm`, imágenes) o se
+suben desde el propio panel. Por debajo, el mezclador genera código Hydra a
+partir de los controles: el equivalente a Resolume, corriendo en la propia Pi.
+
+Guía completa: [El Mezclador VJ](docs/mezclador.md).
 
 ## Estructura
 
@@ -210,8 +246,10 @@ FOSFENO/
 ├── backend/server.py           Servidor: web + WebSocket + gestión de procesos
 ├── scripts/lib.sh              Funciones de los scripts (logs, versiones)
 ├── web/panel/                  Panel de control (móvil)
-├── web/stage/                  Escenario en Chromium (todos los motores web)
+├── web/stage/stage.js          Escenario en Chromium (todos los motores web)
+├── web/stage/mapper.js         Compositor de projection mapping (WebGL)
 ├── docs/                       Documentación completa
+├── docs/arquitectura.md        Cómo está montado, para tocar el código
 ├── data/hydra-sketches.json    Sketches de Hydra de fábrica
 ├── data/hydra-snippets.json    Librería de fragmentos de Hydra para el editor
 ├── data/shaders.json           Shaders GLSL (editables)