/* Landing pages da Mais Economia Solar. Base comum às três páginas (residencial, empresas, eletroposto).
   Cores tiradas da logo de 28/10/2026; revisar quando chegar a identidade completa em PDF. */
:root{
  --tinta:#141A22;
  --tinta-2:#3A4452;
  --suave:#5E6977;
  --sol:#F25C14;
  --ambar:#FF9F1C;
  --luz:#FFD23F;
  --ceu:#EAF0F5;
  --linha:#D9E1E9;
  --branco:#FFFFFF;
  --ok:#17663A;
  --gradiente-sol:linear-gradient(90deg,#F25C14 0%,#FF9F1C 60%,#FFD23F 100%);
  --raio:14px;
  --raio-p:8px;
  --largura:1120px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--branco);color:var(--tinta);font-family:"Outfit",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:17px;line-height:1.5;font-weight:400}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--ambar);outline-offset:2px;border-radius:4px}
.wrap{max-width:var(--largura);margin:0 auto;padding:0 16px}
@media (min-width:720px){.wrap{padding:0 28px}}

/* Topo */
.topo{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:14px;padding-bottom:14px}
.topo img{height:40px;width:auto}
@media (min-width:720px){.topo img{height:52px}}
.topo a.zap{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600;text-decoration:none;color:var(--tinta);border:1.5px solid var(--linha);border-radius:999px;padding:8px 14px 8px 10px}
.topo a.zap:hover{border-color:#25D366}
.ico-zap{flex:0 0 22px;width:22px;height:22px;background:#25D366;-webkit-mask:url(whatsapp.svg) center/contain no-repeat;mask:url(whatsapp.svg) center/contain no-repeat}
@media (max-width:380px){.topo a.zap .zap-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.topo a.zap{padding:8px}}

/* Hero com o simulador, sobre um campo de painéis solares */
.hero{position:relative;overflow:hidden;isolation:isolate;background:#0D2247;color:var(--branco);padding:28px 0 44px}
.paineis{position:absolute;inset:0;z-index:-1;pointer-events:none}
.paineis .camada{position:absolute;inset:0;perspective:900px;perspective-origin:50% 0}
.paineis .campo{position:absolute;left:-40%;right:-40%;top:-10%;height:220%;background:url(painel.svg) 0 0/132px 84px repeat;transform:rotateX(52deg) rotateZ(-12deg);transform-origin:50% 0}
.paineis .luz .campo{background-image:url(painel-luz.svg)}
.paineis .veu{position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,34,71,.82) 0%,rgba(13,34,71,.6) 100%)}
@media (min-width:960px){.paineis .veu{background:linear-gradient(90deg,rgba(13,34,71,.88) 0%,rgba(13,34,71,.6) 45%,rgba(13,34,71,.12) 100%)}}
/* Painéis acesos num círculo suave em volta do mouse (.luz), com faixas de reflexo diagonais que
   deslizam devagar dentro do mesmo círculo (.raios). Sem pulso nem clarão. */
.paineis .luz,.paineis .raios{--circulo:radial-gradient(280px circle at var(--mx,50%) var(--my,50%),#000 0,rgba(0,0,0,.55) 45%,transparent 75%);
  opacity:0;transition:opacity .4s ease;-webkit-mask-image:var(--circulo);mask-image:var(--circulo)}
.paineis .raios{position:absolute;inset:0;overflow:hidden;mix-blend-mode:screen}
.paineis .raios i{position:absolute;inset:-220px;background:repeating-linear-gradient(135deg,transparent 0,transparent 38px,rgba(255,244,220,.22) 44px,rgba(255,244,220,.32) 47px,rgba(255,244,220,.22) 50px,transparent 56px,transparent 110px);will-change:transform}
.hero.aceso .paineis .luz{opacity:.95}
.hero.aceso .paineis .raios{opacity:1}
.hero.aceso .paineis .raios i{animation:reflexo 3.2s linear infinite}
@keyframes reflexo{from{transform:translate3d(0,0,0)}to{transform:translate3d(155.56px,0,0)}}
@media (prefers-reduced-motion:reduce){.paineis .luz,.paineis .raios{transition:none}.hero.aceso .paineis .raios i{animation:none}}
.hero .apoio{color:#C9D6EA}
.hero .fatos{color:#DCE5F2}
.hero .painel{color:var(--tinta)}
.hero-grade{display:grid;gap:22px;align-items:start;grid-template-areas:"texto" "painel" "fatos"}
.hero-texto{grid-area:texto}.painel{grid-area:painel}.fatos{grid-area:fatos}
@media (min-width:960px){.hero-grade{grid-template-columns:1fr 1.05fr;grid-template-rows:auto 1fr;grid-template-areas:"texto painel" "fatos painel";column-gap:56px;row-gap:0;padding-top:24px}}
.hero h1{font-size:clamp(32px,5.6vw,58px);line-height:1.02;letter-spacing:-.02em;font-weight:800;margin:0 0 18px;max-width:14ch}
.hero .apoio{font-size:18px;font-weight:300;margin:0;max-width:36ch}
@media (min-width:960px){.hero .apoio{font-size:19px;margin-bottom:24px}}
.fatos{list-style:none;padding:0;margin:0;display:grid;gap:10px;font-size:16px}
.fatos li{display:flex;gap:10px;align-items:baseline}
.fatos li::before{content:"";flex:0 0 8px;height:8px;border-radius:50%;background:var(--sol);transform:translateY(-1px)}

/* Painel do simulador */
.painel{background:var(--branco);border-radius:var(--raio);padding:22px;border:1px solid var(--linha)}
@media (min-width:720px){.painel{padding:30px}}
.painel h2{font-size:22px;font-weight:700;margin:0 0 4px;letter-spacing:-.01em}
.painel .sub{color:var(--suave);font-size:15px;margin:0 0 20px}
.campo{margin-bottom:16px}
.campo label,.campo .rot{display:block;font-size:14px;font-weight:500;color:var(--tinta-2);margin-bottom:6px}
.campo input,.campo select{width:100%;padding:13px 14px;border:1.5px solid var(--linha);border-radius:var(--raio-p);font:inherit;font-size:17px;color:var(--tinta);background:var(--branco)}
.campo input:focus,.campo select:focus{outline:none;border-color:var(--ambar);box-shadow:0 0 0 3px rgba(255,159,28,.25)}
.campo .dica{font-size:13px;color:var(--suave);margin-top:6px}
.duas{display:grid;gap:12px}
@media (min-width:520px){.duas{grid-template-columns:1fr 1fr}}
.alterna{display:inline-flex;border:1.5px solid var(--linha);border-radius:999px;padding:3px;margin-bottom:8px}
.alterna button{border:0;background:transparent;font:inherit;font-size:14px;padding:6px 14px;border-radius:999px;cursor:pointer;color:var(--tinta-2)}
.alterna button[aria-pressed="true"]{background:var(--tinta);color:var(--branco)}
.botao{display:block;width:100%;border:0;border-radius:var(--raio-p);padding:16px 20px;font:inherit;font-size:18px;font-weight:700;cursor:pointer;background:var(--sol);color:var(--branco);text-align:center;text-decoration:none}
.botao:hover{background:#D94E0C}
.botao[disabled]{opacity:.6;cursor:progress}
.botao.claro{background:transparent;color:var(--tinta);border:1.5px solid var(--linha);font-weight:500;font-size:16px;padding:12px 16px}
.botao.claro:hover{border-color:var(--tinta)}
.erro{color:#B42318;font-size:14px;min-height:20px;margin:8px 0 0}
.oculto{display:none!important}

/* Resultado: a conta encolhendo */
.resultado h2{margin-bottom:14px}
.conta{margin:4px 0 22px}
.conta .linha-conta{margin-bottom:14px}
.conta .rotulo{display:flex;justify-content:space-between;align-items:baseline;font-size:15px;color:var(--tinta-2);margin-bottom:6px}
.conta .rotulo b{font-size:22px;color:var(--tinta);font-weight:700;font-variant-numeric:tabular-nums}
.barra{height:22px;border-radius:6px;background:var(--ceu);overflow:hidden}
.barra i{display:block;height:100%;border-radius:6px;background:var(--tinta-2);width:0;transition:width .9s cubic-bezier(.2,.7,.2,1)}
.barra.solar i{background:var(--gradiente-sol)}
@media (prefers-reduced-motion:reduce){.barra i{transition:none}}
.economia{font-size:clamp(26px,4vw,34px);font-weight:800;letter-spacing:-.01em;line-height:1.1;margin:0 0 4px}
.economia small{display:block;font-size:15px;font-weight:400;color:var(--suave);letter-spacing:0;margin-top:6px}
.dados{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--linha);border:1px solid var(--linha);border-radius:var(--raio-p);overflow:hidden;margin:18px 0}
.dados div{background:var(--branco);padding:12px 14px}
.dados dt{font-size:13px;color:var(--suave)}
.dados dd{margin:2px 0 0;font-size:18px;font-weight:600;font-variant-numeric:tabular-nums}
.aviso-faixa{border-left:4px solid var(--ambar);background:#FFF6E6;padding:12px 14px;border-radius:0 var(--raio-p) var(--raio-p) 0;font-size:15px;margin:0 0 18px}
.aviso-faixa.sob-medida{border-color:var(--tinta);background:var(--ceu)}
.contato{border-top:1px solid var(--linha);padding-top:18px;margin-top:6px}
.contato h3{font-size:18px;margin:0 0 4px}
.contato p{font-size:15px;color:var(--suave);margin:0 0 14px}
.refazer{background:none;border:0;font:inherit;font-size:14px;color:var(--suave);text-decoration:underline;cursor:pointer;padding:0;margin-top:12px}
.legal{font-size:12.5px;color:var(--suave);margin:10px 0 0}

/* Prova: projetos realizados */
.provas{background:var(--tinta);color:var(--branco);padding:44px 0}
.provas-grade{display:grid;gap:26px;align-items:start}
@media (min-width:960px){.provas-grade{grid-template-columns:.9fr 2fr;gap:56px;align-items:center}}
.provas-numero{margin:0;font-size:20px;font-weight:300;line-height:1.25;color:#C9D6EA}
.provas-numero span{display:block;font-size:clamp(64px,9vw,104px);font-weight:800;line-height:.95;letter-spacing:-.03em;background:var(--gradiente-sol);-webkit-background-clip:text;background-clip:text;color:transparent;margin-bottom:6px}
.provas-lista{list-style:none;margin:0;padding:0;display:grid;gap:20px}
@media (min-width:720px){.provas-lista{grid-template-columns:repeat(3,1fr);gap:28px}}
.provas-lista li{border-top:1px solid rgba(255,255,255,.18);padding-top:14px}
.provas-lista h3{font-size:18px;margin:0 0 6px}
.provas-lista p{margin:0;font-size:15px;color:#C9D6EA}

/* Projetos e depoimentos */
.secao-sub{color:var(--suave);margin:-16px 0 24px;max-width:60ch}
.projetos{padding-bottom:28px}
.galeria{display:grid;gap:12px;grid-template-columns:1fr 1fr}
@media (min-width:860px){.galeria{grid-template-columns:1.4fr 1fr 1fr;grid-template-rows:220px 220px}.galeria figure:first-child{grid-row:1/3}}
.galeria figure{position:relative;margin:0;border-radius:var(--raio);overflow:hidden;background:var(--ceu);aspect-ratio:4/3}
@media (min-width:860px){.galeria figure{aspect-ratio:auto}}
.galeria figure:first-child{grid-column:1/-1}
@media (min-width:860px){.galeria figure:first-child{grid-column:auto}.galeria figure:last-child:not(:first-child){grid-column:span 2}}
.galeria img{width:100%;height:100%;object-fit:cover}
.galeria figcaption{position:absolute;left:10px;bottom:10px;background:rgba(20,26,34,.82);color:var(--branco);font-size:13px;font-weight:500;padding:4px 10px;border-radius:999px}
.depos{display:grid;grid-auto-flow:column;grid-auto-columns:78%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:0 16px;padding-bottom:10px;margin:0 -16px;padding-left:16px;padding-right:16px}
@media (min-width:720px){.depos{grid-auto-flow:row;grid-template-columns:repeat(3,1fr);overflow:visible;margin:0;padding:0}}
.depo{margin:0;scroll-snap-align:start;display:flex;flex-direction:column}
.depo-video{position:relative;display:block;width:100%;aspect-ratio:9/14;border:0;padding:0;border-radius:var(--raio);overflow:hidden;background:var(--tinta);cursor:pointer}
.depo-video img,.depo video{width:100%;height:100%;object-fit:cover;display:block}
.depo video{aspect-ratio:9/14;border-radius:var(--raio);background:var(--tinta)}
.depo-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:var(--sol);box-shadow:0 0 0 6px rgba(242,92,20,.25)}
.depo-play::after{content:"";position:absolute;left:26px;top:20px;border-style:solid;border-width:12px 0 12px 19px;border-color:transparent transparent transparent var(--branco)}
.depo-video:hover .depo-play{background:#D94E0C}
.depo blockquote{margin:14px 0 6px;font-size:16px;line-height:1.45}
.depo figcaption{font-size:14px;font-weight:600;color:var(--suave)}

/* Como funciona */
.secao{padding:56px 0}
.secao h2{font-size:clamp(26px,3.6vw,36px);font-weight:800;letter-spacing:-.015em;line-height:1.1;margin:0 0 28px;max-width:22ch}
.passos{list-style:none;padding:0;margin:0;display:grid;gap:22px;counter-reset:passo}
@media (min-width:860px){.passos{grid-template-columns:repeat(4,1fr);gap:28px}}
.passos li{counter-increment:passo;border-top:2px solid var(--tinta);padding-top:14px}
.passos li::before{content:counter(passo);display:block;font-size:15px;font-weight:700;color:var(--sol);margin-bottom:6px}
.passos h3{font-size:19px;margin:0 0 6px}
.passos p{margin:0;font-size:16px;color:var(--tinta-2)}

/* Perguntas */
.perguntas{background:var(--ceu)}
.perguntas details{border-bottom:1px solid var(--linha);padding:16px 0;max-width:760px}
.perguntas summary{font-size:18px;font-weight:600;cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:16px}
.perguntas summary::-webkit-details-marker{display:none}
.perguntas summary::after{content:"+";font-weight:400;color:var(--sol);font-size:22px;line-height:1}
.perguntas details[open] summary::after{content:"–"}
.perguntas details p{margin:10px 0 0;color:var(--tinta-2);max-width:66ch}

/* Rodapé */
.rodape{background:var(--tinta);color:#C9D2DC;padding:36px 0 44px;font-size:14px}
.rodape .lema{color:var(--branco);font-size:20px;font-weight:300;margin:0 0 12px}
.rodape a{color:var(--branco)}

/* Modo teste: só aparece sem endpoint configurado */
.faixa-teste{background:var(--luz);color:var(--tinta);font-size:13px;padding:8px 16px;text-align:center}
.payload{font-family:ui-monospace,Menlo,monospace;font-size:12px;white-space:pre-wrap;background:var(--tinta);color:#E6EDF3;border-radius:var(--raio-p);padding:12px;max-height:320px;overflow:auto;margin-top:12px}
.so-leitor{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Seletor de páginas, só na versão para aprovação */
.topo{flex-wrap:wrap}
.trocar{display:flex;border:1.5px solid var(--linha);border-radius:999px;padding:3px;order:3;width:100%;justify-content:space-between}
.trocar a{flex:1;text-align:center;text-decoration:none;font-size:14px;font-weight:500;color:var(--tinta-2);padding:7px 10px;border-radius:999px;white-space:nowrap}
.trocar a[aria-current="page"]{background:var(--tinta);color:var(--branco)}
.trocar a:hover:not([aria-current]){color:var(--sol)}
@media (min-width:860px){.trocar{order:0;width:auto}.trocar a{flex:0 0 auto;padding:7px 16px}}

/* Consentimento LGPD */
.aceite{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:var(--tinta-2);margin:4px 0 14px;cursor:pointer}
.aceite input{flex:0 0 20px;width:20px;height:20px;margin:1px 0 0;accent-color:var(--sol)}