/* -----------------------------------------------------------------------------
PÁGINA: LUNA AI. Base clara com o azul da marca da Luna e a grade de "pixels"
arredondados do símbolo como elemento gráfico. Kanit nos títulos, por ser a
fonte mais próxima do logotipo.
O visual do hero (.lunaVisual, .lunaSimbolo, .lunaCard) fica em estilo.css.
------------------------------------------------------------------------------*/
:root {
	--luna-azul:        #0b72b9;
	--luna-azul-rgb:    11, 114, 185;
	--luna-azul-escuro: #07508a;
	--luna-pixel: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Crect x='3' y='3' width='20' height='20' rx='5' fill='%230b72b9'/%3E%3C/svg%3E");
	--luna-pixel-branco: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Crect x='3' y='3' width='20' height='20' rx='5' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* Cabeçalho: o padrão do site é transparente com logo e links brancos sobre heros
   escuros. Como o hero da Luna é claro, nesta página usamos o logo colorido e
   links escuros desde o topo (js.js aplica a cor inline no scroll, daí o !important). */
@media (min-width: 769px) {
	#header .logoFull {
		display: none !important;
	}
	#header .logo550px.visible-xs {
		display: block !important;
	}
	#header nav > ul > li > a {
		color: var(--azul-800) !important;
	}
	#header nav > ul > li > a:hover {
		color: var(--luna-azul) !important;
	}
}

/* Botões */
.lunaBotao {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	background: var(--luna-azul);
	color: #fff !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 14px;
	padding: 16px 30px;
	border-radius: 8px;
	text-decoration: none !important;
	box-shadow: 0px 14px 34px rgba(var(--luna-azul-rgb), 0.35);
	transition: background .2s ease, transform .2s ease, box-shadow .2s ease;
}
.lunaBotao i {
	font-size: 20px;
}
.lunaBotao:hover {
	background: var(--luna-azul-escuro);
	transform: translateY(-2px);
	box-shadow: 0px 18px 40px rgba(var(--luna-azul-rgb), 0.5);
}
.lunaBotaoClaro {
	background: #fff;
	color: var(--luna-azul) !important;
	box-shadow: 0px 14px 34px rgba(0, 0, 0, 0.2);
}
.lunaBotaoClaro:hover {
	background: var(--azul-50);
	box-shadow: 0px 18px 40px rgba(0, 0, 0, 0.28);
}
.lunaBotaoSecundario {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--luna-azul) !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 14px;
	padding: 16px 10px;
	text-decoration: none !important;
}
.lunaBotaoSecundario i {
	transition: transform .2s ease;
}
.lunaBotaoSecundario:hover i {
	transform: translateY(3px);
}

/* Hero */
.lunaHero {
	position: relative;
	isolation: isolate; /* deixa o mix-blend-mode do logo enxergar o gradiente */
	background: linear-gradient(160deg, #fff 0%, var(--azul-50) 60%, var(--azul-100) 130%);
	padding: 170px 0px 120px 0px;
	overflow: hidden;
}
.lunaHero::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: 65%;
	height: 100%;
	background-image: var(--luna-pixel);
	background-size: 26px 26px;
	opacity: 0.07;
	-webkit-mask-image: radial-gradient(ellipse at 70% 55%, #000 0%, transparent 70%);
	mask-image: radial-gradient(ellipse at 70% 55%, #000 0%, transparent 70%);
	pointer-events: none;
	z-index: -1;
}
.lunaHeroGrid {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.lunaHeroConteudo {
	flex: 1 1 560px;
    margin-right: 110px;
}
/* o PNG tem respiro em volta e fundo branco sólido: recorte + multiply */
.lunaHeroLogo {
	display: block;
	width: 380px;
	aspect-ratio: 2.6 / 1;
	object-fit: cover;
	mix-blend-mode: multiply;
	margin: -26px 0px 6px -54px;
}
.lunaHeroTitulo {
	color: var(--azul-900);
	font-family: 'Kanit', sans-serif;
	font-weight: 700;
	font-size: 50px;
	line-height: 1.1;
	margin: 0px 0px 22px 0px;
}
.lunaHeroTitulo span {
	color: var(--luna-azul);
}
.lunaHeroTexto {
	color: var(--cinza-600);
	font-size: 18px;
	line-height: 1.7;
	max-width: 540px;
	margin: 0px 0px 34px 0px;
}
.lunaHeroAcoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}
.lunaHeroVisual {
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
}

/* Sobre: texto + conversa no WhatsApp */
.lunaConversa {
	padding: 110px 0px 100px 0px;
}
.lunaConversaGrid {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.lunaConversaTexto {
	flex: 1 1 auto;
	max-width: 560px;
}
.lunaIntroTitulo {
	color: var(--azul-900);
	font-family: 'Kanit', sans-serif;
	font-weight: 700;
	font-size: 38px;
	line-height: 1.15;
	margin: 0px 0px 20px 0px;
}
.lunaIntroTitulo span {
	color: var(--luna-azul);
}
.lunaConversaTexto > p {
	color: var(--cinza-600);
	font-size: 18px;
	line-height: 1.7;
	margin: 0px 0px 36px 0px;
}

/* Comparativo sem / com a Luna: duas faixas empilhadas */
.lunaAntesDepois {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 20px;
	max-width: 480px;
}
.lunaAntes,
.lunaDepois {
	border-radius: 14px;
	padding: 14px 18px;
	max-width: 400px;
}
.lunaAntes {
	background: var(--cinza-50);
	border: solid 1px var(--cinza-100);
}
.lunaDepois {
	background: var(--luna-azul);
	box-shadow: 0px 16px 34px rgba(var(--luna-azul-rgb), 0.3);
}
.lunaAntesRotulo {
	display: block;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 11px;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin-bottom: 8px;
	color: var(--cinza-500);
}
.lunaDepois .lunaAntesRotulo {
	color: var(--azul-200);
}
.lunaAntesDepois ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
    flex-direction: column;
}
.lunaAntesDepois li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 13px;
	white-space: nowrap;
}

.lunaAntes ul, .lunaDepois ul{
    gap: 10px;
    margin-top: 20px;
}

.lunaAntes li {
	color: var(--cinza-500);
	text-decoration-color: rgba(var(--azul-900-rgb), 0.25);
}
.lunaAntes li i {
	color: var(--cinza-400);
}

.lunaDepois li {
	color: #fff;
}
.lunaDepois li i {
	color: var(--azul-200);
}
.lunaAntesDepoisSeta {
	align-self: center;
	width: 28px;
	height: 28px;
	margin: -2px 0px -2px -80px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	border: solid 1px var(--azul-100);
	color: var(--luna-azul);
	font-size: 11px;
	box-shadow: 0px 6px 14px rgba(var(--azul-700-rgb), 0.1);
	position: relative;
	z-index: 1;
}

/* Celular com brilho, grade de pixels e anotações */
.lunaConversaVisual {
	flex: 0 0 auto;
	position: relative;
	isolation: isolate;
}
.lunaConversaVisual::before {
	content: '';
	position: absolute;
	inset: -40px -10px;
	background-image: var(--luna-pixel);
	background-size: 26px 26px;
	opacity: 0.09;
	-webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 65%);
	mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 65%);
	pointer-events: none;
	z-index: -1;
}
.lunaConversaVisual .lunaChat {
	width: 340px;
}

/* Títulos de seção */
.lunaSecaoTitulo {
	text-align: center;
	max-width: 640px;
	margin: 0px auto 50px auto;
}
.lunaEyebrow {
	display: inline-block;
	color: var(--luna-azul);
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 12px;
	letter-spacing: 2px;
	text-transform: uppercase;
	margin-bottom: 10px;
}
.lunaSecaoTitulo h2 {
	color: var(--azul-900);
	font-family: 'Kanit', sans-serif;
	font-weight: 700;
	font-size: 38px;
	line-height: 1.15;
	margin: 0;
}
.lunaSecaoTitulo p {
	color: var(--cinza-500);
	font-size: 17px;
	line-height: 1.6;
	margin: 14px 0px 0px 0px;
}
.lunaSecaoTituloClaro .lunaEyebrow {
	color: var(--azul-200);
}
.lunaSecaoTituloClaro h2 {
	color: #fff;
}

/* Exemplos de perguntas */
.lunaPerguntas {
	padding: 30px 0px 100px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.containerQuestions{
    width: 100%;
    max-width: 1200px;
    padding: 0px 15px;
}
.lunaPerguntasGrid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 380px));
	justify-content: center;
	gap: 20px;
}
.lunaPerguntaCard {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	background: #fff;
	border: solid 1px var(--azul-100);
	border-radius: 18px;
	padding: 28px 22px;
	box-shadow: 0px 14px 30px rgba(var(--azul-700-rgb), 0.07);
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.lunaPerguntaCard:hover {
	transform: translateY(-4px);
	border-color: var(--azul-200);
	box-shadow: 0px 20px 40px rgba(var(--azul-700-rgb), 0.12);
}
.lunaPerguntaIco {
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: var(--luna-azul);
	color: #fff;
	font-size: 19px;
	box-shadow: 0px 8px 18px rgba(var(--luna-azul-rgb), 0.3);
	margin-bottom: 6px;
}
.lunaPerguntaCard h3 {
	color: var(--azul-900);
	font-family: 'Kanit', sans-serif;
	font-weight: 500;
	font-size: 20px;
	margin: 0px 0px 6px 0px;
}
/* balão no estilo "mensagem enviada" */
.lunaBalao {
	align-self: stretch;
	background: var(--azul-50);
	border: solid 1px var(--azul-100);
	border-radius: 14px 14px 4px 14px;
	color: var(--azul-800);
	font-size: 14px;
	line-height: 1.45;
	padding: 10px 14px;
}

/* Como funciona */
.lunaComoFunciona {
	padding: 0px 0px 110px 0px;
}
.lunaPassosGrid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
	position: relative;
}
/* linha que liga os três passos */
.lunaPassosGrid::before {
	content: '';
	position: absolute;
	top: 28px;
	left: calc(16.66% + 28px);
	right: calc(16.66% + 28px);
	border-top: dashed 2px var(--azul-200);
	z-index: 0;
}
.lunaPasso {
	text-align: center;
	position: relative;
	z-index: 1;
	padding: 0px 10px;
}
.lunaPassoNum {
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 16px;
	background: var(--luna-azul);
	color: #fff;
	font-family: 'Kanit', sans-serif;
	font-weight: 700;
	font-size: 24px;
	box-shadow: 0px 0px 0px 8px #fff, 0px 12px 26px rgba(var(--luna-azul-rgb), 0.35);
	margin-bottom: 22px;
}
.lunaPasso h3 {
	color: var(--azul-900);
	font-family: 'Kanit', sans-serif;
	font-weight: 500;
	font-size: 21px;
	margin: 0px 0px 10px 0px;
}
.lunaPasso p {
	color: var(--cinza-600);
	font-size: 15px;
	line-height: 1.65;
	max-width: 300px;
	margin: 0px auto;
}

/* Diferenciais: faixa azul */
.lunaDiferenciais {
	position: relative;
	isolation: isolate;
	background: linear-gradient(135deg, var(--luna-azul) 0%, var(--luna-azul-escuro) 100%);
	padding: 100px 0px;
	overflow: hidden;
}
.lunaDiferenciais::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--luna-pixel-branco);
	background-size: 26px 26px;
	opacity: 0.06;
	-webkit-mask-image: linear-gradient(to right, #000 0%, transparent 45%, transparent 55%, #000 100%);
	mask-image: linear-gradient(to right, #000 0%, transparent 45%, transparent 55%, #000 100%);
	pointer-events: none;
	z-index: -1;
}
.lunaDiferenciaisGrid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.lunaDiferencialCard {
	background: rgba(255, 255, 255, 0.08);
	border: solid 1px rgba(255, 255, 255, 0.18);
	border-radius: 18px;
	padding: 30px 24px;
	transition: background .3s ease, transform .3s ease;
}
.lunaDiferencialCard:hover {
	background: rgba(255, 255, 255, 0.14);
	transform: translateY(-4px);
}
.lunaDiferencialIco {
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 12px;
	background: #fff;
	color: var(--luna-azul);
	font-size: 19px;
	margin-bottom: 18px;
}
.lunaDiferencialCard h3 {
	color: #fff;
	font-family: 'Kanit', sans-serif;
	font-weight: 500;
	font-size: 20px;
	margin: 0px 0px 8px 0px;
}
.lunaDiferencialCard p {
	color: var(--azul-100);
	font-size: 15px;
	line-height: 1.6;
	margin: 0;
}

/* FAQ */
.lunaFaq {
	padding: 100px 0px 60px 0px;
}
.lunaFaqLista {
	max-width: 820px;
	margin: 0px auto;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.lunaFaqItem {
	background: #fff;
	border: solid 1px var(--azul-100);
	border-radius: 14px;
	padding: 0px 24px;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.lunaFaqItem:hover,
.lunaFaqItem[open] {
	border-color: var(--azul-200);
	box-shadow: 0px 12px 28px rgba(var(--azul-700-rgb), 0.08);
}
.lunaFaqItem summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 22px 0px;
	cursor: pointer;
	list-style: none;
}
.lunaFaqItem summary::-webkit-details-marker {
	display: none;
}
.lunaFaqPergunta {
	color: var(--azul-900);
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 16px;
}
.lunaFaqToggle {
	flex: 0 0 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--azul-50);
	color: var(--luna-azul);
	font-size: 13px;
	transition: transform .25s ease, background .25s ease, color .25s ease;
}
.lunaFaqItem[open] .lunaFaqToggle {
	transform: rotate(45deg);
	background: var(--luna-azul);
	color: #fff;
}
.lunaFaqItem p {
	color: var(--cinza-600);
	font-size: 15px;
	line-height: 1.7;
	margin: 0px 0px 22px 0px;
}

/* CTA final */
.lunaCtaSecao {
	padding: 40px 0px 100px 0px;
}
.lunaCtaBanner {
	position: relative;
	isolation: isolate;
	background: linear-gradient(135deg, var(--luna-azul) 0%, var(--luna-azul-escuro) 100%);
	border-radius: 28px;
	padding: 70px 60px;
	text-align: center;
	overflow: hidden;
	box-shadow: 0px 30px 60px rgba(var(--luna-azul-rgb), 0.3);
}
.lunaCtaBanner::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: var(--luna-pixel-branco);
	background-size: 26px 26px;
	opacity: 0.07;
	-webkit-mask-image: radial-gradient(ellipse at 50% 120%, #000 0%, transparent 70%);
	mask-image: radial-gradient(ellipse at 50% 120%, #000 0%, transparent 70%);
	pointer-events: none;
	z-index: -1;
}
.lunaCtaConteudo {
	max-width: 620px;
	margin: 0px auto;
}
.lunaCtaAvatar {
	width: 76px;
	height: 76px;
	border-radius: 22px;
	box-shadow: 0px 0px 0px 6px rgba(255, 255, 255, 0.15);
	margin-bottom: 26px;
}
.lunaCtaBanner h2 {
	color: #fff;
	font-family: 'Kanit', sans-serif;
	font-weight: 700;
	font-size: 36px;
	margin: 0px 0px 14px 0px;
}
.lunaCtaBanner h2 span {
	color: var(--azul-200);
}
.lunaCtaBanner p {
	color: var(--azul-100);
	font-size: 17px;
	line-height: 1.6;
	margin: 0px 0px 34px 0px;
}

/* Mockup do chat no WhatsApp (home) */
.lunaChat {
	flex: 0 0 350px;
	position: relative;
	background: #0b141a;
	border: solid 10px var(--cinza-900);
	border-radius: 38px;
	overflow: hidden;
	box-shadow: 0px 40px 80px rgba(var(--azul-900-rgb), 0.35), 0px 0px 0px 1px rgba(var(--luna-azul-rgb), 0.25), 0px 0px 90px rgba(var(--luna-azul-rgb), 0.3);
}
.lunaChatHeader {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 18px 14px 18px;
	background: #1f2c34;
}
.lunaChatHeader img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
}
.lunaChatHeader strong {
	display: block;
	color: #e9edef;
	font-size: 15px;
}
.lunaChatHeader span {
	color: #8696a0;
	font-size: 12px;
}
.lunaChatCorpo {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 14px 22px 14px;
	min-height: 420px;
	background-color: #0b141a;
	background-image: radial-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 14px 14px;
}
.lunaMsg {
	max-width: 82%;
	padding: 8px 11px 6px 11px;
	border-radius: 10px;
	color: #e9edef;
	font-size: 14px;
	line-height: 1.45;
	box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
}
.lunaMsg b {
	color: #53bdeb;
	white-space: nowrap;
}
.lunaMsg small {
	display: block;
	text-align: right;
	margin-top: 2px;
	color: rgba(233, 237, 239, 0.6);
	font-size: 11px;
}
.lunaMsg small i {
	color: #53bdeb;
	margin-left: 2px;
}
.lunaMsgEu {
	align-self: flex-end;
	background: #005c4b;
	border-top-right-radius: 2px;
}
.lunaMsgLuna {
	align-self: flex-start;
	background: #202c33;
	border-top-left-radius: 2px;
}
.lunaDigitando {
	align-self: flex-start;
	display: inline-flex;
	gap: 4px;
	padding: 12px 14px;
	background: #202c33;
	border-radius: 10px;
	border-top-left-radius: 2px;
}
.lunaDigitando span {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #8696a0;
	animation: lunaPontos 1.2s infinite ease-in-out;
}
.lunaDigitando span:nth-child(2) { animation-delay: 0.15s; }
.lunaDigitando span:nth-child(3) { animation-delay: 0.3s; }
@keyframes lunaPontos {
	0%, 60%, 100% { transform: translateY(0); opacity: 0.5; }
	30% { transform: translateY(-4px); opacity: 1; }
}

/* Entrada das mensagens em sequência: js.js adiciona .lunaAnimar e, ao entrar na tela, .lunaAtiva.
   Sem JS a conversa aparece completa. */
.lunaAnimar .lunaMsg,
.lunaAnimar .lunaDigitando {
	opacity: 0;
	transform: translateY(12px);
}
.lunaAtiva .lunaMsg {
	animation: lunaEntrada 0.45s ease forwards;
}
.lunaAtiva .lunaDigitando {
	animation: lunaEntrada 0.45s ease forwards 3.9s;
}
.lunaAtiva .lunaChatCorpo > :nth-child(1) { animation-delay: 0.2s; }
.lunaAtiva .lunaChatCorpo > :nth-child(2) { animation-delay: 1s; }
.lunaAtiva .lunaChatCorpo > :nth-child(3) { animation-delay: 1.9s; }
.lunaAtiva .lunaChatCorpo > :nth-child(4) { animation-delay: 2.7s; }
.lunaAtiva .lunaChatCorpo > :nth-child(5) { animation-delay: 3.5s; }
@keyframes lunaEntrada {
	to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
	.lunaAnimar .lunaMsg,
	.lunaAnimar .lunaDigitando {
		opacity: 1;
		transform: none;
		animation: none !important;
	}
	.lunaDigitando span { animation: none; }
}

/* Visual: símbolo da Luna com cartões flutuantes.
   Fora da home por enquanto; reservado para o hero da página própria da Luna AI. */
.lunaVisual {
	flex: 0 0 420px;
	height: 400px;
	position: relative;
}
.lunaSimbolo {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 260px;
	height: 260px;
	transform: translate(-50%, -50%) rotate(-4deg);
	border-radius: 56px;
	overflow: hidden;
	box-shadow: 0px 40px 80px rgba(var(--luna-azul-rgb), 0.35), 0px 0px 0px 10px rgba(var(--luna-azul-rgb), 0.08), 0px 0px 0px 22px rgba(var(--luna-azul-rgb), 0.04);
}
.lunaSimbolo img {
	width: 100%;
	height: 100%;
	display: block;
}
.lunaCard {
	position: absolute;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(6px);
	border: solid 1px var(--azul-100);
	border-radius: 14px;
	padding: 10px 16px 10px 10px;
	color: var(--azul-800);
	font-family: 'Montserrat', sans-serif;
	font-weight: bold;
	font-size: 13px;
	white-space: nowrap;
	box-shadow: 0px 14px 30px rgba(var(--azul-700-rgb), 0.15);
	animation: lunaFlutuar 6s ease-in-out infinite;
}
.lunaCard span {
	width: 30px;
	height: 30px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	background: rgba(var(--luna-azul-rgb), 0.1);
	color: var(--luna-azul);
	font-size: 14px;
}
.lunaCard1 { top: 28px;    left: 0px; }
.lunaCard2 { top: 92px;    right: -6px;  animation-delay: -1.5s; }
.lunaCard3 { bottom: 86px; left: -14px;  animation-delay: -3s; }
.lunaCard4 { bottom: 24px; right: 18px;  animation-delay: -4.5s; }
.lunaCard4 span {
	background: rgba(37, 211, 102, 0.14);
	color: #1ea952;
}
@keyframes lunaFlutuar {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
	.lunaCard { animation: none; }
}

/* Responsivo */
@media (max-width: 1199px) {
	.lunaPerguntasGrid,
	.lunaDiferenciaisGrid {
		grid-template-columns: repeat(2, 1fr) !important;
	}
	.lunaPerguntaCard:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}
	/* respiro lateral em todas as seções da página */
	section[class^="luna"] > .container,
	.containerQuestions {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	/* os 110px do desktop apertam demais o título nessa faixa */
	.lunaHeroConteudo {
		margin-right: 40px;
	}
}
@media (max-width: 991px) {
	.lunaHero {
		padding: 150px 0px 90px 0px !important;
	}
	.lunaHeroGrid {
		flex-direction: column !important;
		gap: 50px !important;
	}
	.lunaHeroConteudo {
		flex: 1 1 auto !important;
		width: 100%;
		margin-right: 0px !important;
	}
	.lunaHeroVisual {
		width: 100%;
		justify-content: center !important;
	}
	.lunaPassosGrid {
		grid-template-columns: 1fr !important;
		gap: 40px !important;
	}
	.lunaPassosGrid::before {
		display: none;
	}
	.lunaConversaGrid {
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 50px !important;
	}
	.lunaConversaTexto {
		flex: 1 1 auto !important;
		max-width: 640px !important;
		min-width: 0;
		width: 100%;
		margin: 0px auto;
	}
	.lunaConversaVisual {
		display: flex;
		justify-content: center;
	}
	/* sem espaço lateral, as anotações sairiam por cima da conversa */
	.lunaNota {
		display: none !important;
	}
}
@media (max-width: 767px) {
	section[class^="luna"] > .container,
	.containerQuestions {
		padding-left: 20px !important;
		padding-right: 20px !important;
	}

	.lunaAntesDepoisSeta{
		margin: 0;
		align-self: center;
	}
	.lunaHero {
		padding: 130px 0px 70px 0px !important;
	}
	.lunaHeroLogo {
		width: 280px !important;
		margin: -19px 0px 4px -40px !important;
	}
	.lunaHeroTitulo {
		font-size: 34px !important;
	}
	.lunaHeroTexto {
		font-size: 16px !important;
	}
	.lunaHeroAcoes .lunaBotao {
		width: 100%;
		justify-content: center;
	}
	.lunaHeroAcoes {
		justify-content: center;
	}
	.lunaConversa {
		padding: 60px 0px 70px 0px !important;
	}
	.lunaIntroTitulo {
		font-size: 28px !important;
	}
	.lunaConversaTexto > p {
		font-size: 16px !important;
	}
	.lunaConversaVisual {
		padding: 0px !important;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	.lunaConversaVisual .lunaChat {
		width: 100% !important;
		max-width: 350px;
	}
	.lunaSecaoTitulo {
		margin-bottom: 36px !important;
	}
	.lunaSecaoTitulo h2 {
		font-size: 28px !important;
	}
	.lunaPerguntas {
		padding: 10px 0px 70px 0px !important;
	}
	.lunaPerguntasGrid,
	.lunaDiferenciaisGrid {
		grid-template-columns: 1fr !important;
	}
	.lunaComoFunciona {
		padding-bottom: 70px !important;
	}
	.lunaDiferenciais {
		padding: 70px 0px !important;
	}
	.lunaFaq {
		padding: 70px 0px 40px 0px !important;
	}
	.lunaFaqPergunta {
		font-size: 14px !important;
	}
	.lunaCtaSecao {
		padding: 20px 0px 60px 0px !important;
	}
	.lunaCtaBanner {
		padding: 44px 24px !important;
		border-radius: 20px !important;
	}
	.lunaCtaBanner h2 {
		font-size: 26px !important;
	}
	.lunaCtaBanner .lunaBotao {
		width: 100%;
		justify-content: center;
	}
}