/* =========================================================================
   MOINHO — DESIGN SYSTEM / BASE
   =========================================================================
   Reset minimo + tipografia base. Escopo global de proposito: define o
   comportamento padrao de elementos HTML semanticos, para que o markup
   correto ja saia bonito sem classe nenhuma.
   ========================================================================= */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Cor do CANVAS, nao da pagina.

	   O rodape e escuro nos dois modos de cor, e ele e a ultima superficie
	   pintada. Qualquer sobra abaixo dele — borracha do scroll no iOS, barra
	   injetada por plugin no wp_footer, pagina mais curta que a tela — aparecia
	   com o fundo claro do tema e lia como uma tarja branca no rodape.
	   O canvas passa a ser da cor do rodape; o corpo continua com a cor do
	   tema, entao nada acima muda. */
	background-color: var(--moinho-color-surface-strong);
	/* Compensa o header fixo ao pular por ancora. */
	scroll-padding-top: calc(var(--moinho-header-height) + var(--moinho-space-sm));
}

/* Tipografia do body vive em typography.css (papel Body). */
body {
	margin: 0;
	/* A cor da pagina pertence ao INVOLUCRO (.moinho-site), nao ao corpo.

	   O corpo carrega a folga da dock (`.moinho-has-dock`), que e um
	   padding-block-end aplicado DEPOIS da ultima superficie pintada — o
	   rodape. Pintando o corpo com a cor clara do tema, essa folga aparecia
	   como uma faixa branca de 6rem a 12rem abaixo do rodape em todas as
	   paginas do modo claro. Com o corpo transparente, qualquer sobra abaixo
	   do involucro mostra o canvas (html), que ja e a cor do rodape. */
	background-color: transparent;
	color: var(--moinho-color-text);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	/* Impede que qualquer secao larga gere scroll horizontal na pagina. */
	overflow-x: clip;
}

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

/* -------------------------------------------------------------------------
   Protecao do modo escuro
   ----------------------------------------------------------------------
   Alguns estilos gerados pelo WordPress/Elementor escrevem preto diretamente
   no heading. Esta camada vence esses valores sem alterar titulos que vivem
   em superficies de marca, pois todos continuam lendo --moinho-surface-fg. */

/* O invólucro do site cobre header, conteúdo e rodapé.

   `overflow-x: clip` aqui é a rede de segurança das peças que sangram a tela
   com 100vw (faixa fotográfica, .moinho-bleed): 100vw inclui a largura da
   barra de rolagem vertical, então elas passam alguns pixels de cada lado e
   podem acender uma barra de rolagem HORIZONTAL no rodapé da janela.
   `clip` corta a sobra sem virar container de scroll — `hidden` aqui
   quebraria qualquer position: sticky descendente. */
.moinho-site {
	overflow-x: clip;
	/* Superficie da pagina. Fica aqui, e nao no body, para que a folga da dock
	   (padding do body, depois do rodape) nao seja pintada de claro. */
	background-color: var(--moinho-color-background);
}

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

html[data-moinho-theme="dark"] .moinho-site :where(h1, h2, h3, h4, h5, h6) {
	color: var(--moinho-surface-fg, var(--moinho-color-text)) !important;
}

html[data-moinho-theme="dark"] .moinho-site :where(p:not([class]), li:not([class]), dt:not([class]), dd:not([class]), figcaption:not([class])) {
	color: var(--moinho-surface-fg, var(--moinho-color-text));
}

html[data-moinho-theme="dark"] .moinho-site :where(.has-black-color, .has-contrast-color) {
	color: var(--moinho-color-text) !important;
}

html[data-moinho-theme="dark"] .moinho-site :where(.has-white-background-color, .has-base-background-color) {
	background-color: var(--moinho-color-glass) !important;
}

/* -------------------------------------------------------------------------
   Tipografia
   ---------------------------------------------------------------------- */

/* A VOZ do titulo (familia, corpo, peso, entrelinha, tracking) pertence a
   design/typography.css, que carrega depois desta folha. Aqui ficam apenas
   as propriedades que nao sao tipografia: reset de margem, cor herdada da
   superficie ativa e quebra equilibrada. Nao devolva font-size para ca —
   foi essa duplicacao que permitiu escalas paralelas por pagina. */
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	color: var(--moinho-surface-fg);
	text-wrap: balance;
}

/* Guarda do modo claro em superficie invertida (18/09/2026). O kit global
   do Elementor escreve `.elementor-kit-NN h2 { color: preto }` (0,1,1) e
   vencia o seletor de tag acima (0,0,1): nas paginas de solucao, que usam o
   template do Elementor, o titulo do convite final sumia sobre o roxo. A
   regra abaixo tem (0,2,0), empata com componentes que colorem o proprio
   titulo (eles carregam depois e vencem) e so vale onde o fundo e escuro.
   O modo escuro ja tem a guarda com !important logo acima. */
.moinho .moinho-invert :where(h1, h2, h3, h4, h5, h6) {
	color: var(--moinho-surface-fg);
}

p, ul, ol, dl, blockquote, figure, pre, table {
	margin-block: 0 var(--moinho-space-sm);
}

p:last-child,
ul:last-child,
ol:last-child {
	margin-block-end: 0;
}

p {
	color: var(--moinho-surface-fg);
	text-wrap: pretty;
	max-width: var(--moinho-content-width);
}

/* Corpo de <small> vem do papel Caption, em typography.css. */
small {
	color: var(--moinho-surface-fg-muted);
}

strong, b { font-weight: var(--moinho-weight-semibold); }

/* -------------------------------------------------------------------------
   Links
   ---------------------------------------------------------------------- */

/* Link de texto usa o azul LEGIVEL, nao o azul de marca: #1899D6 sobre
   branco da 3.20:1 e reprova no AA para corpo de texto. O azul 700 da
   5.63:1 e mantem a mesma familia de cor. */
a {
	color: var(--moinho-color-secondary-readable);
	text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
	text-underline-offset: 0.2em;
	text-decoration-thickness: max(1px, 0.06em);
	transition: color var(--moinho-duration-fast) var(--moinho-ease-default),
	            text-decoration-color var(--moinho-duration-fast) var(--moinho-ease-default);
}

a:hover {
	color: var(--moinho-color-link-hover);
	text-decoration-color: currentColor;
}

.moinho-invert a {
	color: var(--moinho-azul-300);
}

/* -------------------------------------------------------------------------
   Foco — visivel sempre, em qualquer superficie.
   ---------------------------------------------------------------------- */

: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-sm);
}

.moinho-invert :focus-visible {
	outline-color: var(--moinho-azul-300);
}

::selection {
	background-color: var(--moinho-color-selection);
	color: var(--moinho-color-text);
}

/* -------------------------------------------------------------------------
   Midia
   ---------------------------------------------------------------------- */

img, picture, video, canvas, svg, iframe {
	display: block;
	max-width: 100%;
}

.moinho-liquid-glass-defs {
	position: absolute !important;
	inset: 0 auto auto 0 !important;
	inline-size: 0 !important;
	block-size: 0 !important;
	overflow: hidden !important;
	pointer-events: none !important;
}

img, video {
	height: auto;
}

/* Evita layout shift enquanto a imagem carrega. */
img[width][height] {
	height: auto;
}

.moinho-image {
	border-radius: inherit;
	object-fit: cover;
}

/* Elemento grafico da marca usado como marca d'agua. Herda a cor de quem o
   usa; quem chama define o tamanho pela largura, nunca por font-size. */
.moinho-marca-elemento {
	display: block;
	inline-size: 100%;
	block-size: auto;
	fill: currentColor;
	pointer-events: none;
}

svg.moinho-icon {
	display: block;
	box-sizing: border-box;
	width: var(--moinho-icon-size);
	height: var(--moinho-icon-size);
	flex: none;
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	overflow: visible;
}

svg.moinho-icon :is(path, rect, circle, ellipse, line, polyline, polygon) {
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: inherit !important;
	stroke-linecap: inherit !important;
	stroke-linejoin: inherit !important;
	vector-effect: non-scaling-stroke;
}

/* Marcas sociais usam o desenho oficial preenchido. A classe e aplicada por
   moinho_icon(), mantendo os demais icones da interface no sistema linear. */
svg.moinho-icon--brand {
	fill: currentColor !important;
	stroke: none !important;
}

svg.moinho-icon--brand :is(path, rect, circle, ellipse, line, polyline, polygon) {
	fill: currentColor !important;
	stroke: none !important;
	vector-effect: none;
}

/* -------------------------------------------------------------------------
   Formularios
   ---------------------------------------------------------------------- */

input, button, textarea, select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
	background: none;
	border: 0;
	padding: 0;
}

textarea {
	resize: vertical;
	min-height: 8rem;
}

/* -------------------------------------------------------------------------
   Listas e citacoes
   ---------------------------------------------------------------------- */

ul, ol {
	padding-inline-start: 1.25em;
}

li + li {
	margin-block-start: var(--moinho-space-3xs);
}

blockquote {
	margin-inline: 0;
	padding-inline-start: var(--moinho-space-sm);
	border-inline-start: var(--moinho-border-width-strong) solid var(--moinho-color-primary);
	font-size: var(--moinho-role-body-lg-size);
	line-height: var(--moinho-leading-relaxed);
}

hr {
	border: 0;
	border-block-start: var(--moinho-border-width) solid var(--moinho-surface-border);
	margin-block: var(--moinho-space-lg);
}

/* -------------------------------------------------------------------------
   Utilitarios de acessibilidade — os unicos utilitarios globais permitidos.
   ---------------------------------------------------------------------- */

.moinho-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.moinho-skip-link {
	position: absolute;
	inset-block-start: var(--moinho-space-2xs);
	inset-inline-start: var(--moinho-space-2xs);
	z-index: var(--moinho-z-toast);
	padding: var(--moinho-space-2xs) var(--moinho-space-sm);
	background-color: var(--moinho-color-primary);
	color: var(--moinho-color-text-on-brand);
	border-radius: var(--moinho-radius-sm);
	transform: translateY(-200%);
	transition: transform var(--moinho-duration-fast) var(--moinho-ease-out);
}

.moinho-skip-link:focus-visible {
	transform: translateY(0);
}

/* -------------------------------------------------------------------------
   Eyebrow — rotulo curto acima de titulos. Aparece em quase toda secao
   do site atual ("DEPOIMENTOS", "EXPERTISES", "BLOG").
   ---------------------------------------------------------------------- */

/* O eyebrow E o papel Label — nao uma tipografia paralela. Le as mesmas
   variaveis, entao mudar Label no painel muda todo eyebrow do site. */
.moinho-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--moinho-space-2xs);
	margin: 0 0 var(--moinho-space-xs);
	font-family: var(--moinho-role-ui-family);
	font-size: var(--moinho-role-label-size);
	font-weight: var(--moinho-role-label-weight);
	line-height: var(--moinho-role-label-leading);
	letter-spacing: var(--moinho-role-label-tracking);
	text-transform: var(--moinho-role-label-transform);
	color: var(--moinho-color-primary-readable);
}

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

.moinho-eyebrow::before {
	content: "";
	inline-size: var(--moinho-space-md);
	block-size: var(--moinho-border-width-strong);
	background-color: currentColor;
}

/* O atributo hidden deve prevalecer sobre layouts flex e grid. */
.moinho [hidden] { display: none !important; }

/* Captura de interface: conservar o painel inteiro em cards e capas. */
.moinho .moinho-media img.moinho-image--interface {
	object-fit: contain;
	object-position: center;
}
.moinho .moinho-case__capa:has(.moinho-image--interface) {
	aspect-ratio: auto;
	padding: var(--moinho-space-md);
}
.moinho .moinho-case__capa .moinho-image--interface {
	position: static;
	width: auto;
	height: auto;
	max-width: 100%;
	margin-inline: auto;
}