/*
 * Associados — Benefícios e Associação (node 147:3). Cores já validadas
 * em telas anteriores, nenhuma nova. Ícones dos benefícios (graduation-cap,
 * document, people, badge) são hand-coded no estilo dos demais ícones do
 * tema — sem export vetorial disponível remotamente, mesma ressalva já
 * documentada para header/footer/eventos.
 */

.ibdmar-benefit-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-24);
	margin-top: var(--sp-24);
}

.ibdmar-benefit-card {
	padding: var(--sp-24);
	border-radius: 12px;
	background: var(--color-background-subtle);
	color: var(--color-secondary);
}

.ibdmar-benefit-card__title {
	margin: var(--sp-16) 0 var(--sp-8);
	font: var(--text-h5);
	color: var(--color-text-heading);
}

.ibdmar-benefit-card__desc {
	margin: 0;
	color: var(--color-text-secondary);
}

.ibdmar-steps-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--sp-24);
	margin-top: var(--sp-24);
}

.ibdmar-step-card {
	padding: var(--sp-24);
	border-radius: 12px;
	background: var(--color-surface-primary);
	border: 1px solid var(--color-border-default);
}

.ibdmar-step-card__number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-secondary);
	color: var(--color-text-inverse);
	font: var(--text-h5);
}

.ibdmar-step-card__title {
	margin: var(--sp-16) 0 var(--sp-8);
	font: var(--text-h5);
	color: var(--color-text-heading);
}

.ibdmar-step-card__desc {
	margin: 0;
	color: var(--color-text-secondary);
}

.ibdmar-cta-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-24);
	padding: var(--sp-32) var(--sp-48);
	border-radius: 16px;
	background: var(--color-brand-primary);
	flex-wrap: wrap;
}

.ibdmar-cta-bar__title {
	margin: 0 0 var(--sp-4);
	font: var(--text-h3);
	color: var(--color-text-inverse);
}

.ibdmar-cta-bar__desc {
	margin: 0;
	color: rgba(255, 255, 255, 0.85);
}

.ibdmar-cta-bar .ibdmar-btn {
	background: var(--color-secondary);
	color: var(--color-text-inverse);
	flex-shrink: 0;
}

.ibdmar-cta-bar .ibdmar-btn:hover {
	background: var(--color-secondary-hover);
}

@media (max-width: 1279px) {
	.ibdmar-benefit-grid,
	.ibdmar-steps-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 767px) {
	.ibdmar-benefit-grid,
	.ibdmar-steps-grid {
		grid-template-columns: 1fr;
	}

	.ibdmar-cta-bar {
		flex-direction: column;
		align-items: flex-start;
	}
}