morfeo 0.2.1 → 0.3.0

package/bin/morfeo.mjs

@@ -168,6 +168,7 @@ async function main() {
 				serie: 'series con personaje y capítulos: HUD (días, barras), cartas VS, "comenta", subtítulos en bloque',
 				infografia: 'infografía plana: medidores, barras, globos, pantalla dividida, rayos X',
 				'3d': 'escenas 3D con recorrido de cámara (tu .glb), una palabra grande a la vez',
+				maqueta: 'diorama 3D low-poly con corte de tierra: una palabra al centro, etiquetas con flecha, cortes rápidos (kit diorama)',
 				minimal: 'oscuro y limpio, para lo que sea',
 			};
 			for (const e of ESTILOS) console.log(`  ${e.padEnd(16)} ${desc[e] ?? ''}`);

package/index.d.ts

@@ -21,7 +21,7 @@ interface EscenaBase {
 	audio?: string;
 }
 
-export type Estilo = 'datos-curiosos' | 'explicativo' | 'documental' | 'ilustrado' | 'historia' | 'mesa' | 'serie' | 'infografia' | '3d' | 'minimal' | (string & {});
+export type Estilo = 'datos-curiosos' | 'explicativo' | 'documental' | 'ilustrado' | 'historia' | 'mesa' | 'serie' | 'infografia' | '3d' | 'maqueta' | 'minimal' | (string & {});
 
 /** Objetos 3D incluidos para capas {tipo: 'modelo', forma}: mejor opción que un emoji. */
 export type Objeto3D = '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';
@@ -84,6 +84,14 @@ export type Capa = CapaBase &
 		| {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}
+		/** Tarjetas de datos (estilo maqueta): se llenan o palomean solas desde `en`. */
+		| {tipo: 'reloj'; de?: number; a?: number; max?: number; segmentos?: [number, number, string][]; etiqueta?: string | false; tam?: number; color?: string; duracion?: number}
+		| {tipo: 'cronometro'; de?: number; a?: number; max?: number; unidad?: 'seg' | 'min'; tam?: number; color?: string; duracion?: number}
+		| {tipo: 'termometro'; valor: number; de?: number; min?: number; max?: number; unidad?: string; alto?: number; color?: string; decimales?: number; mostrar?: boolean}
+		| {tipo: 'recipientes'; n?: number; valor?: number; forma?: 'garrafon' | 'vaso'; total?: string; color?: string; tamPieza?: number; duracion?: number}
+		| {tipo: 'ficha'; titulo?: string; foto?: string; campos: [string, string][]; ancho?: number; color?: string; fondoFoto?: string}
+		| {tipo: 'checklist'; items: (string | {texto: string; en?: Momento; pendiente?: boolean})[]; titulo?: string; tam?: number; color?: string; cada?: number}
+		| {tipo: 'mapa'; ruta?: [number, number][]; distancia?: string; ancho?: number; color?: string; fondo?: string; inclinar?: number; duracion?: number}
 		| {tipo: 'cursor'; a: [number, number]; clic?: Momento; duracion?: number; tam?: number; color?: string}
 		| {tipo: 'texto'; texto: string; tam?: number; color?: string; acento?: string; fuente?: 'titulo' | 'texto' | 'mono' | (string & {}); peso?: number; mayusculas?: boolean; contorno?: number; colorContorno?: string; fondo?: string; relleno?: string; radio?: number; maxAncho?: number | 'auto'; alinear?: 'center' | 'left' | 'right'; interlineado?: number; escribir?: boolean | number; subrayado?: boolean}
 		| {tipo: 'contador'; de?: number; a: number; prefijo?: string; sufijo?: string; decimales?: number; miles?: string; decimal?: string; duracion?: number; curva?: 'suave' | 'lineal' | 'exponencial'; formato?: 'grande' | 'lcd' | 'chip'; tam?: number; color?: string; fondo?: string}
@@ -144,6 +152,9 @@ interface EscenaMotorBase extends EscenaBase {
 	rotulo?: string;
 	rotuloEn?: Momento;
 	rotuloTam?: number;
+	/** 'normal' | 'contorno' (blanco con contorno, clave en acento) | 'pastilla' (caja oscura inclinada: ¡CUIDADO!). Por defecto, el del estilo. */
+	rotuloEstilo?: 'normal' | 'contorno' | 'pastilla';
+	rotuloInclinar?: number;
 	/** Palabras clave de la escena para los subtítulos (la que lleva caja o color de acento en cada frase). */
 	claves?: string[];
 	/** Ajustes del tema solo para esta escena. */
@@ -171,7 +182,7 @@ export interface Tema {
 	colores: {texto: string; acento: string; acento2: string; suave: string; tarjeta: string; tarjetaTexto: string; borde: string};
 	fuentes: {titulo: string; texto: string; mono: string};
 	tituloMayusculas: boolean;
-	subtitulos: {tipo: 'karaoke' | 'seleccion' | 'pop' | 'bloque' | 'palabra' | 'caja' | 'ninguno'; y: number; tam: number; color: string; pendiente: string; resalte: string; maxPalabras: number; mayusculas?: boolean; contorno?: number; fondo?: string};
+	subtitulos: {tipo: 'karaoke' | 'seleccion' | 'pop' | 'bloque' | 'palabra' | 'caja' | 'ninguno'; y: number; tam: number; color: string; pendiente: string; resalte: string; maxPalabras: number; mayusculas?: boolean | 'inicial'; contorno?: number; fondo?: string};
 	transicion: Transicion;
 	/** Ritmo de las animaciones: duraciones (s) y curva de las entradas. */
 	movimiento?: {entrada?: number; salida?: number; transicion?: number; curva?: 'suave' | 'resorte' | 'seca'};
@@ -182,6 +193,8 @@ export interface Tema {
 		desenfoqueBordes?: number;
 		vinetaColor?: string;
 	};
+	/** Rótulo de cada escena: estilo 'normal' | 'contorno' | 'pastilla', inclinación, altura (px) y tamaño. */
+	rotulo?: {estilo?: 'normal' | 'contorno' | 'pastilla'; inclinar?: number; y?: number; tam?: number};
 	marca: 'esquina' | 'arriba' | 'ninguna';
 	zoomLento: number;
 }
@@ -233,6 +246,8 @@ export interface Video {
 	mundo?: Capa[];
 	/** Pastilla fija arriba para series: 'GYM CON CIENCIA · PARTE 5'. */
 	serie?: string;
+	/** 'largo' = explicador de 90–130 s (lo asume el estilo maqueta): cambia las reglas de `morfeo revisar`. */
+	formato?: 'corto' | 'largo';
 	/** Ajustes del estilo para este video (colores, fondo, subtítulos...). */
 	tema?: Partial<Tema> & Record<string, unknown>;
 	/** Título para publicar. */

package/lib/config.mjs

@@ -22,8 +22,8 @@ const parecidas = (nombre, lista, n = 3) => {
 export const TIPOS_CLASICOS = ['title', 'year', 'text', 'icon', 'compare', 'card', 'dialog', 'aliens', 'memory', 'morph', 'cta'];
 export const TIPOS_MOTOR = ['capas', 'titular', 'dato', 'lista', 'telefono', 'comparar', 'eleccion', 'cta'];
 export const TIPOS_ESCENA = [...new Set([...TIPOS_CLASICOS, ...TIPOS_MOTOR])];
-export const ESTILOS = ['datos-curiosos', 'explicativo', 'documental', 'ilustrado', 'historia', 'mesa', 'serie', 'infografia', '3d', 'minimal'];
-export const TIPOS_CAPA = ['imagen', 'video', 'texto', 'contador', 'chip', 'etiqueta', 'numero', 'tarjeta', 'telefono', 'forma', 'icono', 'emoji', 'marca', 'particulas', 'grupo', 'modelo', 'componente', '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'];
+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', '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'];
 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

@@ -18,6 +18,12 @@
 //   - Series: una pastilla fija arriba ("TITO DESDE CERO · EP. 1", "GYM CON CIENCIA · PARTE 5") y contadores persistentes.
 //   - Cierre con una acción concreta, no solo "sígueme": elegir A o B en comentarios, "escribe PASO si entendiste",
 //     "mándaselo al que dice que...", cuenta regresiva para la próxima parte.
+//
+// Formato largo "explicador de maqueta" (2026-11, 4 videos de 102–132 s: castor, tinaco, buey, caseta de cobro):
+//   - Un solo diorama 3D low-poly con corte de tierra; 24–25 cortes por minuto (uno cada ~2,4 s) entre ángulos del
+//     mismo mundo. Una palabra a la vez al centro, rótulos con contorno, etiquetas con flecha pegadas a los objetos.
+//   - Gancho "Imagina que eres un castor…" o "¿Cómo se hace una caseta de cobro?"; cierre "¡Felicidades, eres…!" o un
+//     VS de "ya lo sabía / no lo sabía". Aquí 90–130 s está bien: el mundo y los cortes sostienen la atención.
 
 /** Las reglas, en el orden en que se le explican a la IA y a quien escribe un guion. */
 export const REGLAS = [
@@ -30,7 +36,7 @@ export const REGLAS = [
 	{id: 'escalada', regla: 'Que suba la apuesta', como: 'Cada escena más grave, más grande o más rara que la anterior; lo más fuerte cerca del final, no al principio.'},
 	{id: 'cierre', regla: 'Cierre con una acción concreta', como: 'Pide algo fácil y específico: elegir A o B en comentarios, escribir una palabra ("escribe PASO"), mandárselo a alguien ("mándaselo al que dice que…") o esperar la parte 2. "Sígueme" solo no basta.'},
 	{id: 'bucle', regla: 'Final que conecta con el inicio', como: 'La última frase puede regresar a la primera imagen o dejar una pregunta abierta, para que se vuelva a ver.'},
-	{id: 'duracion', regla: 'Entre 30 y 65 segundos', como: 'La mayoría de los de referencia dura ~1 minuto. Más de 75 s solo si es una serie o una historia que lo sostiene.'},
+	{id: 'duracion', regla: 'Entre 30 y 65 segundos (o 90–130 en maqueta)', como: 'La mayoría de los de referencia dura ~1 minuto. Más de 75 s solo si es una serie, una historia o un explicador de maqueta (estilo maqueta: 90–130 s con un corte de cámara cada 2–3 s dentro del mismo mundo).'},
 ];
 
 /** Las reglas como texto para el prompt de la IA. */
@@ -38,7 +44,7 @@ export const REGLAS_TEXTO = `Estructura (medida en videos virales; síguela):
 ${REGLAS.map((r, i) => `${i + 1}. ${r.regla}: ${r.como}`).join('\n')}`;
 
 const palabrasDe = (s) => String(s ?? '').trim().split(/\s+/).filter(Boolean);
-const GANCHOS = /^(¿|imagina|y si|si tu|si te|si un|qué pasaría|que pasaria|este es|esta es|esto es|nadie|nunca|todos|a \S+ |hay |tu |tú |te |tienes|cuando)/i;
+const GANCHOS = /^(¿|¡|imagina|y si|cómo|como se|si tu|si te|si un|qué pasaría|que pasaria|este es|esta es|esto es|nadie|nunca|todos|a \S+ |hay |tu |tú |te |tienes|cuando)/i;
 
 /**
  * Revisa la estructura de un video y devuelve consejos (no bloquea el render).
@@ -54,6 +60,8 @@ export function revisarEstructura(v, d) {
 	if (!cuerpo.length) return out;
 	const primera = cuerpo[0];
 	const clasico = (v.estilo ?? 'datos-curiosos') === 'datos-curiosos';
+	// formato largo: explicador de maqueta (o `formato: 'largo'` en el video)
+	const largo = v.estilo === 'maqueta' || v.formato === 'largo';
 
 	// 1) gancho
 	const dicho = String(primera.say ?? '').trim();
@@ -67,7 +75,9 @@ export function revisarEstructura(v, d) {
 	const es = d?.escenas?.filter((e) => e.tipo !== 'cta') ?? [];
 	if (es.length) {
 		const dur = d.duracion;
-		if (dur > 75) add('duracion', 'idea', `Dura ${Math.round(dur)} s: los de referencia rondan 60 s. Si no es una serie o una historia, recorta.`);
+		if (largo && dur > 140) add('duracion', 'idea', `Dura ${Math.round(dur)} s: los explicadores de maqueta de referencia van de 100 a 130 s.`);
+		else if (largo && dur < 60) add('duracion', 'idea', `Dura ${Math.round(dur)} s: en maqueta los de referencia duran 100–130 s; hay espacio para otra pregunta y su respuesta.`);
+		else if (!largo && dur > 75) add('duracion', 'idea', `Dura ${Math.round(dur)} s: los de referencia rondan 60 s. Si no es una serie o una historia, recorta (o usa estilo maqueta para un explicador largo).`);
 		if (dur < 20) add('duracion', 'idea', `Dura ${Math.round(dur)} s: un poco más de desarrollo (una pregunta y su respuesta) suele retener mejor.`);
 		const e0 = es[0];
 		if (e0 && e0.habla?.[0] > 0.5) add('gancho', 'aviso', `La voz tarda ${e0.habla[0].toFixed(1)} s en empezar: debe arrancar de inmediato.`);
@@ -77,7 +87,8 @@ export function revisarEstructura(v, d) {
 			// algo que cambie a media escena: capas con `en`, cámara con rango, toma con movimiento, o un mundo vivo
 			const capas = s.capas ?? [];
 			const cambia = capas.some((c) => c.en != null && c.en !== 0 && c.en !== 'inicio') || Array.isArray(s.camara?.zoom) || s.toma?.a || capas.some((c) => c.mover || c.cambios);
-			if (voz > 6 && !cambia && !v.mundo?.length) add('ritmo', 'aviso', `Escena ${i + 1}: ${voz.toFixed(1)} s de voz sin que nada cambie. Pártela en dos o haz que algo entre a media frase.`);
+			if (largo && voz > 4.5) add('ritmo', 'idea', `Escena ${i + 1}: ${voz.toFixed(1)} s en una sola toma; en maqueta la cámara corta cada 2–3 s. Pártela en dos tomas.`);
+			else if (voz > 6 && !cambia && !v.mundo?.length) add('ritmo', 'aviso', `Escena ${i + 1}: ${voz.toFixed(1)} s de voz sin que nada cambie. Pártela en dos o haz que algo entre a media frase.`);
 			else if (voz > 9) add('ritmo', 'idea', `Escena ${i + 1}: ${voz.toFixed(1)} s de voz en una sola escena; en los de referencia ninguna idea pasa de ~5 s.`);
 		});
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "morfeo",
-	"version": "0.2.1",
+	"version": "0.3.0",
 	"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/remotion/kit/diorama.tsx

@@ -0,0 +1,489 @@
+// Kit diorama: maqueta 3D low-poly flotante con corte de tierra, personajes, tráfico, rayos X y modelos .glb.
+// Va dentro de un <Lienzo3D>. Todo depende de `t` (segundos): nada corre solo.
+//
+//   <Maqueta ancho={20} fondo={14} />                       isla con estratos, pasto y flores
+//   <Modelo src={props.coche.src} pos={[0, 0, 2]} tam={2} animacion t={t} />   un .glb (o un recurso resuelto)
+//   <Persona pos={[1, 0, 3]} pose="saludar" t={t} />        trabajador low-poly
+//   <Trafico camino={[[-9, 0, 2], [9, 0, 2]]} n={8} t={t} pluma={{d: 9, cerrada: [[2, 6]]}} />
+//   <Corte k={abrir}> <Tinaco /> </Corte>                   rayos X: abre lo que envuelve
+import React, {useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
+import {continueRender, delayRender} from 'remotion';
+import * as THREE from 'three';
+import {clone as clonarEsqueleto} from 'three/examples/jsm/utils/SkeletonUtils.js';
+import {cargarGltf} from '../motor/modelo3d';
+import {recurso} from '../motor/util';
+import {azarN} from './ilustrado';
+import {Piedras} from './tres';
+
+type V3 = [number, number, number];
+type Pieza = {pos?: V3; rot?: V3; escala?: number};
+const RAD = Math.PI / 180;
+const grupo = (p: Pieza) => ({position: p.pos ?? ([0, 0, 0] as V3), rotation: (p.rot ?? [0, 0, 0]).map((g) => g * RAD) as V3, scale: p.escala ?? 1});
+const clamp01 = (x: number) => Math.max(0, Math.min(1, x));
+const suave = (x: number) => {
+	const c = clamp01(x);
+	return c * c * (3 - 2 * c);
+};
+
+/**
+ * Maqueta flotante: una isla de `ancho`×`fondo` con estratos de tierra a la vista en los cuatro lados, pasto, flores,
+ * matas y piedritas. La superficie queda en y = 0. `hueco` deja un rectángulo sin pasto (para río, calle, alberca).
+ */
+export const Maqueta: React.FC<
+	Pieza & {
+		ancho?: number;
+		fondo?: number;
+		capas?: [string, number][];
+		pasto?: string;
+		flores?: number;
+		matas?: number;
+		colores?: string[];
+		semilla?: number;
+		/** Zonas sin flores ni matas: [x, z, ancho, fondo]. */
+		libres?: [number, number, number, number][];
+	}
+> = ({ancho = 20, fondo = 14, capas = [['#79C24F', 0.4], ['#9A6A45', 1.6], ['#7D553A', 1.4], ['#8C8580', 1.2]], pasto, flores = 60, matas = 140, colores = ['#B57BE8', '#FFD23F', '#FF6B6B', '#FFFFFF'], semilla = 0, libres = [], ...p}) => {
+	const libre = (x: number, z: number) => libres.some(([lx, lz, la, lf]) => Math.abs(x - lx) < la / 2 && Math.abs(z - lz) < lf / 2);
+	const total = capas.reduce((a, [, g]) => a + g, 0);
+	const refMatas = useRef<THREE.InstancedMesh>(null);
+	const refFlores = useRef<THREE.InstancedMesh>(null);
+	const refTallos = useRef<THREE.InstancedMesh>(null);
+	const puntos = (n: number, s: number) =>
+		Array.from({length: n}, (_, i) => [(azarN(s + i * 2) - 0.5) * (ancho - 0.6), (azarN(s + i * 2 + 1) - 0.5) * (fondo - 0.6)] as [number, number]).filter(([x, z]) => !libre(x, z));
+	useLayoutEffect(() => {
+		const o = new THREE.Object3D();
+		const m = refMatas.current;
+		if (m) {
+			const lista = puntos(matas, semilla + 11);
+			lista.forEach(([x, z], i) => {
+				o.position.set(x, 0.12, z);
+				o.rotation.set(0, azarN(semilla + i * 13) * 6, 0);
+				const k = 0.6 + azarN(semilla + i * 7) * 0.8;
+				o.scale.set(k, k * (1 + azarN(semilla + i) * 0.8), k);
+				o.updateMatrix();
+				m.setMatrixAt(i, o.matrix);
+			});
+			m.count = lista.length;
+			m.instanceMatrix.needsUpdate = true;
+		}
+		const f = refFlores.current;
+		const tl = refTallos.current;
+		if (f && tl) {
+			const lista = puntos(flores, semilla + 97);
+			const c = new THREE.Color();
+			lista.forEach(([x, z], i) => {
+				const alto = 0.25 + azarN(semilla + i * 5) * 0.25;
+				o.position.set(x, alto / 2, z);
+				o.rotation.set(0, 0, 0);
+				o.scale.set(1, alto / 0.4, 1);
+				o.updateMatrix();
+				tl.setMatrixAt(i, o.matrix);
+				o.position.set(x, alto + 0.05, z);
+				o.scale.setScalar(0.8 + azarN(semilla + i * 3) * 0.6);
+				o.updateMatrix();
+				f.setMatrixAt(i, o.matrix);
+				f.setColorAt(i, c.set(colores[i % colores.length]));
+			});
+			f.count = lista.length;
+			tl.count = lista.length;
+			f.instanceMatrix.needsUpdate = true;
+			tl.instanceMatrix.needsUpdate = true;
+			if (f.instanceColor) f.instanceColor.needsUpdate = true;
+		}
+	}, [ancho, fondo, matas, flores, semilla, JSON.stringify(libres), colores.join()]);
+	let y = 0;
+	return (
+		<group {...grupo(p)}>
+			{capas.map(([color, grosor], i) => {
+				const centro = y - grosor / 2;
+				y -= grosor;
+				return (
+					<mesh key={i} position={[0, centro, 0]} receiveShadow castShadow={i === 0}>
+						<boxGeometry args={[ancho, grosor, fondo]} />
+						<meshStandardMaterial color={i === 0 && pasto ? pasto : color} roughness={0.95} />
+					</mesh>
+				);
+			})}
+			{/* piedritas en las cuatro caras */}
+			<Piedras z={fondo / 2 + 0.01} ancho={ancho} y0={-capas[0][1] - 0.2} y1={-total + 0.3} n={Math.round(ancho * 2.4)} semilla={semilla + 3} />
+			<group rotation={[0, Math.PI / 2, 0]}>
+				<Piedras z={ancho / 2 + 0.01} ancho={fondo} y0={-capas[0][1] - 0.2} y1={-total + 0.3} n={Math.round(fondo * 2.4)} semilla={semilla + 41} />
+			</group>
+			<group rotation={[0, -Math.PI / 2, 0]}>
+				<Piedras z={ancho / 2 + 0.01} ancho={fondo} y0={-capas[0][1] - 0.2} y1={-total + 0.3} n={Math.round(fondo * 2.4)} semilla={semilla + 77} />
+			</group>
+			<instancedMesh ref={refMatas} args={[undefined as any, undefined as any, matas]} castShadow frustumCulled={false}>
+				<coneGeometry args={[0.07, 0.32, 4]} />
+				<meshStandardMaterial color={pasto ?? '#5FAE3C'} roughness={0.9} flatShading />
+			</instancedMesh>
+			<instancedMesh ref={refTallos} args={[undefined as any, undefined as any, flores]} frustumCulled={false}>
+				<cylinderGeometry args={[0.018, 0.018, 0.4, 4]} />
+				<meshStandardMaterial color="#3E8A35" roughness={0.9} />
+			</instancedMesh>
+			<instancedMesh ref={refFlores} args={[undefined as any, undefined as any, flores]} castShadow frustumCulled={false}>
+				<icosahedronGeometry args={[0.09, 0]} />
+				<meshStandardMaterial roughness={0.7} flatShading />
+			</instancedMesh>
+		</group>
+	);
+};
+
+/**
+ * Un modelo .glb dentro del lienzo: tuyo (`src: 'castor.glb'` en assets/) o un recurso de la biblioteca
+ * (`src: props.coche`, lo que deja `{tipo: 'recurso', buscar: 'coche'}` en las props del componente).
+ * Se escala para que su lado mayor mida `tam` y se apoya en y = 0. `animacion` reproduce los clips del archivo
+ * sincronizados con `t` (true = todos, o el nombre de uno).
+ */
+export const Modelo: React.FC<Pieza & {src: string | {src: string}; tam?: number; t?: number; animacion?: boolean | string; velocidad?: number; color?: string; sombras?: boolean}> = ({src, tam = 1, t = 0, animacion, velocidad = 1, color, sombras = true, ...p}) => {
+	const ruta = typeof src === 'string' ? src : src.src;
+	const url = recurso(ruta);
+	const [g, setG] = useState<{obj: THREE.Object3D; mixer: THREE.AnimationMixer | null} | null>(null);
+	const [handle] = useState(() => delayRender(`Cargando modelo ${ruta}`));
+	useEffect(() => {
+		cargarGltf(url)
+			.then((gl) => {
+				const copia = clonarEsqueleto(gl.scene) as THREE.Object3D;
+				const caja = new THREE.Box3().setFromObject(copia);
+				const t3 = caja.getSize(new THREE.Vector3());
+				const k = tam / Math.max(t3.x, t3.y, t3.z, 0.0001);
+				const centro = caja.getCenter(new THREE.Vector3());
+				const envoltura = new THREE.Group();
+				copia.position.set(-centro.x, -caja.min.y, -centro.z);
+				envoltura.add(copia);
+				envoltura.scale.setScalar(k);
+				copia.traverse((o: any) => {
+					if (o.isMesh) {
+						o.castShadow = sombras;
+						o.receiveShadow = sombras;
+						if (color) {
+							o.material = o.material.clone();
+							o.material.color = new THREE.Color(color);
+						}
+					}
+				});
+				let mixer: THREE.AnimationMixer | null = null;
+				if (animacion && gl.animations.length) {
+					mixer = new THREE.AnimationMixer(copia);
+					const clips = animacion === true ? gl.animations : gl.animations.filter((a) => a.name === animacion || a.name.toLowerCase().includes(String(animacion).toLowerCase()));
+					for (const clip of clips.length ? clips : gl.animations.slice(0, 1)) mixer.clipAction(clip).play();
+				}
+				setG({obj: envoltura, mixer});
+				continueRender(handle);
+			})
+			.catch((e) => {
+				continueRender(handle);
+				throw new Error(`No pude cargar el modelo ${ruta}: ${e.message}`);
+			});
+	}, [url, handle, tam, color, String(animacion)]);
+	useLayoutEffect(() => {
+		g?.mixer?.setTime(Math.max(0, t) * velocidad);
+	});
+	return <group {...grupo(p)}>{g ? <primitive object={g.obj} /> : null}</group>;
+};
+
+const MAT = (color: string, r = 0.8) => <meshStandardMaterial color={color} roughness={r} flatShading />;
+
+/**
+ * Persona low-poly (trabajador con casco y chaleco por defecto). Mide ~1.6 de alto con `escala` 1.
+ * `pose`: 'parado' | 'saludar' | 'caminar' | 'senalar' | 'celebrar'. `t` mueve brazos y piernas.
+ */
+export const Persona: React.FC<Pieza & {t?: number; pose?: 'parado' | 'saludar' | 'caminar' | 'senalar' | 'señalar' | 'celebrar'; piel?: string; ropa?: string; chaleco?: string | false; casco?: string | false; pantalon?: string}> = ({
+	t = 0,
+	pose = 'parado',
+	piel = '#F2C19B',
+	ropa = '#3A6EC8',
+	chaleco = '#FF7A1A',
+	casco = '#FFC928',
+	pantalon = '#2E3A59',
+	...p
+}) => {
+	const paso = pose === 'caminar' ? Math.sin(t * 9) * 0.6 : 0;
+	const respira = Math.sin(t * 2.2) * 0.015;
+	let brazoI = 0.15;
+	let brazoD = -0.15;
+	if (pose === 'saludar') brazoD = -2.6 + Math.sin(t * 10) * 0.35;
+	if (pose === 'celebrar') {
+		brazoI = 2.7 + Math.sin(t * 9) * 0.2;
+		brazoD = -2.7 - Math.sin(t * 9) * 0.2;
+	}
+	if (pose === 'senalar' || pose === 'señalar') brazoD = -1.55;
+	if (pose === 'caminar') {
+		brazoI = -paso * 0.8;
+		brazoD = paso * 0.8;
+	}
+	const salto = pose === 'celebrar' ? Math.abs(Math.sin(t * 9)) * 0.12 : pose === 'caminar' ? Math.abs(Math.sin(t * 9)) * 0.04 : 0;
+	const brazo = (lado: 1 | -1, ang: number, adelante = 0) => (
+		<group position={[0.3 * lado, 1.18, 0]} rotation={[pose === 'caminar' ? ang : adelante, 0, pose === 'caminar' ? 0 : ang]}>
+			<mesh position={[0, -0.26, 0]} castShadow>
+				<boxGeometry args={[0.14, 0.52, 0.14]} />
+				{MAT(chaleco ? ropa : ropa)}
+			</mesh>
+			<mesh position={[0, -0.56, 0]} castShadow>
+				<sphereGeometry args={[0.085, 8, 6]} />
+				{MAT(piel)}
+			</mesh>
+		</group>
+	);
+	return (
+		<group {...grupo(p)}>
+			<group position={[0, salto + respira, 0]}>
+				{/* piernas */}
+				{[-1, 1].map((l) => (
+					<group key={l} position={[0.12 * l, 0.62, 0]} rotation={[l * paso, 0, 0]}>
+						<mesh position={[0, -0.3, 0]} castShadow>
+							<boxGeometry args={[0.17, 0.6, 0.18]} />
+							{MAT(pantalon)}
+						</mesh>
+						<mesh position={[0, -0.6, 0.05]} castShadow>
+							<boxGeometry args={[0.19, 0.08, 0.28]} />
+							{MAT('#3B2A20')}
+						</mesh>
+					</group>
+				))}
+				{/* torso y chaleco */}
+				<mesh position={[0, 0.95, 0]} castShadow>
+					<boxGeometry args={[0.48, 0.62, 0.28]} />
+					{MAT(ropa)}
+				</mesh>
+				{chaleco ? (
+					<mesh position={[0, 0.93, 0]} castShadow>
+						<boxGeometry args={[0.5, 0.5, 0.3]} />
+						{MAT(chaleco)}
+					</mesh>
+				) : null}
+				{chaleco ? (
+					<mesh position={[0, 0.88, 0.152]}>
+						<boxGeometry args={[0.5, 0.06, 0.01]} />
+						<meshStandardMaterial color="#E8F2F5" roughness={0.3} emissive="#ffffff" emissiveIntensity={0.15} />
+					</mesh>
+				) : null}
+				{brazo(-1, brazoI)}
+				{brazo(1, brazoD, pose === 'senalar' || pose === 'señalar' ? -1.4 : 0)}
+				{/* cabeza */}
+				<mesh position={[0, 1.42, 0]} castShadow>
+					<sphereGeometry args={[0.22, 12, 10]} />
+					{MAT(piel, 0.7)}
+				</mesh>
+				{[-1, 1].map((l) => (
+					<mesh key={l} position={[0.08 * l, 1.45, 0.2]}>
+						<sphereGeometry args={[0.028, 6, 6]} />
+						<meshStandardMaterial color="#1B1B1F" />
+					</mesh>
+				))}
+				{casco ? (
+					<group position={[0, 1.55, 0]}>
+						<mesh castShadow>
+							<sphereGeometry args={[0.24, 12, 8, 0, Math.PI * 2, 0, Math.PI / 2]} />
+							{MAT(casco, 0.5)}
+						</mesh>
+						<mesh position={[0, 0, 0.06]}>
+							<cylinderGeometry args={[0.3, 0.3, 0.035, 14]} />
+							{MAT(casco, 0.5)}
+						</mesh>
+					</group>
+				) : null}
+			</group>
+		</group>
+	);
+};
+
+/** Coche low-poly (2 de largo). Para tráfico sin descargar nada. */
+export const Coche: React.FC<Pieza & {color?: string; techo?: string; t?: number; rueda?: number}> = ({color = '#E8533B', techo = '#1F3550', t = 0, ...p}) => (
+	<group {...grupo(p)}>
+		<mesh position={[0, 0.38, 0]} castShadow receiveShadow>
+			<boxGeometry args={[2, 0.45, 0.95]} />
+			{MAT(color, 0.5)}
+		</mesh>
+		<mesh position={[-0.1, 0.78, 0]} castShadow>
+			<boxGeometry args={[1.1, 0.38, 0.86]} />
+			{MAT(techo, 0.4)}
+		</mesh>
+		{[
+			[0.65, 0.48],
+			[-0.65, 0.48],
+			[0.65, -0.48],
+			[-0.65, -0.48],
+		].map(([x, z], i) => (
+			<mesh key={i} position={[x, 0.18, z]} rotation={[Math.PI / 2, t * 6, 0]} castShadow>
+				<cylinderGeometry args={[0.19, 0.19, 0.14, 10]} />
+				{MAT('#1E1E22', 0.9)}
+			</mesh>
+		))}
+		{[0.2, -0.2].map((z, i) => (
+			<mesh key={i} position={[1.005, 0.42, z * 1.6]}>
+				<boxGeometry args={[0.02, 0.1, 0.16]} />
+				<meshStandardMaterial color="#FFF6C8" emissive="#FFF2B0" emissiveIntensity={0.6} />
+			</mesh>
+		))}
+	</group>
+);
+
+const COLORES_COCHE = ['#E8533B', '#2D7BFF', '#2BB673', '#F5B841', '#8E5BD9', '#FF7EB6', '#F2F2F2', '#33363D'];
+
+/**
+ * Tráfico: `n` coches (o lo que dibuje `pieza`) que avanzan por `camino` a `velocidad` (u/s) con `separacion`.
+ * `pluma`: una barrera a `d` unidades del inicio del camino; mientras está cerrada (intervalos [desde, hasta] en
+ * segundos) los coches que no la han cruzado se detienen y hacen fila. Todo se calcula de `t`: es determinista.
+ */
+export const Trafico: React.FC<{
+	camino: V3[];
+	t: number;
+	n?: number;
+	velocidad?: number;
+	separacion?: number;
+	desfase?: number;
+	pluma?: {d: number; cerrada: [number, number][]};
+	colores?: string[];
+	pieza?: (i: number, color: string, t: number) => React.ReactNode;
+	semilla?: number;
+}> = ({camino, t, n = 8, velocidad = 2.2, separacion = 2.8, desfase = 0, pluma, colores = COLORES_COCHE, pieza, semilla = 0}) => {
+	const curva = useMemo(() => new THREE.CatmullRomCurve3(camino.map((p) => new THREE.Vector3(...p)), false, 'catmullrom', 0.02), [JSON.stringify(camino)]);
+	const L = curva.getLength();
+	// posición libre de cada coche (sin pluma), sin dar la vuelta: el coche 0 va adelante
+	const libre = (i: number, tt: number) => velocidad * tt + desfase - i * separacion;
+	const filas = (pluma?.cerrada ?? []).map(() => 0); // cuántos coches hacen fila en cada cierre
+	const pos: number[] = [];
+	for (let i = 0; i < n; i++) {
+		let retraso = 0; // segundos que este coche lleva detenido
+		if (pluma)
+			pluma.cerrada.forEach(([c0, c1], k) => {
+				const enCierre = libre(i, c0) - retraso * velocidad;
+				// la siguiente pluma por delante (la pluma está en d, d + L, d + 2L... porque el camino se repite)
+				const pl = pluma.d + Math.ceil((enCierre - pluma.d) / L) * L;
+				const lugar = pl - filas[k] * separacion;
+				const llega = c0 + Math.max(0, (lugar - enCierre) / velocidad);
+				if (llega >= c1) return; // llega cuando ya abrió
+				filas[k]++;
+				if (t > llega) retraso += Math.min(t, c1) - llega;
+			});
+		let s = libre(i, t) - retraso * velocidad;
+		if (pos.length) s = Math.min(s, pos[pos.length - 1] - separacion);
+		pos.push(s);
+	}
+	return (
+		<group>
+			{pos.map((s, i) => {
+				const u = ((s % L) + L) % L / L;
+				const p = curva.getPointAt(u);
+				const d = curva.getTangentAt(u);
+				const ang = Math.atan2(-d.z, d.x);
+				const color = colores[(i + semilla) % colores.length];
+				// aparecen y desaparecen encogiéndose en los extremos del camino (no saltan de un lado a otro)
+				const borde = suave(Math.min(u * L, (1 - u) * L) / (separacion * 0.45));
+				if (borde <= 0.01) return null;
+				return (
+					<group key={i} position={p} rotation={[0, ang, 0]} scale={borde}>
+						{pieza ? pieza(i, color, t) : <Coche color={color} t={t} />}
+					</group>
+				);
+			})}
+		</group>
+	);
+};
+
+/** Pluma (barrera) de caseta: `abierta` 0..1 la levanta. El brazo mide `largo` y apunta a +x. */
+export const Pluma: React.FC<Pieza & {abierta?: number; largo?: number}> = ({abierta = 0, largo = 3.2, ...p}) => (
+	<group {...grupo(p)}>
+		<mesh position={[0, 0.5, 0]} castShadow>
+			<boxGeometry args={[0.4, 1, 0.4]} />
+			{MAT('#FFC928', 0.5)}
+		</mesh>
+		<group position={[0, 0.85, 0]} rotation={[0, 0, (suave(abierta) * 80 * Math.PI) / 180]}>
+			{Array.from({length: 8}, (_, i) => (
+				<mesh key={i} position={[(i + 0.5) * (largo / 8), 0, 0]} castShadow>
+					<boxGeometry args={[largo / 8, 0.12, 0.12]} />
+					{MAT(i % 2 ? '#FFFFFF' : '#E5484D', 0.5)}
+				</mesh>
+			))}
+		</group>
+	</group>
+);
+
+/**
+ * Rayos X: recorta lo que envuelve con un plano para ver adentro. `k` (0..1) abre el corte (anímalo con el tiempo).
+ * `eje`: hacia dónde se abre ('z' quita la mitad de enfrente). Lo que va adentro (agua, flotador) ponlo fuera de <Corte>.
+ */
+export const Corte: React.FC<{k: number; eje?: 'x' | 'y' | 'z'; centro?: number; tam?: number; children: React.ReactNode}> = ({k, eje = 'z', centro = 0, tam = 2, children}) => {
+	const ref = useRef<THREE.Group>(null);
+	const plano = useMemo(() => new THREE.Plane(), []);
+	useLayoutEffect(() => {
+		const n = eje === 'x' ? new THREE.Vector3(-1, 0, 0) : eje === 'y' ? new THREE.Vector3(0, -1, 0) : new THREE.Vector3(0, 0, -1);
+		// k = 0: el plano queda fuera (no recorta); k = 1: corta por `centro`
+		const d = centro + (1 - suave(k)) * tam;
+		const mundo = new THREE.Vector3();
+		ref.current?.getWorldPosition(mundo);
+		const off = eje === 'x' ? mundo.x : eje === 'y' ? mundo.y : mundo.z;
+		plano.set(n, d + off);
+		ref.current?.traverse((o: any) => {
+			if (!o.isMesh) return;
+			const mats = Array.isArray(o.material) ? o.material : [o.material];
+			for (const m of mats) {
+				m.clippingPlanes = k > 0 ? [plano] : null;
+				m.side = THREE.DoubleSide;
+			}
+		});
+	});
+	return <group ref={ref}>{children}</group>;
+};
+
+/** Gotas de agua que caen de `de` a `a` (por un tubo transparente o de una llave). */
+export const Gotas: React.FC<{de: V3; a: V3; t: number; n?: number; velocidad?: number; color?: string; tam?: number}> = ({de, a, t, n = 6, velocidad = 1.4, color = '#4FB3FF', tam = 0.09}) => (
+	<group>
+		{Array.from({length: n}, (_, i) => {
+			const k = (t * velocidad + i / n) % 1;
+			return (
+				<mesh key={i} position={[de[0] + (a[0] - de[0]) * k, de[1] + (a[1] - de[1]) * k, de[2] + (a[2] - de[2]) * k]} scale={[1, 1.4, 1]}>
+					<sphereGeometry args={[tam, 8, 6]} />
+					<meshStandardMaterial color={color} roughness={0.15} emissive={color} emissiveIntensity={0.35} transparent opacity={0.9} />
+				</mesh>
+			);
+		})}
+	</group>
+);
+
+/** Confeti 3D que estalla en `pos` cuando `t` pasa de `en`. */
+export const Confeti3D: React.FC<{pos: V3; t: number; en: number; n?: number; colores?: string[]}> = ({pos, t, en, n = 60, colores = ['#FFC400', '#FF5A8A', '#4FB3FF', '#5ADC6E', '#FFFFFF']}) => {
+	const dt = t - en;
+	if (dt < 0 || dt > 3) return null;
+	return (
+		<group position={pos}>
+			{Array.from({length: n}, (_, i) => {
+				const ang = azarN(i) * Math.PI * 2;
+				const v = 2 + azarN(i * 3) * 3;
+				const vy = 4 + azarN(i * 5) * 4;
+				const x = Math.cos(ang) * v * dt;
+				const z = Math.sin(ang) * v * dt;
+				const y = vy * dt - 4.9 * dt * dt * 0.6;
+				return (
+					<mesh key={i} position={[x, y, z]} rotation={[dt * 8 + i, dt * 6, i]}>
+						<boxGeometry args={[0.12, 0.02, 0.07]} />
+						<meshStandardMaterial color={colores[i % colores.length]} roughness={0.5} />
+					</mesh>
+				);
+			})}
+		</group>
+	);
+};
+
+/** Linterna: un foco con su cono visible, de `pos` hacia `mirar` (escenas de noche). */
+export const Linterna: React.FC<{pos: V3; mirar: V3; color?: string; fuerza?: number; angulo?: number}> = ({pos, mirar, color = '#FFF1C2', fuerza = 6, angulo = 0.38}) => {
+	const objetivo = useMemo(() => new THREE.Object3D(), []);
+	useLayoutEffect(() => {
+		objetivo.position.set(...mirar);
+		objetivo.updateMatrixWorld();
+	});
+	const dir = new THREE.Vector3(...mirar).sub(new THREE.Vector3(...pos));
+	const largo = dir.length();
+	const q = new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, -1, 0), dir.clone().normalize());
+	const medio = new THREE.Vector3(...pos).add(dir.clone().multiplyScalar(0.5));
+	return (
+		<group>
+			<primitive object={objetivo} />
+			<spotLight position={pos} target={objetivo} angle={angulo} penumbra={0.6} decay={0} intensity={fuerza} color={color} castShadow />
+			<mesh position={medio} quaternion={q}>
+				<coneGeometry args={[Math.tan(angulo) * largo, largo, 32, 1, true]} />
+				<meshBasicMaterial color={color} transparent opacity={0.09} blending={THREE.AdditiveBlending} depthWrite={false} side={THREE.DoubleSide} />
+			</mesh>
+		</group>
+	);
+};

package/remotion/kit/index.ts

@@ -4,3 +4,4 @@
 export * from './ilustrado';
 export * from './tres';
 export {clamp, easeIO, easeOut, easeOutExpo, backOut, resorte, ruido, lerp, mezclaColor} from '../estilo';
+export * from './diorama';

package/remotion/kit/tres.tsx

@@ -26,7 +26,20 @@ const mezcla = (a: V3, b: V3, k: number): V3 => [a[0] + (b[0] - a[0]) * k, a[1]
  * escena; sin `a` se acerca un poco sola (`deriva`, 0.06 = 6 % del camino hacia lo que mira). `corte` salta sin viaje.
  */
 export type Toma3D = {pos: V3; mirar?: V3; fov?: number; a?: {pos?: V3; mirar?: V3; fov?: number}; viaje?: number; corte?: boolean; deriva?: number};
-type Estado = {pos: V3; mirar: V3; fov: number};
+export type Estado = {pos: V3; mirar: V3; fov: number};
+
+/**
+ * Dónde cae un punto 3D en la pantalla (1080×1920) con la cámara de este cuadro. Devuelve {x, y, visible}:
+ * `visible` es falso si el punto queda detrás de la cámara. Sirve para pegar etiquetas 2D a objetos 3D.
+ */
+export function proyectar(estado: Estado, punto: V3, ancho = 1080, alto = 1920): {x: number; y: number; visible: boolean} {
+	const cam = new THREE.PerspectiveCamera(estado.fov, ancho / alto, 0.1, 400);
+	cam.position.set(...estado.pos);
+	cam.lookAt(...estado.mirar);
+	cam.updateMatrixWorld(true);
+	const v = new THREE.Vector3(...punto).project(cam);
+	return {x: ((v.x + 1) / 2) * ancho, y: ((1 - v.y) / 2) * alto, visible: v.z < 1 && v.z > -1};
+}
 
 /** Cámara del cuadro actual. `tomas[i]` es la de la escena i+1; si falta, se conserva la anterior. */
 export function camara3D(tomas: (Toma3D | undefined | null)[], escena: number, tEscena: number, inicios?: number[]): Estado {
@@ -85,10 +98,104 @@ const Entorno: React.FC<{fuerza: number}> = ({fuerza}) => {
 	return null;
 };
 
+/** Luz del cielo según la hora (0–24): mediodía claro, atardecer naranja, noche azul con luna. */
+type Cielo = {fondo: string; sol: string; fuerzaSol: number; arriba: string; abajo: string; fuerzaHemi: number; entorno: number; altura: number};
+const CIELOS: [number, Cielo][] = [
+	[0, {fondo: '#121A33', sol: '#9DB4FF', fuerzaSol: 0.55, arriba: '#5A6FA8', abajo: '#1A1F2E', fuerzaHemi: 0.5, entorno: 0.18, altura: 0.6}],
+	[6, {fondo: '#F6C7A0', sol: '#FFB27A', fuerzaSol: 1.4, arriba: '#FFE1C2', abajo: '#9C8A70', fuerzaHemi: 0.8, entorno: 0.4, altura: 0.25}],
+	[9, {fondo: '#BFE3FF', sol: '#FFFFFF', fuerzaSol: 2.3, arriba: '#FFFFFF', abajo: '#B9A98A', fuerzaHemi: 1.05, entorno: 0.55, altura: 1}],
+	[16, {fondo: '#BFE3FF', sol: '#FFFFFF', fuerzaSol: 2.3, arriba: '#FFFFFF', abajo: '#B9A98A', fuerzaHemi: 1.05, entorno: 0.55, altura: 1}],
+	[18.5, {fondo: '#F4A26B', sol: '#FF8A3D', fuerzaSol: 1.8, arriba: '#FFD2A8', abajo: '#8A6A55', fuerzaHemi: 0.75, entorno: 0.38, altura: 0.22}],
+	[20.5, {fondo: '#2A2F55', sol: '#8FA4FF', fuerzaSol: 0.6, arriba: '#6474B8', abajo: '#20233A', fuerzaHemi: 0.55, entorno: 0.2, altura: 0.6}],
+	[24, {fondo: '#121A33', sol: '#9DB4FF', fuerzaSol: 0.55, arriba: '#5A6FA8', abajo: '#1A1F2E', fuerzaHemi: 0.5, entorno: 0.18, altura: 0.6}],
+];
+const HORAS: Record<string, number> = {amanecer: 6.5, manana: 10, mañana: 10, dia: 12, día: 12, tarde: 16, atardecer: 18.5, noche: 22};
+const colorMezcla = (a: string, b: string, k: number) => '#' + new THREE.Color(a).lerp(new THREE.Color(b), k).getHexString();
+/** Cielo y luces para una hora (número 0–24 o 'dia', 'atardecer', 'noche'...). */
+export function cieloDeHora(hora: number | string): Cielo {
+	const h = (((typeof hora === 'string' ? HORAS[hora] ?? 12 : hora) % 24) + 24) % 24;
+	let i = CIELOS.findIndex(([x]) => x > h);
+	if (i <= 0) i = CIELOS.length - 1;
+	const [h0, a] = CIELOS[i - 1];
+	const [h1, b] = CIELOS[i];
+	const k = suave((h - h0) / (h1 - h0));
+	const n = (x: number, y: number) => x + (y - x) * k;
+	return {fondo: colorMezcla(a.fondo, b.fondo, k), sol: colorMezcla(a.sol, b.sol, k), fuerzaSol: n(a.fuerzaSol, b.fuerzaSol), arriba: colorMezcla(a.arriba, b.arriba, k), abajo: colorMezcla(a.abajo, b.abajo, k), fuerzaHemi: n(a.fuerzaHemi, b.fuerzaHemi), entorno: n(a.entorno, b.entorno), altura: n(a.altura, b.altura)};
+}
+
+/** Activa el recorte por planos (para `Corte`, la vista de rayos X). */
+const Recorte: React.FC = () => {
+	const {gl} = useThree();
+	useLayoutEffect(() => {
+		gl.localClippingEnabled = true;
+	}, [gl]);
+	return null;
+};
+
+/**
+ * Etiqueta pegada a un punto 3D: pastilla de color con una flecha que apunta al objeto. Sigue al objeto cuando la
+ * cámara se mueve. `escena` (1, 2...) la limita a esa escena; `en`/`hasta` son segundos desde que empieza.
+ */
+export type Etiqueta3D = {
+	pos: V3;
+	texto: string;
+	escena?: number | number[];
+	en?: number;
+	hasta?: number;
+	color?: string;
+	colorTexto?: string;
+	/** Hacia dónde sale la pastilla desde el objeto. */
+	lado?: 'arriba' | 'abajo' | 'izq' | 'der';
+	/** Largo de la flecha (px). */
+	largo?: number;
+	tam?: number;
+	inclinar?: number;
+};
+
+const EtiquetasPantalla: React.FC<{etiquetas: Etiqueta3D[]; estado: Estado; escena: number; tEscena: number}> = ({etiquetas, estado, escena, tEscena}) => (
+	<>
+		{etiquetas.map((e, i) => {
+			const escenas = e.escena == null ? null : ([] as number[]).concat(e.escena);
+			if (escenas && !escenas.includes(escena)) return null;
+			const t = tEscena - (e.en ?? 0.2);
+			if (t < 0 || (e.hasta != null && tEscena > e.hasta)) return null;
+			const p = proyectar(estado, e.pos);
+			if (!p.visible) return null;
+			const lado = e.lado ?? 'arriba';
+			const largo = e.largo ?? 110;
+			const tam = e.tam ?? 40;
+			const k = Math.min(1, t / 0.35);
+			const pop = 1 - Math.exp(-7 * k) * Math.cos(k * 7.5);
+			const flecha = largo * Math.min(1, t / 0.25);
+			const [dx, dy] = lado === 'arriba' ? [0, -1] : lado === 'abajo' ? [0, 1] : lado === 'izq' ? [-1, 0] : [1, 0];
+			const fx = p.x + dx * flecha;
+			const fy = p.y + dy * flecha;
+			const color = e.color ?? '#2D7BFF';
+			const ang = (Math.atan2(-dy, -dx) * 180) / Math.PI;
+			const transform = lado === 'arriba' ? 'translate(-50%, -100%)' : lado === 'abajo' ? 'translate(-50%, 0)' : lado === 'izq' ? 'translate(-100%, -50%)' : 'translate(0, -50%)';
+			return (
+				<React.Fragment key={i}>
+					<svg width={1080} height={1920} style={{position: 'absolute', left: 0, top: 0, pointerEvents: 'none'}}>
+						<line x1={fx} y1={fy} x2={p.x - dx * 6} y2={p.y - dy * 6} stroke={color} strokeWidth={9} strokeLinecap="round" />
+						<g transform={`translate(${p.x} ${p.y}) rotate(${ang})`}>
+							<path d="M 0 0 L -30 -17 L -30 17 Z" fill={color} />
+						</g>
+					</svg>
+					<div style={{position: 'absolute', left: fx, top: fy, transform: `${transform} scale(${pop}) rotate(${e.inclinar ?? -3}deg)`, transformOrigin: 'center', background: color, color: e.colorTexto ?? '#FFFFFF', fontFamily: 'Montserrat, sans-serif', fontWeight: 900, fontSize: tam, padding: `${tam * 0.22}px ${tam * 0.5}px`, borderRadius: tam * 0.3, border: '4px solid rgba(255,255,255,0.95)', boxShadow: '0 8px 18px rgba(0,0,0,0.3)', whiteSpace: 'nowrap', letterSpacing: 0.5}}>
+						{e.texto}
+					</div>
+				</React.Fragment>
+			);
+		})}
+	</>
+);
+
 /**
  * El lienzo del mundo 3D (1080×1920). `luz`:
  *   'dia'     cielo claro, sol con sombras suaves (maquetas, cortes de terreno, low-poly)
  *   'calida'  cuarto oscuro con un foco cálido desde arriba y su cono visible (mesa, dinero, objetos)
+ * `hora` (0–24 o 'atardecer', 'noche'...) cambia el cielo y el sol de la luz 'dia'; anímala para pasar de día a noche.
+ * `etiquetas`: pastillas con flecha pegadas a puntos 3D (siguen al objeto con la cámara).
  */
 export const Lienzo3D: React.FC<{
 	tomas: (Toma3D | undefined | null)[];
@@ -96,25 +203,32 @@ export const Lienzo3D: React.FC<{
 	tEscena?: number;
 	inicios?: number[];
 	luz?: 'dia' | 'calida';
+	hora?: number | string;
 	fondo?: string;
 	niebla?: [number, number];
 	sol?: V3;
 	foco?: V3;
+	etiquetas?: Etiqueta3D[];
+	/** Encima del 3D, en coordenadas de pantalla (texto, tarjetas). */
+	encima?: React.ReactNode;
 	children: React.ReactNode;
-}> = ({tomas, escena = 1, tEscena = 0, inicios, luz = 'dia', fondo, niebla, sol = [9, 15, 8], foco = [0, 10, 1.5], children}) => {
+}> = ({tomas, escena = 1, tEscena = 0, inicios, luz = 'dia', hora, fondo, niebla, sol = [9, 15, 8], foco = [0, 10, 1.5], etiquetas, encima, children}) => {
 	const estado = camara3D(tomas, escena, tEscena, inicios);
-	const color = fondo ?? (luz === 'dia' ? '#BFE3FF' : '#120A06');
+	const cielo = cieloDeHora(hora ?? 12);
+	const color = fondo ?? (luz === 'dia' ? cielo.fondo : '#120A06');
+	const posSol: V3 = [sol[0], sol[1] * cielo.altura + 1.5, sol[2]];
 	return (
-		<div style={{width: 1080, height: 1920}}>
+		<div style={{position: 'relative', width: 1080, height: 1920}}>
 			<ThreeCanvas width={1080} height={1920} shadows gl={{antialias: true}} camera={{fov: estado.fov, position: estado.pos, near: 0.1, far: 400}}>
 				<color attach="background" args={[color]} />
 				{niebla ? <fog attach="fog" args={[color, niebla[0], niebla[1]]} /> : null}
 				<Camara estado={estado} />
+				<Recorte />
 				{luz === 'dia' ? (
 					<>
-						<Entorno fuerza={0.55} />
-						<hemisphereLight args={['#ffffff', '#b9a98a', 1.05]} />
-						<directionalLight position={sol} intensity={2.3} castShadow shadow-mapSize={[2048, 2048]} shadow-camera-left={-26} shadow-camera-right={26} shadow-camera-top={26} shadow-camera-bottom={-26} shadow-camera-far={90} shadow-bias={-0.0006} />
+						<Entorno fuerza={cielo.entorno} />
+						<hemisphereLight args={[cielo.arriba, cielo.abajo, cielo.fuerzaHemi]} />
+						<directionalLight position={posSol} color={cielo.sol} intensity={cielo.fuerzaSol} castShadow shadow-mapSize={[2048, 2048]} shadow-camera-left={-26} shadow-camera-right={26} shadow-camera-top={26} shadow-camera-bottom={-26} shadow-camera-far={90} shadow-bias={-0.0006} />
 					</>
 				) : (
 					<>
@@ -130,6 +244,8 @@ export const Lienzo3D: React.FC<{
 				)}
 				{children}
 			</ThreeCanvas>
+			{etiquetas?.length ? <EtiquetasPantalla etiquetas={etiquetas} estado={estado} escena={escena} tEscena={tEscena} /> : null}
+			{encima}
 		</div>
 	);
 };

package/remotion/motor/Video.tsx

@@ -129,26 +129,32 @@ const Rotulo: React.FC<{e: Escena; t: number; tema: Tema}> = ({e, t, tema}) => {
 	const limpio = texto.replace(/\*/g, '');
 	const fuente = tema.fuentes.titulo;
 	// cabe en 940 px: se achica si hace falta (el ancho se mide con la fuente ya cargada)
-	let tam = e.p.rotuloTam ?? 104;
+	let tam = e.p.rotuloTam ?? tema.rotulo?.tam ?? 104;
 	try {
 		const w = ancho(may ? limpio.toUpperCase() : limpio, fuente, tam, 900);
 		if (w > 940) tam = Math.max(56, Math.floor((tam * 940) / w));
 	} catch {}
 	const claro = tema.colores.texto !== '#FFFFFF';
-	const contorno = !claro && (S.contorno ?? 0) > 0;
+	const estilo = e.p.rotuloEstilo ?? tema.rotulo?.estilo ?? 'normal';
+	const contorno = estilo === 'contorno' || (estilo === 'normal' && !claro && (S.contorno ?? 0) > 0);
+	const grosor = estilo === 'contorno' ? Math.max(8, Math.round(tam * 0.11)) : S.contorno;
+	const pastilla = estilo === 'pastilla';
+	const inclinar = e.p.rotuloInclinar ?? tema.rotulo?.inclinar ?? (pastilla ? -3 : 0);
+	const y = tema.rotulo?.y ?? (abajo ? 1470 : 330);
 	return (
-		<div style={{position: 'absolute', left: 50, width: W - 100, top: abajo ? 1470 : 330, transform: `translate(0, -50%) scale(${0.86 + 0.14 * resorte(k, 0.3)})`, opacity: clamp(k * 3), textAlign: 'center', pointerEvents: 'none'}}>
+		<div style={{position: 'absolute', left: 50, width: W - 100, top: y, transform: `translate(0, -50%) scale(${0.86 + 0.14 * resorte(k, 0.3)}) rotate(${inclinar}deg)`, opacity: clamp(k * 3), textAlign: 'center', pointerEvents: 'none'}}>
 			<span
 				style={{
 					fontFamily: fuente,
 					fontWeight: 900,
-					fontSize: tam,
+					fontSize: pastilla ? tam * 0.82 : tam,
 					lineHeight: 1.05,
-					color: tema.colores.texto,
+					color: pastilla || estilo === 'contorno' ? '#FFFFFF' : tema.colores.texto,
 					textTransform: may ? 'uppercase' : undefined,
-					WebkitTextStroke: contorno ? `${S.contorno}px #000` : undefined,
+					WebkitTextStroke: contorno ? `${grosor}px #1B1B1F` : undefined,
 					paintOrder: 'stroke fill',
-					textShadow: claro ? undefined : '0 6px 22px rgba(0,0,0,0.55)',
+					textShadow: pastilla ? undefined : estilo === 'contorno' ? '0 7px 0 rgba(0,0,0,0.28)' : claro ? undefined : '0 6px 22px rgba(0,0,0,0.55)',
+					...(pastilla ? {display: 'inline-block', background: '#1E1F24', padding: `${tam * 0.12}px ${tam * 0.32}px`, borderRadius: tam * 0.22, boxShadow: '0 10px 24px rgba(0,0,0,0.3)', border: '4px solid rgba(255,255,255,0.9)'} : {}),
 				}}
 			>
 				{partesResaltadas(texto).map(([p, r], i) => (

package/remotion/motor/capas.tsx

@@ -5,6 +5,7 @@ import {Img, OffthreadVideo} from 'remotion';
 import {Avatar, Icono, tamIcono, useMarca} from '../piezas';
 import {H, W, backOut, clamp, easeIO, easeOut, easeOutExpo, lerp, resorte} from '../estilo';
 import {ANOTACIONES, ANOTACIONES_SIN_ENTRADA, Anotacion} from './anotaciones';
+import {FICHAS, Fichas} from './fichas';
 import {azar, cuando, formatoNumero, partesResaltadas, recurso, type CtxEscena} from './util';
 import {Particulas} from './fondo';
 import {Escena3D, Modelo3D} from './modelo3d';
@@ -278,6 +279,7 @@ const Contenido: React.FC<{c: Capa; ctx: CtxEscena}> = ({c, ctx}) => {
 		}
 		default:
 			if (ANOTACIONES.includes(c.tipo)) return <Anotacion c={c} ctx={ctx} />;
+			if (FICHAS.includes(c.tipo)) return <Fichas c={c} ctx={ctx} />;
 			return <div style={{color: 'red', fontSize: 40, fontFamily: 'sans-serif', background: '#fff', padding: 10}}>capa desconocida: {c.tipo}</div>;
 	}
 };

package/remotion/motor/fichas.tsx

@@ -0,0 +1,255 @@
+// Tarjetas de datos para explicar con cosas que se entienden de un vistazo (estilo maqueta/infografía):
+//   reloj (carátula que se llena: horas del día, minutos), termometro, recipientes (garrafones o vasos que se llenan),
+//   ficha (credencial con foto y campos), checklist (se palomea en las palabras), mapa (plano con ruta y distancia).
+import React from 'react';
+import {Img} from 'remotion';
+import {clamp, easeOut, lerp, resorte} from '../estilo';
+import {cuando, formatoNumero, recurso, type CtxEscena} from './util';
+
+type C = Record<string, any>;
+const tarjeta = (c: C, extra: React.CSSProperties = {}): React.CSSProperties => ({
+	background: c.fondo ?? '#FFFFFF',
+	border: `${c.grosor ?? 6}px solid ${c.borde ?? '#1B1B1F'}`,
+	borderRadius: 30,
+	boxShadow: '0 14px 30px rgba(0,0,0,0.28)',
+	fontFamily: 'Montserrat, sans-serif',
+	color: c.colorTexto ?? '#1B1B1F',
+	...extra,
+});
+/** 0..1 desde que empieza la capa (o desde `en`) durante `duracion` segundos. */
+const avance = (c: C, ctx: CtxEscena, dur = 1.2, retraso = 0.25) => easeOut(clamp((ctx.t - cuando(c.en, ctx, 0) - retraso) / (c.duracion ?? dur)));
+
+/** Reloj: un sector que se llena de `de` a `a` (horas de 0 a `max`, 24 por defecto). `segmentos` pinta tramos de colores. */
+export const Reloj: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const tam = c.tam ?? 300;
+	const max = c.max ?? 24;
+	const k = avance(c, ctx, c.duracion ?? 1.4);
+	const de = c.de ?? 0;
+	const a = lerp(de, c.a ?? c.valor ?? max / 4, k);
+	const r = tam / 2 - 22;
+	const cx = tam / 2;
+	const sector = (h0: number, h1: number, color: string, key: number) => {
+		if (h1 <= h0) return null;
+		const a0 = (h0 / max) * Math.PI * 2 - Math.PI / 2;
+		const a1 = (Math.min(h1, h0 + max * 0.9999) / max) * Math.PI * 2 - Math.PI / 2;
+		const p = (ang: number) => `${cx + Math.cos(ang) * r} ${cx + Math.sin(ang) * r}`;
+		return <path key={key} d={`M ${cx} ${cx} L ${p(a0)} A ${r} ${r} 0 ${a1 - a0 > Math.PI ? 1 : 0} 1 ${p(a1)} Z`} fill={color} />;
+	};
+	const segmentos: [number, number, string][] = c.segmentos ?? [[de, a, c.color ?? '#2D7BFF']];
+	const ang = (a / max) * 360;
+	return (
+		<div style={tarjeta(c, {width: tam + 40, padding: 20, borderRadius: 34, textAlign: 'center'})}>
+			<svg width={tam} height={tam}>
+				<circle cx={cx} cy={cx} r={r + 10} fill="#FFFFFF" stroke="#1B1B1F" strokeWidth={8} />
+				{segmentos.map(([h0, h1, color], i) => sector(h0, Math.min(h1, a), color, i))}
+				{Array.from({length: 12}, (_, i) => {
+					const g = (i / 12) * Math.PI * 2;
+					return <line key={i} x1={cx + Math.cos(g) * (r - 4)} y1={cx + Math.sin(g) * (r - 4)} x2={cx + Math.cos(g) * (r + 6)} y2={cx + Math.sin(g) * (r + 6)} stroke="#1B1B1F" strokeWidth={i % 3 ? 3 : 6} />;
+				})}
+				<line x1={cx} y1={cx} x2={cx + Math.cos(((ang - 90) * Math.PI) / 180) * r * 0.85} y2={cx + Math.sin(((ang - 90) * Math.PI) / 180) * r * 0.85} stroke="#1B1B1F" strokeWidth={8} strokeLinecap="round" />
+				<circle cx={cx} cy={cx} r={11} fill="#1B1B1F" />
+			</svg>
+			{c.etiqueta !== false ? <div style={{fontWeight: 900, fontSize: tam * 0.12, marginTop: 6}}>{c.etiqueta ?? `${max} H`}</div> : null}
+		</div>
+	);
+};
+
+/** Cronómetro: cuenta de `de` a `a` segundos (o minutos con `unidad: 'min'`) y su aro avanza. */
+export const Cronometro: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const tam = c.tam ?? 280;
+	const k = avance(c, ctx, c.duracion ?? 1.6);
+	const v = lerp(c.de ?? 0, c.a ?? 60, k);
+	const total = c.max ?? c.a ?? 60;
+	const r = tam / 2 - 26;
+	const cx = tam / 2;
+	const largo = 2 * Math.PI * r;
+	const mm = Math.floor(v / 60);
+	const ss = Math.floor(v % 60);
+	const texto = c.unidad === 'min' ? `${Math.round(v)} min` : `${String(mm).padStart(2, '0')}:${String(ss).padStart(2, '0')}`;
+	return (
+		<div style={{position: 'relative', width: tam, height: tam + 40}}>
+			<div style={{position: 'absolute', left: tam / 2 - 26, top: 0, width: 52, height: 34, background: c.color ?? '#E5484D', borderRadius: 10, border: '5px solid #1B1B1F'}} />
+			<svg width={tam} height={tam} style={{position: 'absolute', top: 36}}>
+				<circle cx={cx} cy={cx} r={r + 16} fill="#FFFFFF" stroke="#1B1B1F" strokeWidth={8} />
+				<circle cx={cx} cy={cx} r={r} fill="none" stroke="#E9ECF2" strokeWidth={18} />
+				<circle cx={cx} cy={cx} r={r} fill="none" stroke={c.color ?? '#E5484D'} strokeWidth={18} strokeDasharray={`${largo * clamp(v / total)} ${largo}`} transform={`rotate(-90 ${cx} ${cx})`} strokeLinecap="round" />
+				<text x={cx} y={cx + tam * 0.06} textAnchor="middle" fontFamily="Montserrat, sans-serif" fontWeight={900} fontSize={tam * 0.17} fill="#1B1B1F">
+					{texto}
+				</text>
+			</svg>
+		</div>
+	);
+};
+
+/** Termómetro que sube hasta `valor` (de `min` a `max`). */
+export const Termometro: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const alto = c.alto ?? 420;
+	const min = c.min ?? 0;
+	const max = c.max ?? 50;
+	const k = avance(c, ctx, 1.3);
+	const v = lerp(c.de ?? min, c.valor ?? 38, k);
+	const nivel = clamp((v - min) / (max - min));
+	const color = c.color ?? (nivel > 0.66 ? '#E5484D' : nivel > 0.4 ? '#F5B841' : '#2D7BFF');
+	const tubo = alto - 110;
+	return (
+		<div style={tarjeta(c, {width: 170, padding: '24px 0 18px', display: 'flex', flexDirection: 'column', alignItems: 'center'})}>
+			<div style={{position: 'relative', width: 60, height: tubo, background: '#EEF1F6', border: '6px solid #1B1B1F', borderRadius: 30, overflow: 'hidden'}}>
+				<div style={{position: 'absolute', left: 0, right: 0, bottom: 0, height: `${nivel * 100}%`, background: color}} />
+			</div>
+			<div style={{width: 92, height: 92, marginTop: -14, borderRadius: '50%', background: color, border: '6px solid #1B1B1F', zIndex: 1}} />
+			{c.mostrar !== false ? (
+				<div style={{fontWeight: 900, fontSize: 40, marginTop: 10}}>
+					{formatoNumero(v, c.decimales ?? 0)}
+					{c.unidad ?? '°C'}
+				</div>
+			) : null}
+		</div>
+	);
+};
+
+/** Recipientes (garrafones, vasos, cubetas) que se llenan uno tras otro hasta `valor` de `n`; `total` debajo ("50 L"). */
+export const Recipientes: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const n = c.n ?? 3;
+	const valor = c.valor ?? n;
+	const k = avance(c, ctx, c.duracion ?? 0.6 * n);
+	const lleno = valor * k;
+	const color = c.color ?? '#3B8CFF';
+	const forma = c.forma ?? 'garrafon';
+	const w = c.tamPieza ?? 110;
+	const h = forma === 'vaso' ? w * 1.2 : w * 1.6;
+	return (
+		<div style={tarjeta(c, {padding: '26px 30px 18px', display: 'inline-flex', flexDirection: 'column', alignItems: 'center'})}>
+			<div style={{display: 'flex', gap: 22, alignItems: 'flex-end'}}>
+				{Array.from({length: n}, (_, i) => {
+					const nivel = clamp(lleno - i);
+					return (
+						<div key={i} style={{display: 'flex', flexDirection: 'column', alignItems: 'center'}}>
+							{forma === 'garrafon' ? <div style={{width: w * 0.32, height: w * 0.22, background: color, border: '5px solid #1B1B1F', borderRadius: 6, marginBottom: -5}} /> : null}
+							<div style={{position: 'relative', width: w, height: h, border: '6px solid #1B1B1F', borderRadius: forma === 'vaso' ? '8px 8px 24px 24px' : `${w * 0.3}px ${w * 0.3}px 18px 18px`, background: '#F4F8FF', overflow: 'hidden'}}>
+								<div style={{position: 'absolute', left: 0, right: 0, bottom: 0, height: `${nivel * 100}%`, background: color, opacity: 0.9}} />
+								<div style={{position: 'absolute', left: '18%', top: '12%', width: '14%', height: '60%', background: 'rgba(255,255,255,0.55)', borderRadius: 20}} />
+							</div>
+						</div>
+					);
+				})}
+			</div>
+			{c.total ? <div style={{fontWeight: 900, fontSize: 44, marginTop: 12}}>{c.total}</div> : null}
+		</div>
+	);
+};
+
+/**
+ * Ficha o credencial: cabecera de color, foto (imagen/recurso) a la izquierda y campos [etiqueta, valor].
+ * campos: [['NOMBRE', 'Buey prieto'], ['SEXO', 'Macho']]
+ */
+export const Ficha: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const ancho = c.ancho ?? 640;
+	const campos: [string, string][] = c.campos ?? [];
+	const t0 = cuando(c.en, ctx, 0);
+	return (
+		<div style={tarjeta(c, {width: ancho, overflow: 'hidden', padding: 0, borderRadius: 26})}>
+			<div style={{background: c.color ?? '#7A4FD1', color: '#FFFFFF', fontWeight: 900, fontSize: 30, letterSpacing: 1.5, textAlign: 'center', padding: '12px 10px', textTransform: 'uppercase'}}>{c.titulo ?? 'Credencial'}</div>
+			<div style={{display: 'flex', gap: 22, padding: 22, alignItems: 'center'}}>
+				{c.foto ? (
+					<div style={{width: ancho * 0.3, height: ancho * 0.3, borderRadius: 18, border: '5px solid #1B1B1F', background: c.fondoFoto ?? '#EDE6F7', overflow: 'hidden', flexShrink: 0, display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
+						<Img src={recurso(c.foto)} style={{width: '90%', height: '90%', objectFit: 'contain'}} />
+					</div>
+				) : null}
+				<div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
+					{campos.map(([et, v], i) => {
+						const k = clamp((ctx.t - t0 - 0.3 - i * 0.18) / 0.3);
+						return (
+							<div key={i} style={{opacity: k, transform: `translateX(${(1 - k) * 20}px)`}}>
+								<div style={{fontSize: 20, fontWeight: 700, color: '#8A8A99', letterSpacing: 1, textTransform: 'uppercase'}}>{et}</div>
+								<div style={{fontSize: 34, fontWeight: 900, lineHeight: 1.1, textTransform: 'uppercase'}}>{v}</div>
+							</div>
+						);
+					})}
+				</div>
+			</div>
+		</div>
+	);
+};
+
+/**
+ * Lista que se palomea: items [{texto, en: 'palabra'}] (o texto suelto). Los que no tienen `en` se palomean en orden.
+ * Con `pendiente: true` un item queda gris y sin palomita (lo que falta).
+ */
+export const Checklist: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const items: {texto: string; en?: unknown; pendiente?: boolean}[] = (c.items ?? []).map((x: any) => (typeof x === 'string' ? {texto: x} : x));
+	const t0 = cuando(c.en, ctx, 0);
+	const tam = c.tam ?? 46;
+	return (
+		<div style={tarjeta(c, {padding: '22px 32px', display: 'inline-flex', flexDirection: 'column', gap: 10})}>
+			{c.titulo ? <div style={{fontWeight: 900, fontSize: tam * 0.7, color: '#8A8A99', letterSpacing: 1, textTransform: 'uppercase'}}>{c.titulo}</div> : null}
+			{items.map((it, i) => {
+				const tc = it.en != null ? cuando(it.en, ctx, 0) : t0 + 0.4 + i * (c.cada ?? 0.45);
+				const k = it.pendiente ? 0 : clamp((ctx.t - tc) / 0.25);
+				const color = it.pendiente ? '#B9BCC6' : c.color ?? '#2BB673';
+				return (
+					<div key={i} style={{display: 'flex', alignItems: 'center', gap: 18, fontWeight: 900, fontSize: tam, color: it.pendiente ? '#B9BCC6' : '#1B1B1F', textTransform: 'uppercase'}}>
+						<span style={{color}}>{it.texto}</span>
+						<svg width={tam * 0.9} height={tam * 0.9} viewBox="0 0 40 40" style={{transform: `scale(${resorte(k, 0.4)})`}}>
+							<path d="M 6 21 L 16 31 L 35 9" stroke={color} strokeWidth={7} fill="none" strokeLinecap="round" strokeLinejoin="round" />
+						</svg>
+					</div>
+				);
+			})}
+		</div>
+	);
+};
+
+/**
+ * Mapa mini: un plano inclinado con una ruta que se dibuja de `de` a `a` (coordenadas 0..1 del plano) y la distancia.
+ * `ruta`: puntos intermedios [[x, y], ...]; `distancia`: '850 M'.
+ */
+export const Mapa: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	const ancho = c.ancho ?? 620;
+	const alto = ancho * 0.62;
+	const k = avance(c, ctx, c.duracion ?? 1.4, 0.4);
+	const pts: [number, number][] = c.ruta ?? [
+		[0.12, 0.7],
+		[0.35, 0.45],
+		[0.6, 0.55],
+		[0.88, 0.25],
+	];
+	const d = pts.map(([x, y], i) => `${i ? 'L' : 'M'} ${x * ancho} ${y * alto}`).join(' ');
+	const largo = pts.reduce((a, [x, y], i) => (i ? a + Math.hypot((x - pts[i - 1][0]) * ancho, (y - pts[i - 1][1]) * alto) : 0), 0);
+	const fin = pts[pts.length - 1];
+	return (
+		<div style={{position: 'relative', width: ancho, height: alto, transform: `perspective(1400px) rotateX(${c.inclinar ?? 38}deg) rotateZ(-8deg)`, transformOrigin: 'center'}}>
+			<svg width={ancho} height={alto} style={{background: c.fondo ?? '#7CC46A', borderRadius: 18, border: '8px solid #FFFFFF', boxShadow: '0 30px 40px rgba(0,0,0,0.25)'}}>
+				{Array.from({length: 40}, (_, i) => (
+					<circle key={i} cx={((i * 97) % 100) / 100 * ancho} cy={((i * 61) % 100) / 100 * alto} r={10 + (i % 4) * 4} fill="#5BA84C" opacity={0.7} />
+				))}
+				<path d={d} stroke={c.color ?? '#2D7BFF'} strokeWidth={22} fill="none" strokeLinecap="round" strokeLinejoin="round" strokeDasharray={`${largo * k} ${largo}`} />
+				{k > 0.98 ? <circle cx={fin[0] * ancho} cy={fin[1] * alto} r={18} fill="#E5484D" stroke="#FFFFFF" strokeWidth={6} /> : null}
+			</svg>
+			{c.distancia ? (
+				<div style={{position: 'absolute', left: 0, right: 0, top: alto * 0.08, textAlign: 'center', fontFamily: 'Montserrat, sans-serif', fontWeight: 900, fontSize: 54, color: '#FFFFFF', textShadow: '0 4px 0 rgba(0,0,0,0.35)', opacity: k}}>
+					{c.distancia}
+				</div>
+			) : null}
+		</div>
+	);
+};
+
+export const FICHAS = ['reloj', 'cronometro', 'termometro', 'recipientes', 'ficha', 'checklist', 'mapa'];
+export const Fichas: React.FC<{c: C; ctx: CtxEscena}> = ({c, ctx}) => {
+	switch (c.tipo) {
+		case 'reloj':
+			return <Reloj c={c} ctx={ctx} />;
+		case 'cronometro':
+			return <Cronometro c={c} ctx={ctx} />;
+		case 'termometro':
+			return <Termometro c={c} ctx={ctx} />;
+		case 'recipientes':
+			return <Recipientes c={c} ctx={ctx} />;
+		case 'ficha':
+			return <Ficha c={c} ctx={ctx} />;
+		case 'checklist':
+			return <Checklist c={c} ctx={ctx} />;
+		default:
+			return <Mapa c={c} ctx={ctx} />;
+	}
+};

package/remotion/motor/modelo3d.tsx

@@ -19,7 +19,7 @@ import {OBJETOS_3D, Objeto3D} from './objetos3d';
 const RAD = Math.PI / 180;
 type Gltf = {scene: THREE.Group; animations: THREE.AnimationClip[]};
 const cache = new Map<string, Promise<Gltf>>();
-const cargarGltf = (url: string) => {
+export const cargarGltf = (url: string) => {
 	if (!cache.has(url)) cache.set(url, new GLTFLoader().loadAsync(url).then((g) => ({scene: g.scene, animations: g.animations})));
 	return cache.get(url)!;
 };

package/remotion/motor/subtitulos.tsx

@@ -74,7 +74,7 @@ export const Subtitulos: React.FC<{tema: Tema; palabras: Palabra[]; t: number; d
 	if (!g || t < g[0][1] - 0.12) return null;
 	const entrada = clamp((t - (g[0][1] - 0.12)) / 0.18);
 	const clave = claveDe(g, claves);
-	const texto = (w: string) => (S.mayusculas ? w.toUpperCase() : w);
+	const texto = (w: string) => (S.mayusculas === 'inicial' ? w.charAt(0).toUpperCase() + w.slice(1) : S.mayusculas ? w.toUpperCase() : w);
 
 	if (S.tipo === 'palabra') {
 		const [w] = g[0];
@@ -82,7 +82,7 @@ export const Subtitulos: React.FC<{tema: Tema; palabras: Palabra[]; t: number; d
 		const acento = claveDe([g[0]], claves) === 0;
 		return (
 			<div style={{position: 'absolute', left: 40, width: W - 80, top: S.y, transform: `translateY(-50%) scale(${resorte(entrada, 0.25)})`, textAlign: 'center'}}>
-				<span style={{fontFamily: tema.fuentes.texto, fontWeight: 900, fontSize: S.tam * 1.25, color: acento ? tema.colores.acento : S.color, WebkitTextStroke: `${S.contorno ?? 9}px #000`, paintOrder: 'stroke fill', textShadow: '0 6px 0 rgba(0,0,0,0.35)'}}>
+				<span style={{fontFamily: tema.fuentes.texto, fontWeight: 900, fontSize: S.tam * 1.25, color: acento ? tema.colores.acento : S.color, WebkitTextStroke: S.contorno === 0 ? undefined : `${S.contorno ?? 9}px #000`, paintOrder: 'stroke fill', textShadow: S.contorno === 0 ? '0 3px 3px rgba(0,0,0,0.45), 0 6px 22px rgba(0,0,0,0.35)' : '0 6px 0 rgba(0,0,0,0.35)'}}>
 					{texto(w)}
 				</span>
 			</div>

package/remotion/motor/tema.ts

@@ -38,7 +38,9 @@ export type Tema = {
 		 * palabra: una palabra a la vez · caja: la frase completa en una etiqueta clara.
 		 */
 		tipo: 'karaoke' | 'seleccion' | 'pop' | 'bloque' | 'palabra' | 'caja' | 'ninguno';
-		mayusculas?: boolean;
+		/** true = MAYÚSCULAS · 'inicial' = Primera Letra (como en los videos de maqueta) */
+		mayusculas?: boolean | 'inicial';
+		/** 0 = sin contorno: sombra suave en su lugar */
 		contorno?: number;
 		fondo?: string; // caja detrás de la frase (karaoke)
 		y: number; // centro vertical (px de 1920)
@@ -58,6 +60,8 @@ export type Tema = {
 		desenfoqueBordes?: number; // px de blur arriba y abajo (efecto maqueta / profundidad)
 		vinetaColor?: string;
 	};
+	/** Rótulo grande de cada escena: 'normal' (color del texto), 'contorno' (blanco con contorno oscuro, clave en acento) o 'pastilla' (caja oscura inclinada). */
+	rotulo?: {estilo?: 'normal' | 'contorno' | 'pastilla'; inclinar?: number; y?: number; tam?: number};
 	marca: 'esquina' | 'arriba' | 'ninguna';
 	/** Movimiento suave de cámara por defecto en cada escena (zoom de 1 a este valor). */
 	zoomLento: number;
@@ -197,6 +201,21 @@ export const ESTILOS: Record<string, Tema> = {
 		marca: 'esquina',
 		zoomLento: 1.04,
 	},
+	// Maqueta 3D low-poly explicada (diorama con corte de tierra): una palabra a la vez al centro, rótulos con contorno,
+	// etiquetas con flecha pegadas a los objetos y cortes rápidos entre ángulos del mismo mundo
+	maqueta: {
+		fondo: {tipo: 'degradado', colores: ['#BFE3FF', '#EAF6FF']},
+		vineta: 0.06,
+		colores: {texto: '#FFFFFF', acento: '#FFC928', acento2: '#2D7BFF', suave: '#E8EEF6', tarjeta: '#FFFFFF', tarjetaTexto: '#1B1B1F', borde: '#1B1B1F'},
+		fuentes: {titulo: MONT, texto: MONT, mono: MONO},
+		tituloMayusculas: true,
+		subtitulos: {tipo: 'palabra', y: 1010, tam: 52, maxPalabras: 1, mayusculas: 'inicial', contorno: 0, color: '#FFFFFF', pendiente: '#FFFFFF', resalte: ''},
+		rotulo: {estilo: 'contorno', inclinar: -2, y: 330, tam: 92},
+		transicion: 'corte',
+		movimiento: {entrada: 0.4, salida: 0.25, transicion: 0.2, curva: 'resorte'},
+		marca: 'ninguna',
+		zoomLento: 1.03,
+	},
 	// Oscuro y limpio, para lo que sea
 	minimal: {
 		fondo: {tipo: 'degradado', colores: ['#15151C', '#08080C']},