/* ============================================================
   Paso a paso numerado
   ------------------------------------------------------------
   Capa: componente
   ============================================================ */

/* ═══════════════════════════════════════════════════
   PASO A PASO — diseño vertical premium
═══════════════════════════════════════════════════ */
.paso {
  display: flex; gap: 16px; align-items: flex-start;
  margin: 10px 0; padding: 16px 20px;
  background: var(--card2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background var(--t), border-color var(--t), transform .2s, box-shadow .2s;
  position: relative;
}
.paso:hover {
  transform: translateX(4px);
  box-shadow: -3px 0 0 var(--accent), var(--shadow-sm);
}
/* Conector vertical entre pasos */
.paso + .paso::before {
  content: '';
  display: block; position: absolute;
  left: 34px; top: -10px;
  width: 1px; height: 10px;
  background: linear-gradient(to bottom, transparent, var(--border));
}

.paso-num {
  flex-shrink: 0; width: 32px; height: 32px;
  background: var(--accent-2); color: var(--on-accent-2);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: .78rem; font-weight: 600;
  box-shadow: 0 2px 8px rgba(var(--accent-2-rgb),.25);
  transition: background var(--t), transform .2s;
}
.paso:hover .paso-num {
  background: var(--accent); color: var(--on-accent);
  transform: scale(1.08);
  box-shadow: var(--shadow-accent);
}
body.dark-mode .paso-num { background: var(--accent-2-strong); }
.paso-content { flex: 1; }
.paso-content > strong {
  display: block;
  margin-bottom: 6px;
  font-size: .94rem;
}

.paso-content p strong {
  display: inline;
  margin-bottom: 0;
  font-size: inherit;
}
.paso-content br { display: block; content: ''; margin-top: 6px; }
.paso-content p { margin-bottom: 0; }