/* =========================================================================
   THEME BUILDER - FOOTER
   =========================================================================
   Rodape em voz baixa.

   Pedido do cliente (13/10/2026): "deixar mais delicado, esta tudo muito
   em negrito". O peso nao vinha de um font-weight so. Vinha de tudo falar
   no mesmo volume: 16px em branco puro na lista, no contato e no endereco,
   numero em semibold, assinatura em semibold, rotulo em caixa alta
   espacada, icone de rede dentro de circulo com borda e tres orbes
   animados atras de tudo.

   A resposta e hierarquia por cor, nao por peso. Um corpo so (Caption) e
   tres degraus de tinta:
     1. cheio  — titulo de coluna, numero de contato, assinatura
     2. apoio  — link, endereco, texto institucional  (surface-fg-muted)
     3. fraco  — dado legal e icone                    (text-on-dark-faint)
   Nenhum texto passa de Medium (500).
   ========================================================================= */

/* -------------------------------------------------------------------------
   Folga da dock
   ----------------------------------------------------------------------
   A dock flutua fixa no rodape da janela e reserva espaco por
   `.moinho-has-dock { padding-block-end: var(--dock-clearance) }` no BODY.
   Esse padding cai DEPOIS do rodape, a ultima superficie pintada, entao no
   modo claro ele lia como uma faixa branca abaixo do rodape em todas as
   paginas. Quem paga a folga passa a ser o proprio rodape, que e escuro nos
   dois modos. O padding do corpo continua valendo como fallback para o
   filtro `moinho/footer/ocultar_nativo`, quando nao existe rodape nativo. */
.moinho-has-dock:has(.moinho-footer) {
	padding-block-end: 0;
}

.moinho-has-dock .moinho-footer {
	padding-block-end: var(--dock-clearance, 8rem);
}

.moinho-footer {
	--moinho-surface-bg: var(--moinho-color-surface-strong);
	--moinho-surface-fg: var(--moinho-color-text-on-brand);
	--moinho-surface-fg-muted: var(--moinho-color-text-on-dark-muted);
	--moinho-surface-border: var(--moinho-color-border-on-dark);

	position: relative;
	isolation: isolate;
	padding-block-start: var(--moinho-space-2xl);
	color: var(--moinho-surface-fg-muted);
	/* Uma familia para o rodape inteiro. Antes o titulo lia o token e o
	   resto herdava a fonte do kit do Elementor: duas vozes no mesmo bloco. */
	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);
	/* Fundo parado. Um brilho de marca no alto, e so. */
	background:
		radial-gradient(ellipse 70% 60% at 88% 0%, var(--moinho-color-brand-glow), transparent 70%),
		linear-gradient(180deg, var(--moinho-roxo-900), var(--moinho-tinta-900) 62%);
}

/* base.css pinta todo <p> com a tinta cheia da superficie. Aqui o
   paragrafo herda a tinta de apoio do rodape; quem precisa da cheia pede. */
.moinho-footer p { color: inherit; }

/* -------------------------------------------------------------------------
   Grade
   ---------------------------------------------------------------------- */

/* Colunas de lista no tamanho do conteudo, e a sobra repartida em partes
   iguais entre elas. Com fracoes, o vao visivel dependia do comprimento
   do texto: "Trabalhe com a gente" deixava 130px ate a coluna seguinte e
   o paragrafo da marca encostava na lista com 47px. O gap e so o piso. */
.moinho-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 22rem) repeat(3, auto);
	justify-content: space-between;
	gap: var(--moinho-space-lg) var(--moinho-space-xl);
	padding-block-end: var(--moinho-space-xl);
}

/* -------------------------------------------------------------------------
   Marca
   ----------------------------------------------------------------------
   O SVG oficial (viewBox 842x203) carrega folga em volta da arte: 72
   unidades a esquerda e 21 no topo. Sem compensar, o simbolo entra
   deslocado da margem da coluna e abaixo do topo dos titulos das outras
   colunas. A largura vive numa variavel para a folga ser proporcional. */
.moinho-footer__marca {
	--moinho-footer-logo-largura: 8.5rem;
}

.moinho-footer__logo-link,
.moinho-footer__wordmark {
	/* Bloco, nao inline-block: inline-block senta na linha de base e
	   deixa o descendente do strut entre a marca e a assinatura. */
	display: block;
	inline-size: fit-content;
	margin-block-end: var(--moinho-space-sm);
}

.moinho-footer__logo-link {
	margin-inline-start: calc(var(--moinho-footer-logo-largura) * -0.0854);
	margin-block-start: calc(var(--moinho-footer-logo-largura) * -0.0246);
	opacity: .92;
	transition: opacity var(--moinho-duration-fast) var(--moinho-ease-default);
}

.moinho-footer__logo-link:hover { opacity: 1; }
.moinho-footer__logo { display: block; inline-size: var(--moinho-footer-logo-largura); block-size: auto; }
.moinho-footer__wordmark { color: var(--moinho-surface-fg); font: var(--moinho-weight-medium) var(--moinho-role-h3-size)/1 var(--moinho-font-display); letter-spacing: -.04em; text-decoration: none; }

/* Assinatura no tamanho do H4, mas no peso do texto: a frase fala baixo
   e o tamanho sozinho ja separa ela do resto. */
.moinho-footer .moinho-footer__assinatura {
	max-inline-size: 20ch;
	margin: 0 0 var(--moinho-space-xs);
	color: var(--moinho-surface-fg);
	font-family: var(--moinho-role-heading-family);
	font-size: var(--moinho-role-h4-size);
	font-weight: var(--moinho-weight-regular);
	line-height: var(--moinho-role-h4-leading);
	letter-spacing: var(--moinho-role-h4-tracking);
	text-wrap: balance;
}

.moinho-footer__desde {
	max-inline-size: none;
	margin: 0;
	text-wrap: pretty;
	-webkit-hyphens: none;
	hyphens: none;
}

/* D59: texto corrido justificado a partir de 48rem, ultima linha solta,
   sem hifen. Abaixo disso a coluna e estreita demais. */
@media (min-width: 48rem) {
	.moinho-footer__desde {
		text-align: var(--moinho-copy-align);
		text-align-last: start;
	}
}

/* -------------------------------------------------------------------------
   Colunas
   ---------------------------------------------------------------------- */

/* Titulo em caixa normal, no corpo das listas, so com a tinta cheia e um
   degrau de peso. A caixa alta espacada era o elemento mais alto do
   rodape depois da assinatura. */
.moinho-footer .moinho-footer__titulo {
	margin: 0 0 var(--moinho-space-xs);
	color: var(--moinho-surface-fg);
	font-family: inherit;
	font-size: inherit;
	font-weight: var(--moinho-weight-medium);
	line-height: inherit;
	letter-spacing: 0;
	text-transform: none;
}

.moinho-footer__lista,
.moinho-footer__contatos {
	display: grid;
	gap: var(--moinho-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.moinho-footer__lista li,
.moinho-footer__contatos li { margin: 0; padding: 0; }

.moinho-footer a {
	color: inherit;
	text-decoration: none;
	text-decoration-thickness: var(--moinho-border-width);
	text-underline-offset: .22em;
	transition: color var(--moinho-duration-fast) var(--moinho-ease-default);
}

.moinho-footer__lista a:hover,
.moinho-footer__contatos a:hover,
.moinho-footer__legal a:hover {
	color: var(--moinho-surface-fg);
	text-decoration-line: underline;
}

.moinho-footer__lista [aria-current="page"] { color: var(--moinho-surface-fg); }

/* Anel no token de foco, nao no azul legivel: no modo claro o legivel e o
   azul 700, que da 2.75:1 sobre o roxo 900 e reprova o minimo de 3:1 para
   indicador de foco. O de foco e o azul 500 (4.8:1), e o 300 no escuro. */
.moinho-footer a:focus-visible {
	border-radius: var(--moinho-radius-sm);
	outline: var(--moinho-border-width-strong) solid var(--moinho-color-focus);
	outline-offset: var(--moinho-focus-ring-offset);
}

/* -------------------------------------------------------------------------
   Atendimento
   ----------------------------------------------------------------------
   Cada socio: numero na tinta cheia, e embaixo quem atende e a frente,
   numa linha so, na tinta de apoio. O azul da etiqueta saiu: era a unica
   cor do rodape e puxava o olho para o dado menos importante da linha. */
.moinho-footer__contatos { gap: var(--moinho-space-xs); }

.moinho-footer__contato {
	display: grid;
	grid-template-columns: 1rem minmax(0, 1fr);
	align-items: start;
	column-gap: var(--moinho-space-2xs);
}

/* Icone na tinta fraca, um pouco menor que a altura de x da linha. Mais
   especifico que a regra de base para nao precisar de !important. */
.moinho-footer .moinho-footer__contato svg.moinho-icon {
	--moinho-icon-size: .875rem;

	inline-size: var(--moinho-icon-size);
	block-size: var(--moinho-icon-size);
	place-self: start center;
	/* Centrado na primeira linha, qualquer que seja a entrelinha. */
	margin-block-start: .25rem;
	margin-block-start: calc((1lh - var(--moinho-icon-size)) / 2);
	color: var(--moinho-color-text-on-dark-faint);
	stroke-width: 1.5;
}

/* Bloco com filhos inline, e nao flex com quebra: a largura maxima de um
   flex-wrap e a soma de tudo numa linha so, e a coluna, dimensionada pelo
   conteudo, crescia ate caber numero + nome + frente lado a lado. */
.moinho-footer__socio {
	display: block;
	min-inline-size: 0;
}

.moinho-footer__contatos .moinho-footer__socio-numero {
	display: block;
	inline-size: fit-content;
	color: var(--moinho-surface-fg);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* O link e a linha inteira, mas o retorno do hover fica no numero: a
   linha de apoio nao clareia nem sublinha. */
.moinho-footer .moinho-footer__socio:hover { color: inherit; text-decoration-line: none; }
.moinho-footer__socio:hover .moinho-footer__socio-numero { text-decoration-line: underline; }

.moinho-footer__socio-tag::before {
	content: "\00B7";
	content: "\00B7" / "";
	margin-inline-end: .4em;
	color: var(--moinho-color-text-on-dark-faint);
}

/* O PHP poe um <wbr> depois da arroba: se faltar largura, o e-mail quebra
   ali, e nao em ".co / m.br". break-word, e nao anywhere, para a palavra
   inteira continuar contando na largura minima da coluna. */
.moinho-footer__contato--email a { min-inline-size: 0; overflow-wrap: break-word; }
.moinho-footer__contato--telefone a { white-space: nowrap; }

/* -------------------------------------------------------------------------
   Endereco
   ---------------------------------------------------------------------- */

/* Uma linha por parte do endereco (logradouro / cidade-UF), em vez de
   deixar a quebra cair no meio do bairro. */
.moinho-footer__endereco {
	display: grid;
	margin: 0 0 var(--moinho-space-xs);
	font-style: normal;
	text-wrap: balance;
}

/* Dias e faixa na mesma linha; quebra so entre as duas partes. */
.moinho-footer__horario { display: flex; flex-wrap: wrap; column-gap: .3em; margin: 0; }
.moinho-footer__horario > span { white-space: nowrap; }

/* -------------------------------------------------------------------------
   Base: dado legal, privacidade e redes
   ---------------------------------------------------------------------- */

.moinho-footer__base {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--moinho-space-xs) var(--moinho-space-lg);
	padding-block: var(--moinho-space-sm) max(var(--moinho-space-md), env(safe-area-inset-bottom));
	border-block-start: var(--moinho-border-width) solid var(--moinho-surface-border);
	color: var(--moinho-color-text-on-dark-faint);
	font-size: var(--moinho-role-label-size);
	line-height: var(--moinho-role-caption-leading);
}

.moinho-footer__identidade-legal { display: grid; gap: 0; }
.moinho-footer__linha { display: flex; flex-wrap: wrap; align-items: baseline; }

.moinho-footer__copy,
.moinho-footer__empresa { max-inline-size: none; margin: 0; }

.moinho-footer__legal {
	display: flex;
	margin: 0;
	padding: 0;
	list-style: none;
}

.moinho-footer__legal li { margin: 0; }

.moinho-footer__legal li::before {
	content: "|";
	content: "|" / "";
	margin-inline: .6em;
	color: var(--moinho-surface-border);
}

/* Redes sem moldura: o icone sozinho, na tinta de apoio. O alvo de toque
   continua em 2.75rem; a margem negativa devolve a folga para o icone
   alinhar com a borda do container. */
.moinho-footer__redes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 calc((2.75rem - 1.125rem) / -2);
	padding: 0;
	list-style: none;
}

.moinho-footer__redes li { display: block; margin: 0; padding: 0; line-height: 0; }

.moinho-footer__redes a {
	display: grid;
	place-items: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	color: var(--moinho-surface-fg-muted);
	line-height: 0;
}

.moinho-footer__redes a:hover { color: var(--moinho-surface-fg); }
.moinho-footer__redes a:focus-visible { border-radius: var(--moinho-radius-circle); outline-offset: 0; }
.moinho-footer__redes svg.moinho-icon { --moinho-icon-size: 1.125rem; }

/* -------------------------------------------------------------------------
   Responsivo
   ---------------------------------------------------------------------- */

@media (max-width: 63.9375rem) {
	.moinho-footer__grid { grid-template-columns: repeat(3, auto); }
	.moinho-footer__marca { grid-column: 1 / -1; max-inline-size: 34rem; }
}

@media (max-width: 47.9375rem) {
	.moinho-footer { padding-block-start: var(--moinho-space-xl); }
	.moinho-footer__grid { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block-end: var(--moinho-space-md); }
	.moinho-footer__marca { grid-column: auto; padding-block-end: var(--moinho-space-md); }

	/* No celular cada coluna vira um bloco separado por fio, como uma lista
	   de ajustes: o olho acha o titulo sem precisar de mais peso. */
	.moinho-footer__coluna {
		padding-block: var(--moinho-space-sm);
		border-block-start: var(--moinho-border-width) solid var(--moinho-surface-border);
	}

	.moinho-footer__lista { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--moinho-space-sm); }

	.moinho-footer__base { flex-direction: column-reverse; align-items: flex-start; }

	/* Sem largura para a linha legal, privacidade desce inteira e o fio
	   separador sai: no comeco de linha ele nao separa nada. */
	.moinho-footer__linha { flex-direction: column; }
	.moinho-footer__legal li::before { content: none; }
}

/* -------------------------------------------------------------------------
   Toque
   ----------------------------------------------------------------------
   Com dedo, todo link de texto ganha alvo de 2.75rem (44px), o minimo da
   HIG. Pelo ponteiro, e nao pela largura: um notebook com mouse em janela
   estreita nao precisa das linhas mais altas, um tablet deitado precisa.
   O padding cresce o alvo e o gap da lista some para o ritmo nao dobrar. */
@media (pointer: coarse) {
	.moinho-footer__lista { row-gap: 0; }

	.moinho-footer__lista a,
	.moinho-footer__legal a,
	.moinho-footer__contato--email a {
		display: inline-block;
		padding-block: .6875rem;
		padding-block: calc((2.75rem - 1lh) / 2);
	}

	/* Socio: duas linhas de texto ja somam perto de 44px; o piso garante. */
	.moinho-footer__socio { min-block-size: 2.75rem; }

	/* O e-mail desceu pelo padding; o icone acompanha o centro da linha. */
	.moinho-footer .moinho-footer__contato--email svg.moinho-icon {
		margin-block-start: calc((2.75rem - var(--moinho-icon-size)) / 2);
	}
}