/* ============================================================
   POWER ENERGIA SOLAR — Formulário de qualificação de leads
   Mobile-first (360–430px), max-width 480px centralizado no desktop
   Animações apenas com transform/opacity (performático)
============================================================ */

/* ---------- Reset básico e variáveis ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  --branco: #FFFFFF;
  --texto: #111111;
  --texto-suave: #555555;
  --ouro-1: #D4A017;
  --ouro-2: #F5C842;
  --ouro-3: #B8860B;
  --grad-ouro: linear-gradient(135deg, #D4A017, #F5C842, #B8860B);
  --erro: #C0392B;
  --sombra-card: 0 6px 24px rgba(17, 17, 17, 0.08);
  --raio: 16px;
  --transicao-tela: 550ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Imagem de fundo de todo o formulário com véu branco por cima para
   legibilidade. Fica no html (o body é transparente): a raiz nunca rola
   neste layout, então o fundo permanece estável em qualquer navegador. */
html {
  -webkit-text-size-adjust: 100%;
  background:
    linear-gradient(rgba(255, 255, 255, 0.94), rgba(255, 255, 255, 0.94)),
    url("assets/background.jpg") center / cover no-repeat #FFFFFF;
}

body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: transparent;
  color: var(--texto);
  line-height: 1.5;
  min-height: 100vh; /* fallback para navegadores sem dvh */
  min-height: 100dvh;
  overflow-x: hidden;
}

img {
  max-width: 100%;
  display: block;
}

button {
  font: inherit;
  cursor: pointer;
  border: none;
  background: none;
  color: inherit;
}

/* Foco visível (acessibilidade) */
:focus-visible {
  outline: 3px solid var(--ouro-1);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Texto apenas para leitores de tela */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Barra de progresso ---------- */
.progresso {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 0;
}

.progresso-trilho {
  height: 6px;
  background: #F0EDE4;
  overflow: hidden;
}

.progresso-preenchimento {
  height: 100%;
  background: var(--grad-ouro);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 500ms cubic-bezier(0.22, 0.61, 0.36, 1);
  border-radius: 0 3px 3px 0;
}

/* ---------- Logo fixa no topo (presente em todas as telas) ---------- */
.logo-topo {
  position: fixed;
  top: 34px; /* respiro entre a barra de progresso e a logo */
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  z-index: 40;
  pointer-events: none;
  animation: intro-surgir 500ms ease-out 150ms backwards;
}

.logo-topo[hidden] {
  display: none;
}

.logo-topo img {
  height: 56px;
  width: auto;
}

/* ---------- Estrutura das telas ---------- */
.app {
  position: relative;
  max-width: 480px;
  margin: 0 auto;
  min-height: 100vh; /* fallback para navegadores sem dvh */
  min-height: 100dvh;
  transform: none; /* nunca criar containing block (quebraria fixed no mobile) */
  /* As telas inativas ficam deslocadas em translateX e criariam rolagem
     horizontal. No mobile isso alarga a viewport de layout e a logo fixa
     (centrada nela) sai do eixo — por isso o recorte acontece aqui.
     overflow não cria containing block, então o position:fixed segue intacto. */
  overflow: hidden;
}

/* Transição entre telas por slide horizontal + fade.
   IMPORTANTE (mobile): sem perspective()/rotateY() aqui — transforms 3D em
   ancestrais/irmãos criam containing block no WebKit e quebram o
   position:fixed da logo do topo em iOS Safari e Chrome Android. */
.tela {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  /* padding-top reserva a faixa da logo fixa (34px + 56px + respiro),
     para o conteúdo nunca passar por baixo dela em telas baixas */
  padding: 110px 24px 32px;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0;
  transform: translateX(60px);
  pointer-events: none;
  visibility: hidden;
  transition:
    transform var(--transicao-tela),
    opacity var(--transicao-tela),
    visibility 0s linear 550ms;
}

/* Tela ativa: visível e assentada.
   transform:none (e não um transform neutro) para não criar containing block
   e manter o position:fixed da logo do topo relativo à viewport. */
.tela.is-ativa {
  z-index: 2;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
  transition:
    transform var(--transicao-tela),
    opacity var(--transicao-tela),
    visibility 0s;
}

/* Tela que já passou: desliza para fora pela esquerda (sem rotação 3D) */
.tela.fora-esquerda {
  z-index: 3;
  transform: translateX(-100%);
}

/* Desliga a transição momentaneamente para reposicionar a tela antes de entrar */
.tela.sem-transicao {
  transition: none !important;
}

.tela-conteudo {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  /* margin auto vertical: centraliza quando sobra espaço e
     alinha ao topo (sem cortar) quando o conteúdo excede a viewport */
  margin: auto 0;
}

/* ---------- Botões ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 16px 24px;
  border-radius: 999px;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 200ms ease, opacity 200ms ease, box-shadow 200ms ease;
  -webkit-tap-highlight-color: transparent;
}

.btn:active {
  transform: scale(0.97);
}

.btn-ouro {
  background: var(--grad-ouro);
  color: #FFFFFF;
  text-shadow: 0 1px 2px rgba(120, 85, 0, 0.35);
  box-shadow: 0 8px 20px rgba(212, 160, 23, 0.35);
}

.btn-ouro:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

/* Botão voltar discreto, alinhado ao centro vertical da logo */
.btn-voltar {
  position: absolute;
  top: 44px;
  left: 16px;
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--texto-suave);
  border-radius: 999px;
  transition: opacity 200ms ease, transform 200ms ease;
}

.btn-voltar:active {
  transform: scale(0.95);
}

/* Entrada da logo fixa no topo.
   fill-mode backwards (e não opacity:0 na base + forwards): se o navegador
   não rodar animações (acessibilidade/economia de bateria), o elemento
   permanece visível em vez de preso em opacity 0 */
@keyframes intro-surgir {
  from { opacity: 0; transform: translateY(18px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

/* ============================================================
   PERGUNTAS — elementos comuns
============================================================ */
.pergunta-titulo {
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.01em;
  max-width: 24ch;
}

.pergunta-titulo:focus-visible {
  outline: none; /* foco programático no título não precisa de anel */
}

.pergunta-microcopy {
  font-size: 0.95rem;
  color: var(--texto-suave);
  margin-top: -10px;
}

/* Entrada em stagger dos elementos quando a tela fica ativa */
@keyframes item-entrar {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* O card de erro tem o shake próprio, por isso fica fora desta regra */
.tela.is-ativa .tela-conteudo > *:not(.erro-card) {
  animation: item-entrar 450ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

.tela.is-ativa .tela-conteudo > *:nth-child(1) { animation-delay: 80ms; }
.tela.is-ativa .tela-conteudo > *:nth-child(2) { animation-delay: 150ms; }
.tela.is-ativa .tela-conteudo > *:nth-child(3) { animation-delay: 220ms; }
.tela.is-ativa .tela-conteudo > *:nth-child(4) { animation-delay: 290ms; }
.tela.is-ativa .tela-conteudo > *:nth-child(5) { animation-delay: 360ms; }
.tela.is-ativa .tela-conteudo > *:nth-child(6) { animation-delay: 430ms; }

/* ---------- Pergunta 1: conta de luz + contador ---------- */
.conta-luz {
  width: 132px;
  --escala: 0.2; /* fração preenchida da barra do total (o JS ajusta) */
}

.conta-svg {
  width: 100%;
  height: auto;
  /* balanço leve, como uma folha na mão — só transform, sem custo de layout */
  animation: conta-flutuar 5s ease-in-out infinite;
}

@keyframes conta-flutuar {
  0%, 100% { transform: translateY(0)    rotate(-1.5deg); }
  50%      { transform: translateY(-7px) rotate(1.5deg); }
}

.conta-papel {
  fill: #FFFFFF;
  stroke: #EFEBE0;
  stroke-width: 1.5;
  filter: drop-shadow(0 6px 14px rgba(17, 17, 17, 0.12));
}

/* Barra do total: cresce da esquerda conforme o valor escolhido.
   transform-origin em unidades do viewBox (transform-box padrão: view-box). */
.conta-total {
  transform: scaleX(var(--escala));
  transform-box: view-box; /* explícito: origem lida no sistema do viewBox */
  transform-origin: 28px 64px;
  transition: transform 250ms cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Acima de R$ 500 o total fica âmbar, no mesmo tom do número em alerta */
.conta-luz.alerta .conta-total {
  fill: #D97706;
}

/* Valor grande com contagem animada */
.valor-display {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-weight: 800;
  color: var(--texto);
}

.valor-cifrao {
  font-size: 1.3rem;
  color: var(--ouro-3);
}

.valor-numero {
  font-size: 3.2rem;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}

.valor-mes {
  font-size: 1rem;
  color: var(--texto-suave);
}

/* Alerta acima de R$500: número pulsa em dourado/laranja reforçando a dor */
@keyframes valor-alerta {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.06); }
}

.valor-display.alerta .valor-numero {
  color: #D97706;
  animation: valor-alerta 900ms ease-in-out infinite;
}

/* Contador −/+ : dois alvos grandes, no mesmo idioma visual dos cards */
.contador {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
  max-width: 300px;
}

.contador-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 62px;
  border-radius: var(--raio);
  background: #FFFFFF;
  border: 2px solid #EFEBE0;
  box-shadow: var(--sombra-card);
  color: var(--ouro-3);
  transition: transform 150ms ease, border-color 150ms ease, box-shadow 150ms ease, opacity 150ms ease;
  -webkit-tap-highlight-color: transparent;
}

.contador-btn:active {
  transform: scale(0.95);
  border-color: var(--ouro-1);
  box-shadow: 0 6px 18px rgba(212, 160, 23, 0.3);
}

/* Nos limites (R$ 100 e R$ 1.500) o botão fica inerte, sem sumir da tela */
.contador-btn:disabled {
  opacity: 0.35;
  box-shadow: none;
  transform: none;
}

.contador-dica {
  font-size: 0.8rem;
  color: var(--texto-suave);
  margin-top: -14px;
}

/* Convite de toque: os botões pulsam duas vezes ao abrir a pergunta */
@keyframes contador-pulsar {
  0%, 100% { transform: scale(1);    box-shadow: var(--sombra-card); }
  50%      { transform: scale(1.05); box-shadow: 0 8px 22px rgba(212, 160, 23, 0.35); }
}

.contador-btn.dica-toque {
  animation: contador-pulsar 700ms ease-in-out 2;
  border-color: var(--ouro-1);
}

/* Card de erro com shake sutil */
@keyframes tremer {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-6px); }
  40%      { transform: translateX(6px); }
  60%      { transform: translateX(-4px); }
  80%      { transform: translateX(4px); }
}

/* Garante que [hidden] vença o display:flex da classe */
.erro-card[hidden] {
  display: none;
}

.erro-card {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 12px;
  background: #FDF2F0;
  border: 1px solid rgba(192, 57, 43, 0.25);
  color: var(--erro);
  font-size: 0.92rem;
  font-weight: 600;
  text-align: left;
}

.erro-card svg {
  flex-shrink: 0;
}

/* Especificidade alta para o shake vencer as regras de stagger/delay da tela */
.tela.is-ativa .tela-conteudo > .erro-card.tremendo {
  animation: tremer 450ms ease-in-out;
}

/* ---------- Perguntas 2, 3 e 5: cards de opção ---------- */
.opcoes-grade {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  width: 100%;
}

/* Garante que [hidden] vença o display:grid da classe (mesma especificidade) */
.opcoes-grade[hidden] {
  display: none;
}

.opcoes-duas {
  grid-template-columns: 1fr;
  max-width: 300px;
}

/* Cards só de texto (concessionárias): sem ícone, o nome ocupa o card inteiro */
.opcoes-texto .opcao-card {
  justify-content: center;
  min-height: 76px;
  padding: 18px 10px;
  font-size: 1.02rem;
  line-height: 1.25;
}

.opcao-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 24px 12px;
  border-radius: var(--raio);
  background: #FFFFFF;
  border: 2px solid #EFEBE0;
  box-shadow: var(--sombra-card);
  font-weight: 700;
  font-size: 1rem;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
  -webkit-tap-highlight-color: transparent;
}

.opcao-card svg {
  width: 44px;
  height: 44px;
}

.opcao-card:active {
  transform: scale(0.96);
}

/* Feedback visual imediato da seleção antes do avanço automático */
.opcao-card.selecionado {
  border-color: var(--ouro-1);
  box-shadow: 0 8px 22px rgba(212, 160, 23, 0.35);
  transform: scale(1.03);
}

/* Entrada em stagger dos cards (além do stagger geral da tela) */
@keyframes card-entrar {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.tela.is-ativa .opcao-card {
  animation: card-entrar 420ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
}

.tela.is-ativa .opcao-card:nth-child(1) { animation-delay: 160ms; }
.tela.is-ativa .opcao-card:nth-child(2) { animation-delay: 250ms; }
.tela.is-ativa .opcao-card:nth-child(3) { animation-delay: 340ms; }
.tela.is-ativa .opcao-card:nth-child(4) { animation-delay: 430ms; }

/* ---------- Perguntas 4, 5 e 6: campos de texto ---------- */
.campo-grupo {
  width: 100%;
  text-align: left;
}

.campo-rotulo {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--texto-suave);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.campo-texto {
  width: 100%;
  padding: 16px 18px;
  font: inherit;
  font-size: 1.1rem;
  color: var(--texto);
  background: #FFFFFF;
  border: 2px solid #EFEBE0;
  border-radius: 14px;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.campo-texto::placeholder {
  color: #B7B2A6;
}

.campo-texto:focus {
  outline: none;
  border-color: var(--ouro-1);
  box-shadow: 0 0 0 4px rgba(245, 200, 66, 0.25);
}

/* ============================================================
   Desktop e acessibilidade de movimento
============================================================ */
@media (min-width: 560px) {
  .pergunta-titulo { font-size: 1.65rem; }
}

/* Respeita usuários que preferem menos movimento */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Premium dark experience — brand-preserving logo treatment and solar motion. */
:root {
  color-scheme: dark;
  --texto: #f4f3ee;
  --texto-suave: #a4a5ab;
  --ouro-1: #d7b568;
  --ouro-2: #f3dc9c;
  --ouro-3: #d7b568;
  --grad-ouro: linear-gradient(115deg, #b88a39, #efd599 48%, #d4ad5c);
  --erro: #ffaca2;
  --sombra-card: 0 12px 30px #0003;
  --raio: 18px;
}
html { background: #08090b; }
body { background: radial-gradient(ellipse at 15% 40%, #9f773012, transparent 48%); }
.logo-topo { top: 30px; left: 6%; right: 6%; justify-content: space-between; align-items: center; }
.brand-mark { position: relative; display: block; width: 175px; }
.logo-topo .brand-mark img { width: 100%; height: auto; filter: brightness(0) invert(1); }
.logo-topo .brand-mark .brand-bolt { position: absolute; inset: 0; filter: none; clip-path: polygon(21.8% 0, 15.2% 39%, 23.8% 39%, 4.4% 100%, 10.8% 54%, 6.5% 54%); }
.header-label { color: #88898e; font-size: 9px; letter-spacing: 2px; }
.solar-story { position: absolute; left: 8%; top: 175px; width: 39%; max-width: 530px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 10px; font-weight: 650; letter-spacing: 2.3px; color: #d7b568; }
.eyebrow i, .energy-tag i { width: 5px; height: 5px; background: #e6c781; border-radius: 50%; box-shadow: 0 0 14px #e6c781; }
.solar-story h2 { margin: 24px 0 20px; font-weight: 450; font-size: clamp(36px, 3.8vw, 60px); line-height: 1.12; letter-spacing: -2px; }
.solar-story h2 em { font-family: Georgia, serif; font-weight: 400; color: #e0bd76; }
.solar-story > p { font-size: 14px; line-height: 1.85; max-width: 350px; color: var(--texto-suave); }
.energy-art { height: 280px; position: relative; margin-top: 20px; max-width: 430px; }
.orbit { position: absolute; border: 1px solid #d7b56820; border-radius: 50%; width: 230px; height: 230px; left: 90px; top: 5px; animation: orbit-spin 24s linear infinite; }
.orbit::after { content: ""; position: absolute; width: 6px; height: 6px; background: #eac77c; border-radius: 50%; top: 30px; left: 30px; box-shadow: 0 0 18px #eac77c; }
.orbit-two { width: 300px; height: 300px; top: -30px; left: 55px; animation-direction: reverse; opacity: .4; }
.solar-core { position: absolute; top: 20px; left: 160px; width: 90px; height: 90px; display: grid; place-items: center; border: 1px solid #dab77466; border-radius: 50%; background: radial-gradient(circle at 35% 20%, #655332, #181611 70%); box-shadow: 0 0 65px #d7b56820, inset 0 0 20px #d7b56812; animation: core-float 5s ease-in-out infinite; }
.solar-core svg { width: 28px; fill: #f2d797; }
.solar-panel { position: absolute; top: 127px; left: 90px; width: 235px; height: 113px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 7px; transform: perspective(500px) rotateX(40deg) rotateZ(-16deg); border: 1px solid #ad925b; border-radius: 7px; background: #15181e; box-shadow: -9px 14px 0 #111318, -10px 15px 0 #746344, 0 30px 70px #000; overflow: hidden; }
.solar-panel span { border: 1px solid #737b8638; background: repeating-linear-gradient(0deg, transparent 0 9px, #8896a51c 10px 11px), linear-gradient(135deg, #303742, #141920); }
.solar-panel::after { content: ""; position: absolute; inset: -80%; background: linear-gradient(90deg, transparent 40%, #ffe0a026 50%, transparent 60%); animation: panel-shine 7s ease-in-out infinite; }
.energy-tag { position: absolute; display: flex; align-items: center; gap: 8px; font-size: 8px; letter-spacing: 1.1px; padding: 10px 12px; border: 1px solid #ffffff12; background: #111216dd; border-radius: 7px; }
.tag-top { top: 32px; left: 5px; }
.tag-bottom { right: 0; bottom: 10px; color: #bcbab4; }
.tag-bottom b { color: #e5c47e; margin-left: 10px; }
.story-footer { display: flex; justify-content: space-between; max-width: 410px; padding-top: 24px; margin-top: 10px; border-top: 1px solid #ffffff10; font-size: 8px; letter-spacing: 1.2px; color: #74767e; }
.app { max-width: none; width: 44%; margin: 155px 6% 70px auto; min-height: 600px; height: calc(100dvh - 225px); border: 1px solid #ffffff12; border-radius: 28px; background: linear-gradient(145deg,#191a1ee8,#101114f5 65%); box-shadow: 0 35px 80px #0004; }
.journey-heading { position: absolute; top: 120px; left: 50%; right: 6%; display: flex; align-items: center; justify-content: space-between; padding: 0 8px; }
#stepLabel { font-size: 11px; color: #c0b9a7; letter-spacing: 2px; font-variant-numeric: tabular-nums; }
.progresso { z-index: 50; }
.progresso-trilho { background: #242322; height: 3px; }
.progresso-preenchimento { box-shadow: 0 0 18px #d7b56877; }
.tela { padding: 64px 40px 30px; }
.tela-conteudo { gap: 22px; max-width: 410px; margin: auto; }
.pergunta-titulo { font-size: clamp(24px, 2.2vw, 32px); font-weight: 550; letter-spacing: -.9px; line-height: 1.23; max-width: 25ch; }
.pergunta-microcopy { font-size: 12px; line-height: 1.7; }
.btn-voltar { top: 16px; left: 20px; font-size: 11px; color: #bbb9b0; }
.conta-luz { width: 86px; padding: 10px; border-radius: 20px; background: #d7b56809; border: 1px solid #d7b56820; }
.conta-papel { fill: #222327; stroke: #66604f; }
.valor-numero { font-size: 64px; font-weight: 500; letter-spacing: -3px; }
.valor-cifrao { font-size: 22px; font-weight: 450; margin-right: 3px; }
.valor-mes { font-size: 12px; font-weight: 400; }
.contador { max-width: 260px; gap: 12px; }
.contador-btn { height: 48px; background: #ffffff04; border: 1px solid #ffffff19; border-radius: 12px; }
.contador-btn svg { width: 18px; }
.contador-dica { font-size: 10px; margin-top: -10px; }
.btn { min-height: 52px; border-radius: 12px; font-size: 13px; position: relative; overflow: hidden; }
.btn-ouro { color: #211b0f; text-shadow: none; box-shadow: 0 6px 24px #d7b56812, inset 0 1px 0 #fff6; }
.btn-ouro::after { content: "→"; position: absolute; right: 20px; font-size: 20px; transition: transform .25s; }
.btn-ouro:not(:disabled):hover::after { transform: translateX(4px); }
.btn-ouro:not(:disabled):hover { box-shadow: 0 8px 35px #d7b56835; transform: translateY(-2px); }
.opcao-card, .campo-texto { background: #ffffff03; border: 1px solid #ffffff19; }
.opcao-card { position: relative; font-size: 13px; font-weight: 500; padding: 25px 14px; min-height: 115px; }
.opcao-card svg { width: 35px; height: 35px; transition: transform .35s; }
.opcao-card:hover, .contador-btn:not(:disabled):hover { border-color: #d7b56888; background: #d7b5680b; transform: translateY(-3px); }
.opcao-card:hover svg { transform: translateY(-3px) rotate(-4deg); }
.opcao-card.selecionado { background: #d7b56818; border-color: #d7b568; box-shadow: 0 0 25px #d7b56812; }
.opcao-card.selecionado::after { content: "✓"; position: absolute; right: 12px; top: 9px; color: #e7c987; }
.opcoes-texto .opcao-card { font-size: 13px; }
.opcoes-duas { max-width: none; }
.campo-rotulo { font-size: 10px; letter-spacing: 1.5px; }
.campo-texto { font-size: 16px; border-radius: 12px; }
.campo-texto::placeholder { color: #777981; }
.erro-card { background: #55251f30; border-color: #b45c4545; font-size: 12px; }
.trust-footer { position: absolute; top: max(775px, calc(100dvh - 44px)); left: 50%; right: 6%; display: flex; justify-content: center; gap: 25px; font-size: 10px; color: #86878e; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes core-float { 50% { transform: translateY(-9px); } }
@keyframes panel-shine { 0%, 20% { transform: translateX(-35%); } 80%,100% { transform: translateX(35%); } }
@media (min-width: 1500px) { .solar-story { left: calc(50% - 620px); } .app { max-width: 600px; margin-right: calc(50% - 620px); } .journey-heading, .trust-footer { right: calc(50% - 620px); } }
@media (max-width: 850px) {
  .solar-story { display: none; }
  .header-label { display: none; }
  .logo-topo { top: 23px; justify-content: center; }
  .brand-mark { width: 150px; }
  .journey-heading { top: 106px; left: 7%; right: 7%; }
  .app { width: calc(100% - 32px); max-width: 500px; margin: 140px auto 24px; min-height: 0; height: auto; border-radius: 24px; }
  .tela { padding: 60px 24px 26px; }
  /* A pergunta ativa determina a altura do card; o conteúdo longo rola com a página. */
  .tela.is-ativa { position: relative; inset: auto; min-height: max(0px, calc(100svh - 202px)); overflow: visible; }
  .tela-conteudo { gap: 20px; flex-shrink: 0; }
  .pergunta-titulo { font-size: 27px; }
  .trust-footer { position: static; margin: 0 16px calc(24px + env(safe-area-inset-bottom, 0px)); gap: 20px; flex-wrap: wrap; }
}
@media (max-width: 380px) { .tela { padding-left: 18px; padding-right: 18px; } .pergunta-titulo { font-size: 24px; } .journey-heading .eyebrow { font-size: 9px; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* The page can scroll on short screens; keep branding in its own header. */
.logo-topo { position: absolute; }
.journey-heading[hidden] { display: none; }

/* 21st.dev-inspired surface shimmer, luminous cards and gallery navigation.
   References: Shimmer Button (Shatlyk1011), Thumbnail Carousel (ayushmxxn),
   Glowing Card (ravikatiyar162). Native CSS/JS implementation for this site. */
.btn-ouro::before {
  content: ""; position: absolute; inset: -100% -50%; pointer-events: none;
  background: linear-gradient(110deg, transparent 42%, #fff7 50%, transparent 58%);
  transform: translateX(-65%); animation: cta-shimmer 6s ease-in-out infinite;
}
.btn-ouro:disabled::before, .tela:not(.is-ativa) .btn-ouro::before { animation: none; opacity: 0; }
@keyframes cta-shimmer { 0%, 55% { transform: translateX(-65%); } 85%, 100% { transform: translateX(65%); } }
.opcao-card {
  background: radial-gradient(ellipse at 50% 0%, #d7b5680a, transparent 75%), #ffffff03;
  box-shadow: inset 0 1px 0 #ffffff08, 0 8px 24px #0002;
}
.opcao-card:hover, .opcao-card:focus-visible {
  background: radial-gradient(ellipse at 50% 0%, #d7b56824, transparent 85%), #ffffff05;
  box-shadow: inset 0 1px 0 #eed59933, 0 10px 30px #0003, 0 0 24px #d7b56808;
}
.pergunta-microcopy strong { color: #e7d2a3; font-weight: 550; }
.projects-carousel { width: 100%; }
.projects-stage {
  position: relative; height: clamp(170px, 16vw, 210px); overflow: hidden;
  border: 1px solid #e6c9893b; border-radius: 16px; background: #15181c;
  isolation: isolate; touch-action: pan-y;
}
.project-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 850ms ease; }
.project-slide.is-current { opacity: 1; z-index: 1; }
.project-slide img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.projects-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, #0005, transparent 38%, #0002 60%, #000b);
}
.projects-badge {
  position: absolute; z-index: 3; left: 14px; top: 14px; display: flex; align-items: center; gap: 7px;
  padding: 7px 10px; border: 1px solid #ffffff30; border-radius: 999px;
  color: #fff5df; background: #111a; backdrop-filter: blur(10px); font-size: 8px; letter-spacing: 1.2px;
}
.projects-badge i { width: 5px; height: 5px; border-radius: 50%; background: #e5c47e; box-shadow: 0 0 8px #e5c47e; }
.projects-caption {
  position: absolute; z-index: 3; bottom: 14px; left: 15px; right: 15px;
  display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #fff; font-size: 12px;
}
#projectCount { font-size: 9px; letter-spacing: 2px; color: #e9d7b4; font-variant-numeric: tabular-nums; }
.projects-controls { display: flex; justify-content: space-between; align-items: center; padding-top: 8px; }
.project-dots, .project-actions { display: flex; align-items: center; gap: 3px; }
.project-dots button { width: 26px; height: 32px; display: grid; place-items: center; }
.project-dots button::before { content: ""; width: 5px; height: 5px; background: #6f7075; border-radius: 8px; transition: width 300ms, background 300ms; }
.project-dots button[aria-current="true"]::before { width: 21px; background: #e3c588; }
.project-actions button { width: 34px; height: 32px; border-radius: 8px; font-size: 14px; color: #c7b891; border: 1px solid #ffffff10; }
.project-actions button:hover { background: #d7b56816; border-color: #d7b56855; }
#tela-q2 .tela-conteudo { gap: 15px; }
#tela-q2 .pergunta-titulo { font-size: clamp(23px, 2vw, 28px); }
#tela-q2 .opcao-card { min-height: 91px; padding: 15px 10px; gap: 9px; }
#tela-q2 .opcao-card svg { width: 29px; height: 29px; }
#tela-q2 .pergunta-microcopy { margin-top: -6px; }
#opcoesPagamento { gap: 10px; }
#opcoesPagamento .opcao-card { align-items: flex-start; justify-content: flex-start; text-align: left; padding: 16px; gap: 7px; min-height: 132px; line-height: 1.4; }
.payment-symbol { color: #e3c588; font-size: 22px; line-height: 1; margin-bottom: 4px; }
#opcoesPagamento small { font-size: 10px; color: #a4a5ab; line-height: 1.45; font-weight: 400; }
.partner-banks { width: 100%; }
.partner-heading { display: flex; align-items: center; justify-content: center; gap: 12px; font-size: 8px; letter-spacing: 1.8px; color: #a8a49a; }
.partner-heading span { height: 1px; background: #ffffff13; flex: 1; }
.partner-logos { display: flex; justify-content: center; gap: 12px; margin: 13px 0 10px; }
.bank-logo { position: relative; width: 142px; height: 78px; background: #f5f3ed; border: 1px solid #fff; border-radius: 11px; overflow: hidden; box-shadow: 0 4px 16px #0002; }
.bank-logo img { position: absolute; max-width: none; width: 128px; height: 128px; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.bank-sicoob img { width: 156px; height: 156px; }
.partner-note { color: #93949b; font-size: 9px; }
#tela-q6 .tela-conteudo { gap: 19px; }
#tela-q6 .pergunta-titulo { font-size: clamp(24px, 2.05vw, 30px); }
@media (max-width: 850px) {
  .projects-stage { height: 174px; }
  #tela-q2 { padding-top: 55px; }
  #tela-q2 .tela-conteudo { gap: 13px; }
  #tela-q2 .opcoes-grade { gap: 10px; }
  #tela-q2 .opcao-card { min-height: 84px; padding: 12px 8px; }
  #opcoesPagamento .opcao-card { padding: 13px; min-height: 138px; }
  .bank-logo { width: 128px; height: 72px; }
  .bank-cresol img { width: 116px; height: 116px; }
  .bank-sicoob img { width: 144px; height: 144px; }
}
@media (prefers-reduced-motion: reduce) {
  .btn-ouro::before { animation: none; display: none; }
  .project-slide, .project-dots button::before { transition: none; }
}

/* ---------- Pergunta 9: telefone em três partes (+55 fixo, DDD, número) ---------- */
.telefone-grupo { border: 0; margin: 0; padding: 0; min-width: 0; }
.telefone-grupo legend { padding: 0; }
.telefone-linha { display: flex; gap: 10px; align-items: flex-end; }
.telefone-parte { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.telefone-parte-ddi { flex: 0 0 72px; }
.telefone-parte-ddd { flex: 0 0 72px; }
.telefone-parte-numero { flex: 1 1 auto; }
.telefone-subrotulo { font-size: 10px; color: #86878e; letter-spacing: 0.5px; }
.telefone-parte .campo-texto { text-align: center; padding-left: 8px; padding-right: 8px; }
.telefone-parte-numero .campo-texto { text-align: left; padding-left: 16px; }
.campo-ddi {
  display: flex; align-items: center; justify-content: center;
  padding: 16px 8px; font-size: 16px; line-height: 1.5;
  color: #a4a5ab; background: #ffffff08; border: 1px solid #ffffff12; border-radius: 12px;
  cursor: not-allowed; user-select: none;
}
.telefone-parte .campo-texto[aria-invalid="true"] { border-color: var(--erro); }
@media (max-width: 380px) {
  .telefone-linha { gap: 8px; }
  .telefone-parte-ddi, .telefone-parte-ddd { flex-basis: 60px; }
}

/* Autoridade da fabricante antes da etapa de investimento. */
.weg-destaque {
  width: 100%; text-align: left; padding: 18px; border: 1px solid #d7b56855;
  border-radius: 16px; background: radial-gradient(ellipse at 0 0, #075a9c28, transparent 75%), #d7b56806;
  box-shadow: inset 0 1px 0 #f3dc9c13, 0 12px 28px #0002;
}
.weg-apresentacao { display: flex; align-items: center; gap: 16px; }
.weg-logo { width: 80px; height: 80px; flex: 0 0 80px; border-radius: 10px; object-fit: contain; }
.weg-texto { min-width: 0; }
.weg-chamada { color: #d9bd80; font-size: 8px; font-weight: 650; letter-spacing: 1.3px; }
.weg-texto h3 { margin: 6px 0; font-size: 21px; line-height: 1.2; font-weight: 600; letter-spacing: -.5px; }
.weg-texto h3 strong { color: #f0d79e; font-weight: 750; }
.weg-descricao { color: #aeb3ba; font-size: 11px; line-height: 1.65; }
.weg-descricao strong { color: #e4e5e5; font-weight: 550; }
.weg-credenciais { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; padding-top: 12px; border-top: 1px solid #ffffff12; color: #bcbab4; font-size: 9px; }
.weg-credenciais span { display: inline-flex; align-items: center; gap: 6px; }
.weg-credenciais i { color: #e4c789; font-style: normal; }
@media (max-width: 380px) {
  .weg-destaque { padding: 14px; }
  .weg-apresentacao { gap: 11px; }
  .weg-logo { width: 58px; height: 58px; flex-basis: 58px; }
  .weg-texto h3 { font-size: 18px; }
  .weg-chamada { font-size: 7px; letter-spacing: .8px; }
  .weg-descricao { font-size: 10px; }
  .weg-credenciais { gap: 8px 12px; font-size: 8px; }
}

/* Contador −/+ — alvos maiores, brilho dourado e resposta viva ao toque
   (onda a partir do dedo, ícone girando e "+50"/"−50" subindo). */
.contador { position: relative; max-width: 300px; gap: 14px; }
.contador-btn {
  position: relative; overflow: hidden; height: 62px; border-radius: 16px; cursor: pointer;
  color: #f3d894; border: 1px solid #d7b5685c;
  background: radial-gradient(ellipse at 50% 0%, #e8c47a2e, transparent 75%), linear-gradient(160deg, #d7b5681a, #ffffff05 60%);
  box-shadow: inset 0 1px 0 #ffe7a938, 0 10px 24px #0005;
  transition: transform .22s cubic-bezier(.3, 1.6, .5, 1), box-shadow .22s, border-color .22s, background .22s;
  touch-action: manipulation; user-select: none;
}
.contador-btn svg { width: 24px; height: 24px; filter: drop-shadow(0 0 7px #eac77c80); transition: transform .35s cubic-bezier(.3, 1.8, .5, 1); }
.contador-btn:not(:disabled):hover {
  transform: translateY(-3px); border-color: #eccb85cc;
  background: radial-gradient(ellipse at 50% 0%, #e8c47a45, transparent 80%), linear-gradient(160deg, #d7b56826, #ffffff08 60%);
  box-shadow: inset 0 1px 0 #ffe7a955, 0 14px 30px #0006, 0 0 26px #e8c47a2e;
}
.contador-btn:not(:disabled):hover svg { transform: scale(1.12); }
.contador-btn:not(:disabled):active,
.contador-btn.apertado {
  transform: scale(.93); border-color: #f1d08a;
  background: radial-gradient(ellipse at 50% 50%, #e8c47a55, transparent 85%), #d7b56818;
  box-shadow: inset 0 2px 10px #0005, 0 0 32px #e8c47a40;
}
#btnMais.apertado svg { transform: rotate(90deg) scale(1.2); }
#btnMenos.apertado svg { transform: scaleX(1.4); }
.contador-btn:focus-visible { outline: 2px solid #f1d08a; outline-offset: 3px; }
.contador-btn:disabled { opacity: .3; cursor: not-allowed; }
.contador-onda {
  position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, #ffe3a0aa, #e8c47a33 45%, transparent 70%);
  animation: contador-onda .55s ease-out forwards;
}
.contador-flutuante {
  position: absolute; top: -4px; z-index: 2; pointer-events: none; transform: translateX(-50%);
  color: #f6dc9d; font-size: 15px; font-weight: 750; text-shadow: 0 0 12px #e8c47a99;
  animation: contador-subir .8s ease-out forwards;
}
.contador-btn.dica-toque { animation: contador-convite 2s ease-in-out infinite; }
#btnMais.dica-toque { animation-delay: 1s; }
.contador-dica { color: #b9ad8f; }
@keyframes contador-onda { from { transform: scale(0); opacity: 1; } to { transform: scale(2.6); opacity: 0; } }
@keyframes contador-subir { from { opacity: 0; transform: translate(-50%, 6px) scale(.8); } 20% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -38px) scale(1.1); } }
@keyframes contador-convite {
  0%, 70%, 100% { transform: scale(1); border-color: #d7b5685c; box-shadow: inset 0 1px 0 #ffe7a938, 0 10px 24px #0005; }
  35% { transform: scale(1.06); border-color: #f1d08a; box-shadow: inset 0 1px 0 #ffe7a966, 0 10px 24px #0005, 0 0 0 6px #e8c47a1c, 0 0 30px #e8c47a45; }
}

/* Continuar da pergunta 1 — dock fixo no rodapé, travado até o lead rolar. */
.q1-dock {
  position: fixed; z-index: 60; left: 0; right: 0;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  width: min(440px, calc(100% - 36px)); margin: 0 auto; padding: 12px 12px 10px;
  background: #141510ed; border: 1px solid #e8bd6738; border-radius: 22px;
  box-shadow: 0 12px 45px #0009; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  opacity: 0; visibility: hidden; transform: translateY(24px);
  transition: opacity .35s, transform .45s cubic-bezier(.2, .9, .3, 1.2), visibility 0s .45s, border-color .4s, box-shadow .4s;
}
.q1-aberta .q1-dock { opacity: 1; visibility: visible; transform: none; transition-delay: .25s, .25s, 0s, 0s, 0s; }
.q1-dock .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; transform: none; }
.q1-dock .btn[aria-disabled="true"]::before { animation: none; opacity: 0; }
.q1-dock .btn[aria-disabled="true"]::after { transform: rotate(90deg); }
.q1-dock-dica { margin-top: 8px; color: #c6c1b2; font-size: 10px; text-align: center; }
.q1-dock:not(.liberado) .q1-dock-dica::after { content: "↓"; display: inline-block; margin-left: 4px; color: #e7c47b; animation: q1-seta 1.2s ease-in-out infinite; }
.q1-dock-dica.chamando { color: #f1d08a; animation: q1-chamar .5s ease-in-out; }
.q1-dock.liberado { border-color: #e8bd6780; box-shadow: 0 12px 45px #0009, 0 0 45px #e8bd6726; }
.q1-dock.liberado .btn { animation: q1-liberar .6s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes q1-seta { 50% { transform: translateY(3px); } }
@keyframes q1-chamar { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes q1-liberar { 0% { transform: scale(.94); } 55% { transform: scale(1.04); box-shadow: 0 0 40px #e8c47a66; } 100% { transform: scale(1); } }
@media (min-width: 851px) {
  /* Alinhado ao card do formulário, flutuando sobre a borda inferior dele */
  .q1-dock { left: 50%; right: 6%; bottom: clamp(18px, calc(100dvh - 737px), 88px); width: min(434px, calc(44vw - 56px)); }
  #tela-q1 { padding-bottom: 140px; }
}
@media (min-width: 1500px) { .q1-dock { left: calc(50% + 20px); right: calc(50% - 620px); } }
@media (max-width: 850px) { .q1-aberta { padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) {
  .contador-btn.dica-toque, .contador-onda, .contador-flutuante, .q1-dock *, .q1-dock *::after { animation: none !important; }
  .contador-onda, .contador-flutuante { display: none; }
}