morfeo 0.6.1 → 0.6.3

package/bin/morfeo.mjs

@@ -21,6 +21,8 @@ Videos
   render [id...]        Genera los videos que faltan (o los que indiques)
       --todos             regenera todos
       --solo-fallidos     reintenta solo los que fallaron en el último lote
+      --cambiados         solo los que cambiaron (guion o tus componentes) desde su último render
+      --revisar           al terminar cada uno, saca su hoja y lo revisa (un solo paso en vez de tres)
       --escenas 5-7       solo esas escenas (para corregir una toma sin rehacer todo) + su hoja
       --gpu               usa la tarjeta de video (más rápido; si falla, quítalo)
   previa <id>           Solo el gancho (~8 s) para aprobarlo antes del render completo:  --hasta 6
@@ -119,10 +121,18 @@ Pruébalo:  npx morfeo render ${pos[0]}   y revísalo:  npx morfeo hoja ${pos[0]
 			const {render} = await import('../lib/render.mjs');
 			const escenas = op.escenas != null && op.escenas !== true ? String(op.escenas).split(/[-,]/).map(Number) : null;
 			if (escenas && (escenas.some((x) => !Number.isInteger(x) || x < 1) || pos.length !== 1)) throw new ErrorMorfeo('Uso:  npx morfeo render mi-video --escenas 5   (o 5-7)');
-			const hechos = await render({proyecto, ids: pos, todos: !!op.todos || pos[0] === 'todos', soloFallidos: !!op.soloFallidos, escenas: escenas ? [escenas[0], escenas[escenas.length - 1]] : null});
+			const hechos = await render({proyecto, ids: pos[0] === 'todos' ? [] : pos, todos: !!op.todos || pos[0] === 'todos', cambiados: !!op.cambiados, soloFallidos: !!op.soloFallidos, escenas: escenas ? [escenas[0], escenas[escenas.length - 1]] : null});
 			if (escenas) {
 				const {hoja} = await import('../lib/hoja.mjs');
 				for (const h of hechos ?? []) console.log(hoja({video: h.mp4, cols: 5, filas: 2}));
+			} else if (op.revisar) {
+				const {hoja} = await import('../lib/hoja.mjs');
+				const {cargarProyecto} = await import('../lib/config.mjs');
+				const p = await cargarProyecto(proyecto);
+				for (const h of hechos ?? []) {
+					console.log(hoja({video: h.mp4}));
+					await revisarVideo(p, h.id);
+				}
 			}
 			return;
 		}
@@ -145,25 +155,13 @@ Pruébalo:  npx morfeo render ${pos[0]}   y revísalo:  npx morfeo hoja ${pos[0]
 		}
 		case 'revisar': {
 			const {cargarProyecto} = await import('../lib/config.mjs');
-			const {revisarEstructura, consejosEnTexto, REGLAS} = await import('../lib/estructura.mjs');
+			const {REGLAS} = await import('../lib/estructura.mjs');
 			const p = await cargarProyecto(proyecto);
 			const ids = pos.length ? pos : Object.keys(p.videos);
-			const fs = await import('node:fs');
 			let total = 0;
 			for (const id of ids) {
 				if (!p.videos[id]) throw new ErrorMorfeo(`No existe el video ${id}. Usa: npx morfeo lista`);
-				// tiempos reales si ya se preparó la voz (después de un render); si no, solo el texto
-				const f = path.join(p.trabajo, 'public', 'v', id, 'datos.json');
-				const d = fs.existsSync(f) ? JSON.parse(fs.readFileSync(f, 'utf8')) : null;
-				const c = revisarEstructura(p.videos[id], d);
-				// con el MP4 ya hecho: cuadros negros, tapados, planos o quietos (--sin-cuadros lo salta)
-				if (!op.sinCuadros) {
-					const {salidaDe} = await import('../lib/salida.mjs');
-					const {revisarCuadros} = await import('../lib/calidad.mjs');
-					c.push(...(await revisarCuadros(salidaDe(p, id), d)));
-				}
-				total += c.length;
-				console.log(c.length ? `${id}${d ? '' : '  (sin tiempos: renderízalo para revisar el ritmo)'}\n${consejosEnTexto(c)}` : `${id}  ✔`);
+				total += await revisarVideo(p, id, !!op.sinCuadros);
 			}
 			if (total) console.log(`\nReglas completas: ${REGLAS.map((r) => r.regla.toLowerCase()).join(' · ')}`);
 			return;
@@ -256,6 +254,24 @@ Pruébalo:  npx morfeo render ${pos[0]}   y revísalo:  npx morfeo hoja ${pos[0]
 	}
 }
 
+/** Revisa un video (estructura + cuadros del MP4 si existe), lo imprime y devuelve cuántos avisos tuvo. */
+async function revisarVideo(p, id, sinCuadros = false) {
+	const fs = await import('node:fs');
+	const {revisarEstructura, consejosEnTexto} = await import('../lib/estructura.mjs');
+	// tiempos reales si ya se preparó la voz (después de un render); si no, solo el texto
+	const f = path.join(p.trabajo, 'public', 'v', id, 'datos.json');
+	const d = fs.existsSync(f) ? JSON.parse(fs.readFileSync(f, 'utf8')) : null;
+	const c = revisarEstructura(p.videos[id], d);
+	// con el MP4 ya hecho: cuadros negros, tapados, planos o quietos (--sin-cuadros lo salta)
+	if (!sinCuadros) {
+		const {salidaDe} = await import('../lib/salida.mjs');
+		const {revisarCuadros} = await import('../lib/calidad.mjs');
+		c.push(...(await revisarCuadros(salidaDe(p, id), d)));
+	}
+	console.log(c.length ? `${id}${d ? '' : '  (sin tiempos: renderízalo para revisar el ritmo)'}\n${consejosEnTexto(c)}` : `${id}  ✔`);
+	return c.length;
+}
+
 async function guion(pos, op, proyecto) {
 	const {cargarEnv} = await import('../lib/render.mjs');
 	const {guionConIA, guionSinIA, guardarVideo} = await import('../lib/guion.mjs');

package/index.d.ts

@@ -1,7 +1,7 @@
 // Tipos de Morfeo: dan autocompletado en morfeo.config.mjs y videos.mjs (también en JS).
 
 /** '#RRGGBB' o [r, g, b] */
-export type Ambiente = 'cuarto-gamer' | 'sala' | 'arcade' | 'taller' | 'oficina';
+export type Ambiente = 'cuarto-gamer' | 'sala' | 'arcade' | 'taller' | 'oficina' | 'tienda' | 'calle';
 /** Postproceso 3D: 'cine' (foco + brillo + viñeta), 'miniatura' (tilt-shift), 'suave', false o ajustes propios. */
 export type Post3D = 'cine' | 'miniatura' | 'suave' | false | {foco?: boolean | number; brillo?: number; vinieta?: number; miniatura?: number};
 export type Color = string | [number, number, number];
@@ -87,7 +87,7 @@ export type Capa = CapaBase &
 		| {tipo: 'fuente'; texto: string; etiqueta?: string; tam?: number; color?: string; colorTexto?: string}
 		| {tipo: 'seccion'; texto: string; tam?: number; color?: string}
 		| {tipo: 'insignia'; texto: string | number; tam?: number; fondo?: string; colorTexto?: string; inclinar?: number}
-		| {tipo: 'sello'; texto: string; tam?: number; color?: string; inclinar?: number}
+		| {tipo: 'sello'; texto: string; tam?: number; color?: string; inclinar?: number; /** caja detrás (sobre fondos claros) */ fondo?: string}
 		| {tipo: 'terminal'; lineas: (string | {texto: string; en?: Momento; salida?: boolean; color?: string})[]; titulo?: string; ancho?: number; tam?: number; fondo?: string; velocidad?: number}
 		| {tipo: 'nombre'; texto: string; sub?: string; tam?: number; fondo?: string; colorTexto?: string; borde?: string}
 		| {tipo: 'accion'; texto: string; tam?: number; color?: string; fondo?: string; colorTexto?: string}
@@ -297,7 +297,7 @@ export interface Video {
 	 * El componente recibe además `escena` (1, 2, 3...), `tEscena`, `inicios` y `camara` (para paralaje).
 	 */
 	/**
-	 * Ambiente 3D listo como mundo del video: 'cuarto-gamer' | 'sala' | 'arcade' (o {nombre, persona, post}).
+	 * Ambiente 3D listo como mundo del video: 'cuarto-gamer' | 'sala' | 'arcade' | 'taller' | 'oficina' | 'tienda' | 'calle' (o {nombre, persona, post}).
 	 * Sirve en cualquier estilo del motor de capas; cada escena elige su `plano` o toma otro ángulo sola.
 	 */
 	ambiente?: Ambiente | {nombre: Ambiente; persona?: boolean | {ropa?: string; pelo?: string; piel?: string}; reaccionar?: boolean; post?: Post3D};

package/lib/calidad.mjs

@@ -149,7 +149,9 @@ export async function revisarCuadros(mp4, d) {
 		// medido: escenas sin nada sobre fondo oscuro → media 13–15 y la cubeta más oscura con 97 % del cuadro;
 		// tele o pared pegadas a la cámara → desviación 12–16 con media > 130; los videos buenos del canal: desviación ≥ 27
 		negro: (s) => (s.media < 16 && s.desv < 9) || (s.media < 25 && s.dom > 0.9),
-		tapado: (s) => (s.dom > 0.58 && s.luzDom > 45) || (s.desv < 18 && s.media > 60),
+		// (el segundo caso pide además un color dominante: una escena de día con cielo pastel también tiene desviación
+		// baja, ~17, pero su color más repetido no pasa del 25 %)
+		tapado: (s) => (s.dom > 0.58 && s.luzDom > 45) || (s.desv < 18 && s.media > 60 && s.dom > 0.4),
 		plano: (s) => s.desv < 14 && s.media >= 25 && s.media <= 60,
 	};
 	const TEXTO = {

package/lib/config.mjs

@@ -28,7 +28,7 @@ export const ROTULOS = ['normal', 'contorno', 'pastilla', 'sello', 'paso', 'pixe
 export const MODOS = ['rayosx', 'plano', 'holograma'];
 export const ESTILOS = ['datos-curiosos', 'explicativo', 'documental', 'ilustrado', 'historia', 'mesa', 'serie', 'infografia', '3d', 'maqueta', 'minimal'];
 export const TIPOS_CAPA = ['imagen', 'video', 'texto', 'contador', 'chip', 'etiqueta', 'numero', 'tarjeta', 'telefono', 'forma', 'icono', 'emoji', 'marca', 'particulas', 'grupo', 'modelo', 'componente', 'ambiente', 'barra', 'medidor', 'votacion', 'estado', 'noticia', 'chat', 'onda', 'globo', 'seguir', 'personaje', 'escena3d', 'ventana', 'escenario', 'recurso', 'dato', 'medida', 'trazo', 'contorno', 'fuente', 'seccion', 'insignia', 'sello', 'cursor', 'terminal', 'nombre', 'accion', 'reloj', 'cronometro', 'termometro', 'recipientes', 'ficha', 'checklist', 'mapa', 'bloqueo', 'llamada', 'recuento', 'capitulo', 'vigilancia', 'cintillo', 'fecha', 'calendario', 'dividida', 'tierra', 'linea'];
-export const AMBIENTES = ['cuarto-gamer', 'sala', 'arcade', 'taller', 'oficina'];
+export const AMBIENTES = ['cuarto-gamer', 'sala', 'arcade', 'taller', 'oficina', 'tienda', 'calle'];
 export const ESCENARIOS = ['bosque', 'cuarto', 'departamento', 'tunel', 'pasillo'];
 export const FORMAS_3D = ['moneda', 'billete', 'lingote', 'cubo', 'esfera', 'corazon', 'estrella', 'rayo', 'diamante', 'trofeo', 'cohete', 'foco', 'reloj', 'planeta', 'arbol', 'nube', 'regalo', 'llave', 'candado', 'casa', 'libro', 'globo', 'medalla', 'escudo', 'pin', 'tuberia', 'muro', 'viga', 'columna', 'escalera', 'losa', 'tanque', 'suelo'];
 export const PROVEEDORES_VOZ = ['kokoro', 'elevenlabs', 'openai'];

package/lib/estructura.mjs

@@ -129,7 +129,7 @@ export function revisarEstructura(v, d) {
 			const capas = (s.capas ?? []).filter(Boolean);
 			if (!conMundo && (s.type ?? 'capas') === 'capas' && !capas.length && !s.rotulo) {
 				vacias++;
-				add('vacia', 'aviso', `Escena ${i + 1}: solo el subtítulo sobre el fondo. Agrega una capa o dale al video un \`ambiente: 'cuarto-gamer'\` (o 'sala', 'arcade', 'taller', 'oficina').`);
+				add('vacia', 'aviso', `Escena ${i + 1}: solo el subtítulo sobre el fondo. Agrega una capa o dale al video un \`ambiente: 'cuarto-gamer'\` (o 'sala', 'arcade', 'taller', 'oficina', 'tienda', 'calle').`);
 			}
 			if (capas.length && capas.every((c) => SOLO_TEXTO.has(c.tipo))) soloTexto++;
 			for (const c of capas) tipos.set(c.tipo, (tipos.get(c.tipo) ?? 0) + 1);

package/lib/render.mjs

@@ -230,7 +230,7 @@ export function usaWebGL(p, id) {
  * @param {{proyecto?: string, ids?: string[], todos?: boolean, log?: (m: string) => void, alProgreso?: (id: string, p: number) => void}} o
  * @returns {Promise<{id: string, mp4: string, jpg: string | null, segundos: number}[]>}
  */
-export async function render({proyecto = process.cwd(), ids, todos = false, soloFallidos = false, previa = null, animatica = false, escenas = null, log = console.log, alProgreso} = {}) {
+export async function render({proyecto = process.cwd(), ids, todos = false, cambiados = false, soloFallidos = false, previa = null, animatica = false, escenas = null, log = console.log, alProgreso} = {}) {
 	// animática: todo el video a 1/3 de tamaño y menor calidad (para aprobar tomas y ritmo en segundos)
 	// escenas: [a, b] (1 = la primera) solo ese tramo, en tamaño completo
 	const parcial = !!(animatica || escenas);
@@ -250,15 +250,37 @@ export async function render({proyecto = process.cwd(), ids, todos = false, solo
 	}
 	// archivos ya hechos con el id o con un título viejo → su nombre actual (sin volver a renderizar)
 	ordenarSalida(p, (m) => log(m));
-	let lista = ids?.length ? ids : todos ? Object.keys(p.videos) : Object.keys(p.videos).filter((id) => !fs.existsSync(salidaDe(p, id)));
+	let lista = ids?.length ? ids : todos || cambiados ? Object.keys(p.videos) : Object.keys(p.videos).filter((id) => !fs.existsSync(salidaDe(p, id)));
 	const malos = lista.filter((id) => !p.videos[id]);
 	if (malos.length) throw new ErrorMorfeo(`No existen: ${malos.join(', ')}. Usa: npx morfeo lista`);
 	if (!lista.length) {
 		log('No hay videos pendientes. Para regenerar: npx morfeo render --todos  (o npx morfeo render <id>)');
 		return [];
 	}
+	// --cambiados: solo los videos cuyo guion o componentes del proyecto cambiaron desde su último render. Se decide
+	// con el guion, antes de preparar el audio (prepararlo para 30 videos tarda más que renderizar uno).
+	// La versión de Morfeo no cuenta (rehacería todo en cada actualización): para eso está --todos.
+	const huellas = leerHuellas(p);
+	const delProyecto = parcial || previa ? '' : huellaProyecto(p);
+	const huellaDe = (id) => crypto.createHash('sha1').update(delProyecto).update(JSON.stringify(p.videos[id], (k, v) => (typeof v === 'function' ? String(v) : v))).digest('hex').slice(0, 16);
+	if (cambiados && !ids?.length) {
+		const antes = lista.length;
+		// la primera vez no hay huella de los videos ya hechos: se dan por buenos y se anota la de ahora
+		let nuevas = 0;
+		for (const id of lista)
+			if (huellas[id] == null && fs.existsSync(salidaDe(p, id))) {
+				huellas[id] = huellaDe(id);
+				nuevas++;
+			}
+		if (nuevas) guardarHuellas(p, huellas);
+		lista = lista.filter((id) => huellas[id] !== huellaDe(id) || !fs.existsSync(salidaDe(p, id)));
+		log(lista.length ? `${lista.length} de ${antes} video(s) cambiaron: ${lista.join(', ')}` : `Ningún video cambió desde su último render (${antes} al día).`);
+		if (!lista.length) return [];
+	}
 	if (!whisperListo()) log('(Whisper no está instalado: subtítulos repartidos por frase. Para tiempos exactos: npx morfeo instalar --whisper)');
+	const tPrep = Date.now();
 	const {publico, marca, extras, datos, fallidos} = await preparar({proyecto, ids: lista, log, _p: p, continuar: true});
+	const segPrep = (Date.now() - tPrep) / 1000;
 	const listos = lista.filter((id) => datos[id]);
 	// estructura: consejos medidos en videos virales (no detienen el render; se apagan con render.consejos: false)
 	if (p.render.consejos !== false)
@@ -277,12 +299,16 @@ export async function render({proyecto = process.cwd(), ids, todos = false, solo
 		const {bundle} = await import('@remotion/bundler');
 		const {renderMedia, renderStill, selectComposition} = await import('@remotion/renderer');
 		const entrada = entradaDe(p);
+		const tBundle = Date.now();
 		const serveUrl = await bundle({entryPoint: entrada, publicDir: publico, rootDir: entrada === ENTRADA_REMOTION ? path.dirname(ENTRADA_REMOTION) : p.proyecto, webpackOverride: conHuella});
+		const segBundle = (Date.now() - tBundle) / 1000;
 		fs.mkdirSync(p.salida, {recursive: true});
 		const chromiumOptions = {gl: p.render.gl};
 		const browserExecutable = p.render.navegador ?? (await asegurarNavegador(log));
 		// cuadros en paralelo: con GPU aguanta más; por software cada pestaña come mucha CPU y memoria
 		const nucleos = os.cpus().length;
+		// MORFEO_CONCURRENCIA=n: fija los cuadros en paralelo sin tocar el config (para medir en tu máquina)
+		if (process.env.MORFEO_CONCURRENCIA) p.render.concurrencia = Math.max(1, Number(process.env.MORFEO_CONCURRENCIA) || 1);
 		const concurrenciaBase = p.render.concurrencia ?? (p.render.gl === 'angle' ? Math.max(2, Math.min(10, Math.floor(nucleos * 0.75))) : Math.max(1, Math.min(3, Math.floor(nucleos / 4))));
 		const sinTTY = !process.stdout.isTTY;
 		for (const [i, id] of listos.entries()) {
@@ -317,6 +343,8 @@ export async function render({proyecto = process.cwd(), ids, todos = false, solo
 						audioBitrate: '192k',
 						imageFormat: 'jpeg',
 						jpegQuality: 92,
+						// 'faster': ~10 % menos tiempo que 'medium' y, con el mismo CRF, sin diferencia visible
+						x264Preset: 'faster',
 						concurrency: concurrencia,
 						outputLocation: mp4,
 						...(previa ? {frameRange: [0, Math.min(composition.durationInFrames - 1, Math.round(finPrevia * composition.fps))]} : {}),
@@ -346,6 +374,7 @@ export async function render({proyecto = process.cwd(), ids, todos = false, solo
 					log(`\n    el navegador falló; reintento con ${gl === 'angle' ? 'GPU' : 'CPU'} y ${concurrencia} cuadro(s) a la vez...`);
 				}
 			}
+			const segVideo = (Date.now() - t) / 1000;
 			let jpg = null;
 			if (p.render.miniatura && !previa && !parcial) {
 				// miniatura: cuando la primera escena ya está completa (o en `miniaturaEn`), sin subtítulos
@@ -371,7 +400,13 @@ export async function render({proyecto = process.cwd(), ids, todos = false, solo
 			const segundos = Math.round((Date.now() - t) / 1000);
 			if (process.stdout.isTTY) process.stdout.write('\r');
 			log(`[${i + 1}/${listos.length}] ${id}: listo en ${segundos} s  →  ${path.relative(p.proyecto, mp4)}      `);
+			// desglose para saber qué optimizar (MORFEO_TIEMPOS=1): audio y empaquetado son de todo el lote
+			if (process.env.MORFEO_TIEMPOS) log(`    tiempos: audio ${segPrep.toFixed(1)} s (lote) · empaquetar ${segBundle.toFixed(1)} s (lote) · video ${segVideo.toFixed(1)} s · miniatura y portada ${(segundos - segVideo).toFixed(1)} s`);
 			hechos.push({id, mp4, jpg, segundos});
+			if (!previa && !parcial) {
+				huellas[id] = huellaDe(id);
+				guardarHuellas(p, huellas);
+			}
 			} catch (e) {
 				if (process.stdout.isTTY) process.stdout.write('\n');
 				fallidos.push({id, error: mensajeDe(e)});
@@ -385,6 +420,39 @@ export async function render({proyecto = process.cwd(), ids, todos = false, solo
 	return terminarLote(p, loteArchivo, hechos, fallidos, log);
 }
 
+// Huella de cada video al renderizarlo (.morfeo/huellas.json): con ella `render --cambiados` sabe cuáles rehacer.
+const archivoHuellas = (p) => path.join(p.trabajo, 'huellas.json');
+function leerHuellas(p) {
+	try {
+		return JSON.parse(fs.readFileSync(archivoHuellas(p), 'utf8'));
+	} catch {
+		return {};
+	}
+}
+function guardarHuellas(p, h) {
+	fs.mkdirSync(p.trabajo, {recursive: true});
+	fs.writeFileSync(archivoHuellas(p), JSON.stringify(h, null, '\t'));
+}
+/** Componentes y config del proyecto (tsx/ts/jsx y morfeo.config.mjs): si cambian, cambia cómo se ve el video. */
+function huellaProyecto(p) {
+	const partes = [];
+	const recorrer = (dir, n = 0) => {
+		if (n > 4) return;
+		for (const e of fs.readdirSync(dir, {withFileTypes: true}).sort((a, b) => a.name.localeCompare(b.name))) {
+			if (e.name.startsWith('.') || e.name === 'node_modules' || e.name === 'guiones') continue;
+			const f = path.join(dir, e.name);
+			if (path.resolve(f) === path.resolve(p.salida)) continue;
+			if (e.isDirectory()) recorrer(f, n + 1);
+			else if (/\.(tsx?|jsx)$/.test(e.name) || e.name === 'morfeo.config.mjs') {
+				const st = fs.statSync(f);
+				partes.push(`${e.name}:${st.size}:${Math.round(st.mtimeMs)}`);
+			}
+		}
+	};
+	recorrer(p.proyecto);
+	return crypto.createHash('sha1').update(partes.join('|')).digest('hex').slice(0, 8);
+}
+
 const CRF = {alta: 18, media: 21, ligera: 24};
 /** Cuadros [inicio, fin] de las escenas a..b (1 = la primera). */
 function tramoEscenas(d, [a, b], composition) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "morfeo",
-	"version": "0.6.1",
+	"version": "0.6.3",
 	"description": "Genera videos verticales animados (Remotion + Three.js) con voz, música y subtítulos, desde un guion en código o escrito por IA.",
 	"type": "module",
 	"license": "SEE LICENSE IN LICENSE",

package/plantilla/AGENTS.md

@@ -43,8 +43,9 @@ la persona te corrija algo que deba valer para los siguientes videos, ofrécele
    (tiene 3 ganchos de reserva en `hooks`).
 6. **Aprueba tomas y ritmo barato:** `npx morfeo animatica <id>` (todo el video a 1/3 de tamaño + su hoja). Si una
    toma está mal, arréglala y vuelve a pedir solo esas escenas: `npx morfeo render <id> --escenas 5-6`.
-7. **Renderiza:** `npx morfeo render <id>`.
-8. **Revisa antes de entregar:**
+7. **Renderiza y revisa en un paso:** `npx morfeo render <id> --revisar` (video + hoja + revisión). Tras cambiar varios
+   guiones, `npx morfeo render --cambiados --revisar` rehace solo los que cambiaron.
+8. **Revisa antes de entregar** (si no usaste `--revisar`):
    - `npx morfeo revisar <id>`: estructura, que la voz haya dicho el guion, que nada quede bajo los botones de la app,
      el riesgo de "diapositiva" y, en el MP4, cuadros negros, tapados (cámara pegada a algo), lisos o quietos.
    - `npx morfeo hoja <id> --zona`: mira la hoja de contacto (es una imagen); lo pintado en rojo es lo que tapan las apps.

package/python/musica.py

@@ -335,6 +335,18 @@ def cama(nombre, N, rng):
             n = int(0.012 * SR); g = int(rng.random() * (N - n))
             x[g:g + n] += 0.02 * hp(rng.standard_normal(n), 2500) * np.exp(-np.arange(n) / (0.002 * SR))
         return x
+    if nombre == "tienda":
+        x = lp(hp(rng.standard_normal(N), 250), 1300) * 0.025 * (0.6 + 0.4 * np.abs(np.sin(2 * np.pi * 0.6 * t))) + zumbido * 0.7
+        for _ in range(int(N / SR / 2)):  # la tele de demostración: blips lejanos
+            add(x, 0.01 * lp(_tono(nf(74 + int(rng.random() * 12)), 0.1, 20), 2500), rng.random() * (N / SR - 0.2))
+        return x
+    if nombre == "calle":
+        viento = lp(rng.standard_normal(N), 350) * 0.05 * (0.6 + 0.4 * np.sin(2 * np.pi * 0.11 * t))
+        x = lluvia(0.06) + viento
+        for _ in range(max(1, int(N / SR / 9))):  # un coche que pasa a lo lejos
+            d = 3.0; n = int(d * SR); tt = np.arange(n) / SR
+            add(x, 0.035 * lp(rng.standard_normal(n), 500) * np.sin(np.pi * tt / d) ** 2, rng.random() * max(0.1, N / SR - d))
+        return x
     if nombre == "arcade":
         x = lp(rng.standard_normal(N), 700) * 0.05 + zumbido
         for _ in range(int(N / SR * 3)):  # maquinitas sonando por todos lados

package/remotion/kit/ambientes.tsx

@@ -13,7 +13,7 @@ import {Persona3D} from './mundo3d';
 import type {Expresion, Pose} from './personas';
 import {Bloque, Lienzo3D, type Etiqueta3D, type Post3D, type Toma3D, type V3} from './tres';
 
-export type NombreAmbiente = 'cuarto-gamer' | 'sala' | 'arcade' | 'taller' | 'oficina';
+export type NombreAmbiente = 'cuarto-gamer' | 'sala' | 'arcade' | 'taller' | 'oficina' | 'tienda' | 'calle';
 export type Reaccion = {en: number; expresion?: Expresion; pose?: Pose};
 
 type Def = {
@@ -627,6 +627,192 @@ const SetOficina: React.FC<{t: number}> = ({t}) => (
 	</group>
 );
 
+
+/** Caja de juego de frente (portada de color con una franja), para exhibidores. */
+const CajaJuego: React.FC<{pos: V3; i: number; rot?: V3}> = ({pos, i, rot}) => {
+	const c = ['#E5484D', '#3D7BFF', '#F2B632', '#30A46C', '#8B5BD6', '#FF8A3D'][i % 6];
+	return (
+		<group position={pos} rotation={rot ? [(rot[0] * Math.PI) / 180, (rot[1] * Math.PI) / 180, (rot[2] * Math.PI) / 180] : undefined}>
+			<Bloque pos={[0, 0, 0]} tam={[0.26, 0.36, 0.04]} color={c} />
+			<Bloque pos={[0, 0.13, 0.022]} tam={[0.26, 0.06, 0.004]} color="#F4F1EA" />
+			<Bloque pos={[0, -0.03, 0.022]} tam={[0.12, 0.12, 0.004]} color={hsl(0.13 * i + 0.4, 0.6, 0.72)} />
+		</group>
+	);
+};
+
+/** Tienda de videojuegos: pared de juegos, mostrador con caja, tele de demostración, isla de ofertas y neón. */
+const SetTienda: React.FC<{t: number}> = ({t}) => (
+	<group>
+		<Cuarto ancho={9} fondo={7} alto={3.4} pared="#232A44" lateral="#1D233A" piso="#3A3340" />
+		{/* pared de juegos: dos filas de estantes */}
+		{[-3.2, -1.55, 0.1].map((x, i) => (
+			<React.Fragment key={x}>
+				<Estante pos={[x, 0.75, -3.25]} semilla={i * 7} />
+				<Estante pos={[x, 2.05, -3.25]} semilla={i * 7 + 3} />
+			</React.Fragment>
+		))}
+		<Emisivo pos={[-1.55, 3.05, -3.36]} tam={[4.9, 0.05, 0.04]} color="#7FE3FF" fuerza={1.4} />
+		<pointLight position={[-1.55, 2.9, -2.6]} color="#7FE3FF" intensity={1.2} distance={5} decay={1.6} />
+		{/* tele de demostración y letrero de neón (un control) */}
+		<Tele3D pos={[2.8, 1.95, -3.32]} ancho={1.3} t={t} fase={2} luz={1.6} />
+		<group position={[2.8, 2.95, -3.36]}>
+			{[
+				[0, 0.16, 0.9, 0],
+				[0, -0.16, 0.9, 0],
+				[-0.45, 0, 0.32, 90],
+				[0.45, 0, 0.32, 90],
+			].map(([x, y, l, r], i) => (
+				<Emisivo key={i} pos={[x, y, 0]} tam={[l, 0.05, 0.04]} rot={[0, 0, (r * Math.PI) / 180]} color="#FF3B6B" fuerza={2.1 * (Math.sin(t * 11) > -0.9 ? 1 : 0.6)} />
+			))}
+			<Emisivo pos={[-0.22, 0, 0]} tam={[0.16, 0.05, 0.04]} color="#FFD23D" fuerza={2} />
+			<Emisivo pos={[-0.22, 0, 0]} tam={[0.05, 0.16, 0.04]} color="#FFD23D" fuerza={2} />
+			<Emisivo pos={[0.2, 0.03, 0]} tam={[0.06, 0.06, 0.04]} color="#3DB8FF" fuerza={2} />
+			<Emisivo pos={[0.3, -0.04, 0]} tam={[0.06, 0.06, 0.04]} color="#3DDC84" fuerza={2} />
+			<pointLight position={[0, 0, 0.6]} color="#FF3B6B" intensity={1.6} distance={4} />
+		</group>
+		{/* mostrador con caja registradora y vitrina */}
+		<Bloque pos={[2.6, 0.5, -1.2]} tam={[2.2, 1.0, 0.8]} color="#4A3B5C" />
+		<Bloque pos={[2.6, 1.02, -1.2]} tam={[2.3, 0.05, 0.9]} color="#E9E1D2" />
+		<Emisivo pos={[2.6, 0.55, -0.79]} tam={[1.9, 0.5, 0.02]} color="#9AD7FF" fuerza={0.5} />
+		{[0, 1, 2, 3].map((i) => (
+			<Bloque key={i} pos={[1.9 + i * 0.46, 0.5, -0.76]} tam={[0.3, 0.12, 0.04]} color={['#EDEDED', '#2B2B33', '#E5484D', '#3D7BFF'][i]} />
+		))}
+		<Bloque pos={[3.1, 1.2, -1.25]} tam={[0.5, 0.3, 0.45]} color="#2B2B33" />
+		<Emisivo pos={[3.1, 1.42, -1.1]} tam={[0.36, 0.2, 0.03]} rot={[-0.5, 0, 0]} color="#3DDC84" fuerza={1.2 + 0.2 * Math.sin(t * 5)} />
+		<Bloque pos={[2.0, 1.14, -1.2]} tam={[0.3, 0.18, 0.2]} color="#EDEDED" radio={0.03} />
+		{/* isla de ofertas */}
+		<Bloque pos={[-2.6, 0.45, 0.6]} tam={[1.5, 0.9, 0.8]} color="#4A3B5C" />
+		{[0, 1, 2, 3].map((i) => (
+			<CajaJuego key={i} pos={[-3.15 + i * 0.37, 1.07, 0.6]} i={i + 2} rot={[-18, 0, 0]} />
+		))}
+		<Emisivo pos={[-2.6, 0.5, 1.01]} tam={[0.9, 0.3, 0.02]} color="#FFD23D" fuerza={1.1} />
+		<pointLight position={[-2.4, 2.4, 1.4]} color="#FFE2B8" intensity={1.8} distance={4.5} decay={1.5} />
+		{/* póster y tapete */}
+		<Poster pos={[-4.38, 2.0, -1.2]} tipo="nave" rot={[0, 90, 0]} />
+		<mesh rotation={[-Math.PI / 2, 0, 0]} position={[0.4, 0.006, -0.6]}>
+			<circleGeometry args={[1.5, 28]} />
+			<meshStandardMaterial color="#5B4B8A" roughness={0.95} />
+		</mesh>
+		{/* luces del techo */}
+		{[-2.4, 1.2].map((x) => (
+			<group key={x} position={[x, 3.3, -1]}>
+				<Emisivo pos={[0, 0, 0]} tam={[1.6, 0.04, 0.14]} color="#FFE9C4" fuerza={1.4} />
+				<pointLight position={[0, -0.3, 0]} intensity={2.3} distance={7.5} decay={1.4} color="#FFE2B8" />
+			</group>
+		))}
+		<Polvo centro={[0, 1.8, -1.2]} tam={[6, 2.4, 3]} t={t} n={30} />
+	</group>
+);
+
+/** Calle de noche con lluvia: fachadas con ventanas, un local con vitrina y neón, farola, banca y coche. */
+const SetCalle: React.FC<{t: number}> = ({t}) => (
+	<group>
+		{/* asfalto, banqueta y línea de la calle */}
+		<mesh rotation={[-Math.PI / 2, 0, 0]} position={[0, 0, 1]} receiveShadow>
+			<planeGeometry args={[40, 16]} />
+			<meshStandardMaterial color="#14161E" roughness={0.35} metalness={0.3} />
+		</mesh>
+		<Bloque pos={[0, 0.07, -1.3]} tam={[40, 0.14, 3.6]} color="#3B3D48" rugosidad={0.9} />
+		{[-9, -6, -3, 0, 3, 6, 9].map((x) => (
+			<Bloque key={x} pos={[x, 0.006, 3.2]} tam={[1.4, 0.01, 0.14]} color="#D8D2B8" />
+		))}
+		{/* charcos que reflejan el neón */}
+		{[
+			[-1.2, 1.4, 1.1],
+			[1.8, 2.4, 0.8],
+			[-3.6, 3.6, 0.7],
+		].map(([x, z, r], i) => (
+			<mesh key={i} rotation={[-Math.PI / 2, 0, 0]} position={[x, 0.004, z]} scale={[1, 0.55, 1]}>
+				<circleGeometry args={[r, 20]} />
+				<meshStandardMaterial color="#232A4A" roughness={0.05} metalness={0.9} emissive="#FF3B6B" emissiveIntensity={0.05 + 0.03 * Math.sin(t * 3 + i)} />
+			</mesh>
+		))}
+		{/* fachadas */}
+		{[
+			[-5.6, 7.5, 5, '#1C2033'],
+			[0, 5.2, 5.4, '#2A2338'],
+			[5.8, 8.6, 5.6, '#1A1E2E'],
+		].map(([x, alto, ancho, color], k) => (
+			<group key={k}>
+				<Bloque pos={[x as number, (alto as number) / 2, -4.4]} tam={[ancho as number, alto as number, 2.6]} color={color as string} rugosidad={0.95} />
+				{Array.from({length: 4 * Math.floor(((alto as number) - 2.6) / 1.15)}, (_, i) => {
+					const col = i % 4;
+					const fila = Math.floor(i / 4);
+					const prendida = azarN(k * 31 + i * 7.3) > 0.45;
+					const parpadea = k === 0 && i === 5 ? 0.6 + 0.4 * (Math.sin(t * 9) > 0.2 ? 1 : 0.3) : 1;
+					return <Emisivo key={i} pos={[(x as number) - (ancho as number) / 2 + 0.85 + col * (((ancho as number) - 1.7) / 3), 3.4 + fila * 1.15, -3.08]} tam={[0.62, 0.72, 0.03]} color={prendida ? (azarN(i * 3.1 + k) > 0.6 ? '#9AD7FF' : '#FFD98A') : '#141826'} fuerza={prendida ? 0.9 * parpadea : 0.05} />;
+				})}
+			</group>
+		))}
+		{/* local: vitrina encendida, puerta, toldo y letrero */}
+		<Emisivo pos={[-0.6, 1.35, -3.08]} tam={[2.6, 1.7, 0.04]} color="#E0A050" fuerza={0.5} />
+		{[0, 1, 2, 3, 4, 5, 6, 7].map((i) => (
+			<CajaJuego key={i} pos={[-1.5 + (i % 4) * 0.6, i < 4 ? 0.95 : 1.6, -3.02]} i={i} />
+		))}
+		<Bloque pos={[-0.6, 1.28, -3.03]} tam={[2.6, 0.04, 0.12]} color="#3A2F4E" />
+		<Bloque pos={[-0.6, 0.38, -3.02]} tam={[2.7, 0.5, 0.1]} color="#3A2F4E" />
+		<Bloque pos={[1.6, 1.15, -3.06]} tam={[0.95, 2.1, 0.08]} color="#4A3B5C" />
+		<Emisivo pos={[1.6, 1.5, -3.01]} tam={[0.6, 0.9, 0.02]} color="#FFC56B" fuerza={0.6} />
+		<Bloque pos={[0.1, 2.45, -2.75]} rot={[18, 0, 0]} tam={[4.4, 0.08, 0.9]} color="#C62E3A" />
+		<group position={[0.1, 3.05, -3.04]}>
+			{[-1.2, -0.6, 0, 0.6, 1.2].map((x, i) => (
+				<Emisivo key={i} pos={[x, 0, 0]} tam={[0.42, 0.34, 0.05]} color={['#FF3B6B', '#FFD23D', '#3DDC84', '#3DB8FF', '#B98BFF'][i]} fuerza={2 * (Math.floor(t * 2.5) % 6 === i ? 0.45 : 1)} />
+			))}
+			<pointLight position={[0, 0, 1]} color="#FF6B9A" intensity={2.2} distance={6} decay={1.5} />
+		</group>
+		<pointLight position={[-0.6, 1.4, -2.2]} color="#FFC56B" intensity={2.4} distance={5.5} decay={1.5} />
+		{/* farola */}
+		<Bloque pos={[3.0, 1.8, -0.1]} tam={[0.1, 3.6, 0.1]} color="#2B2F3A" metal={0.5} />
+		<Bloque pos={[2.7, 3.58, -0.1]} tam={[0.7, 0.07, 0.1]} color="#2B2F3A" metal={0.5} />
+		<Emisivo pos={[2.45, 3.5, -0.1]} tam={[0.3, 0.08, 0.16]} color="#FFE2A8" fuerza={2.4} />
+		<pointLight position={[2.45, 3.2, -0.1]} color="#FFD9A0" intensity={3} distance={8} decay={1.4} castShadow />
+		{/* banca, bote e hidrante */}
+		<Bloque pos={[-2.9, 0.5, -2.3]} tam={[1.5, 0.08, 0.45]} color="#8A6A48" />
+		<Bloque pos={[-2.9, 0.85, -2.5]} tam={[1.5, 0.4, 0.06]} color="#8A6A48" />
+		{[-0.6, 0.6].map((l) => (
+			<Bloque key={l} pos={[-2.9 + l, 0.3, -2.3]} tam={[0.08, 0.36, 0.4]} color="#2B2F3A" />
+		))}
+		<mesh position={[-4.3, 0.55, -2.3]}>
+			<cylinderGeometry args={[0.24, 0.2, 0.8, 12]} />
+			<meshStandardMaterial color="#2F5D4A" roughness={0.8} />
+		</mesh>
+		<mesh position={[4.2, 0.42, -0.4]}>
+			<cylinderGeometry args={[0.13, 0.15, 0.56, 10]} />
+			<meshStandardMaterial color="#C62E3A" roughness={0.6} />
+		</mesh>
+		{/* coche estacionado */}
+		<group position={[-3.4, 0, 1.5]}>
+			<Bloque pos={[0, 0.5, 0]} tam={[2.5, 0.5, 1.1]} color="#2D6BFF" radio={0.08} />
+			<Bloque pos={[-0.1, 0.95, 0]} tam={[1.3, 0.42, 1.0]} color="#1E2A44" radio={0.08} />
+			<Emisivo pos={[1.26, 0.52, 0.36]} tam={[0.03, 0.12, 0.2]} color="#FFF2C8" fuerza={0.5} />
+			<Emisivo pos={[1.26, 0.52, -0.36]} tam={[0.03, 0.12, 0.2]} color="#FFF2C8" fuerza={0.5} />
+			<Emisivo pos={[-1.26, 0.55, 0.36]} tam={[0.03, 0.1, 0.22]} color="#FF3B30" fuerza={0.9} />
+			<Emisivo pos={[-1.26, 0.55, -0.36]} tam={[0.03, 0.1, 0.22]} color="#FF3B30" fuerza={0.9} />
+			{[
+				[-0.8, 0.56],
+				[0.8, 0.56],
+				[-0.8, -0.56],
+				[0.8, -0.56],
+			].map(([x, z], i) => (
+				<mesh key={i} position={[x, 0.26, z]} rotation={[Math.PI / 2, 0, 0]}>
+					<cylinderGeometry args={[0.26, 0.26, 0.16, 14]} />
+					<meshStandardMaterial color="#111216" roughness={0.9} />
+				</mesh>
+			))}
+		</group>
+		<pointLight position={[-3.2, 2.6, 3.4]} color="#8FA8FF" intensity={1.6} distance={6} decay={1.5} />
+		{/* luna y lluvia (entre las fachadas y las cámaras: una gota pegada al lente se ve como una barra) */}
+		<mesh position={[-7, 12, -16]}>
+			<sphereGeometry args={[1.1, 18, 14]} />
+			<meshStandardMaterial color="#F4F1DE" emissive="#F4F1DE" emissiveIntensity={0.9} toneMapped={false} />
+		</mesh>
+		{Array.from({length: 90}, (_, i) => {
+			const y = 6 - ((t * (5.5 + azarN(i * 1.9) * 2.5) + azarN(i * 4.7) * 6) % 6);
+			return <Emisivo key={i} pos={[(azarN(i * 2.3) - 0.5) * 12, y, -2.2 + azarN(i * 5.9) * 3.5]} tam={[0.012, 0.22, 0.012]} color="#BFD4FF" fuerza={0.55} />;
+		})}
+	</group>
+);
+
 const AMBIENTES: Record<NombreAmbiente, Def> = {
 	'cuarto-gamer': {
 		luz: 'noche',
@@ -686,7 +872,8 @@ const AMBIENTES: Record<NombreAmbiente, Def> = {
 			espalda: {pos: [2.3, 1.9, 1.3], mirar: [-0.2, 1.35, -3.4], fov: 46, a: {pos: [2.15, 1.85, 1.0]}},
 		},
 		orden: ['general', 'persona', 'maquina', 'espalda', 'pasillo'],
-		ordenFondo: ['general', 'espalda', 'pasillo', 'maquina'],
+		// general y espalda dejan a la persona al centro, justo donde caen las capas 2D
+		ordenFondo: ['pasillo', 'maquina'],
 		anclas: {maquina: [0.6, 1.42, -3.0], persona: [0.6, 1.6, -0.9], neon: [2.6, 2.9, -3.88], pasillo: [-4.4, 1.4, -0.6]},
 		persona: {pos: [0.6, 0, -0.95], rot: [0, 180, 0], pose: 'parado'},
 		Set: SetArcade,
@@ -730,6 +917,44 @@ const AMBIENTES: Record<NombreAmbiente, Def> = {
 		persona: {pos: [-1.6, 0, -0.88], rot: [0, 180, 0], pose: 'sentado'},
 		Set: SetOficina,
 	},
+	tienda: {
+		luz: 'noche',
+		fondo: '#0C0E1A',
+		niebla: [10, 24],
+		post: 'cine',
+		planos: {
+			general: {pos: [3.3, 2.6, 3.7], mirar: [-0.4, 1.3, -2.2], fov: 50, a: {pos: [2.8, 2.4, 3.1]}},
+			persona: {pos: [1.7, 1.6, -2.85], mirar: [0.4, 1.4, -1.0], fov: 44, a: {pos: [1.6, 1.58, -2.7]}},
+			estantes: {pos: [-1.3, 1.7, -0.3], mirar: [-1.5, 1.5, -3.3], fov: 46, a: {pos: [-1.5, 1.7, -0.6]}},
+			mostrador: {pos: [1.0, 1.9, 0.9], mirar: [2.7, 1.15, -1.2], fov: 46, a: {pos: [1.2, 1.85, 0.6]}},
+			tele: {pos: [2.1, 1.9, -0.1], mirar: [2.8, 2.15, -3.35], fov: 44, a: {pos: [2.2, 1.9, -0.4]}},
+			isla: {pos: [-1.1, 1.9, 2.4], mirar: [-2.6, 0.95, 0.6], fov: 44, a: {pos: [-1.3, 1.85, 2.1]}},
+		},
+		orden: ['general', 'persona', 'estantes', 'mostrador', 'tele', 'isla'],
+		ordenFondo: ['estantes', 'mostrador', 'tele', 'isla'],
+		anclas: {estantes: [-1.5, 1.6, -3.2], mostrador: [2.6, 1.2, -1.2], caja: [3.1, 1.4, -1.2], tele: [2.8, 1.95, -3.3], isla: [-2.6, 1.1, 0.6], persona: [0.4, 1.6, -1.0]},
+		persona: {pos: [0.4, 0, -1.0], rot: [0, 180, 0], pose: 'parado'},
+		Set: SetTienda,
+	},
+	calle: {
+		luz: 'noche',
+		fondo: '#0A1024',
+		niebla: [14, 38],
+		post: 'cine',
+		planos: {
+			general: {pos: [3.6, 2.3, 4.8], mirar: [-0.2, 1.7, -2.6], fov: 52, a: {pos: [3.0, 2.2, 4.2]}},
+			persona: {pos: [2.45, 1.6, -2.6], mirar: [1.3, 1.4, -0.6], fov: 44, a: {pos: [2.35, 1.58, -2.45]}},
+			vitrina: {pos: [-1.7, 1.7, 2.3], mirar: [-0.5, 1.85, -3], fov: 50, a: {pos: [-1.6, 1.7, 1.9]}},
+			edificios: {pos: [-1.6, 1.3, 3.0], mirar: [-4.6, 4.6, -3], fov: 52, a: {pos: [-1.8, 1.35, 2.7]}},
+			coche: {pos: [-0.3, 1.5, 4.7], mirar: [-3.4, 0.8, 1.5], fov: 50, a: {pos: [-0.5, 1.5, 4.4]}},
+			farola: {pos: [0.9, 1.1, 1.8], mirar: [2.6, 3.1, -0.4], fov: 52, a: {pos: [1.0, 1.15, 1.5]}},
+		},
+		orden: ['general', 'persona', 'vitrina', 'edificios', 'coche', 'farola'],
+		ordenFondo: ['vitrina', 'edificios', 'coche', 'farola'],
+		anclas: {vitrina: [-0.6, 1.4, -3.0], letrero: [0.1, 3.05, -3.0], farola: [2.45, 3.5, -0.1], coche: [-3.4, 0.9, 1.5], edificios: [-5.6, 5, -3.1], persona: [1.3, 1.6, -0.6]},
+		persona: {pos: [1.3, 0, -0.6], rot: [0, 180, 0], pose: 'parado'},
+		Set: SetCalle,
+	},
 };
 
 export const NOMBRES_AMBIENTES = Object.keys(AMBIENTES) as NombreAmbiente[];

package/remotion/kit/tres.tsx

@@ -270,14 +270,14 @@ const Post: React.FC<{post: Post3D; estado: Estado}> = ({post, estado}) => {
 	const dist = Math.hypot(estado.pos[0] - estado.mirar[0], estado.pos[1] - estado.mirar[1], estado.pos[2] - estado.mirar[2]);
 	const rango = typeof o.foco === 'number' ? o.foco : Math.max(1.2, dist * 0.55);
 	const efectos: React.ReactElement[] = [];
-	if (o.foco) efectos.push(<DepthOfField key="f" target={estado.mirar} worldFocusRange={rango} bokehScale={4} resolutionScale={0.6} />);
+	if (o.foco) efectos.push(<DepthOfField key="f" target={estado.mirar} worldFocusRange={rango} bokehScale={4} resolutionScale={0.5} />);
 	if (o.miniatura) efectos.push(<TiltShift2 key="m" blur={0.12 * o.miniatura} taper={0.6} start={[0.5, 0.0]} end={[0.5, 1.0]} />);
 	if (o.brillo) efectos.push(<Bloom key="b" intensity={o.brillo} luminanceThreshold={0.85} luminanceSmoothing={0.2} mipmapBlur />);
 	if (o.vinieta) efectos.push(<Vignette key="v" offset={0.3} darkness={o.vinieta} />);
 	if (!efectos.length) return null;
 	return (
 		<>
-			<EffectComposer multisampling={4}>{efectos}</EffectComposer>
+			<EffectComposer multisampling={2}>{efectos}</EffectComposer>
 			<RedibujarAlMontar />
 		</>
 	);

package/remotion/motor/Video.tsx

@@ -413,7 +413,8 @@ const MarcaEsquina: React.FC<{tema: Tema}> = ({tema}) => {
 };
 
 export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string, any>; miniatura?: boolean; sinMarca?: boolean}> = ({d, T, estilos, miniatura, sinMarca}) => {
-	const tema = temaDe(d.estilo, d.tema, estilos);
+	const conAmbiente = !!d.mundo?.some((c: any) => c.tipo === 'ambiente');
+	const tema = temaDe(d.estilo, d.tema, estilos, conAmbiente);
 	const n = d.escenas.length;
 	let si = d.escenas.findIndex((e) => T < e.t0 + e.dur);
 	if (si < 0) si = n - 1;
@@ -473,6 +474,8 @@ export const VideoMotor: React.FC<{d: Datos; T: number; estilos?: Record<string,
 						<Mundo d={d} si={si} t={t} T={T} tema={tema} />
 					</AbsoluteFill>
 				) : null}
+				{/* un ambiente puede ser claro (oficina): sombra arriba, donde van subtítulos y titular, para que el texto blanco se lea (en el cierre, todo el cuadro) */}
+				{conAmbiente ? <AbsoluteFill style={{background: e.tipo === 'cta' ? 'rgba(0,0,0,0.55)' : 'linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.38) 30%, rgba(0,0,0,0) 46%)'}} /> : null}
 				{enTransicion && prev ? (
 					<AbsoluteFill style={estiloPrevio}>
 						<EscenaVista e={prev} t={prev.dur + t} tema={tema} semilla={semilla} sinFondo={conMundo} />

package/remotion/motor/anotaciones.tsx

@@ -204,6 +204,7 @@ export const Anotacion: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
 						border: `${Math.max(4, tam * 0.1)}px solid ${color}`,
 						outline: `${Math.max(2, tam * 0.04)}px solid ${color}`,
 						outlineOffset: tam * 0.1,
+						background: c.fondo,
 						borderRadius: tam * 0.2,
 						padding: `${tam * 0.12}px ${tam * 0.42}px`,
 						fontFamily: T.fuentes.titulo,

package/remotion/motor/plantillas.tsx

@@ -11,21 +11,57 @@
 import type {Marca} from '../tipos';
 import type {Capa} from './capas';
 import type {Tema} from './tema';
+import {ancho} from '../estilo';
+
+/** Renglones que ocupa un texto al partirse por palabras en `maxAncho` (como lo hace el navegador). */
+const renglonesDe = (texto: string, fuente: string, tam: number, maxAncho: number, mayus?: boolean) => {
+	const palabras = (mayus ? texto.toUpperCase() : texto).split(/\s+/).filter(Boolean);
+	let n = 1;
+	let linea = '';
+	for (const w of palabras) {
+		const prueba = linea ? `${linea} ${w}` : w;
+		if (linea && ancho(prueba, fuente, tam, 800) > maxAncho) {
+			n++;
+			linea = w;
+		} else linea = prueba;
+	}
+	return n;
+};
 
 type P = Record<string, any>;
 
 export const PLANTILLAS = ['capas', 'titular', 'dato', 'lista', 'telefono', 'comparar', 'eleccion', 'cta'];
 
+/**
+ * Capas de una plantilla. Sobre un ambiente 3D el fondo cambia de toma en toma (ventanal naranja, pared gris), así
+ * que los textos sueltos (sin caja ni contorno propio) llevan contorno oscuro y los chicos una sombra más fuerte.
+ */
 export function capasDe(tipo: string, p: P, tema: Tema, marca: Marca): Capa[] {
+	const capas = capasPlantilla(tipo, p, tema, marca);
+	if (!tema.enAmbiente) return capas;
+	return capas.map((c) => {
+		if (c.tipo !== 'texto' || c.fondo || c.contorno != null) return c;
+		if (c.fuente === 'texto' || c.fuente === 'mono') return {...c, sombra: c.sombra ?? '0 2px 6px rgba(0,0,0,0.85), 0 0 18px rgba(0,0,0,0.6)'};
+		return {...c, contorno: 8, colorContorno: '#0A0A0E'};
+	});
+}
+
+function capasPlantilla(tipo: string, p: P, tema: Tema, marca: Marca): Capa[] {
 	const extra: Capa[] = p.capas ?? [];
 	switch (tipo) {
 		case 'titular': {
 			const y = p.y ?? 560;
 			const out: Capa[] = [];
-			if (p.etiqueta) out.push({tipo: 'etiqueta', texto: p.etiqueta, x: 80, y: y - 92, ancla: 'izquierda', entrada: 'aparecer'});
-			out.push({tipo: 'texto', texto: p.texto ?? '', x: 80, y, ancla: 'izquierda', alinear: 'left', tam: p.tam ?? 104, maxAncho: p.numero != null ? 800 : 920, entrada: 'subir', en: p.en});
+			const tam = p.tam ?? 104;
+			const maxAncho = p.numero != null ? 800 : 920;
+			// el texto va centrado en `y`: si se parte en 2+ renglones crece hacia arriba y abajo, así que la etiqueta
+			// y el subtítulo se separan medio renglón por cada renglón extra (ajuste por palabras con la fuente real)
+			const renglones = renglonesDe(String(p.texto ?? '').replace(/\*/g, ''), tema.fuentes.titulo, tam, maxAncho, tema.tituloMayusculas);
+			const extraY = (renglones - 1) * tam * 0.525;
+			if (p.etiqueta) out.push({tipo: 'etiqueta', texto: p.etiqueta, x: 80, y: y - 92 - extraY, ancla: 'izquierda', entrada: 'aparecer'});
+			out.push({tipo: 'texto', texto: p.texto ?? '', x: 80, y, ancla: 'izquierda', alinear: 'left', tam, maxAncho, entrada: 'subir', en: p.en});
 			if (p.numero != null) out.push({tipo: 'insignia', texto: String(p.numero), x: 1000, y, ancla: 'derecha', entrada: 'rebote', en: 0.15});
-			if (p.sub) out.push({tipo: 'texto', texto: p.sub, fuente: 'texto', tam: 44, peso: 600, color: tema.colores.suave, x: 80, y: y + 110, ancla: 'izquierda', alinear: 'left', entrada: 'aparecer', en: 0.3});
+			if (p.sub) out.push({tipo: 'texto', texto: p.sub, fuente: 'texto', tam: 44, peso: 600, color: tema.colores.suave, x: 80, y: y + 110 + extraY, ancla: 'izquierda', alinear: 'left', entrada: 'aparecer', en: 0.3});
 			return [...out, ...extra];
 		}
 		case 'dato': {
@@ -122,12 +158,16 @@ export function capasDe(tipo: string, p: P, tema: Tema, marca: Marca): Capa[] {
 				const out: Capa[] = [{tipo: 'marca', tam: 210, x: 540, y: 640, entrada: 'rebote'}];
 				if (p.pide === 'comenta') {
 					const palabra = String(p.palabra ?? 'SÍ').toUpperCase();
+					// si "Escribe PALABRA" se parte en dos renglones, el texto crece hacia abajo (arriba está el avatar) y
+					// lo demás baja con él
+					const textoCta = String(p.texto ?? `Escribe *${palabra}*`);
+					const bajaCta = (renglonesDe(textoCta.replace(/\*/g, ''), tema.fuentes.titulo, 110, 940, tema.tituloMayusculas) - 1) * 110 * 0.525;
 					out.push(
-						{tipo: 'texto', texto: p.texto ?? `Escribe *${palabra}*`, x: 540, y: 900, tam: 110, maxAncho: 940, entrada: 'subir', en: 0.2},
-						...(p.sub ? [{tipo: 'texto', texto: p.sub, fuente: 'texto', tam: 44, peso: 700, color: tema.colores.suave, x: 540, y: 1010, entrada: 'aparecer', en: 0.4, mayusculas: false}] : []),
+						{tipo: 'texto', texto: textoCta, x: 540, y: 900 + bajaCta, tam: 110, maxAncho: 940, entrada: 'subir', en: 0.2},
+						...(p.sub ? [{tipo: 'texto', texto: p.sub, fuente: 'texto', tam: 44, peso: 700, color: tema.colores.suave, x: 540, y: 1010 + bajaCta * 2, entrada: 'aparecer', en: 0.4, mayusculas: false}] : []),
 						// caja de comentario que se escribe sola y se envía
-						{tipo: 'terminal', x: 540, y: 1220, ancho: 760, tam: 46, titulo: 'comentario', fondo: caja, colorTexto: letra, en: 0.5, entrada: 'subir', color: tema.colores.acento, lineas: [{texto: palabra, en: 0.9}]},
-						{tipo: 'sello', texto: 'ENVIADO', x: 760, y: 1360, en: 2.1, color: tema.colores.acento, tam: 44},
+						{tipo: 'terminal', x: 540, y: 1220 + bajaCta * 2, ancho: 760, tam: 46, titulo: 'comentario', fondo: caja, colorTexto: letra, en: 0.5, entrada: 'subir', color: tema.colores.acento, lineas: [{texto: palabra, en: 0.9}]},
+						{tipo: 'sello', texto: 'ENVIADO', x: 760, y: 1360 + bajaCta * 2, en: 2.1, color: tema.colores.acento, tam: 44},
 					);
 				} else {
 					out.push(

package/remotion/motor/tema.ts

@@ -31,6 +31,8 @@ export type Tema = {
 	};
 	fuentes: {titulo: string; texto: string; mono: string};
 	tituloMayusculas: boolean;
+	/** El video corre sobre una capa `ambiente` (lo pone el motor): los textos de las plantillas llevan contorno. */
+	enAmbiente?: boolean;
 	subtitulos: {
 		/**
 		 * karaoke: frase arriba, lo dicho en un color y lo pendiente tenue · seleccion: igual, pero solo la palabra clave
@@ -252,13 +254,28 @@ export const mezclar = <T,>(a: T, b: any): T => {
 	return out;
 };
 
-/** Tema final: estilo base (o uno propio del config, que puede heredar con `base`) + ajustes del video. */
-export function temaDe(estilo: string | undefined, ajustes: Record<string, any> | undefined, propios: Record<string, any> = {}): Tema {
+/**
+ * Estilos de papel o cielo (texto oscuro) sobre un ambiente 3D de noche: el texto pasa a claro para que se lea.
+ * Los ajustes `tema` del video se aplican después, así que siguen mandando.
+ */
+const SOBRE_NOCHE = {
+	textura: 'ninguna',
+	colores: {texto: '#FFFFFF', suave: 'rgba(255,255,255,0.6)', tarjeta: '#1C1D24', tarjetaTexto: '#FFFFFF', borde: '#FFFFFF'},
+	subtitulos: {color: '#FFFFFF', pendiente: 'rgba(255,255,255,0.5)'},
+};
+
+/**
+ * Tema final: estilo base (o uno propio del config, que puede heredar con `base`) + ajustes del video.
+ * `oscuro`: el video corre sobre un ambiente de noche (capa `ambiente` en el mundo).
+ */
+export function temaDe(estilo: string | undefined, ajustes: Record<string, any> | undefined, propios: Record<string, any> = {}, oscuro = false): Tema {
 	const resolver = (nombre: string, n = 0): Tema => {
 		if (ESTILOS[nombre]) return ESTILOS[nombre];
 		const p = propios[nombre];
 		if (p && n < 5) return mezclar(resolver(p.base ?? 'minimal', n + 1), p);
 		return ESTILOS.minimal;
 	};
-	return mezclar(resolver(estilo ?? 'minimal'), ajustes ?? {});
+	const base = resolver(estilo ?? 'minimal');
+	const tema = mezclar(oscuro && base.colores.texto !== '#FFFFFF' ? mezclar(base, SOBRE_NOCHE) : base, ajustes ?? {});
+	return oscuro ? {...tema, enAmbiente: true} : tema;
 }