/* ══════════════════════════════════════════════════════════
   PAGO PROTEGIDO
   ══════════════════════════════════════════════════════════ */
.pago-protegido { background:var(--navy); color:var(--white); }
.pago-protegido h2 { color:var(--white); }
.pago-protegido .lead { color:rgba(255,255,255,0.65); }
.pago-protegido .eyebrow { background:rgba(0,196,140,0.15); color:var(--accent); }
.pago-protegido .lead .tag-pill { margin-left:6px; vertical-align:2px; }
/* Grid con columnas minmax(0,1fr) para las tarjetas: evita que el texto
   fuerce un ancho mayor al disponible y desborde el viewport (bug previo
   con flexbox + flex-shrink:0 sin límite de ancho). */
.payment-flow {
  display:grid;
  grid-template-columns: minmax(0,1fr) 36px minmax(0,1fr) 36px minmax(0,1fr);
  align-items:stretch; margin-top:56px;
}
.pstate {
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12);
  border-radius:16px; padding:28px 22px; text-align:center; min-width:0;
  display:flex; flex-direction:column; align-items:center;
}
.pstate.s1 { border-top:3px solid var(--accent); }
.pstate.s2 { border-top:3px solid var(--blue); }
.pstate.s3 { border-top:3px solid var(--accent-dark); }
.pstate .pstate-step { font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:rgba(255,255,255,0.4); margin-bottom:10px; }
.pstate .pico { font-size:28px; margin-bottom:12px; }
.pstate h4 { font-size:15px; font-weight:700; color:var(--white); margin-bottom:8px; }
.pstate p { font-size:13px; color:rgba(255,255,255,0.65); line-height:1.6; }
.flow-arrow { font-size:20px; color:var(--accent); display:flex; align-items:center; justify-content:center; }
.custody-note {
  margin:32px auto 0; background:rgba(0,196,140,0.1); border:1px solid rgba(0,196,140,0.25);
  border-radius:12px; padding:16px 24px; display:flex; gap:12px; align-items:center; max-width:700px;
}
.custody-note .cico { font-size:22px; flex-shrink:0; }
.custody-note p { color:rgba(255,255,255,0.75); font-size:14px; line-height:1.6; }

/* ─── PREGUNTAS SOBRE EL PAGO PROTEGIDO ────────────────── */
.pago-faq { background:var(--bg); }
.pago-faq-list { display:flex; flex-direction:column; gap:14px; max-width:760px; margin:48px auto 0; }

/* ─── RESPONSIVE FOR PAGO PROTEGIDO ────────────────────── */
@media (max-width:960px) {
  .payment-flow { grid-template-columns:1fr; gap:4px; }
  .flow-arrow { transform:rotate(90deg); padding:8px 0; }
}