/* =========================================================================
   PAGES — Frente de servico

   Uma pagina por frente. A composicao e deliberadamente mais simples que a de
   Expertises: quem chega aqui vem da busca por um servico especifico e quer a
   resposta, nao um passeio pelo portfolio de capacidades.

   Voz tipografica, cor, raio e espaco vem do sistema. Aqui so mora
   composicao e posicao.
   ========================================================================= */

/* -------------------------------------------------------------------------
   01 — Abertura: arte de fundo e conteudo sobreposto
   ---------------------------------------------------------------------- */

.moinho-frente-abertura__inner {
	position: relative;
	z-index: 1;
}

.moinho-frente-abertura {
	isolation: isolate;
	overflow: hidden;
}

.moinho-frente-abertura::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--moinho-frente-header-scrim);
	pointer-events: none;
}

.moinho-frente-abertura .moinho-eyebrow {
	color: var(--moinho-roxo-300);
}

.moinho-frente-abertura .moinho-section__lead {
	color: var(--moinho-surface-fg);
}

.moinho-frente-abertura__corpo {
	max-inline-size: 42rem;
	display: flex;
	flex-direction: column;
	gap: var(--moinho-heading-gap);
}

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

.moinho-frente-abertura__arte {
	position: absolute;
	inset: 0;
	z-index: -2;
	overflow: hidden;
	background: var(--moinho-roxo-900);
	pointer-events: none;
}

/* Campo de particulas: ilha React montada sobre a arte estatica.

   `screen` em vez de opacidade: o que aparece e o brilho da particula somado
   a foto, e o painel nao clareia como um todo. Se o React nao montar, este
   bloco fica vazio e invisivel, e a arte embaixo continua sendo o resultado
   final. */
.moinho-frente-particulas {
	position: absolute;
	inset: 0;
	mix-blend-mode: screen;
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--moinho-duration-slow) var(--moinho-ease-out);
}

.moinho-frente-particulas[data-moinho-particulas-pronto] {
	opacity: 1;
}

.moinho .moinho-frente-abertura__arte .moinho-frente-arte {
	position: absolute;
	inset: 0;
	display: block;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
}

.moinho-frente-detalhe.moinho-frente-detalhe--arte {
	padding: 0;
	gap: 0;
	overflow: hidden;
	border-inline-start: 0;
	border-radius: var(--moinho-radius-panel);
}

.moinho-frente-detalhe__arte {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 2 / 1;
	object-fit: cover;
}

/* Capa de case no lugar da arte generica (18/09/2026): mesma moldura, e o
   quadro inteiro leva ao case. */
.moinho-frente-detalhe__capa {
	display: block;
	overflow: hidden;
}

.moinho-frente-detalhe__capa .moinho-frente-detalhe__arte--case {
	aspect-ratio: 16 / 10;
	transition: transform var(--moinho-duration-slow) var(--moinho-ease-out);
}

@media (hover: hover) {
	.moinho-frente-detalhe__capa:hover .moinho-frente-detalhe__arte--case {
		transform: scale(1.03);
	}
}

.moinho-frente-cases__mais {
	margin: var(--moinho-space-lg) 0 0;
}

.moinho-frente-detalhe__corpo {
	display: grid;
	gap: var(--moinho-space-2xs);
	padding: var(--moinho-space-lg);
}

/* O box repete a moldura de Expertises: mesma borda, mesmo raio, mesmo
   respiro. E o sinal de que e o mesmo servico, visto de outro lugar. */
.moinho-frente-abertura__box {
	display: flex;
	flex-direction: column;
	gap: var(--moinho-space-2xs);
	align-self: start;
	padding: var(--moinho-space-lg);
	border: var(--moinho-border-width) solid var(--moinho-surface-border);
	border-radius: var(--moinho-radius-panel);
	background-color: var(--moinho-color-glass);
}

.moinho-frente-abertura__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3rem;
	block-size: 3rem;
	margin-block-end: var(--moinho-space-2xs);
	border-radius: var(--moinho-radius-md);
	background-color: var(--moinho-surface-bg);
	color: var(--moinho-color-primary);
}

.moinho-frente-abertura__icone svg {
	inline-size: 1.5rem;
	block-size: 1.5rem;
}

.moinho-frente-abertura__palavra {
	font-family: var(--moinho-font-display);
	font-size: var(--moinho-role-h3-size);
	line-height: var(--moinho-role-h3-leading);
	font-weight: var(--moinho-weight-semibold);
	color: var(--moinho-surface-fg);
}

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

/* -------------------------------------------------------------------------
   02 — Argumento: dois paragrafos e o detalhe ao lado
   ---------------------------------------------------------------------- */

.moinho-frente-argumento__inner {
	display: grid;
	gap: var(--moinho-space-xl) var(--moinho-grid-gap);
}

.moinho-frente-argumento__texto {
	display: flex;
	flex-direction: column;
	gap: var(--moinho-space-sm);
	max-inline-size: var(--moinho-copy-measure);
}

.moinho-frente-argumento__texto > p {
	color: var(--moinho-surface-fg-muted);
	text-wrap: pretty;
}

.moinho-frente-argumento__inicio {
	padding-block-start: var(--moinho-space-sm);
	border-block-start: var(--moinho-border-width) solid var(--moinho-surface-border);
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-role-small-leading);
	color: var(--moinho-surface-fg-muted);
}

.moinho-frente-detalhe {
	display: flex;
	flex-direction: column;
	gap: var(--moinho-space-2xs);
	align-self: start;
	padding: var(--moinho-space-lg);
	border-inline-start: var(--moinho-border-width-strong) solid var(--moinho-color-primary);
	border-radius: 0 var(--moinho-radius-panel) var(--moinho-radius-panel) 0;
	background-color: var(--moinho-color-glass);
}

.moinho-frente-detalhe__rotulo {
	font-size: var(--moinho-role-label-size);
	line-height: var(--moinho-role-label-leading);
	letter-spacing: var(--moinho-role-label-tracking);
	text-transform: uppercase;
	color: var(--moinho-color-primary);
}

.moinho-frente-detalhe__texto {
	color: var(--moinho-surface-fg-muted);
	text-wrap: pretty;
}

/* -------------------------------------------------------------------------
   03 — Entregas: lista em colunas, com marcador de check
   ---------------------------------------------------------------------- */

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

.moinho-frente-entregas__item {
	display: grid;
	grid-template-columns: 1.5rem minmax(0, 1fr);
	gap: var(--moinho-space-2xs);
	align-items: start;
	padding-block: var(--moinho-space-2xs);
	border-block-start: var(--moinho-border-width) solid var(--moinho-surface-border);
	color: var(--moinho-surface-fg);
}

.moinho-frente-entregas__item svg {
	inline-size: 1.125rem;
	block-size: 1.125rem;
	margin-block-start: .2rem;
	color: var(--moinho-color-primary);
}

/* -------------------------------------------------------------------------
   04 — Cases da frente
   ---------------------------------------------------------------------- */

.moinho-frente-cases__grade {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr));
	gap: var(--moinho-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	--moinho-media-ratio: 16 / 10;
}

/* -------------------------------------------------------------------------
   05 — As outras frentes
   ---------------------------------------------------------------------- */

/* Seis vizinhas em duas linhas de tres (18/09/2026): a grade de quatro
   deixava duas orfas na segunda linha. */
.moinho-frente-vizinhas__lista {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--moinho-grid-gap);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 63.9375rem) {
	.moinho-frente-vizinhas__lista {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 47.9375rem) {
	.moinho-frente-vizinhas__lista {
		grid-template-columns: 1fr;
	}
}

.moinho-frente-vizinhas__item a {
	display: grid;
	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);
	color: var(--moinho-surface-fg);
	text-decoration: none;
	transition: border-color var(--moinho-duration-fast) var(--moinho-ease-out),
		background-color var(--moinho-duration-fast) var(--moinho-ease-out);
}

.moinho-frente-vizinhas__item a:hover,
.moinho-frente-vizinhas__item a:focus-visible {
	border-color: var(--moinho-color-primary);
	background-color: var(--moinho-color-glass);
}

.moinho-frente-vizinhas__icone {
	display: inline-flex;
	color: var(--moinho-color-primary);
}

.moinho-frente-vizinhas__icone svg {
	inline-size: 1.375rem;
	block-size: 1.375rem;
}

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

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

/* -------------------------------------------------------------------------
   06 — Convite
   ---------------------------------------------------------------------- */

.moinho-frente-convite__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: var(--moinho-space-lg);
	align-items: flex-start;
	max-inline-size: var(--moinho-container-narrow);
}

.moinho-frente-convite {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.moinho-frente-convite__fundo {
	position: absolute;
	inset: 0;
	z-index: -2;
	inline-size: 100%;
	block-size: 100%;
	object-fit: cover;
	object-position: center;
}

.moinho-frente-convite::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--moinho-roxo-900);
	opacity: .78;
	pointer-events: none;
}

.moinho-frente-convite__acoes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--moinho-space-sm);
}

/* -------------------------------------------------------------------------
   Desktop: as duas colunas assimetricas
   ---------------------------------------------------------------------- */

@media (max-width: 63.9375rem) {
	.moinho-frente-abertura::before {
		background: var(--moinho-roxo-900);
		opacity: .82;
	}
}

@media (min-width: 64rem) {

	.moinho-frente-argumento__inner {
		grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
		align-items: start;
	}
}