.services__list { display: grid; gap: var(--space-3); }

.service-card {
  background: var(--surface);
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: var(--radius-lg);
  padding: var(--space-3);
  box-shadow: var(--shadow-soft);
}

/* grid: cartões em grade uniforme */
.services--grid .services__list { grid-template-columns: 1fr; }

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

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

/* list: itens empilhados, leitura rápida de cima a baixo */
.services--list .services__list { grid-template-columns: 1fr; max-width: 760px; }
.services--list .service-card { display: flex; flex-direction: column; gap: 4px; }

/* alternating: zig-zag (o CSS aqui só varia alinhamento; a imagem por serviço é opcional e não usada por padrão) */
.services--alternating .services__list { grid-template-columns: 1fr; max-width: 860px; }
.services--alternating .service-card--reverse { margin-left: auto; text-align: right; }

@media (max-width: 639px) {
  .services--alternating .service-card--reverse { margin-left: 0; text-align: left; }
}

/* numbered: selo numerado (01, 02...) acima do título do card */
.service-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: var(--space-1);
  border-radius: 50%;
  background: var(--surface-alt);
  color: var(--color-accent);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
}

@media (min-width: 1024px) {
  .services--grid.services--numbered .services__list { grid-template-columns: repeat(2, 1fr); max-width: 920px; }
}