/* ==========================================================================
   Cienmundos · Fundamentos globales · Umbral / Penumbra
   ========================================================================== */

:root {
	color-scheme: dark;

	/* Color */
	--cm-color-bg: #0a0d14;
	--cm-color-surface: #0d121c;
	--cm-color-surface-2: #141a26;
	--cm-color-border: #1b2331;
	--cm-color-border-strong: #2a3444;
	--cm-color-control-border: #647187;
	--cm-color-text: #f5f1e8;
	--cm-color-text-body: #e8e2d6;
	--cm-color-text-muted: #adb4c0;
	--cm-color-text-dim: #7e8794;
	--cm-color-text-faint: #5c6573;
	--cm-color-accent: #c0733f;
	--cm-color-accent-hover: #d98b4a;
	--cm-color-focus: #7fa8ff;
	--cm-color-header-scrolled: rgba(10, 13, 20, 0.88);
	--cm-color-panel-overlay: rgba(5, 7, 12, 0.72);
	--cm-color-footer-glow: rgba(192, 115, 63, 0.1);
	--cm-color-surface-glow: rgba(58, 79, 130, 0.16);
	--cm-color-placeholder-line: rgba(232, 226, 214, 0.07);
	--cm-color-placeholder-base: rgba(232, 226, 214, 0.02);

	/* Tipografía local, WOFF2 latin + latin-ext. */
	--cm-font-brand: "Cinzel", "Palatino Linotype", Palatino, Georgia, serif;
	--cm-font-display: "Cormorant Garamond", Baskerville, "Iowan Old Style", Georgia, serif;
	--cm-font-body: "Spectral", Georgia, Cambria, "Times New Roman", serif;
	--cm-font-ui: "Archivo Narrow", "Arial Narrow", Arial, sans-serif;

	--cm-text-display: clamp(2.6rem, 6.5vw, 5.1rem);
	--cm-text-h1: clamp(2.2rem, 5vw, 3.6rem);
	--cm-text-h2: clamp(1.75rem, 3.4vw, 2.375rem);
	--cm-text-h3: clamp(1.5rem, 2.8vw, 1.875rem);
	--cm-text-h4: 1.3125rem;
	--cm-text-lead: clamp(1.0625rem, 2vw, 1.25rem);
	--cm-text-body: 1.1875rem;
	--cm-text-body-s: 0.9375rem;
	--cm-text-small: 0.875rem;
	--cm-text-meta: 0.6875rem;
	--cm-text-label: 0.625rem;
	--cm-text-eyebrow: clamp(0.75rem, 1.4vw, 0.875rem);
	--cm-text-brand: clamp(0.9375rem, 2.2vw, 1.25rem);
	--cm-text-score: 2.25rem;
	--cm-text-score-xl: clamp(3.5rem, 7vw, 5rem);

	--cm-leading-tight: 1;
	--cm-leading-heading: 1.14;
	--cm-leading-body: 1.75;
	--cm-leading-ui: 1.4;

	/* Layout */
	--cm-width-max: 1280px;
	--cm-width-wide: 1120px;
	--cm-width-reading: 720px;
	--cm-width-reading-wide: 860px;
	--cm-gutter: clamp(20px, 4vw, 48px);
	--cm-gap-grid: clamp(24px, 3vw, 40px);
	--cm-section-y: clamp(36px, 5vw, 64px);

	/* Espaciado · escala base 4 */
	--cm-space-2xs: 4px;
	--cm-space-xs: 8px;
	--cm-space-s: 12px;
	--cm-space-m: 16px;
	--cm-space-l: 24px;
	--cm-space-xl: 32px;
	--cm-space-2xl: 48px;
	--cm-space-3xl: 64px;
	--cm-space-4xl: 96px;

	/* Forma y movimiento */
	--cm-radius: 0;
	--cm-border: 1px solid var(--cm-color-border);
	--cm-shadow-cover: 0 18px 40px -18px #05070c,
		inset 0 0 0 1px rgba(232, 226, 214, 0.06);
	--cm-fade-image: linear-gradient(
		to top,
		#0a0d14 0%,
		rgba(10, 13, 20, 0.55) 34%,
		rgba(10, 13, 20, 0) 78%
	);
	--cm-transition: 180ms ease-out;
	--cm-focus-ring: 2px solid var(--cm-color-focus);
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	background: var(--cm-color-bg);
	scroll-padding-block: 88px 24px;
	scrollbar-gutter: stable;
	text-size-adjust: 100%;
}

body.cm-site {
	min-width: 320px;
	margin: 0;
	background-color: var(--cm-color-bg);
	background-image:
		radial-gradient(1100px 520px at 50% -4%, rgba(58, 79, 130, 0.3), transparent 70%),
		radial-gradient(800px 420px at 96% 26%, rgba(192, 115, 63, 0.09), transparent 70%),
		radial-gradient(700px 380px at 2% 62%, rgba(58, 79, 130, 0.12), transparent 70%);
	background-attachment: fixed;
	color: var(--cm-color-text-body);
	font-family: var(--cm-font-body);
	font-size: var(--cm-text-body);
	font-weight: 400;
	line-height: var(--cm-leading-body);
	overflow-wrap: break-word;
	text-rendering: optimizeLegibility;
}

:where(body.cm-site) :where(h1, h2, h3, h4, h5, h6) {
	color: var(--cm-color-text);
	font-family: var(--cm-font-display);
	font-weight: 400;
	text-wrap: balance;
}

:where(body.cm-site) h1 {
	font-size: var(--cm-text-h1);
	line-height: 1.06;
	letter-spacing: -0.01em;
}

:where(body.cm-site) h2 {
	font-size: var(--cm-text-h2);
	line-height: var(--cm-leading-heading);
}

:where(body.cm-site) h3 {
	font-size: var(--cm-text-h3);
	line-height: 1.16;
}

:where(body.cm-site) h4 {
	font-size: var(--cm-text-h4);
	line-height: 1.18;
}

:where(body.cm-site) :where(p, ul, ol, blockquote, figure) {
	margin-block: 0 var(--cm-space-l);
}

:where(body.cm-site) :where(ul, ol) {
	padding-inline-start: 1.35em;
}

body.cm-site :where(strong, b) {
	font-weight: 600;
}

:where(body.cm-site) :where(img, svg, video) {
	display: block;
	max-width: 100%;
	height: auto;
}

body.cm-site ::selection {
	background: var(--cm-color-accent);
	color: var(--cm-color-bg);
}

body.cm-site .grid-container {
	max-width: var(--cm-width-max);
}

.cm-container {
	width: 100%;
	max-width: var(--cm-width-max);
	padding-inline: var(--cm-gutter);
	margin-inline: auto;
}

.cm-container--wide {
	max-width: var(--cm-width-wide);
}

.cm-reading-width {
	width: min(100%, var(--cm-width-reading));
	margin-inline: auto;
}

.cm-surface {
	background-color: var(--cm-color-surface);
}

.cm-surface-2 {
	background-color: var(--cm-color-surface-2);
}

.cm-flow > * {
	margin-block: 0;
}

.cm-flow > * + * {
	margin-block-start: var(--cm-space-l);
}

@media (max-width: 767px) {
	html {
		scroll-padding-block-start: 76px;
	}

	body.cm-site :where(h1, .cm-text-display) {
		font-weight: 400;
	}
}

@media (prefers-contrast: more) {
	:root {
		--cm-color-border: #475365;
		--cm-color-border-strong: #647187;
		--cm-color-control-border: #8e9aae;
		--cm-color-text-faint: #adb4c0;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}