morfeo 0.2.0 → 0.3.0

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']},