/* ══════════════════════════════════════════════════════════
   PROBLEMA + CÓMO FUNCIONA (UNIFICADO)
   ══════════════════════════════════════════════════════════ */
.problema-como { background:var(--navy); color:var(--white); }
.problema-como h2 { color:var(--white); }
.problema-como .lead { color:rgba(255,255,255,0.65); }
.problema-como .eyebrow { background:rgba(0,196,140,0.15); color:var(--accent); }

.prob-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-bottom:72px; }
.prob-card {
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius:18px; padding:28px;
}
.prob-card .pico { font-size:32px; margin-bottom:14px; }
.prob-card h3 { color:var(--white); margin-bottom:8px; font-size:18px; }
.prob-card p { color:rgba(255,255,255,0.7); font-size:14px; line-height:1.65; }
.prob-card .dtag,
.step-card .dtag { margin-left:4px; vertical-align:1px; }

.divider-arrow { text-align:center; margin-bottom:56px; }
.divider-arrow span { display:inline-flex; align-items:center; gap:12px; font-size:13px; font-weight:700; letter-spacing:2px; text-transform:uppercase; color:var(--accent); }
.divider-arrow span::before,
.divider-arrow span::after { content:""; flex:1; height:1px; background:rgba(255,255,255,0.1); width:80px; display:block; }

.steps-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:32px; position:relative; }
.steps-grid::before {
  content:""; position:absolute;
  top:27px; left:calc(16.66% + 16px); right:calc(16.66% + 16px);
  height:2px;
  background:linear-gradient(90deg, var(--accent) 0%, var(--blue) 100%);
  z-index:0;
}
.step-card { text-align:center; position:relative; z-index:1; }
.step-n {
  width:54px; height:54px; border-radius:50%;
  background:rgba(255,255,255,0.1); color:var(--white);
  font-weight:800; font-size:18px;
  display:flex; align-items:center; justify-content:center;
  margin:0 auto 20px;
  border:3px solid rgba(255,255,255,0.15);
}
.step-card.active .step-n { background:var(--accent); border-color:var(--accent); box-shadow:0 0 0 4px rgba(0,196,140,0.2); }
.step-card h3 { color:var(--white); margin-bottom:10px; }
.step-card p { color:rgba(255,255,255,0.65); font-size:14px; line-height:1.65; }

/* ─── RESPONSIVE FOR PROBLEMA ──────────────────────────── */
@media (max-width:960px) {
  .prob-cards { grid-template-columns:1fr 1fr; }
  .steps-grid::before { display:none; }
  .steps-grid { grid-template-columns:1fr; gap:24px; }
}
@media (max-width:640px) {
  .prob-cards { grid-template-columns:1fr; }
}