:root {
  --laranja: #F7941D;
  --amarelo: #FFC94F;
  --laranja-esc: #DD7708;
  --laranja-txt: #B45E06;
  --escuro: #081420;
  --escuro-2: #0E2233;
  --borda-esc: #1E3A52;
  --claro: #FAF7F1;
  --borda-clara: #E9DFCE;
  --ink: #16232F;
  --cinza: #465A6C;
  --cinza-2: #5A6B7A;
  --cinza-claro: #A9BDD1;
  --cinza-esc: #7E93A8;
}

* { box-sizing: border-box }

html { scroll-behavior: smooth }

body {
  margin: 0;
  background: var(--claro);
  color: #1B2A38;
  line-height: 1.65;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100% }
h1, h2, h3 { font-family: 'Space Grotesk', sans-serif }
a { color: #C56A08 }

.btn {
  display: inline-block;
  background: linear-gradient(100deg, var(--laranja), var(--amarelo));
  color: #231402;
  text-decoration: none;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  border: 0;
  border-radius: 99px;
  cursor: pointer;
  transition: transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); color: #231402 }

/* ===== Header ===== */
.topo { background: var(--escuro); position: relative; overflow: hidden }
.topo-bar {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.topo-bar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 15px 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.topo-marca { display: flex; align-items: center; gap: 14px; min-width: 0 }
.topo-marca img { height: 56px; width: auto; display: block }
.topo-slogan {
  font-size: 15px;
  font-style: italic;
  color: var(--cinza-claro);
  border-left: 1px solid var(--borda-esc);
  padding-left: 14px;
  white-space: nowrap;
}
.topo-cta { font-size: 14.5px; padding: 11px 24px; animation: pulseCTA 2.2s ease-out infinite; white-space: nowrap }

@keyframes pulseCTA {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 177, 61, .55) }
  50% { box-shadow: 0 0 0 10px rgba(255, 177, 61, 0) }
}

/* painel solar de fundo */
.painel {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(78px, 1fr));
  grid-auto-rows: 78px;
  gap: 3px;
  padding: 3px;
  opacity: .3;
  pointer-events: none;
}
.painel i { display: block; background: #102A40; border-radius: 2px; border: 1px solid rgba(27, 58, 85, .55) }
.painel i.lit { animation: acende 7s ease-in-out infinite }

@keyframes acende {
  0%, 100% { background: #102A40; box-shadow: none }
  50% { background: #17395A; box-shadow: inset 0 0 22px rgba(255, 177, 61, .3) }
}

/* ===== Hero ===== */
.hero { position: relative; text-align: center; padding: 56px 24px 150px }
.hero-badge {
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #FFB13D;
  background: rgba(255, 177, 61, .12);
  border: 1px solid rgba(255, 177, 61, .35);
  padding: 7px 16px;
  border-radius: 99px;
  margin-bottom: 22px;
}
.hero-badge span { display: inline-flex; align-items: center; gap: 6px }
.hero h1 {
  font-size: clamp(32px, 6vw, 56px);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0 auto;
  max-width: 19ch;
  color: #F2F7FB;
}
.hero h1 em { font-style: normal; color: var(--amarelo) }
.hero h1 sup { font-size: .45em }
.hero-sub { margin: 20px auto 10px; font-size: clamp(15.5px, 2.4vw, 17.5px); color: var(--cinza-claro); max-width: 54ch }
.hero-nota { margin: 0 auto 28px; font-size: 12.5px; color: var(--cinza-esc); max-width: 54ch }

.simulador {
  cursor: pointer;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 22px;
  background: rgba(14, 34, 51, .85);
  border: 1px solid var(--borda-esc);
  border-radius: 16px;
  padding: 14px 26px;
}
.simulador .lbl { color: var(--cinza-claro); font-size: 12.5px; text-align: left }
.sim-antes { position: relative; display: inline-block; margin-top: 5px }
.sim-antes b {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #FF8A8A;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.sim-x { position: absolute; left: 8%; right: 8%; top: 0; bottom: 0 }
.sim-x span { position: absolute; left: 0; top: 50%; width: 100%; height: 2px; background: #FF8A8A; opacity: .7 }
.sim-x span:first-child { transform: translateY(-50%) rotate(28deg) }
.sim-x span:last-child { transform: translateY(-50%) rotate(-28deg) }
.sim-seta { font-size: 20px; color: #FFB13D }
.sim-depois {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.sim-depois.pisca { animation: piscaVerde 1.1s ease-in-out infinite }

@keyframes piscaVerde {
  0%, 100% { opacity: 1 }
  50% { opacity: .35 }
}

/* ===== Formulário ===== */
.form-area { position: relative; padding: 0 24px }
.form-card {
  background: #fff;
  border: 1px solid var(--borda-clara);
  border-radius: 20px;
  padding: 32px;
  box-shadow: 0 34px 80px -34px rgba(20, 30, 45, .5);
  max-width: 640px;
  margin: -108px auto 0;
  position: relative;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; margin-bottom: 13px }
.campo label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 6px; color: #2A3B4C }
.campo input {
  width: 100%;
  padding: 12px 14px;
  background: var(--claro);
  border: 1.5px solid #E2D8C6;
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
  color: var(--ink);
  transition: border .2s;
}
.campo input:focus { border-color: var(--laranja); outline: none }
.campo-erro { display: block; min-height: 15px; font-size: 12px; color: #C94747; margin-top: 5px }
.campo.invalido input { border-color: #C94747 }
.campo.invalido input:focus { border-color: #C94747 }
.form-card button { width: 100%; font-size: 17px; padding: 16px; border-radius: 12px; box-shadow: 0 20px 50px -20px rgba(247, 148, 29, .55) }
.form-lgpd { font-size: 12.5px; color: #6E7E8C; margin: 12px 0 0; text-align: center; line-height: 1.5 }
.form-ok {
  display: none;
  background: rgba(29, 158, 95, .08);
  border: 1px solid rgba(29, 158, 95, .4);
  color: #177A49;
  padding: 26px 22px;
  border-radius: 12px;
  font-size: 17.5px;
  text-align: center;
}
.form-ok-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--laranja-txt);
  background: rgba(247, 148, 29, .12);
  border: 1px solid rgba(247, 148, 29, .3);
  padding: 5px 14px;
  border-radius: 99px;
  margin-bottom: 14px;
}
.form-ok b { display: block; font-size: 21px; margin-bottom: 6px }
.form-ok-marca {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(29, 158, 95, .25);
  font-size: 14.5px;
  color: #4E8A6E;
}
.form-ok-marca b { display: inline; font-size: inherit; margin: 0; color: var(--laranja-txt) }

.selos { display: flex; flex-wrap: wrap; gap: 10px 36px; justify-content: center; padding: 24px 24px 0; font-size: 13.5px; color: var(--cinza-2) }
.selos b { color: var(--laranja-esc) }

/* ===== Seções ===== */
.secao { padding: 56px 24px 0 }
.secao-head { text-align: center; max-width: 640px; margin: 0 auto 36px }
.secao-head h2 { font-size: clamp(24px, 4vw, 32px); font-weight: 700; margin: 0; color: var(--ink) }
.secao-head p { color: var(--cinza-2); margin: 10px 0 0; font-size: 16px }

.beneficios { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1200px; margin: 0 auto }
.beneficio {
  background: #fff;
  border: 1px solid var(--borda-clara);
  border-radius: 18px;
  padding: 30px 26px;
  box-shadow: 0 10px 28px -20px rgba(60, 40, 10, .35);
  transition: transform .25s, box-shadow .25s;
}
.beneficio:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -18px rgba(60, 40, 10, .45) }
.beneficio .num { font-family: 'Space Grotesk', sans-serif; font-size: 36px; font-weight: 800; color: #C56A08; line-height: 1 }
.beneficio h3 { font-size: 18px; font-weight: 700; margin: 14px 0 8px; color: var(--ink) }
.beneficio p { font-size: 14.5px; color: var(--cinza); margin: 0; line-height: 1.6 }

.passos {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: #fff;
  border: 1px solid var(--borda-clara);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 10px 28px -20px rgba(60, 40, 10, .3);
  max-width: 1200px;
  margin: 0 auto;
}
.passo { padding: 32px 24px; border-right: 1px solid #EFE7D8 }
.passo:last-child { border-right: 0 }
.passo .icone {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: linear-gradient(135deg, #FFF3DE, #FFE3B0);
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}
.passo .tag {
  display: inline-block;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--laranja-esc);
  background: rgba(221, 119, 8, .1);
  padding: 3px 9px;
  border-radius: 99px;
  margin-bottom: 10px;
}
.passo h3 { font-size: 17px; font-weight: 700; margin: 0 0 8px; color: var(--ink) }
.passo p { font-size: 14.5px; color: var(--cinza); margin: 0; line-height: 1.6 }

/* ===== FAQ ===== */
.faq { max-width: 720px; margin: 0 auto }
.faq details { border-bottom: 1px solid #E2D8C6 }
.faq summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 4px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 600;
  font-size: 15.5px;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none }
.faq summary::after {
  content: '+';
  color: var(--laranja-esc);
  font-size: 22px;
  font-family: 'Space Grotesk', sans-serif;
  line-height: 1;
  flex: none;
}
.faq details[open] summary::after { content: '–' }
.faq .resp { padding: 0 4px 18px; font-size: 14.5px; color: var(--cinza-2); line-height: 1.65 }

/* ===== CTA final / rodapé ===== */
.cta-final { margin-top: 64px; background: var(--escuro); text-align: center; padding: 60px 24px; color: #F2F7FB }
.cta-final h2 { font-size: clamp(24px, 4vw, 31px); font-weight: 700; margin: 0 }
.cta-final p { margin: 12px auto 26px; max-width: 52ch; color: var(--cinza-claro); font-size: 16px }
.cta-final .btn { display: inline-flex; align-items: center; gap: 10px; font-size: 17px; padding: 16px 34px; box-shadow: 0 20px 50px -20px rgba(255, 177, 61, .5) }
.rodape { margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .1); font-size: 12.5px; color: var(--cinza-esc); line-height: 1.7 }
.rodape b { color: #F2F7FB }

/* ===== Botão WhatsApp flutuante ===== */
.zap-flut {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: #25D366;
  display: grid;
  place-items: center;
  box-shadow: 0 0 0 6px rgba(37, 211, 102, .15), 0 14px 34px -8px rgba(37, 211, 102, .6);
  transition: transform .2s, opacity .3s, visibility .3s;
  z-index: 50;
}
.zap-flut:hover { transform: scale(1.08) }
.zap-flut.oculto { opacity: 0; visibility: hidden; pointer-events: none }
.zap-flut svg { width: 31px; height: 31px; fill: #fff }

/* ===== Responsivo ===== */
@media (max-width: 1024px) {
  .beneficios { grid-template-columns: repeat(3, 1fr); gap: 14px }
  .passos { grid-template-columns: 1fr 1fr }
  .passo:nth-child(2n) { border-right: 0 }
  .passo:nth-child(-n+2) { border-bottom: 1px solid #EFE7D8 }
}
@media (max-width: 768px) {
  .topo-slogan { display: none }
  .hero { padding: 40px 20px 130px }
  .beneficios { grid-template-columns: 1fr; max-width: 480px }
  .form-grid { grid-template-columns: 1fr }
  .form-card { padding: 24px 20px; margin-top: -96px }
  .selos { flex-direction: column; align-items: center; gap: 8px }
  .simulador { padding: 14px 18px }
}
@media (max-width: 480px) {
  .topo-bar-inner { padding: 12px 16px }
  .topo-marca img { height: 44px }
  .topo-cta { font-size: 13px; padding: 9px 16px }
  .passos { grid-template-columns: 1fr }
  .passo { border-right: 0; border-bottom: 1px solid #EFE7D8 }
  .passo:last-child { border-bottom: 0 }
  .hero-badge { font-size: 11px; letter-spacing: .04em }
  .sim-seta { transform: rotate(90deg) }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important }
  html { scroll-behavior: auto }
}