/* ==========================================================================
   ZENTH TRADE — como comprar
   passos.css · v1.0.0
   Depende de zt-components.css
   ========================================================================== */

.zt-passos {
  --zt-passos-colunas: 4;
  display: grid;
  grid-template-columns: repeat(var(--zt-passos-colunas), minmax(0, 1fr));
  gap: var(--zt-esp-6);
}

/* Sem caixa: a régua no topo separa, o espaço faz o resto. O primeiro passo
   ganha o laranja porque é onde a leitura começa. */
.zt-passo {
  padding-top: var(--zt-esp-4);
  border-top: 2px solid var(--zt-neutro-200);
}
.zt-passo:first-child { border-top-color: var(--zt-acento); }

.zt-passo__n {
  display: block;
  font-size: var(--zt-txt-sm);
  font-weight: var(--zt-peso-semi);
  color: var(--zt-marca-clara);
  margin-bottom: var(--zt-esp-3);
}
.zt-passo h3 {
  font-size: var(--zt-txt-lg);
  font-weight: var(--zt-peso-semi);
  margin-bottom: var(--zt-esp-2);
}
.zt-passo p {
  font-size: var(--zt-txt-sm);
  color: var(--zt-tinta-suave);
  line-height: var(--zt-lh-normal);
}

/* Sobre faixa escura a régua e o rótulo precisam de outro tom. */
.zt-secao--escura .zt-passo,
.zt-secao--gradiente .zt-passo { border-top-color: rgba(251, 249, 249, 0.16); }
.zt-secao--escura .zt-passo:first-child,
.zt-secao--gradiente .zt-passo:first-child { border-top-color: var(--zt-acento); }
.zt-secao--escura .zt-passo__n,
.zt-secao--gradiente .zt-passo__n { color: var(--zt-roxo-300); }
.zt-secao--escura .zt-passo p,
.zt-secao--gradiente .zt-passo p { color: var(--zt-tinta-inversa-suave); }

.zt-passos__pe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--zt-esp-5);
  flex-wrap: wrap;
  margin-top: var(--zt-esp-6);
}
.zt-passos__pe p { max-width: 52ch; }

.zt-secao--centro .zt-passos__pe { justify-content: center; text-align: center; }
.zt-secao--centro .zt-passos__pe p { margin-inline: auto; }

@media (max-width: 900px) {
  .zt-passos { gap: var(--zt-esp-5); }
}