/* HOME — direção editorial Moinho. O vídeo concentra a expressão; o restante
   usa tipografia, linhas e contraste para organizar o conteúdo. */

/* Atmosfera — mesh, grade, orbes e grain derivados do Sistema Apresentacao. */
.home .moinho-site__conteudo {
	position: relative;
	isolation: isolate;
	background-color: var(--moinho-cosmos-base);
}

.home .moinho-home-atmosphere {
	position: fixed;
	z-index: 0;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	background:
		radial-gradient(ellipse 74% 58% at 48% -8%, var(--moinho-cosmos-mesh), transparent 62%),
		radial-gradient(ellipse 58% 48% at 92% 58%, var(--moinho-cosmos-blue), transparent 64%),
		radial-gradient(ellipse 72% 60% at 0% 100%, color-mix(in srgb, var(--moinho-cosmos-mesh) 58%, transparent), transparent 62%),
		var(--moinho-cosmos-base);
	animation: moinho-cosmos-mesh 32s ease-in-out infinite alternate;
	transform-origin: 50% 42%;
	will-change: transform;
}

.home .moinho-home-atmosphere::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(var(--moinho-cosmos-grid) 1px, transparent 1px),
		linear-gradient(90deg, var(--moinho-cosmos-grid) 1px, transparent 1px),
		radial-gradient(ellipse 110% 80% at 50% 50%, transparent 52%, var(--moinho-cosmos-vignette) 100%);
	background-size: 72px 72px, 72px 72px, 100% 100%;
	opacity: 0.72;
}

.home .moinho-home-atmosphere__orb {
	position: absolute;
	border-radius: var(--moinho-radius-circle);
	filter: blur(80px);
	opacity: 0.56;
	will-change: transform, opacity;
}

.home .moinho-home-atmosphere__orb--1 {
	inset-block-start: -12rem;
	inset-inline-start: -9rem;
	inline-size: 35rem;
	block-size: 35rem;
	background: radial-gradient(circle, var(--moinho-cosmos-mesh), transparent 66%);
	animation: moinho-cosmos-orb-1 30s ease-in-out infinite alternate;
}

.home .moinho-home-atmosphere__orb--2 {
	inset-inline-end: -10rem;
	inset-block-end: -14rem;
	inline-size: 33rem;
	block-size: 33rem;
	background: radial-gradient(circle, var(--moinho-cosmos-blue), transparent 66%);
	animation: moinho-cosmos-orb-2 36s ease-in-out infinite alternate;
}

.home .moinho-home-atmosphere__orb--3 {
	inset-block-start: 44%;
	inset-inline-start: 56%;
	inline-size: 27rem;
	block-size: 27rem;
	background: radial-gradient(circle, var(--moinho-cosmos-mesh), transparent 66%);
	animation: moinho-cosmos-orb-3 42s ease-in-out infinite alternate;
}

.home .moinho-home-atmosphere__orb--4 {
	inset-block-start: 12%;
	inset-inline-end: 26%;
	inline-size: 21rem;
	block-size: 21rem;
	background: radial-gradient(circle, var(--moinho-cosmos-blue), transparent 66%);
	animation: moinho-cosmos-orb-4 48s ease-in-out infinite alternate;
}

.home .moinho-home-atmosphere__grain {
	position: absolute;
	inset: -50%;
	background-image: radial-gradient(var(--moinho-cosmos-grain) 1px, transparent 1px);
	background-size: 3px 3px;
	opacity: 0.34;
	mix-blend-mode: overlay;
	animation: moinho-cosmos-grain 8s steps(8) infinite;
}

.home .moinho-section {
	z-index: 1;
	background-color: transparent;
}

.home :is(.moinho-about, .moinho-diferenciais, .moinho-depoimentos, .moinho-blog) {
	background: var(--moinho-home-section-glass);
	border-block: var(--moinho-border-width) solid var(--moinho-home-card-border);
	box-shadow: inset 0 1px 0 var(--moinho-home-card-highlight);
	backdrop-filter: blur(22px) saturate(120%);
	-webkit-backdrop-filter: blur(22px) saturate(120%);
}

.moinho-theme-ready .home .moinho-site__conteudo,
.moinho-theme-ready .home .moinho-section {
	transition: background-color var(--moinho-duration-normal) var(--moinho-ease-default), color var(--moinho-duration-normal) var(--moinho-ease-default);
}

/* Hero */
.home .moinho-hero {
	position: relative; isolation: isolate; display: grid; align-items: center;
	min-block-size: 100svh;
	padding-block: clamp(5rem, 10vh, 8rem); overflow: hidden;
	background-color: var(--moinho-color-surface-strong);
}
.home .moinho-hero__silk {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
	background: var(--moinho-silk-fallback);
}
.home .moinho-hero__inner {
	position: relative;
	z-index: 1;
}
.home .moinho-hero__silk-canvas {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	opacity: 0;
}
/* Mantem movimento quando o navegador ou driver nao disponibiliza WebGL. */
.home .moinho-hero__silk[data-silk-renderer="css"]::before {
	content: "";
	position: absolute;
	inset: -25%;
	background: var(--moinho-silk-fallback);
	background-size: 180% 180%;
	animation: moinho-silk-fallback 12s ease-in-out infinite alternate;
}
.home .moinho-hero__silk[data-silk-active="false"]::before {
	animation-play-state: paused;
}
@keyframes moinho-silk-fallback {
	from { transform: translate3d(-6%, -4%, 0) rotate(-8deg); background-position: 0% 30%; }
	to { transform: translate3d(6%, 4%, 0) rotate(8deg); background-position: 100% 70%; }
}
.home .moinho-hero__silk::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--moinho-silk-scrim);
}
@media (max-width: 47.9375rem) {
	.home .moinho-hero__silk::after {
		background: var(--moinho-silk-scrim-mobile);
	}
}
.home .moinho-hero__video, .home .moinho-hero__video-overlay {
	position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
}
.home .moinho-hero__video { z-index: -3; object-fit: cover; object-position: center; }
.home .moinho-hero__video-overlay {
	z-index: -2;
	background: linear-gradient(90deg, rgb(18 10 26 / .92), rgb(18 10 26 / .72) 48%, rgb(18 10 26 / .28)), linear-gradient(0deg, rgb(18 10 26 / .3), transparent 42%);
}
.home .moinho-hero__luz {
	position: absolute; z-index: -1; inset-inline-end: -12%; inset-block-end: -38%;
	inline-size: min(48rem, 64vw); aspect-ratio: 1; border-radius: var(--moinho-radius-circle);
	background: var(--moinho-color-brand-glow); filter: blur(var(--moinho-space-xl)); opacity: .55;
}
/* As variaveis de superficie do hero vinham declaradas aqui, na mao. Agora
   a secao recebe .moinho-invert no PHP e herda tudo do Design System —
   inclusive o comportamento correto de botao, foco e borda. */
.home .moinho-hero__corpo {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-inline-size: 58rem;
}
.home .moinho-hero__selo {
	display: inline-flex; align-items: center; min-block-size: 2.25rem;
	margin: 0 0 var(--moinho-heading-gap); padding-inline: var(--moinho-space-xs);
	border: var(--moinho-border-width) solid var(--moinho-color-border-on-dark);
	border-radius: var(--moinho-radius-pill); background: rgb(255 255 255 / .08);
	backdrop-filter: blur(var(--moinho-space-sm)); font-family: var(--moinho-font-body);
	font-size: var(--moinho-role-label-size); font-weight: var(--moinho-weight-medium);
	letter-spacing: var(--moinho-tracking-wide); color: var(--moinho-color-text-on-dark-muted);
}
.home .moinho-hero__titulo {
	max-inline-size: 100%; margin: 0 0 var(--moinho-space-sm);
	font-family: var(--moinho-role-display-family); font-size: var(--moinho-role-display-size); font-weight: var(--moinho-role-display-weight); line-height: var(--moinho-role-display-leading); letter-spacing: var(--moinho-role-display-tracking);
	color: var(--moinho-color-text-on-brand); text-align: start; text-wrap: balance;
}
.home .moinho-hero__titulo-linha,
.home .moinho-hero__titulo-linha-inner {
	display: block;
}

/* A primeira frase estabelece a ideia; a segunda chega puxada por ela.
   O estado depende de .moinho-motion: sem JS ou com movimento reduzido,
   as duas linhas permanecem visiveis e na posicao final. */
@media all {
	.moinho-motion .home .moinho-hero__titulo[data-moinho-hero-title] {
		opacity: 1;
		transform: none;
		will-change: auto;
	}
	.moinho-motion .home .moinho-hero__titulo-linha-inner {
		opacity: 0;
		transform: translate3d(0, 0.48em, 0);
		will-change: opacity, transform;
	}
	.moinho-motion .home .moinho-hero__titulo-linha--2 .moinho-hero__titulo-linha-inner {
		transform: translate3d(-0.9em, 0.18em, 0);
	}
	.moinho-motion .home .moinho-hero__titulo.is-revealed .moinho-hero__titulo-linha-inner {
		opacity: 1;
		transform: none;
		transition:
			opacity var(--moinho-duration-reveal) var(--moinho-ease-out),
			transform var(--moinho-duration-reveal) var(--moinho-ease-out);
		transition-delay: calc(var(--moinho-stagger) * 2);
		will-change: auto;
	}
	.moinho-motion .home .moinho-hero__titulo.is-revealed .moinho-hero__titulo-linha--2 .moinho-hero__titulo-linha-inner {
		transition-delay: calc(var(--moinho-stagger) * 6);
	}
}
.home .moinho-hero__texto {
	max-inline-size: 42rem; margin: 0 0 var(--moinho-space-lg);
	font-size: var(--moinho-role-body-lg-size); line-height: var(--moinho-role-body-lg-leading);
	color: var(--moinho-color-text-on-dark-muted);
	text-align: var(--moinho-copy-align);
	text-align-last: start;
	text-wrap: pretty;
	-webkit-hyphens: none;
	hyphens: none;
	word-break: normal;
	overflow-wrap: break-word;
}
/* Os 7 !important que existiam aqui foram removidos junto com a causa.
   A altura vem de .moinho-button--lg (que voltou a funcionar) e a cor, de
   .moinho-invert na secao. A pagina nao precisa mais corrigir o componente. */

/* O que fazemos — indice editorial em uma unica peca de vidro. */
.home .moinho-rotas { padding-block: var(--moinho-section-space); overflow: visible; }
.home .moinho-rotas__cabecalho {
	display: grid;
	grid-template-columns: minmax(8rem, .34fr) minmax(0, 1fr);
	align-items: start;
	gap: var(--moinho-space-lg);
	margin-block-end: var(--moinho-space-xl);
}
.home .moinho-rotas__eyebrow { margin-block-start: .6rem; color: var(--moinho-color-primary-readable); }
.home .moinho-rotas__titulo {
	max-inline-size: var(--moinho-heading-measure);
	margin: 0;
	font: var(--moinho-role-h2-weight) var(--moinho-role-h2-size)/var(--moinho-role-h2-leading) var(--moinho-role-heading-family); letter-spacing: var(--moinho-role-h2-tracking);
	color: var(--moinho-color-text);
}
/* A pilha herda a gramatica de movimento dos principios: cada frente fica
   sticky e a de baixo passa por cima. O empilhamento e CSS puro; o GSAP so
   escurece e recua o cartao que ficou atras. */
.home .moinho-rotas__pilha {
	/*
	 * Bloco, nao grid, de proposito. Item de grid tem a propria area como
	 * bloco continente, e sticky preso a uma linha de altura automatica nao
	 * tem para onde deslizar - o empilhamento simplesmente nao acontece.
	 * Em fluxo normal os quatro cartoes dividem o mesmo continente e o
	 * sticky funciona de verdade.
	 */
	display: flow-root;
	max-inline-size: 78rem;
	margin-inline: auto;
}
.home .moinho-rotas__item + .moinho-rotas__item {
	margin-block-start: var(--moinho-space-lg);
}
.home .moinho-rotas__item {
	--moinho-route-accent: var(--moinho-color-primary-readable);
	position: sticky;
	inset-block-start: calc(8vh + var(--moinho-principle-offset, 0rem));
	isolation: isolate;
	display: grid;
	/* Colunas iguais em todos os cartoes (cliente, 21/09/2026): a quarta
	   coluna era `auto` e a largura do CTA ("Ver branding" x "Ver comunicacao
	   visual") deslocava o texto e o botao de um cartao para o outro. */
	grid-template-columns: 3.5rem minmax(0, .72fr) minmax(0, 1.15fr) clamp(12rem, 15vw, 14.5rem);
	align-items: center;
	gap: clamp(1rem, 2.2vw, 2.25rem);
	min-block-size: 13rem;
	padding: var(--moinho-space-lg);
	overflow: hidden;
	border: var(--moinho-border-width) solid var(--moinho-home-card-border);
	border-radius: var(--moinho-radius-panel);
	background: linear-gradient(145deg, rgb(255 255 255 / .82), rgb(248 245 251 / .54));
	color: var(--moinho-color-text);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .94), 0 36px 90px -60px rgb(46 29 61 / .58);
	-webkit-backdrop-filter: blur(24px) saturate(135%);
	backdrop-filter: blur(24px) saturate(135%);
	transition: background-color var(--moinho-duration-normal) var(--moinho-ease-default), color var(--moinho-duration-fast) var(--moinho-ease-default);
}
/* A luz de marca vive dentro do cartao, nao mais no painel unico. */
.home .moinho-rotas__item::after {
	content: "";
	position: absolute;
	z-index: -1;
	inset: -60% -10% auto 52%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, var(--moinho-color-secondary-glow), transparent 66%);
	filter: blur(1.5rem);
	pointer-events: none;
}
.home .moinho-rotas__item:nth-child(even) { --moinho-route-accent: var(--moinho-color-secondary-readable); }
.home .moinho-rotas__item::before {
	content: "";
	position: absolute;
	inset-block: 18%;
	inset-inline-start: 0;
	inline-size: 3px;
	border-radius: var(--moinho-radius-pill);
	background: var(--moinho-route-accent);
	transform: scaleY(.22);
	opacity: .22;
	transition: transform var(--moinho-duration-normal) var(--moinho-ease-out), opacity var(--moinho-duration-fast) var(--moinho-ease-default);
}
.home .moinho-rotas__item--destaque { color: var(--moinho-color-text); }

.home .moinho-rotas__item-icon {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	inline-size: 3.5rem;
	block-size: 3.5rem;
	border: var(--moinho-border-width) solid color-mix(in srgb, var(--moinho-route-accent) 28%, transparent);
	border-radius: 1.15rem;
	background: linear-gradient(145deg, rgb(255 255 255 / .8), rgb(255 255 255 / .26));
	color: var(--moinho-route-accent);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .94), 0 12px 30px -22px var(--moinho-route-accent);
	transition: transform var(--moinho-duration-normal) var(--moinho-ease-out), background-color var(--moinho-duration-fast) var(--moinho-ease-default);
}
/* `svg.moinho-icon` em base.css ja le --moinho-icon-size e ja normaliza
   traco e preenchimento. Redeclarar tamanho aqui era duplicacao. */
.home .moinho-rotas__item-icon .moinho-icon {
	--moinho-icon-size: 1.45rem;
	color: inherit;
}
.home .moinho-rotas__item-cabeca { display: grid; gap: var(--moinho-space-3xs); min-inline-size: 0; }
.home .moinho-rotas__item-numero {
	font: var(--moinho-weight-semibold) var(--moinho-role-label-size)/1 var(--moinho-font-body);
	letter-spacing: var(--moinho-role-label-tracking);
	color: var(--moinho-route-accent);
	font-variant-numeric: tabular-nums;
}
.home .moinho-rotas__item-titulo {
	max-inline-size: 15ch;
	font: var(--moinho-role-h3-weight) var(--moinho-role-h3-size)/var(--moinho-role-h3-leading) var(--moinho-role-heading-family); letter-spacing: var(--moinho-role-h3-tracking);
	color: inherit;
}
.home .moinho-rotas__item-titulo a { color: inherit; text-decoration: none; }
.home .moinho-rotas__item-titulo a::after { content: ""; position: absolute; z-index: 3; inset: 0; }
.home .moinho-rotas__item-texto, .home .moinho-rotas__item--destaque .moinho-rotas__item-texto {
	max-inline-size: 48ch;
	margin: 0;
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-role-body-leading);
	color: var(--moinho-color-text-muted);
	opacity: 1;
}
.home .moinho-rotas__item-cta {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
	gap: .7rem;
	min-block-size: 3rem;
	margin: 0;
	padding-inline-start: 1rem;
	border: var(--moinho-border-width) solid color-mix(in srgb, var(--moinho-route-accent) 26%, transparent);
	border-radius: var(--moinho-radius-pill);
	background: rgb(255 255 255 / .36);
	color: var(--moinho-route-accent);
	font: var(--moinho-weight-semibold) var(--moinho-role-label-size)/1 var(--moinho-font-body);
	white-space: nowrap;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .82);
	transition: background-color var(--moinho-duration-fast) var(--moinho-ease-default), color var(--moinho-duration-fast) var(--moinho-ease-default), border-color var(--moinho-duration-fast) var(--moinho-ease-default);
}
.home .moinho-rotas__item-cta-icon {
	display: grid;
	place-items: center;
	inline-size: 2.9rem;
	block-size: 2.9rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--moinho-route-accent) 12%, transparent);
}
.home .moinho-rotas__item-cta .moinho-icon {
	--moinho-icon-size: 1.05rem;
	color: inherit;
	transition: transform var(--moinho-duration-normal) var(--moinho-ease-out);
}
@media (hover: hover) {
	.home .moinho-rotas__item:hover { border-color: color-mix(in srgb, var(--moinho-route-accent) 42%, transparent); box-shadow: inset 0 1px 0 rgb(255 255 255 / .94), 0 42px 96px -56px rgb(46 29 61 / .68); }
	.home .moinho-rotas__item:hover::before { transform: scaleY(1); opacity: 1; }
	.home .moinho-rotas__item:hover .moinho-rotas__item-icon { transform: translateY(-2px) rotate(-3deg); background: rgb(255 255 255 / .78); }
	.home .moinho-rotas__item:hover .moinho-rotas__item-cta { border-color: var(--moinho-route-accent); background: var(--moinho-route-accent); color: var(--moinho-color-text-on-brand); }
	.home .moinho-rotas__item:hover .moinho-rotas__item-cta .moinho-icon { transform: translateX(.18rem); }
}

/* Sobre */
/*
 * Texto com a coluna maior (15/09/2026). Com .9fr/1.1fr o texto ficava em
 * 480px numa tela de 1288: o titulo novo, mais longo, quebrava em seis
 * linhas e o justificado abria rios. A foto continua uma por vez, so que
 * a 76% de uma coluna um pouco menor.
 */
.home .moinho-about__inner { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .92fr); align-items: stretch; gap: clamp(2.5rem, 5vw, 4.5rem); }
.home .moinho-about__corpo { display: flex; flex-direction: column; justify-content: center; padding-block: 0; }
.home .moinho-about__titulo {
	max-inline-size: var(--moinho-heading-measure); margin: 0 0 var(--moinho-space-sm);
	font: var(--moinho-role-h2-weight) var(--moinho-role-h2-size)/var(--moinho-role-h2-leading) var(--moinho-role-heading-family); letter-spacing: var(--moinho-role-h2-tracking);
}
.home .moinho-about__texto { max-inline-size: var(--moinho-copy-measure); margin-block-end: var(--moinho-space-sm); font-size: var(--moinho-role-body-size); line-height: var(--moinho-role-body-leading); color: var(--moinho-color-text-muted); }
/* Texto complementar: destaque por cor e peso medio, nao por tamanho. O
   semibold em body-lg brigava com o titulo e lia como segundo cabecalho. */
.home .moinho-about__texto--realce { margin-block-end: var(--moinho-space-md); font-size: var(--moinho-role-body-size); font-weight: var(--moinho-weight-medium); line-height: var(--moinho-role-body-leading); color: var(--moinho-color-text); }
.home .moinho-about__corpo .moinho-button { align-self: flex-start; }
.home .moinho-about__painel, .home .moinho-about__midia { min-block-size: clamp(24rem, 42vw, 36rem); border-radius: var(--moinho-radius-xl); }
.home .moinho-about__painel {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end;
	overflow: hidden; padding: var(--moinho-space-lg);
	background:
		radial-gradient(circle at 82% 12%, var(--moinho-color-secondary-glow), transparent 34%),
		linear-gradient(145deg, var(--moinho-roxo-700), var(--moinho-roxo-500) 55%, var(--moinho-azul-700));
	background-size: 140% 140%;
	color: var(--moinho-color-text-on-brand);
	box-shadow: var(--moinho-shadow-float), inset 0 1px 0 rgb(255 255 255 / .2);
	animation: moinho-panel-breathe 14s ease-in-out infinite alternate;
}
.home .moinho-about__painel::before { content: ""; position: absolute; inset: var(--moinho-space-md); border: var(--moinho-border-width) solid var(--moinho-color-border-on-dark); border-radius: var(--moinho-radius-lg); }
.home .moinho-about__painel-marca { position: absolute; inset-block-start: -12%; inset-inline-end: -14%; inline-size: clamp(13rem, 29vw, 26rem); /* ds-ok: marca d agua, tamanho posicional */ color: var(--moinho-color-marca-dagua); }
.home .moinho-about__painel-frase, .home .moinho-about__painel-local { position: relative; z-index: 1; color: var(--moinho-color-text-on-brand); }
.home .moinho-about__painel-frase { max-inline-size: 18ch; margin: 0 0 var(--moinho-space-sm); font: var(--moinho-role-h2-weight) var(--moinho-role-h2-size)/var(--moinho-role-h2-leading) var(--moinho-role-heading-family); letter-spacing: var(--moinho-role-h2-tracking); }
.home .moinho-about__painel-local { margin: 0; font-size: var(--moinho-role-label-size); letter-spacing: var(--moinho-tracking-wide); text-transform: uppercase; opacity: .72; }

/* Slider institucional. Todos os quadros compartilham a mesma proporcao;
   os 12% restantes mostram a proxima foto e tornam o gesto evidente. */
.home .moinho-about__composicao { align-self: stretch; align-content: center; display: grid; gap: var(--moinho-space-md); min-inline-size: 0; }
.home .moinho-about__composicao .moinho-galeria--carrossel { min-inline-size: 0; }
/*
 * Uma foto por vez, dimensionada para acompanhar o texto e nao para engoli-lo.
 *
 * Tres tamanhos foram medidos em 1440, com a coluna de texto em 535x877:
 *   duas fotos lado a lado ... 307x384   pequena demais, virava miniatura
 *   uma sangrando ate a tela . 743x929   grande demais, a secao sumia atras
 *   uma a 76% da coluna ...... 497x621   e esta
 *
 * Os 24% que sobram mostram a proxima foto e mantem a leitura de pista. Sem
 * sangria: invadir a margem da pagina era o que fazia a foto passar dos 900px.
 *
 * A proporcao nao e declarada aqui: vem do argumento `ratio` da galeria, que
 * escreve a classe `moinho-media--retrato` no slide.
 */
.home .moinho-about__composicao .moinho-trilha__lista { grid-auto-columns: 84%; }

@media (min-width: 64rem) {
	/*
	 * UMA foto, do tamanho da coluna (cliente, 15/09/2026). Sem peek da
	 * proxima e sem sangria: o slide ocupa 100% da pista e a proporcao vira
	 * quadrada para a foto ganhar altura sem estourar o texto ao lado. O
	 * `object-fit: cover` do componente faz o recorte; setas, pontos e o
	 * avanco automatico continuam dizendo que ha mais fotos.
	 */
	.home .moinho-about__composicao .moinho-trilha__lista {
		grid-auto-columns: 100%;
		scrollbar-width: none;
	}
	.home .moinho-about__composicao .moinho-trilha__lista::-webkit-scrollbar { display: none; }
	/*
	 * Todas as fotos no tamanho da primeira (cliente, 15/09/2026). A fachada
	 * dia/noite sai como <picture> e layout.css trava o quadro dela em 4:5;
	 * as outras seguiam a proporcao da galeria e ficavam de outro tamanho.
	 * Aqui o quadro e um so para todas, com o aspect-ratio escrito direto
	 * porque a regra da fachada nao le o token.
	 */
	.home .moinho-about__composicao .moinho-media { --moinho-media-ratio: 4 / 5; aspect-ratio: 4 / 5; inline-size: 100%; block-size: auto; max-block-size: calc(100svh - 13rem); }

	/*
	 * A foto do tamanho do bloco de texto (cliente, 18/09/2026). A coluna
	 * da direita ja estica com a grade; aqui a altura desce pela pista ate
	 * o quadro, que abandona a proporcao fixa e deixa o `object-fit: cover`
	 * do componente recortar. A linha dos pontos fica fora da conta. A
	 * proporcao 4:5 volta a valer abaixo de 64rem, onde a foto empilha.
	 */
	.home .moinho-about__composicao { grid-template-rows: minmax(0, 1fr); align-content: stretch; }
	.home .moinho-about__composicao .moinho-galeria--carrossel { display: grid; grid-template-rows: minmax(0, 1fr); min-block-size: 0; }
	/* Trilha: setas em cima, pista no meio, pontos embaixo. So a pista estica. */
	.home .moinho-about__composicao .moinho-trilha { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-block-size: 0; }
	.home .moinho-about__composicao .moinho-trilha__lista,
	.home .moinho-about__composicao .moinho-galeria__slide,
	.home .moinho-about__composicao .moinho-galeria__item { block-size: 100%; min-block-size: 0; margin: 0; }
	.home .moinho-about__composicao .moinho-media,
	.home .moinho-about__composicao .moinho-media:has(> picture.moinho-fachada-tema) { aspect-ratio: auto; block-size: 100%; max-block-size: none; min-block-size: 24rem; align-self: stretch; }
}
/* Capacidades */
.home .moinho-expertise .moinho-section__head { max-inline-size: 54rem; margin-block-end: var(--moinho-space-lg); }
.home .moinho-expertise__lista { display: flex; flex-direction: column; }
.home .moinho-expertise .moinho-feature-row { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--moinho-space-lg); padding-block: var(--moinho-space-lg); }
.home .moinho-expertise .moinho-feature-row__titulo { font: var(--moinho-role-h3-weight) var(--moinho-role-h3-size)/var(--moinho-role-h3-leading) var(--moinho-role-heading-family); letter-spacing: var(--moinho-role-h3-tracking); }
.home .moinho-expertise .moinho-feature-row__itens { grid-column: auto; justify-content: flex-end; }
.home .moinho-expertise .moinho-feature-row__itens li { border: var(--moinho-border-width) solid var(--moinho-color-border); background: var(--moinho-color-background); }

/* Diferenciais — uma unica peca optica, sem repetir o bento da pagina. */
.home .moinho-diferenciais { overflow: clip; }
.home .moinho-diferenciais .moinho-section__head { max-inline-size: 58rem; margin-block-end: var(--moinho-space-xl); }
.home .moinho-diferenciais__experience {
	--moinho-differential-accent: var(--moinho-color-primary-readable);
	--moinho-differential-accent-soft: var(--moinho-color-brand-glow);
	position: relative; isolation: isolate; display: grid;
	grid-template-columns: minmax(18rem, .82fr) minmax(0, 1.38fr);
	min-block-size: clamp(35rem, 56vw, 45rem); padding: var(--moinho-space-xs);
	border: var(--moinho-border-width) solid var(--moinho-home-card-border);
	border-radius: var(--moinho-radius-panel-lg); overflow: hidden;
	background:
		radial-gradient(circle at var(--moinho-pointer-x, 74%) var(--moinho-pointer-y, 24%), var(--moinho-differential-accent-soft), transparent 32%),
		linear-gradient(145deg, rgb(255 255 255 / .8), rgb(248 245 251 / .48) 52%, rgb(228 243 252 / .34));
	box-shadow: 0 42px 110px -62px rgb(46 29 61 / .58), inset 0 1px 0 rgb(255 255 255 / .94);
	-webkit-backdrop-filter: blur(32px) saturate(145%);
	backdrop-filter: blur(32px) saturate(145%);
	transition: --moinho-differential-accent var(--moinho-duration-normal) var(--moinho-ease-default);
}
.home .moinho-diferenciais__experience::before {
	content: ""; position: absolute; z-index: 4; inset: 1px 12% auto; block-size: 26%;
	border-radius: var(--moinho-radius-pill);
	background: linear-gradient(180deg, rgb(255 255 255 / .54), transparent);
	filter: blur(.75rem); pointer-events: none;
}
.home .moinho-diferenciais__experience::after {
	content: ""; position: absolute; z-index: -1; inset: auto -12% -42% 36%; aspect-ratio: 1;
	border-radius: 50%; background: radial-gradient(circle, var(--moinho-differential-accent-soft), transparent 66%);
	filter: blur(1.5rem); opacity: .9; pointer-events: none;
}
.home .moinho-diferenciais__experience[data-active="1"] { --moinho-differential-accent: var(--moinho-color-secondary-readable); --moinho-differential-accent-soft: var(--moinho-color-secondary-glow); }
.home .moinho-diferenciais__experience[data-active="2"] { --moinho-differential-accent: var(--moinho-color-accent); --moinho-differential-accent-soft: rgb(169 127 203 / .2); }
.home .moinho-diferenciais__selector {
	position: relative; z-index: 5; display: flex; flex-direction: column; justify-content: center;
	gap: var(--moinho-space-xs); padding: var(--moinho-space-md);
	border-inline-end: var(--moinho-border-width) solid rgb(74 47 98 / .11);
}
.home .moinho-diferenciais__tab {
	position: relative; display: grid; grid-template-columns: 3rem minmax(0, 1fr) 2rem;
	align-items: center; gap: var(--moinho-space-sm); min-block-size: 6.5rem;
	inline-size: 100%; margin: 0; padding: var(--moinho-space-sm);
	border: var(--moinho-border-width) solid transparent; border-radius: var(--moinho-radius-lg);
	background: transparent; color: var(--moinho-color-text); text-align: start;
	transition: color var(--moinho-duration-fast) var(--moinho-ease-default), background-color var(--moinho-duration-normal) var(--moinho-ease-default), border-color var(--moinho-duration-normal) var(--moinho-ease-default), box-shadow var(--moinho-duration-normal) var(--moinho-ease-default), transform var(--moinho-duration-normal) var(--moinho-ease-out);
}
.home .moinho-diferenciais__tab::before, .home .moinho-diferenciais__tab::after { content: none !important; }
.home .moinho-diferenciais__tab:hover { transform: translateX(var(--moinho-space-3xs)); }
.home .moinho-diferenciais__tab:focus-visible { outline: 2px solid var(--moinho-color-focus); outline-offset: 3px; }
.home .moinho-diferenciais__tab.is-active {
	border-color: rgb(255 255 255 / .72); background: linear-gradient(145deg, rgb(255 255 255 / .72), rgb(255 255 255 / .24));
	color: var(--moinho-differential-accent); box-shadow: inset 0 1px 0 rgb(255 255 255 / .92), 0 16px 42px -28px rgb(46 29 61 / .48);
	-webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
}
.home .moinho-diferenciais__tab-icon {
	display: grid; place-items: center; inline-size: 3rem; block-size: 3rem; border-radius: 50%;
	border: var(--moinho-border-width) solid rgb(74 47 98 / .12); color: var(--moinho-color-primary-readable);
	background: rgb(255 255 255 / .48); box-shadow: inset 0 1px 0 rgb(255 255 255 / .9);
}
.home .moinho-diferenciais__tab.is-active .moinho-diferenciais__tab-icon { border-color: currentColor; color: inherit; background: rgb(255 255 255 / .7); }
/* Estas duas regras tinham 20 !important repetindo o que `svg.moinho-icon`
   ja garante globalmente em base.css (display, box-sizing, fill, stroke,
   linecap, linejoin, vector-effect, overflow). Sobra o unico valor que e
   mesmo especifico dos Diferenciais: a espessura do traco. O seletor vale
   (0,3,1) e vence o kit do Elementor sem forcar nada. */
.home .moinho-diferenciais :is(.moinho-diferenciais__tab-icon, .moinho-diferenciais__tab-arrow, .moinho-diferenciais__core-icon) svg.moinho-icon {
	stroke-width: var(--moinho-differential-icon-stroke, 1.7);
	color: inherit;
}
.home .moinho-diferenciais__tab-icon .moinho-icon { --moinho-icon-size: 1.25rem; }
.home .moinho-diferenciais__tab-title { max-inline-size: 18ch; font: var(--moinho-role-h4-weight) var(--moinho-role-h4-size)/var(--moinho-role-h4-leading) var(--moinho-role-heading-family); letter-spacing: var(--moinho-role-h4-tracking); }
.home .moinho-diferenciais__tab-arrow { display: grid; place-items: center; inline-size: 2rem; block-size: 2rem; opacity: .32; transform: translateX(-.35rem); transition: opacity var(--moinho-duration-fast) var(--moinho-ease-default), transform var(--moinho-duration-normal) var(--moinho-ease-out); }
.home .moinho-diferenciais__tab-arrow .moinho-icon { --moinho-icon-size: 1rem; }
.home .moinho-diferenciais__tab.is-active .moinho-diferenciais__tab-arrow { opacity: 1; transform: translateX(0); }
.home .moinho-diferenciais__stage { position: relative; z-index: 2; min-inline-size: 0; overflow: hidden; border-radius: calc(clamp(2rem, 4vw, 3.25rem) - var(--moinho-space-xs)); }
.home .moinho-diferenciais__lens {
	position: absolute; inset: 3% -4% auto auto; inline-size: min(42rem, 82%); aspect-ratio: 1;
	display: grid; place-items: center; will-change: transform;
}
.home .moinho-diferenciais__ring { position: absolute; border: var(--moinho-border-width) solid color-mix(in srgb, var(--moinho-differential-accent) 38%, transparent); border-radius: 50%; box-shadow: inset 0 0 60px color-mix(in srgb, var(--moinho-differential-accent) 6%, transparent), 0 0 40px color-mix(in srgb, var(--moinho-differential-accent) 8%, transparent); }
.home .moinho-diferenciais__ring::before, .home .moinho-diferenciais__ring::after { content: ""; position: absolute; border-radius: 50%; background: var(--moinho-differential-accent); box-shadow: 0 0 18px var(--moinho-differential-accent); }
.home .moinho-diferenciais__ring::before { inline-size: .55rem; block-size: .55rem; inset: 9% 19% auto auto; }
.home .moinho-diferenciais__ring::after { inline-size: .3rem; block-size: .3rem; inset: auto auto 18% 8%; opacity: .56; }
.home .moinho-diferenciais__ring--outer { inset: 2%; opacity: .42; }
.home .moinho-diferenciais__ring--middle { inset: 17%; opacity: .6; rotate: 38deg; }
.home .moinho-diferenciais__ring--inner { inset: 31%; opacity: .86; rotate: -24deg; }
.home .moinho-diferenciais__beam { position: absolute; inline-size: 72%; block-size: 1px; rotate: -28deg; background: linear-gradient(90deg, transparent, var(--moinho-differential-accent), transparent); opacity: .46; box-shadow: 0 0 18px var(--moinho-differential-accent); }
.home .moinho-diferenciais__core {
	position: relative; display: grid; place-items: center; inline-size: clamp(7.5rem, 14vw, 10rem); aspect-ratio: 1;
	border: var(--moinho-border-width) solid rgb(255 255 255 / .62); border-radius: 50%;
	background: radial-gradient(circle at 34% 22%, rgb(255 255 255 / .92), rgb(255 255 255 / .38) 42%, color-mix(in srgb, var(--moinho-differential-accent) 24%, transparent));
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .96), inset 0 -18px 38px color-mix(in srgb, var(--moinho-differential-accent) 16%, transparent), 0 28px 70px -28px color-mix(in srgb, var(--moinho-differential-accent) 72%, transparent);
	-webkit-backdrop-filter: blur(22px) saturate(165%); backdrop-filter: blur(22px) saturate(165%);
}
.home .moinho-diferenciais__core-icon { position: absolute; display: grid; place-items: center; color: var(--moinho-differential-accent); opacity: 0; scale: .72; rotate: -12deg; transition: opacity var(--moinho-duration-normal) var(--moinho-ease-default), scale var(--moinho-duration-slow) var(--moinho-ease-out), rotate var(--moinho-duration-slow) var(--moinho-ease-out); }
.home .moinho-diferenciais__core-icon.is-active { opacity: 1; scale: 1; rotate: 0deg; }
.home .moinho-diferenciais__core-icon { --moinho-differential-icon-stroke: 1.45; }
.home .moinho-diferenciais__core-icon .moinho-icon { --moinho-icon-size: clamp(2.2rem, 5vw, 3.5rem); }
.home .moinho-diferenciais__panels { position: absolute; z-index: 5; inset: auto var(--moinho-space-xl) var(--moinho-space-xl); max-inline-size: 34rem; }
.home .moinho-diferenciais__panel[hidden] { display: none; }
.home .moinho-diferenciais__panel:not([hidden]) { animation: moinho-differential-panel-in .52s var(--moinho-ease-out) both; }
.home .moinho-diferenciais__panel-title { max-inline-size: 15ch; margin: 0 0 var(--moinho-space-xs); color: var(--moinho-color-text); font: var(--moinho-role-h1-weight) var(--moinho-role-h1-size)/var(--moinho-role-h1-leading) var(--moinho-role-heading-family); letter-spacing: var(--moinho-role-h1-tracking); }
.home .moinho-diferenciais__panel-text { max-inline-size: 48ch; margin: 0; color: var(--moinho-color-text-muted); font-size: var(--moinho-role-body-size); line-height: var(--moinho-role-body-leading); }
@keyframes moinho-differential-panel-in { from { opacity: 0; transform: translate3d(0, 1rem, 0); } to { opacity: 1; transform: none; } }

/* Grades dinâmicas */
.home .moinho-numeros__linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: var(--moinho-space-lg) var(--moinho-grid-gap); padding-block: var(--moinho-space-lg); border-block: var(--moinho-border-width) solid var(--moinho-color-border); }
.home .moinho-depoimentos__trilha { display: grid; grid-auto-flow: column; grid-auto-columns: min(24rem, 82vw); gap: var(--moinho-grid-gap); margin: 0; padding: var(--moinho-space-3xs) max(var(--moinho-container-padding), calc(50vw - var(--moinho-container-width) / 2)) var(--moinho-space-sm); list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; }
.home .moinho-depoimentos__item { display: flex; margin: 0; scroll-snap-align: start; }
.home .moinho-depoimentos__item > * { inline-size: 100%; }
.home .moinho-equipe__grade { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 45%), 1fr)); gap: var(--moinho-space-md) var(--moinho-grid-gap); }
.home .moinho-equipe__rodape { margin-block-start: var(--moinho-space-xl); }
.home .moinho-blog__grade { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: var(--moinho-grid-gap); inline-size: 100%; --moinho-media-ratio: 16 / 10; }
.home .moinho-blog__celula, .home .moinho-blog__celula > * { display: flex; inline-size: 100%; }
.home .moinho-blog .moinho-card { min-block-size: 100%; }

/* Superficies editoriais recebem a mesma profundidade dos cards do deck. */
.home :is(.moinho-card, .moinho-quote) {
	position: relative;
	background: var(--moinho-home-card-bg);
	border-color: var(--moinho-home-card-border);
	box-shadow: inset 0 1px 0 var(--moinho-home-card-highlight), var(--moinho-shadow-md);
	backdrop-filter: blur(24px) saturate(128%);
	-webkit-backdrop-filter: blur(24px) saturate(128%);
}

.home :is(.moinho-card, .moinho-quote)::before {
	content: "";
	position: absolute;
	z-index: 1;
	inset: 0 14% auto;
	block-size: var(--moinho-border-width-strong);
	border-radius: var(--moinho-radius-pill);
	background: linear-gradient(90deg, transparent, var(--moinho-color-primary), var(--moinho-color-secondary), transparent);
	opacity: 0.68;
	pointer-events: none;
}

html[data-moinho-theme="dark"] .home .moinho-diferenciais__experience {
	border-color: rgb(255 255 255 / .16);
	background:
		radial-gradient(circle at var(--moinho-pointer-x, 74%) var(--moinho-pointer-y, 24%), var(--moinho-differential-accent-soft), transparent 34%),
		linear-gradient(145deg, rgb(255 255 255 / .095), rgb(255 255 255 / .035) 52%, rgb(24 153 214 / .06));
	box-shadow: 0 46px 120px -58px rgb(0 0 0 / .86), inset 0 1px 0 rgb(255 255 255 / .18);
}
html[data-moinho-theme="dark"] .home .moinho-diferenciais__selector { border-inline-end-color: rgb(255 255 255 / .1); }
html[data-moinho-theme="dark"] .home .moinho-diferenciais__tab { color: var(--moinho-surface-fg); }
html[data-moinho-theme="dark"] .home .moinho-diferenciais__tab.is-active {
	border-color: rgb(255 255 255 / .18); background: linear-gradient(145deg, rgb(255 255 255 / .13), rgb(255 255 255 / .035));
	color: var(--moinho-differential-accent); box-shadow: inset 0 1px 0 rgb(255 255 255 / .2), 0 20px 46px -30px rgb(0 0 0 / .82);
}
html[data-moinho-theme="dark"] .home .moinho-diferenciais__tab-icon { border-color: rgb(255 255 255 / .13); background: rgb(255 255 255 / .055); color: var(--moinho-color-primary-readable); box-shadow: inset 0 1px 0 rgb(255 255 255 / .13); }
html[data-moinho-theme="dark"] .home .moinho-diferenciais__tab.is-active .moinho-diferenciais__tab-icon { color: inherit; background: rgb(255 255 255 / .1); }
html[data-moinho-theme="dark"] .home .moinho-diferenciais__core { border-color: rgb(255 255 255 / .2); background: radial-gradient(circle at 34% 22%, rgb(255 255 255 / .22), rgb(255 255 255 / .075) 42%, color-mix(in srgb, var(--moinho-differential-accent) 18%, transparent)); box-shadow: inset 0 1px 0 rgb(255 255 255 / .26), inset 0 -18px 38px rgb(0 0 0 / .18), 0 30px 74px -28px color-mix(in srgb, var(--moinho-differential-accent) 48%, transparent); }
html[data-moinho-theme="dark"] .home .moinho-diferenciais__panel-title { color: var(--moinho-surface-fg) !important; }
html[data-moinho-theme="dark"] .home .moinho-diferenciais__panel-text { color: var(--moinho-surface-fg-muted) !important; }

/* =========================================================================
   MODO ESCURO — HIERARQUIA E CONTRASTE
   =========================================================================
   Regra final de proposito: vence cores pretas injetadas por estilos de bloco
   e mantem cada papel semantico consistente ao trocar o tema.
   ========================================================================= */

html[data-moinho-theme="dark"] .home .moinho-section {
	color: var(--moinho-color-text);
}

html[data-moinho-theme="dark"] .home :is(
	.moinho-rotas__titulo,
	.moinho-rotas__item-titulo,
	.moinho-about__titulo,
	.moinho-about__texto--realce,
	.moinho-section__title,
	.moinho-feature-row__titulo,
	.moinho-feature-tile__titulo,
	.moinho-card__titulo,
	.moinho-quote__texto,
	.moinho-quote__nome,
	.moinho-person__nome,
	.moinho-stat__rotulo
) {
	color: var(--moinho-surface-fg, var(--moinho-color-text)) !important;
}

html[data-moinho-theme="dark"] .home :is(
	.moinho-rotas__item-texto,
	.moinho-about__texto,
	.moinho-feature-row__texto,
	.moinho-feature-row__itens li,
	.moinho-feature-tile__texto,
	.moinho-card__texto,
	.moinho-card__meta,
	.moinho-quote__papel,
	.moinho-person__cargo,
	.moinho-stat__fonte
) {
	color: var(--moinho-surface-fg-muted, var(--moinho-color-text-muted)) !important;
}

html[data-moinho-theme="dark"] .home .moinho-feature-tile--destaque :is(.moinho-feature-tile__titulo, .moinho-feature-tile__texto) {
	color: var(--moinho-color-text-on-brand) !important;
}

html[data-moinho-theme="dark"] .home .moinho-feature-tile--destaque .moinho-feature-tile__texto {
	opacity: 0.82;
}

html[data-moinho-theme="dark"] .home .moinho-rotas__item {
	border-color: var(--moinho-home-card-border);
	background: linear-gradient(145deg, rgb(15 11 24 / .78), rgb(9 7 16 / .5));
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .1), 0 38px 96px -58px rgb(0 0 0 / .86);
}
html[data-moinho-theme="dark"] .home .moinho-rotas__item { border-block-end-color: var(--moinho-home-card-border); }
html[data-moinho-theme="dark"] .home .moinho-rotas__item-icon {
	border-color: color-mix(in srgb, var(--moinho-route-accent) 34%, transparent);
	background: linear-gradient(145deg, rgb(255 255 255 / .105), rgb(255 255 255 / .025));
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 14px 32px -24px var(--moinho-route-accent);
}
html[data-moinho-theme="dark"] .home .moinho-rotas__item-cta {
	border-color: color-mix(in srgb, var(--moinho-route-accent) 34%, transparent);
	background: rgb(255 255 255 / .045);
	color: var(--moinho-route-accent);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .1);
}
@media (hover: hover) {
	html[data-moinho-theme="dark"] .home .moinho-rotas__item:hover .moinho-rotas__item-cta {
		border-color: var(--moinho-route-accent);
		background: var(--moinho-route-accent);
		color: var(--moinho-color-background);
	}
}

html[data-moinho-theme="dark"] .home .moinho-feature-row__numero,
html[data-moinho-theme="dark"] .home .moinho-card__cta,
html[data-moinho-theme="dark"] .home .moinho-stat__valor {
	color: var(--moinho-color-primary-readable) !important;
}

html[data-moinho-theme="dark"] .home .moinho-stat__sufixo {
	color: var(--moinho-color-secondary-readable) !important;
}

.moinho-theme-ready .home :is(
	.moinho-rotas__titulo,
	.moinho-rotas__item-titulo,
	.moinho-rotas__item-texto,
	.moinho-about__titulo,
	.moinho-about__texto,
	.moinho-section__title,
	.moinho-feature-row__titulo,
	.moinho-feature-row__texto,
	.moinho-feature-tile__titulo,
	.moinho-feature-tile__texto,
	.moinho-card__titulo,
	.moinho-card__texto,
	.moinho-quote__texto,
	.moinho-person__nome,
	.moinho-person__cargo,
	.moinho-stat__valor,
	.moinho-stat__rotulo,
	.moinho-rotas__item,
	.moinho-rotas__item-cta,
	.moinho-feature-row,
	.moinho-feature-row__itens li,
	.moinho-feature-tile,
	.moinho-diferenciais__experience,
	.moinho-diferenciais__tab,
	.moinho-diferenciais__tab-icon,
	.moinho-diferenciais__panel-title,
	.moinho-diferenciais__panel-text,
	.moinho-card,
	.moinho-quote,
	.moinho-person__foto
) {
	transition:
		color var(--moinho-duration-normal) var(--moinho-ease-default),
		background-color var(--moinho-duration-normal) var(--moinho-ease-default),
		border-color var(--moinho-duration-normal) var(--moinho-ease-default),
		box-shadow var(--moinho-duration-normal) var(--moinho-ease-default);
}

.home .moinho-expertise .moinho-feature-row__itens li {
	border-color: var(--moinho-home-card-border);
	background: var(--moinho-home-card-bg);
	box-shadow: inset 0 1px 0 var(--moinho-home-card-highlight);
	backdrop-filter: blur(14px) saturate(120%);
	-webkit-backdrop-filter: blur(14px) saturate(120%);
}

.home .moinho-person__foto {
	border: var(--moinho-border-width) solid var(--moinho-home-card-border);
	background: var(--moinho-home-card-bg);
	box-shadow: inset 0 1px 0 var(--moinho-home-card-highlight), var(--moinho-shadow-md);
}

@keyframes moinho-cosmos-mesh {
	0% { transform: scale(1.04) translate3d(0, 0, 0); }
	50% { transform: scale(1.12) translate3d(-2%, -1.5%, 0); }
	100% { transform: scale(1.07) translate3d(2%, 1%, 0); }
}

@keyframes moinho-cosmos-orb-1 {
	0% { transform: translate3d(0, 0, 0) scale(1); opacity: .42; }
	50% { transform: translate3d(30vw, 20vh, 0) scale(1.18); opacity: .76; }
	100% { transform: translate3d(48vw, 38vh, 0) scale(.9); opacity: .48; }
}

@keyframes moinho-cosmos-orb-2 {
	0% { transform: translate3d(0, 0, 0) scale(1); opacity: .46; }
	50% { transform: translate3d(-27vw, -20vh, 0) scale(1.22); opacity: .8; }
	100% { transform: translate3d(-42vw, -34vh, 0) scale(.86); opacity: .44; }
}

@keyframes moinho-cosmos-orb-3 {
	0% { transform: translate3d(0, 0, 0) scale(1); opacity: .34; }
	50% { transform: translate3d(-18vw, 16vh, 0) scale(1.14); opacity: .68; }
	100% { transform: translate3d(-29vw, 25vh, 0) scale(.94); opacity: .4; }
}

@keyframes moinho-cosmos-orb-4 {
	0% { transform: translate3d(0, 0, 0) scale(1); opacity: .34; }
	50% { transform: translate3d(16vw, -21vh, 0) scale(1.26); opacity: .72; }
	100% { transform: translate3d(25vw, -34vh, 0) scale(.88); opacity: .42; }
}

@keyframes moinho-cosmos-grain {
	0%, 100% { transform: translate3d(0, 0, 0); }
	25% { transform: translate3d(-6px, 4px, 0); }
	50% { transform: translate3d(4px, -3px, 0); }
	75% { transform: translate3d(-3px, -5px, 0); }
}

@keyframes moinho-panel-breathe {
	0% { background-position: 0% 50%; }
	100% { background-position: 100% 50%; }
}

@media (max-width: 63.9375rem) {
	.home .moinho-hero { min-block-size: 100svh; }
	.home .moinho-rotas__item { inset-block-start: calc(4vh + var(--moinho-principle-offset, 0rem)); grid-template-columns: 3.5rem minmax(0, 1fr) auto; }
	.home .moinho-rotas__item-icon { grid-column: 1; grid-row: 1 / span 2; }
	.home .moinho-rotas__item-cabeca { grid-column: 2; }
	.home .moinho-rotas__item-texto { grid-column: 2; }
	.home .moinho-rotas__item-cta { grid-column: 3; grid-row: 1 / span 2; }
	.home .moinho-about__inner { grid-template-columns: 1fr; }
	.home .moinho-expertise .moinho-feature-row { grid-template-columns: 1fr; }
	.home .moinho-expertise .moinho-feature-row__itens { justify-content: flex-start; }
	.home .moinho-blog__grade { grid-template-columns: 1fr 1fr; }
	.home .moinho-diferenciais__experience { grid-template-columns: 1fr; min-block-size: 51rem; }
	.home .moinho-diferenciais__selector { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; padding: var(--moinho-space-xs); border-inline-end: 0; border-block-end: var(--moinho-border-width) solid rgb(74 47 98 / .11); }
	.home .moinho-diferenciais__tab { grid-template-columns: 2.75rem minmax(0, 1fr); min-block-size: 7rem; align-content: center; }
	.home .moinho-diferenciais__tab-arrow { display: none; }
	.home .moinho-diferenciais__stage { min-block-size: 38rem; }
	.home .moinho-diferenciais__lens { inline-size: min(36rem, 74%); inset-block-start: -2%; }
}

@media (max-width: 47.9375rem) {
	.home .moinho-home-atmosphere__orb { filter: blur(58px); opacity: .46; }
	.home .moinho-home-atmosphere__orb--4, .home .moinho-home-atmosphere__grain { display: none; }
	.home .moinho-hero { padding-block: var(--moinho-space-2xl); }
	.home .moinho-hero .moinho-button-group { flex-direction: column; }
	.home .moinho-hero .moinho-button { inline-size: 100%; }
	.home .moinho-rotas__cabecalho { grid-template-columns: 1fr; gap: var(--moinho-space-sm); margin-block-end: var(--moinho-space-lg); }
	.home .moinho-rotas__eyebrow { margin-block-start: 0; }
	.home .moinho-rotas__item { position: relative; inset: auto; grid-template-columns: 3.25rem minmax(0, 1fr); gap: var(--moinho-space-sm); min-block-size: 0; padding: var(--moinho-space-md); }
	.home .moinho-rotas__item-icon { grid-column: 1; grid-row: 1; inline-size: 3.25rem; block-size: 3.25rem; align-self: center; }
	.home .moinho-rotas__item-cabeca { grid-column: 2; grid-row: 1; }
	.home .moinho-rotas__item-texto { grid-column: 1 / -1; grid-row: 2; }
	.home .moinho-rotas__item-cta { grid-column: 1 / -1; grid-row: 3; justify-content: space-between; inline-size: 100%; }
	.home .moinho-about__painel, .home .moinho-about__midia { min-block-size: 22rem; }
	.home .moinho-blog__grade { grid-template-columns: 1fr; }
	.home .moinho-diferenciais .moinho-section__head { margin-block-end: var(--moinho-space-lg); }
	.home .moinho-diferenciais__experience { min-block-size: 43rem; border-radius: var(--moinho-radius-xl); }
	.home .moinho-diferenciais__selector { display: flex; flex-direction: row; justify-content: flex-start; gap: var(--moinho-space-3xs); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
	.home .moinho-diferenciais__selector::-webkit-scrollbar { display: none; }
	.home .moinho-diferenciais__tab { flex: 0 0 min(15rem, 78vw); grid-template-columns: 2.75rem minmax(0, 1fr); min-block-size: 5.5rem; scroll-snap-align: start; }
	.home .moinho-diferenciais__tab:hover { transform: none; }
	.home .moinho-diferenciais__stage { min-block-size: 34rem; }
	.home .moinho-diferenciais__lens { inline-size: 27rem; max-inline-size: 112%; inset: 1% -12% auto auto; }
	.home .moinho-diferenciais__panels { inset: auto var(--moinho-space-md) var(--moinho-space-lg); }
	.home .moinho-diferenciais__panel-text { font-size: var(--moinho-role-small-size); }
}

/* ==========================================================================
   HOME 2026 — NARRATIVA EDITORIAL
   Regras finais intencionais: este bloco evolui a Home sem quebrar shortcodes
   antigos que podem continuar sendo usados em outras composicoes.
   ========================================================================== */

.home .moinho-section__lead {
	max-inline-size: 48rem;
	margin-block-start: var(--moinho-space-sm);
	font-size: var(--moinho-role-body-lg-size);
	line-height: var(--moinho-role-body-lg-leading);
	color: var(--moinho-color-text-muted);
}

/* Hero: a primeira dobra fica inteira, legivel e com dois niveis de apoio. */
.home .moinho-hero__corpo { max-inline-size: min(64rem, 82vw); }
.home .moinho-hero__texto { max-inline-size: var(--moinho-copy-measure); margin-block-end: var(--moinho-heading-gap); }
.home .moinho-hero__texto--apoio {
	max-inline-size: 46rem;
	margin-block-end: var(--moinho-space-lg);
	font-size: var(--moinho-role-body-size);
	color: color-mix(in srgb, var(--moinho-color-text-on-dark-muted) 78%, transparent);
}
.home .moinho-hero__video { scale: 1.045; }
.home .moinho-hero__video-overlay {
	background:
		linear-gradient(90deg, rgb(11 6 18 / .94), rgb(16 8 25 / .76) 52%, rgb(16 8 25 / .25)),
		linear-gradient(0deg, rgb(8 4 14 / .58), transparent 45%);
}

/* Manifesto: uma pausa editorial com leitura clara e um quadro de processo. */
.home .moinho-manifesto {
	position: relative;
	overflow: clip;
	padding-block: var(--moinho-section-space);
	background:
		radial-gradient(circle at 87% 16%, color-mix(in srgb, var(--moinho-color-secondary) 14%, transparent), transparent 30%),
		linear-gradient(145deg, color-mix(in srgb, var(--moinho-color-background) 92%, var(--moinho-color-primary)), var(--moinho-color-background));
}
/* Duas colunas, 60/40, alinhadas pelo topo.

   A versao anterior tinha TRES colunas: um corredor so para o rotulo "01",
   o texto no meio e a foto na direita. O corredor ficava vazio da segunda
   linha em diante e era ele que deixava a secao com buraco. Agora o rotulo
   entra na coluna de texto, onde ele pertence, e sobra largura para o texto
   respirar e para a foto crescer.

   `minmax(0, ...)` nas duas: sem isso, uma foto larga estoura a coluna em
   vez de encolher. */
.home .moinho-manifesto__inner {
	display: grid;
	/* 1.3fr / 1fr = 57/43. Um degrau mais largo que 60/40 porque a foto
	   estica ate a altura do texto: coluna estreita com altura de coluna
	   longa viraria uma tira vertical, e o recorte comeria os ombros. */
	grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
	grid-template-areas:
		"capitulo retrato"
		"titulo   retrato"
		"textos   retrato";
	align-items: start;
	column-gap: clamp(2.5rem, 4.5vw, 4.5rem);
}
.home .moinho-manifesto__capitulo { grid-area: capitulo; }
.home .moinho-manifesto__titulo { grid-area: titulo; }
.home .moinho-manifesto__textos { grid-area: textos; }
.home .moinho-manifesto__retrato { grid-area: retrato; }

/* Rotulo: numero e nome na mesma linha, separados por travessao. O circulo
   que envolvia o "01" forcava uma coluna propria e quebrava o nome em duas
   linhas — saiu junto com o corredor. */
.home .moinho-manifesto__capitulo {
	display: flex;
	align-items: baseline;
	gap: .55rem;
	margin: 0 0 var(--moinho-space-md);
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-role-label-weight);
	line-height: var(--moinho-role-label-leading);
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--moinho-color-primary-readable);
}
.home .moinho-manifesto__capitulo-num { font-variant-numeric: tabular-nums; opacity: .72; }
.home .moinho-manifesto__capitulo-num::after { content: " —"; }

.home .moinho-manifesto__titulo {
	/* 24ch trava o titulo em quatro linhas na largura de 1260px. Sem trava
	   ele encosta na foto e perde o bloco compacto que o torna impactante. */
	max-inline-size: 24ch;
	margin: 0;
	font: var(--moinho-role-h1-weight) var(--moinho-role-h1-size)/var(--moinho-role-h1-leading) var(--moinho-role-heading-family);
	letter-spacing: var(--moinho-role-h1-tracking);
	text-wrap: balance;
}
/* Realce do titulo: cor da marca no trecho que carrega o argumento.
   `primary-readable` e um contrato de contraste — passa 4.5:1 no claro e no
   escuro, entao o destaque nao vira texto apagado quando o tema inverte. */
.home .moinho-manifesto__realce { color: var(--moinho-color-primary-readable); }

.home .moinho-manifesto__textos {
	display: grid;
	/* Respiro entre paragrafos: sao quatro blocos e o assunto muda em cada
	   um. Colados viram parede de texto; largos demais esticam a coluna e
	   obrigam a foto ao lado a virar tira. `md` e o ponto de equilibrio. */
	gap: var(--moinho-paragraph-gap);
	margin-block: var(--moinho-heading-gap) 0;
}
.home .moinho-manifesto__textos p {
	/* ~60 caracteres por linha: e onde a justificacao inter-word se comporta
	   sem abrir rios de espaco entre as palavras. */
	max-inline-size: 62ch;
	margin: 0;
	font-size: var(--moinho-role-body-size);
	line-height: var(--moinho-role-body-leading);
	color: var(--moinho-color-text-muted);
}

/* Retrato dos socios: coluna direita inteira, do topo do rotulo ate a ultima
   linha de texto.

   A foto NAO tem proporcao fixa aqui — ela estica. Uma proporcao travada
   deixa a coluna da direita mais curta que a da esquerda e abre justamente o
   vazio que a secao tinha. Esticando, as duas colunas comecam e terminam na
   mesma linha, e a proporcao final cai por volta de 3:4, que continua sendo
   retrato. O piso de 26rem existe para o caso de a copy encolher: sem ele,
   texto curto viraria uma tira fina. */
.home .moinho-manifesto__retrato {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: var(--moinho-space-sm);
	margin: 0;
}
.home .moinho-manifesto__retrato .moinho-media {
	flex: 1;
	--moinho-media-ratio: auto;
	min-block-size: 26rem;
	border: var(--moinho-border-width) solid var(--moinho-home-card-border);
	border-radius: var(--moinho-radius-lg);
	/* Brilho da marca: uma sombra larga e tingida, nao um halo. O primeiro
	   valor e a luz roxa; o segundo e a profundidade que separa a foto do
	   fundo. Sem o segundo, a foto flutua sem peso. */
	box-shadow:
		0 0 90px -30px var(--moinho-color-brand-glow),
		0 48px 120px -70px rgb(36 20 53 / .8),
		inset 0 1px 0 var(--moinho-home-card-highlight);
}
/* O parallax move o quadro alguns pixels; a escala evita que a borda
   inferior revele fundo no fim do curso. */
.home .moinho-manifesto__retrato .moinho-media img { scale: 1.03; }
.home .moinho-manifesto__retrato figcaption {
	display: grid;
	gap: var(--moinho-space-3xs);
	padding-inline-start: var(--moinho-space-2xs);
	border-inline-start: var(--moinho-border-width-strong) solid var(--moinho-color-primary);
	text-wrap: pretty;
}
.home .moinho-manifesto__retrato-legenda {
	font-size: var(--moinho-role-small-size);
	font-weight: var(--moinho-weight-semibold);
	line-height: var(--moinho-role-small-leading);
	color: var(--moinho-color-text);
}
.home .moinho-manifesto__retrato-nota {
	font-size: var(--moinho-role-caption-size);
	line-height: var(--moinho-role-caption-leading);
	color: var(--moinho-color-text-muted);
}
/* O quadro "Processo criativo" saiu da home; o CSS dele foi junto. */

/* Serviços: índice largo com entregas visíveis, sem voltar ao grid de cards. */
.home .moinho-rotas__cabecalho { grid-template-columns: minmax(8rem, .27fr) minmax(0, 1fr); row-gap: var(--moinho-heading-gap); }
.home .moinho-rotas__intro {
	grid-column: 2;
	align-self: start;
	max-inline-size: var(--moinho-copy-measure);
	margin: 0;
	font-size: var(--moinho-role-body-size);
	line-height: var(--moinho-role-body-leading);
	color: var(--moinho-color-text-muted);
}
.home .moinho-rotas__item {
	grid-template-columns: 3.5rem minmax(0, .72fr) minmax(0, 1.15fr) clamp(12rem, 15vw, 14.5rem);
	grid-template-rows: auto auto;
	align-items: start;
	min-block-size: 13.5rem;
	padding-block: clamp(1.6rem, 3vw, 2.5rem);
}
/* Sem lista de entregaveis (15/09/2026): o cartao le em uma linha, e a
   coluna do texto ocupa as duas faixas para o resumo nao ficar espremido.
   O icone centra na mesma altura de "01 Branding" (cliente, 18/09/2026):
   com `align-items: start` ele subia para o topo do cartao enquanto o
   titulo ficava no meio. */
.home .moinho-rotas__item-icon { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
.home .moinho-rotas__item-cabeca { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.home .moinho-rotas__item-texto { grid-column: 3; grid-row: 1 / span 2; align-self: center; }
.home .moinho-rotas__item-cta { grid-column: 4; grid-row: 1 / span 2; align-self: center; justify-self: end; }
/* Resumo curto em coluna estreita: justificado abre buracos entre as palavras. */
.home .moinho-rotas__item .moinho-rotas__item-texto { text-align: start; }
.home .moinho-rotas__item.is-current { background: color-mix(in srgb, var(--moinho-route-accent) 8%, transparent); }
.home .moinho-rotas__item.is-current::before { transform: scaleY(1); opacity: 1; }

/* Processo: a linha funciona como régua de leitura e é desenhada no scroll. */
.home .moinho-processo {
	position: relative;
	isolation: isolate;
	padding-block: clamp(5rem, 9vw, 8rem);
	background: color-mix(in srgb, var(--moinho-color-surface) 72%, transparent);
	border-block: var(--moinho-border-width) solid var(--moinho-home-card-border);
	overflow: clip;
}
/*
 * Fundo: grade cinetica em canvas (cliente, 15/09/2026). O canvas cobre a
 * secao e fica atras do conteudo; a cor da base vem de `color` (o JS le o
 * valor calculado) e o ativo vem de --moinho-color-primary. A mascara
 * radial esvazia o centro-esquerda, onde esta a copy, para a grade nao
 * competir com o texto.
 */
.home .moinho-processo__fundo { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.home .moinho-processo__grade {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	color: var(--moinho-color-text);
	opacity: .9;
	mask-image: radial-gradient(ellipse 70% 80% at 22% 50%, transparent 0%, rgb(0 0 0 / .35) 45%, rgb(0 0 0) 100%);
	-webkit-mask-image: radial-gradient(ellipse 70% 80% at 22% 50%, transparent 0%, rgb(0 0 0 / .35) 45%, rgb(0 0 0) 100%);
}
/* Cabecalho em cima, as quatro etapas embaixo (cliente, 18/09/2026). */
.home .moinho-processo__inner { display: grid; gap: var(--moinho-space-xl); }
.home .moinho-processo__cabecalho { display: grid; gap: var(--moinho-space-sm); align-content: start; }
@media (min-width: 64rem) {
	/* Titulo a esquerda, os dois paragrafos a direita, como o resto da home. */
	.home .moinho-processo__cabecalho { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(3rem, 6vw, 6rem); align-items: start; }
	.home .moinho-processo__cabecalho .moinho-eyebrow { grid-column: 1 / -1; }
	.home .moinho-processo__intro-grupo { padding-block-start: var(--moinho-space-3xs); }
}
.home .moinho-processo__titulo {
	max-inline-size: var(--moinho-heading-measure);
	margin: 0;
	font: var(--moinho-role-h2-weight) var(--moinho-role-h2-size)/var(--moinho-role-h2-leading) var(--moinho-role-heading-family); letter-spacing: var(--moinho-role-h2-tracking);
}
.home .moinho-processo__intro-grupo { display: grid; gap: var(--moinho-paragraph-gap); }
.home .moinho-processo__intro { max-inline-size: var(--moinho-copy-measure); margin: 0; font-size: var(--moinho-role-body-size); line-height: var(--moinho-role-body-leading); color: var(--moinho-color-text-muted); }
.home .moinho-processo__intro--2 { margin-block-start: 0; }
/*
 * METODO: QUATRO CARTOES EXPOSTOS (18/09/2026)
 *
 * Grade de quatro no desktop, dois por linha no tablet, um no celular. O
 * cartao repete o vidro claro de "O que fazemos": icone em capsula, numero
 * em mono, titulo e texto. Sem trilha, sem autoplay, sem shader.
 */
.home .moinho-processo__etapas { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--moinho-space-md); margin: 0; padding: 0; list-style: none; }
.home .moinho-processo__cartao { display: flex; margin: 0; min-inline-size: 0; }
.home .moinho-processo__cartao-inner {
	--moinho-route-accent: var(--moinho-color-primary-readable);
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto 1fr;
	align-items: center;
	column-gap: var(--moinho-space-sm);
	row-gap: var(--moinho-space-sm);
	inline-size: 100%;
	padding: var(--moinho-space-md);
	border: var(--moinho-border-width) solid var(--moinho-home-card-border);
	border-radius: var(--moinho-radius-panel);
	background: linear-gradient(145deg, rgb(255 255 255 / .82), rgb(248 245 251 / .54));
	box-shadow: 0 24px 60px -48px rgb(46 29 61 / .5), inset 0 1px 0 rgb(255 255 255 / .9);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	transition: border-color var(--moinho-duration-normal) var(--moinho-ease-out), transform var(--moinho-duration-normal) var(--moinho-ease-out);
}
.home .moinho-processo__icone {
	display: grid;
	place-items: center;
	box-sizing: border-box;
	inline-size: 3rem;
	block-size: 3rem;
	border: var(--moinho-border-width) solid color-mix(in srgb, var(--moinho-route-accent) 28%, transparent);
	border-radius: var(--moinho-radius-md);
	background: linear-gradient(145deg, rgb(255 255 255 / .8), rgb(255 255 255 / .26));
	color: var(--moinho-route-accent);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .94);
}
.home .moinho-processo__icone .moinho-icon { --moinho-icon-size: 1.35rem; color: inherit; }
.home .moinho-processo__numero {
	justify-self: end;
	font: var(--moinho-weight-semibold) var(--moinho-role-label-size)/1 var(--moinho-font-mono);
	letter-spacing: var(--moinho-role-label-tracking);
	font-variant-numeric: tabular-nums;
	color: var(--moinho-route-accent);
}
.home .moinho-processo__conteudo { grid-column: 1 / -1; align-self: start; display: grid; gap: var(--moinho-space-2xs); }
.home .moinho-processo__conteudo h3 {
	margin: 0;
	font: var(--moinho-role-h4-weight) var(--moinho-role-h4-size)/var(--moinho-role-h4-leading) var(--moinho-role-heading-family);
	letter-spacing: var(--moinho-role-h4-tracking);
	color: var(--moinho-color-text);
}
.home .moinho-processo__conteudo p {
	margin: 0;
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-role-body-leading);
	color: var(--moinho-color-text-muted);
	text-align: start;
}
@media (hover: hover) {
	.home .moinho-processo__cartao-inner:hover { border-color: color-mix(in srgb, var(--moinho-color-primary) 45%, transparent); transform: translateY(-3px); }
}
@media (max-width: 63.9375rem) {
	.home .moinho-processo__etapas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 47.9375rem) {
	.home .moinho-processo__etapas { grid-template-columns: 1fr; gap: var(--moinho-space-sm); }
	.home .moinho-processo__cartao-inner { padding: var(--moinho-space-md); }
}
html[data-moinho-theme="dark"] .home .moinho-processo__cartao-inner {
	background: linear-gradient(145deg, rgb(255 255 255 / .08), rgb(255 255 255 / .03));
	box-shadow: 0 24px 60px -48px rgb(0 0 0 / .8), inset 0 1px 0 rgb(255 255 255 / .08);
}
html[data-moinho-theme="dark"] .home .moinho-processo__icone { background: linear-gradient(145deg, rgb(255 255 255 / .12), rgb(255 255 255 / .04)); box-shadow: none; }

/* Sobre: apenas o dado que o tema consegue comprovar automaticamente. */
/* Secao cabe numa tela (cliente, 15/09/2026): respiro vertical reduzido
   e a foto limitada a altura da janela menos a dock. */
.home .moinho-about { padding-block: clamp(3.5rem, 6vw, 5.5rem); }
.home .moinho-about__titulo { max-inline-size: var(--moinho-heading-measure); }

/*
 * O dado-ancora da secao (15/09/2026). Antes era um "14" em tamanho de H2
 * espremido entre dois paragrafos e duas reguas iguais: lia como linha de
 * tabela. Agora o numero vai para a escala de display (o mesmo token dos
 * numeros grandes do site), com a luz de marca atras, o rotulo alinhado a
 * base do numero e uma regua so, em cima, mais curta que a coluna. A
 * contagem de 0 a 14 vive em core.js (data-moinho-contador) e so dispara
 * com o bloco 60% visivel.
 */
.home .moinho-about__dado {
	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: end;
	gap: clamp(1rem, 2.5vw, 2rem);
	max-inline-size: var(--moinho-copy-measure);
	margin: clamp(1.25rem, 2.5vw, 2rem) 0;
	padding-block: clamp(.75rem, 1.5vw, 1.25rem) 0;
	border-block-start: var(--moinho-border-width) solid var(--moinho-color-border);
	color: var(--moinho-color-text-muted);
}
.home .moinho-about__dado-luz {
	position: absolute;
	z-index: -1;
	inset-block: -30% -20%;
	inset-inline-start: -12%;
	inline-size: min(60%, 22rem);
	border-radius: 50%;
	background: radial-gradient(circle, var(--moinho-color-primary-soft), transparent 68%);
	filter: blur(1.25rem);
	pointer-events: none;
}
.home .moinho-about__dado-numero {
	min-inline-size: 2ch;
	font: var(--moinho-role-display-weight) var(--moinho-text-display)/.82 var(--moinho-role-display-family);
	letter-spacing: var(--moinho-role-display-tracking);
	font-variant-numeric: tabular-nums;
	color: var(--moinho-color-primary-readable);
}
.home .moinho-about__dado-corpo {
	display: grid;
	gap: var(--moinho-space-3xs);
	min-inline-size: 0;
	padding-block-end: .35em;
}
.home .moinho-about__dado b {
	font: var(--moinho-role-h3-weight) var(--moinho-role-h3-size)/var(--moinho-role-h3-leading) var(--moinho-role-heading-family);
	letter-spacing: var(--moinho-role-h3-tracking);
	color: var(--moinho-color-text);
}
.home .moinho-about__dado small {
	max-inline-size: 30ch;
	font-size: var(--moinho-role-small-size);
	font-weight: var(--moinho-weight-regular);
	line-height: var(--moinho-role-body-leading);
	color: var(--moinho-color-text-muted);
}

/* Portfolio em reel.

   O LAYOUT da faixa vive em pages/cases/cases.css, sem prefixo de pagina,
   porque a mesma secao roda em Expertises. Ficou aqui so o que e da home:
   o capitulo ocupa a tela inteira, o card e maior e a moldura da foto usa a
   borda de vidro que o resto da home usa. */
.home .moinho-cases {
	padding-block: 0;
	overflow: clip;
}
.home .moinho-cases__painel {
	gap: clamp(1.25rem, 2.5vh, 2.25rem);
	padding-block: clamp(2rem, 4.5vh, 4rem);
}
.home .moinho-cases .moinho-section__title { max-inline-size: var(--moinho-heading-measure); }
.home .moinho-cases__trilha {
	--moinho-case-reel-size: clamp(24rem, min(48vw, 50svh), 40rem);

	gap: clamp(1rem, 2.4vw, 2.25rem);
}
.home .moinho-cases .moinho-card__media {
	border-color: var(--moinho-home-card-border);
	box-shadow: 0 30px 80px -54px rgb(27 14 39 / .7);
}
/* Pinning: enquanto o GSAP conduz a faixa, a janela nao rola sozinha. */
.home .moinho-cases__painel.is-scroll-driven { min-block-size: 100svh; }
.home .moinho-cases__painel.is-scroll-driven .moinho-cases__janela {
	overflow: hidden;
	scroll-snap-type: none;
	touch-action: pan-y;
}
.home .moinho-cases__painel.is-scroll-driven .moinho-cases__trilha { will-change: transform; }

/* Princípios: três cartões em pilha, com ícones lineares do mesmo sistema. */
.home .moinho-diferenciais { padding-block: clamp(7rem, 12vw, 12rem); overflow: visible; }
.home .moinho-diferenciais .moinho-section__head { position: relative; z-index: 2; }
/* Mesmo motivo da pilha das frentes: em grid, o sticky fica preso a
   propria linha e o empilhamento nao acontece. */
.home .moinho-diferenciais__pilha { display: flow-root; max-inline-size: 72rem; margin-inline: auto; }
.home .moinho-diferenciais__card + .moinho-diferenciais__card { margin-block-start: var(--moinho-space-lg); }
.home .moinho-diferenciais__card {
	position: sticky;
	inset-block-start: calc(5vh + var(--moinho-principle-offset, 0rem));
	display: grid;
	grid-template-columns: .35fr 1fr;
	grid-template-rows: auto 1fr;
	column-gap: clamp(1.5rem, 3vw, 3rem);
	row-gap: clamp(1.5rem, 3vw, 2.5rem);
	align-items: start;
	min-block-size: min(72vh, 42rem);
	padding: clamp(1.5rem, 4vw, 4rem);
	overflow: hidden;
	border: var(--moinho-border-width) solid rgb(255 255 255 / .22);
	border-radius: var(--moinho-radius-panel-lg);
	background:
		radial-gradient(circle at 84% 12%, rgb(255 255 255 / .19), transparent 28%),
		linear-gradient(145deg, #5f3581, #764a98 58%, #287fb2);
	color: var(--moinho-color-text-on-brand);
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .3), 0 35px 100px -55px rgb(13 6 22 / .88);
}
.home .moinho-diferenciais__card--2 { --moinho-principle-offset: 1.2rem; background: radial-gradient(circle at 18% 12%, rgb(79 176 224 / .25), transparent 28%), linear-gradient(145deg, #15101e, #23152f 58%, #162b3b); }
.home .moinho-diferenciais__card--3 { --moinho-principle-offset: 2.4rem; background: radial-gradient(circle at 82% 20%, rgb(140 83 184 / .34), transparent 30%), linear-gradient(145deg, #17111f, #321c45 58%, #3f2760); }
.home .moinho-diferenciais__card-foto {
	grid-column: 2;
	grid-row: 1;
	inline-size: 100%;
	aspect-ratio: 18 / 5;
	object-fit: cover;
	object-position: var(--moinho-foto-foco, 50% 50%);
	border-radius: var(--moinho-radius-lg);
	filter: saturate(.9) contrast(1.04);
}
.home .moinho-diferenciais__card-topo { grid-column: 1; grid-row: 1; align-self: start; display: flex; align-items: center; gap: var(--moinho-space-sm); }
.home .moinho-diferenciais__card-numero { font-size: var(--moinho-role-label-size); font-weight: var(--moinho-weight-semibold); letter-spacing: .15em; }
.home .moinho-diferenciais__card-icon { display: grid; place-items: center; inline-size: 3.25rem; block-size: 3.25rem; border: 1px solid rgb(255 255 255 / .3); border-radius: var(--moinho-radius-circle); color: var(--moinho-color-text-on-brand); background: var(--moinho-color-fill-on-dark); }
.home .moinho-diferenciais__card-icon .moinho-icon { --moinho-icon-size: 1.35rem; color: var(--moinho-color-text-on-brand); }
.home .moinho-diferenciais__card-corpo { grid-column: 2; grid-row: 2; align-self: end; max-inline-size: 48rem; }
.home .moinho-diferenciais__card h3 { max-inline-size: 12ch; margin: 0 0 var(--moinho-space-md); font: var(--moinho-role-h2-weight) var(--moinho-role-h2-size)/var(--moinho-role-h2-leading) var(--moinho-role-heading-family); letter-spacing: var(--moinho-role-h2-tracking); color: var(--moinho-color-text-on-brand); }
.home .moinho-diferenciais__card p { max-inline-size: 38ch; margin: 0; font-size: var(--moinho-role-body-lg-size); line-height: var(--moinho-role-body-lg-leading); color: var(--moinho-color-text-on-brand); }

/* Clientes reais derivados dos cases. */
.home .moinho-clientes { padding-block: clamp(6rem, 10vw, 10rem); }
.home .moinho-clientes .moinho-section__head { grid-template-columns: .35fr 1fr; align-items: start; }
.home .moinho-clientes__grade { display: grid; grid-template-columns: repeat(4, 1fr); margin: var(--moinho-space-xl) 0 0; padding: 0; border-block-start: var(--moinho-border-width) solid var(--moinho-color-border); list-style: none; }
.home .moinho-clientes__item { display: grid; place-items: center; min-block-size: 9rem; margin: 0; padding: var(--moinho-space-md); border-inline-end: var(--moinho-border-width) solid var(--moinho-color-border); border-block-end: var(--moinho-border-width) solid var(--moinho-color-border); color: var(--moinho-color-text-muted); filter: grayscale(1); opacity: .72; transition: opacity .25s ease, filter .25s ease, color .25s ease; }
.home .moinho-clientes__item:nth-child(4n) { border-inline-end: 0; }
.home .moinho-clientes__item span { font: var(--moinho-role-h4-weight) var(--moinho-role-h4-size)/var(--moinho-role-h4-leading) var(--moinho-role-heading-family); text-align: center; }
.home .moinho-clientes__item img { max-inline-size: min(10rem, 80%); max-block-size: 3.25rem; object-fit: contain; }
@media (hover: hover) { .home .moinho-clientes__item:hover { opacity: 1; filter: none; color: var(--moinho-color-primary-readable); } }

/* Conteúdo como pequeno caderno editorial. */
.home .moinho-blog { padding-block: clamp(7rem, 12vw, 12rem); }

/* Perguntas frequentes: contexto e respostas dividem a mesma composicao.
   O cabecalho ocupa a area antes vazia e os cards preservam uma coluna de
   leitura confortavel, sem comprimir as respostas. */
.home .moinho-faq { padding-block: clamp(6rem, 10vw, 9.5rem); }

/* ---- FAQ com o convite dentro ------------------------------------------ */

/*
 * O container precisa de contexto proprio: sem ele, a foto e os orbs (que sao
 * `position: absolute` na secao) passam por cima do texto em vez de ficarem
 * atras dele.
 */
.home .moinho-faq--convite > .moinho-container { position: relative; }

/*
 * O titulo passa a ser a pergunta comercial, entao ganha a voz de display que
 * ele tinha no convite. As 11ch do titulo antigo eram medida para "Antes de
 * comecar, vale saber": a pergunta nova tem o dobro de palavras.
 */
.home .moinho-faq--convite .moinho-faq__titulo {
	max-inline-size: 15ch;
	font: var(--moinho-role-display-weight) var(--moinho-role-display-size)/var(--moinho-role-display-leading) var(--moinho-role-display-family);
	letter-spacing: var(--moinho-role-display-tracking);
	color: var(--moinho-color-text-on-brand);
}

.home .moinho-faq--convite .moinho-faq__intro {
	max-inline-size: 42ch;
	color: var(--moinho-color-text-on-dark-muted);
}

.home .moinho-faq--convite .moinho-faq__acoes {
	margin-block-start: var(--moinho-space-lg);
}

/*
 * A marca d agua fica presa ao cabecalho, nao ao meio da secao: no convite
 * isolado ela emoldurava um bloco centrado, aqui emolduraria a lista de
 * perguntas se ficasse onde estava.
 */
.home .moinho-faq--convite .moinho-faq__cabecalho { position: relative; }
.home .moinho-faq--convite .moinho-final-cta__marca { inset: -12% -18% auto auto; }
.home .moinho-faq > .moinho-container {
	display: grid;
	grid-template-columns: minmax(17rem, 4fr) minmax(0, 8fr);
	column-gap: clamp(3rem, 6vw, 7rem);
	align-items: start;
}
.home .moinho-faq__cabecalho {
	padding-block-start: .55rem;
}
.home .moinho-faq__cabecalho .moinho-eyebrow { margin: 0 0 var(--moinho-space-md); }
.home .moinho-faq__titulo {
	max-inline-size: 11ch;
	margin: 0;
	font: var(--moinho-role-h2-weight) var(--moinho-role-h2-size)/var(--moinho-role-h2-leading) var(--moinho-role-heading-family); letter-spacing: var(--moinho-role-h2-tracking);
	text-wrap: balance;
}
.home .moinho-faq__intro {
	max-inline-size: 34ch;
	margin: var(--moinho-space-lg) 0 0;
	font-size: var(--moinho-role-body-lg-size);
	line-height: var(--moinho-role-body-lg-leading);
	color: var(--moinho-color-text-muted);
	text-wrap: pretty;
}
/* ---- Fonte: a lista inteira, e o que existe sem JavaScript ------------- */
.home .moinho-faq__fonte {
	display: grid;
	gap: var(--moinho-space-sm);
	inline-size: 100%;
	margin: 0;
}
.home .moinho-faq__par {
	padding: var(--moinho-space-lg);
	border: var(--moinho-border-width) solid var(--moinho-home-card-border);
	border-radius: var(--moinho-radius-xl);
	background: var(--moinho-home-card-bg);
	box-shadow: inset 0 1px 0 var(--moinho-home-card-highlight), var(--moinho-shadow-sm);
}
.home .moinho-faq__pergunta {
	max-inline-size: 42ch;
	margin: 0;
	font: var(--moinho-role-h4-weight) var(--moinho-role-h4-size)/var(--moinho-role-h4-leading) var(--moinho-role-heading-family);
	letter-spacing: var(--moinho-role-h4-tracking);
	color: var(--moinho-color-text);
	text-wrap: pretty;
}
.home .moinho-faq__resposta {
	max-inline-size: 62ch;
	margin: var(--moinho-space-sm) 0 0;
	font-size: var(--moinho-role-body-size);
	line-height: var(--moinho-leading-relaxed);
	color: var(--moinho-color-text-muted);
}
/* Com o painel montado, a fonte ja cedeu o conteudo e sai de cena. */
.home .moinho-faq__conversa[data-moinho-faq-ready] .moinho-faq__fonte { display: none; }

/* ---- Painel da conversa ------------------------------------------------ */
.home .moinho-faq__painel {
	display: grid;
	gap: var(--moinho-space-md);
	inline-size: 100%;
	padding: var(--moinho-space-lg);
	border: var(--moinho-border-width) solid var(--moinho-home-card-border);
	border-radius: var(--moinho-radius-xl);
	background: var(--moinho-home-card-bg);
	box-shadow: inset 0 1px 0 var(--moinho-home-card-highlight), var(--moinho-shadow-sm);
}
.home .moinho-faq__topo {
	display: flex;
	align-items: center;
	gap: var(--moinho-space-sm);
	padding-block-end: var(--moinho-space-md);
	border-block-end: var(--moinho-border-width) solid var(--moinho-color-border);
}
.home .moinho-faq__avatar {
	display: grid;
	place-items: center;
	inline-size: 2.5rem;
	block-size: 2.5rem;
	border-radius: var(--moinho-radius-circle);
	background: var(--moinho-color-primary);
	font: var(--moinho-role-label-weight) var(--moinho-role-label-size)/1 var(--moinho-role-heading-family);
	color: var(--moinho-color-text-on-brand);
}
.home .moinho-faq__identidade { display: grid; }
.home .moinho-faq__agente {
	font: var(--moinho-role-body-weight) var(--moinho-role-body-size)/var(--moinho-leading-snug) var(--moinho-role-heading-family);
	color: var(--moinho-color-text);
}
.home .moinho-faq__estado {
	display: flex;
	align-items: center;
	gap: var(--moinho-space-3xs);
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-role-small-leading);
	color: var(--moinho-color-text-muted);
}
.home .moinho-faq__estado::before {
	content: "";
	inline-size: .4rem;
	block-size: .4rem;
	border-radius: var(--moinho-radius-circle);
	background: var(--moinho-sucesso);
}

/* ---- Transcricao ------------------------------------------------------- */
/*
 * A transcricao rola por dentro, como num chat. A altura maxima segura o
 * painel: sem ela a secao cresceria sem fim a cada pergunta e a bandeja
 * fugiria da tela. `overscroll-behavior` impede que o fim da transcricao
 * arraste a pagina junto.
 */
.home .moinho-faq__log {
	display: grid;
	align-content: start;
	gap: var(--moinho-space-sm);
	min-block-size: 11rem;
	max-block-size: min(58svh, 28rem);
	margin: 0;
	padding: 0 var(--moinho-space-2xs) 0 0;
	overflow-y: auto;
	overscroll-behavior-block: contain;
	list-style: none;

	/* Barra sempre visivel: sem ela ninguem descobre que a conversa rola. */
	scrollbar-width: thin;
	scrollbar-color: var(--moinho-color-border-strong) transparent;
}
.home .moinho-faq__log::-webkit-scrollbar { inline-size: 6px; }
.home .moinho-faq__log::-webkit-scrollbar-track { background: transparent; }
.home .moinho-faq__log::-webkit-scrollbar-thumb {
	border-radius: var(--moinho-radius-pill);
	background: var(--moinho-color-border-strong);
}
.home .moinho-faq__log:focus-visible {
	outline: var(--moinho-border-width-strong) solid var(--moinho-color-focus);
	outline-offset: var(--moinho-focus-ring-offset);
	border-radius: var(--moinho-radius-md);
}
.home .moinho-faq__balao {
	max-inline-size: 46ch;
	padding: var(--moinho-space-sm) var(--moinho-space-md);
	border: var(--moinho-border-width) solid var(--moinho-color-border);
}
/*
 * O canto reto e o rabinho do balao. Vem de tokens de raio, nao de um
 * clamp avulso.
 */
.home .moinho-faq__balao--moinho {
	justify-self: start;
	border-start-start-radius: var(--moinho-radius-lg);
	border-start-end-radius: var(--moinho-radius-lg);
	border-end-end-radius: var(--moinho-radius-lg);
	border-end-start-radius: var(--moinho-radius-sm);
	background: var(--moinho-color-surface);
}
.home .moinho-faq__balao--eu {
	justify-self: end;
	border-color: color-mix(in srgb, var(--moinho-color-primary) 42%, transparent);
	border-start-start-radius: var(--moinho-radius-lg);
	border-start-end-radius: var(--moinho-radius-lg);
	border-end-end-radius: var(--moinho-radius-sm);
	border-end-start-radius: var(--moinho-radius-lg);
	background: color-mix(in srgb, var(--moinho-color-primary-soft) 62%, transparent);
}
.home .moinho-faq__texto {
	margin: 0;
	font-size: var(--moinho-role-body-size);
	line-height: var(--moinho-leading-relaxed);
	color: var(--moinho-color-text);
	text-align: start;
	text-wrap: pretty;
}
.home .moinho-faq__balao--moinho .moinho-faq__texto { color: var(--moinho-color-text-muted); }

/* ---- Cara de conversa --------------------------------------------------
   A entrada era a mesma para os dois lados: 8px de subida, sem direcao. Num
   chat a direcao E a informacao — a fala de quem pergunta chega da direita, a
   de quem responde vem da esquerda, e e isso que faz a transcricao ler como
   troca em vez de lista.

   Curso curto e mola leve. Balao que entra devagar parece travamento, nao
   resposta.
   ------------------------------------------------------------------------ */

.home .moinho-faq__balao--moinho {
	animation: moinho-faq-entra-moinho 320ms var(--moinho-ease-spring) both;
}

.home .moinho-faq__balao--eu {
	animation: moinho-faq-entra-eu 320ms var(--moinho-ease-spring) both;
}

@keyframes moinho-faq-entra-moinho {
	from { opacity: 0; transform: translate(-1.25rem, .5rem) scale(.96); }
	to   { opacity: 1; transform: none; }
}

@keyframes moinho-faq-entra-eu {
	from { opacity: 0; transform: translate(1.25rem, .5rem) scale(.96); }
	to   { opacity: 1; transform: none; }
}

/*
 * O balao responde ao ponteiro. Nao e enfeite: e o que diz que aquele bloco e
 * uma mensagem, e nao um paragrafo qualquer da pagina.
 */
@media (hover: hover) and (pointer: fine) {
	.home .moinho-faq__balao {
		transition:
			transform var(--moinho-duration-fast) var(--moinho-ease-out),
			border-color var(--moinho-duration-normal) var(--moinho-ease-out);
	}
	.home .moinho-faq__balao:hover {
		transform: translateY(-2px);
		border-color: var(--moinho-color-border-strong);
	}
}

/*
 * Os tres pontos tambem entram e saem. Antes apareciam de uma vez no lugar
 * exato onde a resposta ia nascer, o que lia como pisca em vez de espera.
 */
.home .moinho-faq__digitando {
	animation: moinho-faq-entra-moinho 260ms var(--moinho-ease-out) both;
}

/* ---- Recomecar ---------------------------------------------------------
   O elemento entra no seletor junto com a classe: o kit global do Elementor
   injeta `.elementor-kit-NN button` e transformaria este controle em retangulo
   azul quando a ordem de carregamento mudasse. Mesma guarda da D61.
   ------------------------------------------------------------------------ */

.home button.moinho-faq__recomecar {
	margin-inline-start: auto;
	padding: var(--moinho-space-3xs) var(--moinho-space-2xs);
	border: var(--moinho-border-width) solid transparent;
	border-radius: var(--moinho-radius-pill);
	background: transparent;
	color: var(--moinho-color-text-muted);
	font-family: inherit;
	font-size: var(--moinho-role-small-size);
	letter-spacing: var(--moinho-role-small-tracking);
	cursor: pointer;
	transition:
		color var(--moinho-duration-normal) var(--moinho-ease-out),
		border-color var(--moinho-duration-normal) var(--moinho-ease-out),
		background-color var(--moinho-duration-normal) var(--moinho-ease-out);
}

.home button.moinho-faq__recomecar[hidden] { display: none; }

@media (hover: hover) and (pointer: fine) {
	.home button.moinho-faq__recomecar:hover {
		border-color: var(--moinho-color-border);
		background: var(--moinho-color-glass);
		color: var(--moinho-color-text);
	}
}

.home button.moinho-faq__recomecar:active { transform: scale(.96); }

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

/*
 * Resposta palavra a palavra. E DECORACAO: o paragrafo entra no documento
 * inteiro e de uma vez, cada palavra so espera a propria vez de aparecer. O
 * leitor de tela recebe a frase pronta; o indice tem teto no JS para resposta
 * longa nao virar espera.
 *
 * `inline-block` mantem a palavra inteira numa linha so, e o espaco vai dentro
 * do span — por isso `pre-wrap`, senao a frase sai grudada ao ser copiada.
 */
.home .moinho-faq__palavra {
	--moinho-faq-palavra: 0;

	display: inline-block;
	white-space: pre-wrap;
	animation: moinho-faq-palavra 240ms var(--moinho-ease-out) both;
	animation-delay: calc(var(--moinho-faq-palavra) * 22ms);
}
@keyframes moinho-faq-palavra {
	from { opacity: 0; transform: translateY(3px); }
	to { opacity: 1; transform: none; }
}

/* ---- Digitando --------------------------------------------------------- */
.home .moinho-faq__digitando[hidden] { display: none; }
.home .moinho-faq__digitando {
	/* Vive dentro da transcricao, onde a resposta vai nascer. */
	inline-size: max-content;
	display: flex;
	align-items: center;
	gap: var(--moinho-space-3xs);
	justify-self: start;
	margin: 0;
	padding: var(--moinho-space-sm) var(--moinho-space-md);
	border: var(--moinho-border-width) solid var(--moinho-color-border);
	border-radius: var(--moinho-radius-lg);
	background: var(--moinho-color-surface);
}
/*
 * Quique, nao piscada. So opacidade lia como cintilacao; o padrao que todo
 * mundo reconhece como "digitando" e a bolinha subindo em sequencia.
 */
.home .moinho-faq__ponto {
	inline-size: .45rem;
	block-size: .45rem;
	border-radius: var(--moinho-radius-circle);
	background: var(--moinho-color-text-muted);
	animation: moinho-faq-digita 1.2s var(--moinho-ease-in-out) infinite;
}
.home .moinho-faq__ponto:nth-child(2) { animation-delay: .16s; }
.home .moinho-faq__ponto:nth-child(3) { animation-delay: .32s; }
@keyframes moinho-faq-digita {
	0%, 60%, 100% { opacity: .35; transform: none; }
	30% { opacity: 1; transform: translateY(-.28rem); }
}

/* ---- Perguntas disponiveis --------------------------------------------- */
.home .moinho-faq__respostas {
	display: flex;
	flex-wrap: wrap;
	/*
	 * O vao precisa caber o anel de foco. Com `2xs` (8px) o anel — 2px de
	 * traco mais 3px de deslocamento — encostava no chip vizinho e lia como
	 * cor sobreposta.
	 */
	gap: var(--moinho-space-xs);
	margin: 0;
	padding-block-start: var(--moinho-space-md);
	border-block-start: var(--moinho-border-width) solid var(--moinho-color-border);
	list-style: none;
}
.home .moinho-faq__respostas:empty { display: none; }
.home .moinho-faq__resposta-item { display: contents; }
/*
 * `display: contents` vence a regra de agente de usuario para `[hidden]`.
 * Sem isto a pergunta em cena continuaria na bandeja — mesmo tropeco que o
 * indicador de digitacao ja deu.
 */
.home .moinho-faq__resposta-item[hidden] { display: none; }

/*
 * Tres classes de proposito.
 *
 * O chip e um `<button>` solto numa pagina que carrega kit do Elementor e o
 * CSS do GrowthKit alem do tema. Essas folhas alcancam `button` generico e
 * chegaram a impor caixa alta e uma caixa retangular por cima da pilula. Com
 * a profundidade da bandeja no seletor, o componente ganha de todas elas sem
 * precisar de `!important`, e cada propriedade que ja foi sequestrada fica
 * declarada aqui em vez de herdada.
 */
.home .moinho-faq__respostas .moinho-faq__chip {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	/* 44px: alvo de toque minimo. Antes eram 32. */
	min-block-size: 2.75rem;
	max-inline-size: 100%;
	margin: 0;
	padding: var(--moinho-space-2xs) var(--moinho-space-md);
	border: var(--moinho-border-width) solid color-mix(in srgb, var(--moinho-color-primary) 34%, var(--moinho-color-border));
	border-radius: var(--moinho-radius-pill);
	background: transparent;
	box-shadow: none;
	font-family: var(--moinho-role-ui-family);
	font-size: var(--moinho-role-button-size);
	font-weight: var(--moinho-role-button-weight);
	line-height: var(--moinho-leading-snug);
	letter-spacing: var(--moinho-role-button-tracking);
	color: var(--moinho-color-primary-readable);
	text-align: start;
	text-transform: none;
	text-decoration: none;
	text-wrap: pretty;
	animation: none;
	cursor: pointer;
	transition:
		border-color var(--moinho-duration-fast) var(--moinho-ease-out),
		background-color var(--moinho-duration-fast) var(--moinho-ease-out),
		color var(--moinho-duration-fast) var(--moinho-ease-out);
}
/*
 * O foco global do tema impoe `border-radius: var(--moinho-radius-sm)` em
 * qualquer elemento focado, e o anel segue o raio do elemento: sem repetir a
 * pilula aqui, o foco desenhava um retangulo em volta de um chip redondo.
 * A cor tambem e redeclarada — foi ela que sumia sob o CSS de fora.
 */
.home .moinho-faq__respostas .moinho-faq__chip:focus-visible {
	border-radius: var(--moinho-radius-pill);
	border-color: var(--moinho-color-primary);
	outline: var(--moinho-border-width-strong) solid var(--moinho-color-focus);
	outline-offset: var(--moinho-focus-ring-offset);
	background: color-mix(in srgb, var(--moinho-color-primary) 16%, transparent);
	color: var(--moinho-color-primary-readable);
}
.home .moinho-faq__respostas .moinho-faq__chip--cta {
	border-color: var(--moinho-color-primary);
	background: var(--moinho-color-primary);
	color: var(--moinho-color-text-on-brand);
}
.home .moinho-faq__respostas .moinho-faq__chip--cta:focus-visible {
	background: var(--moinho-color-primary);
	color: var(--moinho-color-text-on-brand);
}

@media (hover: hover) and (pointer: fine) {
	.home .moinho-faq__respostas .moinho-faq__chip:hover {
		border-color: var(--moinho-color-primary);
		background: color-mix(in srgb, var(--moinho-color-primary) 16%, transparent);
		color: var(--moinho-color-primary-readable);
	}
	.home .moinho-faq__respostas .moinho-faq__chip--cta:hover {
		background: var(--moinho-color-primary);
		color: var(--moinho-color-text-on-brand);
	}
}

/* Leitura editorial justificada, com escala e entrelinha compartilhadas. */
.home :is(
	.moinho-section__lead,
	.moinho-manifesto__textos p,
	.moinho-rotas__intro,
	.moinho-rotas__item-texto,
	.moinho-processo__intro,
	.moinho-processo__conteudo p,
	.moinho-about__texto,
	.moinho-card__texto,
	.moinho-diferenciais__card p,
	.moinho-faq__intro,
	.moinho-faq__resposta,
	.moinho-final-cta__texto
) {
	-webkit-hyphens: none;
	hyphens: none;
	overflow-wrap: break-word;
	text-align: var(--moinho-copy-align);
	text-align-last: left;
}

.home :is(
	.moinho-manifesto__titulo,
	.moinho-rotas__titulo,
	.moinho-processo__titulo,
	.moinho-about__titulo,
	.moinho-section__title,
	.moinho-faq__titulo,
	.moinho-final-cta__titulo
) { text-wrap: balance; }

/* CTA final: capítulo escuro que prepara a chegada ao rodapé. */
/*
 * Superficie do convite. Vale para o bloco isolado (shortcode) e para o FAQ,
 * que absorveu o convite e herdou o fundo junto: sao a mesma superficie em
 * dois enderecos, entao dividem a declaracao em vez de duplicar o fundo.
 */
.home .moinho-final-cta,
.home .moinho-faq--convite {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: #0a0710;
	color: var(--moinho-color-text-on-brand);
}
/* Altura de tela cheia e centragem sao do bloco isolado: no FAQ a altura vem
   da lista de perguntas, e centrar jogaria o cabecalho para o meio dela. */
.home .moinho-final-cta {
	display: grid;
	align-items: center;
	min-block-size: min(88svh, 58rem);
	padding-block: clamp(7rem, 14vw, 13rem);
}
.home .moinho-final-cta::before,
.home .moinho-faq--convite::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px), linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px);
	background-size: 5rem 5rem;
	mask-image: radial-gradient(circle at 50% 50%, black, transparent 78%);
}
/* Camada fotografica do convite. Fica abaixo dos orbs e da grade, com
   mascara que apaga a foto exatamente onde o titulo comeca — assim a
   temperatura da imagem aparece sem custar contraste no texto. */
.home .moinho-final-cta__fundo { position: absolute; z-index: -2; inset: 0; }
.home .moinho-final-cta__fundo img {
	inline-size: 100%; block-size: 100%;
	object-fit: cover;
	opacity: .2;
	mask-image: linear-gradient(105deg, transparent 18%, black 92%);
}
.home .moinho-final-cta__orb { position: absolute; z-index: -1; border-radius: 50%; filter: blur(70px); opacity: .55; }
.home .moinho-final-cta__orb--1 { inline-size: 34rem; block-size: 34rem; inset: -12rem auto auto -8rem; background: rgb(118 74 152 / .65); animation: moinho-cosmos-orb-1 28s ease-in-out infinite alternate; }
.home .moinho-final-cta__orb--2 { inline-size: 28rem; block-size: 28rem; inset: auto -8rem -10rem auto; background: rgb(24 153 214 / .48); animation: moinho-cosmos-orb-2 34s ease-in-out infinite alternate; }
.home .moinho-final-cta__inner { position: relative; }
.home .moinho-final-cta__marca { position: absolute; inset: -18% -8% auto auto; margin: 0; inline-size: min(54vw, 34rem); /* ds-ok: marca d agua, tamanho posicional */ color: var(--moinho-color-marca-dagua-fraca); }
.home .moinho-final-cta__titulo { position: relative; max-inline-size: 15ch; margin: 0 0 var(--moinho-space-md); font: var(--moinho-role-display-weight) var(--moinho-role-display-size)/var(--moinho-role-display-leading) var(--moinho-role-display-family); letter-spacing: var(--moinho-role-display-tracking); color: var(--moinho-color-text-on-brand); text-wrap: balance; }
.home .moinho-final-cta__texto { position: relative; max-inline-size: 46ch; margin: 0 0 var(--moinho-space-lg); font-size: var(--moinho-role-body-lg-size); line-height: var(--moinho-role-body-lg-leading); color: var(--moinho-color-text-on-dark-muted); }
/* Sem !important: a secao recebe .moinho-invert no PHP e o botao outline
   ja sabe se comportar em superficie escura. */

html[data-moinho-theme="dark"] .home .moinho-manifesto { background: radial-gradient(circle at 87% 16%, rgb(118 74 152 / .2), transparent 30%), linear-gradient(145deg, #0d0913, #07050b); }
html[data-moinho-theme="dark"] .home .moinho-processo { background: rgb(12 9 17 / .74); }

@media (max-width: 63.9375rem) {
	/* Tablet: as duas colunas continuam enquanto couberem. O que cede e a
	   proporcao (55/45 em vez de 60/40) e a trava do titulo, que a esta
	   largura fecharia em linha curta demais. */
	.home .moinho-manifesto__inner {
		grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
		column-gap: var(--moinho-space-xl);
	}
	.home .moinho-manifesto__titulo { max-inline-size: 20ch; }
	/* Lado a lado nao cabe mais. O retrato desce para baixo do texto,
	   alinhado a ele, com largura maxima: 4:5 na largura toda do tablet
	   daria uma foto de 900px de altura. */
	/* No tablet a coluna da direita e estreita e a da esquerda continua
	   longa: esticar aqui daria uma tira de 380px por 900px. Volta a ter
	   proporcao propria e o topo alinhado. */
	.home .moinho-manifesto__retrato { align-self: start; }
	.home .moinho-manifesto__retrato .moinho-media { flex: none; --moinho-media-ratio: 3 / 4; min-block-size: 0; }
	.home .moinho-rotas__cabecalho { grid-template-columns: .28fr 1fr; }
	.home .moinho-rotas__intro { grid-column: 2; }
	.home .moinho-rotas__item { grid-template-columns: 3.5rem minmax(0, 1fr) auto; grid-template-rows: auto auto; }
	.home .moinho-rotas__item-icon { grid-column: 1; grid-row: 1; align-self: center; }
	.home .moinho-rotas__item-cabeca { grid-column: 2; grid-row: 1; }
	.home .moinho-rotas__item-texto { grid-column: 2; grid-row: 2; }
	.home .moinho-rotas__item-cta { grid-column: 3; grid-row: 1 / span 2; }
	.home .moinho-processo__inner { grid-template-columns: 1fr; }
	.home .moinho-cases__intro { grid-column: 1 / span 9; }
	.home .moinho-cases__acao { grid-column: 10 / -1; }
	.home .moinho-cases__trilha { --moinho-case-reel-size: min(72vw, 40rem); }
	.home .moinho-diferenciais__card { min-block-size: min(68vh, 36rem); }
	.home .moinho-clientes__grade { grid-template-columns: repeat(3, 1fr); }
	.home .moinho-clientes__item:nth-child(4n) { border-inline-end: var(--moinho-border-width) solid var(--moinho-color-border); }
	.home .moinho-clientes__item:nth-child(3n) { border-inline-end: 0; }
	.home .moinho-faq > .moinho-container {
		grid-template-columns: minmax(15rem, .8fr) minmax(0, 1.2fr);
		column-gap: var(--moinho-space-xl);
	}
	.home .moinho-faq__titulo { max-inline-size: 12ch; }
	.home .moinho-faq__intro { max-inline-size: 30ch; }
}

@media (max-width: 47.9375rem) {
	.home .moinho-hero__corpo { max-inline-size: 100%; }
	.home .moinho-hero { align-items: start; padding-block-start: var(--moinho-section-space); }
	.home .moinho-hero__texto { font-size: var(--moinho-role-body-size); line-height: var(--moinho-role-body-leading); }
	/* Coluna unica, na ordem do markup: rotulo, titulo, foto, legenda, textos.
	   O grid de uma coluna e o que dispensa `order` — a ordem visual e a
	   mesma que o leitor de tela percorre. */
	.home .moinho-manifesto { padding-block: 5rem; }
	.home .moinho-manifesto__inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"capitulo"
			"titulo"
			"retrato"
			"textos";
		row-gap: 2.75rem;
	}
	.home .moinho-manifesto__capitulo { margin-block-end: 0; }
	.home .moinho-manifesto__titulo { max-inline-size: none; }
	.home .moinho-manifesto__textos { margin-block: 0; gap: var(--moinho-paragraph-gap); }
	.home .moinho-manifesto__retrato { align-self: start; }
	.home .moinho-manifesto__retrato .moinho-media { flex: none; --moinho-media-ratio: 4 / 5; min-block-size: 0; }
	.home .moinho-rotas__cabecalho { display: block; }
	.home .moinho-rotas__intro { margin-block-start: var(--moinho-heading-gap); }
	.home .moinho-rotas__item { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); grid-template-rows: auto auto auto; }
	.home .moinho-rotas__item-icon { grid-column: 1; grid-row: 1; }
	.home .moinho-rotas__item-cabeca { grid-column: 2; grid-row: 1; }
	.home .moinho-rotas__item-texto { grid-column: 1 / -1; grid-row: 2; }
	.home .moinho-rotas__item-cta { grid-column: 1 / -1; grid-row: 3; }
	.home .moinho-processo__inner { grid-template-columns: 1fr; }
	.home .moinho-about__dado { inline-size: 100%; }
	.home .moinho-cases__painel { gap: var(--moinho-space-lg); padding-block: var(--moinho-space-2xl); }
	.home .moinho-cases__cabecalho { display: block; }
	.home .moinho-cases__acao { margin-block-start: var(--moinho-space-md); }
	.home .moinho-cases__trilha {
		--moinho-case-reel-size: min(86vw, 30rem);
		gap: var(--moinho-space-sm);
	}
	.home .moinho-diferenciais__card { position: relative; inset: auto; grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; min-block-size: 32rem; }
	.home .moinho-diferenciais__card-topo { grid-column: 1; grid-row: 1; }
	.home .moinho-diferenciais__card-foto { grid-column: 1; grid-row: 2; aspect-ratio: 16 / 6; }
	.home .moinho-diferenciais__card-corpo { grid-column: 1; grid-row: 3; }
	.home .moinho-clientes .moinho-section__head { display: block; }
	.home .moinho-clientes .moinho-section__title { margin-block-start: var(--moinho-space-sm); }
	.home .moinho-clientes__grade { grid-template-columns: repeat(2, 1fr); }
	.home .moinho-clientes__item:nth-child(3n) { border-inline-end: var(--moinho-border-width) solid var(--moinho-color-border); }
	.home .moinho-clientes__item:nth-child(2n) { border-inline-end: 0; }
	.home .moinho-faq > .moinho-container { display: block; }
	.home .moinho-faq__cabecalho { padding-block-start: 0; margin-block-end: var(--moinho-space-xl); }
	.home .moinho-faq__cabecalho .moinho-eyebrow { margin-block: 0 var(--moinho-space-sm); }
	.home .moinho-faq__titulo { max-inline-size: 14ch; }
	.home .moinho-faq__intro { max-inline-size: 38ch; margin-block-start: var(--moinho-space-md); }
	.home .moinho-faq__painel { padding: var(--moinho-space-md); border-radius: var(--moinho-radius-lg); }
	.home .moinho-faq__par { padding: var(--moinho-space-md); border-radius: var(--moinho-radius-lg); }
	.home .moinho-faq__balao { max-inline-size: 100%; }
	.home .moinho-final-cta { min-block-size: 78svh; }
}

/* =========================================================================
   Trabalhos selecionados (home) - "mesa de trabalho"

   Trilho sticky a esquerda + coluna de trabalhos a direita. O stick e do
   CABECALHO, nao dos cards: Frentes de trabalho e Diferenciais ja empilham
   cartoes nesta mesma pagina, e uma terceira pilha seria a mesma gramatica
   pela terceira vez.

   Sticky e CSS puro. Sem `ScrollTrigger.pin`: nao ha pin-spacer para disputar
   refresh com as duas pilhas nem com a faixa horizontal pinada que serve
   Expertises, arquivo e busca. Com JavaScript desligado a secao continua
   inteira - so perde a banda ativa e o parallax.
   ========================================================================= */
.home .moinho-cases--editorial {
	padding-block: clamp(5rem, 9vw, 10rem);
	/*
	 * Um eixo de cada vez. `overflow: clip` nos dois (herdado da regra base
	 * de .moinho-cases) cria contexto de recorte e o trilho sticky perde para
	 * onde deslizar. Com clip so no eixo horizontal, o vertical continua
	 * `visible` e o sticky funciona.
	 */
	overflow-x: clip;
	overflow-y: visible;
}
.home .moinho-cases--editorial .moinho-cases__painel {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--moinho-space-xl);
	padding: 0;
	/*
	 * `align-items: stretch` (o padrao) NAO e decorativo aqui: o trilho
	 * precisa ser tao alto quanto a coluna de trabalhos para o filho sticky
	 * ter para onde deslizar. Com `start`, o item encolhe ate o conteudo e o
	 * sticky simplesmente rola junto.
	 */
	align-items: stretch;
}
.home .moinho-cases--editorial .moinho-eyebrow { margin: 0; text-transform: none; letter-spacing: normal; }

/* ---- Trilho ------------------------------------------------------------ */
.home .moinho-cases--editorial .moinho-cases__trilho-fixo {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	justify-items: start;
	gap: var(--moinho-space-md);
}
/*
 * O cabecalho antigo era uma grade de 12 faixas e `cases.css` ainda coloca
 * `.moinho-cases__acao` na faixa 10. Dentro do trilho a grade tem uma coluna
 * so: sem este reset o botao abre colunas implicitas, o lead cai por cima da
 * coluna de trabalhos e o trilho inteiro se desmancha.
 */
.home .moinho-cases--editorial .moinho-cases__trilho-fixo > * {
	grid-column: auto;
	justify-self: start;
	padding-block-end: 0;
}
.home .moinho-cases--editorial .moinho-section__title {
	max-inline-size: none;
	margin: 0;
	font-size: var(--moinho-role-h1-size);
	line-height: var(--moinho-role-h1-leading);
	letter-spacing: var(--moinho-role-h1-tracking);
}
.home .moinho-cases--editorial .moinho-cases__linha { display: block; }
.home .moinho-cases--editorial .moinho-section__lead { max-inline-size: 46ch; margin: 0; text-align: start; }
.home .moinho-cases--editorial .moinho-cases__acao { margin: 0; }

.home .moinho-cases--editorial .moinho-cases__contador {
	display: flex;
	align-items: baseline;
	gap: var(--moinho-space-2xs);
	margin: 0;
	font-family: var(--moinho-role-heading-family);
	font-variant-numeric: tabular-nums;
	color: var(--moinho-surface-fg-muted);
}
.home .moinho-cases--editorial .moinho-cases__contador-atual {
	font-size: var(--moinho-role-h2-size);
	font-weight: var(--moinho-role-h2-weight);
	line-height: 1;
	letter-spacing: var(--moinho-role-h2-tracking);
	color: var(--moinho-surface-fg);
}
.home .moinho-cases--editorial .moinho-cases__contador-sep,
.home .moinho-cases--editorial .moinho-cases__contador-total {
	font-size: var(--moinho-role-small-size);
	letter-spacing: var(--moinho-role-small-tracking);
}

/*
 * A barra nasce cheia. Sem JavaScript, ou com movimento reduzido, ela e um
 * filete sob o contador em vez de uma barra vazia que nunca enche; o GSAP
 * anima de 0 a 1 quando ha movimento.
 */
.home .moinho-cases--editorial .moinho-cases__progresso {
	inline-size: 100%;
	block-size: 2px;
	overflow: clip;
	border-radius: var(--moinho-radius-pill);
	background: var(--moinho-surface-border);
}
.home .moinho-cases--editorial .moinho-cases__progresso > span {
	display: block;
	block-size: 100%;
	background: var(--moinho-color-primary);
	transform: scaleX(1);
	transform-origin: left;
}

/* ---- Coluna de trabalhos ----------------------------------------------- */
.home .moinho-cases--editorial .moinho-cases__trilha {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: clamp(3.5rem, 7vw, 7rem);
	inline-size: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.home .moinho-cases--editorial .moinho-cases__celula {
	position: relative;
	display: block;
	min-inline-size: 0;
	inline-size: auto;
	margin: 0;
	transition: opacity var(--moinho-duration-normal) var(--moinho-ease-out);
}
/*
 * `is-conduzido` so entra quando o GSAP assume. Sem ele nenhuma celula e
 * atenuada, entao no-JS e movimento reduzido leem os cinco trabalhos em
 * contraste cheio.
 */
.home .moinho-cases--editorial .moinho-cases__painel.is-conduzido .moinho-cases__celula { opacity: .5; }
/* Mesma profundidade de seletor que a regra que atenua: com um `.is-ativo`
   solto (menos especifico) a celula em leitura nunca acenderia. */
.home .moinho-cases--editorial .moinho-cases__painel.is-conduzido .moinho-cases__celula.is-ativo { opacity: 1; }
/* Teclado nao espera transicao: quem tabula quer o alvo cheio agora. */
.home .moinho-cases--editorial .moinho-cases__painel.is-conduzido .moinho-cases__celula:focus-within {
	opacity: 1;
	transition: none;
}

/* Numero de marca d'agua: eco visual do contador do trilho. */
.home .moinho-cases--editorial .moinho-cases__indice {
	position: absolute;
	z-index: 0;
	inset-block-start: -1.12em;
	inset-inline-start: -.04em;
	font-family: var(--moinho-role-heading-family);
	font-size: clamp(2.5rem, 5vw, 4.5rem); /* ds-ok: numero de capitulo, tamanho posicional */
	font-weight: var(--moinho-weight-black);
	line-height: 1;
	letter-spacing: var(--moinho-tracking-marca-dagua);
	color: color-mix(in srgb, var(--moinho-surface-fg) 16%, transparent);
	pointer-events: none;
	user-select: none;
	transition: color var(--moinho-duration-normal) var(--moinho-ease-out);
}
.home .moinho-cases--editorial .moinho-cases__celula.is-ativo .moinho-cases__indice {
	color: color-mix(in srgb, var(--moinho-color-primary) 62%, transparent);
}
.home .moinho-cases--editorial .moinho-cases__celula > .moinho-card { position: relative; z-index: 1; }

/* ---- Card -------------------------------------------------------------- */
.home .moinho-cases--editorial .moinho-card { gap: 0; block-size: auto; background: transparent; border: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; transform: none; transition: none; }
.home .moinho-cases--editorial .moinho-card::before { content: none; }
.home .moinho-cases__lead-2 { margin-block-start: var(--moinho-space-sm); }
.home .moinho-cases--editorial .moinho-card__media {
	aspect-ratio: 16 / 10;
	overflow: clip;
	border: 0;
	border-radius: var(--moinho-radius-panel);
	box-shadow: none;
	transition: none;
}
.home .moinho-cases--editorial .moinho-cases__celula:nth-child(even) .moinho-card__media { aspect-ratio: 5 / 4; }
.home .moinho-cases--editorial .moinho-cases__imagem { inline-size: 100%; block-size: 100%; }
.home .moinho-cases--editorial .moinho-card__media img { inline-size: 100%; block-size: 100%; object-fit: cover; transform: none; scale: 1; transition: scale 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.home .moinho-cases--editorial .moinho-card__corpo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--moinho-space-sm); padding: var(--moinho-space-md) 0 0; }
.home .moinho-cases--editorial .moinho-card__eyebrow { grid-column: 1 / -1; margin: 0; }
.home .moinho-cases--editorial .moinho-card__titulo { grid-column: 1; grid-row: 2; min-block-size: 0; font-size: var(--moinho-role-h3-size); text-wrap: pretty; transform: none; transition: none; }
/* Sem ficha (15/09/2026): o resumo sobe para a terceira linha. Se a ficha
   voltar por `ficha => true`, ela ocupa a linha 3 e o resumo a 4. */
.home .moinho-cases--editorial .moinho-card__texto { grid-column: 1 / -1; grid-row: 3; display: block; min-block-size: 0; max-inline-size: 56ch; overflow: visible; text-align: start; }
.home .moinho-cases--editorial .moinho-card__meta ~ .moinho-card__texto { grid-row: 4; }
.home .moinho-cases--editorial .moinho-card__meta { grid-column: 1 / -1; grid-row: 3; margin: 0; gap: var(--moinho-space-sm) var(--moinho-space-lg); }
.home .moinho-cases--editorial .moinho-card__meta-item { display: grid; gap: var(--moinho-space-3xs); min-inline-size: 0; }
.home .moinho-cases--editorial .moinho-card__meta dt::after { content: none; }
.home .moinho-cases--editorial .moinho-card__meta dd { color: var(--moinho-surface-fg); overflow-wrap: anywhere; }
.home .moinho-cases--editorial .moinho-card__cta { grid-column: 2; grid-row: 2; align-self: center; margin: 0; padding: 0; text-transform: none; letter-spacing: normal; color: var(--moinho-surface-fg); }
.home .moinho-cases--editorial .moinho-card__cta .moinho-icon { transform: none; transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1); }
.home .moinho-cases--editorial .moinho-card__link { transition: none; }
.home .moinho-cases--editorial .moinho-card__link::after { z-index: 1; }
/* Foco nunca fica escondido atras do trilho. */
.home .moinho-cases--editorial .moinho-card:focus-within { scroll-margin-block: 8rem; }

@media (hover: hover) and (pointer: fine) {
	.home .moinho-cases--editorial .moinho-card:hover .moinho-card__media img { scale: 1.02; }
	.home .moinho-cases--editorial .moinho-card:hover .moinho-card__cta .moinho-icon { transform: translate(3px, -3px); }
}

/* ---- Duas colunas: o trilho gruda ------------------------------------- */
@media (min-width: 64rem) {
	.home .moinho-cases--editorial .moinho-cases__painel {
		grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
		gap: clamp(2.5rem, 5vw, 5rem);
	}
	.home .moinho-cases--editorial .moinho-cases__trilho-fixo {
		position: sticky;
		inset-block-start: calc(var(--moinho-header-height) + var(--moinho-space-lg));
	}
	/* Ritmo assimetrico sem grade de 12 faixas: uma margem alternada basta. */
	.home .moinho-cases--editorial .moinho-cases__celula:nth-child(odd) { margin-inline-end: clamp(1.5rem, 6%, 4rem); }
	.home .moinho-cases--editorial .moinho-cases__celula:nth-child(even) { margin-inline-start: clamp(1.5rem, 6%, 4rem); }
}
@media (min-width: 80rem) {
	.home .moinho-cases--editorial .moinho-cases__celula:nth-child(odd) { margin-inline-end: clamp(3rem, 10%, 7rem); }
	.home .moinho-cases--editorial .moinho-cases__celula:nth-child(even) { margin-inline-start: clamp(3rem, 10%, 7rem); }
}

@media (max-width: 63.9375rem) {
	.home .moinho-cases--editorial .moinho-cases__trilho-fixo { gap: var(--moinho-space-sm); }
	.home .moinho-cases--editorial .moinho-section__lead { max-inline-size: 60ch; }
	.home .moinho-cases--editorial .moinho-card__cta { grid-column: 1 / -1; grid-row: 5; }
}
@media (max-width: 47.9375rem) {
	.home .moinho-cases--editorial .moinho-cases__trilha { gap: clamp(3rem, 12vw, 4.5rem); }
	.home .moinho-cases--editorial .moinho-cases__celula:nth-child(n) .moinho-card__media { aspect-ratio: 4 / 5; }
	.home .moinho-cases--editorial .moinho-card__media img { scale: 1; }
	.home .moinho-cases--editorial .moinho-cases__indice { inset-block-start: -1.05em; }
}

/* =========================================================================
   TRABALHOS POR FRENTE
   =========================================================================
   Uma pista horizontal por area de atuacao, empilhadas na coluna da direita
   enquanto o trilho gruda a esquerda. Herda a variante editorial: trilho,
   contador, barra e a tipografia do card ja estao resolvidos la em cima.
   Aqui mora so o que muda quando a pilha vertical vira carrossel.

   O carrossel em si e o componente trilha. Este bloco NAO redesenha pista,
   botao nem ponto de posicao: so compoe e posiciona.
   ========================================================================= */

.home .moinho-cases--frentes {
	/*
	 * Sangria: distancia do fim do container ate a borda da tela. E o que
	 * permite o ultimo cartao visivel ser cortado pela janela em vez de
	 * parar antes dela. Fora do container, max() cai no padding lateral,
	 * entao em telas estreitas a pista sangra a mesma medida da margem.
	 */
	--moinho-cases-sangria: max(var(--moinho-container-padding), (100vw - var(--moinho-container-width)) / 2);
	--moinho-cases-slide: min(24rem, 78vw);
}

.home .moinho-cases--frentes .moinho-cases__frentes {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	/*
	 * Uma faixa ja se separa da seguinte pelo titulo e pelo indice. Com
	 * 7vw o respiro chegava a 104px em tela grande e a pilha parecia cinco
	 * secoes soltas em vez de uma leitura continua.
	 */
	gap: clamp(2.5rem, 4.5vw, 4.5rem);
	min-inline-size: 0;
}

.home .moinho-cases--frentes .moinho-cases__frente {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--moinho-space-sm);
	min-inline-size: 0;
	transition: opacity var(--moinho-duration-slow) var(--moinho-ease-out);
}

/* ---- Cabecalho da frente ----------------------------------------------- */

.home .moinho-cases--frentes .moinho-cases__frente-cabecalho {
	display: grid;
	gap: var(--moinho-space-3xs);
	max-inline-size: 52ch;
}

.home .moinho-cases--frentes .moinho-cases__frente-nome {
	display: flex;
	align-items: baseline;
	gap: var(--moinho-space-2xs);
	margin: 0;
	font-size: var(--moinho-role-h3-size);
	line-height: var(--moinho-role-h3-leading);
	letter-spacing: var(--moinho-role-h3-tracking);
	color: var(--moinho-surface-fg);
}

/*
 * O indice repete no titulo da faixa o numero que o contador do trilho
 * mostra. Nao e decoracao: e o que liga 02 / 05 a esta pista quando a pessoa
 * rola rapido e o trilho e a faixa ficam a meia tela um do outro.
 */
.home .moinho-cases--frentes .moinho-cases__frente-indice {
	flex: none;
	font-size: var(--moinho-role-small-size);
	letter-spacing: var(--moinho-role-small-tracking);
	font-variant-numeric: tabular-nums;
	color: var(--moinho-color-primary-readable);
}

.home .moinho-cases--frentes .moinho-cases__frente-lead {
	margin: 0;
	max-inline-size: 52ch;
	color: var(--moinho-surface-fg-muted);
	text-wrap: pretty;
}

/* ---- A pista ------------------------------------------------------------ */

.home .moinho-cases--frentes .moinho-trilha__lista {
	grid-auto-columns: var(--moinho-cases-slide);
	gap: var(--moinho-space-sm);
	/*
	 * Sangria com padding do mesmo tamanho: sem o padding, o snap do ultimo
	 * cartao para com ele colado na borda da tela, sem respiro nenhum.
	 */
	margin-inline-end: calc(var(--moinho-cases-sangria) * -1);
	padding-inline-end: var(--moinho-cases-sangria);
	/*
	 * Barra escondida: a pista ja anuncia que continua de tres jeitos - o
	 * cartao seguinte cortado pela janela, os botoes e a deriva com o
	 * scroll. Uma quarta pista visual seria ruido, e o teclado continua
	 * entrando pela lista, que tem tabindex proprio.
	 */
	scrollbar-width: none;
}

.home .moinho-cases--frentes .moinho-trilha__lista::-webkit-scrollbar { display: none; }

/*
 * Reset do empilhamento vertical. As regras da variante editorial alternam
 * margem e proporcao a cada celula para dar ritmo a uma COLUNA; numa pista,
 * essa alternancia vira cartao torto no meio de cartoes retos.
 */
.home .moinho-cases--frentes .moinho-cases__celula {
	margin: 0;
	opacity: 1;
	scroll-snap-align: start;
}

.home .moinho-cases--frentes .moinho-cases__celula:nth-child(n) .moinho-card__media,
.home .moinho-cases--frentes .moinho-cases__celula:nth-child(even) .moinho-card__media {
	aspect-ratio: 16 / 10;
}

.home .moinho-cases--frentes .moinho-card { block-size: 100%; }

/*
 * O card inteiro e o alvo. O <a> do titulo ja se estende por cima de tudo
 * via ::after, mas so o pseudo-elemento carregava o ponteiro: quem parava o
 * mouse na ficha ou no resumo via seta de texto e concluia que ali nao
 * clicava. O cursor passa a ser do card, nao da camada invisivel.
 */
.home .moinho-cases--frentes .moinho-card:has(.moinho-card__link) { cursor: pointer; }

/*
 * "Ver o case" e rotulo do link estendido, nao um segundo link - dois <a>
 * para o mesmo destino fariam o leitor de tela anunciar o case duas vezes.
 * Como ele PARECE um link, precisa reagir como um: acende junto com o
 * titulo quando o ponteiro entra em qualquer canto do card.
 */
@media (hover: hover) {
	.home .moinho-cases--frentes .moinho-card:hover .moinho-card__cta,
	.home .moinho-cases--frentes .moinho-card:hover .moinho-card__titulo {
		color: var(--moinho-color-primary-readable);
	}
}

.home .moinho-cases--frentes .moinho-card:has(.moinho-card__link:focus-visible) .moinho-card__cta {
	color: var(--moinho-color-primary-readable);
}

/*
 * Cartao mais compacto que na pilha vertical. La cada trabalho tinha a
 * coluna inteira e uma tela so para ele; aqui sao tres lado a lado, e o
 * mesmo respiro que dava calma numa leitura unica vira buraco entre a foto,
 * o titulo e a ficha. Sao quatro medidas, todas um degrau abaixo.
 */
.home .moinho-cases--frentes .moinho-card__corpo {
	gap: var(--moinho-space-2xs);
	padding-block-start: var(--moinho-space-sm);
}

.home .moinho-cases--frentes .moinho-card__meta {
	gap: var(--moinho-space-2xs) var(--moinho-space-md);
}

.home .moinho-cases--frentes .moinho-card__meta-item {
	gap: 0;
}

/*
 * A ficha e a linha mais longa do cartao quando o case tem cinco solucoes.
 * Sem teto ela empurra o resumo para fora da altura dos vizinhos e a fileira
 * perde a linha de base.
 */
.home .moinho-cases--frentes .moinho-card__meta dd {
	max-inline-size: 34ch;
}


/* ---- Fileira alinhada ---------------------------------------------------
   Numa pilha vertical cada cartao tinha a coluna inteira e ninguem comparava
   um com o outro. Numa pista sao tres lado a lado: qualquer campo que mude de
   altura ou de posicao entre eles aparece como fileira torta. As quatro
   regras abaixo existem so por causa disso.
   ------------------------------------------------------------------------ */

/*
 * Caixa fixa em cada campo do cartao. Medido no ar em 1440: o eyebrow variava
 * 22px/16px conforme o texto, a ficha ia de 25px para 50px quando o nome do
 * cliente quebrava (COMPOSE ARQUITETURA) e o resumo fechava em 81px ou 75px
 * conforme o corte do excerpt. Somados, punham a ficha do terceiro cartao 12px
 * acima da dos vizinhos e o resumo 7px abaixo.
 *
 * Reservar linha e melhor que deixar cada cartao encontrar a propria altura:
 * numa pilha vertical ninguem compara, numa fileira a diferenca vira degrau.
 * A unidade `lh` mede a linha real do elemento, entao a reserva acompanha a
 * escala tipografica sem repetir nenhum numero dela aqui.
 */
.home .moinho-cases--frentes .moinho-card__eyebrow {
	display: flex;
	align-items: center;
	block-size: 1.5rem;
	overflow: hidden;
}

.home .moinho-cases--frentes .moinho-card__titulo {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	block-size: 2lh;
	min-block-size: 0;
	overflow: hidden;
}

.home .moinho-cases--frentes .moinho-card__meta dd {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	block-size: 2lh;
	overflow: hidden;
}

/*
 * O CTA acompanha a PRIMEIRA linha do titulo, nao o centro da caixa. Com
 * `center`, um titulo de uma linha deixava o rotulo flutuando abaixo da
 * palavra e um de duas o jogava para o vao entre elas.
 */
.home .moinho-cases--frentes .moinho-card__cta {
	align-self: start;
}

/*
 * Ficha em tres colunas iguais. Em flex, cada coluna comecava onde o texto
 * do cartao anterior deixava: Cliente, Solucao e Ano caiam em x diferente em
 * cada cartao da mesma fileira.
 */
.home .moinho-cases--frentes .moinho-card__meta {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: start;
}

/*
 * Resumo com tres linhas fixas. O excerpt do PHP corta por palavra, entao um
 * cartao fechava em duas linhas e o vizinho em tres, e a base da fileira
 * ficava serrilhada.
 */
.home .moinho-cases--frentes .moinho-card__texto {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	block-size: 3lh;
	overflow: hidden;
}

/* ---- Corte da pista -----------------------------------------------------
   A sangria corta o ultimo cartao visivel na borda da tela. Cortado a seco,
   o que aparece e meio paragrafo serrado no meio de uma palavra. A mascara
   troca a serra por um esmaecimento: continua dizendo que ha mais adiante,
   sem apresentar um cartao quebrado.
   ------------------------------------------------------------------------ */

@media (min-width: 64rem) {
	.home .moinho-cases--frentes .moinho-trilha__lista {
		-webkit-mask-image: linear-gradient(to right, rgb(0 0 0) calc(100% - var(--moinho-cases-sangria) - var(--moinho-space-xl)), transparent calc(100% - var(--moinho-cases-sangria)));
		mask-image: linear-gradient(to right, rgb(0 0 0) calc(100% - var(--moinho-cases-sangria) - var(--moinho-space-xl)), transparent calc(100% - var(--moinho-cases-sangria)));
	}

	/*
	 * Os controles acompanham o fim VISUAL da pista, nao a borda do
	 * container. Em tela de 2000px a sangria passa de 370px: ancorados no
	 * container, o par de botoes aparecia no meio da faixa de cartoes, sem
	 * nada por perto para justificar aquela posicao.
	 */
	.home .moinho-cases--frentes .moinho-trilha__controles {
		inset-inline-end: calc((var(--moinho-cases-sangria) - var(--moinho-container-padding)) * -1);
	}
}

/* ---- Saida para o arquivo da frente ------------------------------------- */

.home .moinho-cases--frentes .moinho-cases__mais {
	display: grid;
	align-content: center;
	justify-items: start;
	gap: var(--moinho-space-2xs);
	block-size: 100%;
	padding: var(--moinho-space-md);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-panel);
	background: var(--moinho-color-glass);
	color: var(--moinho-surface-fg);
	text-decoration: none;
	transition:
		border-color var(--moinho-duration-normal) var(--moinho-ease-out),
		background-color var(--moinho-duration-normal) var(--moinho-ease-out);
}

.home .moinho-cases--frentes .moinho-cases__mais-numero {
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h1-size);
	line-height: 1;
	letter-spacing: var(--moinho-role-h1-tracking);
	font-variant-numeric: tabular-nums;
	color: var(--moinho-color-primary-readable);
}

.home .moinho-cases--frentes .moinho-cases__mais-rotulo {
	max-inline-size: 18ch;
	color: var(--moinho-surface-fg-muted);
}

.home .moinho-cases--frentes .moinho-cases__mais-cta {
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-2xs);
	margin-block-start: var(--moinho-space-2xs);
	color: var(--moinho-surface-fg);
}

.home .moinho-cases--frentes .moinho-cases__mais-cta .moinho-icon {
	transition: transform var(--moinho-duration-normal) var(--moinho-ease-out);
}

.home .moinho-cases--frentes .moinho-cases__mais:focus-visible {
	outline: var(--moinho-border-width-strong) solid var(--moinho-color-focus);
	outline-offset: var(--moinho-focus-ring-offset);
}

@media (hover: hover) {
	.home .moinho-cases--frentes .moinho-cases__mais:hover {
		border-color: var(--moinho-color-border-strong);
		background: var(--moinho-color-glass-strong);
	}
	.home .moinho-cases--frentes .moinho-cases__mais:hover .moinho-cases__mais-cta .moinho-icon {
		transform: translateX(3px);
	}
}

/* ---- Nome da frente no trilho ------------------------------------------- */

.home .moinho-cases--frentes .moinho-cases__contador-nome {
	margin: 0;
	font-family: var(--moinho-role-heading-family);
	color: var(--moinho-surface-fg);
}

/* ---- Banda ativa -------------------------------------------------------- */

/*
 * A classe is-conduzido entra so quando o GSAP assume, como na variante
 * empilhada: sem JavaScript, com movimento reduzido ou em coluna unica, as
 * faixas sao lidas em contraste cheio.
 */
.home .moinho-cases--frentes .moinho-cases__frentes.is-conduzido .moinho-cases__frente { opacity: .48; }
.home .moinho-cases--frentes .moinho-cases__frentes.is-conduzido .moinho-cases__frente.is-ativo { opacity: 1; }
/* Teclado nao espera transicao: quem tabula quer o alvo cheio agora. */
.home .moinho-cases--frentes .moinho-cases__frentes.is-conduzido .moinho-cases__frente:focus-within {
	opacity: 1;
	transition: none;
}

/* ---- Duas colunas ------------------------------------------------------- */

@media (min-width: 64rem) {
	/*
	 * 5fr/7fr deixava o trilho com 495px e a pista com 693px em 1440: cabiam
	 * 1,8 cartoes de 24rem. Carrossel que mostra menos de dois nao le como
	 * carrossel, le como cartao com um pedaco do vizinho encostado. O trilho
	 * passa a ter largura propria e a pista fica com todo o resto.
	 */
	.home .moinho-cases--frentes .moinho-cases__painel {
		grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
	}

	/*
	 * Os controles sobem para a linha do titulo da faixa. A trilha perde o
	 * position relative proprio para que o absoluto se resolva contra a
	 * faixa inteira e o par de botoes alinhe com a borda do container, nao
	 * com a da pista sangrada.
	 */
	.home .moinho-cases--frentes .moinho-trilha { position: static; }
	.home .moinho-cases--frentes .moinho-trilha__controles {
		position: absolute;
		inset-block-start: 0;
		inset-inline-end: 0;
		margin: 0;
	}
}

@media (min-width: 80rem) {
	.home .moinho-cases--frentes .moinho-cases__painel {
		grid-template-columns: minmax(0, 20rem) minmax(0, 1fr);
	}
}

@media (min-width: 100rem) {
	.home .moinho-cases--frentes .moinho-cases__painel {
		grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
	}
}

@media (max-width: 47.9375rem) {
	/*
	 * A regra da variante editorial vira o cartao em retrato 4/5 no celular,
	 * que e certo numa coluna e errado numa pista: com slide de 78vw, 4/5
	 * come quase uma tela inteira por cartao.
	 */
	.home .moinho-cases--frentes .moinho-cases__celula:nth-child(n) .moinho-card__media {
		aspect-ratio: 16 / 10;
	}
}

/*
 * Vao igual entre todos os cartoes.
 *
 * A variante empilhada da ritmo a COLUNA alternando margem: celula impar
 * recua a direita, par recua a esquerda. Na pista aquilo vira cartao de 336px
 * dentro de trilho de 384px, encostado ora numa borda ora na outra - medido
 * no ar, os vaos saiam 119px, 23px, 119px, 23px.
 *
 * O reset precisa dos mesmos quatro niveis de especificidade das regras que
 * anula (`:nth-child` conta como classe) e precisa vir depois delas. Um
 * `margin: 0` solto perdia por um nivel e nao encostava no problema.
 */
.home .moinho-cases--frentes .moinho-cases__celula:nth-child(odd),
.home .moinho-cases--frentes .moinho-cases__celula:nth-child(even) {
	margin-inline: 0;
}

@media all {
}

@media (hover: hover) and (pointer: fine) {
}