/* ============================================================
   MGA Energy — Motion System (global) · v2
   Reveals on-scroll, hover polish, count-ups, botões no modelo
   MGA (gradiente laranja + shine) e menu fixo inteligente.
   Aditivo e inerte: só age onde as classes/data-attrs existem.
   ============================================================ */

/* ---------- Reveal on-scroll ---------- */
.mga-fx {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1);
	transition-delay: var(--mga-d, 0s);
	will-change: opacity, transform;
}
.mga-fx[data-fx="left"]  { transform: translateX(-36px); }
.mga-fx[data-fx="right"] { transform: translateX(36px); }
.mga-fx[data-fx="zoom"]  { transform: scale(.93); }
.mga-fx[data-fx="fade"]  { transform: none; }
.mga-fx.mga-in { opacity: 1; transform: none; }

/* ---------- Botões: modelo MGA (gradiente laranja pill + shine) ---------- */
.botao {
	background: linear-gradient(135deg,#fbb733,#f7a81b) !important;
	color: #16224a !important;
	border: 0 !important;
	border-radius: 50px !important;
	font-weight: 800 !important;
	position: relative;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(247,168,27,.26);
}
.botao .icoSvg path { fill: #16224a !important; }
.botao::after {
	content: '';
	position: absolute;
	top: 0; left: -80%;
	width: 50%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
	transform: skewX(-22deg);
	animation: mgaShineBtn 5s ease-in-out infinite;
	pointer-events: none;
}
@keyframes mgaShineBtn { 0%, 55% { left: -80%; } 100% { left: 135%; } }

/* Exceções: containers de fundo laranja → botão navy (contraste) */
#sectionCta1 .botao,
#pgMobilidadeEletrica .sectionBarraConversao .botao {
	background: linear-gradient(135deg,#1e2d59,#16224a) !important;
	color: #ffffff !important;
	box-shadow: 0 12px 30px rgba(16,24,42,.28);
}

/* Botões utilitários pequenos (mensagens de formulário) mantêm proporção */
.moduloFormNewsletter .mensagem .botoes .botao,
.moduloFormContato .mensagem .botoes .botao,
.formOrcamento .formMensagem .botoes .botao { height: 44px; box-shadow: none; }

/* Mobilidade: links-botão dos cards e CTAs entram no modelo (id p/ vencer o CSS da página) */
#pgMobilidadeEletrica .gridEscolha .botao,
#pgMobilidadeEletrica .blocoModeloDestaque .botao,
#pgMobilidadeEletrica .sectionConsultoriaMobilidade .blocoTexto .botao,
#pgMobilidadeEletrica .sectionBeneficiosMobilidade .botao,
#pgMobilidadeEletrica .sectionCarregamentoMobilidade .botao,
#pgMobilidadeEletrica .sectionProcessoMobilidade .botao,
#pgMobilidadeEletrica .sectionDuvidasMobilidade .botao,
#pgMobilidadeEletrica .sectionCtaMobilidade .botao,
#pgMobilidadeEletrica .sectionHeroMobilidade .botoes .botaoPrincipal {
	background: linear-gradient(135deg,#fbb733,#f7a81b) !important;
	color: #16224a !important;
	border-radius: 50px !important;
}
#pgMobilidadeEletrica .gridCenarios article a,
#pgMobilidadeEletrica .boxContatoHero a,
#pgMobilidadeEletrica .barraFixaMobilidade a {
	background: linear-gradient(135deg,#fbb733,#f7a81b) !important;
	color: #16224a !important;
	border-radius: 50px !important;
	position: relative;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(247,168,27,.26);
}
#pgMobilidadeEletrica .gridCenarios article a::after,
#pgMobilidadeEletrica .boxContatoHero a::after,
#pgMobilidadeEletrica .barraFixaMobilidade a::after {
	content: '';
	position: absolute;
	top: 0; left: -80%;
	width: 50%; height: 100%;
	background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
	transform: skewX(-22deg);
	animation: mgaShineBtn 5s ease-in-out infinite;
	pointer-events: none;
}
/* Ghost do hero da mobilidade continua ghost (secundário) */
#pgMobilidadeEletrica .sectionHeroMobilidade .botoes .botaoSecundario {
	background: rgba(255,255,255,.08) !important;
	color: #ffffff !important;
	border: 2px solid rgba(255,255,255,.34) !important;
	border-radius: 50px !important;
	box-shadow: none;
}
#pgMobilidadeEletrica .sectionHeroMobilidade .botoes .botaoSecundario::after { display: none; }

/* ---------- Formulário de orçamento: vidro lapidado MGA (hero da home + popup) ---------- */
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento {
	background: linear-gradient(135deg, rgba(255,255,255,.30) 0%, rgba(255,255,255,.10) 40%, rgba(255,255,255,.20) 60%, rgba(255,255,255,.06) 100%);
	-webkit-backdrop-filter: blur(32px) saturate(1.8) brightness(1.12);
	backdrop-filter: blur(32px) saturate(1.8) brightness(1.12);
	border: 1.5px solid rgba(255,255,255,.5);
	border-radius: 24px;
	padding: 30px 30px 24px;
	box-shadow:
		0 2px 0 rgba(255,255,255,.55) inset,
		0 -1px 0 rgba(255,255,255,.12) inset,
		1px 0 0 rgba(255,255,255,.3) inset,
		-1px 0 0 rgba(255,255,255,.12) inset,
		0 18px 52px rgba(3,8,24,.35),
		0 4px 14px rgba(3,8,24,.22);
	position: relative;
	overflow: hidden;
}
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento::before {
	content: '';
	position: absolute;
	bottom: 0; right: 0;
	width: 46%; height: 42%;
	background: linear-gradient(315deg, rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 60%);
	pointer-events: none;
}
/* Popup: form SÓLIDO navy (sem overlay/glass) */
#formularioPopUp .divFormulario .formOrcamento {
	border-radius: 0 24px 24px 0;
	height: 100%;
	justify-content: center;
	background: linear-gradient(155deg, #1e2d59 0%, #10182a 100%);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	border-color: rgba(255,255,255,.18);
	box-shadow: 0 2px 0 rgba(255,255,255,.08) inset, 0 18px 52px rgba(3,8,24,.4);
}
#formularioPopUp .divFormulario .formOrcamento .form label { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
/* Popup: lado esquerdo redesenhado (painel navy + raios + foto de energia solar) */
#formularioPopUp .divImagem {
	position: relative;
	overflow: hidden;
	border-radius: 25px 0 0 25px;
	background: radial-gradient(520px 380px at 82% -12%, rgba(44,74,154,.55) 0%, rgba(44,74,154,0) 60%), linear-gradient(155deg, #1e2d59 0%, #0d1428 100%);
	display: flex;
}
#formularioPopUp .mgaPopupRaios {
	position: absolute;
	left: -42%; top: -52%;
	width: 150%;
	aspect-ratio: 1/1;
	border-radius: 50%;
	background: repeating-conic-gradient(from 6deg at 50% 50%, rgba(247,168,27,.1) 0deg 5deg, rgba(247,168,27,0) 5deg 14deg);
	-webkit-mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.45) 44%, transparent 68%);
	mask-image: radial-gradient(circle at 50% 50%, #000 0%, rgba(0,0,0,.45) 44%, transparent 68%);
	animation: mgaRaysSpinPopup 130s linear infinite;
	pointer-events: none;
}
@keyframes mgaRaysSpinPopup { to { transform: rotate(360deg); } }
#formularioPopUp .mgaPopupConteudo {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 32px 30px 0;
}
#formularioPopUp .mgaPopupTag {
	align-self: flex-start;
	background: linear-gradient(135deg, rgba(251,183,51,.88), rgba(224,143,16,.88));
	border: 1px solid rgba(255,255,255,.35);
	box-shadow: 0 2px 8px rgba(3,8,24,.25), 0 1px 0 rgba(255,255,255,.35) inset;
	color: #ffffff;
	font-size: 11.5px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
	border-radius: 50px;
	padding: 6px 16px;
}
#formularioPopUp .mgaPopupTitulo {
	color: #ffffff;
	font-size: 27px;
	font-weight: 800;
	line-height: 1.22;
	margin-top: 16px;
	text-shadow: 0 1px 8px rgba(3,8,24,.3);
}
#formularioPopUp .mgaPopupTitulo em {
	font-style: normal;
	background: linear-gradient(92deg, #fbb733, #ffca5f);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
#formularioPopUp .mgaPopupSub {
	color: rgba(255,255,255,.75);
	font-size: 14.5px;
	font-weight: 500;
	line-height: 1.6;
	margin-top: 12px;
}
#formularioPopUp .mgaPopupFoto {
	margin-top: auto;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
#formularioPopUp .mgaPopupFoto::before {
	content: '';
	position: absolute;
	left: 50%; bottom: -30px;
	transform: translateX(-50%);
	width: 300px; height: 200px;
	border-radius: 50%;
	background: rgba(247,168,27,.22);
	filter: blur(55px);
	pointer-events: none;
}
#formularioPopUp .mgaPopupFoto img {
	position: relative;
	display: block;
	width: 76%;
	height: auto;
	filter: drop-shadow(0 14px 30px rgba(0,0,0,.4));
}
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .divHeaderMobile { display: none !important; }
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .divHeaderConsorcio {
	background: linear-gradient(135deg, rgba(251,183,51,.88), rgba(224,143,16,.88));
	border: 1px solid rgba(255,255,255,.35);
	box-shadow: 0 2px 8px rgba(3,8,24,.25), 0 1px 0 rgba(255,255,255,.35) inset;
	height: auto;
	min-height: 34px;
	padding: 7px 20px;
	margin: 0 auto 16px;
}
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .divHeaderConsorcio p { color: #ffffff; }
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .titulo {
	color: #ffffff;
	font-size: 18px;
	line-height: 1.5;
	text-shadow: 0 1px 8px rgba(3,8,24,.25);
	padding-bottom: 16px;
	margin-bottom: 20px;
	border-bottom: 1px solid rgba(255,255,255,.22);
}
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .titulo b { color: #ffd28f; }
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .titulo br { display: none; }
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .form label {
	position: relative;
	display: block;
	width: 100%;
	padding: 26px 14px 9px 46px;
	background: rgba(255,255,255,.12);
	border: 1.5px solid rgba(255,255,255,.28);
	border-radius: 12px;
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
}
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .form label:nth-child(n+2) { margin-top: 14px; }
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .form label:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.42); }
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .form label:focus-within {
	border-color: rgba(251,183,51,.75);
	background: rgba(255,255,255,.18);
	box-shadow: 0 0 0 3px rgba(247,168,27,.15), 0 0 12px rgba(247,168,27,.1);
}
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .form label::before {
	position: absolute;
	top: 9px; left: 46px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: rgba(255,255,255,.68);
	pointer-events: none;
	transition: color .2s ease;
}
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .form label:focus-within::before { color: rgba(255,210,143,.95); }
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .form label:has(input[name="orcamentoNome"])::before { content: 'Nome completo'; }
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .form label:has(input[name="orcamentoTelefone"])::before { content: 'WhatsApp / Telefone'; }
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .form label:has(input[name="orcamentoCidade"])::before { content: 'Cidade \2013  UF'; }
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .form label:has(input[name="orcamentoEnergia"])::before { content: 'Valor da conta de luz'; }
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .form label .icone {
	position: absolute;
	left: 13px; bottom: 8px;
	width: 24px; height: 26px;
	background: transparent;
	border-radius: 0;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .form label .icone .icoSvg path { fill: rgba(255,255,255,.55); transition: fill .2s ease; }
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .form label:focus-within .icone .icoSvg path { fill: #fbb733; }
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .form label input,
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .form label select {
	display: block;
	width: 100%;
	height: 24px;
	border: 0 !important;
	background: transparent;
	border-radius: 0;
	padding: 0;
	text-indent: 0;
	font-size: 15px;
	font-weight: 600;
	color: #ffffff;
}
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .form label input:focus,
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .form label select:focus { outline: none; box-shadow: none; }
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .form label input::placeholder { color: rgba(255,255,255,.4); font-weight: 500; }
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .form label input:-webkit-autofill {
	-webkit-text-fill-color: #ffffff;
	-webkit-box-shadow: 0 0 0 44px #1e2d59 inset;
	caret-color: #ffffff;
	transition: background-color 99999s ease-in-out 0s;
}
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .labelInput.campoComErro {
	border-color: rgba(255,120,120,.65) !important;
	background: rgba(255,90,90,.12);
}
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .labelInput.campoComErro .icone { background: transparent !important; }
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .labelInput.campoComErro .icone .icoSvg path { fill: #ffb0b0; }
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .labelInput.campoComErro:after {
	left: 46px;
	color: #ffb0b0;
	font-size: 11px;
	text-shadow: 0 1px 4px rgba(0,0,0,.25);
}
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .botoes { margin-top: 22px; }
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .botoes .botao {
	height: 56px;
	box-shadow: 0 10px 26px rgba(3,8,24,.3), 0 1px 0 rgba(255,255,255,.28) inset;
}
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .textoFim { margin-top: 18px; font-size: 13.5px; color: rgba(255,255,255,.8); line-height: 1.55; }
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .textoFim b { color: #ffd28f; }
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .avisoGoogle {
	margin-top: 16px;
	padding-top: 13px;
	border-top: 1px solid rgba(255,255,255,.18);
	font-size: 11px;
	color: rgba(255,255,255,.55);
	line-height: 1.55;
	text-align: center;
}
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .avisoGoogle a { color: rgba(255,210,143,.9); }
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .formLoading p,
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .formMensagem .titulo { color: #ffffff; border: 0; padding-bottom: 0; }
:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .formMensagem .descricao { color: rgba(255,255,255,.78); }
#formularioPopUp .formularioPopUpFechar { z-index: 3; }

@media screen and (max-width: 599px) {
	:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento {
		padding: 24px 18px 20px;
		background: #16224a;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		border: 1.5px solid rgba(255,255,255,.18);
		box-shadow: 0 2px 0 rgba(255,255,255,.08) inset, 0 16px 48px rgba(0,0,0,.22);
	}
	:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .form label { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); }
	:is(#sectionBanner.mgaHero, #formularioPopUp) .formOrcamento .form label input::placeholder { color: rgba(255,255,255,.55); }
}

/* ---------- Menu fixo inteligente: fluidez ---------- */
@media screen and (min-width: 1000px) {
	body #menuFixed {
		transition: transform .5s cubic-bezier(.22,.61,.36,1), opacity .38s ease;
		opacity: 0;
		will-change: transform, opacity;
	}
	body.menuFixo #menuFixed { opacity: 1; }
	body #menuFixed .mainHeader { box-shadow: 0 12px 34px rgba(4,10,30,.4); }
	body #menuFixed .mainHeader .linha1 { display: none; } /* versão compacta no fixo */
}

/* ---------- Hover polish (só onde há mouse) ---------- */
@media (hover: hover) {

	.botao { transition: transform .22s ease, box-shadow .22s ease, background-color .22s ease, color .22s ease, filter .22s ease; }
	.botao:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(247,168,27,.38); filter: brightness(1.03); }
	#sectionCta1 .botao:hover,
	#pgMobilidadeEletrica .sectionBarraConversao .botao:hover { box-shadow: 0 18px 40px rgba(16,24,42,.4); }
	#pgMobilidadeEletrica .gridCenarios article a,
	#pgMobilidadeEletrica .boxContatoHero a,
	#pgMobilidadeEletrica .barraFixaMobilidade a { transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; }
	#pgMobilidadeEletrica .gridCenarios article a:hover,
	#pgMobilidadeEletrica .boxContatoHero a:hover,
	#pgMobilidadeEletrica .barraFixaMobilidade a:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(247,168,27,.38); filter: brightness(1.03); }

	#sectionPitch .cardDiferencial,
	#sectionComoFunciona .divCard,
	#sectionSobre .divCards .divCard,
	#sectionDiferencial .divCard,
	#sectionNumeros .divCard,
	#sectionBlog .divCard { transition: transform .3s ease, box-shadow .3s ease; }

	#sectionPitch .cardDiferencial:hover,
	#sectionComoFunciona .divCard:hover,
	#sectionSobre .divCards .divCard:hover,
	#sectionDiferencial .divCard:hover,
	#sectionNumeros .divCard:hover,
	#sectionBlog .divCard:hover { transform: translateY(-6px); box-shadow: 0 18px 40px rgba(13,20,40,.14); }

	#sectionDepoimento .cardDepoimentoVideo { transition: transform .3s ease; }
	#sectionDepoimento .cardDepoimentoVideo:hover { transform: translateY(-5px); }
}

/* ---------- Acessibilidade: reduz movimento ---------- */
@media (prefers-reduced-motion: reduce) {
	.mga-fx { opacity: 1 !important; transform: none !important; transition: none !important; }
	.mgaHeroRays, .mgaHeroGlow, .mgaHeroScroll span, .mgaHeroEyebrow span,
	.mgaJornadaRaios, .mgaJornadaSol, .mgaParcelasRays,
	.mgaBtnLaranja::after, .botao::after,
	#pgMobilidadeEletrica .gridCenarios article a::after,
	#pgMobilidadeEletrica .boxContatoHero a::after,
	#pgMobilidadeEletrica .barraFixaMobilidade a::after { animation: none !important; }
}