/* =========================================================
   Creziva — steps.css
   "Cómo trabajamos" block. Reused on Inicio (list layout,
   dark section) and Nosotros (card grid layout).
   ========================================================= */

/* Inicio: list layout inside a dark section */

.steps-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  background: rgba(243, 246, 252, 0.18);
}

.steps-list__item {
  background: var(--color-navy);
  padding: 20px 4px;
  display: flex;
  gap: 18px;
  align-items: baseline;
}

.steps-list__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-accent);
  min-width: 26px;
}

.steps-list__title {
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 17px;
  color: var(--color-bg);
  margin: 0 0 6px;
  letter-spacing: -0.015em;
}

.steps-list__text {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--color-text-ondark-muted);
  margin: 0;
}

/* Nosotros: card grid layout */

.steps-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: var(--space-gap-md);
}

.steps-cards__card {
  padding: 26px 22px 30px;
}

.steps-cards__num {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--color-accent);
  margin: 0 0 14px;
  letter-spacing: 0.08em;
}

.steps-cards__title {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--color-ink);
  margin: 0 0 10px;
}

.steps-cards__text {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-onlight-muted);
  margin: 0;
}