feat: nebulosa WebGL en el cielo que reacciona al aplicar, con panel en la tecla M

css/componentes/carta.css

@@ -109,6 +109,21 @@
 
 .app[data-fase="hecho"] .pila__despues { clip-path: inset(0 0 0 0); }
 
+/* La nube sobre la imagen (js/nebulosa.js): mismo campo que la de fondo,
+   `screen` para solo aclarar. En reposo no se ve (opacidad 0, la sube el
+   JS con la magia); en comparar antes/después no aplica. */
+.pila__nebulosa {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  mix-blend-mode: screen;
+  pointer-events: none;
+}
+
+.pila[data-comparando="si"] .pila__nebulosa { display: none; }
+
 /* Comparar: antes y después lado a lado, en vez de revelado superpuesto. */
 .pila[data-comparando="si"] {
   display: flex;

css/componentes/cielo.css

@@ -14,6 +14,18 @@
     var(--fondo-umbral);
 }
 
+/* La nube de js/nebulosa.js: entre el degradado del fondo (que pone .cielo)
+   y las estrellas, que van después en el DOM y por eso quedan encima.
+   `screen` para que solo aclare, nunca tape una estrella. */
+.cielo__nebulosa {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  mix-blend-mode: screen;
+  pointer-events: none;
+}
+
 .cielo__capa {
   position: absolute;
   top: 0; left: 0;

css/componentes/nebulosa.css

@@ -0,0 +1,60 @@
+/* Panel de ajuste de la nebulosa. Es una herramienta de desarrollo, no algo
+   pensado para quien usa la app: por eso vive fuera de la carta, oculto por
+   defecto, y solo se abre con la tecla M (ver js/nebulosa.js). */
+
+.panel-nebulosa {
+  position: fixed;
+  left: var(--e-6);
+  bottom: var(--e-6);
+  z-index: 10;
+  width: min(var(--m-panel-nebulosa-ancho), calc(100% - var(--m-panel-nebulosa-margen)));
+  max-height: calc(100dvh - var(--m-panel-nebulosa-margen));
+  overflow: auto;
+  padding: var(--e-4) var(--e-5);
+  border-radius: var(--r-m);
+  background: var(--superficie-panel-nebulosa);
+  backdrop-filter: blur(var(--m-panel-nebulosa-difuminado));
+  border: 1px solid var(--borde-panel-nebulosa);
+  color: var(--texto-noche);
+  font-size: var(--f-s);
+}
+
+.panel-nebulosa__cabecera {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.panel-nebulosa__cerrar {
+  background: none;
+  border: 0;
+  color: var(--texto-noche-tenue);
+  font-size: var(--f-l);
+  line-height: 1;
+}
+
+.panel-nebulosa h3 {
+  font-size: var(--f-xs);
+  text-transform: uppercase;
+  letter-spacing: var(--f-espaciado-ancho);
+  color: var(--texto-noche-tenue);
+  font-weight: var(--f-peso-medio);
+  margin: var(--e-4) 0 var(--e-1);
+}
+
+.panel-nebulosa__control {
+  display: grid;
+  grid-template-columns: minmax(0, var(--m-panel-nebulosa-etiqueta)) 1fr var(--m-panel-nebulosa-salida);
+  gap: var(--e-2);
+  align-items: center;
+  margin-top: var(--e-2);
+}
+
+.panel-nebulosa__control input[type="range"] {
+  width: 100%;
+}
+
+.panel-nebulosa__control output {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}

css/tokens.css

@@ -199,6 +199,34 @@
   --cielo-destello-espera-min: 0.12s;
   --cielo-destello-espera-max: 0.9s;
 
+  /* Nebulosa (lo lee el JS: paletas y parámetros por defecto de js/nebulosa.js).
+     Dos paletas, cuatro paradas cada una, del borde tenue (0) al núcleo (3):
+     reposo = los mismos velos del cielo; magia = un verde-aguamarina de aurora. */
+  --nebulosa-reposo-0: #1b2340;
+  --nebulosa-reposo-1: #566e96;
+  --nebulosa-reposo-2: #7a6896;
+  --nebulosa-reposo-3: #f4d6e4;
+  --nebulosa-magia-0: #062a2a;
+  --nebulosa-magia-1: #1f8f86;
+  --nebulosa-magia-2: #5fd1b0;
+  --nebulosa-magia-3: #e8fff6;
+  --nebulosa-ambiente: 0.5;
+  --nebulosa-foco: 0.8;
+  --nebulosa-tamano: 0.85;
+  --nebulosa-velocidad: 0.5;
+  --nebulosa-velocidad-magia: 6;
+  --nebulosa-sobre-imagen: 0.85;
+  --nebulosa-escala: 0.5;
+  /* El velo de la zona de la imagen: separado de --superficie-escenario
+     para que el panel de ajuste (tecla M) pueda tocarlo en vivo. */
+  --velo-escenario-alfa: 0.15;
+  --c-panel-nebulosa: 13 17 25;
+  --m-panel-nebulosa-ancho: 300px;
+  --m-panel-nebulosa-difuminado: 10px;
+  --m-panel-nebulosa-etiqueta: 84px;
+  --m-panel-nebulosa-salida: 34px;
+  --m-panel-nebulosa-margen: 32px;
+
 
   /* ── 2. SEMÁNTICOS ──────────────────────────────────────────────────── */
   /* Lo único que pueden usar los componentes. */
@@ -228,9 +256,11 @@
   );
   --superficie-carta: var(--c-hueso-100);
   /* La zona de la imagen es translúcida: el cielo se ve también dentro de la carta. */
-  --superficie-escenario: rgb(var(--c-hueso-200-suelto) / 0.4);
+  --superficie-escenario: rgb(var(--c-hueso-200-suelto) / var(--velo-escenario-alfa));
   --superficie-simbolo: var(--c-blanco);
   --superficie-simbolo-activo: var(--c-violeta-900);
+  --superficie-panel-nebulosa: rgb(var(--c-panel-nebulosa) / 0.86);
+  --borde-panel-nebulosa: rgb(var(--c-estrella) / 0.14);
 
   /* Texto sobre la noche */
   --texto-noche: var(--c-noche-texto);

index.html

@@ -18,6 +18,7 @@
   <link rel="stylesheet" href="css/componentes/carta.css?v=circulos-fluidos">
   <link rel="stylesheet" href="css/componentes/simbolos.css?v=circulos-fluidos">
   <link rel="stylesheet" href="css/componentes/controles.css">
+  <link rel="stylesheet" href="css/componentes/nebulosa.css">
 </head>
 
 <body>

js/main.js

@@ -9,6 +9,7 @@
 import { crearEstado, estaListo } from "./estado.js";
 import { crearVista } from "./vista.js";
 import { encenderCielo } from "./cielo.js";
+import { encenderNebulosa } from "./nebulosa.js";
 import { aplicar } from "./proceso.js";
 import { desdeArchivo, desdeEjemplo, descargar, liberar,
          urlResultado, EXTENSION } from "./imagen.js";
@@ -46,6 +47,7 @@ const vista = crearVista({
 const { nodos } = vista;
 estado.suscribir(vista.pintar);
 encenderCielo();
+encenderNebulosa({ estado });
 
 /* ── Escuchas ────────────────────────────────────────────────────────── */
 

js/nebulosa.js

@@ -0,0 +1,439 @@
+/* ============================================================================
+   NEBULOSA — nube de energía en el cielo
+   ----------------------------------------------------------------------------
+   Una nube WebGL translúcida (domain-warped fbm, como en el prototipo de
+   diseno/prototipos/2026-09-24-nebulosa-maqueta.html), en dos capas que
+   muestrean el mismo campo:
+
+     · Capa de fondo: cubre toda la pantalla, dentro de .cielo, entre el
+       degradado y las estrellas (modo `screen`, así solo aclara).
+     · Capa de frente: sobre la imagen (dentro de .pila), también `screen`,
+       con opacidad 0 en reposo — solo sube durante la magia.
+
+   El foco de la nube sigue el centro de la imagen (o de la carta, o de la
+   pantalla, si todavía no hay imagen). La magia es la fase "aplicando" del
+   estado: al entrar, la nube se agita y sube sobre la imagen; al terminar,
+   se queda en un color fijo (la paleta B) que ya no depende de la energía.
+   Al volver a "eligiendo" desde "hecho" (Hacer otra, otra imagen, otra
+   energía), el color se destiñe de vuelta a la paleta de reposo.
+
+   Si no hay WebGL, no se hace nada: el cielo se queda como estaba.
+
+   Solo la parte que no toca el DOM se prueba (ver tests/nebulosa.test.js);
+   se exporta en `_paraPruebas`, como en cielo.js.
+   ========================================================================== */
+
+const VERT = `attribute vec2 aPos; void main(){ gl_Position = vec4(aPos, 0.0, 1.0); }`;
+
+const FRAG = `
+precision highp float;
+uniform vec2  uRes;       // tamaño del canvas, en px
+uniform float uUnit;      // px por unidad de nebulosa (compartida por las dos capas)
+uniform vec2  uFocus;     // centro del foco, en px del canvas (origen abajo-izquierda)
+uniform vec2  uOffset;    // origen del canvas en px de pantalla, para que las dos capas
+                          // muestreen el mismo campo aunque estén en lugares distintos
+uniform float uTime, uSize, uAmbient, uFocusAmt, uEnergy, uMix;
+uniform vec3  uA0, uA1, uA2, uA3, uB0, uB1, uB2, uB3;
+
+float hash(vec2 p){ return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453); }
+float noise(vec2 p){
+  vec2 i = floor(p), f = fract(p); vec2 u = f*f*(3.0-2.0*f);
+  return mix(mix(hash(i), hash(i+vec2(1,0)), u.x), mix(hash(i+vec2(0,1)), hash(i+vec2(1,1)), u.x), u.y);
+}
+float fbm(vec2 p){
+  float v = 0.0, a = 0.5; mat2 r = mat2(0.8,-0.6,0.6,0.8);
+  for (int i = 0; i < 5; i++){ v += a*noise(p); p = r*p*2.02; a *= 0.5; }
+  return v;
+}
+vec3 ramp(float t, vec3 c0, vec3 c1, vec3 c2, vec3 c3){
+  t = clamp(t, 0.0, 1.0) * 3.0;
+  if (t < 1.0) return mix(c0, c1, t);
+  if (t < 2.0) return mix(c1, c2, t - 1.0);
+  return mix(c2, c3, t - 2.0);
+}
+vec3 pal(float t){
+  return mix(ramp(t, uA0, uA1, uA2, uA3), ramp(t, uB0, uB1, uB2, uB3), uMix);
+}
+
+void main(){
+  float t = uTime;
+  vec2 px = gl_FragCoord.xy + uOffset;
+  vec2 s  = px / uUnit;
+  vec2 p  = (gl_FragCoord.xy - uFocus) / uUnit;
+
+  float warp = 1.0 + 1.2 * uEnergy;
+  vec2 q = vec2(fbm(s*0.9 + vec2(0.0, t*0.10)), fbm(s*0.9 + vec2(5.2, -t*0.08)));
+  vec2 r = vec2(fbm(s*1.1 + 3.0*q + vec2(1.7,9.2) + t*0.12), fbm(s*1.1 + 3.0*q + vec2(8.3,2.8) - t*0.10));
+
+  float neb = fbm(s*0.7 + 2.2*r + t*0.03);
+  neb = smoothstep(0.35, 0.95, neb);
+  vec3 col = pal(0.5 + 0.45*neb + 0.2*(r.x-0.5)) * neb * 0.3 * uAmbient;
+
+  vec2 w = p + warp * 0.55 * (r - 0.5);
+  float breathe = 1.0 + 0.06*sin(t*0.6) + 0.03*sin(t*1.7);
+  float d = length(w) / (uSize * breathe * (1.0 + 0.35*uEnergy));
+  float edge = fbm(w*2.5 - t*0.15);
+  float body = exp(-d*d*1.1) * (0.55 + 0.9*edge);
+  float idx = clamp(body*0.75 + (r.x-0.5)*0.9 + (edge-0.5)*0.5, 0.0, 1.0);
+  col += pal(idx) * body * uFocusAmt * (1.0 + 0.8*uEnergy);
+  col += pal(1.0) * exp(-d*d*5.0) * 0.18 * uFocusAmt * (1.0 + uEnergy);
+
+  col = 1.0 - exp(-col * 1.6);
+  col += (hash(gl_FragCoord.xy + fract(t)*100.0) - 0.5) * 0.03;
+  gl_FragColor = vec4(max(col, 0.0), 1.0);
+}`;
+
+/* ── Utilidades puras (sin DOM, probadas en tests/nebulosa.test.js) ───── */
+
+function leerNumero(estilos, nombre, porDefecto) {
+  const valor = parseFloat(estilos.getPropertyValue(nombre));
+  return Number.isFinite(valor) ? valor : porDefecto;
+}
+
+function leerTexto(estilos, nombre, porDefecto) {
+  const valor = estilos.getPropertyValue(nombre).trim();
+  return valor || porDefecto;
+}
+
+/** "#1b2340" → [r, g, b] en 0..1, como quieren los uniformes vec3. */
+function hexAVec3(hex) {
+  const numero = parseInt(hex.replace("#", "").slice(0, 6), 16);
+  return [
+    ((numero >> 16) & 255) / 255,
+    ((numero >> 8) & 255) / 255,
+    (numero & 255) / 255,
+  ];
+}
+
+const clamp01 = (x) => Math.max(0, Math.min(1, x));
+const mezclar = (a, b, t) => a + (b - a) * t;
+const suavizar = (a, b, x) => {
+  const t = clamp01((x - a) / (b - a));
+  return t * t * (3 - 2 * t);
+};
+
+/**
+ * La línea de tiempo de la magia. Tres fases reales de la app ("eligiendo",
+ * "aplicando", "hecho") más una pseudo-fase propia de la nebulosa,
+ * "volviendo": el tramo en el que se deja "hecho" y el color se destiñe de
+ * vuelta a la paleta de reposo (al hacer otra, cambiar de energía o de
+ * imagen). `progreso` va de 0 a 1 dentro de la fase actual; en "eligiendo"
+ * y "hecho" no se usa, son estados fijos.
+ */
+function estadoMagia(fase, progreso = 0) {
+  const p = clamp01(progreso);
+  if (fase === "eligiendo") return { energia: 0, mezcla: 0, sobre: 0 };
+  if (fase === "hecho") return { energia: 0.12, mezcla: 1, sobre: 0 };
+  if (fase === "volviendo") {
+    const vuelta = suavizar(0, 1, p);
+    return { energia: 0.12 * (1 - vuelta), mezcla: 1 - vuelta, sobre: 0 };
+  }
+  // "aplicando": sube, se sostiene y vuelve a bajar sobre la imagen; el
+  // color pasa de A a B a mitad de camino.
+  const sube = suavizar(0, 0.25, p);
+  const baja = 1 - suavizar(0.7, 1.0, p);
+  return {
+    energia: mezclar(0.12, 1, sube) * baja + 0.12 * (1 - baja),
+    mezcla: suavizar(0.35, 0.75, p),
+    sobre: sube * baja,
+  };
+}
+
+/** ¿La tecla que se acaba de soltar abre o cierra el panel? No, si hay un
+    modificador (para no robarle la M a un atajo del sistema) ni si el foco
+    está escribiendo en un campo. */
+function esAtajoPanel(evento, elementoActivo) {
+  if (String(evento.key ?? "").toLowerCase() !== "m") return false;
+  if (evento.ctrlKey || evento.metaKey || evento.altKey) return false;
+  if (!elementoActivo) return true;
+  if (elementoActivo.isContentEditable) return false;
+  return elementoActivo.tagName !== "INPUT" && elementoActivo.tagName !== "TEXTAREA";
+}
+
+/* ── DOM y WebGL ───────────────────────────────────────────────────────── */
+
+const NOMBRES_PALETA_REPOSO = ["--nebulosa-reposo-0", "--nebulosa-reposo-1", "--nebulosa-reposo-2", "--nebulosa-reposo-3"];
+const NOMBRES_PALETA_MAGIA = ["--nebulosa-magia-0", "--nebulosa-magia-1", "--nebulosa-magia-2", "--nebulosa-magia-3"];
+const UNIFORMES = ["uRes", "uUnit", "uFocus", "uOffset", "uTime", "uSize", "uAmbient", "uFocusAmt", "uEnergy", "uMix",
+                    "uA0", "uA1", "uA2", "uA3", "uB0", "uB1", "uB2", "uB3"];
+
+function crearCapa(canvas) {
+  const gl = canvas.getContext("webgl", { antialias: false });
+  if (!gl) return null;
+  const compilar = (tipo, fuente) => {
+    const sombreador = gl.createShader(tipo);
+    gl.shaderSource(sombreador, fuente);
+    gl.compileShader(sombreador);
+    if (!gl.getShaderParameter(sombreador, gl.COMPILE_STATUS)) {
+      throw new Error(gl.getShaderInfoLog(sombreador));
+    }
+    return sombreador;
+  };
+  const programa = gl.createProgram();
+  gl.attachShader(programa, compilar(gl.VERTEX_SHADER, VERT));
+  gl.attachShader(programa, compilar(gl.FRAGMENT_SHADER, FRAG));
+  gl.linkProgram(programa);
+  gl.useProgram(programa);
+  gl.bindBuffer(gl.ARRAY_BUFFER, gl.createBuffer());
+  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 3, -1, -1, 3]), gl.STATIC_DRAW);
+  const posicion = gl.getAttribLocation(programa, "aPos");
+  gl.enableVertexAttribArray(posicion);
+  gl.vertexAttribPointer(posicion, 2, gl.FLOAT, false, 0, 0);
+  const u = {};
+  for (const nombre of UNIFORMES) u[nombre] = gl.getUniformLocation(programa, nombre);
+  return { gl, u, canvas };
+}
+
+function medirCapa(capa, ancho, alto, escala) {
+  const dpr = Math.min(window.devicePixelRatio || 1, 2) * escala;
+  const cw = Math.max(1, Math.round(ancho * dpr));
+  const ch = Math.max(1, Math.round(alto * dpr));
+  if (capa.canvas.width !== cw || capa.canvas.height !== ch) {
+    capa.canvas.width = cw;
+    capa.canvas.height = ch;
+  }
+  capa.gl.viewport(0, 0, cw, ch);
+  return dpr;
+}
+
+function dibujar(capa, paletaA, paletaB, estado, tiempo, focoPx, offsetPx, dpr, ambiente, foco, tamano) {
+  const { gl, u } = capa;
+  gl.uniform2f(u.uRes, capa.canvas.width, capa.canvas.height);
+  gl.uniform1f(u.uUnit, (Math.min(window.innerWidth, window.innerHeight) * dpr) / 2);
+  gl.uniform2f(u.uFocus, focoPx[0], focoPx[1]);
+  gl.uniform2f(u.uOffset, offsetPx[0], offsetPx[1]);
+  gl.uniform1f(u.uTime, tiempo);
+  gl.uniform1f(u.uSize, tamano);
+  gl.uniform1f(u.uAmbient, ambiente);
+  gl.uniform1f(u.uFocusAmt, foco);
+  gl.uniform1f(u.uEnergy, estado.energia);
+  gl.uniform1f(u.uMix, estado.mezcla);
+  ["uA0", "uA1", "uA2", "uA3"].forEach((n, i) => gl.uniform3fv(u[n], paletaA[i]));
+  ["uB0", "uB1", "uB2", "uB3"].forEach((n, i) => gl.uniform3fv(u[n], paletaB[i]));
+  gl.drawArrays(gl.TRIANGLES, 0, 3);
+}
+
+/** El centro de la imagen; si todavía no hay imagen, el de la carta; si
+    tampoco, el de la pantalla (la pantalla de umbral). */
+function obtenerFoco(pila, escenario) {
+  if (pila && !pila.hidden) {
+    const r = pila.getBoundingClientRect();
+    if (r.width > 0 && r.height > 0) return r;
+  }
+  if (escenario) {
+    const r = escenario.getBoundingClientRect();
+    if (r.width > 0 && r.height > 0) return r;
+  }
+  return { left: window.innerWidth / 2, top: window.innerHeight / 2, width: 0, height: 0 };
+}
+
+/** Cuánto dura el aplicar, leído en vivo (el panel puede tocar este mismo
+    token). Duplica la lectura de main.js a propósito: son dos módulos que no
+    se conocen entre sí, y es una sola línea. */
+function duracionMs() {
+  const valor = getComputedStyle(document.documentElement).getPropertyValue("--t-aplicando").trim();
+  if (valor.endsWith("ms")) return parseFloat(valor);
+  if (valor.endsWith("s")) return parseFloat(valor) * 1000;
+  return 2800;
+}
+
+/* ── El panel de ajuste (tecla M) ─────────────────────────────────────── */
+
+function control(campo, etiqueta, min, max, paso, valor) {
+  return `<label class="panel-nebulosa__control">
+    <span>${etiqueta}</span>
+    <input type="range" data-campo="${campo}" min="${min}" max="${max}" step="${paso}" value="${valor}">
+    <output>${valor}</output>
+  </label>`;
+}
+
+function crearPanelNebulosa(ctl, raiz) {
+  const panel = document.createElement("div");
+  panel.className = "panel-nebulosa";
+  panel.hidden = true;
+  panel.innerHTML = `
+    <div class="panel-nebulosa__cabecera">
+      <strong>Nebulosa</strong>
+      <button type="button" class="panel-nebulosa__cerrar" aria-label="Cerrar panel de nebulosa">×</button>
+    </div>
+    <h3>Reposo</h3>
+    ${control("ambiente", "Ambiente", 0, 1.5, 0.05, ctl.ambiente)}
+    ${control("foco", "Foco", 0, 1.5, 0.05, ctl.foco)}
+    ${control("tamano", "Tamaño", 0.2, 1, 0.01, ctl.tamano)}
+    ${control("velocidad", "Velocidad", 0, 2, 0.05, ctl.velocidad)}
+    ${control("velo", "Velo de la carta", 0, 0.6, 0.01, leerNumero(getComputedStyle(raiz), "--velo-escenario-alfa", 0.15))}
+    <h3>Magia</h3>
+    ${control("velocidadMagia", "Magia ×", 1, 12, 0.5, ctl.velocidadMagia)}
+    ${control("sobreImagen", "Sobre la imagen", 0, 1, 0.05, ctl.sobreImagen)}
+    ${control("duracion", "Duración (s)", 1, 6, 0.1, (duracionMs() / 1000).toFixed(1))}
+  `;
+  document.body.appendChild(panel);
+
+  const CAMPOS = ["ambiente", "foco", "tamano", "velocidad", "velo", "velocidadMagia", "sobreImagen", "duracion"];
+  for (const campo of CAMPOS) {
+    const entrada = panel.querySelector(`[data-campo="${campo}"]`);
+    const salida = entrada.nextElementSibling;
+    entrada.addEventListener("input", () => {
+      const valor = parseFloat(entrada.value);
+      salida.textContent = entrada.value;
+      if (campo === "velo") raiz.style.setProperty("--velo-escenario-alfa", String(valor));
+      else if (campo === "duracion") raiz.style.setProperty("--t-aplicando", `${Math.round(valor * 1000)}ms`);
+      else ctl[campo] = valor;
+    });
+  }
+
+  panel.querySelector(".panel-nebulosa__cerrar").addEventListener("click", () => {
+    panel.hidden = true;
+  });
+
+  const alTeclear = (evento) => {
+    if (!esAtajoPanel(evento, document.activeElement)) return;
+    panel.hidden = !panel.hidden;
+  };
+  document.addEventListener("keydown", alTeclear);
+
+  return () => {
+    document.removeEventListener("keydown", alTeclear);
+    panel.remove();
+  };
+}
+
+/* ── Arranque ──────────────────────────────────────────────────────────── */
+
+/**
+ * Enciende la nebulosa: crea las dos capas, arranca el ciclo de dibujo y el
+ * panel de ajuste. Se suscribe al estado para saber cuándo hay magia.
+ * Devuelve una función para apagarlo todo (la usarían los tests, si algún
+ * día se agrega uno de navegador para esto).
+ */
+export function encenderNebulosa({ estado, raiz = document.documentElement } = {}) {
+  const cielo = document.querySelector(".cielo");
+  const pila = document.getElementById("pila");
+  const escenario = document.getElementById("escenario");
+  if (!cielo || !pila) return () => {};
+
+  const canvasFondo = document.createElement("canvas");
+  canvasFondo.className = "cielo__nebulosa";
+  canvasFondo.setAttribute("aria-hidden", "true");
+  cielo.insertBefore(canvasFondo, cielo.firstElementChild);
+
+  const canvasFrente = document.createElement("canvas");
+  canvasFrente.className = "pila__nebulosa";
+  canvasFrente.setAttribute("aria-hidden", "true");
+  pila.appendChild(canvasFrente);
+
+  const fondo = crearCapa(canvasFondo);
+  const frente = crearCapa(canvasFrente);
+  if (!fondo || !frente) {
+    // Sin WebGL no hay nube: el cielo se queda con su degradado de siempre.
+    canvasFondo.remove();
+    canvasFrente.remove();
+    return () => {};
+  }
+
+  const estilos = getComputedStyle(raiz);
+  // El valor por defecto de leerTexto nunca se usa en la práctica (los ocho
+  // tokens de paleta siempre están en tokens.css); no es un color de diseño,
+  // solo un respaldo defensivo, así que queda exento del guardián.
+  const NEGRO = "#000000"; // token-libre
+  const paletaReposo = NOMBRES_PALETA_REPOSO.map((n) => hexAVec3(leerTexto(estilos, n, NEGRO)));
+  const paletaMagia = NOMBRES_PALETA_MAGIA.map((n) => hexAVec3(leerTexto(estilos, n, NEGRO)));
+
+  const ctl = {
+    ambiente: leerNumero(estilos, "--nebulosa-ambiente", 0.5),
+    foco: leerNumero(estilos, "--nebulosa-foco", 0.8),
+    tamano: leerNumero(estilos, "--nebulosa-tamano", 0.85),
+    velocidad: leerNumero(estilos, "--nebulosa-velocidad", 0.5),
+    velocidadMagia: leerNumero(estilos, "--nebulosa-velocidad-magia", 6),
+    sobreImagen: leerNumero(estilos, "--nebulosa-sobre-imagen", 0.85),
+    escala: leerNumero(estilos, "--nebulosa-escala", 0.5),
+  };
+
+  const reducido = matchMedia("(prefers-reduced-motion: reduce)").matches;
+
+  let faseEstado = estado?.obtener?.().fase ?? "eligiendo";
+  let faseInterna = faseEstado === "hecho" ? "hecho" : "eligiendo";
+  let inicioTransicion = performance.now();
+  let duracionTransicion = duracionMs();
+
+  const alCambiarFase = (nuevaFase) => {
+    if (nuevaFase === faseEstado) return;
+    inicioTransicion = performance.now();
+    if (nuevaFase === "aplicando") {
+      faseInterna = "aplicando";
+      duracionTransicion = duracionMs();
+    } else if (nuevaFase === "hecho") {
+      faseInterna = "hecho";
+    } else {
+      // "eligiendo": si se venía de "hecho", hay que destiñir el color;
+      // si no (p. ej. al arrancar), el reposo ya estaba puesto.
+      faseInterna = faseEstado === "hecho" ? "volviendo" : "eligiendo";
+      duracionTransicion = duracionMs();
+    }
+    faseEstado = nuevaFase;
+  };
+
+  const dejarDeEscuchar = estado?.suscribir?.((e) => alCambiarFase(e.fase)) ?? (() => {});
+
+  let tiempo = 0;
+  let ultimo = performance.now();
+  let activo = true;
+
+  function progresoActual() {
+    if (faseInterna !== "aplicando" && faseInterna !== "volviendo") return 0;
+    if (duracionTransicion <= 0) return 1;
+    return (performance.now() - inicioTransicion) / duracionTransicion;
+  }
+
+  function fotograma(ahora) {
+    if (!activo) return;
+    const dt = Math.min((ahora - ultimo) / 1000, 0.05);
+    ultimo = ahora;
+
+    let p = progresoActual();
+    if (p >= 1 && (faseInterna === "aplicando" || faseInterna === "volviendo")) {
+      faseInterna = faseInterna === "aplicando" ? "hecho" : "eligiendo";
+      p = 0;
+    }
+    const s = estadoMagia(faseInterna, p);
+    tiempo += dt * ctl.velocidad * mezclar(1, ctl.velocidadMagia, s.energia) * (reducido ? 0.15 : 1);
+
+    const foco = obtenerFoco(pila, escenario);
+    const cx = foco.left + foco.width / 2;
+    const cy = foco.top + foco.height / 2;
+
+    const dprFondo = medirCapa(fondo, window.innerWidth, window.innerHeight, ctl.escala);
+    dibujar(
+      fondo, paletaReposo, paletaMagia, s, tiempo,
+      [cx * dprFondo, (window.innerHeight - cy) * dprFondo], [0, 0], dprFondo,
+      ctl.ambiente * (1 + 0.6 * s.energia), ctl.foco, ctl.tamano
+    );
+
+    canvasFrente.style.opacity = (s.sobre * ctl.sobreImagen).toFixed(3);
+    if (s.sobre > 0.001) {
+      const r = pila.getBoundingClientRect();
+      const dprFrente = medirCapa(frente, r.width, r.height, ctl.escala);
+      dibujar(
+        frente, paletaReposo, paletaMagia, s, tiempo,
+        [(r.width / 2) * dprFrente, (r.height / 2) * dprFrente],
+        [r.left * dprFrente, (window.innerHeight - r.bottom) * dprFrente], dprFrente,
+        0, ctl.foco, ctl.tamano
+      );
+    }
+
+    requestAnimationFrame(fotograma);
+  }
+  requestAnimationFrame(fotograma);
+
+  const dejarPanel = crearPanelNebulosa(ctl, raiz);
+
+  return () => {
+    activo = false;
+    dejarDeEscuchar();
+    dejarPanel();
+    canvasFondo.remove();
+    canvasFrente.remove();
+  };
+}
+
+export const _paraPruebas = { hexAVec3, estadoMagia, esAtajoPanel, leerNumero, leerTexto };

tests/nebulosa.test.js

@@ -0,0 +1,129 @@
+/* La nebulosa: solo se prueba lo que no depende del DOM ni de WebGL —
+   la línea de tiempo de la magia, la lectura de tokens y el atajo del
+   panel. El resto (canvas, shaders, foco real) se ve a ojo. */
+
+import { test } from "node:test";
+import assert from "node:assert/strict";
+import { _paraPruebas } from "../js/nebulosa.js";
+
+const { hexAVec3, estadoMagia, esAtajoPanel, leerNumero, leerTexto } = _paraPruebas;
+
+/* ── hexAVec3 ────────────────────────────────────────────────────────── */
+
+test("hexAVec3 convierte un color hex a componentes 0..1", () => {
+  const [r, g, b] = hexAVec3("#1b2340");
+  assert.ok(Math.abs(r - 27 / 255) < 1e-6);
+  assert.ok(Math.abs(g - 35 / 255) < 1e-6);
+  assert.ok(Math.abs(b - 64 / 255) < 1e-6);
+});
+
+test("hexAVec3 con blanco y negro", () => {
+  assert.deepEqual(hexAVec3("#ffffff"), [1, 1, 1]);
+  assert.deepEqual(hexAVec3("#000000"), [0, 0, 0]);
+});
+
+/* ── estadoMagia ─────────────────────────────────────────────────────── */
+
+test("eligiendo: reposo total, sin energía ni mezcla ni nube sobre la imagen", () => {
+  assert.deepEqual(estadoMagia("eligiendo", 0), { energia: 0, mezcla: 0, sobre: 0 });
+});
+
+test("hecho: color fijo en la paleta B, energía baja y fija, nada sobre la imagen", () => {
+  assert.deepEqual(estadoMagia("hecho", 0.7), { energia: 0.12, mezcla: 1, sobre: 0 });
+});
+
+test("aplicando al empezar: apenas energía de reposo, sin mezcla ni nube encima", () => {
+  const s = estadoMagia("aplicando", 0);
+  assert.ok(Math.abs(s.energia - 0.12) < 1e-6);
+  assert.equal(s.mezcla, 0);
+  assert.equal(s.sobre, 0);
+});
+
+test("aplicando a mitad de camino: energía y nube en su punto más alto", () => {
+  const s = estadoMagia("aplicando", 0.5);
+  assert.equal(s.energia, 1);
+  assert.equal(s.sobre, 1);
+  assert.ok(s.mezcla > 0 && s.mezcla < 1);
+});
+
+test("aplicando al terminar: mezcla completa hacia B, la nube ya bajó de la imagen", () => {
+  const s = estadoMagia("aplicando", 1);
+  assert.ok(Math.abs(s.energia - 0.12) < 1e-6);
+  assert.equal(s.mezcla, 1);
+  assert.equal(s.sobre, 0);
+});
+
+test("volviendo: empieza donde deja 'hecho' y termina donde empieza 'eligiendo'", () => {
+  const inicio = estadoMagia("volviendo", 0);
+  assert.ok(Math.abs(inicio.energia - 0.12) < 1e-6);
+  assert.equal(inicio.mezcla, 1);
+
+  const fin = estadoMagia("volviendo", 1);
+  assert.equal(fin.energia, 0);
+  assert.equal(fin.mezcla, 0);
+});
+
+test("volviendo a mitad de camino: a mitad de mezcla y de energía", () => {
+  const s = estadoMagia("volviendo", 0.5);
+  assert.equal(s.mezcla, 0.5);
+  assert.ok(Math.abs(s.energia - 0.06) < 1e-6);
+});
+
+test("el progreso fuera de 0..1 se recorta", () => {
+  assert.deepEqual(estadoMagia("aplicando", -1), estadoMagia("aplicando", 0));
+  assert.deepEqual(estadoMagia("aplicando", 5), estadoMagia("aplicando", 1));
+});
+
+/* ── esAtajoPanel ────────────────────────────────────────────────────── */
+
+const cuerpo = { tagName: "BODY", isContentEditable: false };
+const campoTexto = { tagName: "INPUT", isContentEditable: false };
+const areaTexto = { tagName: "TEXTAREA", isContentEditable: false };
+const editable = { tagName: "DIV", isContentEditable: true };
+
+test("M sin modificadores, con el foco fuera de un campo, abre el panel", () => {
+  assert.equal(esAtajoPanel({ key: "m", ctrlKey: false, metaKey: false, altKey: false }, cuerpo), true);
+});
+
+test("mayúscula también cuenta", () => {
+  assert.equal(esAtajoPanel({ key: "M", ctrlKey: false, metaKey: false, altKey: false }, cuerpo), true);
+});
+
+test("con un modificador no es el atajo", () => {
+  assert.equal(esAtajoPanel({ key: "m", ctrlKey: true, metaKey: false, altKey: false }, cuerpo), false);
+  assert.equal(esAtajoPanel({ key: "m", ctrlKey: false, metaKey: true, altKey: false }, cuerpo), false);
+  assert.equal(esAtajoPanel({ key: "m", ctrlKey: false, metaKey: false, altKey: true }, cuerpo), false);
+});
+
+test("con el foco en un campo de texto no es el atajo", () => {
+  assert.equal(esAtajoPanel({ key: "m" }, campoTexto), false);
+  assert.equal(esAtajoPanel({ key: "m" }, areaTexto), false);
+  assert.equal(esAtajoPanel({ key: "m" }, editable), false);
+});
+
+test("otra tecla no es el atajo", () => {
+  assert.equal(esAtajoPanel({ key: "a" }, cuerpo), false);
+});
+
+/* ── leerNumero / leerTexto ──────────────────────────────────────────── */
+
+function estilosFalsos(valores) {
+  return { getPropertyValue: (nombre) => valores[nombre] ?? "" };
+}
+
+test("leerNumero devuelve el número del token", () => {
+  assert.equal(leerNumero(estilosFalsos({ "--x": "0.85" }), "--x", 1), 0.85);
+});
+
+test("leerNumero cae al valor por defecto si el token no es un número", () => {
+  assert.equal(leerNumero(estilosFalsos({}), "--x", 1), 1);
+  assert.equal(leerNumero(estilosFalsos({ "--x": "" }), "--x", 1), 1);
+});
+
+test("leerTexto devuelve el texto del token, recortado", () => {
+  assert.equal(leerTexto(estilosFalsos({ "--x": "  #1b2340  " }), "--x", "#000"), "#1b2340");
+});
+
+test("leerTexto cae al valor por defecto si el token está vacío", () => {
+  assert.equal(leerTexto(estilosFalsos({}), "--x", "#000"), "#000");
+});