/**
 * Layout: container, grid, section rhythm, header/footer shells (unused until Phase 3).
 */

.ds-container {
	width: min(100% - (var(--ds-gutter) * 2), var(--ds-container-max));
	margin-inline: auto;
}

.ds-container--narrow {
	width: min(100% - (var(--ds-gutter) * 2), var(--ds-container-narrow));
}

.ds-grid {
	display: grid;
	gap: var(--ds-space-5);
}

.ds-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ds-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ds-grid--12 { grid-template-columns: repeat(var(--ds-grid-columns), minmax(0, 1fr)); }

/* 4 soluciones: 2×2. Desde la 5.ª, 3 columnas — solo CSS. */
.ds-grid--solutions {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.ds-grid--solutions:has(> :nth-child(5)) {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ds-section {
	padding-block: var(--ds-space-9);
}

.ds-section--lg {
	padding-block: var(--ds-space-11);
}

.ds-section-header {
	display: grid;
	gap: var(--ds-space-3);
	max-width: 40rem;
	margin-bottom: var(--ds-space-7);
}

.ds-split {
	display: grid;
	gap: var(--ds-space-7);
	align-items: center;
}

.ds-header {
	position: sticky;
	top: 0;
	z-index: 60;
	min-height: 0;
	padding-inline: 0;
	background: var(--ds-color-surface);
	border-bottom: 1px solid var(--ds-color-border);
}

.ds-header__nav {
	display: flex;
	align-items: center;
	gap: var(--ds-space-5);
}

.ds-header__nav a {
	color: var(--ds-color-primary);
	text-decoration: none;
	font-size: var(--ds-text-body-sm);
	font-weight: var(--ds-font-weight-medium);
}

.ds-header__nav a:hover,
.ds-header__nav a[aria-current="page"] {
	color: var(--ds-color-accent);
}

.ds-header__toggle {
	display: none;
	min-width: var(--ds-tap);
	min-height: var(--ds-tap);
	border: 1px solid var(--ds-color-border);
	background: var(--ds-color-surface);
	border-radius: var(--ds-radius-sm);
}

.ds-footer {
	padding: var(--ds-space-9) max(var(--ds-gutter), env(safe-area-inset-right, 0px)) calc(var(--ds-space-5) + env(safe-area-inset-bottom, 0px)) max(var(--ds-gutter), env(safe-area-inset-left, 0px));
	background: var(--ds-color-primary-dark);
	color: var(--ds-color-text-on-dark);
}

.ds-footer a {
	color: rgba(245, 247, 250, 0.85);
	text-decoration: none;
	overflow-wrap: anywhere;
}

.ds-footer a:hover { color: var(--ds-color-white); }

.ds-footer__grid {
	display: grid;
	grid-template-columns: minmax(10rem, 1.3fr) minmax(12rem, 1.5fr) minmax(7rem, 0.8fr) minmax(7rem, 0.8fr) minmax(9rem, 1fr);
	gap: var(--ds-space-8) var(--ds-space-6);
	max-width: var(--ds-container-max);
	margin-inline: auto;
}

.ds-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ds-space-4);
	max-width: var(--ds-container-max);
	margin: var(--ds-space-8) auto 0;
	padding-top: var(--ds-space-5);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
	font-size: var(--ds-text-caption);
}

.ds-logo {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--ds-logo-height);
}

.ds-logo img {
	height: 100%;
	width: auto;
	max-width: 18.2rem;
	object-fit: contain;
	object-position: center;
}

.ds-logo--on-dark {
	background: var(--ds-color-white);
	padding: var(--ds-space-2) var(--ds-space-3);
	border-radius: var(--ds-radius-md);
}

.ds-kicker {
	font-size: var(--ds-text-caption);
	letter-spacing: var(--ds-tracking-caps);
	text-transform: uppercase;
	font-weight: var(--ds-font-weight-semibold);
	color: var(--ds-color-accent);
}

.ds-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ds-space-2);
	font-size: var(--ds-text-caption);
	color: var(--ds-color-text-muted);
}

.ds-breadcrumb a { color: inherit; text-decoration: none; }
.ds-breadcrumb a:hover { color: var(--ds-color-accent); }