/**
 * Base — Ingeniería de integración (UIX 10.1).
 * IBM Plex Sans: stack only until local woff2 exists.
 */

html {
	box-sizing: border-box;
	background: var(--ds-color-background);
	overflow-x: clip;
}

html *,
html *::before,
html *::after {
	box-sizing: border-box;
}

body {
	margin: 0;
	min-height: 100%;
	font-family: var(--ds-font-body);
	font-size: var(--ds-text-body);
	font-weight: var(--ds-font-weight-regular);
	line-height: var(--ds-leading-body);
	color: var(--ds-color-text);
	background: var(--ds-color-background);
	-webkit-font-smoothing: antialiased;
}

.ds {
	font-family: var(--ds-font-body);
	font-size: var(--ds-text-body);
	font-weight: var(--ds-font-weight-regular);
	line-height: var(--ds-leading-body);
	color: var(--ds-color-text);
	background: var(--ds-color-background);
	-webkit-font-smoothing: antialiased;
}

.ds img {
	max-width: 100%;
	height: auto;
	display: block;
}

.ds h1,
.ds h2,
.ds h3,
.ds h4,
.ds .ds-display {
	font-family: var(--ds-font-heading);
	font-weight: var(--ds-font-weight-semibold);
	line-height: var(--ds-leading-tight);
	letter-spacing: var(--ds-tracking-tight);
	color: var(--ds-color-text);
	margin: 0;
}

.ds .ds-display { font-size: var(--ds-text-display); font-weight: var(--ds-font-weight-bold); }
.ds h1,
.ds .ds-h1 { font-size: var(--ds-text-h1); }
.ds h2,
.ds .ds-h2 { font-size: var(--ds-text-h2); }
.ds h3,
.ds .ds-h3 { font-size: var(--ds-text-h3); }
.ds h4,
.ds .ds-h4 { font-size: var(--ds-text-h4); font-weight: var(--ds-font-weight-medium); }

.ds p { margin: 0; }

.ds .ds-lede {
	font-size: var(--ds-text-body-lg);
	line-height: var(--ds-leading-snug);
	color: var(--ds-color-text-muted);
}

.ds .ds-caption {
	font-size: var(--ds-text-caption);
	letter-spacing: var(--ds-tracking-caps);
	text-transform: uppercase;
	font-weight: var(--ds-font-weight-medium);
	color: var(--ds-color-accent);
}

.ds a:not(.ds-btn) {
	color: var(--ds-color-accent);
	text-underline-offset: 0.15em;
}

.ds a:not(.ds-btn):hover { color: var(--ds-color-accent-hover); }

.ds :focus-visible,
body :focus-visible {
	outline: var(--ds-focus-ring);
	outline-offset: var(--ds-focus-offset);
}

.ds :focus:not(:focus-visible),
body :focus:not(:focus-visible) {
	outline: none;
}

.ds-home-hero :focus-visible,
.ds-service-hero :focus-visible,
.ds-cta-band :focus-visible,
.ds-footer :focus-visible {
	outline: var(--ds-focus-ring-on-dark);
}

.ds[data-theme="dark"],
.ds-theme-dark {
	background: var(--ds-color-primary-dark);
	color: var(--ds-color-text-on-dark);
}

.ds-theme-dark h1,
.ds-theme-dark h2,
.ds-theme-dark h3,
.ds-theme-dark h4,
.ds-theme-dark .ds-display {
	color: var(--ds-color-white);
}

.ds-theme-dark .ds-lede {
	color: rgba(245, 247, 250, 0.78);
}
