/* Landing /recarga-veicular: tema verde-folha por cima do CSS compartilhado de /cobrancas-mensalistas. */
:root {
	--leaf-50: #f3fbef;
	--leaf-100: #e3f5db;
	--leaf-200: #cdebc1;
	--leaf-600: #2f9e44;
	--leaf-700: #1f7a33;
	--leaf-ink: #12351c;

	--bg-secondary: var(--leaf-50);

	--sp-purple: var(--leaf-700);
	--sp-purple-dark: #14532d;
	--sp-purple-ink: #0f3d22;
	--sp-purple-light: var(--leaf-600);
	--text-primary: #14261a;
	--text-secondary: #55655a;
	--line: rgba(31, 122, 51, 0.14);
}

/* a marca continua no roxo oficial */
.logo {
	color: #44377b;
}

.accent {
	color: var(--leaf-600);
}

.hero-dark {
	background: radial-gradient(ellipse 70% 80% at 70% 40%, #ffffff 0%, var(--leaf-100) 55%, var(--leaf-200) 100%);
	color: var(--leaf-ink);
}

.hero-bg-overlay {
	background-image: linear-gradient(rgba(31, 122, 51, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 122, 51, 0.07) 1px, transparent 1px),
		linear-gradient(rgba(31, 122, 51, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(31, 122, 51, 0.03) 1px, transparent 1px);
}

.hero-badge {
	gap: 8px;
	background: #ffffff;
	border-color: var(--leaf-200);
	color: var(--leaf-700);
}

.hero-badge svg {
	color: var(--leaf-600);
}

.hero-subtitle {
	margin-top: 14px;
	font-size: clamp(1.35rem, 2.2vw, 1.9rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--leaf-700);
}

.hero-description {
	color: rgba(18, 53, 28, 0.82);
}

.hero-description strong {
	color: var(--leaf-ink);
}

.feature-tag {
	background: rgba(255, 255, 255, 0.75);
	border-color: var(--leaf-200);
}

.feature-tag svg {
	color: var(--leaf-600);
}

.btn-ghost {
	color: var(--leaf-ink);
	border-color: rgba(18, 53, 28, 0.35);
}

.btn-ghost:hover {
	background: rgba(255, 255, 255, 0.6);
	border-color: var(--leaf-ink);
}

.video-frame {
	box-shadow: 0 30px 70px -24px rgba(18, 53, 28, 0.45), 0 0 0 1px rgba(31, 122, 51, 0.18);
}

.stat-number {
	color: var(--leaf-700);
}

.section-badge:not(.on-dark),
.benefit-icon {
	background: var(--leaf-100);
	color: var(--leaf-700);
}

.video-play-cta {
	background: rgba(15, 61, 34, 0.92);
	box-shadow: 0 10px 28px rgba(15, 61, 34, 0.35);
}

.input-group input:focus {
	box-shadow: 0 0 0 4px rgba(31, 122, 51, 0.14);
}

.faq-item-modern:hover {
	border-color: rgba(31, 122, 51, 0.35);
}

.faq-item-modern.active {
	box-shadow: 0 6px 20px rgba(31, 122, 51, 0.1);
}

.activate-section {
	background: radial-gradient(ellipse 70% 80% at 25% 40%, var(--leaf-700) 0%, var(--sp-purple-dark) 55%, var(--sp-purple-ink) 100%);
}

.activate-section .accent {
	color: #a5f0c0;
}