/* ==========================================================================
   Avaliação de carta de crédito — /vender-consorcio
   Página de anúncio: paleta do site, foco em uma coluna e um objetivo.
   ========================================================================== */

/* ---------- Tokens ---------------------------------------------------------
   Escala derivada do manual de marca (ver DESIGN.md §3). Oito degraus, dois
   pesos. Títulos fluidos via clamp(), porque num registro de marca o título
   precisa respirar com a tela; corpo fixo, porque a variação entre viewports
   não justifica fluidez em texto corrido.

   O `font-weight` aqui é o Light do manual, declarado de propósito: antes ele
   só existia por herança do Webflow, e por isso qualquer `font-weight: bold`
   de folha de base vazava sem resistência.
   -------------------------------------------------------------------------- */

.vc-page {
  --cc-display: clamp(2.25rem, 1.6rem + 2.6vw, 3.5rem);
  --cc-h2: clamp(1.75rem, 1.5rem + 1.1vw, 2.25rem);
  --cc-h3: 1.25rem;
  --cc-h4: 1rem;
  --cc-body-lg: 1.125rem;
  --cc-body: 1rem;
  --cc-body-sm: .875rem;
  --cc-caption: .8125rem;

  --cc-lh-display: 1.08;
  --cc-lh-h2: 1.18;
  --cc-lh-h3: 1.3;
  --cc-lh-body: 1.6;
  --cc-lh-sm: 1.5;

  --cc-w-titulo: 900;
  --cc-w-corpo: 300;
  --cc-w-apoio: 400;

  --cc-ls-display: -.02em;
  --cc-ls-h2: -.02em;
  --cc-ls-h3: -.015em;

  --cc-erro: #c0392b;

  /* Limite de componente. O verde da paleta sobre o off-white do card dá
     1,17:1 e reprova o mínimo de 3:1 da WCAG 1.4.11 — literalmente não se vê
     onde clicar. O azul capital a 65% dá 3,12:1 sobre o card e 5,96:1 sobre o
     verde do próprio campo, então serve nos dois lados da borda. O verde
     continua válido como régua e divisória, onde não há componente para
     delimitar. */
  --cc-borda-campo: #355673a6;

  /* Claro sobre fundo escuro. O manual proíbe branco puro, e o off-white tem
     luminância menor que o #fff que estava aqui: a mesma opacidade perdia
     contraste. Estes dois degraus recuperam com folga — 5,14:1 e 5,57:1 na
     ponta azul do gradiente escuro, contra os 4,74:1 de antes. */
  --cc-claro-80: #f7f5f0cc;
  --cc-claro-85: #f7f5f0d9;

  /* Gradiente de marca do manual (pág. 7), com os stops e o ângulo exatos.
     O #4d8aa8 só existe como stop intermediário daqui — não é cor de paleta e
     não aparece sozinho em lugar nenhum. */
  --cc-grad-marca: linear-gradient(110deg, #355673 0%, #4d8aa8 28%, #dae8d1 55%, #efce67 80%, #fcf5e0 100%);
  --cc-grad-quente: linear-gradient(135deg, #efce67 0%, #fcf5e0 100%);

  font-weight: var(--cc-w-corpo);
}

/* Títulos em minúscula, conforme o manual (pág. 8). A lista é explícita de
   propósito: um seletor descendente pegaria "Itaú", "Santander", "WhatsApp",
   "R$", nomes de pessoa e siglas de UF, que precisam manter a caixa. */
.vc-hero h1,
.vc-card-titulo,
.vc-etapa-titulo,
.vc-secao-titulo,
.vc-inviavel h3,
.vc-passo-titulo,
.vc-faq-item summary,
.vc-disclaimer-titulo,
.vc-adm-outra-titulo {
  text-transform: lowercase;
}

/* O webflow.css dá `font-weight: bold` a todo <label>. Os tiles de
   administradora são <label>, então o texto de apoio dentro deles herdava
   negrito sem ninguém ter pedido. */
.vc-adm-opcao {
  font-weight: var(--cc-w-corpo);
}

/* Regular (400) abaixo de 16px, conforme a exceção documentada no DESIGN.md §3:
   DM Sans Light em 13–14px fica frágil demais para leitura em tela. A exceção
   estava escrita mas não aplicada — 18 elementos ainda herdavam o Light de
   `.vc-page`. Esta lista é o cumprimento dela. */
.vc-etapa-ajuda,
.vc-ajuda,
.vc-adm-outra-sub,
.vc-destaque-nota,
.vc-dep-local,
.vc-dep-nota,
.vc-disclaimer p,
.vc-privacidade,
.vc-erro,
.vc-footer p {
  font-weight: var(--cc-w-apoio);
}

/* Placeholder nunca tinha sido estilizado: caía no cinza neutro do navegador,
   que reprova no contraste e é justamente o que o manual proíbe. */
.vc-page ::placeholder {
  color: #121d26a6;
  opacity: 1;
}

.vc-page [hidden] {
  display: none !important;
}

/* O .container-1140 do Webflow traz 88px de padding vertical. Aqui quem define o
   respiro é a seção, então o do container é zerado para não somar duas vezes. */
.vc-header .container-1140,
.vc-hero .container-1140,
.vc-main .container-1140,
.vc-como .container-1140,
.vc-faq .container-1140,
.vc-depoimentos .container-1140,
.vc-footer .container-1140 {
  padding-top: 0;
  padding-bottom: 0;
}

.vc-shell {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Topo ------------------------------------------------------- */

/* Cabeçalho transparente, flutuando sobre o hero.
   Era uma faixa preta chapada empilhada acima do hero, e a emenda entre o preto
   sólido e o topo do gradiente aparecia como um degrau. Sem fundo próprio, o
   gradiente do hero corre inteiro por trás do logo e a emenda deixa de existir.

   `position: absolute` tira o cabeçalho do fluxo, então quem reserva o espaço
   dele agora é o `padding-top` do `.vc-hero` — ver a regra logo abaixo.

   O `z-index: 5` não é arbitrário: é a camada "cabeçalho do site" da escala
   declarada no topo de `css/whatsapp-flutuante.css`. Sem ele o hero pintaria por
   cima, porque os dois são posicionados e o hero vem depois no documento. */
.vc-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  background-color: transparent;
  padding: var(--_tamanhos---16px) 0;
  /* Fio de 1px separando a barra do hero. Os dois dividem o mesmo gradiente, e
     a separação é só a linha.

     Off-white a 14%, e não uma cor chapada: como o fundo por baixo é um
     gradiente de 135°, qualquer cor fixa ficaria forte numa ponta e sumiria na
     outra. Sendo transparência do próprio claro, o fio acompanha — medido,
     1,50:1 na ponta escura e 1,40:1 na ponta azul. Visível como fio, longe de
     virar régua. */
  border-bottom: 1px solid #f7f5f024;
}

.vc-header-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--_tamanhos---16px);
}

/* O logo tinha 96×26 de área clicável. O alvo é de 44px, que é o mínimo de
   dedo — e continua sendo, mesmo com a arte a 32px. */
.vc-header-inner a {
  display: inline-flex;
  align-items: center;
  min-height: var(--_tamanhos---44px);
}

.vc-header img {
  /* 28 -> 32px. Fica na escala de espaçamento em vez dos 32,2px que 15% exatos
     dariam; a diferença é meio pixel e não vale um valor fora do sistema. */
  height: var(--_tamanhos---32px);
  width: auto;
}

.vc-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--_cores---preto);
  background-image: linear-gradient(135deg, var(--_cores---preto) 0%, var(--_cores---azul-capital) 100%);
  /* O topo reserva o espaço do cabeçalho, que passou a flutuar por cima e saiu
     do fluxo. 88px cobrem os 76px dele com folga — e ainda assim a chamada sobe
     24px em relação a quando o cabeçalho empurrava o hero para baixo. */
  padding: var(--_tamanhos---88px) 0 var(--_tamanhos---40px);
  text-align: center;
}

/* O padrão da porta é o elemento gráfico da marca: o "C" de Capital girado 90°.
   Fica baixo o bastante para ser textura, não estampa — quem lê o texto não
   precisa disputar com ele. */
.vc-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../images/padrao-porta-branco.png");
  /* Uma cópia só, cobrindo o hero inteiro — sem `repeat`, sem emenda.

     A arte tem 1087×1081 e **não é um tile contínuo**: o período horizontal do
     desenho é 106,33px, então em 1087px cabem 10,22 períodos. A sobra de 0,22
     era a costura vertical que aparecia a cada 380px, quando a folha pedia
     `background-size: 380px` com `repeat`. Na vertical o erro é bem menor
     (diferença de 3,77 contra 2,1 de referência), mas na horizontal era 26,62 —
     quase 10× o ruído de fundo, e por isso se via.

     `cover` resolve por eliminação: com uma cópia só não existe junta para errar.
     O custo é que o motivo muda de escala conforme a proporção do hero, porque
     `cover` escala pela dimensão que falta — pela largura no desktop, pela altura
     no celular. Medido abaixo, no comentário do DESIGN.md §"Textura do hero". */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  /* 6% → 4% → 2% em 2026-08-26. Com o `cover` o motivo ficou ~3× maior, e nesse
     tamanho a mesma opacidade pesa mais: menos repetição, mais área contínua por
     forma. A 2% ele sustenta o gradiente sem competir com a headline. */
  opacity: .02;
  pointer-events: none;
}

/* Sem pílula desde 2026-08-26. Ela era preto sobre amarelo num raio de 104px, e
   ocupava o slot do eyebrow com decoração no lugar de hierarquia. Agora é só o
   texto em amarelo sobre o gradiente escuro — 9,9:1, bem acima do mínimo. */
.vc-kicker {
  display: block;
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-titulo);
  color: var(--_cores---amarelo);
  margin: 0 0 var(--_tamanhos---16px);
}

.vc-hero h1 {
  color: var(--_cores---branco);
  font-size: var(--cc-display);
  line-height: var(--cc-lh-display);
  font-weight: var(--cc-w-titulo);
  letter-spacing: var(--cc-ls-display);
  text-wrap: balance;
  margin: 0 0 var(--_tamanhos---16px);
}

.vc-hero h1 em {
  color: var(--_cores---amarelo);
  font-style: normal;
}

.vc-hero-sub {
  color: var(--cc-claro-80);
  font-size: var(--cc-body-lg);
  /* Texto claro sobre fundo escuro lê como mais leve: entrelinha e tracking
     ganham uma folga para compensar. */
  line-height: calc(var(--cc-lh-body) + .06);
  letter-spacing: .01em;
  margin: 0 auto;
  max-width: 50ch;
}

/* ---------- Faixa de garantias ------------------------------------------
   Os três pontos saíram do fim do hero e viraram faixa entre o hero e o
   formulário.

   Verde como superfície, e não creme nem off-white: contra o creme da seção
   seguinte, o off-white daria 1,00:1 e a faixa não existiria — é a armadilha
   que o §8 registra. O verde dá 1,17:1 contra o creme e separa com folga do
   gradiente escuro do hero logo acima.
   ------------------------------------------------------------------------ */

.vc-faixa {
  background-color: var(--_cores---verde);
}

.vc-faixa .container-1140 {
  padding-top: var(--_tamanhos---20px);
  padding-bottom: var(--_tamanhos---20px);
}

.vc-faixa-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--_tamanhos---12px);
}

.vc-faixa-lista li {
  display: flex;
  align-items: center;
  gap: var(--_tamanhos---12px);
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
  line-height: var(--cc-lh-sm);
  color: var(--_cores---preto);
}

/* O ícone não encolhe e não vira quadrado colorido: é traço, do mesmo peso da
   tipografia ao lado. `stroke` no CSS e não no markup para o SVG herdar a cor. */
.vc-faixa-icone {
  flex: none;
  width: var(--_tamanhos---24px);
  height: var(--_tamanhos---24px);
  fill: none;
  stroke: var(--_cores---azul-capital);
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media screen and (min-width: 700px) {
  .vc-faixa-lista {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--_tamanhos---32px);
  }

  /* Divisória entre os três, não contorno em cada um: é uma informação só. */
  .vc-faixa-lista li + li {
    padding-left: var(--_tamanhos---32px);
    border-left: 1px solid #35567333;
  }
}

/* ---------- Formulário -------------------------------------------------- */

/* O gradiente de marca como fundo desta seção foi testado em 2026-08-26 e
   revertido no mesmo dia. Dois motivos medidos:

   1. O §2 diz que o amarelo é cor de ação, não de superfície ampla. A faixa à
      direita do card caía depois do stop de 80% do gradiente, ou seja era
      `#efce67` puro — a mesma cor do botão "Continuar" a 258px dali. O CTA
      perdia o monopólio da cor de ação.
   2. A borda esquerda do card cortava a 4,15:1 contra o fundo e a direita
      dissolvia a 1,34:1. Assimetria de recorte num card centralizado lê como
      acidente, não como decisão.

   Volta ao creme chapado, e o fio do gradiente volta para o topo do card. */
.vc-main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--_cores---creme);
  padding: var(--_tamanhos---32px) 0 var(--_tamanhos---64px);
}

.vc-card {
  position: relative;
  background-color: var(--_cores---branco);
  border: 1px solid var(--_cores---verde);
  /* box grande: 32px é o degrau que o manual (pág. 5) prevê para este porte */
  border-radius: var(--_tamanhos---32px);
  box-shadow: 0 1px 2px #121d260f, 0 8px 24px #121d260f, 0 32px 64px #121d2614;
  /* 40 -> 28px: parte do enxugamento para o card caber numa tela sem rolagem. */
  padding: var(--_tamanhos---28px);
  overflow: hidden;
}

/* O fio de 4px no topo do card saiu em 2026-08-26. O gradiente de marca passou
   a viver na trilha de etapas logo abaixo, onde ele informa em vez de só
   decorar — ver `.vc-progresso li`. Dois fios do mesmo gradiente a 24px de
   distância era repetição, e a segunda mais fraca. */


.vc-card-titulo {
  font-size: var(--cc-h3);
  line-height: var(--cc-lh-h3);
  font-weight: var(--cc-w-titulo);
  letter-spacing: var(--cc-ls-h3);
  text-wrap: balance;
  color: var(--_cores---preto);
  margin: 0 0 var(--_tamanhos---8px);
}

.vc-card-sub {
  font-size: var(--cc-body);
  line-height: var(--cc-lh-body);
  max-width: 52ch;
  color: #121d26b3;
  margin: 0 0 var(--_tamanhos---32px);
}

/* ---------- Etapas ---------------------------------------------------------
   O formulário é dividido em duas telas, mais o resultado. A trilha diz onde a
   pessoa está; a navegação vive em js/vender-consorcio.js.
   -------------------------------------------------------------------------- */

.vc-progresso {
  display: flex;
  gap: var(--_tamanhos---8px);
  list-style: none;
  margin: 0 0 var(--_tamanhos---24px);
  padding: 0;
}

/* Número do passo mais rótulo, centralizados sob o risco.
   O rótulo era alinhado à esquerda e sozinho, e a trilha lia como três títulos
   soltos em vez de três etapas. O número vem do `data-step` que o JS já usa
   para marcar estado, então não precisou de markup novo. */
.vc-progresso li {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--_tamanhos---8px);
  font-size: var(--cc-body-sm);
  line-height: var(--cc-lh-sm);
  font-weight: var(--cc-w-apoio);
  color: #121d26b3;
  padding-top: var(--_tamanhos---12px);
  border-top: var(--_tamanhos---4px) solid var(--_cores---verde);
  transition: color .2s ease, border-color .2s ease;
}

.vc-progresso li:before {
  content: attr(data-step);
  flex: none;
  width: var(--_tamanhos---20px);
  height: var(--_tamanhos---20px);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: var(--cc-caption);
  font-weight: var(--cc-w-titulo);
  line-height: 1;
  /* Não alcançada: contorno, sem preenchimento. O peso visual do círculo cheio
     fica reservado para onde a pessoa já esteve. */
  border: 1.5px solid var(--_cores---verde);
  color: #121d26b3;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.vc-progresso li[data-state="current"] {
  color: var(--_cores---preto);
  border-top-color: var(--_cores---azul-capital);
  font-weight: var(--cc-w-titulo);
}

.vc-progresso li[data-state="done"] {
  color: var(--_cores---azul-capital);
  border-top-color: var(--_cores---azul-capital);
}

/* Atual e concluída: círculo cheio em azul capital. Número a 7,06:1 sobre ele. */
.vc-progresso li[data-state="current"]:before,
.vc-progresso li[data-state="done"]:before {
  background-color: var(--_cores---azul-capital);
  border-color: var(--_cores---azul-capital);
  color: var(--_cores---branco);
}

.vc-etapa-head {
  margin-bottom: var(--_tamanhos---24px);
}

.vc-etapa-titulo {
  font-size: var(--cc-h3);
  line-height: var(--cc-lh-h3);
  font-weight: var(--cc-w-titulo);
  letter-spacing: var(--cc-ls-h3);
  text-wrap: balance;
  color: var(--_cores---preto);
  margin: 0;
}

/* O foco vai para o título quando a etapa troca, para o leitor de tela anunciar
   a mudança. O anel do navegador ali não ajuda ninguém a ver o que aconteceu. */
.vc-etapa-titulo:focus {
  outline: none;
}

.vc-etapa-ajuda {
  font-size: var(--cc-body-sm);
  line-height: var(--cc-lh-sm);
  color: #121d26b3;
  max-width: 52ch;
  margin: var(--_tamanhos---8px) 0 0;
}

/* Dois botões por etapa. No celular o principal fica em cima e o "Voltar"
   embaixo, para o dedo achar primeiro o caminho para frente. */
.vc-etapa-acoes {
  display: flex;
  flex-direction: column;
  gap: var(--_tamanhos---12px);
}

.vc-etapa-acoes .vc-btn {
  margin-top: 0;
}

@media screen and (min-width: 600px) {
  .vc-etapa-acoes {
    flex-direction: row-reverse;
    align-items: center;
  }

  .vc-etapa-acoes .vc-btn-principal {
    flex: 1;
  }

  .vc-etapa-acoes .vc-btn-fantasma {
    flex: none;
    width: auto;
    padding-left: var(--_tamanhos---24px);
    padding-right: var(--_tamanhos---24px);
  }
}

.vc-grupo {
  /* 24 -> 16px em 2026-08-26. A etapa 2 passou a ser a mais alta do card depois
     que as descricoes dos tres campos sairam, e sao tres grupos: cada 8px aqui
     vale 24px na altura total. */
  margin-bottom: var(--_tamanhos---16px);
}

.vc-grupo > label,
.vc-adm-livre > label {
  display: block;
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-titulo);
  color: var(--_cores---preto);
  margin-bottom: var(--_tamanhos---8px);
}

.vc-ajuda {
  font-size: var(--cc-caption);
  line-height: var(--cc-lh-sm);
  color: #121d26b3;
  max-width: 52ch;
  margin: 0 0 var(--_tamanhos---8px);
}

/* ---------- Campos ---------------------------------------------------------
   O poço do campo é verde e o card é off-white: 1,31:1 de diferença de
   luminância, que é um degrau de matéria que se vê. Antes o campo era creme
   dentro de card off-white — 1,00:1, a mesma luminância, então a decisão de
   "campo dentro de card" existia só no CSS.

   A borda é o que cumpre a WCAG 1.4.11: o verde dava 1,17:1 e reprovava; o
   `--cc-borda-campo` dá 3,12:1. Ao focar, o poço clareia para off-white — o
   campo ativo é o mais claro da tela, não o mais escuro.
   -------------------------------------------------------------------------- */

.vc-page input[type="text"],
.vc-page input[type="email"],
.vc-page input[type="tel"],
.vc-page select {
  font-family: inherit;
  font-size: var(--cc-body);
  line-height: var(--cc-lh-body);
  width: 100%;
  min-height: var(--_tamanhos---52px);
  padding: var(--_tamanhos---12px) var(--_tamanhos---16px);
  border: 1.5px solid var(--cc-borda-campo);
  border-radius: var(--_tamanhos---16px);
  background-color: var(--_cores---verde);
  color: var(--_cores---preto);
  box-shadow: inset 0 2px 4px #121d2610;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  appearance: none;
}

.vc-page select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='8' viewBox='0 0 14 8'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23355673' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--_tamanhos---16px) center;
  padding-right: var(--_tamanhos---44px);
}

.vc-page input:focus,
.vc-page select:focus {
  outline: none;
  border-color: var(--_cores---azul-capital);
  background-color: var(--_cores---branco);
  box-shadow: 0 0 0 3px #3556732e, inset 0 2px 4px #121d2600;
}

.vc-page input[aria-invalid="true"],
.vc-page select[aria-invalid="true"] {
  border-color: var(--cc-erro);
}

/* Campo de moeda com o "R$" fixo, para a pessoa não digitar o símbolo. */
.vc-moeda {
  position: relative;
}

.vc-moeda:before {
  content: "R$";
  position: absolute;
  left: var(--_tamanhos---16px);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--cc-body);
  font-weight: var(--cc-w-corpo);
  color: #121d26b3;
  pointer-events: none;
}

/* O seletor precisa de `.vc-page` para empatar em especificidade com a regra base
   `.vc-page input[type="text"]`, que define o padding. Sem isso a base vence, o
   padding-left volta a 16px e o valor digitado passa por baixo do "R$". */
.vc-page .vc-moeda input {
  padding-left: var(--_tamanhos---48px);
}

/* Textarea segue as mesmas medidas dos inputs, com altura própria. */
.vc-page textarea {
  font-family: inherit;
  font-size: var(--cc-body);
  line-height: var(--cc-lh-body);
  width: 100%;
  padding: var(--_tamanhos---12px) var(--_tamanhos---16px);
  border: 1.5px solid var(--cc-borda-campo);
  border-radius: var(--_tamanhos---16px);
  background-color: var(--_cores---verde);
  color: var(--_cores---preto);
  box-shadow: inset 0 2px 4px #121d2610;
  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
  resize: vertical;
  min-height: var(--_tamanhos---92px);
}

.vc-page textarea:focus {
  outline: none;
  border-color: var(--_cores---azul-capital);
  background-color: var(--_cores---branco);
  box-shadow: 0 0 0 3px #3556732e;
}

/* Marca "opcional" dentro do rótulo, para não parecer campo obrigatório. */
.vc-opcional-inline {
  font-size: var(--cc-caption);
  font-weight: var(--cc-w-apoio);
  color: var(--_cores---azul-capital);
  background-color: #35567318;
  padding: var(--_tamanhos---4px) var(--_tamanhos---8px);
  /* pílula: 999px, que o §4 sanciona. Era `--_tamanhos---104px`, fora da
     escala de 4/8/16/24/32 — só parecia certo porque estes elementos têm menos
     de 208px e o navegador arredondava até virar pílula. */
  border-radius: 999px;
  margin-left: var(--_tamanhos---8px);
  vertical-align: 1px;
}

/* ---------- Três materiais, três significados ------------------------------
   O disclaimer, o aviso e a recusa eram a mesma caixa creme com fio verde e
   título em 900 — três estados semânticos diferentes com a mesma aparência,
   sendo que um deles é a pior notícia que a página dá. Agora:

   .vc-disclaimer  creme + fio verde      nota de rodapé, informativa
   .vc-inviavel    verde + borda azul     mudança de estado, o plano mais escuro
   -------------------------------------------------------------------------- */

.vc-disclaimer {
  margin: var(--_tamanhos---24px) 0 0;
  padding: var(--_tamanhos---24px);
  border-radius: var(--_tamanhos---16px);
  background-color: var(--_cores---creme);
  border: 1px solid var(--_cores---verde);
}

.vc-disclaimer-titulo {
  font-size: var(--cc-h4);
  line-height: var(--cc-lh-h3);
  font-weight: var(--cc-w-titulo);
  color: var(--_cores---preto);
  margin: 0 0 var(--_tamanhos---8px);
}

.vc-disclaimer p {
  font-size: var(--cc-body-sm);
  line-height: var(--cc-lh-sm);
  color: #121d26b3;
  max-width: 52ch;
  margin: 0 0 var(--_tamanhos---8px);
}

.vc-disclaimer p:last-child {
  margin-bottom: 0;
}

.vc-disclaimer strong {
  color: var(--_cores---preto);
  font-weight: var(--cc-w-titulo);
}

.vc-erro {
  font-size: var(--cc-caption);
  line-height: var(--cc-lh-sm);
  color: var(--cc-erro);
  margin: var(--_tamanhos---8px) 0 0;
  min-height: 0;
}

.vc-erro:empty {
  display: none;
}

/* ---------- Barras de valor ------------------------------------------------
   Atalho para os campos de carta e saldo devedor. O preenchimento colorido é
   pintado em js/vender-consorcio.js, porque depende do valor corrente — e é
   `style.background`, o atalho, então nenhuma propriedade `background-*` desta
   folha sobrevive nele. O alvo cresce pelo polegar, não pela trilha.

   O polegar tem 32px: alvo de dedo, dentro da escala de 8, e acima do mínimo
   de 24px da WCAG 2.5.8. Antes eram 30px, fora da grade.
   -------------------------------------------------------------------------- */

.vc-slider {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: var(--_tamanhos---8px);
  margin: var(--_tamanhos---20px) 0 0;
  /* pílula: 999px, que o §4 sanciona. Era `--_tamanhos---104px`, fora da
     escala de 4/8/16/24/32 — só parecia certo porque estes elementos têm menos
     de 208px e o navegador arredondava até virar pílula. */
  border-radius: 999px;
  background: #35567326;
  cursor: grab;
}

.vc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  /* 32 -> 44px: era 12px abaixo do mínimo de alvo de toque, e o input tem só
     8px de altura, então não havia padding para compensar. */
  width: var(--_tamanhos---44px);
  height: var(--_tamanhos---44px);
  border-radius: 50%;
  background-color: var(--_cores---branco);
  border: 7px solid var(--_cores---azul-capital);
  box-shadow: 0 4px 14px #121d2633;
  cursor: grab;
}

.vc-slider::-moz-range-thumb {
  /* Espelha o Chrome: 44px de alvo de toque. */
  width: var(--_tamanhos---44px);
  height: var(--_tamanhos---44px);
  border-radius: 50%;
  background-color: var(--_cores---branco);
  border: 7px solid var(--_cores---azul-capital);
  box-shadow: 0 4px 14px #121d2633;
  cursor: grab;
}

/* O anel anterior era `box-shadow` a 1,25:1 com `outline: none` — quem navega
   por teclado não via qual barra estava focada, enquanto os tiles logo acima
   faziam certo. Mesmo tratamento dos tiles: 7,06:1. */
.vc-slider:focus-visible {
  outline: 3px solid var(--_cores---azul-capital);
  outline-offset: var(--_tamanhos---4px);
}

.vc-slider-escala {
  display: flex;
  justify-content: space-between;
  margin-top: var(--_tamanhos---4px);
  font-size: var(--cc-caption);
  line-height: var(--cc-lh-sm);
  font-weight: var(--cc-w-apoio);
  color: #121d26b3;
}

/* ---------- Administradoras -----------------------------------------------
   Grid de logos das marcas que a operação compra, mais um tile "Outra".

   O cartão externo é sempre igual: mesma cor, mesma borda, mesmo tamanho. O que
   muda é a plaquinha atrás do logo, porque metade dessas marcas só publica
   logotipo branco e ele desapareceria no creme da página. Recolorir logo de
   terceiro para uniformizar seria mexer na identidade da marca, então quem se
   adapta é o fundo.
   -------------------------------------------------------------------------- */

.vc-adms {
  border: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--_tamanhos---12px);
}

.vc-adm-opcao {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--_tamanhos---4px);
  padding: var(--_tamanhos---8px);
  border: 1.5px solid var(--cc-borda-campo);
  border-radius: var(--_tamanhos---16px);
  background-color: var(--_cores---branco);
  cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.vc-adm-opcao:hover {
  border-color: var(--_cores---azul-capital);
  box-shadow: 0 6px 16px #121d2614;
  transform: translateY(-2px);
}

/* O radio sai da tela mas continua focável pelo teclado, então `display: none`
   está fora de questão. */
.vc-adm-opcao input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.vc-adm-placa {
  display: flex;
  align-items: center;
  justify-content: center;
  /* 52 -> 44px em 2026-08-26, junto com as 5 colunas: dez linhas de altura a
     menos por tile, e o logo continua legível porque a placa nunca foi o
     gargalo de leitura — o nome embaixo é que identifica. */
  height: var(--_tamanhos---36px);
  padding: var(--_tamanhos---4px) var(--_tamanhos---8px);
  border-radius: var(--_tamanhos---8px);
}

.vc-adm-placa[data-fundo="escuro"] {
  background-color: var(--_cores---preto);
}

/* Era `#fff`, que o manual proíbe. A isenção de branco puro vale para o
   interior de SVG de terceiro, não para a placa em CSS de página. */
.vc-adm-placa[data-fundo="claro"] {
  background-color: var(--_cores---branco);
}

.vc-adm-placa img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* Logo que não é wordmark deitado precisa de mais altura para não virar selo. */
.vc-adm-placa img.vc-adm-quadrado {
  max-height: var(--_tamanhos---44px);
}

.vc-adm-nome {
  display: block;
  text-align: center;
  font-size: var(--cc-caption);
  font-weight: var(--cc-w-apoio);
  line-height: var(--cc-lh-sm);
  color: #121d26b3;
}

.vc-adm-opcao:has(input:checked) {
  border-color: var(--_cores---azul-capital);
  background-color: #35567310;
  box-shadow: 0 0 0 2px #35567340;
}

.vc-adm-opcao:has(input:checked) .vc-adm-nome {
  color: var(--_cores---azul-capital);
}

.vc-adm-opcao:has(input:focus-visible) {
  outline: 3px solid var(--_cores---azul-capital);
  outline-offset: 2px;
}

/* ---------- "Não encontrou a sua?" --------------------------------------
   Ocupa a linha inteira, abaixo das marcas, e é a única opção do grid com
   frase em vez de logo. Uma décima primeira caixinha igual às outras faria
   parecer a décima primeira administradora, que é justamente o contrário.
   ------------------------------------------------------------------------ */

.vc-adm-outra {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: var(--_tamanhos---16px);
  padding: var(--_tamanhos---16px);
  border-style: dashed;
  border-color: #35567366;
  background-color: #3556730a;
}

.vc-adm-outra:hover {
  border-color: var(--_cores---azul-capital);
  background-color: #35567314;
}

.vc-adm-outra-marca {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--_tamanhos---40px);
  height: var(--_tamanhos---40px);
  border-radius: 50%;
  background-color: var(--_cores---azul-capital);
  color: var(--_cores---branco);
  font-size: var(--cc-h3);
  font-weight: var(--cc-w-titulo);
  line-height: 1;
}

.vc-adm-outra-titulo {
  display: block;
  font-size: var(--cc-h4);
  font-weight: var(--cc-w-titulo);
  line-height: var(--cc-lh-h3);
  color: var(--_cores---preto);
}

.vc-adm-outra-sub {
  display: block;
  margin-top: var(--_tamanhos---4px);
  font-size: var(--cc-caption);
  line-height: var(--cc-lh-sm);
  color: #121d26b3;
}

/* Marcada, ela vira borda cheia: o tracejado é o convite, não o estado final. */
.vc-adm-outra:has(input:checked) {
  border-style: solid;
  border-color: var(--_cores---azul-capital);
}

/* Campo livre que aparece quando "Outra" está marcada. */
.vc-adm-livre {
  margin-top: var(--_tamanhos---16px);
}

.vc-adm-livre[hidden] {
  display: none;
}

@media screen and (min-width: 600px) {
  .vc-adms {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Cinco colunas e não quatro desde 2026-08-26: são 10 marcas, então 5 fecha em
   duas linhas exatas em vez de três com a última pela metade. Só isso tira uma
   linha inteira de tile da altura do card, que é o que fazia o formulário não
   caber numa tela de 1080 de altura. */
@media screen and (min-width: 900px) {
  .vc-adms {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--_tamanhos---8px);
  }
}

/* ---------- Botões ------------------------------------------------------ */

.vc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--_tamanhos---8px);
  width: 100%;
  min-height: var(--_tamanhos---56px);
  padding: var(--_tamanhos---16px) var(--_tamanhos---24px);
  border: none;
  /* pílula: 999px, que o §4 sanciona. Era `--_tamanhos---104px`, fora da
     escala de 4/8/16/24/32 — só parecia certo porque estes elementos têm menos
     de 208px e o navegador arredondava até virar pílula. */
  border-radius: 999px;
  font-family: inherit;
  font-size: var(--cc-body-lg);
  font-weight: var(--cc-w-titulo);
  line-height: var(--cc-lh-h3);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, transform .1s ease;
}

.vc-btn-principal {
  background-color: var(--_cores---amarelo);
  color: var(--_cores---preto);
  box-shadow: 0 2px 6px #efce6740, 0 10px 24px #121d2614;
  transition: background-color .15s ease, transform .1s ease, box-shadow .15s ease;
}

/* O hover era `#f3d982`, um amarelo inventado que não é o `#efce67` da marca.
   Agora é o gradiente quente oficial (manual pág. 7): a mesma cor de base
   ganhando um brilho do amarelo para o creme. Texto preto sobre a ponta mais
   clara: 15,68:1. */
.vc-btn-principal:hover {
  background-image: var(--cc-grad-quente);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px #efce6759, 0 16px 32px #121d261f;
}

.vc-btn-principal:active {
  transform: translateY(1px);
  box-shadow: 0 1px 3px #efce6740;
}

/* Era verde saturado de ponta a ponta (`#25d366` com texto `#05331a`), contra a
   decisão registrada de "verde só no ícone" que o botão flutuante já cumpria.
   Passa a azul capital, o que resolve duas coisas de uma vez: a cor volta para a
   paleta, e o botão deixa de ser uma pílula amarela idêntica à de cima com a
   mesma palavra "proposta" — duas cores, dois trabalhos. Texto: 7,06:1. */
.vc-btn-whats {
  background-color: var(--_cores---azul-capital);
  color: var(--_cores---branco);
  box-shadow: 0 2px 6px #35567340, 0 10px 24px #121d2614;
}

.vc-btn-whats:hover {
  background-color: var(--_cores---preto);
}

.vc-btn-fantasma {
  background-color: var(--_cores---transparente);
  color: var(--_cores---azul-capital);
  border: 1.5px solid var(--cc-borda-campo);
  min-height: var(--_tamanhos---48px);
  font-size: var(--cc-body);
}

.vc-btn-fantasma:hover {
  border-color: var(--_cores---azul-capital);
}

/* ---------- Resultado --------------------------------------------------- */

.vc-resultado {
  margin-top: var(--_tamanhos---32px);
}

/* ---------- O número -------------------------------------------------------
   Este bloco é o produto: é a única razão pela qual alguém pagou o clique.
   Ele estava em `--cc-h2` — 36px, exatamente o tamanho de "Dúvidas frequentes"
   — dentro de uma caixa de raio 24px sem sombra própria, enquanto o hero tinha
   56px e 513px de altura. A página anunciava mais alto do que entregava.

   Agora carrega o `--cc-display`, o mesmo degrau do h1, com raio de box grande
   e sombra própria: é o objeto mais pesado do card, e o mais escuro depois do
   hero e do rodapé.
   -------------------------------------------------------------------------- */

.vc-destaque {
  background-image: linear-gradient(135deg, var(--_cores---preto) 0%, var(--_cores---azul-capital) 100%);
  border-radius: var(--_tamanhos---32px);
  padding: var(--_tamanhos---40px) var(--_tamanhos---32px);
  text-align: center;
  color: var(--_cores---branco);
  box-shadow: 0 2px 8px #121d2626, 0 16px 40px #121d2633;
}

.vc-destaque-label {
  font-size: var(--cc-body-sm);
  font-weight: var(--cc-w-apoio);
  color: var(--_cores---amarelo);
  margin: 0 0 var(--_tamanhos---8px);
}

.vc-destaque-faixa {
  font-size: var(--cc-display);
  line-height: var(--cc-lh-display);
  font-weight: var(--cc-w-titulo);
  letter-spacing: var(--cc-ls-display);
  text-wrap: balance;
  margin: 0;
}

/* A frase que explica que o valor é à vista era a menos legível do bloco:
   `#ffffff99` sobre a ponta azul do gradiente dava 3,95:1 e reprovava. Sobe um
   degrau de escala e vai para 5,57:1 — é a linha que reduz ansiedade, tem que
   ser lida. */
.vc-destaque-nota {
  font-size: var(--cc-body-sm);
  line-height: calc(var(--cc-lh-sm) + .06);
  color: var(--cc-claro-85);
  margin: var(--_tamanhos---16px) 0 0;
}

/* Números que sustentam a faixa, para a estimativa não parecer arbitrária. */
.vc-linhas {
  margin: var(--_tamanhos---24px) 0 0;
  border: 1px solid var(--_cores---verde);
  border-radius: var(--_tamanhos---16px);
  overflow: hidden;
}

.vc-linha {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--_tamanhos---16px);
  padding: var(--_tamanhos---16px);
  border-bottom: 1px solid var(--_cores---verde);
  font-size: var(--cc-body);
  line-height: var(--cc-lh-body);
}

.vc-linha:last-child {
  border-bottom: none;
}

.vc-linha dt {
  color: #121d26b3;
  margin: 0;
}

.vc-linha dd {
  margin: 0;
  font-weight: var(--cc-w-apoio);
  color: var(--_cores---preto);
  text-align: right;
  white-space: nowrap;
}

.vc-linha-destaque {
  background-color: #35567310;
}

/* Aviso quando a estimativa fica abaixo do que a pessoa já pagou. */
/* A recusa é a pior notícia que a página dá, para o público mais frágil que ela
   atende, e saía numa caixa creme com fio de 1,17:1 — material de nota de
   rodapé. Passa para o plano verde com borda azul: é o único bloco do card com
   esse material, então a mudança de estado se vê antes de se ler. */
.vc-inviavel {
  margin: var(--_tamanhos---24px) 0 0;
  padding: var(--_tamanhos---24px);
  border-radius: var(--_tamanhos---16px);
  background-color: var(--_cores---verde);
  border: 1.5px solid var(--cc-borda-campo);
  font-size: var(--cc-body);
  line-height: var(--cc-lh-body);
  color: var(--_cores---preto);
}

.vc-inviavel h3 {
  font-size: var(--cc-h3);
  line-height: var(--cc-lh-h3);
  font-weight: var(--cc-w-titulo);
  text-wrap: balance;
  margin: 0 0 var(--_tamanhos---8px);
}

.vc-inviavel p {
  margin: 0 0 var(--_tamanhos---16px);
  max-width: 52ch;
}

.vc-inviavel p:last-child {
  margin-bottom: 0;
}

/* O texto fica dentro de um div, então o reset acima zera a margem do último
   parágrafo e o botão encosta nele. Este afastamento devolve o respiro. */
.vc-inviavel .vc-btn {
  margin-top: var(--_tamanhos---16px);
}

/* Dentro do plano verde o botão fantasma precisa de borda que se veja contra o
   próprio verde, não contra o card. */
.vc-inviavel .vc-btn-fantasma {
  border-color: var(--_cores---azul-capital);
  background-color: var(--_cores---branco);
}

/* ---------- Contato ---------------------------------------------------- */

.vc-contato {
  margin-top: var(--_tamanhos---32px);
  padding-top: var(--_tamanhos---32px);
  border-top: 1px solid var(--_cores---verde);
}

.vc-privacidade {
  font-size: var(--cc-caption);
  line-height: var(--cc-lh-sm);
  color: #121d26b3;
  margin: var(--_tamanhos---16px) 0 0;
  text-align: center;
}

.vc-privacidade a {
  color: var(--_cores---azul-capital);
  font-weight: var(--cc-w-apoio);
}

.vc-feedback {
  font-size: var(--cc-body-sm);
  line-height: var(--cc-lh-sm);
  margin: var(--_tamanhos---16px) 0 0;
  text-align: center;
  min-height: 0;
}

.vc-feedback:empty {
  display: none;
}

.vc-feedback[data-state="erro"] {
  color: var(--cc-erro);
  font-weight: var(--cc-w-apoio);
}

/* Era `#1e7a45`, um verde de sucesso que o manual não define — e o DESIGN.md §2
   só sanciona uma cor fora da paleta, o `--cc-erro`. O azul capital já é a cor
   de "concluído" na trilha de etapas, então a confirmação usa a mesma. 7,06:1. */
.vc-feedback[data-state="sucesso"] {
  color: var(--_cores---azul-capital);
  font-weight: var(--cc-w-apoio);
}

/* ---------- Como funciona, depoimentos e dúvidas ---------------------------
   Ritmo vertical. As três seções tinham 64/64px idênticos, o que achata a
   hierarquia (DESIGN.md §5 pede variação). Agora o respiro cresce conforme a
   página desacelera: o formulário é apertado porque tem trabalho a fazer, e o
   FAQ é o mais aberto porque é onde a pessoa está decidindo.

   Superfícies. As quatro seções claras eram creme/off-white/creme/off-white —
   luminâncias de 0,9138 e 0,9137, razão 1,000:1, um plano contínuo de 4.688px.
   Os depoimentos passam a ocupar o verde da paleta (L 0,7722), que é o único
   terceiro valor claro que o manual oferece. Com isso a página tem três
   superfícies de verdade: creme, off-white e verde.
   -------------------------------------------------------------------------- */

.vc-como {
  background-color: var(--_cores---branco);
  padding: var(--_tamanhos---80px) 0 var(--_tamanhos---72px);
}

.vc-faq {
  position: relative;
  isolation: isolate;
  /* `clip` e não `hidden`: os dois cortam a porta igual, mas `hidden` cria um
     scroll container, e aí o `view()` das animações de rolagem liga a timeline a
     esta seção em vez de ligar ao documento. Como a seção não rola, a timeline
     nasce inativa e nada aqui dentro anima. `clip` corta sem criar scroller. */
  overflow: clip;
  background-color: var(--_cores---creme);
  padding: var(--_tamanhos---88px) 0 var(--_tamanhos---96px);
}

/* A porta em escala grande, cortada pela borda da seção: aparece só um pedaço,
   e é o arco que a torna reconhecível. Fica atrás do texto — em seção aberta,
   sem card opaco por cima, é onde a técnica funciona.

   Era a porta verde sobre claro: 1,09:1, invisível. Passa a ser a azul, que é a
   mesma arte no outro arquivo oficial, com opacidade calibrada para a faixa de
   textura — perceptível sem disputar com o texto. */
.vc-faq:before {
  content: "";
  position: absolute;
  z-index: -1;
  bottom: -8%;
  left: -11rem;
  width: 26rem;
  aspect-ratio: 154.3 / 182.35;
  background: url("../images/porta-azul.svg") no-repeat center / contain;
  /* sobre off-white: 1,66:1 */
  opacity: .32;
  pointer-events: none;
}

@media screen and (max-width: 820px) {
  .vc-faq:before {
    display: none;
  }
}

.vc-secao-titulo {
  font-size: var(--cc-h2);
  line-height: var(--cc-lh-h2);
  font-weight: var(--cc-w-titulo);
  letter-spacing: var(--cc-ls-h2);
  text-wrap: balance;
  color: var(--_cores---preto);
  margin: 0 0 var(--_tamanhos---32px);
}

/* Os passos e a foto dividem a seção em telas largas. Abaixo disso a foto vai
   para o fim: quem está no celular quer os passos primeiro.

   A coluna da foto encolheu de 17rem para 13rem e o gap de 48 para 32px: a
   prosa dos passos estava em 36 caracteres por linha, menos da metade do piso
   de 65 do DESIGN.md §3. O que a foto perde em largura ela recupera no
   sangramento, que continua. */
.vc-como-grid {
  display: grid;
  gap: var(--_tamanhos---32px);
}

.vc-como-foto {
  margin: 0;
}

/* A arte é um recorte: os 38% de cima do quadro são transparentes, com as duas
   cabeças saindo por cima da moldura — uma em cada ponta, com o vão no meio —, e
   o bloco opaco começa num corte reto. Por isso ela não pode ser cortada por
   `object-fit`.

   Antes esta regra era `max-height: 320px` com `object-fit: cover`, o que num
   quadro 4:5 achatava para uma faixa e comia justamente a parte de cima — as
   cabeças. Agora o 4:5 vale em toda largura de tela: o arquivo já é 720×900,
   exatamente a proporção, então `cover` nunca recorta nada. Ele fica como rede
   de segurança para o dia em que a foto for trocada por uma fora de proporção.

   Abaixo de 900px ela ocupa a largura inteira do container, sem teto. Sem
   transparência no fundo: os 38% de cima mostram o off-white da seção, que é o
   efeito. */
.vc-como-foto img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--_tamanhos---24px);
}

@media screen and (min-width: 900px) {
  /* Esta seção precisa de mais largura que as outras: 2×2 de cards mais a foto
     ao lado não cabem na régua de 760px do `.vc-shell`. Então ela usa 918px —
     mas **centralizados**, não avançando só para um lado.

     A primeira versão puxava o grid 158px para a direita e deixava o h2 na régua
     antiga. O resultado era um bloco fora do eixo: o centro da seção caía em
     712px numa página cujo centro é 633px, e lia como seção torta.

     Agora o shell inteiro desta seção mede 918 e centraliza sozinho pelo
     `margin: auto` que o `.vc-shell` já tem. Título e conteúdo compartilham a
     mesma régua, e o eixo bate com o do resto da página.

     Consequência assumida: o h2 desta seção começa 79px à esquerda do h2 das
     outras. É o preço de a seção ser mais larga — e some se um dia o 2×2 voltar
     a ser lista. */
  .vc-como .vc-shell {
    max-width: 918px;
  }

  /* `:has()` de propósito: enquanto a foto real não existir, o <figure> fica
     comentado no HTML e a seção precisa voltar a uma coluna sozinha, sem deixar
     a coluna de vazio à direita. Com a foto de volta, a regra volta a valer. */
  .vc-como-grid:has(.vc-como-foto) {
    grid-template-columns: 1fr 20rem;
    gap: var(--_tamanhos---32px);
    align-items: start;
  }

  .vc-como-foto img {
    /* Sem sangramento aqui. Ele existia para a foto extrapolar a régua do texto,
       mas num bloco centralizado ele reintroduz exatamente a assimetria que esta
       regra veio corrigir. A foto fica nos 20rem cheios da coluna: 320×400 — um
       terço maior que os 240×300 originais, e o arquivo de 1080px cobre 3×. */
    max-width: none;
  }
}

.vc-passos {
  list-style: none;
  counter-reset: passo;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--_tamanhos---24px);
}

/* 2×2 a partir de 600px. Abaixo disso os quatro empilham: em 375px duas colunas
   dariam cards de 151px, com a prosa em ~19 caracteres por linha. */
@media screen and (min-width: 600px) {
  .vc-passos {
    grid-template-columns: 1fr 1fr;
  }
}

/* Cada passo é um card. O verde é a terceira superfície da paleta e dá 1,17:1
   sobre o off-white da seção — tinta suave, mas medida em luminância e não em
   matiz. Creme aqui seria 1,00:1, ou seja, invisível: é a armadilha que o
   DESIGN.md §8 registra.

   O marcador ainda ganha com a troca: o círculo amarelo saía a 1,02:1 sobre o
   off-white e passa a 1,20:1 sobre o verde. Texto dentro do card: título a
   13,38:1, descrição a 5,61:1, número a 11,14:1. */
.vc-passos li {
  counter-increment: passo;
  display: grid;
  grid-template-rows: auto 1fr;
  gap: var(--_tamanhos---12px);
  align-content: start;
  /* Grade 2x2 sem card. O fundo verde, o raio e o padding saíram em 2026-08-26:
     quatro caixas idênticas com número + título + texto são a forma literal do
     padrão banido de "identical card grids" — o mesmo de que os depoimentos
     tinham sido resgatados dois dias antes.

     Sem a caixa, o número amarelo passa a ser a única marca do item, e a prosa
     recupera a largura que o padding comia. */
  padding-right: var(--_tamanhos---24px);
}

.vc-passos li:before {
  content: counter(passo);
  flex: none;
  width: var(--_tamanhos---32px);
  height: var(--_tamanhos---32px);
  border-radius: 50%;
  background-color: var(--_cores---amarelo);
  color: var(--_cores---preto);
  font-size: var(--cc-h4);
  font-weight: var(--cc-w-titulo);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* As duas vivem dentro de um <div> no HTML, então nunca foram itens do grid do
   <li> — o `grid-column`/`grid-row` que estava aqui era inerte e só confundia
   quem lesse a folha. Saiu. Elas empilham como blocos, e o espaço entre elas
   vem do margin abaixo do título. */
.vc-passo-titulo {
  display: block;
  font-size: var(--cc-h3);
  font-weight: var(--cc-w-titulo);
  color: var(--_cores---preto);
  line-height: var(--cc-lh-h3);
  margin-bottom: var(--_tamanhos---8px);
  text-wrap: balance;
}

.vc-passo-desc {
  display: block;
  font-size: var(--cc-body);
  line-height: var(--cc-lh-body);
  color: #121d26b3;
  text-wrap: pretty;
}

/* ---------- Depoimentos ------------------------------------------------- */

.vc-depoimentos {
  position: relative;
  isolation: isolate;
  /* `clip` pelo mesmo motivo do `.vc-faq` — ver o comentário lá. */
  overflow: clip;
  background-color: var(--_cores---verde);
  padding: var(--_tamanhos---64px) 0;
}

/* Corte oposto ao do FAQ, para as duas seções não repetirem o enquadramento. */
.vc-depoimentos:before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 6%;
  right: -13rem;
  width: 30rem;
  aspect-ratio: 154.3 / 182.35;
  background: url("../images/porta-azul.svg") no-repeat center / contain;
  /* sobre o verde: 1,77:1 */
  opacity: .38;
  pointer-events: none;
}

@media screen and (max-width: 820px) {
  .vc-depoimentos:before {
    display: none;
  }
}

/* A seção vem depois de "como funciona", que é off-white, e ela agora é verde.
   Com ela no ar, a de dúvidas volta ao creme por conta própria — o creme é o
   valor declarado em `.vc-faq`, então esta regra existe só para desfazer a
   alternância antiga. */
.vc-depoimentos + .vc-faq {
  background-color: var(--_cores---creme);
}

.vc-dep-lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}

/* Sem caixa: régua entre um depoimento e outro. O primeiro não recebe régua
   porque o título da seção já faz esse trabalho. Sobre o verde a régua vira
   off-white — o verde sobre verde não existiria. */
.vc-dep-card {
  padding: var(--_tamanhos---32px) 0;
  border-top: 1px solid #f7f5f099;
}

.vc-dep-card:first-child {
  border-top: none;
  padding-top: var(--_tamanhos---8px);
}

.vc-dep-estrelas {
  margin: 0 0 var(--_tamanhos---16px);
  font-size: var(--cc-body);
  line-height: 1;
  color: var(--_cores---azul-capital);
}

/* O webflow.css dá a todo blockquote borda esquerda de 5px, recuo e margem, o que
   aqui comprimia o texto numa coluna estreita. Anulado. */
.vc-dep-texto {
  margin: 0 0 var(--_tamanhos---24px);
  padding: 0;
  border: none;
  font-size: var(--cc-body-lg);
  line-height: var(--cc-lh-body);
  color: var(--_cores---preto);
  max-width: 52ch;
  text-wrap: pretty;
  quotes: "\201C" "\201D";
}

/* As aspas entram como pseudo-elemento para não virarem texto selecionável nem
   serem lidas pelo leitor de tela caractere por caractere. */
.vc-dep-texto:before {
  content: open-quote;
}

.vc-dep-texto:after {
  content: close-quote;
}

.vc-dep-autor {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--_tamanhos---8px) var(--_tamanhos---12px);
  padding-top: var(--_tamanhos---16px);
}

.vc-dep-nome {
  font-size: var(--cc-h4);
  font-weight: var(--cc-w-titulo);
  color: var(--_cores---preto);
}

.vc-dep-local {
  font-size: var(--cc-body-sm);
  color: #121d26b3;
}

@media screen and (min-width: 768px) {
  /* A assinatura sobe para a lateral: a citação fica com a coluna inteira e a
     página ganha uma quebra de simetria que ela não tinha em lugar nenhum.

     A coluna volta aos 9rem originais. `ch` é o avanço do glifo "0", não a
     largura média de um caractere: em DM Sans a razão é ~1,35, então os "48ch"
     que pareciam estreitos eram 65 caracteres reais — exatamente o piso do
     DESIGN.md §3. A medida aqui já estava certa; encolher a coluna a jogava
     para 82 caracteres, do lado largo. */
  .vc-dep-card {
    display: grid;
    grid-template-columns: 1fr 9rem;
    column-gap: var(--_tamanhos---24px);
    align-items: start;
  }

  .vc-dep-estrelas,
  .vc-dep-texto {
    grid-column: 1;
  }

  .vc-dep-autor {
    grid-column: 2;
    grid-row: 1 / span 2;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--_tamanhos---8px);
    padding-top: 0;
    border-top: none;
    text-align: left;
  }
}

/* Nota de rodapé da seção: prazo de pagamento depende da administradora. */
.vc-dep-nota {
  margin: var(--_tamanhos---24px) 0 0;
  font-size: var(--cc-caption);
  line-height: var(--cc-lh-sm);
  color: #121d26b3;
  text-align: center;
  max-width: 52ch;
  margin-inline: auto;
}

/* ---------- Dúvidas ---------------------------------------------------- */

.vc-faq-item {
  border-bottom: 1px solid var(--_cores---verde);
  padding: var(--_tamanhos---8px) 0;
}

.vc-faq-item:last-child {
  border-bottom: none;
}

/* A área clicável tinha 26px de altura no desktop. O texto não mudou de
   tamanho; o alvo passa a 44px. */
.vc-faq-item summary {
  cursor: pointer;
  font-size: var(--cc-h3);
  font-weight: var(--cc-w-titulo);
  line-height: var(--cc-lh-h3);
  color: var(--_cores---preto);
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--_tamanhos---16px);
  min-height: var(--_tamanhos---44px);
}

.vc-faq-item summary::-webkit-details-marker {
  display: none;
}

.vc-faq-item summary:after {
  content: "+";
  flex: none;
  font-size: var(--cc-h3);
  font-weight: var(--cc-w-apoio);
  line-height: var(--cc-lh-h3);
  color: var(--_cores---azul-capital);
}

.vc-faq-item[open] summary:after {
  content: "−";
}

.vc-faq-item p {
  font-size: var(--cc-body);
  line-height: var(--cc-lh-body);
  color: #121d26b3;
  max-width: 52ch;
  text-wrap: pretty;
  margin: var(--_tamanhos---8px) 0 var(--_tamanhos---8px);
}

/* ---------- Rodapé ----------------------------------------------------- */

.vc-footer {
  background-color: var(--_cores---preto);
  background-image: linear-gradient(135deg, var(--_cores---azul-capital) 0%, var(--_cores---preto) 100%);
  padding: var(--_tamanhos---40px) 0;
  text-align: center;
}

.vc-footer p {
  font-size: var(--cc-caption);
  line-height: calc(var(--cc-lh-sm) + .06);
  color: var(--cc-claro-80);
  margin: 0 auto;
  max-width: 50ch;
}

/* Os três links do rodapé tinham 17px de altura, em linha, separados por "·".
   O texto continua em 13px; o alvo vira 44px. */
.vc-footer a {
  display: inline-flex;
  align-items: center;
  min-height: var(--_tamanhos---44px);
  padding-inline: var(--_tamanhos---4px);
  color: var(--_cores---branco);
  font-weight: var(--cc-w-apoio);
}

/* ---------- Movimento reduzido ---------------------------------------------
   A folha declarava seis transições e dois `translateY` de hover sem nenhum
   bloco de redução — o irmão css/simulador-consorcio.css já tinha o dele.
   Aqui tudo cai para instantâneo.

   O que este bloco não alcança: os quatro `scrollIntoView({behavior: "smooth"})`
   de js/vender-consorcio.js. `behavior` explícito no JS vence `scroll-behavior`
   do CSS, então essa parte precisa de uma linha no JS — está fora da frente de
   trabalho visual e ficou anotada, não feita.
   -------------------------------------------------------------------------- */

/* ---------- Movimento --------------------------------------------------- */

/* Duas famílias, e só duas, para o movimento não virar sotaque solto pela
   página:

     cc-entrar — opacidade mais 12px de subida. Tudo que aparece usa esta.
     cc-surgir — opacidade mais escala de .96. Só o bloco da proposta usa.

   Uma curva só, `--cc-curva`. Ela desacelera forte no fim, que é o que faz o
   movimento parecer assentado em vez de deslizado.

   Nada aqui anima largura, altura, `top` ou `margin`: só `opacity` e
   `transform`, que o compositor resolve sem recalcular layout. É o que mantém a
   animação barata num celular fraco, que é o aparelho de boa parte deste
   tráfego. */
.vc-page {
  --cc-curva: cubic-bezier(.22, .7, .28, 1);
}

@keyframes cc-entrar {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* Versão com mais curso, para a entrada da primeira tela. Com 12px o movimento
   passava despercebido em tela grande — 12px em 1080 de altura é quase nada.
   28px e uma escala leve dão o mesmo gesto, só que visível. */
@keyframes cc-montar {
  from { opacity: 0; transform: translateY(28px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

@keyframes cc-surgir {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* --- Formulário -----------------------------------------------------------
   Todo bloco condicional desta página aparece pela remoção do atributo
   `hidden` — `mostrarEtapa`, `mostrarResultado` e as recusas fazem só isso. Em
   `js/vender-consorcio.js` não foi tocada uma linha: `:not([hidden])` já é o
   gancho, e a animação dispara sozinha no primeiro quadro em que o elemento
   volta a renderizar.

   Só entrada, nunca saída. Saída exigiria segurar o elemento no DOM depois de
   escondido, e isso é JS — além de atrasar a leitura de quem está esperando um
   número. */
.vc-etapa:not([hidden]),
#vc-resultado:not([hidden]),
#vc-inviavel:not([hidden]),
#vc-coerencia:not([hidden]),
#vc-adm-livre:not([hidden]) {
  animation: cc-entrar .38s var(--cc-curva) both;
}

/* A recusa entra mais devagar e sem escala. É a pior notícia que a página dá; o
   movimento não deve ter nada de comemorativo. */
#vc-inviavel:not([hidden]) {
  animation-duration: .5s;
}

/* O número por último.
   A escada é curta de propósito — 0, 100ms, 260ms —, então o olho lê como um
   gesto só e não como três coisas separadas. O que ela compra é a ordem: o
   cartão assenta, depois o valor chega. Numa página cujo produto é esse número,
   ele é a única coisa que merece ser a última a aparecer. */
#vc-resultado:not([hidden]) .vc-destaque {
  animation: cc-surgir .5s var(--cc-curva) .1s both;
}

#vc-resultado:not([hidden]) .vc-destaque-faixa {
  animation: cc-entrar .45s var(--cc-curva) .26s both;
}

#vc-resultado:not([hidden]) .vc-contato {
  animation: cc-entrar .45s var(--cc-curva) .34s both;
}

/* A trilha de etapas muda de estado por atributo; sem transição o marcador
   pula. */
.vc-progresso li {
  transition: color .25s var(--cc-curva),
              background-color .25s var(--cc-curva),
              border-color .25s var(--cc-curva),
              opacity .25s var(--cc-curva);
}

/* --- Entrada da primeira tela --------------------------------------------
   Hero e formulário nascem em tela: não há rolagem para disparar nada, então
   aqui é animação de carregamento em CSS puro, escalonada por `animation-delay`.

   Por que não usar o reveal de `js/revelar.js` no formulário: os tiles de
   administradora são criados em runtime por `js/vender-consorcio.js`. O
   observer varre o DOM uma vez, e tile criado depois da varredura ficaria
   escondido para sempre. Animação CSS não tem esse problema — vale para
   qualquer elemento que passe a existir.

   A escada inteira fecha em ~0,56s. Se ficar longa ou curta, os delays estão
   todos aqui. */

/* Hero sem atraso nenhum. O h1 é o provável LCP, e `both` mantinha o elemento
   em `opacity: 0` durante todo o delay — 130ms de texto invisível somados
   direto na métrica, numa página cuja audiência está em Android barato. Só o
   kicker e os itens de apoio escalonam, e de leve. */
.vc-kicker    { animation: cc-montar .45s var(--cc-curva) 0s both; }
.vc-hero h1   { animation: cc-montar .5s var(--cc-curva) 0s both; }
.vc-hero-sub  { animation: cc-montar .45s var(--cc-curva) .08s both; }

.vc-faixa-lista li:nth-child(1) { animation: cc-montar .4s var(--cc-curva) .14s both; }
.vc-faixa-lista li:nth-child(2) { animation: cc-montar .4s var(--cc-curva) .18s both; }
.vc-faixa-lista li:nth-child(3) { animation: cc-montar .4s var(--cc-curva) .22s both; }

/* Formulário. A escada inteira ia até 1,32s, e o "Continuar" era o último a
   existir — CTA principal invisível por mais de um segundo. Pior: medido em
   1280×900, os tiles e o botão ficam em y=920–1243, ou seja **a segunda metade
   da escada tocava fora da tela**. Pagava-se o custo sem entregar o efeito.
   Agora fecha em 0,56s e o botão não é mais o último. */
.vc-card                   { animation: cc-montar .5s var(--cc-curva) .16s both; }
.vc-card-titulo            { animation: cc-montar .4s var(--cc-curva) .22s both; }
.vc-card-sub               { animation: cc-montar .4s var(--cc-curva) .25s both; }
.vc-progresso              { animation: cc-montar .4s var(--cc-curva) .28s both; }
#vc-etapa-1 .vc-etapa-head { animation: cc-montar .4s var(--cc-curva) .28s both; }

/* Os tiles um a um, 22ms entre eles. `nth-of-type` e não `nth-child` porque o
   <fieldset> tem um <legend> antes dos <label>, que deslocaria a contagem. */
#vc-adm-opcoes label:nth-of-type(1)  { animation: cc-montar .4s var(--cc-curva) 0.30s both; }
#vc-adm-opcoes label:nth-of-type(2)  { animation: cc-montar .4s var(--cc-curva) 0.32s both; }
#vc-adm-opcoes label:nth-of-type(3)  { animation: cc-montar .4s var(--cc-curva) 0.34s both; }
#vc-adm-opcoes label:nth-of-type(4)  { animation: cc-montar .4s var(--cc-curva) 0.37s both; }
#vc-adm-opcoes label:nth-of-type(5)  { animation: cc-montar .4s var(--cc-curva) 0.39s both; }
#vc-adm-opcoes label:nth-of-type(6)  { animation: cc-montar .4s var(--cc-curva) 0.41s both; }
#vc-adm-opcoes label:nth-of-type(7)  { animation: cc-montar .4s var(--cc-curva) 0.43s both; }
#vc-adm-opcoes label:nth-of-type(8)  { animation: cc-montar .4s var(--cc-curva) 0.45s both; }
#vc-adm-opcoes label:nth-of-type(9)  { animation: cc-montar .4s var(--cc-curva) 0.48s both; }
#vc-adm-opcoes label:nth-of-type(10) { animation: cc-montar .4s var(--cc-curva) 0.50s both; }
#vc-adm-opcoes label:nth-of-type(11) { animation: cc-montar .4s var(--cc-curva) 0.52s both; }
#vc-adm-opcoes label:nth-of-type(12) { animation: cc-montar .4s var(--cc-curva) 0.54s both; }

#vc-ir-valores { animation: cc-montar .45s var(--cc-curva) .34s both; }

/* A etapa 1 já é animada elemento a elemento pelas regras acima, então o
   `cc-entrar` do bloco inteiro sobra e só somaria uma segunda opacidade por
   cima. A regra genérica de troca de etapa continua valendo para a etapa 2, que
   é onde ela serve. */
#vc-etapa-1:not([hidden]) {
  animation: none;
}

/* --- Seções ---------------------------------------------------------------
   Revelação por rolagem via IntersectionObserver, em `js/revelar.js`.

   A primeira versão usava `animation-timeline: view()`, sem JS. `CSS.supports`
   dizia que havia suporte, a timeline era criada, o `animation-range` computava
   certo — e mesmo assim nada animava em Chrome de verdade. Não vale mais tempo
   de investigação: o observer funciona em todo navegador que este site atende, e
   é o que está no ar.

   **A rede de segurança é o `.cc-anim` no <html>.** Quem esconde os elementos é
   esta folha, mas só sob essa classe — e quem põe a classe é o script. Se o JS
   não rodar, falhar ou for bloqueado, a classe nunca aparece, estas regras nunca
   casam e o conteúdo nasce visível. É o que impede o pior caso de um reveal por
   JS, que é a seção ficar invisível para sempre.

   A classe entra no <head>, antes da primeira pintura, então não há flash de
   conteúdo aparecendo e sumindo.

   O `prefers-reduced-motion` é checado no script, que simplesmente não põe a
   classe. Mais direto que anular transição depois.

   Esta lista de seletores é gêmea da que está em `js/revelar.js`. Mexeu numa,
   mexe na outra.

   O `:where()` não é estilo, é necessidade. Sem ele a lista abaixo tem
   especificidade desigual — `.cc-anim .vc-como .vc-secao-titulo` vale (0,3,0) e
   `.cc-anim .vc-passos li` vale (0,2,1) —, e as duas ganham de
   `.cc-anim .cc-dentro`, que vale (0,2,0). O elemento receberia a classe e
   continuaria invisível. `:where()` zera a especificidade do que está dentro,
   então esta regra toda vale (0,1,0) e a de revelar ganha com folga. */
.cc-anim :where(
  .vc-como .vc-secao-titulo,
  .vc-passos li,
  .vc-como-foto,
  .vc-depoimentos .vc-secao-titulo,
  .vc-dep-card,
  .vc-dep-nota,
  .vc-faq .vc-secao-titulo,
  .vc-faq-item
) {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--cc-curva),
              transform .55s var(--cc-curva);
}

.cc-anim .cc-dentro {
  opacity: 1;
  transform: none;
}

/* Escalonamento dentro de cada grupo. Só 70ms entre irmãos: o suficiente para o
   olho ler como sequência, curto o bastante para não virar espera.
   O 4º card fecha em 210ms depois do 1º. */
.cc-anim .vc-passos li:nth-child(2),
.cc-anim .vc-dep-card:nth-child(2),
.cc-anim .vc-faq-item:nth-of-type(2) { transition-delay: .07s; }

.cc-anim .vc-passos li:nth-child(3),
.cc-anim .vc-dep-card:nth-child(3),
.cc-anim .vc-faq-item:nth-of-type(3) { transition-delay: .14s; }

.cc-anim .vc-passos li:nth-child(4),
.cc-anim .vc-faq-item:nth-of-type(4) { transition-delay: .21s; }

.cc-anim .vc-faq-item:nth-of-type(5) { transition-delay: .28s; }
.cc-anim .vc-faq-item:nth-of-type(6) { transition-delay: .35s; }
.cc-anim .vc-faq-item:nth-of-type(7) { transition-delay: .42s; }

/* O hero fica de fora de propósito: é a maior imagem da primeira tela e
   provavelmente o LCP. Atrasar a pintura dele por gosto de animação é trocar
   métrica de negócio por enfeite. */

@media (prefers-reduced-motion: reduce) {
  .vc-page *,
  .vc-page *:before,
  .vc-page *:after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    /* Zerar duração não basta desde que a entrada da primeira tela passou a ser
       escalonada: o último tile tem 0,98s de `animation-delay` e o botão 1,02s.
       Sem zerar o atraso, quem pede movimento reduzido esperaria um segundo
       olhando para um formulário vazio — pior que a animação. */
    animation-delay: 0s !important;
    transition-delay: 0s !important;
  }

  .vc-adm-opcao:hover,
  .vc-btn-principal:hover,
  .vc-btn-principal:active {
    transform: none;
  }
}

/* ---------- Telas estreitas -------------------------------------------- */

@media screen and (max-width: 767px) {
  /* Só a base encolhe. O topo continua reservando o cabeçalho, que flutua por
     cima e tem 76px — com o shorthand aqui o padding-top voltava a 28px e o
     logo caía em cima do kicker, com 2px de folga. */
  .vc-hero {
    padding-bottom: var(--_tamanhos---32px);
  }


  .vc-main {
    padding: var(--_tamanhos---24px) 0 var(--_tamanhos---48px);
  }

  .vc-card {
    padding: var(--_tamanhos---24px);
    border-radius: var(--_tamanhos---16px);
  }

  /* A etapa 1 tinha 773px de rolagem entre o primeiro tile e o "Continuar",
     numa etapa que o próprio JS diz que deveria caber sem rolar. Os tiles
     encolhem: a placa de 52 para 44px, o respiro interno de 12 para 8px. São
     ~37px por linha × 5 linhas. Continuam duas colunas de propósito — em três,
     a 375px, cada logo ficaria com 85px de largura e wordmark não sobrevive
     a isso. */
  .vc-adms {
    gap: var(--_tamanhos---8px);
  }

  .vc-adm-opcao {
    padding: var(--_tamanhos---8px);
    gap: var(--_tamanhos---4px);
  }

  .vc-adm-placa {
    height: var(--_tamanhos---44px);
    padding: var(--_tamanhos---4px) var(--_tamanhos---8px);
  }

  .vc-adm-placa img.vc-adm-quadrado {
    max-height: var(--_tamanhos---36px);
  }

  .vc-adm-outra {
    padding: var(--_tamanhos---12px);
    gap: var(--_tamanhos---12px);
  }

  .vc-destaque {
    padding: var(--_tamanhos---24px);
  }

  .vc-linha {
    flex-direction: column;
    gap: var(--_tamanhos---4px);
  }

  .vc-linha dd {
    text-align: left;
  }

  /* O ritmo do desktop comprimido, mas ainda variado. */
  .vc-como {
    padding: var(--_tamanhos---48px) 0 var(--_tamanhos---40px);
  }

  .vc-depoimentos {
    padding: var(--_tamanhos---40px) 0;
  }

  .vc-faq {
    padding: var(--_tamanhos---52px) 0 var(--_tamanhos---56px);
  }

  .vc-dep-card {
    padding: var(--_tamanhos---24px) 0;
  }
}