/* ================================================================
   SECTIONS/PRODUCTOS.CSS
================================================================ */
#productos { background: var(--cr); }

.productos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: var(--sp-lg);
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--sp-lg);
  margin-top: var(--sp-xl);
}

/* Sección "Cómo comprar" */
#como { background: var(--gll); }
.steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-lg);
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--sp-lg);
  margin-top: var(--sp-xl);
  position: relative;
}
.steps-grid::before {
  content: '';
  position: absolute;
  top: 38px; left: calc(var(--sp-lg) + 52px); right: calc(var(--sp-lg) + 52px);
  height: 2px;
  background: repeating-linear-gradient(90deg, var(--gm) 0, var(--gm) 6px, transparent 6px, transparent 14px);
  opacity: .35;
}
.step-card { text-align: center; }
.step-icon {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--crw);
  box-shadow: var(--shadow-green);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  margin-inline: auto;
  margin-bottom: var(--sp-md);
  position: relative;
}
.step-icon::after {
  content: attr(data-n);
  position: absolute;
  top: -4px; right: -4px;
  width: 22px; height: 22px;
  background: var(--gold);
  color: var(--g0);
  border-radius: 50%;
  font-size: .65rem;
  font-weight: var(--fw-black);
  display: flex; align-items: center; justify-content: center;
}
.step-card h3 { font-size: 1rem; color: var(--g0); margin-bottom: .4rem; }
.step-card p  { font-size: .85rem; color: #5a6b5e; line-height: 1.55; }
.step-link {
  display: inline-flex; align-items: center; gap: .25rem;
  color: var(--gm); font-size: .82rem; font-weight: var(--fw-semi);
  margin-top: .5rem;
  transition: gap var(--dur-fast);
}
.step-link:hover { gap: .5rem; }