/* =========================================================================
   MOINHO — DESIGN SYSTEM / PAPEIS TIPOGRAFICOS
   =========================================================================
   Esta folha responde uma pergunta que os tokens sozinhos nao respondiam:
   "qual e o titulo de secao do site?"

   tokens.css entrega uma escala de TAMANHOS (--moinho-text-2xl). Um tamanho
   nao e um papel: um titulo de secao tambem tem familia, peso, entrelinha,
   tracking e, as vezes, caixa. Sem essa camada, cada pagina remontava o
   conjunto na mao — e foi assim que a home ganhou sete escalas paralelas.

   REGRA: nenhum arquivo fora de /design declara font-size de titulo.
   Use a classe do papel (.moinho-t-h2) ou o elemento semantico (<h2>).

   Cada papel expoe 5 variaveis, e sao elas que o painel
   Aparencia -> Design System reescreve em tempo de execucao.
   Alterar um papel aqui, ou no painel, muda o site inteiro de uma vez.
   ========================================================================= */

:root {

	/* ---------------------------------------------------------------------
	   FAMILIAS POR PAPEL
	   Duas familias, dois trabalhos. Display carrega a marca, Body carrega
	   a leitura. Qualquer terceira familia precisa virar regra aqui antes
	   de aparecer em uma pagina.
	   --------------------------------------------------------------------- */
	--moinho-role-display-family: var(--moinho-font-display);
	--moinho-role-heading-family: var(--moinho-font-display);
	--moinho-role-body-family: var(--moinho-font-body);
	--moinho-role-ui-family: var(--moinho-font-body);

	/* ---------------------------------------------------------------------
	   DISPLAY — hero e aberturas de secao monumentais.
	   Entrelinha compacta com folga para acentos. Nao reaproveite este
	   papel em texto de leitura.
	   --------------------------------------------------------------------- */
	--moinho-role-display-size: clamp(2.25rem, 1.65rem + 2.5vw, 4rem);
	--moinho-role-display-weight: var(--moinho-weight-bold);
	--moinho-role-display-leading: 1.08;
	--moinho-role-display-tracking: -0.035em;

	/* H1 — titulo da pagina. Um por documento. */
	--moinho-role-h1-size: clamp(2rem, 1.5rem + 2vw, 3.25rem);
	--moinho-role-h1-weight: var(--moinho-weight-bold);
	--moinho-role-h1-leading: 1.12;
	--moinho-role-h1-tracking: -0.035em;

	/* H2 — titulo de secao. O papel mais usado do site. */
	--moinho-role-h2-size: clamp(1.625rem, 1.25rem + 1.5vw, 2.5rem);
	--moinho-role-h2-weight: var(--moinho-weight-bold);
	--moinho-role-h2-leading: 1.16;
	--moinho-role-h2-tracking: -0.025em;

	/* H3 — titulo de card e subsecao. */
	--moinho-role-h3-size: clamp(1.25rem, 1.125rem + 0.5vw, 1.5rem);
	--moinho-role-h3-weight: var(--moinho-weight-semibold);
	--moinho-role-h3-leading: 1.2;
	--moinho-role-h3-tracking: -0.02em;

	/* H4 — menor titulo com peso de titulo. */
	--moinho-role-h4-size: clamp(1.125rem, 1.05rem + 0.35vw, 1.375rem);
	--moinho-role-h4-weight: var(--moinho-weight-semibold);
	--moinho-role-h4-leading: 1.3;
	--moinho-role-h4-tracking: -0.015em;

	/* BODY LARGE — apoio de titulo, lead de secao, abertura de artigo. */
	--moinho-role-body-lg-size: clamp(1.125rem, 1.075rem + 0.2vw, 1.25rem);
	--moinho-role-body-lg-weight: var(--moinho-weight-regular);
	--moinho-role-body-lg-leading: 1.45;
	--moinho-role-body-lg-tracking: 0;

	/* BODY — leitura padrao. Piso de 16px: nunca menor. */
	--moinho-role-body-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
	--moinho-role-body-weight: var(--moinho-weight-regular);
	--moinho-role-body-leading: 1.5;
	--moinho-role-body-tracking: 0;

	/* SMALL — nota, apoio secundario, texto de card. */
	--moinho-role-small-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem);
	--moinho-role-small-weight: var(--moinho-weight-regular);
	--moinho-role-small-leading: 1.45;
	--moinho-role-small-tracking: 0;

	/* LABEL — eyebrow, categoria, rotulo de campo. Caixa alta e tracking
	   aberto compensam o corpo pequeno. Piso de 12px por legibilidade:
	   a auditoria encontrou rotulos de 10px no site. */
	--moinho-role-label-size: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
	--moinho-role-label-weight: var(--moinho-weight-semibold);
	--moinho-role-label-leading: 1.2;
	--moinho-role-label-tracking: 0.14em;
	--moinho-role-label-transform: uppercase;

	/* BUTTON — texto de acao. Entrelinha 1 mantem a pilula simetrica. */
	--moinho-role-button-size: clamp(0.8125rem, 0.78rem + 0.16vw, 0.875rem);
	--moinho-role-button-weight: var(--moinho-weight-semibold);
	--moinho-role-button-leading: 1;
	--moinho-role-button-tracking: 0.01em;

	/* MENU — navegacao. Peso medio: presente sem competir com o titulo. */
	--moinho-role-menu-size: clamp(0.875rem, 0.85rem + 0.12vw, 0.9375rem);
	--moinho-role-menu-weight: var(--moinho-weight-medium);
	--moinho-role-menu-leading: 1.2;
	--moinho-role-menu-tracking: 0;

	/* CAPTION — legenda de imagem, metadado, credito. */
	--moinho-role-caption-size: clamp(0.8125rem, 0.79rem + 0.12vw, 0.875rem);
	--moinho-role-caption-weight: var(--moinho-weight-regular);
	--moinho-role-caption-leading: 1.5;
	--moinho-role-caption-tracking: 0;
}

/* =========================================================================
   CLASSES DE PAPEL
   =========================================================================
   Aplique em qualquer elemento. A classe nao decide COR nem MARGEM — isso
   pertence ao contexto (superficie e stack). Um papel define so a voz.
   ========================================================================= */

.moinho-t-display {
	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);
	text-wrap: balance;
}

.moinho-t-h1 {
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h1-size);
	font-weight: var(--moinho-role-h1-weight);
	line-height: var(--moinho-role-h1-leading);
	letter-spacing: var(--moinho-role-h1-tracking);
	text-wrap: balance;
}

.moinho-t-h2 {
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h2-size);
	font-weight: var(--moinho-role-h2-weight);
	line-height: var(--moinho-role-h2-leading);
	letter-spacing: var(--moinho-role-h2-tracking);
	text-wrap: balance;
}

.moinho-t-h3 {
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h3-size);
	font-weight: var(--moinho-role-h3-weight);
	line-height: var(--moinho-role-h3-leading);
	letter-spacing: var(--moinho-role-h3-tracking);
	text-wrap: balance;
}

.moinho-t-h4 {
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-role-h4-weight);
	line-height: var(--moinho-role-h4-leading);
	letter-spacing: var(--moinho-role-h4-tracking);
	text-wrap: balance;
}

.moinho-t-body-lg {
	font-family: var(--moinho-role-body-family);
	font-size: var(--moinho-role-body-lg-size);
	font-weight: var(--moinho-role-body-lg-weight);
	line-height: var(--moinho-role-body-lg-leading);
	letter-spacing: var(--moinho-role-body-lg-tracking);
	text-wrap: pretty;
}

.moinho-t-body {
	font-family: var(--moinho-role-body-family);
	font-size: var(--moinho-role-body-size);
	font-weight: var(--moinho-role-body-weight);
	line-height: var(--moinho-role-body-leading);
	letter-spacing: var(--moinho-role-body-tracking);
	text-wrap: pretty;
}

.moinho-t-small {
	font-family: var(--moinho-role-body-family);
	font-size: var(--moinho-role-small-size);
	font-weight: var(--moinho-role-small-weight);
	line-height: var(--moinho-role-small-leading);
	letter-spacing: var(--moinho-role-small-tracking);
}

.moinho-t-label {
	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);
}

.moinho-t-button {
	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-role-button-leading);
	letter-spacing: var(--moinho-role-button-tracking);
}

.moinho-t-menu {
	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-role-menu-leading);
	letter-spacing: var(--moinho-role-menu-tracking);
}

.moinho-t-caption {
	font-family: var(--moinho-role-body-family);
	font-size: var(--moinho-role-caption-size);
	font-weight: var(--moinho-role-caption-weight);
	line-height: var(--moinho-role-caption-leading);
	letter-spacing: var(--moinho-role-caption-tracking);
}

/* =========================================================================
   ELEMENTOS SEMANTICOS HERDAM O PAPEL
   =========================================================================
   Markup correto sai certo sem classe nenhuma — inclusive o conteudo que o
   cliente escrever no editor do WordPress, que nunca tera classe de papel.
   ========================================================================= */

h1, .moinho-h1 {
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h1-size);
	font-weight: var(--moinho-role-h1-weight);
	line-height: var(--moinho-role-h1-leading);
	letter-spacing: var(--moinho-role-h1-tracking);
}

h2, .moinho-h2 {
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h2-size);
	font-weight: var(--moinho-role-h2-weight);
	line-height: var(--moinho-role-h2-leading);
	letter-spacing: var(--moinho-role-h2-tracking);
}

h3, .moinho-h3 {
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h3-size);
	font-weight: var(--moinho-role-h3-weight);
	line-height: var(--moinho-role-h3-leading);
	letter-spacing: var(--moinho-role-h3-tracking);
}

h4, .moinho-h4 {
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-role-h4-weight);
	line-height: var(--moinho-role-h4-leading);
	letter-spacing: var(--moinho-role-h4-tracking);
}

/* h5 e h6 nao ganham escala propria: sao H4 e Label. Inventar dois tamanhos
   a mais so cria decisao onde nao havia duvida. */
h5 {
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-role-h4-weight);
	line-height: var(--moinho-role-h4-leading);
	letter-spacing: var(--moinho-role-h4-tracking);
}

h6 {
	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);
}

body {
	font-family: var(--moinho-role-body-family);
	font-size: var(--moinho-role-body-size);
	font-weight: var(--moinho-role-body-weight);
	line-height: var(--moinho-role-body-leading);
	letter-spacing: var(--moinho-role-body-tracking);
}

small,
figcaption {
	font-size: var(--moinho-role-caption-size);
	line-height: var(--moinho-role-caption-leading);
}

label {
	font-family: var(--moinho-role-ui-family);
}

/* =========================================================================
   MODIFICADORES DE PAPEL
   =========================================================================
   As "variacoes criativas" que o site pede, como regra do sistema e nao
   como excecao solta dentro de uma pagina.
   ========================================================================= */

/* Titulo apertado ao maximo — usado nas aberturas monumentais da home.
   Existe para que ninguem precise inventar -0.055em de novo. */
.moinho-t-tight {
	letter-spacing: -0.055em;
	line-height: 0.93;
}

/* MARCA D'AGUA — o nome da marca em corpo gigante, atras do conteudo.
   Nao e texto de leitura, e elemento grafico: por isso vive fora da escala
   de papeis. Mas e um PADRAO (aparece 3 vezes na home), entao a voz fica
   aqui e cada instancia decide so o tamanho e a posicao. Antes eram tres
   trackings diferentes para o mesmo efeito. */
.moinho-t-marca-dagua {
	font-family: var(--moinho-role-display-family);
	font-weight: var(--moinho-weight-bold);
	line-height: 1;
	letter-spacing: -0.13em;
	color: var(--moinho-color-marca-dagua);
	pointer-events: none;
	user-select: none;
}

/* Medida de linha: titulo que precisa quebrar em ponto controlado.
   Substitui os max-inline-size: 13ch avulsos espalhados na home. */
.moinho-t-medida-curta { max-inline-size: 12ch; }
.moinho-t-medida-media { max-inline-size: 18ch; }
.moinho-t-medida-longa { max-inline-size: 28ch; }
.moinho-t-medida-leitura { max-inline-size: var(--moinho-content-width); }

/* Cor derivada da superficie ativa — nunca cor fixa. */
.moinho-t-muted { color: var(--moinho-surface-fg-muted); }
.moinho-t-brand { color: var(--moinho-color-primary-readable); }

/* Peso, quando a variacao e intencional e nao um acidente. */
.moinho-t-regular { font-weight: var(--moinho-weight-regular); }
.moinho-t-medium { font-weight: var(--moinho-weight-medium); }
.moinho-t-semibold { font-weight: var(--moinho-weight-semibold); }
.moinho-t-bold { font-weight: var(--moinho-weight-bold); }

/* Numeros tabulares — alinha colunas de dados e contadores animados. */
.moinho-t-tabular {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* =========================================================================
   AJUSTE FINO POR VIEWPORT
   =========================================================================
   A escala e fluida por padrao: clamp() resolve 375px -> 1600px sem media
   query, e e assim que deve continuar. O painel injeta override de tablet
   e mobile apenas quando o cliente pedir explicitamente.

   Uma unica correcao estrutural mora aqui: em telas muito estreitas,
   titulos com tracking negativo forte colam as letras. Afrouxar um pouco
   e legibilidade, nao capricho.
   ========================================================================= */

@media (max-width: 30rem) {
	.moinho-t-display,
	.moinho-t-tight {
		letter-spacing: -0.035em;
	}
}

/* =========================================================================
   GUARDA CONTRA O KIT GLOBAL DO ELEMENTOR
   =========================================================================
   O Elementor injeta `.elementor-kit-NN h1 { font-family: Anton; font-size:
   300px }` no site inteiro. Esse seletor vale uma classe MAIS um elemento;
   `h1` sozinho vale um elemento e perde. Resultado observado no ar: titulo
   de 300px com as linhas se sobrepondo.

   As regras acima continuam existindo para contexto sem a classe do body
   (editor, preview). Estas repetem o mesmo papel com `.moinho`, que o
   `body_class` sempre acrescenta: empatam com o kit e vencem porque esta
   folha carrega depois dele.

   Nao remova achando que e duplicacao. Confira em uma pagina com Elementor
   ativo antes.
   ========================================================================= */

.moinho h1,
.moinho .moinho-h1 {
	text-transform: none;
	text-wrap: balance;
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h1-size);
	font-weight: var(--moinho-role-h1-weight);
	line-height: var(--moinho-role-h1-leading);
	letter-spacing: var(--moinho-role-h1-tracking);
}

.moinho h2,
.moinho .moinho-h2,
.moinho .moinho-section__title {
	text-transform: none;
	text-wrap: balance;
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h2-size);
	font-weight: var(--moinho-role-h2-weight);
	line-height: var(--moinho-role-h2-leading);
	letter-spacing: var(--moinho-role-h2-tracking);
}

.moinho h3,
.moinho .moinho-h3 {
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h3-size);
	font-weight: var(--moinho-role-h3-weight);
	line-height: var(--moinho-role-h3-leading);
	letter-spacing: var(--moinho-role-h3-tracking);
}

.moinho h4,
.moinho h5,
.moinho .moinho-h4 {
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-role-h4-weight);
	line-height: var(--moinho-role-h4-leading);
	letter-spacing: var(--moinho-role-h4-tracking);
}

.moinho h6 {
	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);
}