/* ==========================================================================
   growth · Powered by Errige: página de vendas

   Direção (método unslop, de Damir Sokolovsky, CC BY 4.0)
   Personagem: direto, prático, pé no chão.
   Mundo: o balcão e o WhatsApp de quem vende todo dia.
   Momentos: a tela real na abertura e a escada verde do caminho.
   Assinatura: barras que sobem, as mesmas do fundo do app.

   Regras: espaçamento em múltiplos de 4, escala tipográfica fixa (--t-*),
   verde só no que importa, um único tempo de resposta e uma única curva.
   ========================================================================== */

:root {
  --preto: #0F0F0F;
  --preto-2: #18181B;
  --preto-3: #26262B;
  --gelo: #F7F7FA;
  --gelo-2: #ECECF1;
  --branco: #FFFFFF;
  --verde: #B4F500;
  --verde-hover: #C4FF2E;

  --texto: #0F0F0F;
  --texto-2: #55555F;
  --texto-3: #6E6E78;
  --claro: #F7F7FA;
  --claro-2: #B4B4BE;
  --claro-3: #8A8A96;

  --linha: rgba(15, 15, 15, 0.1);
  --linha-clara: rgba(247, 247, 250, 0.12);
  --erro-claro: #FF8A80;

  --fonte: "degular-text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-titulo: "degular-display", "degular-text", system-ui, sans-serif;

  --t-14: 14px;
  --t-16: 16px;
  --t-18: 18px;
  --t-20: 20px;
  --t-24: 24px;
  --t-titulo: clamp(32px, 3.6vw, 44px);
  --t-abertura: clamp(40px, 5.2vw, 68px);

  --r-painel: 24px;
  --r-bloco: 16px;
  --r-controle: 10px;

  --saida: cubic-bezier(0.22, 1, 0.36, 1);
  --rapido: 160ms;
  --secao: 160px;
  --largura: 1200px;
  --margem: 24px;
}

*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
  -webkit-text-size-adjust: 100%;
  background: var(--gelo);
}

body {
  margin: 0;
  background: var(--gelo);
  color: var(--texto);
  font-family: var(--fonte);
  font-size: var(--t-18);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
strong { font-weight: 600; }
[hidden] { display: none !important; }
::selection { background: var(--verde); color: var(--preto); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 4px;
}

.sprite { position: absolute; }

.pular {
  position: fixed;
  top: -64px;
  left: 16px;
  z-index: 100;
  padding: 8px 16px;
  border-radius: var(--r-controle);
  background: var(--preto);
  color: var(--branco);
}
.pular:focus { top: 16px; }

.envoltorio {
  width: 100%;
  max-width: calc(var(--largura) + var(--margem) * 2);
  margin: 0 auto;
  padding: 0 var(--margem);
}

/* Títulos: duas vozes, como "Bem vindo, Rafael" no app.
   A primeira parte recua na cor, a segunda carrega a leitura. */
.titulo {
  font-family: var(--fonte-titulo);
  font-size: var(--t-titulo);
  font-weight: 400;
  line-height: 1.08;
  color: var(--texto-2);
  text-wrap: balance;
}
.titulo strong { display: block; font-weight: 600; color: var(--texto); }
#titulo-planos strong { display: inline; }

.apoio {
  margin-top: 16px;
  max-width: 52ch;
  font-size: var(--t-20);
  line-height: 1.4;
  color: var(--texto-2);
  text-wrap: pretty;
}

.secao { padding: var(--secao) 0; }
.secao-branca { background: var(--branco); }

.cabeca { max-width: 720px; margin-bottom: 64px; }

/* ==========================================================================
   Botões
   ========================================================================== */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--t-16);
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--rapido) var(--saida), border-color var(--rapido) var(--saida), color var(--rapido) var(--saida), transform var(--rapido) var(--saida);
}
.botao:active { transform: scale(0.98); }

.botao .seta {
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  margin-right: -12px;
  border-radius: 50%;
}
.botao .seta svg { width: 12px; height: 12px; }

.botao-verde { background: var(--verde); color: var(--preto); }
.botao-verde:hover { background: var(--verde-hover); }
.botao-verde .seta { background: var(--preto); color: var(--verde); }

.botao-escuro { background: var(--preto); color: var(--branco); }
.botao-escuro:hover { background: var(--preto-3); }
.botao-escuro .seta { background: var(--verde); color: var(--preto); }

.botao-claro { background: var(--claro); color: var(--preto); }
.botao-claro:hover { background: var(--branco); }

.botao-contorno { border-color: var(--linha-clara); color: var(--claro); }
.botao-contorno:hover { background: var(--preto-3); }

.botao-contorno-escuro { border-color: rgba(15, 15, 15, 0.2); color: var(--preto); }
.botao-contorno-escuro:hover { background: var(--gelo-2); }

.botao-mini { min-height: 40px; padding: 0 16px; font-size: var(--t-16); }

/* ==========================================================================
   Faixa e navegação
   ========================================================================== */
.faixa {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 36px;
  padding: 4px 16px;
  background: var(--verde);
  color: var(--preto);
  font-size: var(--t-16);
  font-weight: 500;
  text-align: center;
}
.faixa svg { flex: none; width: 12px; height: 12px; }

.topo {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 0;
  pointer-events: none;
}

.topo-pilula {
  pointer-events: auto;
  position: relative;
  top: 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: min(100% - 64px, 960px);
  margin: 0 auto;
  padding: 8px 8px 8px 24px;
  border: 1px solid var(--linha-clara);
  border-radius: 999px;
  background: var(--preto-2);
}

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

.topo-nav { display: flex; gap: 4px; }
.topo-nav a {
  padding: 8px 12px;
  border-radius: 999px;
  font-size: var(--t-16);
  color: var(--claro-2);
  transition: color var(--rapido) var(--saida), background-color var(--rapido) var(--saida);
}
.topo-nav a:hover { color: var(--claro); background: var(--preto-3); }

/* ==========================================================================
   Abertura
   ========================================================================== */
.abertura { padding: 12px 12px 0; }

.abertura-painel {
  position: relative;
  overflow: hidden;
  padding: 192px 32px 0;
  border-radius: var(--r-painel);
  background: var(--preto);
  color: var(--claro);
}

.abertura-texto {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

.abertura h1 {
  font-family: var(--fonte-titulo);
  font-size: var(--t-abertura);
  font-weight: 400;
  line-height: 1.04;
  color: var(--claro-2);
  text-wrap: balance;
}
.abertura h1 span, .abertura h1 strong { display: block; }
.abertura h1 strong { font-weight: 600; color: var(--claro); }

.abertura-sub {
  margin-top: 24px;
  max-width: 54ch;
  font-size: var(--t-20);
  line-height: 1.4;
  color: var(--claro-2);
  text-wrap: pretty;
}

.abertura-acoes {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

.abertura-preco {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-16);
  color: var(--claro-2);
  transition: color var(--rapido) var(--saida);
}
.abertura-preco:hover { color: var(--claro); }
.abertura-preco strong { color: var(--verde); font-weight: 600; }
.abertura-preco span { text-wrap: balance; }
.abertura-preco svg { flex: none; width: 12px; height: 12px; }

.palco {
  position: relative;
  z-index: 2;
  max-width: 1080px;
  height: 480px;
  margin: 128px auto 0;
}

/* Arco: o mesmo horizonte da base do app, só como linha de luz */
.horizonte {
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -32px;
  width: 1900px;
  height: 900px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: var(--preto-2);
  box-shadow:
    0 -1px 0 rgba(180, 245, 0, 0.72),
    0 -32px 96px rgba(180, 245, 0, 0.14);
  pointer-events: none;
}

.palco-tela {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--linha-clara);
  border-bottom: 0;
  border-radius: var(--r-bloco) var(--r-bloco) 0 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
  mask-image: linear-gradient(to bottom, #000 72%, transparent);
}

.palco-conversas,
.palco-celular {
  position: absolute;
  border: 1px solid var(--linha-clara);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.48);
}

.palco-conversas {
  left: -128px;
  top: 148px;
  width: 232px;
  border-radius: var(--r-bloco);
}

.palco-celular {
  right: -56px;
  top: 76px;
  width: 212px;
  border: 4px solid var(--preto-3);
  border-radius: 28px;
}

/* ==========================================================================
   Crédito da Errige
   ========================================================================== */
.credito { padding: 120px 0 0; }

.credito-grade {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 48px;
  align-items: center;
}

.credito-titulo {
  font-size: var(--t-24);
  line-height: 1.2;
  color: var(--texto-2);
  text-wrap: balance;
}
.credito-titulo strong { color: var(--texto); }

.credito-fatos {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 32px;
  font-size: var(--t-16);
  color: var(--texto-2);
}
.credito-fatos strong { color: var(--texto); }

.credito-marcas {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--linha);
}
.credito-marcas p { font-size: var(--t-16); color: var(--texto-2); }

/* As logos vêm brancas: viram uma cor só para a faixa ficar quieta */
.logos {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 32px 40px;
}
.logos img {
  width: auto;
  height: 28px;
  filter: brightness(0);
  opacity: 0.56;
  transition: opacity var(--rapido) var(--saida);
}
.logos img:hover { opacity: 0.88; }
.logos .logo-alta { height: 44px; }

/* ==========================================================================
   Problema
   ========================================================================== */
.problema {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}

.problema-cabeca { position: sticky; top: 112px; }

.dores li {
  padding: 32px 0;
  border-top: 1px solid var(--linha);
}
.dores li:last-child { border-bottom: 1px solid var(--linha); }
.dores h3 {
  font-size: var(--t-24);
  font-weight: 600;
  line-height: 1.2;
}
.dores p { margin-top: 8px; color: var(--texto-2); text-wrap: pretty; }

/* ==========================================================================
   A conta
   ========================================================================== */
.conta {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 8px;
  padding: 8px;
  border-radius: var(--r-painel);
  background: var(--preto);
  color: var(--claro);
}

.conta-entradas { padding: 40px; }
.conta .titulo, .fechamento .titulo { color: var(--claro-2); }
.conta .titulo strong, .fechamento .titulo strong { color: var(--claro); }
.conta .apoio, .fechamento .apoio { color: var(--claro-2); }

.controle {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 16px;
  margin-top: 40px;
}
.controle-valor { display: block; }
.controle-valor label { display: block; }
.controle label { font-size: var(--t-16); color: var(--claro-2); }
.controle output {
  font-size: var(--t-20);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.controle input {
  grid-column: 1 / -1;
  width: 100%;
  height: 28px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  --preenchido: 10%;
}
.controle input::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(to right, var(--claro) var(--preenchido), var(--preto-3) var(--preenchido));
}
.controle input::-moz-range-track { height: 4px; border-radius: 4px; background: var(--preto-3); }
.controle input::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--claro); }
.controle input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  margin-top: -8px;
  border: 0;
  border-radius: 50%;
  background: var(--claro);
}
.controle input::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 50%;
  background: var(--claro);
}

.campo-valor {
  margin-top: 8px;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--linha-clara);
  font-family: var(--fonte-titulo);
  font-size: var(--t-titulo);
  font-weight: 600;
  line-height: 1.1;
  transition: border-color var(--rapido) var(--saida);
}
.campo-valor:focus-within { border-color: var(--claro); }
.campo-valor span { color: var(--claro-3); }
.campo-valor input {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  font-variant-numeric: tabular-nums;
}

.atalhos {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.atalhos button {
  min-height: 32px;
  padding: 4px 12px;
  border: 1px solid var(--linha-clara);
  border-radius: 999px;
  background: transparent;
  font-size: var(--t-14);
  color: var(--claro-2);
  cursor: pointer;
  transition: border-color var(--rapido) var(--saida), background-color var(--rapido) var(--saida), color var(--rapido) var(--saida);
}
.atalhos button:hover { color: var(--claro); background: var(--preto-3); }
.atalhos button[aria-pressed="true"] { border-color: var(--claro); color: var(--claro); background: var(--preto-3); }

.conta-resultado {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 40px;
  border-radius: var(--r-bloco);
  background: var(--preto-2);
}

.conta-rotulo { font-size: var(--t-18); color: var(--claro-2); }
.conta-rotulo strong { color: var(--claro); font-variant-numeric: tabular-nums; }

/* O único número em verde da seção */
.conta-valor {
  margin: 4px 0 8px;
  font-family: var(--fonte-titulo);
  font-size: clamp(40px, 4.6vw, 60px);
  font-weight: 600;
  line-height: 1.05;
  color: var(--verde);
  font-variant-numeric: tabular-nums;
}
.comparativo {
  width: 100%;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--linha-clara);
  display: grid;
  gap: 16px;
}
.comparativo-linha {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
  gap: 4px 16px;
  font-size: var(--t-16);
  color: var(--claro-2);
}
.comparativo-linha strong {
  font-weight: 600;
  color: var(--claro);
  font-variant-numeric: tabular-nums;
}
.comparativo-trilha {
  grid-column: 1 / -1;
  height: 8px;
  border-radius: 4px;
  background: var(--preto-3);
  overflow: hidden;
}
.comparativo-trilha span {
  display: block;
  height: 100%;
  border-radius: 4px;
  transform-origin: left;
  transition: transform 600ms var(--saida);
}
.barra-escapa { background: var(--verde); }
.barra-growth { background: var(--claro-2); }

.conta-paga {
  width: 100%;
  margin: 32px 0 24px;
  font-size: var(--t-24);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: pretty;
}
.conta-aviso { margin-top: 16px; font-size: var(--t-14); color: var(--claro-3); }

/* ==========================================================================
   Por dentro (bento do wireframe)
   ========================================================================== */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}

.bloco {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: var(--r-bloco);
  background: var(--branco);
}
.bloco h3 {
  max-width: 24ch;
  font-size: var(--t-24);
  font-weight: 600;
  line-height: 1.2;
  text-wrap: balance;
}
.bloco p { margin-top: 8px; max-width: 44ch; color: var(--texto-2); text-wrap: pretty; }

.bloco-escuro { background: var(--preto); color: var(--claro); }
.bloco-escuro p { color: var(--claro-2); }

.bloco-a { grid-column: span 5; grid-row: span 2; }
.bloco-b, .bloco-c { grid-column: span 7; }
.bloco-c h3 { max-width: 32ch; }
.bloco-d {
  grid-column: span 12;
  flex-direction: row;
  align-items: center;
  gap: 40px;
  min-height: 320px;
}

.bloco-img-conversas {
  width: 80%;
  max-width: 328px;
  margin: 32px auto -64px;
  border: 1px solid var(--linha-clara);
  border-radius: 12px;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent);
  mask-image: linear-gradient(to bottom, #000 70%, transparent);
}

/* Telas recortadas de propósito: sangram para fora do bloco */
.bloco-recorte {
  flex: 1;
  display: flex;
  align-items: flex-end;
  margin: 24px -160px -8px 0;
}
.bloco-recorte img {
  width: 100%;
  min-width: 720px;
  border-radius: 12px 0 0 12px;
}

.bloco-d-texto { flex: 0 0 296px; }

.leque {
  position: relative;
  flex: 1;
  align-self: stretch;
  min-height: 256px;
}
.leque img {
  position: absolute;
  width: 560px;
  max-width: none;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(15, 15, 15, 0.12);
}
.leque img:nth-child(1) { left: 340px; top: 8px; transform: rotate(3deg); }
.leque img:nth-child(2) { left: 168px; top: 24px; transform: rotate(1deg); }
.leque img:nth-child(3) { left: 0; top: 44px; transform: rotate(-1.5deg); }

.mais {
  margin-top: 64px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
}
.mais p { max-width: 56ch; font-size: var(--t-20); line-height: 1.3; color: var(--texto-2); }
.mais strong { color: var(--texto); }

/* ==========================================================================
   Caminho (degraus em barras, como a textura do app)
   ========================================================================== */
.caminho {
  position: relative;
  overflow: hidden;
  padding: 80px 56px 0;
  border-radius: var(--r-painel);
  background: var(--verde);
}
.caminho-barras {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  gap: 1px;
  pointer-events: none;
}
.caminho-barras span {
  flex: 1;
  background: linear-gradient(to bottom, rgba(15, 15, 15, 0.12), rgba(15, 15, 15, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
}

.caminho-cabeca, .degraus { position: relative; }
.caminho-cabeca { max-width: 720px; }
.caminho .titulo { color: rgba(15, 15, 15, 0.72); }
.caminho .apoio { color: var(--preto); }

.degraus {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  align-items: end;
}

.degrau {
  display: flex;
  flex-direction: column;
  padding: 24px 24px 32px;
  border-radius: var(--r-bloco) var(--r-bloco) 0 0;
  background: var(--preto);
  color: var(--claro);
}
.degrau:nth-child(1) { min-height: 216px; }
.degrau:nth-child(2) { min-height: 272px; }
.degrau:nth-child(3) { min-height: 328px; }

.degrau span { font-size: var(--t-16); color: var(--claro-3); }
.degrau h3 {
  margin-top: 8px;
  font-size: var(--t-24);
  font-weight: 600;
  line-height: 1.2;
}
.degrau p { margin-top: 8px; color: var(--claro-2); text-wrap: pretty; }

/* ==========================================================================
   Planos
   ========================================================================== */
.planos {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.planos-texto { padding: 16px 48px 0 0; }

.link-ajuda {
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-16);
  font-weight: 500;
  color: var(--texto);
  text-decoration: underline;
  text-decoration-color: var(--texto-3);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--rapido) var(--saida);
}
.link-ajuda:hover { text-decoration-color: var(--texto); }
.link-ajuda svg { width: 12px; height: 12px; }

.plano {
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: var(--r-bloco);
  background: var(--branco);
}

.plano h3 {
  font-size: var(--t-24);
  font-weight: 600;
  line-height: 1.2;
}
.plano-para { margin-top: 4px; font-size: var(--t-16); color: var(--texto-2); }

.plano-preco {
  margin-top: 24px;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.plano-preco strong {
  font-family: var(--fonte-titulo);
  font-size: 44px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.plano-preco span { font-size: var(--t-16); color: var(--texto-2); }
.plano-limite { margin-top: 8px; font-size: var(--t-16); color: var(--texto-2); }

.plano ul {
  flex: 1;
  margin: 24px 0 32px;
  padding-top: 24px;
  border-top: 1px solid var(--linha);
  display: grid;
  gap: 16px;
  align-content: start;
  font-size: var(--t-16);
  line-height: 1.3;
  color: var(--texto-2);
}
.plano li { display: flex; gap: 8px; text-wrap: pretty; }
.plano li svg { flex: none; width: 20px; height: 20px; color: var(--texto-3); }
.plano li strong { font-weight: 600; color: var(--texto); }
.plano .botao { width: 100%; }

.plano-destaque { background: var(--preto); color: var(--claro); }
.plano-destaque .plano-para,
.plano-destaque .plano-preco span,
.plano-destaque .plano-limite { color: var(--claro-2); }
.plano-destaque .plano-preco strong { color: var(--verde); }
.plano-destaque ul { border-top-color: var(--linha-clara); color: var(--claro-2); }
.plano-destaque li strong { color: var(--claro); }
.plano-destaque li svg { color: var(--claro-3); }

.plano-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.plano-selo { font-size: var(--t-14); font-weight: 500; color: var(--claro-2); }

/* ==========================================================================
   Perguntas
   ========================================================================== */
.perguntas {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
  gap: 64px;
  align-items: start;
}

.lista-perguntas { border-top: 1px solid var(--linha); }
.lista-perguntas details { border-bottom: 1px solid var(--linha); }
.lista-perguntas summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  font-size: var(--t-20);
  font-weight: 500;
  line-height: 1.3;
  cursor: pointer;
}
.lista-perguntas summary::-webkit-details-marker { display: none; }
.lista-perguntas details p {
  max-width: 60ch;
  padding: 0 40px 24px 0;
  color: var(--texto-2);
}

.mais-menos {
  position: relative;
  flex: none;
  width: 24px;
  height: 24px;
  transition: transform var(--rapido) var(--saida);
}
.mais-menos::before,
.mais-menos::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 11px;
  width: 16px;
  height: 2px;
  background: var(--texto-2);
}
.mais-menos::after { transform: rotate(90deg); }
details[open] .mais-menos { transform: rotate(45deg); }

/* ==========================================================================
   Fechamento e formulário
   ========================================================================== */
.fechamento { padding: 12px; background: var(--branco); }

.fechamento-painel {
  padding: 120px 32px;
  border-radius: var(--r-painel);
  background: var(--preto);
  color: var(--claro);
}

.fechamento-grade {
  max-width: var(--largura);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 64px;
  align-items: center;
}

.link-whats {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--t-16);
  font-weight: 500;
  color: var(--claro);
  text-decoration: underline;
  text-decoration-color: var(--claro-3);
  text-underline-offset: 4px;
  transition: text-decoration-color var(--rapido) var(--saida);
}
.link-whats:hover { text-decoration-color: var(--claro); }
.link-whats svg { width: 12px; height: 12px; }

.formulario {
  scroll-margin-top: 96px;
  padding: 32px;
  border: 1px solid var(--linha-clara);
  border-radius: var(--r-bloco);
  background: var(--preto-2);
}

.form-cabeca {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.form-cabeca h3 {
  font-size: var(--t-24);
  font-weight: 600;
  line-height: 1.2;
}
.form-cabeca span { font-size: var(--t-14); color: var(--claro-3); }

.form-progresso {
  margin-top: 16px;
  height: 2px;
  background: var(--preto-3);
  overflow: hidden;
}
.form-progresso span {
  display: block;
  height: 100%;
  width: 100%;
  background: var(--claro);
  transform: scaleX(0.5);
  transform-origin: left;
  transition: transform 300ms var(--saida);
}

.campos { margin-top: 24px; display: grid; gap: 16px; }

.campo { display: grid; gap: 8px; }
fieldset.campo { min-width: 0; margin: 0; padding: 0; border: 0; }
.campo label,
.campo legend { padding: 0; font-size: var(--t-16); font-weight: 500; }
.campo legend { margin-bottom: 8px; }

.campo input[type="text"],
.campo input[type="tel"] {
  width: 100%;
  height: 48px;
  padding: 0 16px;
  border: 1px solid var(--linha-clara);
  border-radius: var(--r-controle);
  background: var(--preto-3);
  font-size: var(--t-16);
  transition: border-color var(--rapido) var(--saida);
}
.campo input::placeholder { color: var(--claro-3); }
.campo input:focus { outline: none; border-color: var(--claro); }
.campo.com-erro input { border-color: var(--erro-claro); }

.erro { font-size: var(--t-14); color: var(--erro-claro); }
.erro:empty { display: none; }

.opcoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.opcoes-tres { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opcao { position: relative; }
.opcao input { position: absolute; opacity: 0; }
.opcao span {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--linha-clara);
  border-radius: var(--r-controle);
  font-size: var(--t-16);
  line-height: 1.2;
  cursor: pointer;
  transition: border-color var(--rapido) var(--saida), background-color var(--rapido) var(--saida);
}
.opcao input:checked + span { border-color: var(--claro); background: var(--preto-3); }
.opcao input:focus-visible + span { outline: 2px solid var(--claro); outline-offset: 2px; }

.escondido { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.aceite { margin-top: 16px; }
.aceite-caixa {
  display: flex;
  gap: 8px;
  font-size: var(--t-14);
  line-height: 1.4;
  color: var(--claro-2);
  cursor: pointer;
}
.aceite-caixa input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--verde);
  cursor: pointer;
}
.aceite .erro { display: block; margin-top: 4px; }

.form-legal { margin-top: 16px; font-size: var(--t-14); line-height: 1.4; color: var(--claro-3); }
.form-legal a { color: var(--claro-2); text-decoration: underline; text-underline-offset: 2px; }

.form-acoes { margin-top: 16px; display: flex; gap: 8px; }
.form-acoes .botao { flex: 1; }

.voltar {
  min-height: 48px;
  padding: 0 20px;
  border: 1px solid var(--linha-clara);
  border-radius: 999px;
  background: transparent;
  font-size: var(--t-16);
  font-weight: 500;
  cursor: pointer;
}

.ok-titulo {
  font-size: var(--t-24);
  font-weight: 600;
  line-height: 1.2;
}
.ok-texto { margin: 8px 0 24px; color: var(--claro-2); }
[data-vista="ok"] .botao { width: 100%; }

/* ==========================================================================
   Rodapé
   ========================================================================== */
.rodape { overflow: hidden; background: var(--branco); }

.rodape-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding-top: 32px;
  font-size: var(--t-14);
  color: var(--texto-2);
}
.rodape-linha img { width: auto; height: 32px; }
.rodape-linha nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.rodape-linha a { transition: color var(--rapido) var(--saida); }
.rodape-linha a:hover { color: var(--texto); }

.rodape-marca {
  margin: 8px 0 -0.26em;
  text-align: center;
  font-family: var(--fonte-titulo);
  font-size: clamp(120px, 30vw, 460px);
  font-weight: 600;
  line-height: 1;
  color: var(--gelo-2);
  user-select: none;
}

/* Barra fixa no celular: some quando os planos ou o formulário estão na tela */
.barra-celular {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 40;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  border: 1px solid var(--linha-clara);
  border-radius: 999px;
  background: var(--preto);
  color: var(--claro-2);
  font-size: var(--t-16);
  transform: translateY(96px);
  transition: transform 300ms var(--saida);
}
.barra-celular strong { color: var(--claro); font-weight: 500; }
.barra-celular.visivel { transform: translateY(0); }
.barra-acao {
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--verde);
  color: var(--preto);
  font-weight: 600;
}

/* ==========================================================================
   Movimento: uma entrada curta, só com JS e sem pedido de movimento reduzido
   ========================================================================== */
/* Abertura: entra em sequência ao carregar. Só CSS, então sem JS nada fica escondido */
@keyframes subir { from { opacity: 0; transform: translateY(20px); } }
@keyframes subir-tela { from { opacity: 0; transform: translateY(72px); } }
@keyframes vir-esquerda { from { opacity: 0; transform: translate(-40px, 24px); } }
@keyframes vir-direita { from { opacity: 0; transform: translate(40px, 24px); } }
@keyframes acender { from { opacity: 0; } }

.abertura h1 span,
.abertura h1 strong,
.abertura-sub,
.abertura-acoes,
.abertura-preco { animation: subir 800ms var(--saida) both; }
.abertura h1 strong { animation-delay: 90ms; }
.abertura-sub { animation-delay: 180ms; }
.abertura-acoes { animation-delay: 270ms; }
.abertura-preco { animation-delay: 340ms; }
.horizonte { animation: acender 1200ms var(--saida) 380ms both; }
.palco-tela { animation: subir-tela 1000ms var(--saida) 440ms both; }
.palco-conversas { animation: vir-esquerda 900ms var(--saida) 760ms both; }
.palco-celular { animation: vir-direita 900ms var(--saida) 840ms both; }

/* Rolagem: cada bloco sobe uma vez, com um pequeno escalonamento dentro do grupo */
.js .revela {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--saida), transform 700ms var(--saida);
}
.js .revela.visivel { opacity: 1; transform: none; }

.dores li:nth-child(2), .bloco-b, .plano-destaque { transition-delay: 80ms; }
.dores li:nth-child(3), .bloco-c, .plano:not(.plano-destaque) { transition-delay: 160ms; }

.js .logos li { opacity: 0; transition: opacity 600ms var(--saida); }
.js .credito-marcas.visivel .logos li { opacity: 1; }
.logos li:nth-child(2) { transition-delay: 60ms; }
.logos li:nth-child(3) { transition-delay: 120ms; }
.logos li:nth-child(4) { transition-delay: 180ms; }
.logos li:nth-child(5) { transition-delay: 240ms; }
.logos li:nth-child(6) { transition-delay: 300ms; }
.logos li:nth-child(7) { transition-delay: 360ms; }

/* As barras do resultado crescem quando a calculadora aparece */
.js .conta:not(.visivel) .comparativo-trilha span { transform: scaleX(0) !important; }

/* Caminho: a escada do fundo sobe da esquerda para a direita, e os degraus vêm atrás */
.js .caminho-barras span {
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform 900ms var(--saida);
  transition-delay: calc(var(--n) * 40ms);
}
.js .caminho.visivel .caminho-barras span { transform: none; }

.js .degrau {
  opacity: 0;
  transform: translateY(48px);
  transition: opacity 800ms var(--saida), transform 800ms var(--saida);
}
.js .degrau:nth-child(1) { transition-delay: 240ms; }
.js .degrau:nth-child(2) { transition-delay: 360ms; }
.js .degrau:nth-child(3) { transition-delay: 480ms; }
.js .caminho.visivel .degrau { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .abertura *, .abertura h1 * { animation: none !important; }
  .js .revela, .js .degrau, .js .logos li { opacity: 1; transform: none; transition: none; }
  .js .caminho-barras span { transform: none; transition: none; }
  .js .conta:not(.visivel) .comparativo-trilha span { transform: none; }
  .botao, .barra-celular, .mais-menos { transition: none; }
}

/* ==========================================================================
   Responsividade
   ========================================================================== */
@media (max-width: 1360px) {
  .palco-conversas { left: -44px; top: 228px; width: 200px; }
  .palco-celular { right: -8px; }
}

@media (max-width: 1120px) {
  .planos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .planos-texto { grid-column: 1 / -1; padding: 0; margin-bottom: 32px; }
}

@media (max-width: 1020px) {
  :root { --secao: 120px; }
  .topo-nav { display: none; }
  .topo-pilula { width: calc(100% - 40px); padding-left: 16px; }
  .credito-grade, .problema, .perguntas, .fechamento-grade, .conta { grid-template-columns: 1fr; }
  .credito-grade, .problema, .perguntas, .fechamento-grade { gap: 32px; }
  .problema-cabeca { position: static; }
  .bloco-a, .bloco-b, .bloco-c { grid-column: span 12; grid-row: auto; }
  .bloco-a { padding-bottom: 0; }
  .bloco-img-conversas { margin-bottom: 0; }
  .bloco-d { flex-direction: column; align-items: flex-start; }
  .bloco-d-texto { flex: none; }
  .leque { width: 100%; }
  .palco-conversas { display: none; }
}

@media (max-width: 720px) {
  :root { --margem: 16px; --secao: 96px; }
  body { font-size: var(--t-16); padding-bottom: 72px; }
  .apoio, .abertura-sub { font-size: var(--t-18); }
  .abertura { padding: 8px 8px 0; }
  .abertura-painel { padding: 136px 16px 0; border-radius: var(--r-bloco); }
  .abertura-acoes { width: 100%; flex-direction: column; }
  .abertura-acoes .botao { width: 100%; }
  .abertura-preco svg { display: none; }
  .horizonte { width: 1100px; }
  .palco { height: 344px; margin-top: 88px; }
  .palco-tela { display: none; }
  .palco-celular {
    left: 50%;
    right: auto;
    top: 0;
    width: 248px;
    margin-left: -124px;
  }
  .credito { padding-top: 72px; }
  .logos { justify-content: flex-start; gap: 24px 32px; }
  .logos img { height: 24px; }
  .logos .logo-alta { height: 40px; }
  .credito-fatos { grid-template-columns: 1fr; }
  .conta { border-radius: var(--r-bloco); }
  .conta-entradas { padding: 24px 16px; }
  .conta-resultado { padding: 24px 16px; border-radius: 12px; }
  .conta .botao { width: 100%; min-height: 56px; padding: 8px 24px; }
  .bloco { padding: 24px 20px; }
  .bloco-a { padding-bottom: 0; }
  .bloco-d { min-height: 0; }
  .leque { min-height: 188px; }
  .leque img { width: 400px; }
  .leque img:nth-child(1) { left: 96px; }
  .leque img:nth-child(2) { left: 48px; }
  .caminho { padding: 48px 16px 0; border-radius: var(--r-bloco); }
  .degraus { grid-template-columns: 1fr; margin-top: 32px; }
  .degrau:nth-child(n) { min-height: 0; border-radius: 12px; }
  .degrau:last-child { border-radius: 12px 12px 0 0; }
  .planos { grid-template-columns: 1fr; }
  .fechamento { padding: 8px; }
  .fechamento-painel { padding: 72px 16px; border-radius: var(--r-bloco); }
  .formulario { padding: 24px 16px; }
  .lista-perguntas summary { font-size: var(--t-18); }
  .lista-perguntas details p { padding-right: 0; }
  .mais { flex-direction: column; align-items: flex-start; }
  .mais .botao { width: 100%; }
  .barra-celular { display: flex; }
}

@media (max-width: 380px) {
  .opcoes, .opcoes-tres { grid-template-columns: 1fr; }
}