/* =========================================================================
   PAGES — EXPERTISES
   =========================================================================
   Pagina densa: box, abas e trilhas deslizantes no lugar de secoes longas
   empilhadas. Toda peca visual usa a mesma moldura, o mesmo raio e o mesmo
   respiro, com ou sem foto dentro.

   Regras respeitadas aqui:
   - Nenhum valor cru de cor, fonte, espacamento, raio ou duracao.
   - Todo bloco le --moinho-surface-*, para .moinho-surface e .moinho-invert
     funcionarem sem CSS duplicado.
   - Breakpoints permitidos: 767px / 768px / 1024px / 1280px / 1600px.

   GUARDA DE TIPOGRAFIA
   O Elementor injeta um kit global com `.elementor-kit-NN h1 { ... }`, que
   tem a mesma forca de um seletor de classe mais um elemento. Um seletor de
   classe unica perde para ele. Por isso todo titulo desta pagina e escrito
   com DUAS classes (bloco + elemento). Nao simplifique para uma classe so:
   o titulo volta a virar Anton 300px.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Base da pagina e guarda de tipografia
   ---------------------------------------------------------------------- */

.moinho-xp {
	position: relative;
	isolation: isolate;

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

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

.moinho-xp :is(h1, h2, h3, h4),
.moinho-xp-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;
}

/* Texto corrido justificado, sem hifenizacao. Abaixo de 768px a coluna fica
   estreita demais: justificar ali abre rios de espaco entre palavras. */
.moinho-xp :is(p, dd, li) {
	hyphens: none;
	-webkit-hyphens: none;
}

@media (min-width: 48rem) {
	.moinho-xp :is(
		.moinho-xp-head__texto,
		.moinho-xp-abertura__texto,
		.moinho-xp-sintoma__texto,
		.moinho-xp-painel__texto,
		.moinho-xp-cenario__texto,
		.moinho-xp-cenario__sinal,
		.moinho-xp-etapa__texto,
		.moinho-xp-etapa__detalhes dd,
		.moinho-xp-setores__texto,
		.moinho-xp-rota__texto,
		.moinho-xp-box__nota,
		.moinho-xp-box__detalhe p,
		.moinho-xp-convite__texto,
		.moinho-accordion__corpo p
	) {
		text-align: var(--moinho-copy-align);
		text-wrap: pretty;
	}
}

/* Cabecalho de secao.
   Titulo e apoio alinhados pelo TOPO: alinhar pela base deixava o apoio
   solto no meio do vazio quando o titulo tinha tres linhas. */
.moinho-xp-head {
	display: grid;
	gap: var(--moinho-space-sm);
	margin-block-end: var(--moinho-space-lg);
}

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

	/* Alinha a primeira linha do apoio com a primeira linha do titulo. */
	.moinho-xp-head--split .moinho-xp-head__texto {
		padding-block-start: var(--moinho-space-3xs);
	}
}

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

.moinho-xp-head .moinho-xp-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: mesma medida em toda a pagina. */
.moinho-xp :is(
	.moinho-xp-atalho__icone,
	.moinho-xp-sintoma__icone,
	.moinho-xp-cenario__icone,
	.moinho-xp-etapa__icone,
	.moinho-xp-setores__icone,
	.moinho-xp-rota__icone,
	.moinho-xp-convite__icone,
	.moinho-xp-box__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-xp-abertura {
	overflow: hidden;
	padding-block: var(--moinho-space-2xl);
	background-color: var(--moinho-surface-bg);
}

.moinho-xp-abertura__luz {
	position: absolute;
	z-index: -1;
	inset-block-start: -34%;
	inset-inline-end: -12%;
	inline-size: min(40rem, 68vw);
	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));
}

.moinho-xp-abertura__inner {
	display: grid;
	gap: var(--moinho-space-xl);
	/* Texto no topo, alinhado com a primeira linha dos blocos (cliente, 18/09/2026). */
	align-items: start;
	grid-template-columns: minmax(0, 1fr);
}

.moinho-xp-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-xp-abertura .moinho-xp-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-xp-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-normal);
	color: var(--moinho-surface-fg-muted);
}

.moinho-xp-abertura__texto--apoio {
	margin-block-end: var(--moinho-space-md);
}

/* Atalhos: quatro box iguais, dois a dois. */
.moinho-xp-atalhos {
	display: grid;
	gap: var(--moinho-space-2xs);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

a.moinho-xp-atalho {
	position: relative;
	display: grid;
	gap: var(--moinho-space-2xs);
	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 62%
		),
		var(--moinho-card-bg);
	text-decoration: none;
	color: inherit;
	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) {
	a.moinho-xp-atalho:hover {
		transform: translate3d(0, -0.25rem, 0);
		border-color: var(--moinho-color-border-strong);
		box-shadow: var(--moinho-shadow-md);
	}

	.moinho-xp-atalho:hover .moinho-xp-atalho__icone {
		transform: scale(1.06);
	}

	.moinho-xp-atalho:hover .moinho-xp-atalho__seta {
		transform: translate3d(0.15rem, -0.15rem, 0);
		opacity: 1;
	}
}

.moinho-xp-atalho__titulo {
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-weight-semibold);
	color: var(--moinho-surface-fg);
}

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

.moinho-xp-atalho__seta {
	position: absolute;
	inset-block-start: var(--moinho-space-sm);
	inset-inline-end: var(--moinho-space-sm);
	opacity: 0.4;
	color: var(--moinho-color-primary-readable);
	--moinho-icon-size: 1rem;
	transition: transform var(--moinho-duration-normal) var(--moinho-ease-out),
	            opacity var(--moinho-duration-normal) var(--moinho-ease-out);
}

/* =========================================================================
   02 — SINTOMAS
   ========================================================================= */

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

.moinho-xp-sintoma {
	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-lg);
	background:
		radial-gradient(
			circle at var(--moinho-pointer-x, 50%) var(--moinho-pointer-y, 0%),
			var(--moinho-color-primary-soft),
			transparent 58%
		),
		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-xp-sintoma:hover {
		transform: translate3d(0, -0.25rem, 0);
		border-color: var(--moinho-color-border-strong);
		box-shadow: var(--moinho-shadow-md);
	}

	.moinho-xp-sintoma:hover .moinho-xp-sintoma__icone {
		transform: scale(1.06);
	}
}

.moinho-xp-sintoma .moinho-xp-sintoma__titulo {
	margin: var(--moinho-space-2xs) 0 0;
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-weight-semibold);
}

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

a.moinho-xp-sintoma__link {
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-2xs);
	margin-block-start: var(--moinho-space-2xs);
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-weight-semibold);
	letter-spacing: var(--moinho-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--moinho-color-primary-readable);
	--moinho-icon-size: 1rem;
	transition: gap var(--moinho-duration-normal) var(--moinho-ease-out);
}

@media (hover: hover) {
	a.moinho-xp-sintoma__link:hover {
		gap: var(--moinho-space-xs);
	}
}

/* =========================================================================
   03 — PALCO DAS FRENTES
   ========================================================================= */

.moinho-xp-palco__caixa {
	display: grid;
	gap: var(--moinho-space-lg);
	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);
	box-shadow: inset 0 1px 0 var(--moinho-color-glass-border), var(--moinho-shadow-md);
}

@media (min-width: 64rem) {
	.moinho-xp-palco__caixa {
		padding: var(--moinho-space-lg);
	}
}

/* Abas: trilha rolavel em telas estreitas, linha inteira no desktop. */
.moinho-xp-abas {
	display: flex;
	gap: var(--moinho-space-2xs);
	overflow-x: auto;
	padding-block-end: var(--moinho-space-3xs);
	scrollbar-width: none;
	scroll-snap-type: x mandatory;
}

.moinho-xp-abas::-webkit-scrollbar {
	display: none;
}

a.moinho-xp-aba {
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-2xs);
	flex: none;
	padding-block: var(--moinho-space-2xs);
	padding-inline: var(--moinho-space-sm);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-pill);
	background: var(--moinho-color-glass);
	scroll-snap-align: start;
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-small-size);
	font-weight: var(--moinho-weight-semibold);
	text-decoration: none;
	color: var(--moinho-surface-fg-muted);
	--moinho-icon-size: 1.125rem;
	transition: color var(--moinho-duration-normal) var(--moinho-ease-out),
	            background-color var(--moinho-duration-normal) var(--moinho-ease-out),
	            border-color var(--moinho-duration-normal) var(--moinho-ease-out);
}

.moinho-xp-aba__icone {
	display: inline-flex;
	color: var(--moinho-color-primary-readable);
}

@media (hover: hover) {
	a.moinho-xp-aba:hover {
		color: var(--moinho-surface-fg);
		border-color: var(--moinho-color-border-strong);
	}
}

a.moinho-xp-aba.is-ativo {
	border-color: transparent;
	background: var(--moinho-liquid-primary);
	color: var(--moinho-color-text-on-brand);
	box-shadow: var(--moinho-liquid-shadow);
}

.moinho-xp-aba.is-ativo .moinho-xp-aba__icone {
	color: var(--moinho-color-text-on-brand);
	animation: moinho-xp-pulso 3.2s var(--moinho-ease-in-out) infinite;
}

@keyframes moinho-xp-pulso {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.12); }
}

/* Paineis. Sem JS todos ficam visiveis; com JS, um por vez. */
.moinho-xp-paineis {
	display: grid;
	gap: var(--moinho-space-lg);
}

.moinho-xp-palco__caixa.is-js .moinho-xp-painel:not(.is-ativo) {
	display: none;
}

.moinho-xp-palco__caixa.is-js .moinho-xp-painel.is-ativo {
	animation: moinho-xp-entra var(--moinho-duration-slow) var(--moinho-ease-out) both;
}

@keyframes moinho-xp-entra {
	from { opacity: 0; transform: translate3d(0, 0.75rem, 0); }
	to { opacity: 1; transform: none; }
}

.moinho-xp-painel:focus-visible {
	outline: var(--moinho-border-width-strong) solid var(--moinho-color-focus);
	outline-offset: var(--moinho-focus-ring-offset);
}

.moinho-xp-painel__inner {
	display: grid;
	gap: var(--moinho-space-lg);
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 64rem) {
	.moinho-xp-painel__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
		gap: var(--moinho-space-xl);
	}
}

.moinho-xp-painel__numero {
	margin: 0 0 var(--moinho-space-3xs);
	font-family: var(--moinho-font-mono);
	font-size: var(--moinho-role-small-size);
	color: var(--moinho-color-primary-readable);
}

.moinho-xp-painel .moinho-xp-painel__titulo {
	margin: 0 0 var(--moinho-space-2xs);
	font-size: var(--moinho-role-h3-size);
	font-weight: var(--moinho-weight-bold);
}

.moinho-xp-painel__lead {
	max-inline-size: 42ch;
	margin: 0 0 var(--moinho-space-sm);
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-weight-medium);
	line-height: var(--moinho-leading-heading);
	color: var(--moinho-color-primary-readable);
	text-wrap: balance;
}

.moinho-xp-painel__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-xp-painel .moinho-xp-painel__rotulo {
	margin: var(--moinho-space-sm) 0 var(--moinho-space-xs);
	font-family: var(--moinho-font-body);
	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-surface-fg-muted);
}

.moinho-xp-entregas {
	display: grid;
	gap: var(--moinho-space-3xs) var(--moinho-space-md);
	margin: 0 0 var(--moinho-space-md);
	padding: 0;
	list-style: none;
	grid-template-columns: minmax(0, 1fr);
}

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

.moinho-xp-entregas li {
	display: grid;
	gap: var(--moinho-space-2xs);
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	padding-block: var(--moinho-space-2xs);
	border-block-end: var(--moinho-border-width) solid var(--moinho-surface-border);
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-leading-normal);
	color: var(--moinho-surface-fg);
}

.moinho-xp-entregas li .moinho-icon {
	color: var(--moinho-color-primary-readable);
	--moinho-icon-size: 1rem;
}

.moinho-xp-painel__rodape {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--moinho-space-sm);
}

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

.moinho-xp-painel__inicio .moinho-icon {
	color: var(--moinho-color-secondary-readable);
}

/* Box lateral: a peca visual da frente, com ou sem foto. */
.moinho-xp-box {
	position: relative;
	overflow: hidden;
	display: grid;
	margin: 0;
	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, 30%) var(--moinho-pointer-y, 15%),
			var(--moinho-color-brand-glow),
			transparent 58%
		),
		linear-gradient(155deg, var(--moinho-color-primary-soft), transparent 64%),
		var(--moinho-surface-bg);
	box-shadow: var(--moinho-shadow-md);
}

.moinho-xp-box::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(var(--moinho-cosmos-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--moinho-cosmos-grid) 1px, transparent 1px);
	background-size: 44px 44px, 44px 44px;
	pointer-events: none;
}

.moinho-xp-box__midia {
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.moinho-xp-box__foto {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	transition: transform var(--moinho-duration-slow) var(--moinho-ease-out);
}

@media (hover: hover) {
	.moinho-xp-box:hover .moinho-xp-box__foto {
		transform: scale(1.04);
	}
}

.moinho-xp-box__corpo {
	position: relative;
	display: grid;
	gap: var(--moinho-space-2xs);
	justify-items: start;
	padding: var(--moinho-space-md);
}

.moinho-xp-box .moinho-xp-box__palavra {
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-h2-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-xp-box__nota {
	max-inline-size: 28ch;
	margin: 0;
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-leading-normal);
	color: var(--moinho-surface-fg-muted);
}

.moinho-xp-box__detalhe {
	position: relative;
	display: grid;
	gap: var(--moinho-space-3xs);
	padding: var(--moinho-space-md);
	border-block-start: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-inline-start: var(--moinho-border-width-strong) solid var(--moinho-color-primary-readable);
	background: var(--moinho-color-glass);
	backdrop-filter: blur(var(--moinho-glass-blur));
	-webkit-backdrop-filter: blur(var(--moinho-glass-blur));
}

.moinho-xp-box__detalhe span {
	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-surface-fg-muted);
}

.moinho-xp-box__detalhe p {
	margin: 0;
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-leading-relaxed);
	color: var(--moinho-surface-fg);
}

/* =========================================================================
   04 e 05 — CARTOES DAS TRILHAS
   A area rolavel e os controles vivem em components/trilha. Aqui ficam so
   os cartoes que entram dentro dela.
   ========================================================================= */

/* Cartao de cenario */
.moinho-xp-cenario,
.moinho-xp-etapa {
	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-xp-cenario:hover,
	.moinho-xp-etapa:hover {
		transform: translate3d(0, -0.25rem, 0);
		border-color: var(--moinho-color-border-strong);
		box-shadow: var(--moinho-shadow-md);
	}

	.moinho-xp-cenario:hover .moinho-xp-cenario__icone,
	.moinho-xp-etapa:hover .moinho-xp-etapa__icone {
		transform: scale(1.06);
	}
}

.moinho-xp-cenario__topo,
.moinho-xp-etapa__topo {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--moinho-space-sm);
}

.moinho-xp-cenario__numero,
.moinho-xp-etapa__numero {
	font-family: var(--moinho-font-mono);
	font-size: var(--moinho-role-small-size);
	color: var(--moinho-color-primary-readable);
}

.moinho-xp-cenario .moinho-xp-cenario__titulo,
.moinho-xp-etapa .moinho-xp-etapa__titulo {
	margin: var(--moinho-space-2xs) 0 0;
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-weight-semibold);
}

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

.moinho-xp-cenario__sinal {
	margin: 0;
	padding-inline-start: var(--moinho-space-xs);
	border-inline-start: var(--moinho-border-width-strong) solid var(--moinho-color-secondary-readable);
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-leading-normal);
	color: var(--moinho-surface-fg);
}

.moinho-xp-passos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--moinho-space-2xs);
	margin: var(--moinho-space-2xs) 0 0;
	padding: 0;
	list-style: none;
}

.moinho-xp-passos li {
	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);
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-weight-medium);
	letter-spacing: var(--moinho-tracking-wide);
	color: var(--moinho-surface-fg);
}

/* Etapas: os dois detalhes que evitam projeto travado. */
.moinho-xp-etapa__detalhes {
	display: grid;
	gap: var(--moinho-space-xs);
	margin: var(--moinho-space-2xs) 0 0;
}

.moinho-xp-etapa__detalhes > div {
	padding-block-start: var(--moinho-space-2xs);
	border-block-start: var(--moinho-border-width) solid var(--moinho-surface-border);
}

.moinho-xp-etapa__detalhes dt {
	margin-block-end: var(--moinho-space-3xs);
	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-xp-etapa__detalhes dd {
	margin: 0;
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-leading-normal);
	color: var(--moinho-surface-fg);
}

/* =========================================================================
   06 — SETORES
   ========================================================================= */

.moinho-xp-setores__box {
	display: grid;
	gap: var(--moinho-space-lg);
	grid-template-columns: minmax(0, 1fr);
	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, 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);
}

@media (min-width: 64rem) {
	.moinho-xp-setores__box {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
		align-items: center;
		padding: var(--moinho-space-xl);
	}
}

.moinho-xp-setores__corpo {
	display: grid;
	gap: var(--moinho-space-xs);
	justify-items: start;
}

.moinho-xp-setores .moinho-xp-setores__titulo {
	margin: 0;
	font-size: var(--moinho-role-h3-size);
	font-weight: var(--moinho-weight-semibold);
}

.moinho-xp-setores__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-xp-pilulas {
	display: flex;
	flex-wrap: wrap;
	gap: var(--moinho-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.moinho-xp-pilulas li {
	padding-block: var(--moinho-space-2xs);
	padding-inline: var(--moinho-space-sm);
	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-small-size);
	color: var(--moinho-surface-fg);
	transition: transform var(--moinho-duration-normal) var(--moinho-ease-spring),
	            border-color var(--moinho-duration-normal) var(--moinho-ease-out);
}

@media (hover: hover) {
	.moinho-xp-pilulas li:hover {
		transform: translate3d(0, -0.125rem, 0);
		border-color: var(--moinho-color-border-strong);
	}
}

.moinho-xp-rota {
	display: grid;
	gap: var(--moinho-space-sm);
	align-items: center;
	grid-template-columns: minmax(0, 1fr);
	margin-block-start: var(--moinho-space-sm);
	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, 84%) var(--moinho-pointer-y, 12%),
			var(--moinho-color-secondary-soft),
			transparent 52%
		),
		var(--moinho-card-bg);
}

@media (min-width: 64rem) {
	.moinho-xp-rota {
		grid-template-columns: auto minmax(0, 1fr) auto;
		padding-inline: var(--moinho-space-xl);
	}
}

.moinho-xp-rota__icone {
	color: var(--moinho-color-secondary-readable);
}

.moinho-xp-rota .moinho-xp-rota__titulo {
	margin: 0 0 var(--moinho-space-3xs);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-weight-semibold);
}

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

/* =========================================================================
   07 — PERGUNTAS
   ========================================================================= */

/* O acordeao e o componente de UI. Aqui fica so o que e desta pagina: as duas
   colunas, por multi-coluna e nao por grade. Com grade, as duas celulas de uma
   linha compartilham altura e abrir uma resposta abria um buraco do outro
   lado. O componente usa flex; a coluna multipla precisa de block. */
.moinho-accordion.moinho-xp-faq__lista {
	display: block;
	column-gap: var(--moinho-space-2xl);
}

@media (min-width: 64rem) {
	.moinho-accordion.moinho-xp-faq__lista {
		columns: 2;
		column-fill: balance;
	}
}

.moinho-xp-faq__lista .moinho-accordion__item {
	break-inside: avoid;
	margin-block-end: var(--moinho-space-2xs);
}

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

.moinho-xp-convite__inner {
	position: relative;
	overflow: hidden;
	display: grid;
	gap: var(--moinho-space-sm);
	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-xp-convite__inner {
		padding: var(--moinho-space-2xl);
	}
}

.moinho-xp-convite .moinho-xp-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-xp-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);
}

/* -------------------------------------------------------------------------
   Movimento reduzido
   ---------------------------------------------------------------------- */

/* =========================================================================
   FAIXA FOTOGRAFICA DO PROCESSO
   =========================================================================
   Fecha a secao de etapas. Sangra a largura da tela; o `clip` no bloco raiz
   e o que impede a barra de rolagem horizontal que 100vw traria.
   ========================================================================= */

.moinho-xp-processo__faixa {
	margin-block-start: var(--moinho-space-xl);
}


/* Numero da solucao no atalho da abertura. */
.moinho-xp-atalho__numero {
	font-family: var(--moinho-font-mono);
	font-size: var(--moinho-role-label-size);
	color: var(--moinho-color-primary-readable);
}

/* =========================================================================
   09 — AS SETE SOLUCOES
   Uma secao por solucao, alternando a superficie. Numero, icone e nome a
   esquerda; dois paragrafos e o CTA a direita. Nada de card interno.
   ========================================================================= */

.moinho-xp-solucao {
	scroll-margin-block-start: var(--moinho-space-xl);
}

.moinho-xp-solucao__inner {
	display: grid;
	gap: var(--moinho-space-lg);
}

@media (min-width: 64rem) {
	.moinho-xp-solucao__inner {
		grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
		gap: var(--moinho-space-2xl);
		align-items: start;
	}
}

/*
 * Numero e icone na primeira linha, titulo na segunda. A terceira coluna
 * (1fr) absorve a largura do titulo: com duas colunas `auto`, o titulo
 * ocupando as duas esticava a coluna do icone e ele mudava de lugar em
 * cada bloco (cliente, 18/09/2026).
 */
.moinho-xp-solucao__cabeca {
	display: grid;
	grid-template-columns: max-content max-content minmax(0, 1fr);
	grid-template-areas:
		"numero icone ."
		"titulo titulo titulo";
	justify-content: start;
	align-items: center;
	column-gap: var(--moinho-space-sm);
	row-gap: var(--moinho-space-sm);
}

.moinho-xp-solucao__numero {
	grid-area: numero;
	font-family: var(--moinho-font-mono);
	font-size: var(--moinho-role-h3-size);
	color: var(--moinho-color-primary-readable);
}

.moinho-xp-solucao__icone {
	grid-area: icone;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3rem;
	block-size: 3rem;
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-md);
	background: var(--moinho-color-glass);
	color: var(--moinho-color-primary-readable);
	--moinho-icon-size: 1.5rem;
}

.moinho-xp-solucao .moinho-xp-solucao__titulo {
	grid-area: titulo;
	max-inline-size: var(--moinho-heading-measure);
	margin: 0;
	font-size: var(--moinho-role-h2-size);
	font-weight: var(--moinho-weight-semibold);
	line-height: var(--moinho-leading-tight);
}

.moinho-xp-solucao__corpo {
	display: grid;
	gap: var(--moinho-space-sm);
	max-inline-size: var(--moinho-copy-measure);
}

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

.moinho-xp-solucao__acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--moinho-space-sm) var(--moinho-space-md);
	margin-block-start: var(--moinho-space-sm);
}

/* =========================================================================
   10 — CASES E PROJETOS
   Grade de tres colunas com filtro por solucao. O filtro esconde celulas
   pelo JS; sem JS todas aparecem e cada pilula e um link para o arquivo.
   ========================================================================= */

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

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

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

.moinho-xp-cases__celula {
	display: flex;
	margin: 0;
}

.moinho-xp-cases__celula > * {
	inline-size: 100%;
}

.moinho-xp-cases__celula[hidden] {
	display: none;
}

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