/**
 * Components: buttons, cards, forms, section patterns.
 * UIX 10.1 — no lift/translateY; radius from tokens (4/8).
 */

/* Buttons */
.ds-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--ds-space-2);
	min-height: var(--ds-tap);
	padding: 0.7rem 1.25rem;
	border-radius: var(--ds-radius-md);
	border: 1px solid transparent;
	font-family: inherit;
	font-size: var(--ds-text-body-sm);
	font-weight: var(--ds-font-weight-semibold);
	letter-spacing: 0.01em;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--ds-duration) var(--ds-ease), border-color var(--ds-duration) var(--ds-ease), color var(--ds-duration) var(--ds-ease);
}

.ds-btn svg {
	width: 1rem;
	height: 1rem;
	flex: none;
}

.ds-btn--primary,
.ds a.ds-btn--primary,
.ds a.ds-btn--primary:hover,
.ds a.ds-btn--primary:active {
	background: var(--ds-color-accent);
	color: var(--ds-color-text-on-accent);
}

.ds-btn--primary:hover,
.ds a.ds-btn--primary:hover { background: var(--ds-color-accent-hover); }
.ds-btn--primary:active,
.ds a.ds-btn--primary:active { background: var(--ds-color-accent-active); }

.ds-btn--secondary,
.ds a.ds-btn--secondary,
.ds a.ds-btn--secondary:hover {
	background: var(--ds-color-primary);
	color: var(--ds-color-text-on-accent);
}

.ds-btn--secondary:hover,
.ds a.ds-btn--secondary:hover { background: var(--ds-color-primary-light); }

.ds-btn--outline {
	background: transparent;
	border-color: var(--ds-color-border-strong);
	color: var(--ds-color-primary);
}

.ds-btn--outline:hover {
	border-color: var(--ds-color-accent);
	color: var(--ds-color-accent);
}

.ds-btn--ghost {
	background: transparent;
	color: var(--ds-color-primary);
}

.ds-btn--ghost:hover { background: var(--ds-color-neutral-light); }

.ds-btn--link {
	min-height: auto;
	padding: 0;
	border: 0;
	border-radius: 0;
	color: var(--ds-color-accent);
	background: none;
}

.ds-btn--link:hover { color: var(--ds-color-accent-hover); }

.ds-btn:disabled,
.ds-btn[aria-disabled="true"] {
	background: var(--ds-color-disabled-bg);
	border-color: transparent;
	color: var(--ds-color-disabled);
	pointer-events: none;
}

/* Cards */
.ds-card {
	display: grid;
	gap: var(--ds-space-3);
	padding: var(--ds-space-5);
	background: var(--ds-color-surface);
	border: 1px solid var(--ds-color-border);
	border-radius: var(--ds-radius-md);
	text-decoration: none;
	color: inherit;
	transition: border-color var(--ds-duration) var(--ds-ease);
}

.ds-card:hover {
	border-color: var(--ds-color-accent);
}

.ds-card__icon {
	width: 2.5rem;
	height: 2.5rem;
	display: grid;
	place-items: center;
	border: 1px solid var(--ds-color-border);
	border-radius: var(--ds-radius-sm);
	color: var(--ds-color-accent);
}

.ds-card__icon svg { width: 1.25rem; height: 1.25rem; }

.ds-card h3 { font-size: var(--ds-text-h4); }

.ds-card p { color: var(--ds-color-text-muted); font-size: var(--ds-text-body-sm); }

.ds-card--cta {
	background: var(--ds-color-primary-dark);
	border-color: transparent;
	color: var(--ds-color-text-on-dark);
}

.ds-card--cta h3 { color: var(--ds-color-white); }
.ds-card--cta p { color: rgba(245, 247, 250, 0.78); }
.ds-card--cta:hover { border-color: var(--ds-color-accent); }

.ds-card--project { padding: 0; overflow: hidden; }
.ds-card--project .ds-card__body { padding: var(--ds-space-5); display: grid; gap: var(--ds-space-2); }

/* Forms — visual only */
.ds-field { display: grid; gap: var(--ds-space-2); }

.ds-label {
	font-size: var(--ds-text-caption);
	letter-spacing: var(--ds-tracking-wide);
	text-transform: uppercase;
	font-weight: var(--ds-font-weight-semibold);
	color: var(--ds-color-primary);
}

.ds-input,
.ds-select,
.ds-textarea {
	width: 100%;
	min-height: var(--ds-tap);
	padding: 0.7rem 0.85rem;
	border: 1px solid var(--ds-color-border-strong);
	border-radius: var(--ds-radius-sm);
	background: var(--ds-color-surface);
	color: var(--ds-color-text);
	font: inherit;
}

.ds-textarea { min-height: 8rem; resize: vertical; }

.ds-input:focus,
.ds-select:focus,
.ds-textarea:focus {
	border-color: var(--ds-color-accent);
}

.ds-input[aria-invalid="true"],
.ds-textarea[aria-invalid="true"] {
	border-color: var(--ds-color-error);
}

.ds-help { font-size: var(--ds-text-caption); color: var(--ds-color-text-muted); }
.ds-error { font-size: var(--ds-text-caption); color: var(--ds-color-error); }
.ds-success { font-size: var(--ds-text-caption); color: var(--ds-color-success); }

.ds-check {
	display: flex;
	align-items: flex-start;
	gap: var(--ds-space-3);
	font-size: var(--ds-text-body-sm);
}

.ds-check input {
	width: 1.15rem;
	height: 1.15rem;
	margin-top: 0.15rem;
	accent-color: var(--ds-color-accent);
	flex: none;
}

.ds-input:disabled,
.ds-textarea:disabled,
.ds-select:disabled {
	background: var(--ds-color-disabled-bg);
	color: var(--ds-color-disabled);
}

/* Patterns */
.ds-hero {
	padding: var(--ds-space-11) var(--ds-gutter);
	background: var(--ds-gradient-tech-soft);
	color: var(--ds-color-text-on-dark);
}

.ds-hero h1 { color: var(--ds-color-white); max-width: 16ch; }
.ds-hero .ds-lede { color: rgba(245, 247, 250, 0.82); max-width: 36rem; }

.ds-metrics {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--ds-space-5);
}

.ds-metric__value {
	font-size: var(--ds-text-h2);
	font-weight: var(--ds-font-weight-bold);
	color: var(--ds-color-primary-dark);
}

.ds-metric__label {
	font-size: var(--ds-text-caption);
	letter-spacing: var(--ds-tracking-caps);
	text-transform: uppercase;
	color: var(--ds-color-text-muted);
}

.ds-cta-band {
	padding: var(--ds-space-9) var(--ds-gutter);
	background: var(--ds-color-primary-dark);
	color: var(--ds-color-text-on-dark);
}

.ds-cta-band h2 { color: var(--ds-color-white); max-width: 18ch; }

.ds-faq details {
	border-bottom: 1px solid var(--ds-color-border);
	padding-block: var(--ds-space-4);
}

.ds-faq summary {
	cursor: pointer;
	font-weight: var(--ds-font-weight-semibold);
	color: var(--ds-color-primary);
}

.ds-faq summary:hover { color: var(--ds-color-accent); }

.ds-strip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ds-space-6);
	padding-block: var(--ds-space-6);
	border-block: 1px solid var(--ds-color-border);
}

.ds-notice {
	padding: var(--ds-space-3) var(--ds-space-4);
	border-radius: var(--ds-radius-sm);
	border: 1px solid var(--ds-color-border);
	font-size: var(--ds-text-body-sm);
}

.ds-notice--error { border-color: var(--ds-color-error); color: var(--ds-color-error); }
.ds-notice--success { border-color: var(--ds-color-success); color: var(--ds-color-success); }
.ds-notice--info { border-color: var(--ds-color-info); color: var(--ds-color-primary); }

/* Fase 9.0 — consentimiento. Sin CMP externo. */
.ds-consent-banner {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 70;
	padding: var(--ds-space-5);
	background: var(--ds-color-surface);
	border-top: 1px solid var(--ds-color-border);
	box-shadow: var(--ds-shadow-md);
}

.ds-consent-banner__inner {
	width: min(100%, var(--ds-container-max));
	margin-inline: auto;
	display: grid;
	gap: var(--ds-space-5);
	align-items: start;
}

@media (min-width: 64rem) {
	.ds-consent-banner__inner {
		grid-template-columns: 1fr auto;
		align-items: center;
	}
}

.ds-consent-banner__copy p {
	color: var(--ds-color-text-muted);
	font-size: var(--ds-text-body-sm);
	max-width: 62ch;
}

.ds-consent-banner__legal {
	margin-top: var(--ds-space-2);
}

.ds-consent-banner__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ds-space-2);
}

.ds-consent-overlay {
	position: fixed;
	inset: 0;
	z-index: 71;
	background: rgba(8, 26, 61, 0.45);
}

.ds-consent-banner[hidden],
.ds-consent-dialog[hidden],
.ds-consent-overlay[hidden] {
	display: none !important;
}

.ds-consent-dialog {
	position: fixed;
	z-index: 72;
	left: 50%;
	bottom: var(--ds-space-6);
	transform: translateX(-50%);
	width: min(100% - (var(--ds-gutter) * 2), 36rem);
	max-height: calc(100vh - 4rem);
	overflow: auto;
	padding: var(--ds-space-6);
	background: var(--ds-color-surface);
	border: 1px solid var(--ds-color-border);
	border-radius: var(--ds-radius-md);
}

.ds-consent-dialog__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ds-space-2);
	margin-top: var(--ds-space-5);
}