/* ==========
   Base & Tokens
   ========== */
:root {
	/* Cores */
	--dark-blue: #061633;
	--yellow: #f5ab4a;
	--dark-blue-text: #042f51;
	--yellow-1: #fbc222;
	--yellow-2: #fa7627;
	--green: #4f910a;
	--green-text: #79e00c;
	--red: #b90a1d;
	--faq-yellow: #b57d2d;
	--white: #ffffff;

	/* Tipografia (tamanhos — preset "large") */
	--fz-title: 36px;
	--fz-p: 20px;
	--fz-btn-lg: 36px;
	--fz-btn-sm: 20px;
	--fz-small: 16px;
	--fz-smaller: 12px;

	/* Espaçamentos */
	--space-xxl: 72px;
	--space-xl: 56px;
	--space-lg: 40px;
	--space-md: 24px;
	--space-sm: 16px;
	--radius-full: 9999px;
	--radius-cta: 8px;

	/* Animação */
	--reveal-distance: 16px;
	--reveal-duration: 650ms;
	--reveal-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

html {
	scroll-behavior: smooth;
}
* {
	box-sizing: border-box;
}
body {
	margin: 0;
	font-family: Tahoma, system-ui, -apple-system, Segoe UI, Arial, sans-serif;
	color: var(--white);
	background-color: var(--dark-blue);
	line-height: 1.45;
}

/* Utilitários de cor/texto */
.white-text {
	color: var(--white);
}
.dark-blue-bg {
	background-color: var(--dark-blue);
}
.dark-blue-text {
	color: var(--dark-blue-text);
}
.green-text {
	color: var(--green-text);
}
.yellow-button {
	background-color: var(--yellow);
}
.green-button {
	background-color: var(--green);
}
.red-button {
	background-color: var(--red);
}
.faq-yellow {
	color: var(--faq-yellow);
}

/* Containers */
.page-container {
	max-width: 1232px;
	margin-inline: auto;
	padding-inline: 20px;
}
.inner-section {
	max-width: 900px;
	margin-inline: auto;
}
.section-padding {
	padding: var(--space-l) 0;
}
.text-center {
	text-align: center;
}

/* Acessibilidade visual escondida (para título sem poluir o layout) */
.visually-hidden {
	position: absolute !important;
	height: 1px;
	width: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
	clip-path: inset(50%);
}

/* ==========
   Hero
   ========== */
.hero-bg {
	background-position: center;
	background-size: cover;
}

.hero {
	position: relative;
	padding-top: var(--space-xxl);
	padding-bottom: var(--space-xxl);
	isolation: isolate;
}
.hero::after {
	/* leve véu para leitura confortável */
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(1200px 600px at 20% 10%, rgba(6, 22, 51, 0.2), transparent 60%), linear-gradient(180deg, rgba(6, 22, 51, 0.65), rgba(6, 22, 51, 0.25));
	z-index: -1;
}

.hero-grid {
	display: grid;
	grid-template-columns: 1.15fr 0.85fr;
	align-items: center;
	gap: var(--space-lg);
}
.hero-left {
	display: grid;
	gap: var(--space-md);
}
.hero-logo {
	max-width: 420px;
	width: 100%;
	height: auto;
	padding-top: 40px;
	padding-bottom: 40px;
}
.hero-lead {
	font-size: var(--fz-p);
	margin: 0;
	padding-top: 20px;
	padding-bottom: 20px;
}
.highlight-yellow {
	color: var(--yellow);
	font-weight: 700;
}

/* Right image centered */
.hero-right {
	display: grid;
	place-items: center;
}
.mentores-img {
	max-width: 520px;
	height: auto;
	display: block;
	filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.4));
}

/* Botão-âncora (full width) logo após o hero) */
.hero-anchor {
	display: block;
	margin-top: var(--space-xl);
}

/* ==========
   Botões
   ========== */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%; /* regra geral */
	text-decoration: none;
	font-weight: 700;
	border: none;
	cursor: pointer;
	padding: 14px 20px;
	border-radius: var(--radius-full);
	transition: transform 0.08s ease, opacity 0.2s ease;
	text-align: center;
}
.btn:active {
	transform: translateY(1px) scale(0.995);
}

/* Amarelo sólido + texto azul-escuro */
.btn-yellow {
	background-color: var(--yellow);
	color: var(--dark-blue-text);
}

/* Tamanhos */
.btn-large {
	font-size: var(--fz-btn-lg);
	line-height: 1.1;
	padding-block: 18px;
}
.btn-small {
	font-size: var(--fz-btn-sm);
}

/* Exceção: CTA transparente com borda em gradiente amarelo (não 100% width) */
.btn-outline-gradient {
	width: 60%; /* exceção */
	color: var(--yellow);
	background: linear-gradient(var(--dark-blue), var(--dark-blue)) padding-box, linear-gradient(90deg, var(--yellow-1), var(--yellow-2)) border-box;
	border: 2px solid transparent;
	border-radius: var(--radius-cta);
	padding-inline: 22px;
	font-weight: 300;
	justify-content: left;
}
.btn-outline-gradient:hover {
	opacity: 0.95;
}

/* ==========
   Tipografia base
   ========== */
h1,
h2,
h3 {
	font-weight: 800;
	margin: 0 0 var(--space-sm);
}
p {
	font-size: var(--fz-p);
	margin: 0 0 var(--space-md);
}

/* ==========
   Reveal on scroll
   ========== */
.reveal {
	opacity: 0;
	transform: translateY(var(--reveal-distance));
	transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease);
}
.reveal.in-view {
	opacity: 1;
	transform: none;
	transition: opacity var(--reveal-duration) var(--reveal-ease), transform var(--reveal-duration) var(--reveal-ease);
}

/* ==========
   Breakpoints
   ========== */

/* <= 1232px (médio) */
@media (max-width: 1232px) {
	:root {
		--fz-title: 32px;
		--fz-p: 28px;
		--fz-btn-lg: 32px;
		--fz-btn-sm: 18px;
		--fz-small: 14px;
		--fz-smaller: 12px;
	}
	.hero-grid {
		grid-template-columns: 1fr;
		text-align: center;
	}
	.hero-left {
		place-items: center;
	}

	.btn-outline-gradient {
		width: 50%; /* exceção */
		color: var(--yellow);
		background: linear-gradient(var(--dark-blue), var(--dark-blue)) padding-box, linear-gradient(90deg, var(--yellow-1), var(--yellow-2)) border-box;
		border: 2px solid transparent;
		border-radius: var(--radius-cta);
		padding-inline: 22px;
		font-weight: 300;
		justify-content: center;
	}
}

@media (max-width: 550px) {
	.mentores-img {
		max-width: 100%;
	}
}

/* <= 432px (pequeno) */
@media (max-width: 432px) {
	:root {
		--fz-title: 28px;
		--fz-p: 16px;
		--fz-btn-lg: 24px;
		--fz-btn-sm: 16px;
		--fz-small: 13px;
		--fz-smaller: 12px;
	}
	.hero {
		padding-top: var(--space-xl);
		padding-bottom: var(--space-xl);
	}
	.hero-logo {
		max-width: 300px;
	}
	.btn-outline-gradient {
		width: 100%;
	}
	.hero-logo {
		padding-top: 20px;
		padding-bottom: 0px;
	}

	.mentores-img {
		max-width: 100%;
	}
}

/* Título com degradê amarelo */
.gradient-text {
	font-size: var(--fz-title);
	font-weight: 800;
	line-height: 1.15;
	margin-bottom: var(--space-lg);
	background: linear-gradient(90deg, var(--yellow-1), var(--yellow-2));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* Lista/caixas */
.features-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-xl);
	display: grid;
	gap: var(--space-md);
}
.feature-card {
	width: 100%;
	padding: 18px 22px;
	border-radius: 16px;
	background: rgba(255, 255, 255, 0.06); /* azul um pouco mais claro sobre o fundo */
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 20px rgba(0, 0, 0, 0.25);
	backdrop-filter: blur(2px);
	font-size: var(--fz-p);
	align-items: center;
}

/* Botão verde full */
.btn-green {
	background-color: var(--green);
	color: var(--white);
}
.btn-green:hover {
	filter: brightness(1.03);
}
.btn-green:active {
	transform: translateY(1px) scale(0.995);
}

/* Ajustes responsivos */
@media (max-width: 1232px) {
	.feature-card {
		padding: 16px 18px;
	}
}
@media (max-width: 432px) {
	.feature-card {
		font-size: var(--fz-small);
	}
}

.highlight {
	font-weight: 700;
}

.mt-0 {
	margin-top: 0;
}

.w90 {
	margin: auto;
	width: 90%;
}

/* Grid de ativações */
.ativacoes-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
	margin-top: var(--space-lg);
}

.ativacao-card {
	border: 2px solid var(--yellow);
	border-radius: 12px;
	padding: 18px;
	font-size: var(--fz-p);
	font-weight: 300;
	background-color: rgba(255, 255, 255, 0.02);
	transition: transform 0.25s ease, background 0.25s ease;
	cursor: default;
}

.ativacao-card:hover {
	transform: translateY(-6px);
	background: rgba(255, 255, 255, 0.06);
}

/* Responsivo */
@media (max-width: 1232px) {
	.ativacoes-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 432px) {
	.ativacoes-grid {
		grid-template-columns: 1fr;
	}
}

#ativacoes {
	margin-top: 100px;
}

/* Título em pílula amarela */
.pill-heading {
	display: inline-block;
	background: var(--yellow);
	color: var(--dark-blue-text);
	font-weight: 800;
	font-size: var(--fz-title);
	line-height: 1.1;
	padding: 18px 28px;
	border-radius: 9999px;
	margin-bottom: var(--space-lg);
	width: 100%;
	text-align: center;
}
#porque-unico {
	margin-top: 100px;
}

/* Subtítulo maior e centrado */
.section-lead {
	font-size: clamp(18px, 2.4vw, 28px);
	line-height: 1.35;
	max-width: 900px;
	margin: 0 auto var(--space-xl);
	color: var(--white);
	opacity: 0.95;
}

/* Grid dos 3 cards */
.why-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-md);
}

.why-card {
	background: rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	padding: 18px 20px;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 6px 20px rgba(0, 0, 0, 0.25);
	text-align: left;
	transition: transform 0.25s ease, background 0.25s ease;
}
.why-card:hover {
	transform: translateY(-6px);
	background: rgba(255, 255, 255, 0.08);
}

.why-card p {
	margin: 0;
	font-size: var(--fz-p);
}
.why-title {
	color: var(--yellow);
	font-weight: 800;
}
.yellow-text {
	color: var(--yellow);
	font-weight: 700;
}

/* Responsivo */
@media (max-width: 1232px) {
	.why-grid {
		grid-template-columns: 1fr;
	}
}
@media (max-width: 432px) {
	.why-grid {
		grid-template-columns: 1fr;
	}
	.pill-heading {
		padding: 10px 20px;
	}
}

#quem-esta {
	margin-top: 100px;
}

/* ===== QUEM ESTÁ POR TRÁS – com avatar absoluto ===== */

#quem-esta h2 {
	font-size: var(--fz-title);
	font-weight: 800;
	margin-bottom: var(--space-xl);
	color: var(--yellow);
}

#quem-esta .inner-section {
	/* largura padrão desktop */
	max-width: 900px;
}

.team {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
}

/* Variáveis locais */
#quem-esta {
	--avatar: 120px; /* diâmetro da foto (desktop) */
	--avatar-half: 60px;
	--avatar-gap: 22px; /* respiro entre foto e texto */
	--avatar-overlap: 38%; /* quanto “sai” para fora do card à esquerda */
}

/* Card base */
.team-card {
	position: relative;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid #fbc222;
	border-radius: 12px;
	padding: 22px 22px 22px calc(var(--avatar-half) + var(--avatar-gap) + 22px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 8px 24px rgba(0, 0, 0, 0.25);
	transition: transform 0.25s ease, background 0.25s ease;
	overflow: visible; /* garante que a foto apareça mesmo que “invada” */
}
.team-card:hover {
	transform: translateY(-6px);
	background: rgba(255, 255, 255, 0.07);
}

/* Foto circular absoluta, centralizada na esquerda */
.team-photo {
	position: absolute;
	left: 0;
	top: 50%;
	width: var(--avatar);
	height: var(--avatar);
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid var(--yellow);
	background: #fff;
	transform: translate(calc(-1 * var(--avatar-overlap)), -50%);
	z-index: 1;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
}

/* Texto */
.team-text {
	padding-left: 6px;
}
.team-text p {
	margin: 0;
	font-size: var(--fz-p);
	line-height: 1.45;
}
.team-name {
	font-weight: 800;
	color: var(--yellow);
}

/* ===== Responsivo ===== */

/* <= 900px: diminuir o container para criar “folga” lateral
   e aumentar levemente o avatar mantendo a lógica de sobreposição */
@media (max-width: 900px) {
	#quem-esta .inner-section {
		max-width: 760px; /* antes 900px — dá margem interna para o overlap não sair da viewport */
	}
	#quem-esta {
		--avatar: 128px; /* levemente maior */
		--avatar-half: 64px;
		--avatar-gap: 20px;
		--avatar-overlap: 28%; /* um pouco menos de saída para caber confortável */
	}
	.team-card {
		padding-left: calc(var(--avatar-half) + var(--avatar-gap) + 20px);
	}
}

/* <= 600px: avatar vai para o topo, centralizado */
@media (max-width: 600px) {
	#quem-esta .inner-section {
		max-width: 92vw; /* usa quase toda a largura, com respiro */
	}
	#quem-esta {
		--avatar: 112px;
		--avatar-half: 56px;
		--avatar-overlap: 0%;
	}
	.team-card {
		padding: calc(var(--avatar-half) + var(--avatar-gap) + 18px) 18px 18px 18px;
		text-align: center;
	}
	.team-photo {
		left: 50%;
		top: 0;
		transform: translate(-50%, -40%);
	}
	.team-text {
		padding-left: 0;
	}
}

#para-quem {
	margin-top: 100px;
}

/* pílula de título */
#para-quem .pill-heading {
	display: inline-block;
	background: var(--yellow);
	color: var(--dark-blue-text);
	font-weight: 800;
	font-size: var(--fz-title);
	line-height: 1.1;
	padding: 12px 28px;
	border-radius: 9999px;
	margin-bottom: var(--space-lg);
}

/* subtítulo */
#para-quem .section-lead {
	font-size: clamp(18px, 2.3vw, 26px);
	line-height: 1.35;
	margin-bottom: var(--space-lg);
	color: var(--white);
}

/* lista de cartões */
.quem-list {
	list-style: none;
	padding: 0;
	margin: var(--space-md) 0 var(--space-xl);
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}
.quem-card {
	background: rgba(255, 255, 255, 0.06);
	border-radius: 8px;
	padding: 14px 18px;
	font-size: var(--fz-p);
	line-height: 1.4;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
	text-align: center;
}
.quem-card .highlight {
	font-weight: 700;
}

/* fechamento */
.quem-fechamento {
	font-size: var(--fz-p);
	font-weight: 600;
	margin-top: var(--space-md);
	color: var(--white);
}

/* responsivo */
@media (max-width: 600px) {
	#para-quem .pill-heading {
		font-size: 24px;
		padding: 10px 20px;
	}
	.quem-card {
		font-size: var(--fz-small);
	}
}

/* ===== CHECKOUT / PREÇOS ===== */

#checkout .comece-img {
	width: 100%;
	max-width: 900px; /* controla a faixa vermelha */
	height: auto;
	margin: 0 auto var(--space-lg);
	display: block;
}

.pricing-title {
	font-size: clamp(22px, 3vw, 36px);
	font-weight: 800;
	letter-spacing: 0.02em;
	margin: 0 0 var(--space-sm);
}

.valor-img {
	width: 100%;
	max-width: 560px; /* controla a peça “12x …” */
	height: auto;
	margin: 0 auto var(--space-sm);
	display: block;
}

.pricing-note {
	font-size: var(--fz-small);
	opacity: 0.95;
	margin-bottom: var(--space-lg);
}

.choose-lead {
	font-size: clamp(18px, 2.2vw, 24px);
	font-weight: 800;
	text-transform: uppercase;
	margin-bottom: var(--space-md);
}

/* Grade de botões verdes */
.tema-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-sm);
	margin: 0 0 var(--space-lg);
}

.tema-btn {
	display: grid;
	place-items: center;
	text-align: center;
	text-decoration: none;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.2;
	padding: 16px 14px;
	border-radius: 10px;
	background: var(--green);
	color: var(--white);
	border: 2px solid rgba(255, 255, 255, 0.8); /* similar ao mock */
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.28), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
	transition: transform 0.2s ease, filter 0.2s ease;
}
.tema-btn:hover {
	transform: translateY(-4px);
	filter: brightness(1.05);
}
.tema-btn:active {
	transform: translateY(-1px);
}

/* Rodapé */
.pricing-footnote {
	opacity: 0.9;
}

/* Responsivo */
@media (max-width: 1232px) {
	.tema-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.valor-img {
		max-width: 520px;
	}
}

@media (max-width: 432px) {
	.tema-grid {
		grid-template-columns: 1fr;
	}
	.tema-btn {
		padding: 14px 12px;
		font-size: var(--fz-small);
	}
	#checkout .comece-img {
		max-width: 92vw;
	}
	.valor-img {
		max-width: 78vw;
	}
}

/* ===== OFERTA ESPECIAL ===== */

.oferta-bg {
	/* degrade quente e chamativo */
	background: linear-gradient(135deg, #fbc222 0%, #fa7627 50%, #f5ab4a 100%);
	color: var(--dark-blue-text);
	position: relative;
	overflow: hidden;
}

/* brilho suave animado atravessando o fundo */
.oferta-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 40%, transparent 70%);
	mix-blend-mode: overlay;
	animation: shimmer 6s infinite linear;
	z-index: 0;
}

/* padrão de círculos sutis para dar textura */
.oferta-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.08) 0, transparent 50%), radial-gradient(circle at 80% 60%, rgba(255, 255, 255, 0.06) 0, transparent 40%);
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 0;
}

/* conteúdo sobrepõe os efeitos */
#oferta-especial .inner-section {
	position: relative;
	z-index: 1;
}

/* animação de brilho */
@keyframes shimmer {
	0% {
		transform: translateX(-30%);
	}
	100% {
		transform: translateX(100%);
	}
}

.faixa-vermelha {
	margin-top: 60px;
	background: #b90a1d;
	color: var(--white);
	font-weight: 800;
	font-size: clamp(20px, 2.8vw, 30px);
	padding: 12px 20px;
	border-radius: 9999px;
	display: inline-block;
	margin-bottom: var(--space-lg);
}

.oferta-intro {
	font-size: clamp(18px, 2.4vw, 22px);
	line-height: 1.4;
	margin-bottom: var(--space-md);
}

.oferta-subtitle {
	font-size: clamp(20px, 2.6vw, 28px);
	font-weight: 800;
	margin-bottom: var(--space-md);
}

#oferta-especial .valor-img {
	width: 100%;
	max-width: 480px;
	margin: 0 auto var(--space-lg);
	display: block;
}

.beneficios-list {
	list-style: none;
	padding: 0;
	margin: 0 0 var(--space-xl);
	font-size: var(--fz-p);
	font-weight: 600;
	display: grid;
	gap: var(--space-sm);
}
.beneficios-list li {
	text-align: center;
}

#oferta-especial {
	padding-bottom: 60px;
}

/* CTA herdado do .btn-green */
#oferta-especial .btn {
	max-width: 680px;
	margin: 0 auto;
}

/* Responsivo */
@media (max-width: 600px) {
	.faixa-vermelha {
		font-size: 20px;
		padding: 10px 16px;
	}
	.beneficios-list {
		font-size: var(--fz-small);
	}
	#oferta-especial .valor-img {
		max-width: 80vw;
	}
}

#faq {
	padding-top: 40px;
	padding-bottom: 140px;
}
/* ===== FAQ ===== */

.faq-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

.faq-item {
	border-radius: 8px;
	overflow: hidden;
	background: #1e2f56; /* azul médio */
	color: var(--white);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

/* botão da pergunta */
.faq-question {
	width: 100%;
	background: transparent;
	border: none;
	text-align: left;
	font-size: var(--fz-p);
	font-weight: 700;
	padding: 16px 18px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
	color: var(--yellow);
}
.faq-question:hover {
	background: rgba(255, 255, 255, 0.05);
}

.faq-icon {
	font-weight: 700;
	font-size: 20px;
	margin-left: 12px;
	transition: transform 0.3s ease;
}

/* resposta escondida */
.faq-answer {
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.4s ease;
	padding: 0 18px;
}
.faq-answer p {
	font-size: var(--fz-small);
	line-height: 1.4;
	margin: 12px 0 18px;
	color: var(--white);
}

/* estado ativo */
.faq-item.active .faq-answer {
	max-height: 400px;
}
.faq-item.active .faq-icon {
	transform: rotate(45deg);
} /* vira o + em x */

/* responsivo */
@media (max-width: 600px) {
	.faq-question {
		font-size: var(--fz-small);
		padding: 14px 16px;
	}
	.faq-answer p {
		font-size: 14px;
	}
}

/* ===== FOOTER ===== */
.footer {
	background: radial-gradient(1200px 600px at 80% -10%, rgba(250, 118, 39, 0.18), transparent 60%), linear-gradient(180deg, #0a1b3a 0%, #061633 65%);
	color: var(--white);
	overflow: hidden;
	padding-bottom: 80px;
}

/* Topo */
.footer-top {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	text-align: center;
	justify-content: center;
}
.footer-logo {
	width: 44px;
	height: 44px;
	object-fit: contain;
	filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.35));
}
.footer-tagline {
	font-size: var(--fz-small);
	opacity: 0.9;
}

/* Faixa central (“dourado moderno”) */
.footer-banner {
	background: linear-gradient(90deg, var(--yellow-1), var(--yellow-2));
	color: var(--dark-blue-text);
	box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.08), 0 8px 24px rgba(0, 0, 0, 0.25);
	padding-bottom: 60px;
}
.footer-message {
	text-align: center;
	font-size: clamp(16px, 1.9vw, 22px);
	font-weight: 700;
	padding: 18px 0;
	margin: 0;
}
.footer-message strong {
	font-weight: 800;
}
.footer-institutos {
	font-weight: 800;
}

/* Base */
.footer-base {
	padding: 18px 0 28px;
	background: radial-gradient(900px 300px at 20% 110%, rgba(121, 224, 12, 0.08), transparent 60%), transparent;
}
.footer-copy {
	text-align: center;
	margin: 0;
	font-size: var(--fz-small);
	opacity: 0.9;
}

/* Responsivo */
@media (max-width: 600px) {
	.footer-top {
		justify-content: center;
		text-align: center;
	}
	.footer-tagline {
		font-size: 14px;
	}
	.footer-logo {
		width: 40px;
		height: 40px;
	}
}

/* ===== FUNDO GLOBAL ===== */
body.dark-blue-bg {
	background-color: var(--dark-blue);
	background-image: url("images/fundo_completo.webp");
	background-repeat: no-repeat;
	background-size: cover;
	background-attachment: fixed; /* dá efeito parallax suave */
	background-position: center;
}

/* ===== FUNDO FAQ ===== */
#faq {
	position: relative;
	z-index: 0; /* garante que o overlay fique atrás do conteúdo */
	background: url("images/fundo_faq.webp") center/cover no-repeat;
}

#faq::before {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.9; /* ajusta a intensidade da textura */
	z-index: -1; /* fica atrás do texto e cards */
}

/* Canvas de partículas ocupa o fundo todo */
#bg-particles {
	position: fixed;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -2; /* atrás de tudo */
	pointer-events: none;
}

.btn-green {
	background: linear-gradient(180deg, #5fae12, #4f910a);
}
.btn-yellow,
.pill-heading {
	background: linear-gradient(180deg, #fdd35a, #f5ab4a) !important;
}
.tema-btn {
	background: linear-gradient(180deg, #5fae12, #4f910a);
}

.feature-card,
.ativacao-card,
.why-card,
.team-card,
.quem-card,
.faq-item {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.feature-card:hover,
.ativacao-card:hover,
.why-card:hover,
.team-card:hover,
.quem-card:hover,
.faq-item:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

.sticky-cta {
	display: none;
}

@media (max-width: 768px) {
	.sticky-cta {
		display: block;
		position: fixed !important;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 1000;
		border-radius: 0;
	}
}

.faq-cta {
	margin-top: 80px;
}

.faq-contact {
	text-align: center;
	margin-top: var(--space-xl);
}
.faq-contact p {
	font-size: var(--fz-p);
	margin-bottom: var(--space-md);
}

.whats {
	text-align: center;
	justify-content: center;
	background: #4f910a !important;
	color: white;
}

.whatsimg {
	max-width: 60px;
}

.footer-base {
	padding: 18px 0 28px;
	background: radial-gradient(900px 300px at 20% 110%, rgba(121, 224, 12, 0.08), transparent 60%), transparent;
}

.footer-dev {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	font-size: var(--fz-small);
	opacity: 0.9;
	color: var(--white);
}

.footer-dev-logo {
	height: 28px;
	width: auto;
	display: inline-block;
	filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.35));
}

/* mobile */
@media (max-width: 600px) {
	.footer-dev {
		flex-direction: column;
		gap: 8px;
		text-align: center;
	}
	.footer-dev-logo {
		height: 24px;
	}
	.whats {
		flex-direction: column;
	}
}

/* Lista em linhas com ícone (esq) | texto (centro) | preço+CTA (dir) */
.product-list {
	display: grid;
	gap: var(--space-sm);
	margin: var(--space-md) 0 var(--space-xl);
}

.product-row {
	display: grid;
	grid-template-columns: auto 1fr auto; /* ícone | info | ação */
	align-items: center;
	gap: var(--space-md);
	padding: 16px 18px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.06);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}
.product-row:hover {
	transform: translateY(-3px);
	background: rgba(255, 255, 255, 0.08);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}

/* Ícone (preto → branco) */
.product-icon {
	width: 84px;
	height: 84px;
	object-fit: contain;
	filter: invert(1) brightness(2) contrast(1.1); /* deixa branco nítido */
	opacity: 0.95;
}

/* Info */
.product-title {
	margin: 0 0 6px;
	font-weight: 800;
	color: var(--yellow);
	font-size: clamp(18px, 2vw, 22px);
}
.product-desc {
	margin: 0;
	font-size: var(--fz-btn-sm);
	opacity: 0.95;
}

/* Ação: preço (imagem) + botão */
.product-action {
	display: grid;
	justify-items: center;
	align-items: center;
	gap: 8px;
}
.product-price {
	width: 160px; /* ajuste de tamanho padrão */
	height: auto;
	display: block;
}
.product-cta {
	width: auto; /* exceção: não 100% no desktop */
	white-space: nowrap;
	padding-inline: 18px;
	font-size: clamp(14px, 1.8vw, 16px);
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

/* Responsivo */
@media (max-width: 900px) {
	.product-price {
		width: 140px;
	}
}

@media (max-width: 768px) {
	.product-row {
		grid-template-columns: 1fr; /* empilha */
		text-align: center;
		gap: 10px;
	}
	.product-icon {
		margin-inline: auto; /* ícone acima, centralizado */
		width: 80px;
		height: 80px;
	}
	.product-action {
		justify-items: stretch; /* preço centralizado, botão full */
	}
	.product-price {
		margin: 4px auto 0; /* centraliza a imagem de preço */
		width: 60%;
	}
	.product-cta {
		width: 100%; /* botão cheio na linha */
	}
}

.sticky-cta {
	transition: transform 0.25s ease, opacity 0.25s ease;
}

.sticky-cta.changed {
	transform: scale(1.05);
	opacity: 0.85;
}

.product-meta {
	margin-top: 6px;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.8);
	display: flex;
	align-items: center;
	gap: 6px;
	text-align: center;
}

.product-meta .time {
	display: flex;
	align-items: center;
	gap: 4px;
	white-space: nowrap;
}

.product-time {
	font-size: 0.9rem;
	font-weight: 500;
	margin: 4px 0 6px;
	opacity: 0.3;
}

/* estado fechado */
.faq-answer {
	max-height: 0;
	overflow: hidden;
	padding: 0 18px;
	opacity: 0;
	transform: translateY(8px);
	transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.28s ease 0.1s, /* leve atraso p/ suavizar */ transform 0.28s ease 0.1s;
}

/* aberto */
.faq-item.active .faq-answer {
	max-height: 600px; /* grande o bastante p/ seu maior item */
	padding: 0 18px 18px;
	opacity: 1;
	transform: translateY(0);
}

/* opcional: fade no texto interno também (caso tenha conteúdos maiores) */
.faq-answer > * {
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 0.28s ease 0.12s, transform 0.28s ease 0.12s;
}
.faq-item.active .faq-answer > * {
	opacity: 1;
	transform: translateY(0);
}

/* acessibilidade: reduz movimento */
@media (prefers-reduced-motion: reduce) {
	.faq-answer,
	.faq-answer > * {
		transition: opacity 0.2s ease;
		transform: none;
	}
}

/* ===== Comparativo de Oferta ===== */
.oferta-compare {
	margin: 18px auto 28px;
	max-width: 900px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 14px;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
}

.oferta-compare .compare-head,
.oferta-compare .compare-row {
	display: grid;
	grid-template-columns: 1.2fr 2.2fr 1fr 1fr 1.2fr;
	gap: 12px;
	align-items: center;
	padding: 14px 16px;
}

.oferta-compare .compare-head {
	background: rgba(0, 0, 0, 0.15);
	font-weight: 700;
	color: #fff;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 0.9rem;
}

.oferta-compare .compare-row {
	background: rgba(255, 255, 255, 0.06);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.oferta-compare .compare-row.highlight {
	position: relative;
	background: linear-gradient(135deg, rgba(251, 194, 34, 0.18), rgba(250, 118, 39, 0.12));
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}

.oferta-compare .tag {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px 10px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.85rem;
	white-space: nowrap;
}

.oferta-compare .tag-outline {
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.35);
	background: transparent;
}

.oferta-compare .tag-solid {
	color: var(--dark-blue-text);
	background: linear-gradient(135deg, #fbc222, #fa7627);
	border: 1px solid rgba(255, 255, 255, 0.25);
}

.oferta-compare .price {
	font-weight: 700;
	color: #fff;
}
.oferta-compare .price-strong {
	color: var(--dark-blue-text);
	background: #fff;
	padding: 4px 8px;
	border-radius: 8px;
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
	display: inline-block;
}

.oferta-compare .save {
	color: #3b6d05; /* verde de sucesso */
	font-weight: 700;
}
.oferta-compare .save small {
	font-weight: 600;
	opacity: 0.9;
}

.oferta-compare .muted {
	opacity: 0.6;
}

.oferta-compare .compare-note {
	margin: 8px 16px 16px;
	font-size: 0.85rem;
	opacity: 0.9;
}

/* Responsivo */
@media (max-width: 900px) {
	.oferta-compare .compare-head,
	.oferta-compare .compare-row {
		grid-template-columns: 1fr 1fr; /* empilha em blocos */
		gap: 8px 12px;
	}
	.oferta-compare .compare-head span:nth-child(n + 3) {
		display: none;
	}
	.oferta-compare .compare-row span:nth-child(3),
	.oferta-compare .compare-row span:nth-child(4),
	.oferta-compare .compare-row span:nth-child(5) {
		grid-column: 1 / -1; /* ocupar largura total */
	}
}

.garantia-selo {
	flex-direction: column;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin: 20px auto;
	max-width: 500px;
	text-align: left;
}

.garantia-img {
	width: 64px;
	height: 64px;
	object-fit: contain;
}

.garantia-text {
	font-size: 1rem;
	line-height: 1.4;
}

/* Efeito base dos botões */
.btn {
	position: relative;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hover: brilho */
.btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 0 18px rgba(7, 152, 26, 0.65); /* glow amarelo */
}

/* Pulso suave automático */
@keyframes pulse-glow {
	0%,
	100% {
		box-shadow: 0 0 0 rgba(251, 194, 34, 0);
	}
	50% {
		box-shadow: 0 0 20px rgba(5, 166, 75, 0.55);
	}
}

.btn {
	animation: pulse-glow 10s infinite;
}
.footer-avatars {
	display: flex;
	justify-content: center;
	gap: 18px;
	margin-top: 14px;
}

.footer-avatar {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.footer-avatar:hover {
	transform: scale(1.05);
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}

.beneficios-visual {
	margin: 20px auto 10px;
	max-width: 500px;
	text-align: center;
}

.beneficios-mockup {
	width: 100%;
	height: auto;
	border-radius: 12px;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
	transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.beneficios-mockup:hover {
	transform: scale(1.03);
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35);
}
.video-preview {
	margin: 40px auto;
	text-align: center;
	color: #fff;
}

.video-title {
	font-size: 1.4rem;
	margin-bottom: 16px;
	color: #f5ab4a; /* amarelo destaque */
}

.video-container {
	position: relative;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	aspect-ratio: 16 / 9; /* navegadores modernos */
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

#combo-especial,
#combo-especial-hero {
	padding-bottom: 60px;
	padding-top: 60px;
	color: white;
}

/* Fundo translúcido dourado para o combo */
.combo-bg {
	position: relative;
	background: linear-gradient(135deg, rgba(56, 6, 193, 0) 0%, rgba(2, 10, 86, 0.72) 40%, rgba(5, 190, 227, 0) 100%);
	color: var(--dark-blue-text);
	overflow: hidden;
}
.combo-bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0) 60%);
	mix-blend-mode: overlay;
	pointer-events: none;
}

/* Lista enxuta, estilo “card leve” */
.combo-list {
	list-style: none;
	margin: var(--space-md) auto var(--space-md);
	padding: 0;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(3, 1fr);
}
.combo-list li {
	background: rgba(255, 255, 255, 0.08);
	border-radius: 12px;
	padding: 12px 14px;
	font-weight: 700;
	color: white;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
@media (max-width: 900px) {
	.combo-list {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 560px) {
	.combo-list {
		grid-template-columns: 1fr;
	}
}

/* Brinde destacado */
.combo-gift {
	margin: var(--space-sm) 0 var(--space-md);
}
.gift-pill {
	display: inline-block;
	background: linear-gradient(180deg, #fdd35a, #f5ab4a);
	color: var(--dark-blue-text);
	border-radius: 10px;
	padding: 10px 18px;
	font-weight: 900;
	letter-spacing: 0.3px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18), inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
.gift-note {
	display: block;
	margin-top: 6px;
	opacity: 0.9;
	font-size: var(--fz-small);
}

/* Bloco de preço segue tua “valor-img” e “pricing-note” */
.combo-price .valor-img {
	max-width: 420px;
}

/* ===== Comparativo: layout mobile (coluna única) ===== */
@media (max-width: 640px) {
	.oferta-compare {
		width: 100%;
	}

	/* esconde cabeçalho */
	.oferta-compare .compare-head {
		display: none;
	}

	/* cada linha = cartão vertical */
	.oferta-compare .compare-row {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		margin: 14px 0;
		padding: 14px 16px;
		border-radius: 12px;
		background: rgba(255, 255, 255, 0.08);
	}

	/* spans empilhados, full width */
	.oferta-compare .compare-row > span {
		display: block;
		width: 100%;
		text-align: center;
		line-height: 1.35;
		word-break: break-word;
	}

	/* espaçamento entre grupos de preços e economia */
	.oferta-compare .compare-row .price + .price {
		margin-top: 4px;
	}

	.oferta-compare .compare-row .save {
		margin-top: 8px;
	}

	.oferta-compare .compare-row.highlight {
		background: rgba(255, 255, 255, 0.12);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
	}

	/* reforços de tipografia */
	.oferta-compare .price-strong {
		font-weight: 800;
	}

	.oferta-compare .save small {
		font-weight: 600;
		opacity: 0.9;
	}

	.oferta-compare .compare-note {
		margin-top: 12px;
		font-size: var(--fz-small);
	}
}
