/* =========================================================================
   PAGES — CONTATO
   =========================================================================
   "Comece pela conversa certa."

   A assinatura visual da pagina e a MESA DE BRIEFING: uma superficie
   editorial onde as entradas de intencao, o trilho do formulario e os
   canais compartilham a mesma gramatica — fio fino, indice, capsula de
   icone e vidro sutil.

   O que esta folha resolve: composicao e posicao.
   Voz tipografica, cor, raio e espacamento vem do sistema.

   GUARDA DE TIPOGRAFIA
   O kit global do Elementor injeta `.elementor-kit-NN h1`, que vale uma
   classe MAIS um elemento e derruba seletor de classe unica. Todo titulo
   daqui usa DUAS classes. Nao simplifique.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Tokens locais da pagina
   ----------------------------------------------------------------------
   Declarados aqui de proposito: sao decisoes de composicao desta pagina,
   nao valores novos do sistema. Todos apontam para tokens existentes.
   ---------------------------------------------------------------------- */

.moinho-contato,
.moinho-contato-secao {
	--moinho-section-space: var(--moinho-space-lg);
	--moinho-contato-fio: var(--moinho-surface-border);
	--moinho-contato-painel-bg: var(--moinho-card-bg);
	--moinho-contato-painel-borda: var(--moinho-surface-border);
	--moinho-contato-painel-raio: var(--moinho-radius-panel);
	--moinho-contato-capsula: 2.75rem;
	--moinho-contato-trilho-topo: calc(var(--moinho-header-height) + var(--moinho-space-md));
}

/* Os tokens acima ficam tambem em .moinho-contato-secao para que um bloco
   usado sozinho (ex.: [moinho_contato_canais] em outra pagina) continue
   com a mesma gramatica, sem depender do wrapper da composicao. */
.moinho-contato {
	position: relative;
	isolation: isolate;

	/* A faixa da fachada sangra com 100vw, que conta a barra de rolagem.
	   `clip` corta a sobra sem virar container de scroll. */
	overflow-x: clip;
}

.moinho-contato-secao {
	--moinho-section-space: var(--moinho-space-lg);
	position: relative;
	z-index: 1;
	scroll-margin-block-start: var(--moinho-space-lg);
}

/* Titulo de secao. Duas classes por causa da guarda acima. */
:is(.moinho-contato, .moinho-contato-secao) .moinho-contato-head__titulo {
	margin: 0;
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h2-size);
	font-weight: var(--moinho-role-h2-weight);
	line-height: var(--moinho-role-h2-leading);
	letter-spacing: var(--moinho-role-h2-tracking);
	color: var(--moinho-surface-fg);
	text-wrap: balance;
}

.moinho-contato-head {
	display: flex;
	flex-direction: column;
	gap: var(--moinho-space-xs);
	max-inline-size: var(--moinho-container-narrow);
	margin-block-end: var(--moinho-space-xl);
}

:is(.moinho-contato, .moinho-contato-secao) .moinho-contato-head__texto {
	max-inline-size: var(--moinho-content-width);
	margin: 0;
	font-size: var(--moinho-role-body-lg-size);
	line-height: var(--moinho-role-body-lg-leading);
	color: var(--moinho-surface-fg-muted);
	text-wrap: pretty;
}

/* Capsula de icone: uma medida para a pagina inteira. */
:is(.moinho-contato, .moinho-contato-secao) :is(
	.moinho-contato-caminho__icone,
	.moinho-contato-checklist__marca,
	.moinho-contato-canal__icone
) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	inline-size: var(--moinho-contato-capsula);
	block-size: var(--moinho-contato-capsula);

	--moinho-icon-size: 1.375rem;

	border: var(--moinho-border-width) solid var(--moinho-contato-fio);
	border-radius: var(--moinho-radius-md);
	background: var(--moinho-color-glass);
	box-shadow: inset 0 1px 0 var(--moinho-color-glass-border);
	color: var(--moinho-color-primary-readable);
}

/* Indice: o numero que marca ordem sem virar decoracao gritante. */
:is(.moinho-contato, .moinho-contato-secao) :is(
	.moinho-contato-caminho__indice,
	.moinho-contato-momento__indice
) {
	font-family: var(--moinho-role-ui-family);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--moinho-tracking-wide);
	color: var(--moinho-color-primary-readable);
}

/* Listas desta pagina nunca carregam marcador nativo. */
:is(.moinho-contato, .moinho-contato-secao) :is(
	.moinho-contato-caminhos__lista,
	.moinho-contato-checklist,
	.moinho-contato-canais__lista,
	.moinho-contato-canal__redes,
	.moinho-contato-momentos__lista,
	.moinho-contato-ajuda__lista
) {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* =========================================================================
   01 — HERO
   ========================================================================= */

.moinho-contato-hero {
	overflow: hidden;
}

/* Luz de marca. Segue o ponteiro quando ha ponteiro preciso (modulo
   spotlight); sem JS fica na posicao padrao e continua valendo. */
.moinho-contato-hero__luz {
	position: absolute;
	z-index: -1;
	inset-block-start: -30%;
	inset-inline-end: -18%;
	inline-size: min(42rem, 78vw);
	aspect-ratio: 1;
	border-radius: var(--moinho-radius-circle);
	background: radial-gradient(
		circle at var(--moinho-pointer-x, 50%) var(--moinho-pointer-y, 50%),
		var(--moinho-color-brand-glow),
		transparent 64%
	);
	filter: blur(var(--moinho-space-2xl));
	pointer-events: none;
}

/* Split do hero: chamada a esquerda, composicao fotografica a direita.
   Abaixo de 64rem elas empilham e a foto vem depois do CTA — quem chega no
   celular quer o botao antes da imagem. */
.moinho-contato-hero__inner {
	display: grid;
	gap: var(--moinho-space-xl);
	grid-template-columns: minmax(0, 1fr);
	align-items: center;
}

@media (min-width: 64rem) {
	.moinho-contato-hero__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		gap: var(--moinho-space-2xl);
	}
}

/* Os socios na coluna direita do hero (18/09/2026): um card sobre o outro,
   alinhados ao topo do titulo. Abaixo de 64rem empilham depois do texto. */
.moinho-contato-hero__socios {
	min-inline-size: 0;
}

.moinho-contato-hero__socios .moinho-contato-socios {
	grid-template-columns: 1fr;
	margin: 0;
}

.moinho-contato-canais__eyebrow {
	margin: 0 0 var(--moinho-space-md);
}

.moinho-contato-hero__corpo {
	display: flex;
	flex-direction: column;
	gap: var(--moinho-space-sm);
	/* Medida de leitura: texto correndo a largura inteira do container
	   cansa antes do primeiro CTA. */
	max-inline-size: 46rem;
}

:is(.moinho-contato, .moinho-contato-secao) .moinho-contato-hero__titulo {
	margin: 0;
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h1-size);
	font-weight: var(--moinho-role-h1-weight);
	line-height: var(--moinho-role-h1-leading);
	letter-spacing: var(--moinho-role-h1-tracking);
	color: var(--moinho-surface-fg);
	text-wrap: balance;
}

:is(.moinho-contato, .moinho-contato-secao) .moinho-contato-hero__texto {
	max-inline-size: 34rem;
	margin: 0;
	font-size: var(--moinho-role-body-lg-size);
	line-height: var(--moinho-role-body-lg-leading);
	color: var(--moinho-surface-fg-muted);
	text-wrap: pretty;
}

/* Sinais do hero: a promessa de que tem gente do outro lado e o horario de
   atendimento. Papel Small, nao Caption — nao e legenda, e compromisso. */
.moinho-contato-hero__sinais {
	display: flex;
	flex-wrap: wrap;
	gap: var(--moinho-space-2xs) var(--moinho-space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.moinho-contato-hero__sinais li {
	display: flex;
	align-items: center;
	gap: var(--moinho-space-2xs);
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-role-small-leading);
	color: var(--moinho-surface-fg-muted);
}

.moinho-contato-hero__sinal-icone {
	display: inline-flex;

	--moinho-icon-size: 1.125rem;

	color: var(--moinho-color-primary-readable);
}

/* =========================================================================
   02 — SELETOR DE INTENCAO
   Grade assimetrica: 7/5 e 5/7. Quatro caixas iguais em fila seriam um
   menu de servicos, que e exatamente o que esta pagina nao e.
   ========================================================================= */

.moinho-contato-caminhos__lista {
	display: grid;
	gap: var(--moinho-grid-gap);
}

@media (min-width: 48rem) {
	.moinho-contato-caminhos__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.moinho-contato-caminhos__lista {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	.moinho-contato-caminho:nth-child(4n + 1),
	.moinho-contato-caminho:nth-child(4n + 4) {
		grid-column: span 7;
	}

	.moinho-contato-caminho:nth-child(4n + 2),
	.moinho-contato-caminho:nth-child(4n + 3) {
		grid-column: span 5;
	}
}

.moinho-contato-caminho__link {
	position: relative;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto 1fr auto;
	grid-template-areas:
		"indice icone"
		"pergunta pergunta"
		"texto texto"
		"cta cta";
	gap: var(--moinho-space-2xs) var(--moinho-space-sm);

	block-size: 100%;
	padding: var(--moinho-space-lg);

	border: var(--moinho-border-width) solid var(--moinho-contato-painel-borda);
	border-radius: var(--moinho-contato-painel-raio);
	background: var(--moinho-contato-painel-bg);
	color: inherit;
	text-decoration: none;
	overflow: hidden;

	transition:
		transform var(--moinho-duration-normal) var(--moinho-ease-out),
		border-color var(--moinho-duration-normal) var(--moinho-ease-out),
		box-shadow var(--moinho-duration-normal) var(--moinho-ease-out);
}

/* Brilho de marca que so aparece no ponteiro. Fica atras do conteudo. */
.moinho-contato-caminho__link::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: radial-gradient(
		circle at 82% 0%,
		var(--moinho-color-brand-glow),
		transparent 58%
	);
	opacity: 0;
	transition: opacity var(--moinho-duration-normal) var(--moinho-ease-out);
}

@media (hover: hover) {
	.moinho-contato-caminho__link:hover {
		transform: translateY(-0.25rem);
		border-color: var(--moinho-color-primary);
		box-shadow: var(--moinho-shadow-md);
	}

	.moinho-contato-caminho__link:hover::after {
		opacity: 1;
	}
}

.moinho-contato-caminho__link:focus-visible {
	border-color: var(--moinho-color-primary);
}

/* Escolhido pelo JS: o cartao guarda a decisao enquanto o visitante escreve. */
.moinho-contato-caminho__link[aria-current="true"] {
	border-color: var(--moinho-color-primary);
	box-shadow: var(--moinho-shadow-md);
}

.moinho-contato-caminho__link[aria-current="true"]::after {
	opacity: 1;
}

.moinho-contato-caminho__indice {
	grid-area: indice;
	align-self: center;
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-weight-bold);
}

.moinho-contato-caminho__icone {
	grid-area: icone;
	justify-self: end;
}

:is(.moinho-contato, .moinho-contato-secao) .moinho-contato-caminho__pergunta {
	grid-area: pergunta;
	margin: var(--moinho-space-2xs) 0 0;
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-role-h4-weight);
	line-height: var(--moinho-role-h4-leading);
	letter-spacing: var(--moinho-role-h4-tracking);
	color: var(--moinho-surface-fg);
	text-wrap: balance;
}

.moinho-contato-caminho__texto {
	grid-area: texto;
	max-inline-size: 44ch;
	margin: 0;
	font-size: var(--moinho-role-body-size);
	line-height: var(--moinho-role-body-leading);
	color: var(--moinho-surface-fg-muted);
	text-wrap: pretty;
}

.moinho-contato-caminho__cta {
	grid-area: cta;
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-2xs);
	align-self: end;
	padding-block-start: var(--moinho-space-sm);
	font-family: var(--moinho-role-ui-family);
	font-size: var(--moinho-role-button-size);
	font-weight: var(--moinho-role-button-weight);
	letter-spacing: var(--moinho-role-button-tracking);
	color: var(--moinho-color-primary-readable);
}

.moinho-contato-caminho__seta {
	display: inline-flex;

	--moinho-icon-size: 1.125rem;

	transition: transform var(--moinho-duration-normal) var(--moinho-ease-out);
}

@media (hover: hover) {
	.moinho-contato-caminho__link:hover .moinho-contato-caminho__seta {
		transform: translateX(0.25rem);
	}
}

/* =========================================================================
   03 — O QUE AJUDA NA PRIMEIRA CONVERSA
   Coluna de texto fixa e checklist em fios. Sem molduras: a secao inteira
   ja e a superficie.
   ========================================================================= */

.moinho-contato-preparo__grade {
	display: grid;
	gap: var(--moinho-space-xl);
}

@media (min-width: 64rem) {
	.moinho-contato-preparo__grade {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
		gap: var(--moinho-space-2xl);
		align-items: start;
	}

	.moinho-contato-preparo__coluna {
		position: sticky;
		inset-block-start: var(--moinho-contato-trilho-topo);
	}
}

.moinho-contato-preparo .moinho-contato-head {
	margin-block-end: var(--moinho-space-md);
}

.moinho-contato-preparo__nota {
	max-inline-size: var(--moinho-content-width);
	margin: 0;
	padding-inline-start: var(--moinho-space-sm);
	border-inline-start: var(--moinho-border-width-strong) solid var(--moinho-color-primary);
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-role-small-leading);
	color: var(--moinho-surface-fg-muted);
}

.moinho-contato-checklist {
	display: grid;
}

.moinho-contato-checklist__item {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--moinho-space-3xs) var(--moinho-space-sm);
	padding-block: var(--moinho-space-md);
	border-block-start: var(--moinho-border-width) solid var(--moinho-contato-fio);
}

.moinho-contato-checklist__item:first-child {
	padding-block-start: 0;
	border-block-start: 0;
}

.moinho-contato-checklist__marca {
	grid-row: span 2;
	align-self: start;
}

:is(.moinho-contato, .moinho-contato-secao) .moinho-contato-checklist__titulo {
	margin: 0;
	align-self: center;
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-role-h4-weight);
	line-height: var(--moinho-role-h4-leading);
	letter-spacing: var(--moinho-role-h4-tracking);
	color: var(--moinho-surface-fg);
	text-wrap: balance;
}

.moinho-contato-checklist__texto {
	margin: 0;
	font-size: var(--moinho-role-body-size);
	line-height: var(--moinho-role-body-leading);
	color: var(--moinho-surface-fg-muted);
	text-wrap: pretty;
}

/* =========================================================================
   04 — FORMULARIO
   ----------------------------------------------------------------------
   O formulario do GrowthKit chega com moldura, respiro e sombra proprios
   (injetados por \3c style> inline com !important). Esta secao NAO desenha
   outra caixa em volta: seria cartao dentro de cartao.
   ========================================================================= */

.moinho-contato-formulario__grade {
	display: grid;
	gap: var(--moinho-space-xl);
}

@media (min-width: 64rem) {
	.moinho-contato-formulario__grade {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		gap: var(--moinho-space-2xl);
		align-items: start;
	}

	.moinho-contato-formulario__trilho {
		position: sticky;
		inset-block-start: var(--moinho-contato-trilho-topo);
	}
}

.moinho-contato-formulario .moinho-contato-head {
	margin-block-end: var(--moinho-space-lg);
}

/* Lista de apoio ao lado do formulario. Cinco linhas curtas, sem moldura e
   sem titulo de nivel: e lembrete do que ajuda, nao mais uma secao. */
.moinho-contato-ajuda {
	display: grid;
	gap: var(--moinho-space-2xs);
	padding-block-start: var(--moinho-space-md);
	border-block-start: var(--moinho-border-width) solid var(--moinho-contato-fio);
}

.moinho-contato-ajuda__titulo {
	margin: 0;
	font-family: var(--moinho-role-ui-family);
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-role-label-weight);
	line-height: var(--moinho-role-label-leading);
	letter-spacing: var(--moinho-role-label-tracking);
	text-transform: var(--moinho-role-label-transform);
	color: var(--moinho-surface-fg);
}

.moinho-contato-ajuda__lista {
	display: grid;
	gap: var(--moinho-space-2xs);
}

.moinho-contato-ajuda__lista li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--moinho-space-2xs);
	align-items: start;
	font-size: var(--moinho-role-body-size);
	line-height: var(--moinho-role-body-leading);
	color: var(--moinho-surface-fg);
}

.moinho-contato-ajuda__marca {
	display: inline-flex;
	margin-block-start: 0.2em;

	--moinho-icon-size: 1.125rem;

	color: var(--moinho-color-primary-readable);
}

.moinho-contato-ajuda__nota {
	margin: var(--moinho-space-3xs) 0 0;
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-role-small-leading);
	color: var(--moinho-surface-fg-muted);
}

/* Aviso do caminho escolhido. Nasce escondido; o JS preenche e revela. */
.moinho-contato-formulario__escolha {
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-2xs);
	margin: 0 0 var(--moinho-space-sm);
	padding: var(--moinho-space-3xs) var(--moinho-space-sm);
	border-radius: var(--moinho-radius-pill);
	background-color: var(--moinho-color-primary-soft);
	font-family: var(--moinho-role-ui-family);
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-role-small-leading);
	color: var(--moinho-color-primary-readable);
}

/* Sem isto o display acima venceria o atributo hidden. */
.moinho-contato-formulario__escolha[hidden] {
	display: none;
}

/* =========================================================================
   05 — CANAIS DIRETOS
   Pecas compactas. Um dado real por peca, nenhuma dentro de outra.
   ========================================================================= */

.moinho-contato-canais__lista {
	display: grid;
	gap: var(--moinho-grid-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
}

/* -------------------------------------------------------------------------
   Quem atende
   ----------------------------------------------------------------------
   Duas fichas antes da grade. Sao maiores que os cartoes de canal de
   proposito: a pergunta "com quem eu falo" vem antes de "por qual meio",
   e a hierarquia visual precisa dizer isso sem legenda.
   ---------------------------------------------------------------------- */

.moinho-contato-socios__intro {
	max-inline-size: 52ch;
	margin: 0 0 var(--moinho-space-md);
	font-size: var(--moinho-role-body-size);
	line-height: var(--moinho-role-body-leading);
	color: var(--moinho-surface-fg-muted);
	text-wrap: pretty;
}

.moinho-contato-socios {
	display: grid;
	gap: var(--moinho-grid-gap);
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	margin: 0 0 var(--moinho-space-xl);
	padding: 0;
	list-style: none;
}

.moinho-contato-socio {
	display: flex;
	align-items: flex-start;
	gap: var(--moinho-space-sm);
	padding: var(--moinho-space-md);
	border: var(--moinho-border-width) solid var(--moinho-contato-painel-borda);
	border-radius: var(--moinho-radius-lg);
	background: var(--moinho-contato-painel-bg);

	transition:
		border-color var(--moinho-duration-normal) var(--moinho-ease-out),
		transform var(--moinho-duration-normal) var(--moinho-ease-out);
}

@media (hover: hover) {
	.moinho-contato-socio:hover {
		transform: translateY(-0.125rem);
		border-color: var(--moinho-color-primary);
	}
}

.moinho-contato-socio__retrato {
	flex: none;
	display: block;
	inline-size: 5.25rem;
	block-size: 5.25rem;
	border-radius: var(--moinho-radius-circle);
	border: var(--moinho-border-width) solid var(--moinho-contato-painel-borda);
	background: var(--moinho-color-surface);
	overflow: hidden;
	box-shadow: var(--moinho-shadow-md);
}

.moinho-contato-socio__retrato-img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: var(--moinho-foto-foco, 50% 25%);
	display: block;
}

.moinho-contato-socio__corpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.125rem;
	min-inline-size: 0;
}

:is(.moinho-contato, .moinho-contato-secao) .moinho-contato-socio__nome {
	margin: 0;
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-role-h4-weight);
	line-height: var(--moinho-role-h4-leading);
	letter-spacing: var(--moinho-role-h4-tracking);
	color: var(--moinho-surface-fg);
}

.moinho-contato-socio__cargo {
	font-family: var(--moinho-role-ui-family);
	font-size: var(--moinho-role-caption-size);
	line-height: var(--moinho-role-caption-leading);
	color: var(--moinho-surface-fg-muted);
}

/* A etiqueta de frentes. E o dado que o briefing pediu explicito: qual
   assunto pertence a qual socio, visivel sem abrir nada. */
.moinho-contato-socio__tag {
	margin-block-start: var(--moinho-space-2xs);
	padding: 0.25rem 0.75rem;
	border: var(--moinho-border-width) solid var(--moinho-contato-painel-borda);
	border-radius: var(--moinho-radius-pill);
	font-family: var(--moinho-role-ui-family);
	font-size: var(--moinho-role-caption-size);
	font-weight: var(--moinho-weight-medium);
	line-height: var(--moinho-role-caption-leading);
	color: var(--moinho-color-primary-readable);
	text-wrap: balance;
}

.moinho-contato-socio__numero {
	margin-block-start: var(--moinho-space-2xs);
	font-family: var(--moinho-role-ui-family);
	font-size: var(--moinho-role-button-size);
	font-weight: var(--moinho-role-button-weight);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--moinho-role-button-tracking);
	color: var(--moinho-surface-fg);
	text-decoration: underline;
	text-decoration-thickness: var(--moinho-border-width);
	text-underline-offset: 0.25em;

	transition: color var(--moinho-duration-fast) var(--moinho-ease-default);
}

@media (hover: hover) {
	.moinho-contato-socio__numero:hover {
		color: var(--moinho-color-link-hover);
	}
}

.moinho-contato-socio__acao {
	margin-block-start: var(--moinho-space-sm);
}

@media (max-width: 30rem) {

	.moinho-contato-socio {
		flex-direction: column;
		gap: var(--moinho-space-xs);
	}
}

/* A faixa da fachada fecha a secao encostando no rodape dela. */
.moinho-contato-canais__fachada {
	margin-block-start: var(--moinho-space-xl);
}

/* =========================================================================
   SLIDER DO HERO
   =========================================================================
   Um cartao por vez, com o proximo espiando pela borda. A espia nao e
   enfeite: e o unico aviso, sem texto, de que ha mais fotos — mais confiavel
   que seta, porque aparece antes de o visitante procurar controle.
   ========================================================================= */

.moinho-contato-hero__slider .moinho-trilha__lista {
	/* 88% deixa 12% do proximo cartao a mostra. */
	grid-auto-columns: 88%;
	gap: var(--moinho-space-sm);
	padding-block-end: 0;
	scrollbar-width: none;
}

.moinho-contato-hero__slider .moinho-trilha__lista::-webkit-scrollbar {
	display: none;
}

/* Controles no topo do slider, alinhados a direita — o padrao do site. */
.moinho-contato-hero__slider .moinho-trilha__controles {
	margin-block-end: var(--moinho-space-xs);
}

.moinho-contato-hero__slider .moinho-galeria__slide .moinho-media {
	border-radius: var(--moinho-radius-panel-lg);
	box-shadow:
		0 0 90px -34px var(--moinho-color-brand-glow),
		var(--moinho-shadow-lg);
}

.moinho-contato-hero__slider .moinho-galeria__legenda {
	max-inline-size: 34ch;
	padding-inline-start: 0;
}

.moinho-contato-canal {
	display: flex;
	flex-direction: column;
	gap: var(--moinho-space-2xs);
	padding: var(--moinho-space-md);
	border: var(--moinho-border-width) solid var(--moinho-contato-painel-borda);
	border-radius: var(--moinho-radius-lg);
	background: var(--moinho-contato-painel-bg);

	transition:
		border-color var(--moinho-duration-normal) var(--moinho-ease-out),
		transform var(--moinho-duration-normal) var(--moinho-ease-out);
}

@media (hover: hover) {
	.moinho-contato-canal:hover {
		transform: translateY(-0.125rem);
		border-color: var(--moinho-color-primary);
	}
}

:is(.moinho-contato, .moinho-contato-secao) .moinho-contato-canal__titulo {
	margin: var(--moinho-space-3xs) 0 0;
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-role-h4-weight);
	line-height: var(--moinho-role-h4-leading);
	letter-spacing: var(--moinho-role-h4-tracking);
	color: var(--moinho-surface-fg);
}

.moinho-contato-canal__texto {
	margin: 0;
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-role-small-leading);
	color: var(--moinho-surface-fg-muted);
	text-wrap: pretty;
}

.moinho-contato-canal__endereco {
	margin: 0;
	font-style: normal;
	font-size: var(--moinho-role-body-size);
	line-height: var(--moinho-role-body-leading);
	color: var(--moinho-surface-fg);
}

/* O valor e a acao: telefone, e-mail ou "abrir no mapa". Fica no rodape da
   peca para as quatro terminarem na mesma linha. */
.moinho-contato-canal__valor {
	margin-block-start: auto;
	padding-block-start: var(--moinho-space-2xs);
	font-family: var(--moinho-role-ui-family);
	font-size: var(--moinho-role-button-size);
	font-weight: var(--moinho-role-button-weight);
	letter-spacing: var(--moinho-role-button-tracking);
	color: var(--moinho-color-primary-readable);
	text-decoration: underline;
	text-decoration-thickness: var(--moinho-border-width);
	text-underline-offset: 0.25em;
	overflow-wrap: anywhere;

	transition: color var(--moinho-duration-fast) var(--moinho-ease-default);
}

@media (hover: hover) {
	.moinho-contato-canal__valor:hover {
		color: var(--moinho-color-link-hover);
	}
}

.moinho-contato-canal__redes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--moinho-space-2xs);
	margin-block-start: auto;
	padding-block-start: var(--moinho-space-2xs);
}

.moinho-contato-canal__redes a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;

	--moinho-icon-size: 1.125rem;

	border: var(--moinho-border-width) solid var(--moinho-contato-fio);
	border-radius: var(--moinho-radius-circle);
	color: var(--moinho-surface-fg);

	transition:
		border-color var(--moinho-duration-fast) var(--moinho-ease-default),
		color var(--moinho-duration-fast) var(--moinho-ease-default);
}

@media (hover: hover) {
	.moinho-contato-canal__redes a:hover {
		border-color: var(--moinho-color-primary);
		color: var(--moinho-color-primary-readable);
	}
}

/* =========================================================================
   06 — QUANDO FAZ SENTIDO CHAMAR A MOINHO
   Fios e indice grande. Nenhuma moldura: e leitura, nao vitrine.
   ========================================================================= */

.moinho-contato-momentos__lista {
	display: grid;
	border-block-end: var(--moinho-border-width) solid var(--moinho-contato-fio);
}

.moinho-contato-momento {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--moinho-space-3xs) var(--moinho-space-md);
	padding-block: var(--moinho-space-md);
	border-block-start: var(--moinho-border-width) solid var(--moinho-contato-fio);
}

.moinho-contato-momento__indice {
	grid-row: span 2;
	align-self: start;
	font-size: var(--moinho-role-h3-size);
	font-weight: var(--moinho-weight-bold);
	line-height: var(--moinho-role-h3-leading);
	opacity: 0.4;
}

:is(.moinho-contato, .moinho-contato-secao) .moinho-contato-momento__titulo {
	margin: 0;
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h3-size);
	font-weight: var(--moinho-role-h3-weight);
	line-height: var(--moinho-role-h3-leading);
	letter-spacing: var(--moinho-role-h3-tracking);
	color: var(--moinho-surface-fg);
	text-wrap: balance;
}

.moinho-contato-momento__texto {
	margin: 0;
	font-size: var(--moinho-role-body-size);
	line-height: var(--moinho-role-body-leading);
	color: var(--moinho-surface-fg-muted);
	text-wrap: pretty;
}

/* Em telas largas a frase e o apoio dividem a linha, como em revista. */
@media (min-width: 64rem) {
	.moinho-contato-momento {
		grid-template-columns: auto minmax(0, 1.05fr) minmax(0, 1fr);
		align-items: baseline;
		gap: var(--moinho-space-lg);
		padding-block: var(--moinho-space-lg);
	}

	.moinho-contato-momento__indice {
		grid-row: auto;
	}
}

/* =========================================================================
   07 — FAQ
   Coluna estreita. O acordeao vem do componente de UI; aqui so a medida.
   ========================================================================= */

.moinho-contato-faq .moinho-contato-head {
	max-inline-size: 100%;
	align-items: center;
	text-align: center;
	margin-inline: auto;
	margin-block-end: var(--moinho-space-lg);
}
.moinho-contato-faq .moinho-contato-head__titulo {
	max-inline-size: 30ch;
}
.moinho-contato-faq__lista {
	inline-size: 100%;
	max-inline-size: none;
	margin-inline: auto;
}

/* =========================================================================
   08 — CONVITE FINAL
   O unico momento invertido da pagina.
   ========================================================================= */

.moinho-contato-convite {
	/* Sangra a largura inteira, como o CTA final da home. Peca escura
	   arredondada aqui quebraria o ritmo do site. */
	overflow: hidden;
	isolation: isolate;
}

.moinho-contato-convite__luz {
	position: absolute;
	z-index: 0;
	inset-block-start: -40%;
	inset-inline-start: 50%;
	inline-size: min(48rem, 92vw);
	aspect-ratio: 1;
	translate: -50% 0;
	border-radius: var(--moinho-radius-circle);
	background: radial-gradient(circle, var(--moinho-color-brand-glow), transparent 62%);
	filter: blur(var(--moinho-space-2xl));
	pointer-events: none;
}

.moinho-contato-convite__corpo {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--moinho-space-sm);
	max-inline-size: var(--moinho-container-narrow);
	margin-inline: auto;
	text-align: center;
}

:is(.moinho-contato, .moinho-contato-secao) .moinho-contato-convite__titulo {
	margin: 0;
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h2-size);
	font-weight: var(--moinho-role-h2-weight);
	line-height: var(--moinho-role-h2-leading);
	letter-spacing: var(--moinho-role-h2-tracking);
	color: var(--moinho-surface-fg);
	text-wrap: balance;
}

.moinho-contato-convite__texto {
	max-inline-size: var(--moinho-content-width);
	margin: 0;
	font-size: var(--moinho-role-body-lg-size);
	line-height: var(--moinho-role-body-lg-leading);
	color: var(--moinho-surface-fg-muted);
	text-wrap: pretty;
}

.moinho-contato-convite .moinho-button-group {
	justify-content: center;
	margin-block-start: var(--moinho-space-xs);
}

/* =========================================================================
   MOVIMENTO REDUZIDO
   Tudo aqui e progressivo: a pagina inteira le e navega sem uma animacao.
   ========================================================================= */

/* A nova fachada e vertical; limita a largura para nao criar uma faixa gigante. */
.moinho-contato-canais__fachada.moinho-galeria--faixa {
	inline-size: min(100%, 40rem);
	margin-inline: auto;
}
.moinho-contato-canais__fachada .moinho-galeria__faixa-quadro {
	border-radius: var(--moinho-radius-panel-lg);
}

/* Todos os slides de Vamos conversar compartilham o mesmo recorte vertical. */
.moinho-contato-hero__slider .moinho-galeria__slide .moinho-media {
	--moinho-media-ratio: 4 / 5;
	aspect-ratio: 4 / 5;
}

/* =========================================================================
   02 — GRADE DE ASSUNTOS
   As sete solucoes e o projeto completo. Cada cartao abre o canal direto
   com o assunto pre-selecionado: a pessoa escolhe o assunto, nao o socio.
   ========================================================================= */

.moinho-contato-assuntos__grade {
	display: grid;
	gap: var(--moinho-space-sm);
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 30rem) {
	.moinho-contato-assuntos__grade {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.moinho-contato-assuntos__grade {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.moinho-contato-assunto {
	display: flex;
	margin: 0;
}

.moinho-contato-assunto__link {
	position: relative;
	display: grid;
	gap: var(--moinho-space-2xs);
	align-content: start;
	inline-size: 100%;
	padding: var(--moinho-space-md);
	border: var(--moinho-border-width) solid var(--moinho-contato-painel-borda);
	border-radius: var(--moinho-radius-lg);
	background:
		radial-gradient(
			circle at var(--moinho-pointer-x, 50%) var(--moinho-pointer-y, 0%),
			var(--moinho-color-primary-soft),
			transparent 62%
		),
		var(--moinho-contato-painel-bg);
	color: var(--moinho-surface-fg);
	text-decoration: none;
	transition:
		border-color var(--moinho-duration-normal) var(--moinho-ease-out),
		transform var(--moinho-duration-normal) var(--moinho-ease-out);
}

@media (hover: hover) {
	.moinho-contato-assunto__link:hover {
		transform: translateY(-0.25rem);
		border-color: var(--moinho-color-primary);
	}
}

.moinho-contato-assunto__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	margin-block-end: var(--moinho-space-2xs);
	border: var(--moinho-border-width) solid var(--moinho-contato-painel-borda);
	border-radius: var(--moinho-radius-md);
	background: var(--moinho-color-glass);
	color: var(--moinho-color-primary-readable);
	--moinho-icon-size: 1.375rem;
}

.moinho-contato-assunto__titulo {
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-weight-semibold);
	line-height: var(--moinho-leading-snug);
}

.moinho-contato-assunto__texto {
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-leading-normal);
	color: var(--moinho-surface-fg-muted);
}

.moinho-contato-assunto__pessoa {
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-3xs);
	margin-block-start: var(--moinho-space-xs);
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-weight-semibold);
	letter-spacing: var(--moinho-role-label-tracking);
	text-transform: var(--moinho-role-label-transform);
	color: var(--moinho-color-primary-readable);
	--moinho-icon-size: 1rem;
}

.moinho-contato-assuntos__acoes {
	display: flex;
	justify-content: center;
	margin-block-start: var(--moinho-space-xl);
}

.moinho-contato-formulario summary {
	cursor: pointer;
	padding-block: var(--moinho-space-sm);
}