/* ==========================================================================
   Maringá Faz Mais — landing do dia do lançamento
   Carregado só quando essa landing está em exibição (template "Landing
   Lançamento" ou chave de pré-visualização do painel), depois do main.css:
   herda reset, tokens de cor e header/footer.

   Direção de arte igual à do site principal ("blueprint institucional"):
   corpo claro alternando off-white e branco puro, navy só como tinta, azul
   institucional no header/footer e a assinatura azul/ciano/verde em barras e
   eyebrows. Ritmo das faixas: hero navy → números azul institucional →
   mapa off-white → selos branco → obras off-white → futuro navy →
   fechamento branco → footer azul.
   ========================================================================== */

/* Header desta página é só assinatura (sem menu): a logo da campanha não é
   link, então não deve parecer clicável. */
.mfm-header--landing .mfm-header__logo {
	cursor: default;
}

/* Corpo claro. As faixas escuras (hero, futuro) devolvem a tinta branca. */
.mfm-landing {
	background: var(--off-white);
	color: var(--tinta);
}

.mfm-landing .mfm-hero,
.mfm-landing .mfm-numeros,
.mfm-landing .mfm-futuro {
	color: var(--branco);
}

/* ==========================================================================
   Cabeçalho padrão das seções (eyebrow + título + sub)
   Alinhado à esquerda sobre uma hairline — o motif de planta/obra do site.
   Cada seção sobrescreve --sec-hairline e --sec-eyebrow.
   ========================================================================== */

.mfm-secao-cabecalho {
	margin-bottom: 36px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--sec-hairline, var(--hairline-escuro));
	text-align: left;
}

.mfm-secao-cabecalho__eyebrow {
	color: var(--sec-eyebrow, rgba(255, 255, 255, 0.55));
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.22em;
}

.mfm-secao-cabecalho__titulo {
	margin-top: 10px;
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	font-weight: 600;
	line-height: 1.12;
	text-wrap: balance;
}

.mfm-secao-cabecalho__sub {
	margin-top: 12px;
	max-width: 62ch;
	font-size: clamp(0.9rem, 1.8vw, 1.05rem);
	line-height: 1.5;
	color: var(--sec-sub, var(--tinta-suave));
	text-wrap: pretty;
}

/* Seções claras: tokens locais de hairline/eyebrow. Off-white e branco puro
   alternam pra dar ritmo sem massa escura. */
.mfm-mapa,
.mfm-selos,
.mfm-obras {
	--sec-hairline: var(--hairline);
	--sec-eyebrow: var(--tinta-suave);
	background: var(--off-white);
	color: var(--tinta);
}

.mfm-selos {
	background: var(--branco);
}

.mfm-mapa,
.mfm-obras {
	--sec-eyebrow: var(--ciano-escuro);
}

.mfm-selos {
	--sec-eyebrow: var(--verde-escuro);
}

/* ==========================================================================
   Faixa de números (marquee) — banda azul institucional, igual ao
   header/footer, fechando o hero
   ========================================================================== */

.mfm-landing .mfm-numeros {
	background: var(--azul-institucional);
	border-color: rgba(220, 233, 244, 0.18);
}

/* ==========================================================================
   Mapa das obras — Leaflet + OSM em fundo claro, filtros de status/bairro/área
   e legenda das 5 cores de status (componentes compartilhados no main.css)
   ========================================================================== */

.mfm-mapa {
	padding-block: 88px;
}

/* Filtros (rótulo + select/input do main.css) na versão clara — o campo de
   bairro é o combobox digitável que o main.js monta sobre o select. */
.mfm-mapa .mfm-filtro span {
	color: var(--tinta-suave);
}

.mfm-mapa .mfm-filtro select,
.mfm-mapa .mfm-filtro input {
	border-color: var(--hairline);
	background: var(--branco);
	color: var(--tinta);
}

.mfm-mapa .mfm-filtro input::placeholder {
	color: var(--tinta-suave);
}

.mfm-mapa .mfm-filtro select:focus,
.mfm-mapa .mfm-filtro input:focus {
	outline-color: var(--azul-marca);
}

/* Pontos da legenda: a borda branca some no fundo claro. */
.mfm-mapa .mfm-legenda__ponto {
	border-color: rgba(13, 42, 74, 0.25);
}

.mfm-mapa__filtros {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	margin-bottom: 14px;
}

@media (min-width: 640px) {
	.mfm-mapa__filtros {
		grid-template-columns: repeat(3, 1fr) auto;
		align-items: end;
	}
}

.mfm-mapa__limpar {
	padding: 11px 16px;
	border: 1px solid rgba(13, 42, 74, 0.35);
	border-radius: 6px;
	background: none;
	color: var(--tinta);
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	cursor: pointer;
	transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.mfm-mapa__limpar:hover,
.mfm-mapa__limpar:focus {
	border-color: var(--azul-marca);
	color: var(--azul-marca);
	background: rgba(14, 95, 164, 0.06);
}

.mfm-mapa__contagem {
	min-height: 1.2em;
	margin-bottom: 10px;
	font-size: 0.8rem;
	font-variant-numeric: tabular-nums;
	color: var(--tinta-suave);
}

.mfm-mapa__caixa {
	position: relative;
	/* Novo stacking context: os z-index internos do Leaflet (panes 400,
	   controles 1000) ficam contidos aqui e não passam do header fixo. */
	z-index: 0;
	/* Teto em 440px: em laptop o mapa cabe na tela junto com filtros e
	   legenda, sem exigir scroll pra ver inteiro. */
	height: clamp(360px, 48vw, 440px);
	border: 1px solid var(--hairline);
	border-radius: 8px;
	overflow: hidden;
	background: #E9EEF3;
}

.mfm-mapa__legenda {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 18px;
	margin-top: 16px;
	font-size: 0.78rem;
	color: var(--tinta-suave);
}

.mfm-mapa__legenda li {
	display: flex;
	align-items: center;
	gap: 7px;
}

/* ==========================================================================
   Selos contadores — 3 cards brancos com barra do status no topo.
   O número fica no azul institucional (como os cards de números da home);
   a cor do status vive na barra e no ícone.
   ========================================================================== */

.mfm-selos {
	padding-block: 88px;
}

.mfm-selos__grid {
	display: grid;
	gap: 20px;
}

.mfm-selo {
	--selo-cor: var(--verde-escuro);
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: clamp(28px, 3.5vw, 44px) 20px clamp(24px, 3vw, 36px);
	border: 1px solid var(--hairline);
	border-radius: 16px;
	overflow: hidden;
	background: var(--branco);
	box-shadow: 0 10px 26px rgba(13, 42, 74, 0.07);
	text-align: center;
}

.mfm-selo::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: var(--selo-cor);
}

/* Cores legíveis em fundo claro: o lime e o ciano puros só entram como
   decoração, nunca como tinta (regra da DA). */
.mfm-selo--verde { --selo-cor: var(--verde-escuro); }
.mfm-selo--ciano { --selo-cor: var(--ciano-escuro); }
.mfm-selo--azul  { --selo-cor: var(--azul-marca); }

.mfm-selo__icone {
	color: var(--selo-cor);
	line-height: 0;
}

.mfm-selo__numero {
	font-size: clamp(2.4rem, 5.5vw, 3.6rem);
	font-weight: 700;
	color: var(--azul-institucional);
	line-height: 1;
	letter-spacing: -0.02em;
	font-variant-numeric: tabular-nums lining-nums;
}

/* Régua curta entre o número e o rótulo — igual aos cards da home. */
.mfm-selo__numero::after {
	content: "";
	display: block;
	width: 56px;
	height: 1px;
	margin: 20px auto 0;
	background: var(--azul-marca);
}

.mfm-selo__rotulo {
	margin-top: 14px;
	font-size: 0.8rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--tinta);
}

.mfm-selo__descricao {
	max-width: 26ch;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--tinta-suave);
}

@media (min-width: 700px) {
	.mfm-selos__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   Cards das obras — cards brancos como os da home/listagens: foto no topo,
   badge-chip com ponto do status, carimbo "Entregue!" e barra de progresso
   ========================================================================== */

.mfm-obras {
	padding-block: 88px;
	content-visibility: auto;
	contain-intrinsic-size: auto 1400px;
}

.mfm-obras__grid {
	display: grid;
	gap: 24px;
}

.mfm-obra-card {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--hairline);
	border-radius: 8px;
	overflow: hidden;
	background: var(--branco);
	color: var(--tinta);
	transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.mfm-obra-card:hover,
.mfm-obra-card:focus-within {
	transform: translateY(-3px);
	border-color: var(--azul-suave);
	box-shadow: 0 14px 30px rgba(13, 42, 74, 0.12);
}

.mfm-obra-card__foto {
	position: relative;
	background: #E9EEF3;
	border-bottom: 1px solid var(--hairline);
}

.mfm-obra-card__foto img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* Badge de status: chip branco com ponto na cor do status — legível sobre
   qualquer foto, igual ao .mfm-badge do main.css. */
.mfm-obra-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 11px 5px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.94);
	color: var(--tinta);
	font-size: 0.66rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.mfm-obra-card__badge::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--badge-cor, var(--cinza-status));
}

.mfm-obra-card__badge--andamento { --badge-cor: var(--ambar); }
.mfm-obra-card__badge--entregue { --badge-cor: var(--verde); }

/* Carimbo "ENTREGUE!" — identidade da campanha: entrega é carimbada.
   Branco sobre navy translúcido (verde é só botão/progresso). */
.mfm-carimbo {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 3;
	padding: 6px 14px;
	border: 2px solid var(--branco);
	border-radius: 4px;
	background: rgba(13, 42, 74, 0.55);
	color: var(--branco);
	font-size: 1rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	opacity: 0;
	transform: rotate(-8deg);
}

/* A classe .visivel (IntersectionObserver) dispara a carimbada ao entrar na tela */
.mfm-obra-card.visivel .mfm-carimbo {
	animation: mfm-carimbada 0.45s cubic-bezier(0.2, 1.4, 0.4, 1) 0.15s forwards;
}

.mfm-obra-card__corpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 8px;
	padding: 20px 22px 22px;
}

.mfm-obra-card__titulo {
	font-family: var(--fonte-display);
	font-size: 1.2rem;
	font-weight: 600;
	line-height: 1.25;
	color: var(--tinta);
}

.mfm-obra-card__descricao {
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--tinta-suave);
	text-wrap: pretty;
}

.mfm-obra-card__meta {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 4px;
	font-size: 0.78rem;
	color: var(--tinta-suave);
}

.mfm-obra-card__progresso-trilho {
	height: 6px;
	border-radius: 999px;
	background: #E4EBF2;
	overflow: hidden;
}

.mfm-obra-card__progresso-barra {
	height: 100%;
	border-radius: 999px;
	background: var(--verde);
}

.mfm-obra-card__progresso-valor {
	display: block;
	margin-top: 8px;
	font-size: 0.72rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--tinta);
	font-variant-numeric: tabular-nums;
}

@media (min-width: 640px) {
	.mfm-obras__grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 900px) {
	.mfm-obras__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.mfm-obras {
		contain-intrinsic-size: auto 700px;
	}
}

/* ==========================================================================
   Maringá no Futuro Próximo — a única faixa escura do corpo (navy, tratamento
   de "sala de projeção" pros vídeos de IA), com a barra tricolor no topo
   ========================================================================== */

.mfm-futuro {
	position: relative;
	padding-block: 88px;
	background: var(--navy);
	content-visibility: auto;
	contain-intrinsic-size: auto 900px;
}

/* Assinatura azul/ciano/verde do menu, repetida no corte da seção. */
.mfm-futuro::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: linear-gradient(90deg, var(--azul-institucional) 0 34%, var(--ciano) 34% 67%, var(--verde) 67% 100%);
}

.mfm-futuro .mfm-secao-cabecalho__eyebrow {
	color: var(--azul-suave);
}

.mfm-futuro .mfm-secao-cabecalho__sub {
	color: var(--texto-suave);
}

.mfm-futuro__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}

.mfm-futuro-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 12px 18px;
	border: 1px solid var(--hairline-escuro);
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.04);
	text-align: center;
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mfm-futuro-card:hover,
.mfm-futuro-card:focus-visible {
	border-color: var(--azul-suave);
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(4, 12, 24, 0.45);
}

.mfm-futuro-card__thumb img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 6px;
}

.mfm-futuro-card__titulo {
	font-size: 1rem;
	font-weight: 600;
}

.mfm-futuro-card__sub {
	font-size: 0.78rem;
	color: var(--texto-suave);
}

.mfm-futuro-card__badge {
	margin-top: 4px;
	padding: 4px 11px;
	border: 1px solid rgba(220, 233, 244, 0.35);
	border-radius: 999px;
	color: var(--branco);
	font-size: 0.62rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

/* Card "Ver todas": sem thumb, borda tracejada, badge neutro */
.mfm-futuro-card--todas {
	justify-content: center;
	border-style: dashed;
}

.mfm-futuro-card__mais {
	font-size: 2rem;
	font-weight: 300;
	line-height: 1;
	color: var(--azul-suave);
}

.mfm-futuro-card__badge--breve {
	border-color: rgba(220, 233, 244, 0.2);
	color: var(--texto-suave);
}

@media (min-width: 900px) {
	.mfm-futuro__grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* ==========================================================================
   Faixa de fechamento — branco, fechando o corpo claro antes do footer azul
   ========================================================================== */

.mfm-landing .mfm-fechamento {
	background: var(--branco);
	color: var(--tinta);
	border-top: 1px solid var(--hairline);
	padding-block: 72px;
}

/* Régua curta tricolor acima do título — a assinatura da campanha. */
.mfm-landing .mfm-fechamento__titulo::before {
	content: "";
	display: block;
	width: 72px;
	height: 3px;
	margin: 0 auto 24px;
	background: linear-gradient(90deg, var(--azul-institucional) 0 34%, var(--ciano-escuro) 34% 67%, var(--verde-escuro) 67% 100%);
}

.mfm-landing .mfm-fechamento__sub {
	color: var(--tinta-suave);
}

/* ==========================================================================
   Movimento reduzido
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	/* Carimbo aparece direto, sem carimbada */
	.mfm-obra-card.visivel .mfm-carimbo {
		animation: none;
		opacity: 1;
	}

	.mfm-obra-card:hover,
	.mfm-obra-card:focus-within,
	.mfm-futuro-card:hover,
	.mfm-futuro-card:focus-visible {
		transform: none;
	}
}