/* =========================================================================
   Blocos do padrão visual do Grupo UNEED.
   Frentes · logos · benefícios · declaração.
   ====================================================================== */

/* --- Card de frente ----------------------------------------------------
   O bloco de ícone sólido é o que dá peso ao card. Sem ele vira caixa de
   texto com borda — que é o modo de falha genérico deste componente. */

.frentes__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr));
	gap: var(--sp-5);
}

.frente {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--sp-8);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	background:
		radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--brand) 11%, transparent), transparent 62%),
		var(--surface);
	transition:
		border-color var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out);
}

.frente:hover {
	border-color: color-mix(in srgb, var(--brand) 55%, transparent);
	transform: translateY(-3px);
}

.frente__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	margin-bottom: var(--sp-8);
	border-radius: var(--r-md);
	background: var(--brand);
	color: #fff;
}

.frente__titulo { margin-bottom: var(--sp-4); }

.frente__texto {
	color: var(--text-muted);
	font-size: var(--fs-sm);
	margin-bottom: var(--sp-6);
}

.frente__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: auto;
	font-size: var(--fs-xs);
	font-weight: 600;
	color: var(--brand);
	text-decoration: none;
	letter-spacing: .01em;
}

.frente__link .icon { transition: transform var(--dur-fast) var(--ease-out); }
.frente:hover .frente__link .icon { transform: translate(2px, -2px); }

/* --- Parede de logos ---------------------------------------------------- */

.logos__parede {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--sp-8) var(--sp-12);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Selos institucionais vão em COR.
   A versão anterior aplicava grayscale + brightness, o que funciona para
   logo de empresa mas destrói selo oficial: o MEC e os selos da Flórida
   têm a cor como parte da identidade, e dessaturados viram borrão. */
.logos__item img {
	max-height: 76px;
	width: auto;
	opacity: .88;
	transition:
		opacity var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out);
}

.logos__item:hover img {
	opacity: 1;
	transform: scale(1.04);
}

.logos__texto {
	font-family: var(--ff-display);
	font-size: var(--fs-sm);
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--text-subtle);
	white-space: nowrap;
	transition: color var(--dur-base) var(--ease-out);
}

.logos__item:hover .logos__texto { color: var(--text-muted); }

/* --- Benefícios --------------------------------------------------------- */

.beneficios__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
	gap: var(--sp-6);
}

.painel {
	padding: var(--sp-10) var(--sp-8);
	border: 1px solid var(--line);
	border-radius: var(--r-lg);
	/* Com o fundo do site uniforme, o painel precisa de --surface para se
	   destacar. Usava --bg quando a seção em volta era mais clara. */
	background:
		radial-gradient(110% 70% at 0% 0%, color-mix(in srgb, var(--brand) 13%, transparent), transparent 58%),
		var(--surface);
}

.painel__icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	margin-bottom: var(--sp-6);
	border-radius: var(--r-md);
	background: var(--brand);
	color: #fff;
}

.painel__titulo {
	font-size: clamp(1.375rem, 1.2rem + .7vw, 1.75rem);
	margin-bottom: var(--sp-8);
}

.painel__lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
}

.painel__item {
	display: flex;
	gap: var(--sp-4);
	align-items: flex-start;
}

.painel__item-icone {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: none;
	border-radius: var(--r-sm);
	background: color-mix(in srgb, var(--brand) 18%, transparent);
	color: var(--brand-soft);
}

.painel__item strong {
	display: block;
	font-size: var(--fs-sm);
	margin-bottom: var(--sp-1);
}

.painel__item-texto {
	display: block;
	font-size: var(--fs-xs);
	color: var(--text-muted);
	line-height: 1.55;
}

/* --- Declaração --------------------------------------------------------- */

/* Em rem, NÃO em ch.
   `ch` é relativo à fonte do PRÓPRIO elemento. Este é um container que
   herda o corpo de texto, então 24ch dava ~190px — e o título de 3rem
   dentro dele quebrava uma palavra por linha. Mesmo erro que já havia
   espremido os cabeçalhos de seção. */
.declaracao__inner {
	max-width: var(--medida-titulo-largo);
	margin-inline: auto;
	text-align: center;
}

.declaracao__titulo {
	font-size: clamp(1.875rem, 1.2rem + 3.2vw, 3.25rem);
}

.declaracao__texto {
	margin: var(--sp-6) auto 0;
	max-width: var(--medida-apoio);
	color: var(--text-muted);
	font-size: var(--fs-sm);
}

.declaracao__acoes { margin-top: var(--sp-10); }

/* Alvo de toque do item de lista dos painéis. */
.painel__item-icone { width: 36px; height: 36px; }

@media (max-width: 820px) {
	.declaracao__inner { max-width: none; }
	.declaracao__acoes .btn { flex: 1 1 100%; }
}

@media (max-width: 600px) {
	.frente, .painel { padding: var(--sp-5); }
	.frente__icone { width: 46px; height: 46px; margin-bottom: var(--sp-5); }
	.painel__icone { width: 44px; height: 44px; }
	.painel__titulo { margin-bottom: var(--sp-6); }
	.painel__lista { gap: var(--sp-5); }

	/* A parede de logos com gap grande demais em telefone deixava um selo
	   por linha e a seção com 5 telas de altura. */
	.logos__parede { gap: var(--sp-6); }
	.logos__item img { max-height: 54px; }
}