/* Selector de pago (PayPal · Yappy · Cripto). Usa los tokens de vivo.css; funciona también sin ellos. */
.vp { margin: 18px 0 6px; padding: 16px; border-radius: 20px; background: var(--vl-cream, #FBF7F0); border: 1px solid rgba(31, 61, 46, .12); }
.vp h3 { font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--vl-orchid, #B01A63); margin: 0 0 4px; }
.vp h4 { font-size: 16px; margin: 0 0 8px; color: var(--vl-leaf, #1F3D2E); }
.vp-sub, .vp-note, .vp-hint, .vp-load { font-size: 14px; line-height: 1.5; color: var(--muted, #55655C); margin: 4px 0 10px; }
.vp-hint { font-size: 13px; margin-top: 4px; }
.vp-due { font-size: 16px; margin: 10px 0 12px; color: var(--vl-ink, #1F2A24); }
.vp-due b { font-size: 20px; color: var(--vl-leaf, #1F3D2E); }
.vp-ok { font-size: 17px; font-weight: 700; color: var(--vl-jade, #1E8C6B); margin: 0; }
.vp-err { font-size: 14px; color: #b3261e; background: #fdecea; padding: 8px 12px; border-radius: 10px; margin: 8px 0; }
.vp-warn { font-size: 13px; line-height: 1.45; color: #7a4b00; background: #fff4d6; padding: 8px 12px; border-radius: 10px; margin: 8px 0; }
.vp-mode { border: 0; padding: 0; margin: 10px 0 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.vp-mode legend { font-size: 14px; font-weight: 600; margin-bottom: 6px; padding: 0; }
.vp-chip { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 2px solid rgba(31, 61, 46, .2); background: #fff; cursor: pointer; font-size: 14px; }
.vp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.vp-chip.on { border-color: var(--vl-magenta, #D4237A); background: #fdeaf3; }
.vp-chip:focus-within { outline: 3px solid var(--vl-magenta, #D4237A); outline-offset: 2px; }
.vp-methods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 8px 0 12px; }
.vp-m { display: flex; flex-direction: column; align-items: center; gap: 2px; min-height: 84px; padding: 10px 6px; border-radius: 16px; border: 2px solid rgba(31, 61, 46, .18); background: #fff; font: inherit; color: var(--vl-ink, #1F2A24); cursor: pointer; text-align: center; transition: border-color .15s, transform .15s; }
.vp-m b { font-size: 15px; }
.vp-m small { font-size: 12px; color: var(--muted, #55655C); line-height: 1.25; }
.vp-m:hover:not(:disabled) { border-color: var(--vl-bloom, #E5629F); transform: translateY(-1px); }
.vp-m.on { border-color: var(--vl-magenta, #D4237A); background: #fdeaf3; box-shadow: 0 6px 16px -8px rgba(212, 35, 122, .5); }
.vp-m:focus-visible { outline: 3px solid var(--vl-magenta, #D4237A); outline-offset: 2px; }
.vp-m:disabled { opacity: .5; cursor: not-allowed; }
.vp-mi { width: 26px; height: 26px; border-radius: 8px; display: block; margin-bottom: 2px; background-size: 60%; background-position: center; background-repeat: no-repeat; }
.vp-paypal { background-color: #FFC439; } .vp-paypal::after { content: "P"; }
.vp-yappy { background-color: #0A84FF; } .vp-cripto { background-color: #627EEA; }
.vp-mi::after { display: flex; align-items: center; justify-content: center; height: 100%; font: 800 14px/1 system-ui, sans-serif; color: #fff; }
.vp-paypal::after { color: #003087; content: "P"; } .vp-yappy::after { content: "Y"; } .vp-cripto::after { content: "Ξ"; }
.vp-panel:empty { display: none; }
.vp-panel { padding-top: 4px; }
.vp-steps { margin: 0 0 12px; padding-left: 20px; font-size: 15px; line-height: 1.55; }
.vp-num { font-size: 17px; letter-spacing: .02em; white-space: nowrap; }
.vp-l { display: block; font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
.vp-addr { display: flex; gap: 8px; align-items: stretch; }
.vp-addr code { flex: 1; min-width: 0; word-break: break-all; font-size: 12.5px; padding: 10px 12px; background: #fff; border: 1px dashed rgba(31, 61, 46, .35); border-radius: 12px; }
.vp select, .vp input[type=text] { width: 100%; min-height: 46px; padding: 10px 12px; border-radius: 12px; border: 2px solid rgba(31, 61, 46, .2); background: #fff; font: inherit; font-size: 15px; }
.vp select:focus, .vp input[type=text]:focus { outline: 3px solid var(--vl-magenta, #D4237A); outline-offset: 1px; }
.vp .btn { margin-top: 10px; }
@media (max-width: 420px) { .vp-methods { grid-template-columns: 1fr; } .vp-m { flex-direction: row; justify-content: flex-start; gap: 10px; min-height: 56px; text-align: left; } .vp-mi { margin: 0; } }
@media (prefers-reduced-motion: reduce) { .vp-m { transition: none; } .vp-m:hover:not(:disabled) { transform: none; } }