/*
 * 10-como-funciona.css
 * Seção: Como funciona (3 passos)
 *
 * Fundo da seção: preto puro (--cor-fundo-preto-puro), conforme
 * docs/recon-visual-tokens.md (a seção "Como funciona/Jornada" é listada
 * explicitamente como usando o preto puro, não o --cor-fundo-escuro-base).
 * Cards seguem o "padrão de card recorrente" descrito no recon: ícone
 * quadrado no topo → título bold branco → linha divisória fina curta →
 * parágrafo cinza-claro. Mesmo padrão visual de 04-problemas.css e
 * 07-vivencia.css, porém com classes próprias (`.como-funciona__*`) para
 * não colidir com o CSS de outras seções.
 */

.como-funciona {
  background-color: var(--cor-fundo-preto-puro);
}

.como-funciona__header {
  max-width: 640px;
  margin-inline: auto;
}

.como-funciona__titulo {
  font-size: var(--fs-h2-escuro);
  font-weight: var(--fw-h2-escuro);
  line-height: var(--lh-h2-escuro);
  color: var(--cor-texto-branco);
}

/* AMBÍGUO: tipografia exata deste subtítulo não consta na tabela de escala
   tipográfica do recon — aproximada com o token de corpo de card
   (--fs-card-corpo) sobre cinza-médio, mesma família visual dos demais
   subtítulos de seção escura. */
.como-funciona__subtitulo {
  margin-top: 16px; /* alinhado ao gap título→subtítulo usado em 09/12/13 */
  font-size: var(--fs-card-corpo);
  font-weight: var(--fw-card-corpo);
  line-height: var(--lh-card-corpo);
  color: var(--cor-texto-cinza-medio);
}

.como-funciona__grid {
  margin-top: 48px;
}

.como-funciona__card {
  width: 100%;
  background-color: var(--card-feature-bg);
  border-radius: var(--card-feature-radius);
  padding: var(--card-feature-padding);
  display: flex;
  flex-direction: column;
  gap: var(--card-feature-gap-interno);
}

/* Quadrado do ícone: fundo levemente mais claro que o card para destacar o
   ícone em "quadrado escuro", conforme padrão recorrente do recon.
   [ESTIMADO — cor exata do fundo do quadrado de ícone não extraída]. */
.como-funciona__icone {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--cor-texto-branco);
}

.como-funciona__icone svg {
  width: 22px;
  height: 22px;
}

.como-funciona__card-titulo {
  font-size: var(--fs-card-titulo);
  font-weight: var(--fw-card-titulo);
  line-height: var(--lh-card-titulo);
  color: var(--cor-texto-branco);
}

/* Linha divisória fina curta (~40px), conforme padrão de card recorrente.
   [ESTIMADO — cor exata não extraída; usada opacidade branca sutil]. */
.como-funciona__divisor {
  width: 40px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.15);
}

.como-funciona__card-corpo {
  font-size: var(--fs-card-corpo);
  font-weight: var(--fw-card-corpo);
  line-height: var(--lh-card-corpo);
  color: var(--cor-texto-cinza-medio);
}

@media (max-width: 1024px) {
  .como-funciona__grid {
    margin-top: 40px;
  }
}

@media (max-width: 768px) {
  .como-funciona__header {
    max-width: 100%;
  }

  .como-funciona__grid {
    margin-top: 32px;
  }
}

@media (max-width: 430px) {
  .como-funciona__card {
    padding: 20px;
  }
}

@media (max-width: 375px) {
  .como-funciona__titulo {
    font-size: 30px;
    line-height: 36px;
  }
}