/* ==========================================================================
   ABITA - Assinatura
   Assinatura de mobiliário corporativo em planos de 12, 24, 36 ou
   48 meses. Entrou em 08/09/2026, depois de Mobiliário.

   Refeita em 16/09/2026, a pedido do cliente: página limpa, sem foto no
   miolo. Primeiro a oferta, depois o motivo: capa, como funciona, por que
   assinar, fecho e FAQ.

   A capa vive em `componentes.css`, como nas outras páginas internas.
   ========================================================================== */

.faq { padding-block: var(--secao-curta); }


/* ==========================================================================
   2 · COMO FUNCIONA
   A oferta inteira numa frase grande, e os quatro passos lado a lado, como
   linha do tempo que termina numa escolha. É a única seção do miolo em
   `--fs-d1`: é ela que segura quem chegou. Respiro de seção inteiro, e não
   o curto, porque o vazio em volta é o que deixa a frase pesar.
   ========================================================================== */

.passos__cabeca h2 {
  margin-top: var(--e-3);
  max-width: 22ch;
}

.passos__lista {
  display: grid;
  gap: var(--e-5);
  margin-top: clamp(var(--e-6), 5vw, var(--e-7));
  list-style: none;
}

.passo {
  padding-top: var(--e-4);
  border-top: var(--fio) solid var(--linha-cor, var(--linha));
}

.passo h3 {
  margin-top: var(--e-3);
  color: var(--texto-cor, var(--texto));
}

.passo p {
  margin-top: var(--e-2);
  max-width: 36ch;
}

@media (min-width: 700px) {
  .passos__lista { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1100px) {
  .passos__lista { grid-template-columns: repeat(4, 1fr); }
}


/* ==========================================================================
   3 · POR QUE ASSINAR
   O motivo, depois da oferta, em banda morna e título um degrau abaixo:
   duas frases em `--fs-d1` seguidas virariam platô. As razões não repetem
   os passos; o passo 04 diz como termina, a razão 03 diz por que importa.
   ========================================================================== */

.gancho { padding-block: var(--secao-curta); }

.gancho__cabeca h2 {
  margin-top: var(--e-3);
  max-width: 22ch;
}

.gancho__cabeca .lead {
  margin-top: var(--e-4);
  max-width: 52ch;
}

.razoes {
  display: grid;
  gap: var(--e-5);
  margin-top: clamp(var(--e-5), 4vw, var(--e-6));
  list-style: none;
}

.razao {
  padding-top: var(--e-4);
  border-top: var(--fio) solid var(--linha-cor, var(--linha));
}

.razao h3 {
  margin-top: var(--e-3);
  color: var(--texto-cor, var(--texto));
}

.razao p {
  margin-top: var(--e-2);
  max-width: 40ch;
}

/* A condição do crédito fica colada nas razões, e não no fim da página:
   quem é do Simples precisa ler isso antes de se convencer. */
.gancho__nota {
  margin-top: clamp(var(--e-5), 3vw, var(--e-6));
  max-width: 64ch;
  font-size: var(--fs-sm);
  color: var(--meta-cor, var(--texto-meta));
}

@media (min-width: 900px) {
  .razoes { grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================================
   4 · CTA
   Cena inteira ao fundo, componente de `componentes.css`. O FAQ vem depois
   para fechar a página.
   ========================================================================== */

.proximo h2 {
  margin-top: var(--e-4);
  max-width: 18ch;
  color: var(--texto-sobre-foto);
}

.proximo .lead {
  margin-top: var(--e-4);
  color: var(--texto-sobre-foto);
}

.proximo .cta { margin-top: clamp(var(--e-5), 3vw, var(--e-6)); }