/* ============================================
   ZAA CAPITAL — Diseño editorial de las entradas (versión en blanco)
   Se aplica a cualquier bloque con clase .zaa-post dentro de una
   entrada. Colores y fuentes salen de tokens.css, así las entradas
   heredan el estilo del sitio. En el editor de WordPress solo va el
   HTML de la entrada, sin <style>. Toda la paleta está en los alias
   de .zaa-post: para volver a la versión oscura basta con cambiarlos.
   ============================================ */

.zaa-post {
	/* Alias locales: el HTML de las entradas puede seguir usándolos */
	--ink: var(--zaa-black);
	--muted: var(--zaa-gray-500);
	--muted2: var(--zaa-gray-700);
	--text2: var(--zaa-gray-700);   /* listas, tablas, cajas */
	--line: var(--zaa-line);
	--line2: var(--zaa-line-strong);
	--panel: var(--zaa-gray-100);
	--bg: var(--zaa-white);
	--th-bg: rgba(0, 0, 0, .03);

	/* Mismo ancho que el header */
	max-width: var(--zaa-container) !important;
	margin: 0 auto;
	padding: 46px 0 110px;
	color: var(--ink);
	background: transparent;
	font-family: var(--zaa-font-text);
	line-height: 1.78;
}
.zaa-post * { box-sizing: border-box; }
.zaa-post ::selection { background: var(--ink); color: var(--bg); }
.zaa-post a { color: var(--ink); text-decoration: none; }
.zaa-post strong { color: var(--ink); }
.zaa-post p { font-size: var(--zaa-fs-body); margin: 0 0 18px; text-align: left; }
.zaa-post ul,
.zaa-post ol { color: var(--text2); }
.zaa-post li { margin: 7px 0; }

/* Titulares */
.zaa-post h1,
.zaa-post h2,
.zaa-post h3,
.zaa-post h4,
.zaa-post h5,
.zaa-post h6 {
	font-family: var(--zaa-font-serif);
	color: var(--ink);
	background: none;
	border: 0;
	box-shadow: none;
	text-transform: none;
	text-align: left;
	letter-spacing: -.018em;
	line-height: 1.18;
}
.zaa-post h1 { font-size: clamp(42px, 5.2vw, 68px); font-weight: 500; margin: 0 0 22px; max-width: 890px; }
.zaa-post h2 { font-size: clamp(31px, 4vw, 44px); font-weight: 500; margin: 58px 0 18px; padding: 0; }
.zaa-post h3 { font-size: 21px; font-weight: 600; margin: 34px 0 11px; }

/* Etiquetas pequeñas en mayúsculas (antes JetBrains Mono) */
.zaa-post .zaa-post-meta,
.zaa-post .callout strong,
.zaa-meta-label,
.zaa-feature-visual .zaa-visual-caption,
.zaa-post-toc-head,
.zaa-post-toc a span,
.zaa-post .section-index,
.zaa-post th,
.zaa-post .principle-card .kicker,
.zaa-post .capital-node .num,
.zaa-post .zaa-tag,
.zaa-post .visual-kicker,
.zaa-post .visual-caption {
	font-family: var(--zaa-font-display);
	font-size: var(--zaa-fs-label);
	letter-spacing: 1.6px;
	text-transform: uppercase;
}

/* Cabecera de la entrada */
.zaa-post .zaa-post-hero { padding: 10px 0 0; }
.zaa-post .zaa-post-meta {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 0 16px;
	color: var(--muted2);
}
.zaa-post .zaa-post-meta span:not(:last-child)::after { content: " /"; opacity: .5; margin-left: 10px; }
.zaa-post .zaa-post-dek {
	max-width: 760px;
	font-size: 18px;
	line-height: 1.7;
	color: var(--text2);
	margin: 0;
}

/* Cajas destacadas */
.zaa-post .callout {
	margin: 28px 0 12px;
	padding: 16px 18px;
	border: 1px solid var(--line2);
	color: var(--text2);
}
.zaa-post .callout strong { display: block; margin-bottom: 6px; }

.zaa-post .principle-card {
	margin: 40px 0;
	padding: 27px 26px;
	border: 1px solid var(--line2);
	background: var(--panel);
}
.zaa-post .principle-card .kicker { color: var(--muted2); margin-bottom: 9px; }
.zaa-post .principle-card p {
	font-family: var(--zaa-font-serif);
	font-size: 18px;
	line-height: 1.55;
	color: var(--ink);
	margin: 0;
}

/* Barra de datos */
.zaa-meta-bar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 18px;
	margin: 40px 0 48px;
	padding: 23px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.zaa-meta-item { text-align: center; }
.zaa-meta-label { display: block; color: var(--muted); margin-bottom: 7px; }
.zaa-meta-value { display: block; color: var(--ink); font-family: var(--zaa-font-serif); font-size: 14px; }

/* Visual principal */
.zaa-feature-visual {
	margin: 50px 0 64px;
	padding: 30px 0 26px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.zaa-feature-visual .zaa-visual-caption { margin-top: 14px; color: var(--muted); }
.zaa-feature-visual svg { display: block; width: 100%; height: auto; }

/* Índice */
.zaa-post-toc {
	margin: 34px 0 56px;
	padding: 24px 0 8px;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.zaa-post-toc-head { color: var(--ink); margin-bottom: 14px; }
.zaa-post-toc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.zaa-post-toc a {
	display: flex;
	gap: 11px;
	align-items: baseline;
	padding: 9px 0;
	color: var(--text2);
	font-size: var(--zaa-fs-small);
	border-bottom: 1px solid var(--line);
}
.zaa-post-toc a:hover { color: var(--ink); }
.zaa-post-toc a span { color: var(--muted2); min-width: 22px; }

/* Capítulos */
.zaa-post-content .chapter { padding: 54px 0 8px; border-top: 1px solid var(--line); }
.zaa-post-content .chapter:first-child { border-top: 0; padding-top: 0; }
.zaa-post .chapter { background: transparent; }
.zaa-post .chapter * { max-width: 100%; }
.zaa-post .section-index {
	display: inline-block;
	margin: 0 0 4px;
	color: var(--ink);
	opacity: .55;
	font-weight: 700;
	letter-spacing: 3px;
	text-align: left;
}
.zaa-post .section-index:empty { display: none; }
.zaa-post .section-index + h2 { margin-top: 0; }

/* Tablas */
.zaa-post .table-wrap { overflow: auto; margin: 26px 0 30px; border: 1px solid var(--line); }
.zaa-post table { width: 100%; min-width: 680px; border-collapse: collapse; }
.zaa-post th,
.zaa-post td {
	padding: 13px 14px;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}
.zaa-post th { background: var(--th-bg); color: var(--ink); }
.zaa-post td { color: var(--text2); font-size: var(--zaa-fs-small); }
.zaa-post tr:last-child td { border-bottom: 0; }

/* Tarjetas visuales y notas */
.zaa-post .visual-card {
	margin: 32px 0 36px;
	padding: 22px 26px;
	overflow: hidden;
	border: 1px solid var(--line);
	background: var(--panel);
}
.zaa-post .visual-card svg { width: 100%; height: auto; display: block; }
.zaa-post .source-note {
	margin: 22px 0;
	padding: 6px 0 6px 14px;
	border-left: 1px solid var(--line2);
	color: var(--muted);
	font-size: var(--zaa-fs-label);
}
.zaa-post hr { border: 0; border-top: 1px solid var(--line); margin: 50px 0; }

/* Mapa de capital */
.zaa-post .capital-map { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 34px 0; }
.zaa-post .capital-node { border: 1px solid var(--line); padding: 18px 14px; background: var(--panel); min-height: 112px; }
.zaa-post .capital-node .num { color: var(--muted2); }
.zaa-post .capital-node strong { display: block; margin: 10px 0 5px; font-family: var(--zaa-font-serif); font-size: 16px; }
.zaa-post .capital-node span { display: block; font-size: var(--zaa-fs-label); color: var(--text2); line-height: 1.45; }

/* Gráficos SVG
   Los gráficos de las entradas se dibujaron para fondo oscuro. En la
   versión en blanco se invierten y se pasan a escala de grises: los
   fondos oscuros quedan claros, el texto blanco queda negro y los
   azules pasan a grises, en la línea monocroma del sitio. Para un SVG
   que ya esté pensado para fondo claro, añadirle class="zaa-no-invert". */
.zaa-post svg:not(.zaa-no-invert) { filter: invert(1) grayscale(1); }
.zaa-post svg text,
.zaa-post svg g[font-family] { font-family: var(--zaa-font-text); }
.zaa-post svg rect { rx: 0; }
.zaa-post svg .safe-placeholder { display: none; }

@media (max-width: 780px) {
	.zaa-post { padding: 32px 0 70px; }
	.zaa-post h1 { font-size: 41px; }
	.zaa-post h2 { font-size: 31px; margin-top: 58px; }
	.zaa-meta-bar { grid-template-columns: 1fr 1fr; gap: 20px; }
	.zaa-post-toc-grid { grid-template-columns: 1fr; }
	.zaa-post table { min-width: 600px; }
	.zaa-post .capital-map { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
	.zaa-post h1 { font-size: 36px; }
	.zaa-meta-bar { grid-template-columns: 1fr; }
	.zaa-post .capital-map { grid-template-columns: 1fr; }
}