/* ═══════════════════════════════════════════════════════
   MediRecord — Portal de pagos (pagos.html)
   Mismo estilo que el sitio: bordes de tinta, sombras duras y azul de la app.
   Las animaciones se apagan solas con «reducir movimiento».
═══════════════════════════════════════════════════════ */
:root{--ok:#16a34a;--ok-bg:#dcfce7;--warn:#d97706;--warn-bg:#fef3c7;--bad:#dc2626;--bad-bg:#fee2e2;--mp:#009ee3;--ease:cubic-bezier(.2,.8,.2,1)}
body.pg{min-height:100vh;display:flex;flex-direction:column;position:relative;overflow-x:hidden}
.pg-main{flex:1;padding-top:34px;padding-bottom:50px;max-width:720px;position:relative;z-index:1}
body.pg footer{position:relative;z-index:1}
.pg .top{position:sticky}
.pg-volver{padding:9px 16px;font-size:15px}

/* Fondo animado */
.pg-fondo{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:linear-gradient(180deg,#dbeafe 0%,#f8fafc 55%)}
.pg-fondo i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;animation:pgFlota 16s ease-in-out infinite}
.pg-fondo i:nth-child(1){width:380px;height:380px;background:#93c5fd;left:-120px;top:60px}
.pg-fondo i:nth-child(2){width:320px;height:320px;background:#c7d2fe;right:-100px;top:240px;animation-delay:-5s}
.pg-fondo i:nth-child(3){width:280px;height:280px;background:#a5f3fc;left:35%;bottom:-120px;animation-delay:-9s}
@keyframes pgFlota{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(40px,-34px) scale(1.12)}}

/* Encabezado */
.pg-hero{padding:0;text-align:center;margin-bottom:26px;animation:pgSube .6s var(--ease) both}
.pg-etiqueta{display:inline-flex;align-items:center;gap:8px;background:var(--white);border:2px solid var(--ink);border-radius:999px;padding:5px 14px 5px 10px;font-family:var(--display);font-weight:700;font-size:14px;margin-bottom:14px;box-shadow:3px 3px 0 var(--ink)}
.pg-etiqueta svg{width:18px;height:18px;stroke:var(--ok)}
.pg-hero h1{font-size:clamp(38px,7vw,58px);font-weight:800;margin-bottom:10px}
.pg-subr{color:var(--primary);position:relative;white-space:nowrap}
.pg-subr::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:10px;background:var(--primary-200);z-index:-1;border-radius:6px;transform-origin:0 50%;animation:pgTrazo .7s .45s var(--ease) both}
.pg-hero .lead{margin:0 auto;font-size:19px}
@keyframes pgTrazo{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes pgSube{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* Pasos */
.pg-pasos{list-style:none;display:flex;justify-content:center;gap:0;margin:0 auto 22px;max-width:520px;animation:pgSube .6s .1s var(--ease) both}
.pg-pasos li{flex:1;display:flex;flex-direction:column;align-items:center;gap:6px;position:relative;font-size:14px;font-weight:600;color:var(--ink-soft);transition:color .3s}
.pg-pasos li::before{content:"";position:absolute;top:17px;right:50%;width:100%;height:3px;background:var(--line);z-index:0;transition:background .5s}
.pg-pasos li:first-child::before{display:none}
.pg-pasos li b{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:var(--white);border:2px solid var(--line);font-family:var(--display);font-size:16px;transition:all .35s var(--ease)}
.pg-pasos li.act{color:var(--ink)}
.pg-pasos li.act b{border-color:var(--ink);background:var(--primary);color:#fff;transform:scale(1.12);box-shadow:3px 3px 0 var(--ink)}
.pg-pasos li.hecho b{background:var(--ok);border-color:var(--ink);color:#fff}
.pg-pasos li.hecho::before,.pg-pasos li.act::before{background:var(--ink)}

/* Tarjeta principal */
.pg-card{background:var(--white);border:2px solid var(--ink);border-radius:22px;box-shadow:10px 10px 0 var(--ink);padding:30px 30px 24px;animation:pgSube .6s .2s var(--ease) both}
.pg-label{display:block;font-family:var(--display);font-weight:700;font-size:18px;margin-bottom:10px}
.pg-campo{position:relative;display:flex;align-items:center;gap:8px;border:2px solid var(--ink);border-radius:14px;background:var(--paper);padding:0 12px 0 14px;transition:border-color .25s,box-shadow .25s,background .25s}
.pg-campo:focus-within{box-shadow:0 0 0 4px var(--primary-200);background:#fff}
.pg-campo-ico{width:22px;height:22px;stroke:var(--ink-soft);flex:none}
.pg-campo input{flex:1;min-width:0;border:0;background:transparent;font:600 17px/1 var(--body);letter-spacing:.2px;color:var(--ink);padding:18px 4px;outline:none}
.pg-campo input::placeholder{color:#94a3b8;font-weight:400;letter-spacing:0}
.pg-pegar{border:2px solid var(--ink);background:var(--white);color:var(--ink);font:700 13px var(--display);border-radius:8px;padding:6px 10px;cursor:pointer;transition:background .15s,transform .15s}
.pg-pegar:hover{background:var(--primary-light);transform:translateY(-1px)}
.pg-estado{width:28px;height:28px;position:relative;flex:none}
.pg-estado svg{position:absolute;inset:0;width:28px;height:28px;opacity:0;transform:scale(.4)}
.pg-spin{stroke:var(--primary)}
.pg-ok{stroke:var(--ok)}
.pg-mal{stroke:var(--bad)}
.pg-ok path,.pg-ok circle{stroke-dasharray:70;stroke-dashoffset:70}

.pg-campo.cargando .pg-spin{opacity:1;transform:none;animation:pgGira .8s linear infinite}
.pg-campo.valido{border-color:var(--ok);background:#f0fdf4;box-shadow:0 0 0 4px rgba(22,163,74,.18)}
.pg-campo.valido .pg-ok{opacity:1;transform:none;transition:transform .4s var(--ease),opacity .2s}
.pg-campo.valido .pg-ok path,.pg-campo.valido .pg-ok circle{animation:pgDibuja .6s .05s ease forwards}
.pg-campo.valido .pg-campo-ico{stroke:var(--ok)}
.pg-campo.invalido{border-color:var(--bad);background:#fef2f2;animation:pgTiembla .4s}
.pg-campo.invalido .pg-mal{opacity:1;transform:none;transition:transform .3s var(--ease),opacity .2s}
.pg-campo.invalido .pg-campo-ico{stroke:var(--bad)}
.pg-campo.valido .pg-pegar,.pg-campo.cargando .pg-pegar{display:none}
@keyframes pgGira{to{transform:rotate(360deg)}}
@keyframes pgDibuja{to{stroke-dashoffset:0}}
@keyframes pgTiembla{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}

.pg-msg{margin-top:10px;font-size:16px;color:var(--ink-soft);min-height:26px;transition:color .2s}
.pg-msg a{color:var(--primary-dark);font-weight:700}
.pg-msg.ok{color:#15803d;font-weight:700;animation:pgSube .4s var(--ease)}
.pg-msg.mal{color:var(--bad);font-weight:600}
.pg-msg .nom{font-family:var(--display);font-size:19px}

/* Saldo */
.pg-saldo{margin-top:22px;padding-top:24px;border-top:2px dashed var(--line);animation:pgSube .55s var(--ease) both}
.pg-saldo[hidden]{display:none}
.pg-chip{display:inline-flex;align-items:center;gap:8px;font-family:var(--display);font-weight:800;font-size:14px;letter-spacing:.2px;text-transform:uppercase;padding:6px 14px 6px 10px;border-radius:999px;border:2px solid var(--ink)}
.pg-chip::before{content:"";width:10px;height:10px;border-radius:50%;background:currentColor;animation:pgLate 1.6s ease-in-out infinite}
.pg-chip.vencido,.pg-chip.suspendido{background:var(--bad-bg);color:var(--bad)}
.pg-chip.por_vencer{background:var(--warn-bg);color:var(--warn)}
.pg-chip.al_corriente{background:var(--ok-bg);color:var(--ok)}
.pg-chip.sin_cobros{background:var(--primary-100);color:var(--primary-dark)}
.pg-chip span{color:var(--ink)}
@keyframes pgLate{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.6);opacity:.35}}

.pg-total{margin:18px 0 6px;text-align:center}
.pg-total small{display:block;font-weight:700;color:var(--ink-soft);font-size:16px;letter-spacing:.3px;text-transform:uppercase}
.pg-monto{font-family:var(--display);font-weight:800;font-size:clamp(52px,12vw,78px);line-height:1.05;letter-spacing:-.03em;background:linear-gradient(135deg,var(--primary-dark),#6366f1);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.pg-monto.cero{background:linear-gradient(135deg,#15803d,#22c55e);-webkit-background-clip:text;background-clip:text}
.pg-monto em{font-style:normal;font-size:.34em;font-weight:700;letter-spacing:0;margin-left:6px;color:var(--ink-soft);-webkit-text-fill-color:var(--ink-soft)}

.pg-desglose{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:16px 0}
.pg-desglose div{border:2px solid var(--line);border-radius:14px;padding:12px 14px;transition:border-color .2s,transform .2s var(--ease)}
.pg-desglose div:hover{transform:translateY(-2px);border-color:var(--ink)}
.pg-desglose small{display:block;font-size:14px;color:var(--ink-soft);font-weight:600}
.pg-desglose strong{font-family:var(--display);font-size:22px}
.pg-desglose .v strong{color:var(--bad)}
.pg-desglose .p strong{color:var(--warn)}

.pg-lista{list-style:none;margin:14px 0 0;border:2px solid var(--line);border-radius:14px;overflow:hidden}
.pg-lista li{display:flex;align-items:center;gap:12px;padding:12px 14px;border-bottom:1px solid var(--line);animation:pgSube .45s var(--ease) both}
.pg-lista li:last-child{border-bottom:0}
.pg-lista .ic{width:38px;height:38px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--primary-100)}
.pg-lista .ic svg{width:20px;height:20px;stroke:var(--primary-dark)}
.pg-lista li.venc .ic{background:var(--bad-bg)}
.pg-lista li.venc .ic svg{stroke:var(--bad)}
.pg-lista .tx{flex:1;min-width:0;line-height:1.3}
.pg-lista .tx b{display:block;font-size:17px}
.pg-lista .tx small{color:var(--ink-soft);font-size:14px}
.pg-lista li.venc .tx small{color:var(--bad);font-weight:700}
.pg-lista .mt{font-family:var(--display);font-weight:800;font-size:18px;white-space:nowrap}

/* Botón de pagar */
.pg-pagar{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;margin-top:20px;padding:18px 22px;border:2px solid var(--ink);border-radius:16px;background:var(--mp);color:#fff;font:800 20px var(--display);cursor:pointer;box-shadow:5px 5px 0 var(--ink);transition:transform .15s var(--ease),box-shadow .15s var(--ease),filter .2s}
.pg-pagar:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--ink)}
.pg-pagar:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--ink)}
.pg-pagar::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);transform:translateX(-120%);animation:pgBrillo 3.2s 1s ease-in-out infinite}
.pg-pagar svg{width:26px;height:26px;stroke:#fff;flex:none}
.pg-pagar[disabled]{filter:grayscale(.8);opacity:.6;cursor:not-allowed;animation:none;transform:none}
.pg-pagar.sec{background:var(--white);color:var(--ink)}
.pg-pagar.sec svg{stroke:var(--ink)}
@keyframes pgBrillo{0%,55%{transform:translateX(-120%)}85%,100%{transform:translateX(120%)}}
.pg-mp{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;font-size:15px;font-weight:600;color:var(--ink-soft)}
.pg-mp img{height:30px;width:auto;display:block}
.pg-mp .mp-logo.con-logo{display:inline-flex;align-items:center;gap:8px}
.pg-mp .mp-logo.con-logo b{font:800 17px var(--display);color:#1e3a8a;letter-spacing:-.2px}
.pg-mp .mp-ph{display:inline-flex;align-items:center;gap:6px;border:2px solid var(--mp);color:var(--mp);border-radius:999px;padding:2px 12px;font:800 14px var(--display)}
.pg-mp .mp-ph svg{width:16px;height:16px;stroke:var(--mp)}
.pg-aviso{margin-top:16px;padding:14px 16px;border-radius:14px;border:2px solid var(--ink);background:var(--primary-light);font-size:16px;line-height:1.45}
.pg-aviso.warn{background:var(--warn-bg)}
.pg-aviso.bad{background:var(--bad-bg)}
.pg-aviso a{font-weight:700;color:var(--primary-dark)}
.pg-prox{display:flex;align-items:center;gap:14px;margin-top:16px;padding:14px 16px;border-radius:14px;background:var(--ok-bg);border:2px solid var(--ink)}
.pg-prox svg{width:30px;height:30px;stroke:var(--ok);flex:none}
.pg-prox small{display:block;font-size:14px;color:#166534;font-weight:600}
.pg-prox strong{font-family:var(--display);font-size:20px}

.pg-seguro{display:flex;gap:10px;align-items:flex-start;margin-top:22px;font-size:14.5px;color:var(--ink-soft);line-height:1.4}
.pg-seguro svg{width:20px;height:20px;stroke:var(--ok);flex:none;margin-top:1px}
.pg-ayuda{text-align:center;margin-top:20px;font-size:16px;color:var(--ink-soft)}
.pg-ayuda a{color:var(--primary-dark);font-weight:700}

/* Ventana de pago */
.pg-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:18px;background:rgba(15,23,42,.55);backdrop-filter:blur(6px);animation:pgFade .25s ease}
.pg-modal[hidden]{display:none}
@keyframes pgFade{from{opacity:0}}
.pg-modal-caja{position:relative;width:min(460px,100%);max-height:calc(100dvh - 36px);overflow-y:auto;background:var(--white);border:2px solid var(--ink);border-radius:22px;box-shadow:10px 10px 0 var(--ink);padding:30px 26px 24px;text-align:center;animation:pgPop .45s var(--ease)}
@keyframes pgPop{from{opacity:0;transform:translateY(30px) scale(.92)}}
.pg-modal-caja h2{font-size:28px;margin:14px 0 8px}
.pg-modal-caja p{color:var(--ink-soft);font-size:17px}
.pg-cerrar{position:absolute;right:12px;top:12px;width:38px;height:38px;border-radius:10px;border:2px solid var(--line);background:#fff;font-size:24px;line-height:1;cursor:pointer;color:var(--ink)}
.pg-cerrar:hover{border-color:var(--ink)}
.pg-mpmarca{display:inline-flex;align-items:center;gap:10px;font-weight:700;color:var(--ink-soft);font-size:15px}
.pg-mpmarca img{height:30px}

/* Animación de espera */
.pg-orbita{position:relative;width:110px;height:110px;margin:6px auto 0}
.pg-orbita::before,.pg-orbita::after{content:"";position:absolute;inset:0;border-radius:50%;border:3px solid var(--primary-200);animation:pgOnda 2s ease-out infinite}
.pg-orbita::after{animation-delay:1s}
.pg-orbita .nucleo{position:absolute;inset:22px;border-radius:50%;background:var(--mp);border:2px solid var(--ink);display:grid;place-items:center;box-shadow:3px 3px 0 var(--ink)}
.pg-orbita .nucleo svg{width:34px;height:34px;stroke:#fff;animation:pgLate 1.6s ease-in-out infinite}
@keyframes pgOnda{from{transform:scale(.6);opacity:1}to{transform:scale(1.5);opacity:0}}
.pg-espera-pasos{list-style:none;text-align:left;margin:18px auto 4px;max-width:330px;font-size:16px;color:var(--ink-soft)}
.pg-espera-pasos li{display:flex;gap:10px;align-items:center;padding:4px 0}
.pg-espera-pasos li::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--line);flex:none}
.pg-espera-pasos li.on{color:var(--ink);font-weight:700}
.pg-espera-pasos li.on::before{background:var(--primary);animation:pgLate 1.2s infinite}
.pg-espera-pasos li.fin::before{background:var(--ok);animation:none}
.pg-btns{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.pg-btns .btn{width:100%}
.pg-link{background:none;border:0;color:var(--primary-dark);font:700 16px var(--body);text-decoration:underline;cursor:pointer;padding:6px}

/* Éxito */
.pg-check{width:112px;height:112px;margin:0 auto}
.pg-check circle{fill:var(--ok-bg);stroke:var(--ink);stroke-width:2.5;transform-origin:center;animation:pgPop .5s var(--ease)}
.pg-check path{fill:none;stroke:var(--ok);stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:60;stroke-dashoffset:60;animation:pgDibuja .6s .35s ease forwards}
.pg-icono-estado{width:96px;height:96px;margin:0 auto;border-radius:50%;display:grid;place-items:center;border:2.5px solid var(--ink);animation:pgPop .5s var(--ease)}
.pg-icono-estado svg{width:48px;height:48px;stroke:var(--ink)}
.pg-icono-estado.pend{background:var(--warn-bg)}
.pg-icono-estado.fallo{background:var(--bad-bg)}
.pg-ticket{margin:20px 0 4px;border:2px dashed var(--ink-soft);border-radius:14px;padding:6px 16px;text-align:left;background:var(--paper)}
.pg-ticket div{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:16px}
.pg-ticket div:last-child{border-bottom:0}
.pg-ticket span{color:var(--ink-soft);white-space:nowrap}
.pg-ticket b{text-align:right}
.pg-ticket .grande b{font-family:var(--display);font-size:22px;color:var(--ok)}
.pg-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.pg-grid2>div{border:2px solid var(--ink);border-radius:14px;padding:12px;background:#fff}
.pg-grid2 small{display:block;color:var(--ink-soft);font-weight:600;font-size:14px}
.pg-grid2 strong{font-family:var(--display);font-size:20px}
.pg-grid2 .cero strong{color:var(--ok)}


/* ── Formulario de tarjeta (Card Payment Brick) dentro de la ventana ── */
.pg-modal-caja.tarjeta{width:min(520px,100%);text-align:left}
.pg-modal-caja.tarjeta p{text-align:left}
.pg-tj-cab{display:flex;align-items:center;gap:14px;padding-right:44px}
.pg-tj-cab .ic{flex:none;width:52px;height:52px;border-radius:14px;background:var(--mp);border:2px solid var(--ink);box-shadow:3px 3px 0 var(--ink);display:grid;place-items:center}
.pg-tj-cab .ic svg{width:28px;height:28px;stroke:#fff}
.pg-tj-cab h2{margin:0 0 2px;font-size:24px}
.pg-tj-cab p{margin:0;font-size:15px;line-height:1.3}
.pg-tj-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:18px 0 6px;padding:12px 16px;border:2px solid var(--ink);border-radius:14px;background:var(--primary-light)}
.pg-tj-total small{font:700 14px var(--display);text-transform:uppercase;letter-spacing:.3px;color:var(--ink-soft)}
.pg-tj-total b{font:800 28px var(--display);color:var(--ink)}
.pg-tj-total em{font-style:normal;font-size:14px;font-weight:700;color:var(--ink-soft);margin-left:5px}
.pg-brick-caja{position:relative;min-height:280px;margin-top:6px}
.pg-brick{position:relative}
.pg-brick-carga{position:absolute;inset:0;z-index:2;background:var(--white);display:flex;flex-direction:column;gap:14px;padding:12px 2px;transition:opacity .35s}
.pg-brick-carga.fuera{opacity:0;pointer-events:none}
.pg-brick-carga i{display:block;height:50px;border-radius:12px;background:linear-gradient(90deg,var(--line) 25%,#f1f5f9 50%,var(--line) 75%);background-size:200% 100%;animation:pgEsqueleto 1.2s linear infinite}
.pg-brick-carga i:nth-child(2){width:70%}
.pg-brick-carga span{font-size:15px;color:var(--ink-soft);text-align:center;font-weight:600}
@keyframes pgEsqueleto{to{background-position:-200% 0}}
.pg-velo{position:absolute;inset:0;z-index:5;background:rgba(255,255,255,.94);backdrop-filter:blur(2px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;border-radius:14px;animation:pgFade .2s}
.pg-velo[hidden]{display:none}
.pg-velo b{font:800 20px var(--display);color:var(--ink)}
.pg-velo span{font-size:15px;color:var(--ink-soft)}
.pg-orbita.chico{width:80px;height:80px;margin:0 0 6px}
.pg-orbita.chico .nucleo{inset:16px}
.pg-orbita.chico .nucleo svg{width:24px;height:24px}
.pg-tj-err{margin:12px 0 0;padding:12px 14px;border-radius:12px;border:2px solid var(--ink);background:var(--bad-bg);color:#7f1d1d!important;font-size:15.5px!important;font-weight:600;animation:pgPop .35s var(--ease)}
.pg-tj-err[hidden]{display:none}
.pg-tj-pie{display:flex;align-items:center;gap:8px;margin-top:14px;font-size:14px;color:var(--ink-soft)}
.pg-tj-pie svg{width:18px;height:18px;stroke:var(--ok);flex:none}
.pg-modal-caja.tarjeta .pg-mp{margin-top:10px}
/* Verificación 3-D Secure */
.pg-3ds{position:relative;margin-top:12px;border:2px solid var(--ink);border-radius:14px;overflow:hidden;background:var(--paper);min-height:420px}
.pg-3ds iframe{display:block;width:100%;height:440px;border:0;background:#fff}
.pg-3ds-carga{position:absolute;inset:0;display:grid;place-items:center;color:var(--ink-soft);font-weight:600;pointer-events:none}
@media (max-width:560px){
  .pg-tj-cab h2{font-size:21px}
  .pg-tj-total b{font-size:24px}
  .pg-3ds iframe{height:420px}
}


/* Cabecera centrada + esfera de saldo */
.pg-cab{text-align:center}
.pg-plan{margin-top:10px;color:var(--ink-soft);font-size:16px}
.pg-orbe-wrap{position:relative;isolation:isolate;width:min(280px,76vw);margin:22px auto 12px}
.pg-orbe-wrap::before{content:"";position:absolute;inset:-14px;border-radius:50%;z-index:-1;background:radial-gradient(circle,var(--halo,transparent) 58%,transparent 70%);animation:pgHalo 2.8s ease-in-out infinite;transition:background .6s}
.pg-orbe-wrap.venc{--halo:rgba(239,68,68,.34)}
.pg-orbe-wrap.por{--halo:rgba(245,158,11,.34)}
.pg-orbe-wrap.ok{--halo:rgba(34,197,94,.30)}
@keyframes pgHalo{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.06);opacity:.5}}
.pg-orbe{position:relative;width:100%;aspect-ratio:1;border-radius:50%;border:3px solid var(--ink);background:#fff;box-shadow:6px 6px 0 var(--ink);transition:transform .3s var(--ease)}
.pg-orbe .agua{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:linear-gradient(180deg,#f8fafc,#eef2f7)}
.pg-orbe::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;z-index:3;
  background:radial-gradient(ellipse 34% 20% at 30% 17%,rgba(255,255,255,.75),transparent 70%),radial-gradient(ellipse 60% 60% at 50% 100%,rgba(15,23,42,.10),transparent 70%)}
/* líquido */
.liq{position:absolute;inset:0;transform:translateY(var(--y,100%));transition:transform 1.9s cubic-bezier(.22,.8,.25,1);will-change:transform}
.liq.vaciando{transition:transform 1.5s cubic-bezier(.55,0,.8,.4)}
.liq.llenando{transition:transform 2.3s cubic-bezier(.2,.9,.25,1)}
.liq.venc{--a:#fca5a5;--b:#ef4444;--c:#b91c1c}
.liq.por{--a:#fde68a;--b:#f59e0b;--c:#b45309}
.liq.ok{--a:#86efac;--b:#22c55e;--c:#15803d}
.liq .cuerpo{position:absolute;inset:0;background:linear-gradient(180deg,var(--b) 0,var(--b) 25%,var(--c) 100%);overflow:hidden}
.liq .ola{position:absolute;left:0;top:-15px;width:200%;max-width:none;height:16px;animation:pgOla 5.5s linear infinite}
.liq .ola path{fill:var(--b)}
.liq .ola.o2{top:-19px;opacity:.55;animation-duration:8s;animation-direction:reverse}
.liq .ola.o2 path{fill:var(--a)}
@keyframes pgOla{to{transform:translateX(-50%)}}
.pg-orbe.cambiando .liq .ola{animation-duration:1.7s}
.pg-orbe.cambiando .liq .ola.o2{animation-duration:2.6s}
.liq .cuerpo i{position:absolute;bottom:-12px;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.45);animation:pgBurb 5s ease-in infinite}
.liq .cuerpo i:nth-child(1){left:14%;animation-delay:0s}
.liq .cuerpo i:nth-child(2){left:27%;width:6px;height:6px;animation-delay:1.3s}
.liq .cuerpo i:nth-child(3){left:41%;width:12px;height:12px;animation-delay:2.6s}
.liq .cuerpo i:nth-child(4){left:55%;width:7px;height:7px;animation-delay:.7s}
.liq .cuerpo i:nth-child(5){left:68%;animation-delay:3.4s}
.liq .cuerpo i:nth-child(6){left:79%;width:6px;height:6px;animation-delay:2s}
.liq .cuerpo i:nth-child(7){left:88%;width:10px;height:10px;animation-delay:4.2s}
@keyframes pgBurb{0%{transform:translateY(0) scale(.6);opacity:0}15%{opacity:.9}100%{transform:translateY(-190px) scale(1);opacity:0}}
.pg-orbe.cambiando .liq .cuerpo i{animation-duration:2.2s}
/* texto dentro de la esfera */
.pg-orbe .txt{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 10%;color:var(--ink);text-shadow:0 0 10px rgba(255,255,255,.95),0 0 3px rgba(255,255,255,.9)}
.pg-orbe .txt small{font:800 13.5px var(--display);letter-spacing:.5px;text-transform:uppercase;color:var(--ink)}
.pg-orbe .pg-monto{font-size:clamp(32px,9.4vw,44px);line-height:1.1;letter-spacing:-.02em;background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--ink);-webkit-text-fill-color:var(--ink);white-space:nowrap}
.pg-orbe .pg-monto em{display:block;margin:0;font-size:14px;font-weight:800;letter-spacing:.8px;color:var(--ink);-webkit-text-fill-color:var(--ink)}
.pg-orbe.chapoteo{animation:pgChapoteo .9s var(--ease)}
@keyframes pgChapoteo{0%{transform:scale(1)}30%{transform:scale(1.07,.95)}55%{transform:scale(.97,1.04)}100%{transform:scale(1)}}
@media (max-width:560px){.pg-orbe .txt small{font-size:12.5px}}

/* Confeti */
.pg-confeti{position:fixed;inset:0;pointer-events:none;z-index:120;overflow:hidden}
.pg-confeti i{position:absolute;top:-14px;width:10px;height:16px;border-radius:2px;opacity:0;animation:pgCae var(--d) var(--t) cubic-bezier(.3,.6,.4,1) forwards}
@keyframes pgCae{0%{opacity:1;transform:translateY(0) rotate(0)}100%{opacity:1;transform:translateY(105vh) translateX(var(--x)) rotate(var(--r))}}

/* Móvil */
@media (max-width:560px){
  .pg-main{padding-top:22px}
  .pg-card{padding:22px 16px 18px;box-shadow:6px 6px 0 var(--ink);border-radius:18px}
  .pg-campo{padding:0 10px}
  .pg-campo-ico{display:none}
  .pg-campo input{font-size:13.5px;letter-spacing:0;padding:16px 2px}
  .pg-desglose{grid-template-columns:1fr}
  .pg-volver{font-size:14px;padding:8px 12px}
  .pg-pagar{font-size:18px}
  .pg-modal-caja{padding:26px 16px 20px;box-shadow:6px 6px 0 var(--ink)}
  .pg-pasos li span{font-size:13px}
}
@media (max-width:400px){
  .pg-campo{gap:4px;padding:0 8px}
  .pg-card{padding-left:14px;padding-right:14px}
  .pg-campo input{font-size:11px;letter-spacing:-.15px;padding:16px 0}
  .pg-estado{width:24px;height:24px}
  .pg-estado svg{width:24px;height:24px}
  .pg-orbe .pg-monto{font-size:clamp(28px,9vw,36px)}
}
@media (max-width:340px){
  .pg-campo input{font-size:9.5px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .pg-confeti{display:none}
}