diff --git a/web/routes/temas/profundidad/+page.svelte b/web/routes/temas/profundidad/+page.svelte
index 3518a6972..bf3587757 100644
--- a/web/routes/temas/profundidad/+page.svelte
+++ b/web/routes/temas/profundidad/+page.svelte
@@ -1,39 +1,34 @@
 <script lang="ts">
 	/**
-	 * Depth demo — the Eidos depth system, the novel "depth occurs" channel.
+	 * Depth demo — the Eidos depth channel, made visceral.
 	 *
-	 * Two moments, both live:
-	 *  - ESTADO: the 5 planes (`data-depth`) — the resting elevation (where an element *is*),
-	 *    composing surface + shadow + z. Toggle light/dark to see the mode-aware mix.
-	 *  - EVENTO: stamping `data-event-*` (as sema would during the hold) fires the firma —
-	 *    emerge → the shadow GROWS (rise); contact → it FLATTENS (recede). Depth *occurs*.
+	 * Not abstract tiles: real UI that RESPONDS. Three beats —
+	 *  1. Reacciona — cards lift on hover (state moment: depth responds to interaction).
+	 *  2. Asciende — a dialog RISES over a scrim on open (event moment: the `present-rise`
+	 *     firma — shadow grows + lift — fired by stamping `data-event-*`, as sema would).
+	 *  3. Cada plano, un rol — the 5 planes shown as the real components they're for.
 	 *
-	 * Self-contained: imports the eidos foundation (planes + firma keyframes) + `data-theme`.
+	 * Self-contained: eidos foundation (planes + firma) + `data-theme`.
 	 */
 	import '@/uix/eidos/index.css'
 
 	let theme = $state<'light' | 'dark'>('dark')
 
-	const PLANES = [
-		{ id: 'flush', label: 'flush', note: 'a ras de superficie' },
-		{ id: 'raised', label: 'raised', note: 'tarjetas · reposo' },
-		{ id: 'overlay', label: 'overlay', note: 'menús · popovers' },
-		{ id: 'modal', label: 'modal', note: 'diálogos · cima' },
-		{ id: 'recessed', label: 'recessed', note: 'pozos · inputs' }
-	] as const
+	// ── Ascenso: a dialog that rises over a scrim (the event moment) ────────────
+	let open = $state(false)
+	let evt = $state<{ event?: string; phase?: string }>({})
 
-	// ── Event moment: stamp data-event-* to fire the firma (as sema would) ──────
-	let targetPlane = $state<'raised' | 'overlay' | 'modal'>('overlay')
-	let evt = $state<{ event?: string; family?: string; phase?: string }>({})
-
-	function fire(next: { event?: string; family?: string }): void {
-		evt = {} // clear → lets the one-shot animation restart on re-trigger
+	function summon(): void {
+		open = true
+		evt = {}
 		requestAnimationFrame(() => {
-			evt = { ...next, phase: 'active' }
+			evt = { event: 'present', phase: 'active' }
 		})
 	}
-	const fireEmerge = () => fire({ event: 'present' })
-	const firePress = () => fire({ family: 'contact' })
+	function dismiss(): void {
+		open = false
+		evt = {}
+	}
 </script>
 
 <svelte:head><title>Profundidad · Eidos</title></svelte:head>
@@ -48,86 +43,152 @@
 		</div>
 		<h1 class="mast-title">La profundidad <em>ocurre</em></h1>
 		<p class="mast-lede">
-			No es una propiedad que un elemento <i>tiene</i> — es algo que <i>sucede</i>. Un plano en
-			reposo (estado) <strong>y</strong> un ascenso al emerger (evento): los dos momentos, un solo
-			canal.
+			No es una propiedad que un elemento <i>tiene</i> — es algo que <i>sucede</i>. Mira: la
+			profundidad <strong>responde</strong> al cursor y <strong>asciende</strong> cuando algo emerge.
 		</p>
 	</header>
 
-	<!-- ── Planos (momento-estado) ────────────────────────────────────────── -->
+	<!-- ── 1 · Reacciona (estado · hover) ─────────────────────────────────── -->
 	<section class="section">
 		<div class="sec-head">
-			<h2 class="sec-title">Planos · momento-estado</h2>
-			<p class="sec-note">
-				<code>data-depth='{`{plane}`}'</code> — un nivel cohere superficie + sombra + z. La mezcla
-				es mode-aware (en dark, "más arriba" = más claro). Cambia el tema arriba.
-			</p>
+			<h2 class="sec-title">Reacciona</h2>
+			<p class="sec-note">Pasa el cursor — cada tarjeta sube de plano (raised → overlay): la sombra crece y se eleva.</p>
 		</div>
-		<div class="planes">
-			{#each PLANES as p}
-				<div class="plane-cell">
-					<div
-						class="plane-card"
-						data-depth={p.id}
-						style="background: var(--depth-{p.id}-surface, var(--color-surface-default))"
-					></div>
-					<span class="plane-label">{p.label}</span>
-					<span class="plane-note">{p.note}</span>
-				</div>
+		<div class="lift-row">
+			{#each [{ t: 'Ingresos', v: '€48.2k', d: '+12% este mes', c: 'fulfill' }, { t: 'Sesiones', v: '9 312', d: '+4% vs ayer', c: 'primary' }, { t: 'Alertas', v: '3', d: 'requieren acción', c: 'risk' }] as card}
+				<article class="lift-card" data-depth="raised">
+					<span class="lift-tag" data-c={card.c}>{card.t}</span>
+					<span class="lift-value">{card.v}</span>
+					<span class="lift-delta">{card.d}</span>
+				</article>
 			{/each}
 		</div>
 	</section>
 
-	<!-- ── El evento (momento-evento) ─────────────────────────────────────── -->
+	<!-- ── 2 · Asciende (evento · la firma) ───────────────────────────────── -->
 	<section class="section">
 		<div class="sec-head">
-			<h2 class="sec-title">El evento · momento-evento</h2>
+			<h2 class="sec-title">Asciende</h2>
 			<p class="sec-note">
-				La elevación vive en la <em>firma</em>: dispara un evento (como haría sema durante el
-				<code>hold</code>) y la sombra <strong>crece</strong> al emerger / se <strong>aplana</strong>
-				al presionar — coordinado con posición + escala desde un solo evento.
+				Abre el panel: <em>asciende</em> sobre el contenido (que recede tras el scrim). La sombra
+				crece desde plano hasta su elevación — la <em>firma</em> del evento, no un estilo fijo.
 			</p>
 		</div>
 
-		<div class="event-stage">
-			<div class="event-controls">
-				<div class="ctrl">
-					<span class="ctrl-label">plano de reposo</span>
-					<div class="chips">
-						{#each ['raised', 'overlay', 'modal'] as pl}
-							<button class="chip" data-on={targetPlane === pl} onclick={() => (targetPlane = pl as typeof targetPlane)}>{pl}</button>
-						{/each}
-					</div>
-				</div>
-				<div class="fire-row">
-					<button class="fire-btn" onclick={fireEmerge}>↑ emerge <small>(sube)</small></button>
-					<button class="fire-btn" onclick={firePress}>↓ contact <small>(recede)</small></button>
+		<div class="stage">
+			<div class="stage-app" class:dimmed={open}>
+				<div class="app-bar">
+					<span class="app-dot"></span><span class="app-dot"></span><span class="app-dot"></span>
+					<span class="app-title">panel · proyecto</span>
 				</div>
+				{#each ['Revisar borrador de diseño', 'Publicar el sprint de profundidad', 'Cerrar incidencias abiertas'] as row, i}
+					<div class="app-row"><span class="app-check" data-on={i === 1}></span>{row}</div>
+				{/each}
 			</div>
 
-			<div class="event-arena">
+			{#if open}
+				<button class="scrim" aria-label="cerrar" onclick={dismiss}></button>
 				<div
-					class="event-target"
-					data-depth={targetPlane}
+					class="risen"
+					data-depth="modal"
 					data-event={evt.event}
-					data-event-family={evt.family}
 					data-event-phase={evt.phase}
-					style="background: var(--depth-{targetPlane}-surface, var(--color-surface-overlay))"
 				>
-					<span class="target-glyph">↕</span>
-					<span class="target-text">dispárame</span>
+					<h3 class="risen-title">Acabo de ascender</h3>
+					<p class="risen-body">
+						Mi sombra creció desde la superficie hasta el plano <code>modal</code> mientras subía — y
+						el contenido de detrás recedió. Eso es la profundidad <em>ocurriendo</em>.
+					</p>
+					<div class="risen-actions">
+						<button class="btn btn-primary" onclick={dismiss}>Entendido</button>
+						<button class="btn btn-ghost" onclick={dismiss}>Cerrar</button>
+					</div>
 				</div>
-			</div>
+			{/if}
+
+			<button class="stage-trigger" onclick={() => (open ? dismiss() : summon())}>
+				{open ? '↓ cerrar' : '↑ abrir panel'}
+			</button>
+		</div>
+	</section>
+
+	<!-- ── 3 · Cada plano, un rol ─────────────────────────────────────────── -->
+	<section class="section">
+		<div class="sec-head">
+			<h2 class="sec-title">Cada plano, un rol</h2>
+			<p class="sec-note">
+				Los 5 planos son los componentes que los necesitan. <code>data-depth</code> cohere
+				superficie + sombra + z; en dark, "más arriba" = más claro (mode-aware).
+			</p>
+		</div>
+
+		<div class="roles">
+			<!-- flush -->
+			<figure class="role">
+				<div class="role-stage">
+					<div class="chips">
+						<span class="chip" data-depth="flush">diseño</span>
+						<span class="chip" data-depth="flush">activo</span>
+						<span class="chip" data-depth="flush">v2</span>
+					</div>
+				</div>
+				<figcaption><b>flush</b> · chips, a ras de superficie</figcaption>
+			</figure>
+
+			<!-- raised -->
+			<figure class="role">
+				<div class="role-stage">
+					<div class="mini-card" data-depth="raised">
+						<span class="mini-avatar">A</span>
+						<div><span class="mini-name">Tarjeta</span><span class="mini-sub">contenido en reposo</span></div>
+					</div>
+				</div>
+				<figcaption><b>raised</b> · tarjetas, paneles</figcaption>
+			</figure>
+
+			<!-- overlay -->
+			<figure class="role">
+				<div class="role-stage">
+					<div class="mini-menu" data-depth="overlay">
+						<div class="menu-item">Duplicar</div>
+						<div class="menu-item" data-on>Mover a…</div>
+						<div class="menu-item">Eliminar</div>
+					</div>
+				</div>
+				<figcaption><b>overlay</b> · menús, popovers</figcaption>
+			</figure>
+
+			<!-- modal -->
+			<figure class="role">
+				<div class="role-stage">
+					<div class="mini-dialog" data-depth="modal">
+						<span class="mini-name">¿Eliminar?</span>
+						<span class="mini-sub">No se puede deshacer.</span>
+						<span class="mini-btn">Eliminar</span>
+					</div>
+				</div>
+				<figcaption><b>modal</b> · diálogos, cima</figcaption>
+			</figure>
+
+			<!-- recessed -->
+			<figure class="role">
+				<div class="role-stage">
+					<div class="mini-field">
+						<span class="field-label">Buscar</span>
+						<span class="field-input" data-depth="recessed">escribe aquí…</span>
+					</div>
+				</div>
+				<figcaption><b>recessed</b> · inputs, pozos</figcaption>
+			</figure>
 		</div>
 	</section>
 
 	<footer class="footnote">
 		<p>
-			<strong>Default fuerte, jaula abierta.</strong> El set de planos, su mezcla y la firma son
-			config-driven y anulables; los primitivos (<code>--shadow-*</code>, <code>z-index</code>,
-			<code>box-shadow</code> crudo) siguen a un paso. La capa eventful es <em>aditiva</em> sobre el
-			plano de reposo — un elemento <i>flush</i> no eleva nada; uno <i>raised</i> sube proporcional
-			a su plano. Y degrada con <code>prefers-reduced-motion</code>.
+			<strong>Default fuerte, jaula abierta.</strong> Planos config-driven, primitivos
+			(<code>--shadow-*</code>, <code>z-index</code>) a un paso, firma anulable; la capa eventful
+			es aditiva y degrada con <code>prefers-reduced-motion</code>. Un solo evento mueve
+			profundidad + posición + sound + haptic, coordinados.
 		</p>
 	</footer>
 </div>
@@ -136,209 +197,150 @@
 	.root {
 		min-block-size: 100vh;
 		background:
-			radial-gradient(120% 80% at 50% -10%, var(--color-surface-raised), transparent 60%),
+			radial-gradient(130% 90% at 50% -15%, var(--color-surface-raised), transparent 55%),
 			var(--color-surface-default);
 		color: var(--color-content-primary);
 		font-family: var(--font-family-primary);
 		padding: clamp(1.5rem, 5vw, 5rem) clamp(1.25rem, 5vw, 6rem) 6rem;
-		--rule: color-mix(in srgb, var(--color-border-default) 100%, transparent);
+		--rule: var(--color-border-default);
 	}
 
-	.masthead {
-		max-inline-size: 56rem;
-		margin-block-end: clamp(3rem, 8vw, 6rem);
-	}
-	.mast-row {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 1rem;
-		margin-block-end: 2.5rem;
-	}
-	.kicker {
-		margin: 0;
-		font-family: var(--font-family-mono);
-		font-size: var(--font-size-xs);
-		letter-spacing: 0.18em;
-		text-transform: uppercase;
-		color: var(--color-content-muted);
-	}
-	.theme-toggle {
-		font-family: var(--font-family-mono);
-		font-size: var(--font-size-xs);
-		letter-spacing: 0.06em;
-		color: var(--color-content-secondary);
-		background: var(--color-surface-raised);
-		border: 1px solid var(--rule);
-		border-radius: 999px;
-		padding: 0.5rem 1rem;
-		cursor: pointer;
-	}
+	.masthead { max-inline-size: 56rem; margin-block-end: clamp(3rem, 8vw, 6rem); }
+	.mast-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-block-end: 2.5rem; }
+	.kicker { margin: 0; font-family: var(--font-family-mono); font-size: var(--font-size-xs); letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-content-muted); }
+	.theme-toggle { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-content-secondary); background: var(--color-surface-raised); border: 1px solid var(--rule); border-radius: 999px; padding: 0.5rem 1rem; cursor: pointer; }
 	.theme-toggle:hover { color: var(--color-content-primary); }
-	.mast-title {
-		font-family: var(--font-family-display);
-		font-size: var(--font-size-xxxl);
-		font-weight: 600;
-		line-height: 1;
-		letter-spacing: -0.03em;
-		margin: 0 0 1.25rem;
-		text-wrap: balance;
-	}
+	.mast-title { font-family: var(--font-family-display); font-size: var(--font-size-xxxl); font-weight: 600; line-height: 1; letter-spacing: -0.03em; margin: 0 0 1.25rem; text-wrap: balance; }
 	.mast-title em { font-style: italic; color: var(--color-primary-text, var(--color-content-primary)); }
-	.mast-lede {
-		max-inline-size: 46ch;
-		font-size: var(--font-size-lg);
-		line-height: 1.5;
-		color: var(--color-content-secondary);
-		margin: 0;
-		text-wrap: pretty;
-	}
+	.mast-lede { max-inline-size: 48ch; font-size: var(--font-size-lg); line-height: 1.5; color: var(--color-content-secondary); margin: 0; text-wrap: pretty; }
 	.mast-lede i { font-style: italic; }
+	.mast-lede strong, .sec-note em { color: var(--color-content-primary); font-weight: 600; font-style: normal; }
 
 	.section { margin-block-end: clamp(3.5rem, 9vw, 7rem); }
-	.sec-head {
-		display: flex;
-		flex-wrap: wrap;
-		align-items: baseline;
-		gap: 0.75rem 2rem;
-		padding-block-end: 1.25rem;
-		margin-block-end: 2.5rem;
-		border-block-end: 1px solid var(--rule);
-	}
-	.sec-title {
-		font-family: var(--font-family-mono);
-		font-size: var(--font-size-xs);
-		font-weight: 500;
-		letter-spacing: 0.16em;
-		text-transform: uppercase;
-		margin: 0;
-	}
-	.sec-note {
-		margin: 0;
-		max-inline-size: 60ch;
-		font-size: var(--font-size-sm);
-		line-height: 1.55;
-		color: var(--color-content-muted);
-	}
-	code { font-family: var(--font-family-mono); font-size: 0.92em; color: var(--color-content-secondary); background: var(--color-surface-muted); padding: 0.1em 0.4em; border-radius: 4px; }
-	em { font-style: normal; color: var(--color-content-primary); font-weight: 500; }
-
-	/* Planes */
-	.planes {
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(min(100%, 9rem), 1fr));
-		gap: clamp(1.5rem, 4vw, 3rem);
-	}
-	.plane-cell { display: flex; flex-direction: column; align-items: center; gap: 1rem; }
-	.plane-card {
-		inline-size: 100%;
-		block-size: 7rem;
-		border-radius: var(--radius-lg);
-		/* hairline so `flush` (no shadow, surface = canvas) still reads as a flat tile */
-		border: 1px solid color-mix(in srgb, var(--rule) 70%, transparent);
-	}
-	.plane-label {
-		font-family: var(--font-family-mono);
-		font-size: var(--font-size-sm);
-		letter-spacing: 0.04em;
-		color: var(--color-content-primary);
-	}
-	.plane-note {
-		font-family: var(--font-family-mono);
-		font-size: var(--font-size-xs);
-		color: var(--color-content-muted);
-		text-align: center;
-	}
+	.sec-head { margin-block-end: 2.5rem; }
+	.sec-title { font-family: var(--font-family-display); font-size: var(--font-size-xl); font-weight: 600; letter-spacing: -0.01em; margin: 0 0 0.5rem; }
+	.sec-note { margin: 0; max-inline-size: 62ch; font-size: var(--font-size-sm); line-height: 1.55; color: var(--color-content-muted); }
+	code { font-family: var(--font-family-mono); font-size: 0.9em; color: var(--color-content-secondary); background: var(--color-surface-muted); padding: 0.1em 0.4em; border-radius: 4px; }
 
-	/* Event stage */
-	.event-stage {
-		display: grid;
-		grid-template-columns: minmax(0, 18rem) 1fr;
-		gap: clamp(1.5rem, 4vw, 3rem);
-		align-items: start;
-	}
-	@media (max-width: 720px) { .event-stage { grid-template-columns: 1fr; } }
-	.event-controls { display: flex; flex-direction: column; gap: 1.75rem; }
-	.ctrl { display: flex; flex-direction: column; gap: 0.7rem; }
-	.ctrl-label {
-		font-family: var(--font-family-mono);
-		font-size: var(--font-size-xs);
-		letter-spacing: 0.08em;
-		text-transform: uppercase;
-		color: var(--color-content-muted);
-	}
-	.chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
-	.chip {
-		font-family: var(--font-family-mono);
-		font-size: var(--font-size-xs);
-		color: var(--color-content-secondary);
+	/* 1 · Reacciona (hover lift) */
+	.lift-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: 1.5rem; }
+	.lift-card {
 		background: var(--color-surface-raised);
 		border: 1px solid var(--rule);
-		border-radius: 7px;
-		padding: 0.35rem 0.7rem;
-		cursor: pointer;
+		border-radius: var(--radius-lg);
+		padding: 1.5rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		cursor: default;
+		transition: box-shadow 240ms var(--ease-out, cubic-bezier(0.2, 0, 0, 1)), translate 240ms var(--ease-out, cubic-bezier(0.2, 0, 0, 1)), border-color 240ms;
 	}
-	.chip[data-on='true'] {
-		color: var(--color-primary-on-solid, #fff);
-		background: var(--color-primary-solid);
-		border-color: var(--color-primary-solid);
+	.lift-card:hover {
+		box-shadow: var(--depth-overlay-shadow);
+		translate: 0 -6px;
+		border-color: color-mix(in srgb, var(--color-primary-solid) 40%, var(--rule));
 	}
-	.fire-row { display: flex; flex-direction: column; gap: 0.6rem; }
-	.fire-btn {
-		font-family: var(--font-family-mono);
-		font-size: var(--font-size-sm);
-		color: var(--color-content-primary);
-		background: var(--color-surface-raised);
+	.lift-tag { font-family: var(--font-family-mono); font-size: var(--font-size-xs); letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-content-muted); }
+	.lift-tag[data-c='fulfill'] { color: var(--color-fulfill-text, var(--color-content-secondary)); }
+	.lift-tag[data-c='primary'] { color: var(--color-primary-text, var(--color-content-secondary)); }
+	.lift-tag[data-c='risk'] { color: var(--color-risk-text, var(--color-content-secondary)); }
+	.lift-value { font-family: var(--font-family-display); font-size: var(--font-size-xxl); line-height: 1; letter-spacing: -0.02em; color: var(--color-content-primary); }
+	.lift-delta { font-size: var(--font-size-xs); color: var(--color-content-muted); }
+	@media (prefers-reduced-motion: reduce) { .lift-card { transition: box-shadow 240ms; } .lift-card:hover { translate: none; } }
+
+	/* 2 · Asciende (the stage + rising dialog + scrim) */
+	.stage {
+		position: relative;
+		overflow: hidden;
+		border-radius: var(--radius-lg);
 		border: 1px solid var(--rule);
-		border-radius: var(--radius-md);
-		padding: 0.7rem 1rem;
+		background: var(--color-surface-default);
+		min-block-size: 22rem;
+		padding: clamp(1.25rem, 3vw, 2rem);
+	}
+	.stage-app { transition: filter 280ms var(--ease-out, ease), opacity 280ms; max-inline-size: 30rem; }
+	.stage-app.dimmed { filter: saturate(0.7); opacity: 0.5; }
+	.app-bar { display: flex; align-items: center; gap: 0.4rem; padding-block-end: 1rem; margin-block-end: 1rem; border-block-end: 1px solid var(--rule); }
+	.app-dot { inline-size: 0.6rem; block-size: 0.6rem; border-radius: 50%; background: var(--color-surface-muted); }
+	.app-title { margin-inline-start: 0.5rem; font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-content-muted); }
+	.app-row { display: flex; align-items: center; gap: 0.75rem; padding-block: 0.6rem; font-size: var(--font-size-sm); color: var(--color-content-secondary); border-block-end: 1px solid color-mix(in srgb, var(--rule) 50%, transparent); }
+	.app-check { inline-size: 1.05rem; block-size: 1.05rem; border-radius: 5px; border: 1.5px solid var(--rule); flex: none; }
+	.app-check[data-on='true'] { background: var(--color-primary-solid); border-color: var(--color-primary-solid); }
+
+	.scrim {
+		position: absolute;
+		inset: 0;
+		border: 0;
+		padding: 0;
+		background: color-mix(in srgb, var(--color-neutral-contrast, #000) 55%, transparent);
 		cursor: pointer;
-		text-align: left;
-		transition: border-color 140ms;
+		animation: depth-scrim-in 240ms var(--ease-out, ease) both;
 	}
-	.fire-btn small { color: var(--color-content-muted); }
-	.fire-btn:hover { border-color: var(--color-primary-solid); }
+	@keyframes depth-scrim-in { from { opacity: 0; } to { opacity: 1; } }
 
-	.event-arena {
-		display: grid;
-		place-items: center;
-		min-block-size: 18rem;
-		border-radius: var(--radius-lg);
-		background:
-			repeating-linear-gradient(45deg, transparent 0 13px, color-mix(in srgb, var(--rule) 45%, transparent) 13px 14px),
-			var(--color-surface-default);
+	.risen {
+		position: absolute;
+		inset-block-start: 50%;
+		inset-inline-start: 50%;
+		translate: -50% -50%;
+		inline-size: min(24rem, calc(100% - 3rem));
+		background: var(--depth-modal-surface, var(--color-surface-overlay));
 		border: 1px solid var(--rule);
-	}
-	.event-target {
-		inline-size: 11rem;
-		block-size: 7.5rem;
-		border-radius: var(--radius-lg);
+		border-radius: var(--radius-xl);
+		padding: 1.75rem;
 		display: flex;
 		flex-direction: column;
-		gap: 0.5rem;
-		align-items: center;
-		justify-content: center;
-	}
-	.target-glyph { font-size: var(--font-size-xl); color: var(--color-content-secondary); }
-	.target-text {
-		font-family: var(--font-family-mono);
-		font-size: var(--font-size-xs);
-		letter-spacing: 0.06em;
-		text-transform: uppercase;
-		color: var(--color-content-muted);
+		gap: 0.75rem;
 	}
+	.risen-title { font-family: var(--font-family-display); font-size: var(--font-size-xl); margin: 0; color: var(--color-content-primary); }
+	.risen-body { margin: 0; font-size: var(--font-size-sm); line-height: 1.55; color: var(--color-content-secondary); }
+	.risen-actions { display: flex; gap: 0.6rem; margin-block-start: 0.75rem; }
+	.btn { font-family: var(--font-family-primary); font-size: var(--font-size-sm); border-radius: var(--radius-md); padding: 0.55rem 1.1rem; cursor: pointer; border: 1px solid transparent; }
+	.btn-primary { background: var(--color-primary-solid); color: var(--color-primary-on-solid, #fff); }
+	.btn-ghost { background: transparent; color: var(--color-content-secondary); border-color: var(--rule); }
 
-	.footnote {
-		max-inline-size: 60rem;
-		padding-block-start: 2rem;
-		border-block-start: 1px solid var(--rule);
-	}
-	.footnote p {
-		margin: 0;
+	.stage-trigger {
+		position: absolute;
+		inset-block-end: 1.25rem;
+		inset-inline-end: 1.25rem;
+		font-family: var(--font-family-mono);
 		font-size: var(--font-size-sm);
-		line-height: 1.6;
-		color: var(--color-content-muted);
-		text-wrap: pretty;
+		color: var(--color-primary-on-solid, #fff);
+		background: var(--color-primary-solid);
+		border: 0;
+		border-radius: var(--radius-md);
+		padding: 0.65rem 1.1rem;
+		cursor: pointer;
+		z-index: 1;
+		box-shadow: var(--depth-raised-shadow);
 	}
-	.footnote i { font-style: italic; }
+
+	/* 3 · Cada plano, un rol */
+	.roles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: clamp(1.25rem, 3vw, 2.5rem); }
+	.role { margin: 0; display: flex; flex-direction: column; gap: 1rem; }
+	.role-stage { min-block-size: 8rem; display: grid; place-items: center; padding: 1rem; border-radius: var(--radius-lg); background: var(--color-surface-default); border: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
+	.role figcaption { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-content-muted); }
+	.role figcaption b { color: var(--color-content-primary); font-weight: 600; }
+
+	.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; }
+	.chip { font-family: var(--font-family-mono); font-size: var(--font-size-xs); padding: 0.3rem 0.7rem; border-radius: 999px; background: var(--color-surface-muted); color: var(--color-content-secondary); border: 1px solid color-mix(in srgb, var(--rule) 60%, transparent); }
+
+	.mini-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.9rem 1.1rem; border-radius: var(--radius-md); background: var(--color-surface-raised); }
+	.mini-avatar { inline-size: 2rem; block-size: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--color-primary-solid); color: var(--color-primary-on-solid, #fff); font-size: var(--font-size-sm); font-weight: 600; }
+	.mini-name { display: block; font-size: var(--font-size-sm); font-weight: 600; color: var(--color-content-primary); }
+	.mini-sub { display: block; font-size: var(--font-size-xs); color: var(--color-content-muted); }
+
+	.mini-menu { inline-size: 9rem; padding: 0.4rem; border-radius: var(--radius-md); background: var(--color-surface-overlay); display: flex; flex-direction: column; }
+	.menu-item { padding: 0.45rem 0.65rem; border-radius: var(--radius-sm); font-size: var(--font-size-sm); color: var(--color-content-secondary); }
+	.menu-item[data-on] { background: var(--color-primary-solid); color: var(--color-primary-on-solid, #fff); }
+
+	.mini-dialog { inline-size: 11rem; padding: 1rem; border-radius: var(--radius-md); background: var(--color-surface-overlay); display: flex; flex-direction: column; gap: 0.35rem; }
+	.mini-btn { margin-block-start: 0.5rem; align-self: flex-start; font-size: var(--font-size-xs); padding: 0.35rem 0.7rem; border-radius: var(--radius-sm); background: var(--color-threat-solid, var(--color-primary-solid)); color: #fff; }
+
+	.mini-field { display: flex; flex-direction: column; gap: 0.4rem; inline-size: 100%; max-inline-size: 11rem; }
+	.field-label { font-size: var(--font-size-xs); color: var(--color-content-muted); }
+	.field-input { padding: 0.6rem 0.8rem; border-radius: var(--radius-md); background: var(--color-surface-muted); color: var(--color-content-muted); font-size: var(--font-size-sm); }
+
+	.footnote { max-inline-size: 60rem; padding-block-start: 2rem; border-block-start: 1px solid var(--rule); }
+	.footnote p { margin: 0; font-size: var(--font-size-sm); line-height: 1.6; color: var(--color-content-muted); text-wrap: pretty; }
 </style>