/* =========================================================================
   THEME BUILDER - FOOTER / COSMOS MOINHO
   ========================================================================= */

/* -------------------------------------------------------------------------
   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: a dock flutua sobre a superficie do rodape e nao sobra nada.
   O padding do corpo continua valendo como fallback para a hipotese do
   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;
	overflow: hidden;
	padding-block-start: clamp(4rem, 8vw, 7rem);
	color: var(--moinho-surface-fg);
	background:
		radial-gradient(circle at 78% -16%, rgb(118 74 152 / .34), transparent 34%),
		linear-gradient(155deg, var(--moinho-roxo-900), var(--moinho-tinta-900) 54%, var(--moinho-azul-900) 145%);
}

.moinho-footer__atmosfera {
	position: absolute;
	z-index: -2;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.moinho-footer__atmosfera::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgb(26 23 32 / .06), rgb(26 23 32 / .38) 58%, rgb(26 23 32 / .74));
}

.moinho-footer__orb {
	position: absolute;
	display: block;
	border-radius: 50%;
	filter: blur(5rem);
	opacity: .72;
	will-change: transform;
}

.moinho-footer__orb--1 {
	inline-size: min(42rem, 64vw);
	aspect-ratio: 1;
	inset: -22% auto auto -12%;
	background: rgb(118 74 152 / .48);
	animation: moinho-footer-orb-a 18s ease-in-out infinite alternate;
}

.moinho-footer__orb--2 {
	inline-size: min(36rem, 58vw);
	aspect-ratio: 1;
	inset: 18% -12% auto auto;
	background: rgb(24 153 214 / .36);
	animation: moinho-footer-orb-b 22s ease-in-out infinite alternate;
}

.moinho-footer__orb--3 {
	inline-size: min(26rem, 46vw);
	aspect-ratio: 1;
	inset: auto auto -14% 38%;
	background: rgb(169 127 203 / .24);
	animation: moinho-footer-orb-c 16s ease-in-out infinite alternate;
}

.moinho-footer__grade {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgb(255 255 255 / .035) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / .035) 1px, transparent 1px);
	background-size: 4.5rem 4.5rem;
	mask-image: linear-gradient(180deg, rgb(0 0 0 / .75), transparent 78%);
	opacity: .52;
}

/* -------------------------------------------------------------------------
   Conteudo institucional
   ---------------------------------------------------------------------- */

.moinho-footer__grid {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: 1.6fr 1fr 1.2fr;
	gap: var(--moinho-space-xl) var(--moinho-grid-gap);
	padding-block: 0 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 ~18px
   deslocado da margem da coluna e ~5px abaixo do topo dos titulos das
   outras colunas — a caixa alinha, a arte nao. A largura vive numa
   variavel para a folga ser proporcional a ela, e nao chutada em pixel. */
.moinho-footer__marca {
	--moinho-footer-logo-largura: min(13rem, 68vw);
}

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

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

.moinho-footer__logo { display: block; inline-size: var(--moinho-footer-logo-largura); block-size: auto; }
.moinho-footer__wordmark { color: var(--moinho-color-text-on-brand); font: var(--moinho-weight-semibold) 3rem/1 var(--moinho-font-display); letter-spacing: -.06em; text-decoration: none; }

.moinho-footer .moinho-footer__assinatura {
	max-inline-size: 20ch;
	margin: 0 0 var(--moinho-space-2xs);
	color: var(--moinho-color-text-on-brand);
	font: var(--moinho-role-h4-weight) var(--moinho-role-h4-size)/var(--moinho-role-h4-leading) var(--moinho-role-heading-family);
	letter-spacing: var(--moinho-role-h4-tracking);
	/* Duas linhas parelhas ("A diferenca esta / nos detalhes."), sem
	   "detalhes." sozinho na segunda. */
	text-wrap: balance;
}

/* Texto corrido do rodape: papel Small inteiro (corpo E entrelinha).
   Antes so o corpo mudava e a entrelinha ficava a do body (18px/1.5),
   o que dava 27px de linha para 16px de texto em lista e contato. */
.moinho-footer__desde,
.moinho-footer__endereco,
.moinho-footer__lista,
.moinho-footer__contatos {
	font-size: var(--moinho-role-small-size);
	line-height: var(--moinho-role-small-leading);
}

.moinho-footer__desde {
	margin: 0 0 var(--moinho-space-md);
	color: var(--moinho-surface-fg-muted);
	text-wrap: pretty;
	-webkit-hyphens: none;
	hyphens: none;
}

/* Mesma regra das paginas: bloco justificado a partir de 48rem, ultima
   linha solta, sem hifen. Abaixo disso a coluna e estreita demais para
   justificar sem abrir rios. */
@media (min-width: 48rem) {
	.moinho-footer__desde {
		text-align: var(--moinho-copy-align);
		text-align-last: start;
	}
}

.moinho-footer__redes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--moinho-space-2xs); margin: 0; padding: 0; list-style: none; }
.moinho-footer__redes li { display: block; margin: 0; padding: 0; line-height: 0; }
.moinho-footer__redes a {
	/* 2.75rem e o alvo de toque minimo acessivel. */
	display: grid;
	place-items: center;
	box-sizing: border-box;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	flex: none;
	margin: 0;
	padding: 0;
	border: var(--moinho-border-width) solid var(--moinho-color-border-on-dark);
	border-radius: var(--moinho-radius-circle);
	background: var(--moinho-color-fill-on-dark);
	color: var(--moinho-color-text-on-brand);
	line-height: 0;
	text-decoration: none;
	overflow: hidden;
	box-shadow: inset 0 1px 0 rgb(255 255 255 / .08);
	transition: transform var(--moinho-duration-normal) var(--moinho-ease-out), background-color var(--moinho-duration-fast) var(--moinho-ease-default), border-color var(--moinho-duration-fast) var(--moinho-ease-default);
}
.moinho-footer__redes a:hover { transform: translateY(calc(var(--moinho-space-3xs) * -1)); border-color: var(--moinho-liquid-border-strong); background: var(--moinho-color-fill-on-dark-hover); }
.moinho-footer__redes a:focus-visible, .moinho-footer a:focus-visible { outline: var(--moinho-border-width-strong) solid var(--moinho-color-secondary-readable); outline-offset: var(--moinho-focus-ring-offset); }
.moinho-footer__redes svg.moinho-icon { --moinho-icon-size: 1.1rem; }

.moinho-footer .moinho-footer__titulo { margin: 0 0 var(--moinho-space-sm); color: var(--moinho-color-accent); font: var(--moinho-weight-semibold) var(--moinho-role-label-size)/1 var(--moinho-font-body); letter-spacing: var(--moinho-tracking-eyebrow); text-transform: uppercase; }
/* base.css ja normaliza fill, stroke, linecap, linejoin, overflow e
   vector-effect em todo svg.moinho-icon. Aqui sobra o que e do rodape:
   traco um pouco mais fino sobre fundo escuro, e a cor da superficie. */
.moinho-footer svg.moinho-icon {
	stroke-width: 1.7;
	color: var(--moinho-color-text-on-brand);
}

.moinho-footer__lista,
.moinho-footer__contatos { display: flex; flex-direction: column; gap: var(--moinho-space-2xs); margin: 0; padding: 0; list-style: none; }
.moinho-footer__lista li, .moinho-footer__contatos li { margin: 0; }
.moinho-footer__lista a, .moinho-footer__contatos a { color: var(--moinho-color-text-on-brand); text-decoration: none; }
.moinho-footer__lista a:hover, .moinho-footer__contatos a:hover { color: var(--moinho-color-secondary-readable); }
/* Uma linha por parte do endereco (logradouro / cidade-UF), em vez de
   deixar a quebra cair no meio do bairro ("Jardim / Netinho Prado"). */
.moinho-footer__endereco { display: grid; margin: 0 0 var(--moinho-space-sm); color: var(--moinho-surface-fg-muted); font-style: normal; text-wrap: balance; }
.moinho-footer__contatos li {
	display: grid !important;
	grid-template-columns: 1.125rem minmax(0, 1fr);
	align-items: center !important;
	gap: var(--moinho-space-2xs);
	min-block-size: 1.75rem;
	color: var(--moinho-surface-fg-muted);
}
.moinho-footer__contatos svg.moinho-icon {
	--moinho-icon-size: 1rem;
	inline-size: 1rem !important;
	min-inline-size: 1rem !important;
	max-inline-size: 1rem !important;
	block-size: 1rem !important;
	min-block-size: 1rem !important;
	max-block-size: 1rem !important;
	place-self: center;
	flex: none !important;
}
.moinho-footer__contatos a { min-inline-size: 0; overflow-wrap: anywhere; }
.moinho-footer__contato--telefone a { white-space: nowrap; }
.moinho-footer__horario-texto {
	display: flex;
	flex-wrap: wrap;
	gap: 0 var(--moinho-space-3xs);
	min-inline-size: 0;
	color: var(--moinho-surface-fg-muted);
}

.moinho-footer__horario-texto > span { white-space: nowrap; }

/* -------------------------------------------------------------------------
   Atendimento por socio
   ----------------------------------------------------------------------
   Cada linha carrega numero, nome e a frente que a pessoa responde. O
   rodape e onde o visitante procura o dado frio: numero em texto, para
   salvar o contato sem precisar abrir o WhatsApp.
   ---------------------------------------------------------------------- */

.moinho-footer__contato--socio {
	min-block-size: 0;
	padding-block: var(--moinho-space-3xs);
}

/* O icone sobe para a primeira linha; a linha inteira tem tres. Mesma
   especificidade da regra que centraliza os demais, so que depois. */
.moinho-footer__contato--socio svg.moinho-icon {
	align-self: start;
	/* Centrado na primeira linha (o numero), qualquer que seja a entrelinha. */
	margin-block-start: 0.1875rem;
	margin-block-start: calc((1lh - 1rem) / 2);
}

.moinho-footer__socio {
	display: flex;
	flex-direction: column;
	gap: 0.0625rem;
	min-inline-size: 0;
}

.moinho-footer__contatos .moinho-footer__socio-numero {
	font-weight: var(--moinho-weight-semibold);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	color: var(--moinho-color-text-on-brand);
}

.moinho-footer__socio-quem {
	font-size: var(--moinho-role-caption-size);
	line-height: var(--moinho-role-caption-leading);
	color: var(--moinho-surface-fg-muted);
}

.moinho-footer__socio-tag {
	font-size: var(--moinho-role-caption-size);
	line-height: var(--moinho-role-caption-leading);
	color: var(--moinho-color-secondary-readable);
	text-wrap: pretty;
}

.moinho-footer__base {
	position: relative;
	z-index: 2;
	padding-block: var(--moinho-space-sm) max(var(--moinho-space-lg), env(safe-area-inset-bottom));
	border-block-start: var(--moinho-border-width) solid var(--moinho-surface-border);
}
.moinho-footer__identidade-legal { display: grid; gap: var(--moinho-space-3xs); }
.moinho-footer__copy { max-inline-size: none; margin: 0; color: var(--moinho-surface-fg-muted); font-size: var(--moinho-role-label-size); }
.moinho-footer__empresa { max-inline-size: none; margin: 0; color: var(--moinho-surface-fg-muted); font-size: var(--moinho-role-label-size); }

@keyframes moinho-footer-orb-a { to { transform: translate3d(10vw, 5rem, 0) scale(1.12); } }
@keyframes moinho-footer-orb-b { to { transform: translate3d(-12vw, -4rem, 0) scale(.9); } }
@keyframes moinho-footer-orb-c { to { transform: translate3d(6vw, -5rem, 0) scale(1.18); } }

@media (max-width: 63.9375rem) {
	.moinho-footer__grid { grid-template-columns: 1.4fr 1fr; }
	.moinho-footer__grid > :last-child { grid-column: 1 / -1; }
}

@media (max-width: 47.9375rem) {
	.moinho-footer { padding-block-start: var(--moinho-space-xl); }
	.moinho-footer__grid { grid-template-columns: 1fr; }
	.moinho-footer__grid > :last-child { grid-column: auto; }
	.moinho-footer__orb { filter: blur(4rem); opacity: .58; }
	.moinho-footer__grade { background-size: 3.5rem 3.5rem; }
}