/* =========================================================================
   PAGES — CASES
   =========================================================================
   Arquivo e single. Mesma gramatica das outras paginas: box, capsula de
   icone, vidro discreto e texto corrido justificado sem hifenizacao.

   Titulos com DUAS classes por causa do kit global do Elementor, que injeta
   `.elementor-kit-NN h1` e vence seletor de classe unica.
   ========================================================================= */

.moinho-cases,
.moinho-case {
	position: relative;
}

.moinho-cases {
	overflow: clip;
}

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

.moinho-cases :is(p, li, dd),
.moinho-case :is(p, li, dd) {
	hyphens: none;
	-webkit-hyphens: none;
}

@media (min-width: 48rem) {
	:is(.moinho-cases, .moinho-case) :is(
		.moinho-cases-abertura__texto,
		.moinho-case-bloco__texto,
		.moinho-case-detalhe__texto,
		.moinho-cases-convite__texto,
		.moinho-case__resumo,
		.moinho-case-capitulo__texto:not(.moinho-case-capitulo__texto--statement),
		.moinho-case-por-dentro dd
	) {
		text-align: var(--moinho-copy-align);
		text-wrap: pretty;
	}
}

/* -------------------------------------------------------------------------
   Abertura do arquivo
   ---------------------------------------------------------------------- */

.moinho-cases-abertura {
	margin-block-end: var(--moinho-space-xl);
}

.moinho-cases-abertura__corpo {
	display: grid;
	gap: var(--moinho-space-sm);
	align-items: start;
}

.moinho-cases-abertura__descricao {
	display: grid;
	gap: var(--moinho-space-sm);
}

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

	.moinho-cases-abertura__corpo > .moinho-eyebrow {
		grid-column: 1 / -1;
	}
}

.moinho-cases .moinho-cases-abertura__texto {
	text-align: start;
	text-wrap: pretty;
}

.moinho-cases-abertura .moinho-cases-abertura__titulo {
	max-inline-size: 20ch;
	margin: 0;
	font-size: var(--moinho-role-h1-size);
	font-weight: var(--moinho-weight-bold);
}

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

.moinho-cases-abertura__contagem {
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-2xs);
	margin: 0;
	font-size: var(--moinho-role-small-size);
	color: var(--moinho-color-primary-readable);
	--moinho-icon-size: 1.125rem;
}

/* -------------------------------------------------------------------------
   Filtros

   Uma linha, rolavel de lado sem barra, colada no topo (sticky) enquanto a
   parede rola por baixo: troca-se o recorte sem voltar para cima. Vidro
   sobre a foto para continuar legivel em qualquer tile.
   ---------------------------------------------------------------------- */

/* A faixa (nivel da secao) e quem gruda; o container dentro so da a largura. */
.moinho-cases-filtros-faixa {
	position: sticky;
	top: var(--moinho-space-sm);
	z-index: var(--moinho-z-sticky);
	margin-block-end: var(--moinho-space-md);
}

/*
 * Dock de filtros: mesma linguagem da Dock de navegacao (tokens
 * --moinho-dock-*): vidro, itens de 2.75rem, icone em traco, rotulo que
 * abre no hover, no foco e no item ativo.
 */
.moinho-cases-filtro {
	display: flex;
	align-items: center;
	gap: var(--moinho-space-2xs);
	inline-size: fit-content;
	max-inline-size: 100%;
	margin-inline: auto;
	padding: var(--moinho-space-3xs);
	border: var(--moinho-border-width) solid var(--moinho-dock-border);
	border-radius: var(--moinho-radius-pill);
	background: var(--moinho-dock-glass);
	box-shadow: var(--moinho-dock-shadow), inset 0 1px 0 var(--moinho-dock-rim);
	color: var(--moinho-dock-ink);
	-webkit-backdrop-filter: blur(var(--moinho-glass-blur));
	backdrop-filter: blur(var(--moinho-glass-blur));
}

.moinho-cases-filtro__lista {
	display: flex;
	flex: 1;
	min-inline-size: 0;
	gap: var(--moinho-space-3xs);
	margin: 0;
	padding: 0;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scrollbar-width: none;
	list-style: none;
}

.moinho-cases-filtro__lista::-webkit-scrollbar {
	display: none;
}

.moinho-cases-filtro__lista li {
	flex: none;
	scroll-snap-align: start;
}

.moinho a.moinho-cases-filtro__item {
	display: inline-flex;
	align-items: center;
	min-inline-size: var(--moinho-dock-target);
	min-block-size: var(--moinho-dock-target);
	padding-inline: var(--moinho-space-xs);
	border-radius: var(--moinho-radius-pill);
	font-family: var(--moinho-role-ui-family);
	font-size: var(--moinho-role-menu-size);
	font-weight: var(--moinho-role-menu-weight);
	line-height: var(--moinho-leading-normal);
	white-space: nowrap;
	text-decoration: none;
	color: var(--moinho-dock-ink);
	transition: background-color var(--moinho-duration-normal) var(--moinho-ease-out),
	            color var(--moinho-duration-normal) var(--moinho-ease-out);
}

.moinho-cases-filtro__icone {
	display: grid;
	place-items: center;
	flex: none;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	--moinho-icon-size: 1.25rem;
}

/* Rotulo fechado: abre por largura, como o da Dock. */
.moinho-cases-filtro__rotulo {
	display: inline-flex;
	align-items: baseline;
	gap: var(--moinho-space-3xs);
	max-inline-size: 0;
	padding-inline-start: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-inline-size var(--moinho-duration-normal) var(--moinho-ease-default),
	            opacity var(--moinho-duration-fast),
	            padding var(--moinho-duration-normal) var(--moinho-ease-default);
}

.moinho-cases-filtro__rotulo span {
	font-family: var(--moinho-font-mono);
	font-size: var(--moinho-role-label-size);
	opacity: 0.72;
}

.moinho a.moinho-cases-filtro__item:focus-visible .moinho-cases-filtro__rotulo,
.moinho a.moinho-cases-filtro__item.is-ativo .moinho-cases-filtro__rotulo {
	max-inline-size: 16rem;
	padding-inline-start: var(--moinho-space-2xs);
	opacity: 1;
}

@media (hover: hover) and (pointer: fine) {
	.moinho a.moinho-cases-filtro__item:hover {
		background: var(--moinho-dock-selected);
		color: var(--moinho-dock-accent);
		text-decoration: none;
	}

	.moinho a.moinho-cases-filtro__item:hover .moinho-cases-filtro__rotulo {
		max-inline-size: 16rem;
		padding-inline-start: var(--moinho-space-2xs);
		opacity: 1;
	}
}

.moinho a.moinho-cases-filtro__item:focus-visible {
	outline: var(--moinho-border-width-strong) solid var(--moinho-dock-accent);
	outline-offset: var(--moinho-space-3xs);
}

.moinho a.moinho-cases-filtro__item.is-ativo {
	background: var(--moinho-liquid-primary);
	color: var(--moinho-color-text-on-brand);
	box-shadow: var(--moinho-liquid-shadow);
}

/* Sem hover (toque, celular): nome sempre visivel, dock rola de lado. */
@media (max-width: 63.9375rem) {
	.moinho-cases-filtro__rotulo {
		max-inline-size: none;
		padding-inline-start: var(--moinho-space-2xs);
		opacity: 1;
	}
}

/*
 * Efeito da parede: interruptor no mesmo dock, igual ao de tema da Dock de
 * navegacao (rotulo + trilho + botao branco). Seletores com o elemento
 * (`button.`) em todos os estados: o kit do Elementor estiliza `button`
 * e `button:hover` com cor solida e canto reto, e vence classe sozinha
 * (D57, D61).
 */
.moinho button.moinho-cases-efeito,
.moinho button.moinho-cases-efeito:hover,
.moinho button.moinho-cases-efeito:focus,
.moinho button.moinho-cases-efeito:active {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-2xs);
	min-block-size: var(--moinho-dock-target);
	margin: 0 0 0 var(--moinho-space-3xs);
	padding: 0 var(--moinho-space-2xs) 0 var(--moinho-space-sm);
	border: 0;
	border-inline-start: var(--moinho-border-width) solid var(--moinho-dock-divider);
	border-radius: 0 var(--moinho-radius-pill) var(--moinho-radius-pill) 0;
	background: transparent;
	color: var(--moinho-dock-ink);
	font-family: var(--moinho-role-ui-family);
	font-size: var(--moinho-role-menu-size);
	font-weight: var(--moinho-role-menu-weight);
	line-height: var(--moinho-leading-normal);
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	box-shadow: none;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color var(--moinho-duration-normal) var(--moinho-ease-out),
	            color var(--moinho-duration-normal) var(--moinho-ease-out);
}

@media (hover: hover) and (pointer: fine) {
	.moinho button.moinho-cases-efeito:hover {
		background: var(--moinho-dock-selected);
	}
}

.moinho button.moinho-cases-efeito:focus-visible {
	outline: var(--moinho-border-width-strong) solid var(--moinho-dock-accent);
	outline-offset: calc(-1 * var(--moinho-space-3xs));
}

.moinho button.moinho-cases-efeito[aria-pressed="true"] {
	color: var(--moinho-dock-accent);
}

.moinho-cases-efeito__switch {
	position: relative;
	display: block;
	flex: none;
	inline-size: 2.75rem;
	block-size: 1.625rem;
	padding: 0.125rem;
	box-sizing: border-box;
	border-radius: var(--moinho-radius-pill);
	background: var(--moinho-dock-switch-off);
	box-shadow: inset 0 1px 3px var(--moinho-dock-soft-shadow);
	transition: background-color var(--moinho-duration-normal) var(--moinho-ease-out);
}

.moinho button.moinho-cases-efeito[aria-pressed="true"] .moinho-cases-efeito__switch {
	background: var(--moinho-dock-switch-on);
}

.moinho-cases-efeito__knob {
	display: block;
	inline-size: 1.375rem;
	block-size: 1.375rem;
	border-radius: var(--moinho-radius-circle);
	background: var(--moinho-branco);
	box-shadow: var(--moinho-shadow-sm);
	transition: translate var(--moinho-duration-normal) var(--moinho-ease-spring);
}

.moinho button.moinho-cases-efeito[aria-pressed="true"] .moinho-cases-efeito__knob {
	translate: 1.125rem 0;
}

@media (prefers-reduced-motion: reduce) {
	.moinho-cases-efeito__knob,
	.moinho-cases-efeito__switch {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Parede de cases

   Largura total (fora do container), sem espaco entre tiles. Este CSS e o fallback
   estatico (o acervo inteiro em colunas) e o look do tile. No desktop com
   movimento, a ilha React (assets/parede) monta por cima reutilizando as
   classes: a janela vira uma tela de altura com overflow escondido e cada
   coluna um trilho infinito. Abaixo de 64rem as colunas viram
   `display: contents` e os tiles fluem na ordem do acervo, em uma ou duas
   colunas, com a legenda sempre visivel.
   ---------------------------------------------------------------------- */

.moinho-cases-parede {
	margin-block-start: var(--moinho-space-md);
	background: var(--moinho-color-surface);
}

.moinho-cases-parede__colunas {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

.moinho-cases-parede__coluna {
	display: contents;
}

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

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

	.moinho-cases-parede__janela .moinho-cases-parede__coluna {
		display: block;
		min-inline-size: 0;
	}

	/*
	 * Versao animada (React + ScrollTrigger): a janela tem uma tela de altura
	 * e esconde os trilhos alem da borda; o pin do ScrollTrigger a prende e
	 * cria o espaco do curso sozinho. Tiles e trilhos ganham will-change
	 * porque o scroll escreve transform neles a cada quadro.
	 */
	.moinho-cases-parede__janela {
		position: relative;
		block-size: 100dvh;
		overflow: hidden;
		transform-origin: center;
	}

	.moinho-cases-parede__superficie,
	.moinho-cases-parede__entrada {
		block-size: 100%;
		overflow: hidden;
		transform-origin: center;
	}

	.moinho-cases-parede__janela .moinho-cases-parede__colunas {
		transform-origin: center top;
	}

	/*
	 * Bordas de cima e de baixo somem na sombra: profundidade e leitura da
	 * lente. Sao dois degrades por cima da grade, nao mask-image: mascara
	 * numa camada com centenas de fotos e transform e recomposta inteira
	 * quando o pin liga, e piscava.
	 */
	.moinho-cases-parede__janela::before,
	.moinho-cases-parede__janela::after {
		content: "";
		position: absolute;
		inset-inline: 0;
		z-index: var(--moinho-z-raised);
		block-size: 9%;
		pointer-events: none;
	}

	.moinho-cases-parede__janela::before {
		inset-block-start: 0;
		background: linear-gradient(to bottom, var(--moinho-surface-bg), transparent);
	}

	.moinho-cases-parede__janela::after {
		inset-block-end: 0;
		background: linear-gradient(to top, var(--moinho-surface-bg), transparent);
	}

	/* Quanto da parede ja rolou: linha na base da janela, scaleX pelo GSAP. */
	.moinho-cases-parede__progresso {
		position: absolute;
		inset-block-end: 0;
		inset-inline: 0;
		z-index: calc(var(--moinho-z-raised) + 1);
		block-size: var(--moinho-border-width-strong);
		background: var(--moinho-liquid-primary);
		transform: scaleX(0);
		transform-origin: left center;
	}

	.moinho-cases-parede__trilho {
		will-change: transform;
	}

	/* Sem will-change nos tiles: centenas de camadas promovidas estouram a
	   memoria do compositor e a janela pisca ao virar fixed. */
	.moinho-cases-parede__janela .moinho-cases-tile {
		transform-origin: center;
	}
}

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

/* Tile ------------------------------------------------------------------ */

.moinho-cases-tile {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--moinho-color-surface);
	color: inherit;
	text-decoration: none;
	outline-offset: calc(-1 * var(--moinho-space-3xs));
	padding: var(--moinho-space-3xs);
}

.moinho-cases-tile__media {
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}

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

/* Legenda fora da foto, com cliente sempre visivel em ambos os temas. */
.moinho-cases-tile__info {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto;
	align-content: start;
	gap: var(--moinho-space-2xs);
	padding: var(--moinho-space-sm);
	background: var(--moinho-color-surface);
}

.moinho-cases-tile__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--moinho-space-3xs);
	grid-column: 1 / -1;
	min-block-size: 1lh;
	max-block-size: 1lh;
	overflow: hidden;
	font-size: var(--moinho-role-label-size);
}

.moinho-cases-tile__tags .moinho-badge {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	color: var(--moinho-color-text-muted);
}

.moinho-cases-tile__tags .moinho-badge + .moinho-badge {
	margin-inline-start: var(--moinho-space-2xs);
}

.moinho-cases-tile__titulo {
	display: -webkit-box;
	min-block-size: 2lh;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-weight-semibold);
	line-height: var(--moinho-leading-heading);
	color: var(--moinho-color-text);
}

.moinho-cases-tile__texto {
	display: none;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-leading-relaxed);
	color: var(--moinho-surface-fg-muted);
}

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

/* Cliente sempre legivel; o movimento de hover fica apenas na imagem. */
@media (min-width: 64rem) {
	.moinho-cases-tile:is(:hover, :focus-visible) .moinho-cases-tile__media img {
		transform: scale(1.025);
	}

	.moinho-cases-tile:is(:hover, :focus-visible) .moinho-cases-tile__cta {
		gap: var(--moinho-space-xs);
	}
}

/* Entrada de tile recomposto pelo filtro (React remonta; o CSS anima). */
/* A cena animada preserva a parede continua e a legenda sobre a foto. */
.moinho-cases-parede__janela .moinho-cases-tile {
	padding: 0;
}

.moinho-cases-parede__janela .moinho-cases-tile__info {
	position: absolute;
	inset: 0;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: none;
	align-content: end;
	background: var(--moinho-scrim-tile);
	opacity: 0;
	transform: translateY(var(--moinho-space-xs));
	transition: opacity var(--moinho-duration-normal) var(--moinho-ease-out),
	            transform var(--moinho-duration-normal) var(--moinho-ease-out);
}

.moinho-cases-parede__janela .moinho-cases-tile__titulo {
	min-block-size: auto;
	color: var(--moinho-surface-fg);
}

.moinho-cases-parede__janela .moinho-cases-tile__tags .moinho-badge,
.moinho-cases-parede__janela .moinho-cases-tile__cta {
	color: var(--moinho-surface-fg);
}

.moinho-cases-parede__janela .moinho-cases-tile__texto {
	display: -webkit-box;
}

.moinho-cases-parede__janela .moinho-cases-tile:is(:hover, :focus-visible) .moinho-cases-tile__info {
	opacity: 1;
	transform: none;
}

.moinho-cases-parede__janela .moinho-cases-tile:is(:hover, :focus-visible) .moinho-cases-tile__media img {
	transform: scale(1.06);
}

@keyframes moinho-cases-tile-entra {
	from {
		opacity: 0;
		transform: translateY(var(--moinho-space-sm));
	}
}

.moinho-motion .moinho-cases-tile.is-entrando {
	animation: moinho-cases-tile-entra var(--moinho-duration-slow) var(--moinho-ease-out) both;
	animation-delay: calc(var(--moinho-reveal-i, 0) * var(--moinho-stagger));
}

/* A lente GSAP transforma o link; o reveal transforma apenas a imagem. */
.moinho-motion .moinho-cases-parede__janela .moinho-cases-tile.is-entrando {
	animation: none;
}

.moinho-motion .moinho-cases-parede__janela .is-entrando .moinho-cases-tile__media {
	animation: moinho-cases-tile-entra var(--moinho-duration-slow) var(--moinho-ease-out) both;
	animation-delay: calc(var(--moinho-reveal-i, 0) * var(--moinho-stagger));
}

@media (prefers-reduced-motion: reduce) {
	.moinho-motion .moinho-cases-tile.is-entrando,
	.moinho-motion .moinho-cases-parede__janela .is-entrando .moinho-cases-tile__media {
		animation: none;
	}
	.moinho-cases-tile__info,
	.moinho-cases-tile__media img,
	.moinho-cases-tile__cta {
		transition: none;
	}

	.moinho-cases-tile:is(:hover, :focus-visible) .moinho-cases-tile__media img {
		transform: none;
	}
}

/* -------------------------------------------------------------------------
   Card de case (bento)

   Fica para a busca (pages/busca), que renderiza moinho_cases_card().
   ---------------------------------------------------------------------- */

.moinho-case-card {
	position: relative;
	border-radius: var(--moinho-radius-xl);
	background: transparent;
}

.moinho-case-card__link {
	display: grid;
	gap: var(--moinho-space-sm);
	block-size: 100%;
	text-decoration: none;
	color: inherit;
}

.moinho-case-card__media {
	position: relative;
	display: grid;
	place-items: center;
	overflow: hidden;
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-lg);
	background: var(--moinho-color-surface);
	box-shadow: var(--moinho-shadow-sm);
	transition: border-color var(--moinho-duration-normal) var(--moinho-ease-out),
	            box-shadow var(--moinho-duration-normal) var(--moinho-ease-out);
}

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

.moinho-case-card--vertical .moinho-case-card__media {
	aspect-ratio: 4 / 5;
}

.moinho-case-card--vertical .moinho-case-card__media img:not(.moinho-image--interface) {
	object-position: center top;
}

.moinho-case-card--compacto .moinho-case-card__media,
.moinho-case-card--padrao .moinho-case-card__media {
	aspect-ratio: 4 / 3;
}

.moinho-case-card--destaque .moinho-case-card__media,
.moinho-case-card--largo .moinho-case-card__media {
	aspect-ratio: 16 / 9;
}

.moinho-case-card__vazio {
	display: grid;
	place-items: center;
	inline-size: 100%;
	aspect-ratio: 4 / 3;
	color: var(--moinho-color-border-strong);
	--moinho-icon-size: 2.5rem;
}

@media (hover: hover) {
	.moinho-case-card:hover .moinho-case-card__media img {
		transform: scale(1.045);
	}

	.moinho-case-card:hover .moinho-case-card__media {
		border-color: var(--moinho-color-border-strong);
		box-shadow: var(--moinho-shadow-md);
	}

	.moinho-case-card:hover .moinho-case-card__cta {
		gap: var(--moinho-space-xs);
		color: var(--moinho-color-primary-readable);
	}
}

.moinho-case-card__corpo {
	display: grid;
	gap: var(--moinho-space-2xs);
	align-content: start;
	padding-inline: var(--moinho-space-2xs);
}

.moinho-case-card__meta {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: var(--moinho-space-xs);
}

.moinho-case-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--moinho-space-3xs);
}

.moinho-case-card__indice {
	flex: none;
	padding-block-start: var(--moinho-space-3xs);
	font-family: var(--moinho-font-mono);
	font-size: var(--moinho-role-label-size);
	line-height: var(--moinho-leading-normal);
	color: var(--moinho-surface-fg-muted);
	opacity: 0.72;
}

/* O selo de solucao e o componente badge. */

.moinho-case-card__titulo {
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-weight-semibold);
	line-height: var(--moinho-leading-heading);
	color: var(--moinho-surface-fg);
}

.moinho-case-card:is(.moinho-case-card--destaque, .moinho-case-card--largo) .moinho-case-card__titulo {
	font-size: var(--moinho-role-h3-size);
}

.moinho-case-card__texto {
	display: -webkit-box;
	min-block-size: 2lh;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-leading-relaxed);
	color: var(--moinho-surface-fg-muted);
}

.moinho-case-card:is(.moinho-case-card--compacto, .moinho-case-card--vertical, .moinho-case-card--padrao) .moinho-case-card__titulo {
	min-block-size: 2lh;
}

.moinho-case-card__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-2xs);
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-weight-semibold);
	letter-spacing: var(--moinho-tracking-wide);
	text-transform: uppercase;
	color: var(--moinho-surface-fg-muted);
	--moinho-icon-size: 1rem;
	transition: gap var(--moinho-duration-normal) var(--moinho-ease-out),
	            color var(--moinho-duration-normal) var(--moinho-ease-out);
}

/* -------------------------------------------------------------------------
   Single: hero

   Porte do "scroll-expansion-hero". Fallback estatico: fundo apagado,
   titulo, midia e legenda em fluxo. Com `is-cena` (React + ScrollTrigger no
   desktop) a midia fica presa no centro e o GSAP escreve largura, altura e
   deslocamentos inline; aqui so posicao e voz.
   ---------------------------------------------------------------------- */

.moinho-case-hero__raiz {
	display: contents;
}

.moinho-case-hero {
	position: relative;
	overflow: hidden;
}

.moinho-case-hero__fundo {
	position: absolute;
	inset: 0;
}

.moinho-case-hero__fundo img {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	filter: blur(var(--moinho-glass-blur));
	transform: scale(1.06);
}

.moinho-case-hero__fundo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--moinho-surface-bg);
	opacity: 0.62;
}

.moinho-case-hero__palco {
	position: relative;
	z-index: var(--moinho-z-raised);
	display: grid;
	justify-items: center;
	gap: var(--moinho-space-lg);
	padding: var(--moinho-space-2xl) var(--moinho-space-md);
}

.moinho-case-hero .moinho-case-hero__titulo {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0 0.3em;
	max-inline-size: none;
	margin: 0;
	text-align: center;
	font-size: var(--moinho-role-h1-size);
	font-weight: var(--moinho-weight-bold);
	line-height: var(--moinho-leading-heading);
	color: var(--moinho-surface-fg);
}

.moinho-case-hero__media {
	position: relative;
	inline-size: min(100%, 60rem);
	margin: 0;
}

.moinho-case-hero__quadro {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: var(--moinho-radius-panel);
	box-shadow: var(--moinho-shadow-lg);
	background: var(--moinho-color-surface);
}

.moinho-case-hero__quadro img,
.moinho-case-hero__quadro video {
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.moinho-case-hero__veu {
	position: absolute;
	inset: 0;
	background: var(--moinho-color-surface-strong);
	opacity: 0.35;
	pointer-events: none;
}

.moinho-case-hero__legenda {
	display: flex;
	justify-content: center;
	gap: var(--moinho-space-md);
	margin-block-start: var(--moinho-space-sm);
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-weight-semibold);
	letter-spacing: var(--moinho-tracking-wide);
	text-transform: uppercase;
	text-align: center;
	color: var(--moinho-surface-fg-muted);
}

/* Cena (desktop, React): tudo preso no centro de uma tela; o GSAP move. */
@media (min-width: 64rem) {
	.moinho-case-hero.is-cena {
		margin-block-start: 0;
	}

	.moinho-case-hero.is-cena .moinho-case-hero__palco {
		display: block;
		block-size: 100dvh;
		padding: 0;
	}

	.moinho-case-hero.is-cena .moinho-case-hero__media {
		position: absolute;
		inset-block-start: 50%;
		inset-inline-start: 50%;
		inline-size: auto;
		max-inline-size: 95vw;
		max-block-size: 85vh;
		translate: -50% -50%;
		will-change: width, height;
	}

	.moinho-case-hero.is-cena .moinho-case-hero__quadro {
		position: absolute;
		inset: 0;
		aspect-ratio: auto;
	}

	.moinho-case-hero.is-cena .moinho-case-hero__legenda {
		position: absolute;
		inset-block-start: 100%;
		inset-inline: 0;
		white-space: nowrap;
	}

	/* "Rolar para ver o projeto" so ajuda sem JS; com a cena presa o proprio
	   scroll ja e a interacao obvia — a dica so virava ruido sob a midia. */
	.moinho-case-hero.is-cena .moinho-case-hero__dica {
		display: none;
	}

	.moinho-case-hero.is-cena .moinho-case-hero__titulo {
		position: absolute;
		inset-block-start: 50%;
		inset-inline: 0;
		z-index: var(--moinho-z-raised);
		translate: 0 -50%;
		flex-wrap: nowrap;
		font-size: var(--moinho-role-display-size);
		pointer-events: none;
	}

	.moinho-case-hero.is-cena.is-fundido .moinho-case-hero__titulo {
		mix-blend-mode: difference;
	}

	.moinho-case-hero.is-cena .moinho-case-hero__palavra,
	.moinho-case-hero.is-cena .moinho-case-hero__resto,
	.moinho-case-hero.is-cena .moinho-case-hero__data,
	.moinho-case-hero.is-cena .moinho-case-hero__dica {
		display: inline-block;
		will-change: transform;
	}
}

/* -------------------------------------------------------------------------
   Single: cabecalho e ficha
   ---------------------------------------------------------------------- */

.moinho-case__topo {
	display: grid;
	gap: var(--moinho-space-lg);
	align-items: start;
}

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

.moinho-case .moinho-case__titulo {
	max-inline-size: 18ch;
	margin: 0 0 var(--moinho-space-sm);
	font-size: var(--moinho-role-h2-size);
	font-weight: var(--moinho-weight-bold);
}

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

.moinho-case-ficha {
	display: grid;
	gap: var(--moinho-space-xs);
	margin: 0;
	padding: var(--moinho-space-md);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-lg);
	background: var(--moinho-color-glass);
	backdrop-filter: blur(var(--moinho-glass-blur));
	-webkit-backdrop-filter: blur(var(--moinho-glass-blur));
}

.moinho-case-ficha > div {
	display: grid;
	gap: var(--moinho-space-3xs);
	padding-block-end: var(--moinho-space-xs);
	border-block-end: var(--moinho-border-width) solid var(--moinho-surface-border);
}

.moinho-case-ficha > div:last-child {
	padding-block-end: 0;
	border-block-end: 0;
}

.moinho-case-ficha dt {
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-weight-semibold);
	letter-spacing: var(--moinho-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--moinho-surface-fg-muted);
}

.moinho-case-ficha dd {
	margin: 0;
	font-size: var(--moinho-role-small-size);
	color: var(--moinho-surface-fg);
}

.moinho-case__capa {
	margin-block: var(--moinho-space-lg);
	border-radius: var(--moinho-radius-xl);
}

/* -------------------------------------------------------------------------
   Rail da narrativa (com hero)

   Cliente + ficha empilhada + indice de capitulos, fixos ao lado da coluna
   de leitura. Sem foto de capitulo, o rail e o que usa o resto da largura —
   antes disso a coluna de texto ficava sozinha a esquerda com metade da
   tela vazia (D — reforma de diagramacao, 21/09/2026). Abaixo de 64rem o
   rail some do sticky e empilha DEPOIS da leitura (order), nao antes: no
   DOM ele vem primeiro por causa do sticky do desktop, mas abrir o celular
   com ficha e seis links de indice antes da primeira frase seria pior.
   ---------------------------------------------------------------------- */

.moinho-case-rail-layout {
	display: grid;
	gap: var(--moinho-space-2xl);
}

/* Abaixo de 64rem o rail (ficha + indice) empilha DEPOIS da leitura no
   visual, mesmo vindo primeiro no DOM (ordem que o desktop precisa pro
   sticky) — sem isso a pagina abria no celular com ficha e seis links de
   indice antes de qualquer frase do case. */
.moinho-case-rail {
	display: grid;
	gap: var(--moinho-space-lg);
	order: 2;
}

.moinho-case-narrativa--main { order: 1; }

@media (min-width: 64rem) {
	.moinho-case-rail-layout {
		grid-template-columns: minmax(14rem, 18rem) minmax(0, 1fr);
		align-items: start;
	}

	.moinho-case-rail {
		order: 0;
		position: sticky;
		top: max(var(--moinho-space-xl), 10vh);
	}

	.moinho-case-narrativa--main { order: 0; }
}

.moinho-case-rail__cliente {
	margin: 0;
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-weight-semibold);
	color: var(--moinho-surface-fg);
}

.moinho-case-ficha--rail {
	display: grid;
	gap: var(--moinho-space-md);
	padding: var(--moinho-space-md) 0 0;
	border: 0;
	border-block-start: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: 0;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.moinho-case-ficha--rail > div {
	gap: var(--moinho-space-3xs);
	padding: 0;
	border: 0;
}

.moinho-case-ficha--rail dd {
	font-variant-numeric: tabular-nums;
}

.moinho-case-rail__indice {
	display: grid;
	gap: var(--moinho-space-2xs);
	margin: 0;
	padding: var(--moinho-space-md) 0 0;
	list-style: none;
	border-block-start: var(--moinho-border-width) solid var(--moinho-surface-border);
}

.moinho-case-rail__indice a {
	display: flex;
	align-items: baseline;
	gap: var(--moinho-space-2xs);
	font-size: var(--moinho-role-small-size);
	color: var(--moinho-surface-fg-muted);
	text-decoration: none;
	transition: color var(--moinho-duration-normal) var(--moinho-ease-out);
}

.moinho-case-rail__indice a span:first-child {
	font-family: var(--moinho-font-mono);
	font-size: var(--moinho-role-caption-size);
	color: var(--moinho-color-primary-readable);
}

@media (hover: hover) {
	.moinho-case-rail__indice a:hover {
		color: var(--moinho-surface-fg);
	}
}

.moinho-case-narrativa--main {
	min-inline-size: 0;
}

.moinho-case__resumo--lede {
	max-inline-size: 46rem;
	margin: 0;
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-h3-size);
	font-weight: var(--moinho-weight-medium);
	line-height: var(--moinho-leading-heading);
	color: var(--moinho-surface-fg);
	text-wrap: balance;
}

/* -------------------------------------------------------------------------
   Single: narrativa em capitulos

   Desafio como statement, full width, com reveal no scroll. Depois
   capitulos full width; capitulo com foto sobrando na galeria embute a
   foto dentro da propria secao (nao mais moldura presa ao lado — nao
   cabia com o texto na largura que o statement pede, D 21/09/2026). O
   rolo de contato traz o acervo completo de qualquer forma.
   ---------------------------------------------------------------------- */

.moinho-case-narrativa {
	display: grid;
	gap: var(--moinho-space-2xl);
	margin-block-end: var(--moinho-space-2xl);
}

.moinho-case-capitulo {
	display: grid;
	gap: var(--moinho-space-xs);
	align-content: start;
}

.moinho-case-capitulo .moinho-case-capitulo__titulo {
	/* Degrau entre o statement de abertura (h2) e o corpo: h4 pulava direto
	   do display para o texto pequeno e lia como troca de fonte. */
	margin: 0;
	font-size: var(--moinho-role-h3-size);
	font-weight: var(--moinho-weight-semibold);
	text-wrap: balance;
}

.moinho-case-capitulo__texto {
	/* Mesma medida do statement de abertura (--statement, 58rem): sem isso
	   o paragrafo esticava mais largo que o "O desafio" logo acima e as
	   bordas dos dois textos não alinhavam. */
	max-inline-size: 58rem;
	margin: 0;
	font-size: var(--moinho-role-body-size);
	line-height: var(--moinho-leading-relaxed);
	color: var(--moinho-surface-fg-muted);
}

.moinho-case-capitulo__texto--statement {
	max-inline-size: 58rem;
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-h2-size);
	font-weight: var(--moinho-weight-medium);
	line-height: var(--moinho-leading-heading);
	color: var(--moinho-surface-fg);
	text-align: start;
	text-wrap: balance;
}

.moinho-case-capitulos {
	display: grid;
	gap: var(--moinho-space-2xl);
	align-items: start;
}

.moinho-case-entregas {
	display: grid;
	gap: var(--moinho-space-3xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

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

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

/* Detalhe decisivo: pull-quote, sem caixa. */
.moinho-case-detalhe__rotulo {
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-2xs);
	margin: 0;
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-weight-semibold);
	letter-spacing: var(--moinho-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--moinho-color-primary-readable);
	--moinho-icon-size: 1.125rem;
}

.moinho-case-detalhe__texto {
	max-inline-size: 58rem;
	margin: 0;
	padding-inline-start: var(--moinho-space-sm);
	border-inline-start: var(--moinho-border-width-strong) solid var(--moinho-color-primary-readable);
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-h3-size);
	font-weight: var(--moinho-weight-medium);
	line-height: var(--moinho-leading-heading);
	color: var(--moinho-surface-fg);
	text-wrap: balance;
}

/*
 * Por dentro do site: ficha de tipografia, cores e tecnologia. Mesma voz da
 * ficha do topo (rotulo em label, valor em small), sem caixa, porque vive
 * dentro de um capitulo. Cor do cliente vem inline como custom property: e
 * dado do case, nao token do tema.
 */
.moinho-case-por-dentro {
	display: grid;
	gap: 0;
	margin: 0;
	max-inline-size: 58rem;
}

.moinho-case-por-dentro__item {
	display: grid;
	gap: var(--moinho-space-3xs);
	padding-block: var(--moinho-space-2xs);
	border-block-end: var(--moinho-border-width) solid var(--moinho-surface-border);
}

.moinho-case-por-dentro dt {
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-3xs);
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-weight-semibold);
	letter-spacing: var(--moinho-tracking-eyebrow);
	text-transform: uppercase;
	color: var(--moinho-surface-fg-muted);
}

/* Icone por linha (21/09/2026): mesma capsula do "O que entra no escopo",
   so que menor — a ficha tecnica e uma lista densa, nao uma grade de cards. */
.moinho-case-por-dentro dt .moinho-icon {
	flex: none;
	--moinho-icon-size: 1rem;
	color: var(--moinho-color-primary-readable);
}

.moinho-case-por-dentro dd {
	margin: 0;
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-leading-relaxed);
	color: var(--moinho-surface-fg);
}

.moinho-case-por-dentro__cor {
	--moinho-case-por-dentro-cor: currentColor;
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-3xs);
	white-space: nowrap;
}

.moinho-case-por-dentro__amostra {
	display: inline-block;
	inline-size: 0.875em;
	block-size: 0.875em;
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-circle);
	background: var(--moinho-case-por-dentro-cor);
}

/* Resultado auditado */
.moinho-case-resultado {
	display: grid;
	gap: var(--moinho-space-3xs);
	justify-items: start;
	margin-block-end: var(--moinho-space-xl);
	padding: var(--moinho-space-lg);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-xl);
	background:
		radial-gradient(circle at 12% 0%, var(--moinho-color-secondary-soft), transparent 52%),
		var(--moinho-card-bg);
}

.moinho-case-resultado__valor {
	margin: 0;
	font-variant-numeric: tabular-nums;
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-h1-size);
	font-weight: var(--moinho-weight-bold);
	line-height: var(--moinho-leading-tight);
	color: var(--moinho-color-secondary-readable);
}

.moinho-case-resultado__rotulo {
	margin: 0;
	font-size: var(--moinho-role-body-size);
	color: var(--moinho-surface-fg);
}

.moinho-case-resultado__fonte {
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-2xs);
	margin: var(--moinho-space-2xs) 0 0;
	font-size: var(--moinho-role-label-size);
	color: var(--moinho-surface-fg-muted);
	--moinho-icon-size: 1rem;
}

.moinho-case__texto {
	margin-block-end: var(--moinho-space-xl);
}

/* -------------------------------------------------------------------------
   Rolo de contato

   Fotos grandes em faixa horizontal. No desktop o ScrollTrigger prende a
   secao e converte o scroll vertical em deslocamento do trilho
   (assets/case-hero); abaixo de 64rem e sem JS o trilho rola de lado com
   scroll-snap. Sem borda nem card: a foto e a peca.
   ---------------------------------------------------------------------- */

.moinho-case-rolo {
	margin-block: var(--moinho-space-xl);
	padding-block: var(--moinho-space-lg);
	overflow: hidden;
}

.moinho-case-rolo__cabeca {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--moinho-space-md);
	max-inline-size: var(--moinho-container-width);
	margin: 0 auto var(--moinho-space-md);
	padding-inline: var(--moinho-container-padding);
}

.moinho-case-rolo .moinho-case-rolo__titulo {
	margin: 0;
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-weight-semibold);
}

.moinho-case-rolo__contador {
	display: inline-flex;
	gap: var(--moinho-space-3xs);
	margin: 0;
	font-family: var(--moinho-font-mono);
	font-size: var(--moinho-role-label-size);
	font-variant-numeric: tabular-nums;
	letter-spacing: var(--moinho-tracking-wide);
	color: var(--moinho-surface-fg-muted);
}

.moinho-case-rolo__contador [data-moinho-case-rolo-atual] {
	color: var(--moinho-surface-fg);
}

.moinho-case-rolo__trilho {
	display: flex;
	gap: var(--moinho-space-sm);
	padding-inline: var(--moinho-container-padding);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.moinho-case-rolo__trilho::-webkit-scrollbar {
	display: none;
}

.moinho-case-rolo__quadro {
	flex: none;
	inline-size: min(88vw, 40rem);
	margin: 0;
	scroll-snap-align: start;
}

.moinho-case-rolo__quadro img,
.moinho-case-rolo__quadro video {
	display: block;
	inline-size: 100%;
	block-size: auto;
	max-block-size: 70vh;
	object-fit: contain;
	object-position: left top;
	border-radius: var(--moinho-radius-md);
	background: var(--moinho-color-surface);
}

.moinho-case-rolo__legenda {
	display: flex;
	gap: var(--moinho-space-2xs);
	margin-block-start: var(--moinho-space-2xs);
	font-size: var(--moinho-role-caption-size);
	line-height: var(--moinho-leading-normal);
	color: var(--moinho-surface-fg-muted);
}

.moinho-case-rolo__indice {
	font-family: var(--moinho-font-mono);
	font-variant-numeric: tabular-nums;
	color: var(--moinho-surface-fg);
}

@media (min-width: 64rem) {
	/*
	 * Preso pelo GSAP: a secao ocupa a tela inteira enquanto esta presa (uma
	 * faixa de meia tela deixava o resto vazio), o trilho fica centrado e as
	 * fotos sao dimensionadas pela altura, para peca deitada e peca em pe
	 * conviverem na mesma linha.
	 */
	.moinho-motion.moinho-gsap .moinho-case-rolo {
		display: grid;
		grid-template-rows: auto minmax(0, 1fr);
		align-content: start;
		min-block-size: 100dvh;
		margin-block: 0;
		padding-block: var(--moinho-space-lg) var(--moinho-space-md);
	}

	.moinho-motion.moinho-gsap .moinho-case-rolo__trilho {
		align-items: center;
		align-self: center;
		overflow: visible;
		scroll-snap-type: none;
		will-change: transform;
	}

	.moinho-motion.moinho-gsap .moinho-case-rolo__quadro {
		inline-size: auto;
		max-inline-size: 80vw;
	}

	.moinho-motion.moinho-gsap .moinho-case-rolo__quadro img,
	.moinho-motion.moinho-gsap .moinho-case-rolo__quadro video {
		inline-size: auto;
		block-size: 60vh;
		max-inline-size: 80vw;
		max-block-size: none;
	}
}

/* -------------------------------------------------------------------------
   Proximo case (teaser) e convite
   ---------------------------------------------------------------------- */

.moinho-case-nav {
	display: grid;
	gap: var(--moinho-space-md);
	margin-block-end: var(--moinho-space-xl);
	padding-block-start: var(--moinho-space-lg);
	border-block-start: var(--moinho-border-width) solid var(--moinho-surface-border);
}

.moinho-case-nav__anterior {
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-2xs);
	justify-self: start;
	font-size: var(--moinho-role-label-size);
	letter-spacing: var(--moinho-tracking-wide);
	text-transform: uppercase;
	text-decoration: none;
	color: var(--moinho-surface-fg-muted);
	--moinho-icon-size: 1rem;
}

.moinho-case-teaser {
	position: relative;
	display: grid;
	overflow: hidden;
	border-radius: var(--moinho-radius-panel-lg);
	background: var(--moinho-color-surface);
	color: inherit;
	text-decoration: none;
	box-shadow: var(--moinho-shadow-lg);
}

.moinho-case-teaser__media {
	display: block;
	aspect-ratio: 16 / 9;
	max-block-size: 70vh;
	overflow: hidden;
}

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

.moinho-case-teaser__corpo {
	position: absolute;
	inset: auto 0 0;
	display: grid;
	gap: var(--moinho-space-2xs);
	padding: var(--moinho-space-lg);
	background: var(--moinho-scrim-tile);
	color: var(--moinho-branco);
}

.moinho-case-teaser__rotulo {
	font-size: var(--moinho-role-label-size);
	letter-spacing: var(--moinho-tracking-eyebrow);
	text-transform: uppercase;
	opacity: 0.8;
}

.moinho-case-teaser__titulo {
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-h1-size);
	font-weight: var(--moinho-weight-bold);
	line-height: var(--moinho-leading-heading);
	text-wrap: balance;
}

.moinho-case-teaser__cta {
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-2xs);
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-weight-semibold);
	letter-spacing: var(--moinho-tracking-wide);
	text-transform: uppercase;
	--moinho-icon-size: 1rem;
	transition: gap var(--moinho-duration-normal) var(--moinho-ease-out);
}

@media (hover: hover) {
	.moinho-case-nav__anterior:hover {
		color: var(--moinho-color-primary-readable);
	}

	.moinho-case-teaser:hover .moinho-case-teaser__media img {
		transform: scale(1.03);
	}

	.moinho-case-teaser:hover .moinho-case-teaser__cta {
		gap: var(--moinho-space-xs);
	}
}

/* Barra de leitura: 2px no topo, scaleX pelo GSAP; sem JS nao existe. */
.moinho-case-progresso {
	position: fixed;
	inset-block-start: 0;
	inset-inline: 0;
	z-index: var(--moinho-z-sticky);
	block-size: var(--moinho-border-width-strong);
	background: var(--moinho-liquid-primary);
	transform: scaleX(0);
	transform-origin: left center;
	pointer-events: none;
}

.moinho-cases-convite {
	display: grid;
	gap: var(--moinho-space-md);
	align-items: center;
	margin-block-start: var(--moinho-space-xl);
	padding: var(--moinho-space-xl);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-xl);
	background:
		radial-gradient(
			circle at var(--moinho-pointer-x, 82%) var(--moinho-pointer-y, 12%),
			var(--moinho-color-brand-glow),
			transparent 54%
		),
		var(--moinho-card-bg);
}

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

.moinho-cases-convite .moinho-cases-convite__titulo {
	margin: 0 0 var(--moinho-space-2xs);
	font-size: var(--moinho-role-h3-size);
	font-weight: var(--moinho-weight-semibold);
}

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

/* =========================================================================
   REEL DE PORTFOLIO
   =========================================================================
   Esta faixa nasceu na home e por isso o layout dela morava em home.css,
   escopado em `.home`. Quando a mesma secao passou a ser usada em Expertises,
   nenhum seletor casava: a celula ficava sem largura, cada card ocupava a
   tela inteira e a trilha empilhava na vertical.

   O layout mora aqui agora, sem prefixo de pagina. A home continua com os
   ajustes DELA em home.css — o reel maior e o painel de tela cheia com
   pinning — que vencem por especificidade.
   ========================================================================= */

.moinho-cases__painel {
	display: grid;
	align-content: center;
	gap: var(--moinho-space-lg);
}

.moinho-cases__cabecalho {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	align-items: end;
	gap: var(--moinho-grid-gap);
}

.moinho-cases__intro {
	grid-column: 1 / span 8;
	max-inline-size: var(--moinho-container-narrow);
}

.moinho-cases__intro .moinho-eyebrow { margin-block-end: var(--moinho-space-sm); }
.moinho-cases .moinho-section__title { max-inline-size: var(--moinho-heading-measure); }
.moinho-cases .moinho-section__lead { margin-block-start: var(--moinho-heading-gap); }

.moinho-cases__acao {
	grid-column: 10 / -1;
	justify-self: end;
	padding-block-end: var(--moinho-space-3xs);
}

/* A janela rola; a trilha e o conteudo que desliza dentro dela. O padding
   lateral alinha o primeiro card com o container e deixa o ultimo respirar
   ao chegar no fim. */
.moinho-cases__janela {
	inline-size: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	overscroll-behavior-inline: contain;
	scroll-padding-inline: max(var(--moinho-container-padding), calc(50vw - var(--moinho-container-width) / 2));
	scroll-snap-type: inline mandatory;
	scrollbar-width: thin;
}

.moinho-cases__janela:focus-visible {
	outline: var(--moinho-border-width-strong) solid var(--moinho-color-focus);
	outline-offset: calc(var(--moinho-focus-ring-offset) * -1);
}

.moinho-cases__trilha {
	/* Medida do card. Fora da home a secao e uma faixa dentro da pagina, e
	   nao o capitulo de tela cheia: tres cards visiveis em 1440px, que e o
	   que faz a faixa parecer portfolio em vez de banner. */
	--moinho-case-reel-size: clamp(18rem, 27vw, 26rem);

	display: flex;
	align-items: stretch;
	gap: var(--moinho-grid-gap);
	inline-size: max-content;
	margin: 0;
	padding: var(--moinho-space-3xs) max(var(--moinho-container-padding), calc(50vw - var(--moinho-container-width) / 2)) var(--moinho-space-md);
	list-style: none;
}

.moinho-cases__celula {
	display: flex;
	flex: 0 0 var(--moinho-case-reel-size);
	inline-size: var(--moinho-case-reel-size);
	margin: 0;
	scroll-snap-align: start;
}

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

/* O card do reel nao tem moldura propria: a moldura e da foto. Card com
   borda E foto com borda viram dois retangulos concentricos. */
.moinho-cases .moinho-card {
	overflow: visible;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.moinho-cases .moinho-card__media {
	overflow: hidden;
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-panel);
	box-shadow: var(--moinho-shadow-md);
	transition: border-color var(--moinho-duration-normal) var(--moinho-ease-out);
}

.moinho-cases .moinho-card__corpo { padding: var(--moinho-space-sm) 0 0; }

/* Duas linhas reservadas em titulo e resumo: sem isso, um case de titulo
   curto encolhe o card e a fileira perde o alinhamento de base. */
.moinho-cases .moinho-card__titulo {
	min-block-size: 2lh;
	transition: transform var(--moinho-duration-normal) var(--moinho-ease-out);
}

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

@media (hover: hover) {
	.moinho-cases .moinho-card:hover { transform: none; box-shadow: none; }
	.moinho-cases .moinho-card:hover .moinho-card__media { border-color: var(--moinho-color-border-strong); }
	.moinho-cases .moinho-card:hover .moinho-card__titulo { transform: translateX(0.35rem); }
}

@media (max-width: 63.9375rem) {
	.moinho-cases__intro { grid-column: 1 / -1; }
	.moinho-cases__acao { grid-column: 1 / -1; justify-self: start; }
	.moinho-cases__trilha { --moinho-case-reel-size: clamp(17rem, 42vw, 22rem); }
}

@media (max-width: 47.9375rem) {
	.moinho-cases__trilha { --moinho-case-reel-size: min(78vw, 20rem); }
}