/* =========================================================================
   PAGES — A MOINHO
   =========================================================================
   Mesma gramatica da pagina de Expertises: box, cartao, trilha e capsula de
   icone. O que muda e o peso do texto, que aqui carrega a pagina.

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

.moinho-sobre {
	position: relative;
	isolation: isolate;
	hyphens: none;
	-webkit-hyphens: none;
	word-break: normal;

	/* A faixa fotografica sangra com 100vw, que inclui a barra de rolagem.
	   `clip` corta a sobra sem criar container de scroll — `hidden` aqui
	   quebraria qualquer position: sticky descendente. */
	overflow-x: clip;
}

.moinho-sobre-secao {
	/* Evita somar dois respiros globais entre secoes consecutivas. */
	--moinho-section-space: calc((var(--moinho-space-lg) + 10px) * 1.1);
	position: relative;
	z-index: 1;
	scroll-margin-block-start: var(--moinho-space-lg);
}

.moinho-sobre :is(h1, h2, h3, h4),
.moinho-sobre-secao :is(h1, h2, h3, h4) {
	font-family: var(--moinho-font-display);
	line-height: var(--moinho-leading-heading);
	letter-spacing: var(--moinho-tracking-tight);
	color: var(--moinho-surface-fg);
	text-wrap: balance;
}

.moinho-sobre :is(p, dd, li, figcaption) {
	hyphens: none;
	-webkit-hyphens: none;
	word-break: normal;
	text-wrap: pretty;
}

/* Texto corrido justificado a partir de 768px. Abaixo disso a coluna e
   estreita demais e a justificacao abre rios de espaco entre palavras. */
@media (min-width: 48rem) {
	.moinho-sobre :is(
		.moinho-sobre-head__texto,
		.moinho-sobre-abertura__texto,
		.moinho-sobre-manifesto__textos p,
		.moinho-sobre-socios__texto,
		.moinho-socio__texto,
		.moinho-sobre-licao__texto,
		.moinho-sobre-principio__texto,
		.moinho-sobre-funcao__texto,
		.moinho-sobre-atendimento__texto,
		.moinho-sobre-passo__texto,
		.moinho-sobre-equipe__convite,
		.moinho-sobre-convite__texto
	) {
		text-align: var(--moinho-copy-align);
		text-wrap: pretty;
	}
}

/* Cabecalho de secao, alinhado pelo topo. */
.moinho-sobre-head {
	display: grid;
	gap: var(--moinho-space-sm);
	margin-block-end: var(--moinho-space-lg);
}

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

	.moinho-sobre-head--split .moinho-sobre-head__textos {
		padding-block-start: var(--moinho-space-3xs);
	}
}

.moinho-sobre-head .moinho-sobre-head__titulo {
	margin: 0;
	font-size: var(--moinho-role-h2-size);
	font-weight: var(--moinho-weight-semibold);
}

.moinho-sobre-head__textos {
	display: grid;
	gap: var(--moinho-space-sm);
}

.moinho-sobre-head .moinho-sobre-head__texto {
	max-inline-size: var(--moinho-content-width);
	margin: 0;
	font-size: var(--moinho-role-body-size);
	line-height: var(--moinho-leading-normal);
	color: var(--moinho-surface-fg-muted);
}

/* Capsula de icone: uma medida para a pagina inteira. */
.moinho-sobre :is(
	.moinho-sobre-fato__icone,
	.moinho-sobre-licao__icone,
	.moinho-sobre-principio__icone,
	.moinho-sobre-funcao__icone,
	.moinho-sobre-atendimento__icone,
	.moinho-sobre-passo__icone,
	.moinho-sobre-convite__icone,
	.moinho-sobre-qualidade__icone
) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	flex: none;
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	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);
	--moinho-icon-size: 1.375rem;
	transition: transform var(--moinho-duration-normal) var(--moinho-ease-spring),
	            border-color var(--moinho-duration-normal) var(--moinho-ease-out);
}

/* =========================================================================
   01 — ABERTURA
   ========================================================================= */

.moinho-sobre-abertura {
	overflow: hidden;
	padding-block: var(--moinho-section-space);
	padding-block-start: calc((var(--moinho-space-xl) + 10px) * 1.1);
	background-color: var(--moinho-surface-bg);
}

.moinho-sobre-abertura__luz {
	position: absolute;
	z-index: -1;
	inset-block-start: -32%;
	inset-inline-end: -14%;
	inline-size: min(38rem, 66vw);
	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 62%
	);
	filter: blur(var(--moinho-space-2xl));
}

/* Tres pecas: copy, fotografia e trilha de fatos.

   No telefone elas se empilham na ordem que faz sentido ler: promessa, prova
   visual, dados. No desktop texto e foto dividem a primeira linha em partes
   iguais; a trilha usa toda a largura na linha seguinte. */
.moinho-sobre-abertura__inner {
	display: grid;
	gap: var(--moinho-space-xl);
	align-items: center;
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"corpo"
		"midia"
		"fatos";
}

.moinho-sobre-abertura__corpo { grid-area: corpo; }
.moinho-sobre-abertura__midia { grid-area: midia; }
.moinho-sobre-abertura .moinho-sobre-fatos { grid-area: fatos; }

@media (min-width: 64rem) {
	.moinho-sobre-abertura__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-areas:
			"corpo midia"
			"fatos fatos";
		align-items: stretch;
		gap: var(--moinho-space-xl);
	}

	.moinho-sobre-abertura__corpo {
		block-size: 100%;
	}

	.moinho-sobre-abertura__midia {
		align-self: start;
		grid-template-rows: auto auto;
		block-size: auto;
	}
}

/* Fachada dia/noite em 4:5, preservando a leitura do predio inteiro. */
.moinho-sobre-abertura__midia {
	margin: 0;
	display: grid;
	gap: var(--moinho-space-2xs);
}

.moinho-sobre-abertura__midia .moinho-media {
	--moinho-media-ratio: 4 / 5;
	border-radius: var(--moinho-radius-panel-lg);
	box-shadow: var(--moinho-shadow-lg);
}

@media (min-width: 64rem) {
	.moinho-sobre-abertura__midia .moinho-media {
		--moinho-media-ratio: 4 / 5;
		block-size: auto;
	}
}

.moinho-sobre-abertura__midia figcaption {
	font-size: var(--moinho-role-caption-size);
	line-height: var(--moinho-role-caption-leading);
	color: var(--moinho-surface-fg-muted);
	padding-inline-start: var(--moinho-space-3xs);
}

.moinho-sobre-abertura__selo {
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-2xs);
	margin: 0 0 var(--moinho-space-sm);
	padding-block: var(--moinho-space-3xs);
	padding-inline: var(--moinho-space-xs);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-pill);
	background: var(--moinho-color-glass);
	backdrop-filter: blur(var(--moinho-glass-blur));
	-webkit-backdrop-filter: blur(var(--moinho-glass-blur));
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-weight-semibold);
	letter-spacing: var(--moinho-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--moinho-color-primary-readable);
	--moinho-icon-size: 1rem;
}

.moinho-sobre-abertura .moinho-sobre-abertura__titulo {
	max-inline-size: var(--moinho-heading-measure);
	margin: 0 0 var(--moinho-heading-gap);
	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);
}

.moinho-sobre-abertura__texto {
	max-inline-size: var(--moinho-content-width);
	margin: 0 0 var(--moinho-space-sm);
	font-size: var(--moinho-role-body-size);
	line-height: var(--moinho-leading-relaxed);
	color: var(--moinho-surface-fg-muted);
}

.moinho-sobre-abertura__texto:last-of-type {
	margin-block-end: var(--moinho-space-md);
}

/* Trilha de identidade: quatro fatos em uma linha ampla no desktop e slider
   com scroll-snap quando a largura nao comporta todos. */
.moinho-sobre-fatos {
	margin: 0;
	min-inline-size: 0;
}

.moinho-sobre-fatos .moinho-trilha__lista {
	grid-auto-columns: minmax(min(var(--moinho-grid-min), 78vw), 1fr);
	gap: var(--moinho-space-sm);
}

@media (min-width: 64rem) {
	.moinho-sobre-fatos .moinho-trilha__lista {
		grid-auto-columns: minmax(var(--moinho-grid-min), 1fr);
	}
}

.moinho-sobre-fato {
	display: grid;
	gap: var(--moinho-space-3xs);
	align-content: start;
	padding: var(--moinho-space-sm);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	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 60%
		),
		var(--moinho-card-bg);
	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);
}

@media (hover: hover) {
	.moinho-sobre-fato:hover {
		transform: translate3d(0, -0.25rem, 0);
		border-color: var(--moinho-color-border-strong);
		box-shadow: var(--moinho-shadow-md);
	}

	.moinho-sobre-fato:hover .moinho-sobre-fato__icone {
		transform: scale(1.06);
	}
}

.moinho-sobre-fato__icone {
	margin-block-end: var(--moinho-space-2xs);
}

.moinho-sobre-fato__valor {
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-h3-size);
	font-weight: var(--moinho-weight-bold);
	line-height: var(--moinho-leading-tight);
	letter-spacing: var(--moinho-tracking-tight);
	color: var(--moinho-surface-fg);
}

.moinho-sobre-fato__rotulo {
	font-size: var(--moinho-role-small-size);
	font-weight: var(--moinho-weight-medium);
	color: var(--moinho-color-primary-readable);
}

.moinho-sobre-fato__apoio {
	font-size: var(--moinho-role-label-size);
	line-height: var(--moinho-leading-normal);
	color: var(--moinho-surface-fg-muted);
}

/* =========================================================================
   02 — MANIFESTO
   ========================================================================= */

.moinho-sobre-manifesto__layout {
	display: grid;
	gap: var(--moinho-space-xl);
}

@media (min-width: 64rem) {
	.moinho-sobre-manifesto__layout {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--moinho-space-xl);
		align-items: stretch;
	}
}

.moinho-sobre-manifesto__inner {
	display: grid;
	gap: var(--moinho-space-lg);
	align-content: start;
}

/* Fixa a copy enquanto as fotos percorrem a coluna ao lado.
   O limite acompanha a altura real da copy para permitir a leitura completa. */
@media (min-width: 64rem) {
	.moinho-sobre-manifesto__inner {
		position: sticky;
		inset-block-start: min(var(--moinho-space-lg), calc(100dvh - var(--moinho-sobre-copy-height, 100dvh) - var(--moinho-space-lg)));
		align-self: start;
	}

	.moinho-sobre-manifesto__layout .moinho-sobre-manifesto__lugares {
		grid-auto-rows: clamp(14rem, 18vw, 18rem);
		block-size: auto;
	}
}
.moinho-sobre-manifesto .moinho-sobre-manifesto__titulo {
	max-inline-size: 16ch;
	margin: 0;
	font-size: var(--moinho-role-h1-size);
	font-weight: var(--moinho-weight-bold);
	line-height: var(--moinho-role-h1-leading);
	letter-spacing: var(--moinho-role-h1-tracking);
}

.moinho-sobre-manifesto__textos {
	display: grid;
	gap: var(--moinho-space-md);
	max-inline-size: var(--moinho-content-width);
}

.moinho-sobre-manifesto__textos p {
	margin: 0;
	font-size: var(--moinho-role-body-size);
	line-height: var(--moinho-leading-relaxed);
	color: var(--moinho-surface-fg-muted);
}

.moinho-sobre-manifesto__statement {
	max-inline-size: 30ch;
	margin: 0;
	padding-inline-start: var(--moinho-space-md);
	border-inline-start: var(--moinho-border-width-strong) solid var(--moinho-color-primary-readable);
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-h3-size);
	font-weight: var(--moinho-weight-semibold);
	line-height: var(--moinho-leading-heading);
	letter-spacing: var(--moinho-tracking-tight);
	color: var(--moinho-surface-fg);
	text-wrap: balance;
}

/* O manifesto e a fotografia agora formam um unico quadro editorial. A
   composicao fecha quatro linhas sem lacunas, mas preserva proporcoes
   diferentes para que a grade nao pareca uma fileira de cartoes. */
.moinho-sobre-manifesto__lugares {
	grid-auto-rows: clamp(8.5rem, 10vw, 10.5rem);
}

@media (min-width: 64rem) {
	.moinho-sobre-manifesto__lugares {
		grid-auto-rows: minmax(0, 1fr);
		block-size: 100%;
		min-block-size: 0;
	}
}

/* Neste mosaico a legenda fica fora da foto. O componente bento usa selo
   sobreposto em outras paginas; aqui texto e imagem ja dividem o mesmo
   campo visual, entao a legenda precisa ser silenciosa e permanente. */
.moinho-sobre-manifesto__lugares > .moinho-galeria__item {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	gap: var(--moinho-space-2xs);
	overflow: visible;
	border-radius: 0;
	box-shadow: none;
}

.moinho-sobre-manifesto__lugares .moinho-media {
	overflow: hidden;
	border-radius: var(--moinho-radius-panel);
	box-shadow: var(--moinho-shadow-md);
}

.moinho-sobre-manifesto__lugares .moinho-galeria__selo {
	position: static;
	padding: 0 var(--moinho-space-3xs);
	font-size: var(--moinho-role-caption-size);
	line-height: var(--moinho-role-caption-leading);
	color: var(--moinho-surface-fg-muted);
	background: none;
	opacity: 1;
	transform: none;
}

@media (max-width: 63.9375rem) {
	.moinho-sobre-manifesto__lugares {
		grid-auto-rows: auto;
	}
}

/* =========================================================================
   03 — APRENDIZADOS (cartoes dentro da trilha)
   ========================================================================= */

.moinho-sobre-licao {
	display: grid;
	gap: var(--moinho-space-2xs);
	align-content: start;
	padding: var(--moinho-space-md);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-xl);
	background:
		radial-gradient(
			circle at var(--moinho-pointer-x, 100%) var(--moinho-pointer-y, 0%),
			var(--moinho-color-primary-soft),
			transparent 52%
		),
		var(--moinho-card-bg);
	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);
}

@media (hover: hover) {
	.moinho-sobre-licao:hover {
		transform: translate3d(0, -0.25rem, 0);
		border-color: var(--moinho-color-border-strong);
		box-shadow: var(--moinho-shadow-md);
	}

	.moinho-sobre-licao:hover .moinho-sobre-licao__icone {
		transform: scale(1.06);
	}
}

.moinho-sobre-licao__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--moinho-space-sm);
}

.moinho-sobre-licao__numero {
	font-family: var(--moinho-font-mono);
	font-size: var(--moinho-role-small-size);
	color: var(--moinho-color-primary-readable);
}

.moinho-sobre-licao .moinho-sobre-licao__titulo {
	margin: var(--moinho-space-2xs) 0 0;
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-weight-semibold);
}

.moinho-sobre-licao__texto {
	margin: 0;
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-leading-relaxed);
	color: var(--moinho-surface-fg-muted);
}

/* =========================================================================
   04 — PRINCIPIOS
   Bento leve: o primeiro ocupa duas colunas.
   ========================================================================= */

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

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

	.moinho-sobre-principio--destaque {
		grid-column: 1 / -1;
	}
}

/* Cartao com foto. O padding saiu do proprio cartao e foi para o corpo: e o
   que permite a foto encostar nas bordas em vez de flutuar numa moldura
   interna. `overflow: hidden` recorta a foto no raio do cartao.

   A base e --moinho-color-surface-strong, e nao --moinho-card-bg: card-bg
   sob .moinho-invert e branco a 4%, quase transparente, e o cartao sumiria
   no fundo da secao. surface-strong e escuro nos dois modos de cor, que e o
   que o texto branco precisa. */
.moinho-sobre-principio {
	display: grid;
	align-content: start;
	overflow: hidden;
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-xl);
	background:
		radial-gradient(
			circle at var(--moinho-pointer-x, 20%) var(--moinho-pointer-y, 0%),
			var(--moinho-color-primary-soft),
			transparent 56%
		),
		var(--moinho-color-surface-strong);
	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);
}

.moinho-sobre-principio__foto {
	--moinho-media-ratio: 4 / 5;
	border-radius: 0;
}

.moinho-sobre-principio__foto img {
	transition: transform var(--moinho-duration-slow) var(--moinho-ease-out);
}

@media (hover: hover) {
	.moinho-sobre-principio:hover .moinho-sobre-principio__foto img {
		transform: scale(1.05);
	}
}

.moinho-sobre-principio__corpo {
	display: grid;
	gap: var(--moinho-space-2xs);
	align-content: start;
	padding: var(--moinho-space-lg);
}

@media (min-width: 64rem) {
	/* O destaque ocupa as duas colunas: foto a esquerda, texto a direita.
	   Foto no topo de um cartao de largura dupla viraria banner. */
	.moinho-sobre-principio--destaque {
		grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr);
		/* Brilho azul no canto oposto ao roxo do ponteiro. E o unico cartao
		   que recebe as duas luzes da marca — por isso ele e o destaque. */
		background:
			radial-gradient(circle at 88% 118%, var(--moinho-color-secondary-glow), transparent 52%),
			radial-gradient(
				circle at var(--moinho-pointer-x, 20%) var(--moinho-pointer-y, 0%),
				var(--moinho-color-primary-soft),
				transparent 56%
			),
			var(--moinho-color-surface-strong);
	}

	.moinho-sobre-principio--destaque .moinho-sobre-principio__foto {
		--moinho-media-ratio: 4 / 5;
		block-size: auto;
		min-block-size: 22rem;
	}

	.moinho-sobre-principio--destaque .moinho-sobre-principio__corpo {
		gap: var(--moinho-space-xs);
		padding: var(--moinho-space-xl);
		align-content: center;
	}

	.moinho-sobre-principio--destaque .moinho-sobre-principio__texto {
		max-inline-size: 60ch;
		font-size: var(--moinho-role-body-size);
	}
}

@media (hover: hover) {
	.moinho-sobre-principio:hover {
		transform: translate3d(0, -0.25rem, 0);
		border-color: var(--moinho-color-border-strong);
		box-shadow: var(--moinho-shadow-md);
	}

	.moinho-sobre-principio:hover .moinho-sobre-principio__icone {
		transform: scale(1.06);
	}
}

.moinho-sobre-principio .moinho-sobre-principio__titulo {
	margin: var(--moinho-space-2xs) 0 0;
	font-size: var(--moinho-role-h3-size);
	font-weight: var(--moinho-weight-semibold);
	/* Branco puro. O seletor com duas classes existe por causa do kit do
	   Elementor, que injeta `.elementor-kit-NN h3`. */
	color: var(--moinho-surface-fg);
}

.moinho-sobre-principio__texto {
	max-inline-size: var(--moinho-content-width);
	margin: 0;
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-leading-relaxed);
	color: var(--moinho-surface-fg-muted);
}

/* A capsula de icone herda cor de marca, que sobre fundo escuro fica
   apagada. Dentro do cartao invertido ela veste a cor da superficie. */
.moinho-sobre-principio .moinho-sobre-principio__icone {
	color: var(--moinho-surface-fg);
}

/* =========================================================================
   05 — EQUIPE
   ========================================================================= */

/* Funcoes e foto de grupo lado a lado. A lista fica com duas colunas dentro
   da propria coluna: cinco funcoes empilhadas ao lado de um retrato 4:5
   deixariam a foto curta e a lista comprida. */
.moinho-sobre-equipe__inner {
	display: grid;
	gap: var(--moinho-space-lg);
	grid-template-columns: minmax(0, 1fr);
	margin-block-end: var(--moinho-space-xl);
}

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

.moinho-sobre-equipe__grupo {
	margin: 0;
	display: grid;
	gap: var(--moinho-space-2xs);
}

.moinho-sobre-equipe__grupo .moinho-media {
	border-radius: var(--moinho-radius-panel);
	box-shadow: var(--moinho-shadow-md);
}

.moinho-sobre-equipe__grupo figcaption {
	font-size: var(--moinho-role-caption-size);
	color: var(--moinho-surface-fg-muted);
	padding-inline-start: var(--moinho-space-3xs);
}

.moinho-sobre-funcoes {
	display: grid;
	gap: var(--moinho-space-md) var(--moinho-space-xl);
	margin: 0;
	padding: 0;
	list-style: none;
	grid-template-columns: minmax(0, 1fr);
}

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

.moinho-sobre-funcao {
	display: grid;
	gap: var(--moinho-space-sm);
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	padding-block-start: var(--moinho-space-sm);
	border-block-start: var(--moinho-border-width) solid var(--moinho-surface-border);
}

.moinho-sobre-funcao .moinho-sobre-funcao__titulo {
	margin: 0 0 var(--moinho-space-3xs);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-weight-semibold);
}

.moinho-sobre-funcao__texto {
	margin: 0;
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-leading-relaxed);
	color: var(--moinho-surface-fg-muted);
}

/* Retratos */
.moinho-sobre-retratos {
	margin-block-end: var(--moinho-space-lg);
}

.moinho-sobre-retratos .moinho-sobre-retratos__titulo {
	margin: 0 0 var(--moinho-space-md);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-weight-semibold);
}

.moinho-sobre-retratos__grade {
	display: grid;
	gap: var(--moinho-space-sm);
	grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
}

/* Rodape com convite de carreira */
.moinho-sobre-equipe__rodape {
	display: grid;
	gap: var(--moinho-space-sm);
	align-items: center;
	grid-template-columns: minmax(0, 1fr);
	padding: var(--moinho-space-lg);
	border: var(--moinho-border-width) dashed var(--moinho-surface-border);
	border-radius: var(--moinho-radius-xl);
}

@media (min-width: 64rem) {
	.moinho-sobre-equipe__rodape {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: var(--moinho-space-lg);
	}
}

.moinho-sobre-equipe__convite {
	max-inline-size: 62ch;
	margin: 0;
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-leading-relaxed);
	color: var(--moinho-surface-fg-muted);
}

/* =========================================================================
   05B — SOCIEDADE
   =========================================================================
   Abertura tipografica em 12 colunas. A headline e a tag formam um eixo; os
   paragrafos ocupam o outro com largura de leitura controlada.
   ========================================================================= */

.moinho-sobre-socios__topo {
	margin-block-end: var(--moinho-space-2xl);
}

.moinho-sobre-socios__corpo {
	display: grid;
	gap: var(--moinho-space-sm);
	align-content: start;
}

.moinho-sobre-socios .moinho-sobre-socios__titulo {
	max-inline-size: 15ch;
	margin: 0;
	font-size: var(--moinho-role-h1-size);
	font-weight: var(--moinho-weight-bold);
	line-height: var(--moinho-role-h1-leading);
	letter-spacing: var(--moinho-role-h1-tracking);
}

.moinho-sobre-socios__textos {
	display: grid;
	gap: var(--moinho-space-md);
	max-inline-size: var(--moinho-content-width);
}

.moinho-sobre-socios__texto {
	margin: 0;
	font-size: var(--moinho-role-body-size);
	line-height: var(--moinho-leading-relaxed);
	color: var(--moinho-surface-fg-muted);
}

/* Tag estatistica: compacta o dado sem competir com a headline. */
.moinho-sobre-socios__dado {
	display: inline-grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--moinho-space-sm);
	inline-size: fit-content;
	margin: var(--moinho-space-xs) 0 0;
	padding: var(--moinho-space-xs) var(--moinho-space-sm);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-pill);
	background: var(--moinho-color-primary-soft);
	box-shadow: inset 0 1px 0 var(--moinho-color-glass-border);
}

.moinho-sobre-socios__dado strong {
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-h2-size);
	font-weight: var(--moinho-weight-black);
	line-height: var(--moinho-leading-tight);
	letter-spacing: var(--moinho-tracking-tight);
	color: var(--moinho-color-primary-readable);
}

.moinho-sobre-socios__dado span {
	display: grid;
	gap: var(--moinho-space-3xs);
}

.moinho-sobre-socios__dado .moinho-sobre-socios__dado-rotulo {
	font-size: var(--moinho-role-small-size);
	font-weight: var(--moinho-weight-semibold);
	line-height: var(--moinho-role-small-leading);
	color: var(--moinho-surface-fg);
}

.moinho-sobre-socios__dado small {
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-weight-regular);
	color: var(--moinho-surface-fg-muted);
}

@media (min-width: 64rem) {
	.moinho-sobre-socios__corpo {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		gap: var(--moinho-space-lg) var(--moinho-space-xl);
	}

	.moinho-sobre-socios__corpo > .moinho-eyebrow {
		grid-column: 1 / -1;
	}

	.moinho-sobre-socios .moinho-sobre-socios__titulo {
		grid-column: 1 / span 6;
		grid-row: 2;
	}

	.moinho-sobre-socios__textos {
		grid-column: 8 / -1;
		grid-row: 2 / span 2;
	}

	.moinho-sobre-socios__dado {
		grid-column: 1 / span 6;
		grid-row: 3;
		align-self: end;
	}
}

/* Perfis equivalentes: mesma largura, mesmo retrato e informacoes partindo
   da mesma linha. A sociedade nao sugere hierarquia entre os dois nomes. */
.moinho-sobre-socios__grade {
	display: grid;
	gap: var(--moinho-space-xl);
	grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 48rem) {
	.moinho-sobre-socios__grade {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: stretch;
	}
}

.moinho-sobre-socios__cartao {
	min-inline-size: 0;
}

/* =========================================================================
   07 — A CASA
   =========================================================================
   A unidade de linha da grade e maior aqui do que o padrao do componente:
   sao seis fotos de arquitetura, e celula baixa transformaria interior em
   faixa. Quatro unidades fecham a composicao em torno de 40rem de altura.
   ========================================================================= */

.moinho-sobre-estrutura__grade {
	grid-auto-rows: clamp(9rem, 13vw, 13rem);
}

/* =========================================================================
   08 — ATENDIMENTO
   ========================================================================= */

/* O padding vira token local porque a foto precisa sangrar exatamente ele
   para encostar na borda do box. Dois valores soltos divergiriam na primeira
   vez que alguem ajustasse o respiro. */
.moinho-sobre-atendimento__box {
	--moinho-sobre-box-padding: var(--moinho-space-lg);

	display: grid;
	gap: var(--moinho-space-lg);
	grid-template-columns: minmax(0, 1fr);
	grid-template-areas:
		"midia"
		"corpo"
		"passos";
	padding: var(--moinho-sobre-box-padding);
	overflow: hidden;
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-xl);
	background:
		radial-gradient(
			circle at var(--moinho-pointer-x, 12%) var(--moinho-pointer-y, 0%),
			var(--moinho-color-primary-soft),
			transparent 54%
		),
		var(--moinho-card-bg);
	box-shadow: inset 0 1px 0 var(--moinho-color-glass-border);
}

.moinho-sobre-atendimento__midia { grid-area: midia; }
.moinho-sobre-atendimento__corpo { grid-area: corpo; }
.moinho-sobre-atendimento .moinho-sobre-passos-bloco { grid-area: passos; display: grid; gap: var(--moinho-space-sm); align-content: start; }

/* No telefone a foto encosta nas tres bordas de cima; no desktop ela vira a
   coluna esquerda inteira, sangrando em cima, embaixo e na lateral. */
.moinho-sobre-atendimento__midia {
	margin:
		calc(var(--moinho-sobre-box-padding) * -1)
		calc(var(--moinho-sobre-box-padding) * -1)
		0;
}

.moinho-sobre-atendimento__midia .moinho-media {
	--moinho-media-ratio: 16 / 9;
	border-radius: 0;
}

@media (min-width: 64rem) {
	.moinho-sobre-atendimento__box {
		--moinho-sobre-box-padding: var(--moinho-space-xl);

		grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
		grid-template-areas:
			"midia corpo"
			"midia passos";
		column-gap: var(--moinho-space-xl);
	}

	/* A foto e o unico item que estica: os dois blocos de texto ancoram no
	   topo da propria linha. Sem isto, o paragrafo flutuaria centralizado
	   dentro de uma linha alta por causa da imagem ao lado. */
	.moinho-sobre-atendimento__corpo,
	.moinho-sobre-atendimento .moinho-sobre-passos-bloco {
		align-self: start;
	}

	/* A foto cobre exatamente a area de duas linhas da grade.

	   `position: absolute; inset: 0` em vez de altura em porcentagem: a
	   altura da area depende do texto ao lado, que muda com a copy e com o
	   tamanho de fonte do visitante. Qualquer medida fixa aqui sobra ou
	   falta. Assim a foto acompanha o texto sempre, sem folga embaixo. */
	.moinho-sobre-atendimento__midia {
		position: relative;
		margin:
			calc(var(--moinho-sobre-box-padding) * -1)
			0
			calc(var(--moinho-sobre-box-padding) * -1)
			calc(var(--moinho-sobre-box-padding) * -1);
	}

	.moinho-sobre-atendimento__midia .moinho-media {
		position: absolute;
		inset: 0;
		--moinho-media-ratio: auto;
	}
}

.moinho-sobre-atendimento__corpo {
	display: grid;
	gap: var(--moinho-space-sm);
	align-content: start;
	justify-items: start;
}

.moinho-sobre-atendimento .moinho-sobre-atendimento__titulo {
	margin: 0;
	font-size: var(--moinho-role-h3-size);
	font-weight: var(--moinho-weight-semibold);
}

.moinho-sobre-atendimento__texto {
	max-inline-size: var(--moinho-content-width);
	margin: 0;
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-leading-relaxed);
	color: var(--moinho-surface-fg-muted);
}

.moinho-sobre-atendimento__endereco {
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-2xs);
	margin: var(--moinho-space-2xs) 0 0;
	font-size: var(--moinho-role-small-size);
	color: var(--moinho-surface-fg);
	--moinho-icon-size: 1.125rem;
}

.moinho-sobre-atendimento__endereco .moinho-icon {
	color: var(--moinho-color-secondary-readable);
}

.moinho-sobre-passos {
	display: grid;
	gap: var(--moinho-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
	align-content: start;
}

.moinho-sobre-passo {
	display: grid;
	gap: var(--moinho-space-sm);
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	padding: var(--moinho-space-sm);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-lg);
	background: var(--moinho-color-glass);
	backdrop-filter: blur(var(--moinho-glass-blur));
	-webkit-backdrop-filter: blur(var(--moinho-glass-blur));
}

.moinho-sobre-passo .moinho-sobre-passo__titulo {
	display: flex;
	align-items: baseline;
	gap: var(--moinho-space-2xs);
	margin: 0 0 var(--moinho-space-3xs);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-weight-semibold);
}

.moinho-sobre-passo__titulo span {
	font-family: var(--moinho-font-mono);
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-weight-regular);
	color: var(--moinho-color-primary-readable);
}

.moinho-sobre-passo__texto {
	margin: 0;
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-leading-normal);
	color: var(--moinho-surface-fg-muted);
}

/* =========================================================================
   07 — DEPOIMENTOS
   ========================================================================= */

.moinho-sobre-depoimento {
	display: grid;
	align-content: start;
	padding: var(--moinho-space-md);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-xl);
	background: var(--moinho-card-bg);
}

/* =========================================================================
   08 — CONVITE FINAL
   ========================================================================= */

.moinho-sobre-convite__inner {
	position: relative;
	overflow: hidden;
	display: grid;
	gap: var(--moinho-space-md);
	justify-items: start;
	padding: var(--moinho-space-xl);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-xl);
	background:
		radial-gradient(
			circle at var(--moinho-pointer-x, 78%) var(--moinho-pointer-y, 18%),
			var(--moinho-color-brand-glow),
			transparent 54%
		),
		var(--moinho-card-bg);
}

@media (min-width: 64rem) {
	.moinho-sobre-convite__inner {
		padding: var(--moinho-space-2xl);
	}
}

.moinho-sobre-convite .moinho-sobre-convite__titulo {
	max-inline-size: 22ch;
	margin: 0;
	font-size: var(--moinho-role-h2-size);
	font-weight: var(--moinho-weight-bold);
	line-height: var(--moinho-leading-snug);
}

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


@media (min-width: 64rem) {
	.moinho-sobre-atendimento__midia {
		align-self: stretch;
		margin-block-end: calc(var(--moinho-sobre-box-padding) * -1);
	}
	.moinho-sobre-atendimento__midia .moinho-media:has(> picture.moinho-fachada-tema) {
		position: absolute;
		inset: 0;
		inline-size: 100%;
		block-size: 100%;
		aspect-ratio: auto;
		align-self: stretch;
	}
}

/* Bento da sede: a grade define a geometria; as fotos preenchem as celulas. */
.moinho-sobre-estrutura > .moinho-container {
	container-type: inline-size;
}
.moinho-sobre-estrutura__grade.moinho-galeria--bento {
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: none;
	grid-auto-rows: auto;
}
.moinho-sobre-estrutura__grade.moinho-galeria--bento > .moinho-galeria__item {
	grid-area: auto;
	min-inline-size: 0;
	min-block-size: 0;
	block-size: auto;
	aspect-ratio: 4 / 3;
}
.moinho-sobre-estrutura__grade.moinho-galeria--bento > .moinho-galeria__item:first-child {
	aspect-ratio: 4 / 5;
}
.moinho-sobre-estrutura__grade.moinho-galeria--bento > .moinho-galeria__item > .moinho-media {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
	aspect-ratio: auto;
}
.moinho-sobre-estrutura__grade .moinho-media > img,
.moinho-sobre-estrutura__grade .moinho-media > picture,
.moinho-sobre-estrutura__grade .moinho-media > picture > img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}
@media (min-width: 48rem) and (max-width: 63.9375rem) {
	.moinho-sobre-estrutura__grade.moinho-galeria--bento {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.moinho-sobre-estrutura__grade.moinho-galeria--bento > .moinho-galeria__item:nth-child(2) {
		aspect-ratio: 4 / 5;
	}
}
@media (min-width: 64rem) {
	.moinho-sobre-estrutura__grade.moinho-galeria--bento {
		/* Duas linhas + um gap = altura da fachada em 4:5. */
		--moinho-sede-linha: calc((100cqw - var(--moinho-grid-gap)) * 0.3125 - var(--moinho-grid-gap) * 0.5);
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-template-rows: repeat(3, var(--moinho-sede-linha));
		grid-template-areas:
			"fachada fachada recepcao recepcao"
			"fachada fachada reuniao criacao"
			"estante estante cafe cafe";
	}
	.moinho-sobre-estrutura__grade.moinho-galeria--bento > .moinho-galeria__item {
		aspect-ratio: auto;
	}
	.moinho-sobre-estrutura__grade.moinho-galeria--bento > .moinho-galeria__item:nth-child(1) { grid-area: fachada; }
	.moinho-sobre-estrutura__grade.moinho-galeria--bento > .moinho-galeria__item:nth-child(2) { grid-area: recepcao; }
	.moinho-sobre-estrutura__grade.moinho-galeria--bento > .moinho-galeria__item:nth-child(3) { grid-area: reuniao; }
	.moinho-sobre-estrutura__grade.moinho-galeria--bento > .moinho-galeria__item:nth-child(4) { grid-area: criacao; }
	.moinho-sobre-estrutura__grade.moinho-galeria--bento > .moinho-galeria__item:nth-child(5) { grid-area: estante; }
	.moinho-sobre-estrutura__grade.moinho-galeria--bento > .moinho-galeria__item:nth-child(6) { grid-area: cafe; }
}
@media (min-width: 64rem) {
}

/* =========================================================================
   02B — SLOGAN
   Unico bloco invertido da pagina. A assinatura numa coluna, os tres
   paragrafos na outra e a marca d'agua no canto. Bloco baixo e horizontal
   (cliente, 18/09/2026): antes os paragrafos ficavam sob o titulo, numa
   coluna so, e a metade direita do painel sobrava vazia.
   ========================================================================= */

.moinho-sobre-slogan__inner {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	gap: var(--moinho-space-lg);
	padding: var(--moinho-space-xl);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-xl);
	background:
		radial-gradient(
			circle at var(--moinho-pointer-x, 82%) var(--moinho-pointer-y, 12%),
			var(--moinho-color-brand-glow),
			transparent 52%
		),
		var(--moinho-card-bg);
}

@media (min-width: 64rem) {
	.moinho-sobre-slogan__inner {
		grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
		align-items: center;
		column-gap: clamp(3rem, 6vw, 6rem);
		padding: clamp(2.5rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4.5rem);
	}
}

.moinho-sobre-slogan__marca {
	position: absolute;
	z-index: -1;
	inset: -16% -10% auto auto;
	margin: 0;
	inline-size: min(48vw, 30rem); /* ds-ok: marca d'agua, tamanho posicional */
	color: var(--moinho-color-marca-dagua-fraca);
	pointer-events: none;
}

.moinho-sobre-slogan__corpo {
	display: grid;
	gap: var(--moinho-space-md);
	align-content: start;
}

.moinho-sobre-slogan .moinho-sobre-slogan__titulo {
	max-inline-size: 14ch;
	margin: 0;
	font-size: var(--moinho-role-h1-size);
	font-weight: var(--moinho-weight-bold);
	line-height: var(--moinho-leading-tight);
	text-wrap: balance;
}

.moinho-sobre-slogan__textos {
	display: grid;
	gap: var(--moinho-space-sm);
	max-inline-size: var(--moinho-copy-measure);
	align-self: center;
}

.moinho-sobre-slogan__textos p {
	margin: 0;
	font-size: var(--moinho-role-body-size);
	line-height: var(--moinho-leading-relaxed);
	color: var(--moinho-surface-fg-muted);
}

.moinho-sobre-slogan__statement {
	grid-column: 1 / -1;
	margin: 0;
	padding-block-start: var(--moinho-space-md);
	border-block-start: var(--moinho-border-width) solid var(--moinho-surface-border);
	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-secondary-readable);
}

/* =========================================================================
   03B — POLITICA DE QUALIDADE
   Box com a chamada e tres compromissos numerados, um por linha.
   ========================================================================= */

.moinho-sobre-qualidade__box {
	display: grid;
	gap: var(--moinho-space-lg);
	padding: var(--moinho-space-lg);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-xl);
	background:
		radial-gradient(
			circle at var(--moinho-pointer-x, 10%) var(--moinho-pointer-y, 100%),
			var(--moinho-color-secondary-glow),
			transparent 52%
		),
		var(--moinho-card-bg);
	box-shadow: inset 0 1px 0 var(--moinho-color-glass-border);
}

@media (min-width: 64rem) {
	.moinho-sobre-qualidade__box {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.6fr);
		gap: var(--moinho-space-xl);
		padding: var(--moinho-space-xl);
	}
}

.moinho-sobre-qualidade__eyebrow {
	margin: 0 0 var(--moinho-space-md);
}

.moinho-sobre-qualidade .moinho-sobre-qualidade__chamada {
	max-inline-size: 22ch;
	margin: 0;
	font-size: var(--moinho-role-h3-size);
	font-weight: var(--moinho-weight-semibold);
	line-height: var(--moinho-leading-snug);
	text-wrap: balance;
}

.moinho-sobre-qualidade__lista {
	display: grid;
	gap: var(--moinho-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.moinho-sobre-qualidade__item {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	align-items: center;
	gap: var(--moinho-space-sm);
	padding: var(--moinho-space-sm);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-lg);
	background: var(--moinho-color-glass);
}

.moinho-sobre-qualidade__numero {
	font-family: var(--moinho-font-mono);
	font-size: var(--moinho-role-label-size);
	color: var(--moinho-color-primary-readable);
}

.moinho-sobre-qualidade__texto {
	margin: 0;
	font-size: var(--moinho-role-body-size);
	line-height: var(--moinho-leading-normal);
}

/* =========================================================================
   09 — CONTATO FINAL
   Convite a esquerda e tres cartoes de direcionamento a direita. Cada
   cartao e um gatilho do canal direto, ja na pessoa certa.
   ========================================================================= */

.moinho-sobre-contato__inner {
	position: relative;
	overflow: hidden;
	display: grid;
	gap: var(--moinho-space-xl);
	padding: var(--moinho-space-xl);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-xl);
	background:
		radial-gradient(
			circle at var(--moinho-pointer-x, 78%) var(--moinho-pointer-y, 18%),
			var(--moinho-color-brand-glow),
			transparent 54%
		),
		var(--moinho-card-bg);
}

@media (min-width: 64rem) {
	.moinho-sobre-contato__inner {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr);
		align-items: start;
		padding: var(--moinho-space-2xl);
	}
}

.moinho-sobre-contato__corpo {
	display: grid;
	gap: var(--moinho-space-md);
	justify-items: start;
}

.moinho-sobre-contato .moinho-sobre-contato__titulo {
	max-inline-size: 16ch;
	margin: 0;
	font-size: var(--moinho-role-display-size);
	font-weight: var(--moinho-weight-bold);
	line-height: var(--moinho-leading-tight);
}

.moinho-sobre-contato__texto {
	max-inline-size: var(--moinho-copy-measure);
	margin: 0;
	font-size: var(--moinho-role-body-lg-size);
	line-height: var(--moinho-leading-relaxed);
	color: var(--moinho-surface-fg-muted);
}

.moinho-sobre-contato__pessoas {
	display: grid;
	gap: var(--moinho-space-sm);
}

.moinho-sobre-contato__lista {
	display: grid;
	gap: var(--moinho-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.moinho-sobre-contato__link {
	display: grid;
	grid-template-columns: 4rem minmax(0, 1fr);
	grid-template-areas:
		"foto nome"
		"foto tag"
		"foto acao";
	column-gap: var(--moinho-space-sm);
	row-gap: var(--moinho-space-3xs);
	align-items: center;
	padding: var(--moinho-space-sm);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-lg);
	background: var(--moinho-color-glass);
	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-spring);
}

.moinho-sobre-contato__link:hover,
.moinho-sobre-contato__link:focus-visible {
	border-color: var(--moinho-color-primary-readable);
	transform: translateY(-2px);
}

.moinho-sobre-contato__foto {
	grid-area: foto;
	inline-size: 4rem;
	border-radius: var(--moinho-radius-md);
	overflow: hidden;
}

.moinho-sobre-contato__foto--icone {
	display: grid;
	place-items: center;
	aspect-ratio: 1;
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	background: var(--moinho-color-glass-strong);
	color: var(--moinho-color-primary-readable);
	--moinho-icon-size: 1.5rem;
}

.moinho-sobre-contato__nome {
	grid-area: nome;
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-weight-semibold);
}

.moinho-sobre-contato__tag {
	grid-area: tag;
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-leading-normal);
	color: var(--moinho-surface-fg-muted);
}

.moinho-sobre-contato__acao {
	grid-area: acao;
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-3xs);
	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;
}