/**
 * Mindcommerce — Formulário de contato (D-37). Só tokens; mobile-first.
 */
.mc-contact-form {
	margin: 0;
	padding: var(--space-lg);
	background: var(--color-bg-page);
	border-radius: var(--radius-lg);
}

.mc-contact-form__field {
	display: grid;
	gap: var(--space-xs);
	margin: 0 0 var(--space-lg);
}

.mc-contact-form__field label {
	font-weight: var(--font-weight-semibold);
	color: var(--color-text-primary);
}

.mc-contact-form__field input[type="text"],
.mc-contact-form__field input[type="email"],
.mc-contact-form__field input[type="tel"],
.mc-contact-form__field select,
.mc-contact-form__field textarea {
	width: 100%;
	min-height: var(--input-height);
	padding: var(--space-sm) var(--space-md);
	border: var(--border-width) solid var(--color-border-strong);
	border-radius: var(--radius-sm);
	background: var(--color-bg-input);
	color: var(--color-text-primary);
	font-size: var(--text-body);
}

.mc-contact-form__field textarea {
	resize: vertical;
}

.mc-contact-form__field input:focus-visible,
.mc-contact-form__field select:focus-visible,
.mc-contact-form__field textarea:focus-visible,
.mc-contact-form__submit:focus-visible {
	outline: var(--border-width-strong) solid var(--color-border-focus);
	outline-offset: var(--space-xs);
}

.mc-contact-form__field [aria-invalid="true"] {
	border-color: var(--color-border-error);
	background: var(--color-error-bg);
}

.mc-contact-form__error {
	color: var(--color-error);
	font-size: var(--text-body-sm);
}

.mc-contact-form__field--check {
	grid-template-columns: auto 1fr;
	align-items: start;
	column-gap: var(--space-sm);
}

.mc-contact-form__field--check input {
	margin-top: var(--space-xs);
}

.mc-contact-form__field--check .mc-contact-form__error {
	grid-column: 1 / -1;
}

.mc-contact-form__notice {
	margin: 0 0 var(--space-lg);
	padding: var(--space-md) var(--space-lg);
	border: var(--border-width) solid;
	border-radius: var(--radius-sm);
}

.mc-contact-form__notice--ok {
	border-color: var(--color-success-border);
	background: var(--color-success-bg);
	color: var(--color-text-primary);
}

.mc-contact-form__notice--erro {
	border-color: var(--color-error-border);
	background: var(--color-error-bg);
	color: var(--color-error);
}

.mc-contact-form__submit {
	min-height: var(--button-height);
	padding-inline: var(--space-xl);
}

/* Campo-armadilha: fora da tela, invisível para pessoas */
.mc-contact-form__trap {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	clip-path: inset(50%);
}

/* =============================================================================
   PÁGINA DE CONTATO EM BLOCOS (D-38)
   Mesma lógica da Home (D-29): fundo cinza-claro, blocos brancos e um cartão
   de destaque na cor primária com os canais de atendimento.
   ============================================================================= */
body.mc-has-contact {
	background-color: var(--color-bg-subtle);
}

.mc-page--contact {
	gap: var(--space-lg);
}

.mc-contact-layout,
.mc-contact-more {
	display: grid;
	gap: var(--space-lg);
	align-items: start;
}

.mc-contact-card {
	padding: var(--space-xl) var(--space-lg);
	background: var(--color-primary);
	border-radius: var(--radius-lg);
	color: var(--color-text-inverse);
}

.mc-contact-card h2 {
	margin: 0 0 var(--space-sm);
	color: var(--color-text-inverse);
}

.mc-contact-card .mc-contact {
	display: block;
	margin: 0;
}

.mc-contact-card .mc-contact li {
	padding: var(--space-md) 0;
	background: transparent;
	border-top: var(--border-width) solid var(--color-primary-hover);
	border-radius: 0;
	color: var(--color-text-inverse-muted);
}

.mc-contact-card .mc-contact li:first-child {
	border-top: 0;
}

.mc-contact-card .mc-contact strong {
	margin-bottom: var(--space-xs);
	color: var(--color-text-inverse);
	font-size: var(--text-body-sm);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--letter-spacing-button);
	text-transform: uppercase;
}

.mc-contact-block {
	padding: var(--space-lg);
	background: var(--color-bg-page);
	border-radius: var(--radius-lg);
}

.mc-contact-block h2 {
	margin-top: 0;
}

.mc-contact-block p {
	margin: 0;
	color: var(--color-text-secondary);
}

@media (min-width: 1024px) {
	.mc-contact-layout {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
	}

	.mc-contact-more {
		grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	}

	.mc-contact-card,
	.mc-contact-form,
	.mc-contact-block {
		padding: var(--space-xl);
	}
}