/* ==========================================================================
   Maringá Faz Mais — landing do dia do lançamento (mock da Fase 2)
   Carregado só quando essa landing está em exibição (template "Landing
   Lançamento" ou chave de pré-visualização do painel), pra não pesar a
   Fase 1 em produção. Reutiliza as variáveis do :root de main.css.
   ========================================================================== */

:root {
	--azul-noite: #050f1f; /* fundo "Maringá no Futuro" — PLACEHOLDER a confirmar */
}

/* ==========================================================================
   Cabeçalho padrão das seções novas (eyebrow + título + sub)
   ========================================================================== */

.mfm-secao-cabecalho {
	margin-bottom: 28px;
}

.mfm-secao-cabecalho__eyebrow {
	color: var(--verde);
	font-size: 0.72rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.24em;
}

.mfm-secao-cabecalho__titulo {
	margin-top: 10px;
	font-size: clamp(1.4rem, 3.6vw, 2rem);
	font-weight: 900;
	line-height: 1.15;
}

.mfm-secao-cabecalho__sub {
	margin-top: 8px;
	max-width: 60ch;
	font-size: clamp(0.85rem, 2vw, 0.95rem);
	opacity: 0.75;
}

/* ==========================================================================
   Mapa das obras — placeholder do Leaflet (Fase 2)
   ========================================================================== */

.mfm-mapa {
	padding-block: 56px 44px;
	background: var(--azul-escuro);
}

.mfm-mapa__caixa {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	min-height: 320px;
	padding: 32px 20px;
	border: 2px dashed rgba(127, 182, 232, 0.5);
	border-radius: 10px;
	background: rgba(8, 31, 59, 0.45);
	text-align: center;
}

.mfm-mapa__pin {
	font-size: 2rem;
	line-height: 1;
}

.mfm-mapa__texto {
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: rgba(127, 182, 232, 0.75);
}

.mfm-mapa__texto span {
	display: block;
	margin-top: 6px;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: none;
	opacity: 0.85;
}

/* Busca decorativa: só sugere o visual; o campo real chega com o mapa */
.mfm-mapa__busca {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: min(420px, 100%);
	margin-top: 6px;
	padding: 12px 20px;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 999px;
	background: rgba(4, 15, 30, 0.55);
	color: rgba(255, 255, 255, 0.55);
	font-size: 0.85rem;
	text-align: left;
}

/* ==========================================================================
   Selos contadores — 3 selos grandes com cor por status
   ========================================================================== */

.mfm-selos {
	padding-block: 48px;
	background: var(--azul-escuro);
}

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

.mfm-selo {
	--selo-cor: var(--verde);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 28px 20px;
	border: 3px solid var(--selo-cor);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	text-align: center;
}

.mfm-selo--verde { --selo-cor: var(--verde); }
.mfm-selo--ciano { --selo-cor: var(--ciano); }
.mfm-selo--azul  { --selo-cor: var(--azul-claro); }

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

.mfm-selo__numero {
	font-size: clamp(2.4rem, 6vw, 3.2rem);
	font-weight: 900;
	color: var(--selo-cor);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.mfm-selo__rotulo {
	margin-top: 4px;
	font-size: 0.9rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.mfm-selo__descricao {
	font-size: 0.78rem;
	opacity: 0.65;
}

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

/* ==========================================================================
   Cards das obras — foto, badge de status, carimbo e barra de progresso
   ========================================================================== */

.mfm-obras {
	padding-block: 48px 56px;
	background: var(--azul-escuro);
	content-visibility: auto;
	contain-intrinsic-size: auto 1400px;
}

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

.mfm-obra-card {
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(127, 182, 232, 0.18);
	border-radius: 12px;
	overflow: hidden;
	background: rgba(8, 31, 59, 0.6);
}

.mfm-obra-card__foto {
	position: relative;
}

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

.mfm-obra-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 5px 10px;
	border-radius: 6px;
	font-size: 0.68rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.mfm-obra-card__badge--andamento {
	background: var(--amarelo);
	color: var(--azul-escuro);
}

.mfm-obra-card__badge--entregue {
	background: var(--verde);
	color: var(--azul-escuro);
}

/* Carimbo "ENTREGUE!" — identidade da campanha: entrega é carimbada */
.mfm-carimbo {
	position: absolute;
	top: 14px;
	right: 14px;
	padding: 4px 12px;
	border: 3px solid var(--verde);
	border-radius: 6px;
	background: rgba(8, 31, 59, 0.75);
	color: var(--verde);
	font-size: 0.8rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transform: rotate(-12deg);
}

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

@keyframes mfm-carimbada {
	from {
		transform: rotate(-12deg) scale(2.6);
		opacity: 0;
	}
	to {
		transform: rotate(-12deg) scale(1);
		opacity: 1;
	}
}

.mfm-obra-card__corpo {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 10px;
	padding: 18px;
}

.mfm-obra-card__titulo {
	font-size: 1.15rem;
	font-weight: 900;
}

.mfm-obra-card__descricao {
	font-size: 0.85rem;
	line-height: 1.45;
	opacity: 0.75;
}

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

.mfm-obra-card__progresso-trilho {
	height: 8px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.12);
	overflow: hidden;
}

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

.mfm-obra-card__progresso-valor {
	display: block;
	margin-top: 6px;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--verde);
}

@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 — fundo azul-noite, cards de vídeo IA
   ========================================================================== */

.mfm-futuro {
	padding-block: 56px;
	background: var(--azul-noite);
	border-top: 3px solid var(--ciano);
	content-visibility: auto;
	contain-intrinsic-size: auto 900px;
}

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

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

.mfm-futuro-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 14px 12px 18px;
	border: 1px solid rgba(40, 196, 224, 0.25);
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.04);
	text-align: center;
	transition: border-color 0.15s, transform 0.15s;
}

.mfm-futuro-card:hover,
.mfm-futuro-card:focus {
	border-color: var(--ciano);
	transform: translateY(-3px);
}

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

.mfm-futuro-card__titulo {
	font-size: 0.95rem;
	font-weight: 800;
}

.mfm-futuro-card__sub {
	font-size: 0.72rem;
	opacity: 0.65;
}

.mfm-futuro-card__badge {
	margin-top: 4px;
	padding: 4px 10px;
	border: 1.5px solid var(--ciano);
	border-radius: 999px;
	color: var(--ciano);
	font-size: 0.62rem;
	font-weight: 800;
	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: rgba(255, 255, 255, 0.5);
}

.mfm-futuro-card__badge--breve {
	border-color: rgba(255, 255, 255, 0.35);
	color: rgba(255, 255, 255, 0.7);
}

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

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

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

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