@540deg/ds 0.0.0-stage → 0.1.0

package/dist/templates/TalkTemplate/TalkTemplate.js

@@ -0,0 +1,1392 @@
+import { useSteps } from "../../components/organisms/Steps/StepsContext.js";
+import { Count } from "../../components/atoms/Count/Count.js";
+import { Text } from "../../components/atoms/Text/Text.js";
+import { Card } from "../../components/molecules/Card/Card.js";
+import { CaseItem } from "../../components/molecules/CaseItem/CaseItem.js";
+import { Field } from "../../components/molecules/Field/Field.js";
+import { Grid, GridItem } from "../../components/molecules/Grid/Grid.js";
+import { ArrowList, ProblemList, SimpleList } from "../../components/molecules/Lists/Lists.js";
+import { Metric, MetricNote } from "../../components/molecules/Metric/Metric.js";
+import { Question } from "../../components/molecules/Question/Question.js";
+import { Screenshot } from "../../components/molecules/Screenshot/Screenshot.js";
+import { SectionHeader } from "../../components/molecules/SectionHeader/SectionHeader.js";
+import { Stack } from "../../components/molecules/Stack/Stack.js";
+import { TeamMember } from "../../components/molecules/TeamMember/TeamMember.js";
+import { Bars } from "../../components/organisms/Bars/Bars.js";
+import { Slide } from "../../components/organisms/Slide/Slide.js";
+import { BlockTitle } from "../../components/organisms/BlockTitle/BlockTitle.js";
+import { CardList } from "../../components/organisms/CardList/CardList.js";
+import { Closing } from "../../components/organisms/Closing/Closing.js";
+import { Cover } from "../../components/organisms/Cover/Cover.js";
+import { Cycle } from "../../components/organisms/Cycle/Cycle.js";
+import { Deck } from "../../components/organisms/Deck/Deck.js";
+import { Flow } from "../../components/organisms/Flow/Flow.js";
+import { Form } from "../../components/organisms/Form/Form.js";
+import { Heartbeat } from "../../components/organisms/Heartbeat/Heartbeat.js";
+import { LogoCarousel } from "../../components/organisms/LogoCarousel/LogoCarousel.js";
+import { Marquee } from "../../components/organisms/Marquee/Marquee.js";
+import { ProgressBar } from "../../components/organisms/ProgressBar/ProgressBar.js";
+import { Punchline } from "../../components/organisms/Punchline/Punchline.js";
+import { Quote } from "../../components/organisms/Quote/Quote.js";
+import { Schema, SchemaFrame, SchemaLayer, SchemaVoice, schema } from "../../components/organisms/Schema/Schema.js";
+import { Share } from "../../components/organisms/Share/Share.js";
+import { Sheet } from "../../components/organisms/Sheet/Sheet.js";
+import { Spotlight } from "../../components/organisms/Spotlight/Spotlight.js";
+import { Statements } from "../../components/organisms/Statements/Statements.js";
+import { PanelStack, Step, Steps } from "../../components/organisms/Steps/Steps.js";
+import { Story } from "../../components/organisms/Story/Story.js";
+import { Timeline } from "../../components/organisms/Timeline/Timeline.js";
+import { Tools } from "../../components/organisms/Tools/Tools.js";
+import captura_default from "../../assets/samples/captura.js";
+import charla_david_default from "../../assets/samples/charla-david.js";
+import charla_escultura_default from "../../assets/samples/charla-escultura.js";
+import charla_fachada_default from "../../assets/samples/charla-fachada.js";
+import charla_pintura_default from "../../assets/samples/charla-pintura.js";
+import charla_placa_default from "../../assets/samples/charla-placa.js";
+import charla_teclado_default from "../../assets/samples/charla-teclado.js";
+import logo_540_claro_default from "../../assets/samples/logo-540-claro.js";
+import logo_540_portada_claro_default from "../../assets/samples/logo-540-portada-claro.js";
+import logo_540_portada_oscuro_default from "../../assets/samples/logo-540-portada-oscuro.js";
+import cliente_1_default from "../../assets/samples/logos/cliente-1.js";
+import cliente_2_default from "../../assets/samples/logos/cliente-2.js";
+import cliente_3_default from "../../assets/samples/logos/cliente-3.js";
+import cliente_4_default from "../../assets/samples/logos/cliente-4.js";
+import cliente_5_default from "../../assets/samples/logos/cliente-5.js";
+import cliente_6_default from "../../assets/samples/logos/cliente-6.js";
+import cliente_7_default from "../../assets/samples/logos/cliente-7.js";
+import cliente_8_default from "../../assets/samples/logos/cliente-8.js";
+import cliente_9_default from "../../assets/samples/logos/cliente-9.js";
+import retrato_default from "../../assets/samples/retrato.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+//#region src/templates/TalkTemplate/TalkTemplate.tsx
+var ITEMS = [
+	{
+		href: "#contar",
+		label: "Contar"
+	},
+	{
+		href: "#comparar",
+		label: "Comparar"
+	},
+	{
+		href: "#procesos",
+		label: "Procesos"
+	},
+	{
+		href: "#datos",
+		label: "Datos"
+	},
+	{
+		href: "#pantallas",
+		label: "Pantallas"
+	}
+];
+var FOOTER = {
+	tagline: "Una línea que resume de qué iba la charla.",
+	networks: [
+		{
+			network: "linkedin",
+			href: "https://linkedin.com/company/540-degrees",
+			label: "LinkedIn de 540"
+		},
+		{
+			network: "x",
+			href: "https://x.com/540deg",
+			label: "X de 540"
+		},
+		{
+			network: "instagram",
+			href: "https://instagram.com/540deg",
+			label: "Instagram de 540"
+		}
+	],
+	copyright: "© 2026 540"
+};
+var PHASES = [
+	"Descubrir",
+	"Definir",
+	"Diseñar",
+	"Especificar",
+	"Construir",
+	"Verificar",
+	"Operar"
+];
+var PANELS = [
+	{
+		kicker: "Fase 01",
+		title: "Descubrir",
+		body: "Qué hace esta fase y para quién, en una o dos frases."
+	},
+	{
+		kicker: "Fase 02",
+		title: "Definir",
+		body: "Lo que sale de esta fase y quién lo recibe."
+	},
+	{
+		kicker: "Fase 03",
+		title: "Diseñar",
+		body: "Una frase sobre lo que cambia aquí."
+	},
+	{
+		kicker: "Fase 04",
+		title: "Especificar",
+		body: "Donde suele atascarse el ciclo, y por qué."
+	},
+	{
+		kicker: "El cuello",
+		title: "Aquí se para todo",
+		body: "La fase marcada en rojo es la que frena a las demás."
+	}
+];
+var CONTEXT_CARDS = [
+	{
+		kicker: "Primera pieza",
+		title: "Un nombre corto",
+		body: "Una frase sobre esta pieza."
+	},
+	{
+		kicker: "Segunda pieza",
+		title: "Otro nombre",
+		body: "Una frase sobre esta otra."
+	},
+	{
+		kicker: "Tercera pieza",
+		title: "Un tercero",
+		body: "Una frase que la presenta."
+	},
+	{
+		kicker: "Cuarta pieza",
+		title: "El cuarto",
+		body: "Una frase, igual de corta."
+	},
+	{
+		kicker: "Quinta pieza",
+		title: "El quinto",
+		body: "Y la última frase."
+	}
+];
+/** Five compact cards that enter one by one; at the last step the first one is highlighted. */
+function ContextCards() {
+	const { current } = useSteps();
+	const focus = current >= 6;
+	return /* @__PURE__ */ jsx(Grid, {
+		layout: "five",
+		compact: true,
+		children: CONTEXT_CARDS.map((c, i) => /* @__PURE__ */ jsx(GridItem, { children: /* @__PURE__ */ jsx(Step, {
+			from: i + 1,
+			children: /* @__PURE__ */ jsx(Card, {
+				kicker: c.kicker,
+				title: c.title,
+				align: "center",
+				emphasis: focus ? i === 0 ? "highlighted" : "dimmed" : "none",
+				children: c.body
+			})
+		}) }, c.title))
+	});
+}
+/** The ring follows the step; at step 4 every phase is done and the fourth is marked red. */
+function CycleWithPanel() {
+	const { current } = useSteps();
+	const step = Number.isFinite(current) ? Math.max(current, 0) : PANELS.length - 1;
+	const all = step >= 4;
+	return /* @__PURE__ */ jsxs(Grid, {
+		align: "center",
+		children: [/* @__PURE__ */ jsx(GridItem, {
+			span: 7,
+			children: /* @__PURE__ */ jsx(Cycle, {
+				phases: PHASES,
+				active: all ? void 0 : step,
+				all,
+				marks: all ? { 3: "red" } : void 0,
+				label: "El ciclo de siete fases, con la cuarta marcada como cuello de botella"
+			})
+		}), /* @__PURE__ */ jsx(GridItem, {
+			span: 5,
+			children: /* @__PURE__ */ jsx(PanelStack, { children: PANELS.map((p, i) => /* @__PURE__ */ jsx(Step, {
+				from: i,
+				to: i + 1 < PANELS.length ? i + 1 : void 0,
+				children: /* @__PURE__ */ jsxs(Stack, {
+					gap: "s",
+					children: [
+						/* @__PURE__ */ jsx(Text, {
+							variant: "body-s",
+							tone: "secondary",
+							align: "center",
+							children: p.kicker
+						}),
+						/* @__PURE__ */ jsx(Text, {
+							as: "h3",
+							variant: "title-m",
+							align: "center",
+							wrap: "balance",
+							children: p.title
+						}),
+						/* @__PURE__ */ jsx(Text, {
+							variant: "body-l",
+							tone: "secondary",
+							align: "center",
+							wrap: "pretty",
+							children: p.body
+						})
+					]
+				})
+			}, p.title)) })
+		})]
+	});
+}
+var CHAIN = [
+	"Pedir",
+	"Diseñar",
+	"Construir",
+	"Revisar",
+	"Publicar"
+];
+/** A diagram that lights up in three layers: the chain, a note, and the chain with two highlights. */
+function LayeredDiagram() {
+	return /* @__PURE__ */ jsxs(Schema, {
+		viewBox: "0 0 2560 820",
+		title: "Una cadena de cinco pasos, antes y ahora",
+		description: "Arriba, la cadena de antes: pedir, diseñar, construir, revisar y publicar. Una nota explica el cambio. Abajo, la misma cadena con el primer y el último paso destacados y una píldora sobre el final.",
+		data: true,
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("marker", {
+				id: "plantilla-flecha",
+				viewBox: "0 0 12 12",
+				refX: "10",
+				refY: "6",
+				markerWidth: "12",
+				markerHeight: "12",
+				orient: "auto",
+				children: /* @__PURE__ */ jsx("path", {
+					className: schema.arrowhead,
+					d: "M2 2 L10 6 L2 10.5"
+				})
+			}) }),
+			["node", "highlighted"].map((kind, row) => /* @__PURE__ */ jsxs(SchemaLayer, {
+				step: row === 0 ? 0 : 2,
+				label: row === 0 ? "Antes: una cadena de cinco pasos" : "Ahora: la misma cadena, con dos pasos destacados",
+				children: [/* @__PURE__ */ jsx("text", {
+					className: schema.title,
+					x: 300,
+					y: row === 0 ? 200 : 600,
+					children: row === 0 ? "Antes" : "Ahora"
+				}), CHAIN.map((name, i) => {
+					const x = 300 + i * 420;
+					const y = row === 0 ? 240 : 640;
+					const strong = row === 1 && (i === 0 || i === CHAIN.length - 1);
+					return /* @__PURE__ */ jsxs("g", { children: [
+						/* @__PURE__ */ jsx("rect", {
+							className: schema[strong ? "highlighted" : "node"],
+							x,
+							y,
+							width: 300,
+							height: 90,
+							rx: 12
+						}),
+						/* @__PURE__ */ jsx("text", {
+							className: schema.nodeText,
+							x: x + 150,
+							y: y + 56,
+							textAnchor: "middle",
+							children: name
+						}),
+						i < CHAIN.length - 1 ? /* @__PURE__ */ jsx("path", {
+							className: schema.line,
+							d: `M${x + 310},${y + 45} L${x + 410},${y + 45}`,
+							markerEnd: "url(#plantilla-flecha)"
+						}) : null
+					] }, name);
+				})]
+			}, kind)),
+			/* @__PURE__ */ jsxs(SchemaLayer, {
+				step: 1,
+				label: "Una nota que explica el cambio",
+				children: [/* @__PURE__ */ jsx("path", {
+					className: schema.lineDashed,
+					d: "M870,350 L870,560",
+					markerEnd: "url(#plantilla-flecha)"
+				}), /* @__PURE__ */ jsx("text", {
+					className: schema.noteText,
+					x: 910,
+					y: 470,
+					children: "Una nota que explica el cambio."
+				})]
+			}),
+			/* @__PURE__ */ jsxs(SchemaLayer, {
+				step: 2,
+				children: [/* @__PURE__ */ jsx("rect", {
+					className: schema.pill,
+					x: 1980,
+					y: 560,
+					width: 220,
+					height: 50,
+					rx: 25
+				}), /* @__PURE__ */ jsx("text", {
+					className: schema.pillText,
+					x: 2090,
+					y: 594,
+					textAnchor: "middle",
+					children: "píldora"
+				})]
+			})
+		]
+	});
+}
+var SERIES = [
+	62,
+	58,
+	66,
+	61,
+	70,
+	64,
+	72,
+	69
+];
+var ACCENT = [
+	48,
+	52,
+	50,
+	57,
+	63,
+	68,
+	74,
+	79
+];
+var x = (i) => 260 + i * 300;
+var y = (v) => 720 - (v - 40) / 40 * 560;
+var path = (vals) => vals.map((v, i) => `${i ? "L" : "M"}${x(i)},${y(v)}`).join(" ");
+/** A two-series line chart drawn with the Schema vocabulary: gray context, one yellow series. */
+function LineChart() {
+	return /* @__PURE__ */ jsxs(Schema, {
+		viewBox: "0 0 2560 820",
+		title: "Evolución de dos series en ocho entregas",
+		description: "La serie de contexto, en gris, se mueve entre el 58 y el 72 %. La serie destacada, en amarillo, sube del 48 al 79 % y supera a la otra desde la quinta entrega.",
+		data: true,
+		children: [
+			[
+				40,
+				50,
+				60,
+				70,
+				80
+			].map((t) => /* @__PURE__ */ jsxs("g", { children: [/* @__PURE__ */ jsx("path", {
+				className: schema.lineDashed,
+				d: `M${x(0)},${y(t)} L${x(7)},${y(t)}`
+			}), /* @__PURE__ */ jsxs("text", {
+				className: schema.label,
+				x: x(0) - 40,
+				y: y(t) + 10,
+				textAnchor: "end",
+				children: [t, " %"]
+			})] }, t)),
+			SERIES.map((_, i) => /* @__PURE__ */ jsxs("text", {
+				className: schema.label,
+				x: x(i),
+				y: 790,
+				textAnchor: "middle",
+				children: ["#", i + 1]
+			}, i)),
+			/* @__PURE__ */ jsx("path", {
+				className: schema.series,
+				d: path(SERIES)
+			}),
+			/* @__PURE__ */ jsx("path", {
+				className: schema.accent,
+				d: path(ACCENT)
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				className: schema.accentDot,
+				cx: x(0),
+				cy: y(ACCENT[0]),
+				r: 12
+			}),
+			/* @__PURE__ */ jsx("circle", {
+				className: schema.accentDot,
+				cx: x(7),
+				cy: y(ACCENT[7]),
+				r: 12
+			}),
+			/* @__PURE__ */ jsx("text", {
+				className: schema.noteText,
+				x: x(7) + 40,
+				y: y(ACCENT[7]) + 10,
+				children: "79 %"
+			}),
+			/* @__PURE__ */ jsx("text", {
+				className: schema.noteText,
+				x: x(7) + 40,
+				y: y(SERIES[7]) + 10,
+				children: "69 %"
+			})
+		]
+	});
+}
+var SCREEN_ALT = "Panel de una aplicación de ejemplo: barra superior, menú lateral, tres tarjetas con cifras y una gráfica de línea que sube.";
+/** TalkTemplate is a whole talk built only with the catalog: every stop the system can make. */
+function TalkTemplate({ defaultTheme = "dark" }) {
+	return /* @__PURE__ */ jsxs(Deck, {
+		items: ITEMS,
+		footer: FOOTER,
+		storageKey: "",
+		defaultTheme,
+		children: [
+			/* @__PURE__ */ jsx(Cover, {
+				title: ["El título de la charla", "en dos o tres líneas"],
+				question: "¿La pregunta que abre la charla, en una frase?",
+				event: "Nombre del evento · marzo 2026",
+				client: {
+					light: logo_540_portada_claro_default,
+					dark: logo_540_portada_oscuro_default,
+					alt: "540"
+				},
+				photo: {
+					src: charla_fachada_default,
+					alt: "Fachada de un edificio con la luz de la tarde"
+				}
+			}),
+			/* @__PURE__ */ jsx(BlockTitle, {
+				id: "contar",
+				ordinal: "01",
+				title: "Contar: frases, historias y citas",
+				photo: {
+					src: charla_pintura_default,
+					alt: "Detalle de una pared con pintura desconchada en varias capas"
+				}
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "contexto",
+				children: /* @__PURE__ */ jsxs(Stack, { children: [
+					/* @__PURE__ */ jsx(SectionHeader, {
+						title: "Un título con dos frases de entrada",
+						description: "La entradilla presenta la parada en una o dos frases. Lo demás va en el cuerpo.",
+						align: "center"
+					}),
+					/* @__PURE__ */ jsxs(Text, {
+						variant: "body-l",
+						align: "center",
+						wrap: "pretty",
+						measure: "half",
+						children: [
+							"Un párrafo de cuerpo, de tres frases como máximo, con ",
+							/* @__PURE__ */ jsx("strong", { children: "la parte que importa" }),
+							" en negrita. Va a media retícula. Así se lee en una sala."
+						]
+					}),
+					/* @__PURE__ */ jsx(Text, {
+						variant: "body-l",
+						tone: "secondary",
+						align: "center",
+						wrap: "pretty",
+						measure: "half",
+						children: "Una segunda frase en gris, que matiza la anterior."
+					})
+				] })
+			}),
+			/* @__PURE__ */ jsx(Statements, {
+				id: "tesis",
+				sentences: [
+					"La primera tesis, en una frase que se dice.",
+					"La segunda tesis, igual de corta.",
+					"La tercera tesis, que cierra la idea."
+				]
+			}),
+			/* @__PURE__ */ jsx(Story, {
+				id: "historia",
+				title: "El título de una historia",
+				paragraphs: ["El primer párrafo cuenta lo que pasó, en dos frases. En gris y a media retícula.", "El segundo párrafo cuenta qué se aprendió. También en dos frases."],
+				bridge: "Y una frase puente que lleva a la siguiente parada."
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "pila",
+				children: /* @__PURE__ */ jsx(Stack, {
+					gap: "l",
+					children: [
+						"Una frase que se enciende al llegar al centro.",
+						"Otra frase, que espera su turno.",
+						"Y la tercera, que cierra la pila."
+					].map((f) => /* @__PURE__ */ jsx(Spotlight, { children: /* @__PURE__ */ jsx(Text, {
+						variant: "statement",
+						align: "center",
+						wrap: "balance",
+						measure: "wide",
+						children: f
+					}) }, f))
+				})
+			}),
+			/* @__PURE__ */ jsx(Story, {
+				id: "objecion",
+				kind: "objection",
+				title: "«Una objeción que suele salir en la sala, entre comillas.»",
+				paragraphs: ["La respuesta a la objeción, en dos frases. Sin ponerse a la defensiva."]
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "listas",
+				children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(SectionHeader, {
+					title: "Tres listas para tres a cinco líneas",
+					description: "Una lista simple, una con flechas y una de problemas con su etiqueta.",
+					align: "center"
+				}), /* @__PURE__ */ jsxs(Grid, { children: [
+					/* @__PURE__ */ jsx(GridItem, {
+						span: 4,
+						children: /* @__PURE__ */ jsx(SimpleList, { items: [
+							"Un primer ítem corto.",
+							/* @__PURE__ */ jsxs(Fragment, { children: [
+								"Un segundo con ",
+								/* @__PURE__ */ jsx("strong", { children: "lo que importa" }),
+								"."
+							] }),
+							"Y un tercero."
+						] })
+					}),
+					/* @__PURE__ */ jsx(GridItem, {
+						span: 4,
+						children: /* @__PURE__ */ jsx(ArrowList, { items: [
+							"Lo que se hace primero.",
+							"Lo que viene después.",
+							"Lo que queda al final."
+						] })
+					}),
+					/* @__PURE__ */ jsx(GridItem, {
+						span: 4,
+						children: /* @__PURE__ */ jsx(ProblemList, { items: [
+							{
+								label: "Primer límite",
+								text: "Lo que pasa al llegar a él."
+							},
+							{
+								label: "Segundo límite",
+								text: /* @__PURE__ */ jsxs(Fragment, { children: [
+									"Con ",
+									/* @__PURE__ */ jsx("strong", { children: "la cifra" }),
+									" que lo mide."
+								] })
+							},
+							{
+								label: "Tercer límite",
+								text: "Y una frase más."
+							}
+						] })
+					})
+				] })] })
+			}),
+			/* @__PURE__ */ jsx(Quote, {
+				id: "cita",
+				sentence: "«Una cita corta de alguien que lo dijo mejor que nosotros.»",
+				author: "Nombre Apellido, su rol"
+			}),
+			/* @__PURE__ */ jsx(BlockTitle, {
+				id: "comparar",
+				ordinal: "02",
+				title: "Comparar: tarjetas, equipos y casos",
+				photo: {
+					src: charla_teclado_default,
+					alt: "Teclado de un portátil con luz azul, desenfocado"
+				}
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "antes-ahora",
+				children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(SectionHeader, {
+					title: "Antes y ahora, en dos columnas",
+					description: "Dos tarjetas comparables con una lista de flechas dentro.",
+					align: "center"
+				}), /* @__PURE__ */ jsxs(Grid, { children: [/* @__PURE__ */ jsx(GridItem, {
+					span: 6,
+					children: /* @__PURE__ */ jsx(Card, {
+						title: "Antes",
+						align: "center",
+						children: /* @__PURE__ */ jsx(ArrowList, { items: [
+							"Lo primero que se hacía.",
+							"Lo segundo.",
+							"Y lo tercero."
+						] })
+					})
+				}), /* @__PURE__ */ jsx(GridItem, {
+					span: 6,
+					children: /* @__PURE__ */ jsx(Card, {
+						title: "Ahora",
+						align: "center",
+						after: "Lo que cambió, en una frase.",
+						children: /* @__PURE__ */ jsx(ArrowList, { items: [
+							"Lo que se hace ahora.",
+							"Lo que ya no hace falta.",
+							"Lo que se ganó."
+						] })
+					})
+				})] })] })
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "tres-tarjetas",
+				children: /* @__PURE__ */ jsx(Steps, {
+					total: 3,
+					children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(SectionHeader, {
+						title: "Tres tarjetas que entran una a una",
+						description: "Cada flecha enciende la siguiente. El pie lleva la fuente o el comando.",
+						align: "center"
+					}), /* @__PURE__ */ jsx(Grid, { children: [
+						1,
+						2,
+						3
+					].map((n) => /* @__PURE__ */ jsx(GridItem, {
+						span: 4,
+						children: /* @__PURE__ */ jsx(Step, {
+							from: n,
+							children: /* @__PURE__ */ jsx(Card, {
+								kicker: `Antetítulo ${n}`,
+								title: `Tarjeta ${n}`,
+								align: "center",
+								footer: /* @__PURE__ */ jsxs(Text, {
+									as: "span",
+									variant: "body-s",
+									mono: true,
+									children: ["/comando-", n]
+								}),
+								children: "Dos frases sobre esta tarjeta. Qué hace y para quién."
+							})
+						})
+					}, n)) })] })
+				})
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "cuatro-tarjetas",
+				children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(SectionHeader, {
+					title: "Cuatro cosas comparables",
+					description: "El máximo por fila: cuatro tarjetas con su número.",
+					align: "center"
+				}), /* @__PURE__ */ jsx(Grid, { children: [
+					"Primera",
+					"Segunda",
+					"Tercera",
+					"Cuarta"
+				].map((t, i) => /* @__PURE__ */ jsx(GridItem, {
+					span: 3,
+					children: /* @__PURE__ */ jsx(Card, {
+						ordinal: `0${i + 1}`,
+						title: t,
+						align: "center",
+						children: "Dos frases sobre lo que hace esta pieza."
+					})
+				}, t)) })] })
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "cinco-piezas",
+				children: /* @__PURE__ */ jsx(Steps, {
+					total: 6,
+					children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsxs(PanelStack, { children: [/* @__PURE__ */ jsx(Step, {
+						from: 0,
+						to: 6,
+						children: /* @__PURE__ */ jsx(SectionHeader, {
+							title: "Cinco piezas en una fila",
+							description: "Entran una a una. En el último paso se destaca la primera.",
+							align: "center"
+						})
+					}), /* @__PURE__ */ jsx(Step, {
+						from: 6,
+						children: /* @__PURE__ */ jsx(SectionHeader, {
+							title: "Y la que importa es esta",
+							description: "Las demás se apagan para señalarla.",
+							align: "center"
+						})
+					})] }), /* @__PURE__ */ jsx(ContextCards, {})] })
+				})
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "cinco-centradas",
+				children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(SectionHeader, {
+					title: "Cinco cosas, tres arriba y dos abajo",
+					align: "center"
+				}), /* @__PURE__ */ jsx(Grid, {
+					layout: "fiveCentered",
+					children: [
+						"Primera",
+						"Segunda",
+						"Tercera",
+						"Cuarta",
+						"Quinta"
+					].map((t, i) => /* @__PURE__ */ jsx(GridItem, {
+						span: 4,
+						children: /* @__PURE__ */ jsx(Card, {
+							ordinal: `0${i + 1}`,
+							title: t,
+							align: "center",
+							children: "Una frase sobre esta pieza."
+						})
+					}, t))
+				})] })
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "seis-pasos",
+				children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(SectionHeader, {
+					title: "Seis piezas numeradas, en dos filas",
+					align: "center"
+				}), /* @__PURE__ */ jsx(Grid, { children: [
+					"Uno",
+					"Dos",
+					"Tres",
+					"Cuatro",
+					"Cinco",
+					"Seis"
+				].map((t, i) => /* @__PURE__ */ jsx(GridItem, {
+					span: 4,
+					children: /* @__PURE__ */ jsxs(Card, {
+						kicker: `0${i + 1}`,
+						title: `Paso ${t.toLowerCase()}`,
+						align: "center",
+						children: [
+							"Lo que pasa en este paso, con un ",
+							/* @__PURE__ */ jsx(Text, {
+								as: "span",
+								variant: "body-m",
+								mono: true,
+								children: "comando"
+							}),
+							" si hace falta."
+						]
+					})
+				}, t)) })] })
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "equipo",
+				children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(SectionHeader, {
+					title: "Quiénes somos",
+					description: "El mismo encuadre para todas las personas, con su nombre y su rol.",
+					align: "center"
+				}), /* @__PURE__ */ jsx(Grid, { children: [{
+					name: "Nombre Apellido",
+					role: "Su rol en el equipo"
+				}, {
+					name: "Otro Nombre",
+					role: "Otro rol"
+				}].map((p) => /* @__PURE__ */ jsx(GridItem, {
+					span: 6,
+					children: /* @__PURE__ */ jsx(Card, {
+						portrait: {
+							src: retrato_default,
+							alt: `Retrato de ${p.name}`
+						},
+						kicker: p.role,
+						title: p.name,
+						align: "center",
+						children: "Dos frases sobre lo que hace esta persona en el proyecto."
+					})
+				}, p.name)) })] })
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "fichas",
+				children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(SectionHeader, {
+					title: "El equipo, en fichas",
+					description: "La alternativa con retrato grande: tres por fila.",
+					align: "center"
+				}), /* @__PURE__ */ jsx(Grid, { children: [
+					"Primera persona",
+					"Segunda persona",
+					"Tercera persona"
+				].map((n) => /* @__PURE__ */ jsx(GridItem, {
+					span: 4,
+					children: /* @__PURE__ */ jsx(TeamMember, {
+						src: retrato_default,
+						name: n,
+						role: "Su rol",
+						bio: "Dos líneas sobre lo que hace esta persona.",
+						align: "center"
+					})
+				}, n)) })] })
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "bandas",
+				children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(SectionHeader, {
+					title: "Apartados en bandas",
+					description: "Una lista de bandas a todo el ancho, con la raya entre ellas.",
+					align: "center"
+				}), /* @__PURE__ */ jsx(CardList, { children: [
+					"Primer apartado",
+					"Segundo apartado",
+					"Tercer apartado"
+				].map((t, i) => /* @__PURE__ */ jsx(Card, {
+					variant: "row",
+					align: "center",
+					ordinal: `0${i + 1}`,
+					title: t,
+					children: "Dos o tres frases sobre lo que hace este apartado."
+				}, t)) })] })
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "casos",
+				children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(SectionHeader, {
+					title: "Casos, solo en una charla de proyectos",
+					align: "center"
+				}), /* @__PURE__ */ jsxs(Grid, { children: [/* @__PURE__ */ jsx(GridItem, {
+					span: 6,
+					children: /* @__PURE__ */ jsx(CaseItem, {
+						src: charla_david_default,
+						title: "Nombre del primer caso",
+						description: "Una frase sobre lo que fue el caso."
+					})
+				}), /* @__PURE__ */ jsx(GridItem, {
+					span: 6,
+					children: /* @__PURE__ */ jsx(CaseItem, {
+						src: charla_escultura_default,
+						title: "Nombre del segundo caso",
+						description: "Otra frase sobre este caso."
+					})
+				})] })] })
+			}),
+			/* @__PURE__ */ jsx(Punchline, {
+				placement: "standalone",
+				id: "remate-comparar",
+				sentence: "Un remate: la frase que se lleva la sala.",
+				transition: "Y una transición que lleva al bloque siguiente."
+			}),
+			/* @__PURE__ */ jsx(BlockTitle, {
+				id: "procesos",
+				ordinal: "03",
+				title: "Procesos: pasos, cronologías y ciclos",
+				photo: {
+					src: charla_placa_default,
+					alt: "Placa base vista de cerca, con dos ventiladores de cobre"
+				}
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "flujo",
+				children: /* @__PURE__ */ jsxs(Stack, { children: [
+					/* @__PURE__ */ jsx(SectionHeader, {
+						title: "Pasos en fila",
+						description: "Una cadena de pasos con el que importa en negativo.",
+						align: "center"
+					}),
+					/* @__PURE__ */ jsx(Flow, {
+						label: "Pasos del proceso",
+						steps: [
+							{ label: "Pedir" },
+							{ label: "Diseñar" },
+							{
+								label: "Construir",
+								highlighted: true
+							},
+							{ label: "Revisar" },
+							{ label: "Publicar" }
+						]
+					}),
+					/* @__PURE__ */ jsx(Punchline, {
+						sentence: "Un remate dentro de la parada.",
+						transition: "Debajo de una raya, al final."
+					})
+				] })
+			}),
+			/* @__PURE__ */ jsx(Timeline, {
+				id: "recorrido",
+				title: "Una cronología de cuatro pasos",
+				description: "Cada paso es una parada. El aviso pone el punto en rojo; el zoom abre una hoja.",
+				steps: [
+					{
+						kicker: "Mes uno",
+						title: "Primer hito",
+						body: "Lo que pasó en el primer mes, en una frase."
+					},
+					{
+						kicker: "El problema",
+						title: "Algo que no funcionaba como debía.",
+						alert: true
+					},
+					{
+						kicker: "Mes tres",
+						title: "Tercer hito",
+						body: "Lo que cambió después.",
+						extra: /* @__PURE__ */ jsx(Flow, {
+							label: "El cambio",
+							steps: [{
+								label: "La pieza nueva",
+								highlighted: true
+							}]
+						})
+					},
+					{
+						kicker: "Zoom · mes cuatro",
+						title: "Un hito con detalle",
+						body: "Pulsa → para abrir la hoja y otra vez para cerrarla.",
+						extra: /* @__PURE__ */ jsx(Steps, {
+							total: 2,
+							children: /* @__PURE__ */ jsx(Step, {
+								from: 1,
+								to: 2,
+								children: /* @__PURE__ */ jsx(Sheet, {
+									kicker: "Zoom · mes cuatro",
+									title: "El detalle ampliado",
+									description: "Una frase que dice qué se amplía.",
+									children: /* @__PURE__ */ jsxs(Grid, { children: [/* @__PURE__ */ jsx(GridItem, {
+										span: 6,
+										children: /* @__PURE__ */ jsx(Card, {
+											title: "Una tarjeta dentro de la hoja",
+											children: "Dos frases que explican el detalle."
+										})
+									}), /* @__PURE__ */ jsx(GridItem, {
+										span: 6,
+										children: /* @__PURE__ */ jsxs(Stack, {
+											gap: "s",
+											children: [/* @__PURE__ */ jsx(Question, {
+												question: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("strong", { children: "Q1 · ¿Una pregunta del zoom?" }), " Con su matiz."] }),
+												answer: "La respuesta, en una frase."
+											}), /* @__PURE__ */ jsx(Question, {
+												question: /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsx("strong", { children: "Q2 · ¿Otra pregunta?" }) }),
+												answer: "Otra respuesta corta."
+											})]
+										})
+									})] })
+								})
+							})
+						})
+					}
+				]
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "tramo",
+				children: /* @__PURE__ */ jsx(Steps, {
+					total: 3,
+					children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(SectionHeader, {
+						title: "Un tramo de tiempo que se llena",
+						description: "La barra con sus hitos, que se encienden paso a paso.",
+						align: "center"
+					}), /* @__PURE__ */ jsx(TimeBar, {})] })
+				})
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "ciclo",
+				children: /* @__PURE__ */ jsx(Steps, {
+					total: 4,
+					children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(SectionHeader, {
+						title: "Un ciclo que avanza",
+						description: "El anillo recorre las fases; el panel cuenta cada una.",
+						align: "center"
+					}), /* @__PURE__ */ jsx(CycleWithPanel, {})] })
+				})
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "esquema",
+				children: /* @__PURE__ */ jsxs(Steps, {
+					total: 2,
+					children: [
+						/* @__PURE__ */ jsx(SectionHeader, {
+							title: "Un diagrama por capas",
+							description: "Cada flecha enciende una capa; lo demás queda tenue.",
+							align: "center"
+						}),
+						/* @__PURE__ */ jsx(SchemaFrame, {
+							caption: "Un pie que explica el dibujo, a media retícula.",
+							children: /* @__PURE__ */ jsx(LayeredDiagram, {})
+						}),
+						/* @__PURE__ */ jsx(SchemaVoice, { labels: [
+							"Antes: una cadena de cinco pasos",
+							"Una nota que explica el cambio",
+							"Ahora: la misma cadena, con dos pasos destacados"
+						] })
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "latido",
+				children: /* @__PURE__ */ jsxs(Stack, {
+					gap: "m",
+					children: [
+						/* @__PURE__ */ jsx(SectionHeader, {
+							title: "Algo que late sin parar",
+							align: "center"
+						}),
+						/* @__PURE__ */ jsx(Heartbeat, {}),
+						/* @__PURE__ */ jsx(Text, {
+							variant: "body-l",
+							tone: "secondary",
+							align: "center",
+							wrap: "pretty",
+							measure: "half",
+							children: "Una frase que explica qué proceso late aquí, cada cuánto y para qué."
+						})
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx(BlockTitle, {
+				id: "datos",
+				ordinal: "04",
+				title: "Datos: cifras, barras y líneas",
+				photo: {
+					src: charla_escultura_default,
+					alt: "Escultura blanca sentada ante una pared de piedra con una ventana hexagonal"
+				}
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "cifras",
+				children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(SectionHeader, {
+					title: "Cuatro cifras que suben",
+					description: "Cada una con lo que mide y su variación. Debajo, de dónde salen.",
+					align: "center"
+				}), /* @__PURE__ */ jsxs(Stack, {
+					gap: "s",
+					children: [/* @__PURE__ */ jsxs(Grid, { children: [
+						/* @__PURE__ */ jsx(GridItem, {
+							span: 3,
+							children: /* @__PURE__ */ jsx(Metric, {
+								value: /* @__PURE__ */ jsx(Count, { value: 1240 }),
+								label: "Lo que mide la primera cifra",
+								delta: "+18 % desde el inicio"
+							})
+						}),
+						/* @__PURE__ */ jsx(GridItem, {
+							span: 3,
+							children: /* @__PURE__ */ jsx(Metric, {
+								value: /* @__PURE__ */ jsx(Count, {
+									value: 45.9,
+									decimals: 1,
+									suffix: " %"
+								}),
+								label: "Lo que mide la segunda",
+								delta: "+6 puntos"
+							})
+						}),
+						/* @__PURE__ */ jsx(GridItem, {
+							span: 3,
+							children: /* @__PURE__ */ jsx(Metric, {
+								value: /* @__PURE__ */ jsx(Count, { value: 79592 }),
+								label: "Lo que mide la tercera"
+							})
+						}),
+						/* @__PURE__ */ jsx(GridItem, {
+							span: 3,
+							children: /* @__PURE__ */ jsx(Metric, {
+								value: /* @__PURE__ */ jsx(Count, {
+									value: .76,
+									decimals: 2,
+									suffix: " %"
+								}),
+								label: "Lo que mide la cuarta",
+								delta: "−89 % desde el 7,06 %"
+							})
+						})
+					] }), /* @__PURE__ */ jsx(MetricNote, { children: "Qué se midió, cuándo y cómo: la fuente de las cuatro cifras." })]
+				})] })
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "barras",
+				children: /* @__PURE__ */ jsx(Steps, {
+					total: 1,
+					children: /* @__PURE__ */ jsxs(Stack, { children: [
+						/* @__PURE__ */ jsx(SectionHeader, {
+							title: "Dos rankings lado a lado",
+							description: "Con el mismo máximo, para que se comparen. En el paso siguiente, el reparto.",
+							align: "center"
+						}),
+						/* @__PURE__ */ jsxs(Grid, { children: [/* @__PURE__ */ jsx(GridItem, {
+							span: 6,
+							children: /* @__PURE__ */ jsx(Bars, {
+								label: "Primera medida por categoría",
+								max: 500,
+								rows: [
+									{
+										label: "Categoría uno",
+										value: 412
+									},
+									{
+										label: "Categoría dos",
+										value: 268
+									},
+									{
+										label: "Categoría tres",
+										value: 154
+									},
+									{
+										label: "El resto",
+										value: 61,
+										tone: "context"
+									}
+								]
+							})
+						}), /* @__PURE__ */ jsx(GridItem, {
+							span: 6,
+							children: /* @__PURE__ */ jsx(Bars, {
+								label: "Segunda medida por categoría",
+								max: 500,
+								rows: [
+									{
+										label: "Categoría uno",
+										value: 330
+									},
+									{
+										label: "Categoría dos",
+										value: 295
+									},
+									{
+										label: "Categoría tres",
+										value: 120
+									},
+									{
+										label: "El resto",
+										value: 84,
+										tone: "context"
+									}
+								]
+							})
+						})] }),
+						/* @__PURE__ */ jsx(Step, {
+							from: 1,
+							children: /* @__PURE__ */ jsxs(Stack, {
+								gap: "m",
+								children: [/* @__PURE__ */ jsx(Share, {
+									label: "Reparto entre la categoría uno y el resto",
+									segments: [{
+										label: "Categoría uno",
+										value: 64
+									}, {
+										label: "El resto",
+										value: 36
+									}]
+								}), /* @__PURE__ */ jsxs(Text, {
+									variant: "body-l",
+									align: "center",
+									wrap: "pretty",
+									measure: "half",
+									children: [
+										"La frase que lo resume: ",
+										/* @__PURE__ */ jsx("strong", { children: "dos de cada tres" }),
+										" vienen de la misma categoría."
+									]
+								})]
+							})
+						})
+					] })
+				})
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "tabla",
+				children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(SectionHeader, {
+					title: "Una tabla de barras con detalle",
+					description: "La fila que importa va en amarillo; es la única de la gráfica.",
+					align: "center"
+				}), /* @__PURE__ */ jsx(Bars, {
+					label: "Piezas por vistas",
+					header: {
+						label: "Pieza",
+						value: "Vistas",
+						detail: "Interacción · Altas"
+					},
+					rows: [
+						{
+							label: "#1 Título de la primera pieza",
+							value: 2140,
+							detail: "45,9 % · 12 altas",
+							tone: "accent"
+						},
+						{
+							label: "#2 Título de la segunda",
+							value: 1630,
+							detail: "38,2 % · 8 altas"
+						},
+						{
+							label: "#3 Título de la tercera",
+							value: 1210,
+							detail: "41,0 % · 5 altas"
+						},
+						{
+							label: "#4 Título de la cuarta",
+							value: 860,
+							detail: "29,4 % · 2 altas",
+							tone: "context"
+						}
+					]
+				})] })
+			}),
+			/* @__PURE__ */ jsxs(Slide, {
+				id: "linea",
+				children: [/* @__PURE__ */ jsx(SectionHeader, {
+					title: "Una evolución en el tiempo",
+					description: "La línea de contexto en gris y la que cuenta la historia en amarillo.",
+					align: "center"
+				}), /* @__PURE__ */ jsx(SchemaFrame, {
+					caption: "Porcentaje por entrega, de la primera a la octava.",
+					children: /* @__PURE__ */ jsx(LineChart, {})
+				})]
+			}),
+			/* @__PURE__ */ jsx(BlockTitle, {
+				id: "pantallas",
+				ordinal: "05",
+				title: "Pantallas, herramientas y preguntas",
+				photo: {
+					src: charla_david_default,
+					alt: "Detalle de una escultura clásica de mármol blanco"
+				}
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "captura",
+				children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(SectionHeader, {
+					title: "Una pantalla",
+					description: "Una frase que dice qué se ve en la captura.",
+					align: "center"
+				}), /* @__PURE__ */ jsx(Screenshot, {
+					src: captura_default,
+					alt: SCREEN_ALT,
+					width: 1600,
+					height: 1e3
+				})] })
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "herramientas",
+				children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(SectionHeader, {
+					title: "Las herramientas que se quedan",
+					description: "Cuatro por fila, con el logotipo a la misma altura óptica.",
+					align: "center"
+				}), /* @__PURE__ */ jsx(Tools, { tools: [
+					"Herramienta uno",
+					"Herramienta dos",
+					"Herramienta tres",
+					"Herramienta cuatro"
+				].map((name) => ({
+					src: logo_540_claro_default,
+					name,
+					invertInDark: true
+				})) })] })
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "descartadas",
+				children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(SectionHeader, {
+					title: "Y las que se descartaron",
+					align: "center"
+				}), /* @__PURE__ */ jsx(Tools, {
+					columns: 3,
+					tools: [
+						{
+							src: logo_540_claro_default,
+							invertInDark: true,
+							name: "Herramienta cinco",
+							verdict: "Por qué se descartó, en una línea."
+						},
+						{
+							src: logo_540_claro_default,
+							invertInDark: true,
+							name: "Herramienta seis",
+							verdict: "Otra razón corta."
+						},
+						{
+							src: logo_540_claro_default,
+							invertInDark: true,
+							name: "Herramienta siete",
+							verdict: "Y una tercera."
+						}
+					]
+				})] })
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "clientes",
+				children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(SectionHeader, {
+					title: "Con quién hemos trabajado",
+					description: "Los logotipos pasan solos; solo con permiso de cada cliente.",
+					align: "center"
+				}), /* @__PURE__ */ jsx(LogoCarousel, {
+					label: "Clientes de ejemplo",
+					logos: [
+						cliente_1_default,
+						cliente_2_default,
+						cliente_3_default,
+						cliente_4_default,
+						cliente_5_default,
+						cliente_6_default,
+						cliente_7_default,
+						cliente_8_default,
+						cliente_9_default
+					].map((src, i) => ({
+						src,
+						name: `Cliente de ejemplo ${i + 1}`
+					}))
+				})] })
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "tira",
+				children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(SectionHeader, {
+					title: "Una tira de palabras que desfila",
+					align: "center"
+				}), /* @__PURE__ */ jsx(Marquee, { items: [
+					"Palabra uno ·",
+					"Palabra dos ·",
+					"Palabra tres ·",
+					"Palabra cuatro ·",
+					"Palabra cinco ·",
+					"Palabra seis ·"
+				] })] })
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "preguntas",
+				children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(SectionHeader, {
+					title: "Preguntas con su respuesta",
+					align: "center"
+				}), /* @__PURE__ */ jsx(Stack, {
+					gap: "s",
+					measure: "half",
+					children: [
+						"¿La primera pregunta?",
+						"¿La segunda pregunta?",
+						"¿La tercera pregunta?"
+					].map((q, i) => /* @__PURE__ */ jsx(Question, {
+						question: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("strong", { children: [
+							"Q",
+							i + 1,
+							" · ",
+							q
+						] }), " Un matiz que la concreta."] }),
+						answer: "La respuesta, en una frase."
+					}, q))
+				})] })
+			}),
+			/* @__PURE__ */ jsx(Slide, {
+				id: "contacto",
+				children: /* @__PURE__ */ jsxs(Stack, { children: [/* @__PURE__ */ jsx(SectionHeader, {
+					title: "¿Hablamos?",
+					description: "Una parada final de contacto: el único sitio de la charla con formulario.",
+					align: "center"
+				}), /* @__PURE__ */ jsx(Stack, {
+					measure: "half",
+					children: /* @__PURE__ */ jsxs(Form, {
+						submitLabel: "Enviar mensaje",
+						align: "center",
+						children: [
+							/* @__PURE__ */ jsx(Field, {
+								id: "plantilla-nombre",
+								label: "Nombre",
+								autoComplete: "name"
+							}),
+							/* @__PURE__ */ jsx(Field, {
+								id: "plantilla-correo",
+								label: "Correo electrónico",
+								type: "email",
+								autoComplete: "email"
+							}),
+							/* @__PURE__ */ jsx(Field, {
+								id: "plantilla-mensaje",
+								label: "Mensaje",
+								multiline: true
+							})
+						]
+					})
+				})] })
+			}),
+			/* @__PURE__ */ jsx(Closing, {
+				sentence: /* @__PURE__ */ jsxs(Fragment, { children: [
+					"La frase de cierre, ",
+					/* @__PURE__ */ jsx("strong", { children: "con el giro en negrita" }),
+					"."
+				] }),
+				body: ["Un primer párrafo de dos frases que recoge la charla. Sin resumirla entera.", "Un segundo párrafo que deja la puerta abierta."],
+				punchline: "La última línea, en menos de diez palabras."
+			})
+		]
+	});
+}
+/** The time bar fills with the step and lights its milestones one by one. */
+function TimeBar() {
+	const { current } = useSteps();
+	const step = Number.isFinite(current) ? Math.max(current, 0) : 3;
+	return /* @__PURE__ */ jsx(ProgressBar, {
+		label: "Tramo de tiempo de febrero a hoy",
+		value: (step + 1) / 4,
+		milestones: 3,
+		reached: step,
+		start: "Feb 2025",
+		end: "Hoy"
+	});
+}
+//#endregion
+export { TalkTemplate };