/* SERVIDIS + V30 | Método de pago responsive para PC / tablet / móvil.
   Cargado al final de las hojas de estilo; no altera pasarelas ni datos. */

/* El texto introductorio y las tarjetas comparten jerarquía y anchos fluidos */
#pagos.payments-section{padding-block:clamp(36px,5vw,72px);overflow:hidden}
#pagos .payments-layout{
  display:grid!important;
  grid-template-columns:minmax(0,270px) minmax(0,1fr)!important;
  align-items:start!important;
  column-gap:clamp(18px,2.4vw,32px)!important;
  row-gap:22px!important;
  width:min(1240px,calc(100% - 44px));
  margin-inline:auto;
}
#pagos .payments-intro-card{
  position:static!important;min-width:0!important;
  padding:6px 2px 0 0!important;
  background:none!important;border:0!important;box-shadow:none!important;
}
#pagos .payments-intro-card .eyebrow{color:#a1f2bf;letter-spacing:.16em;font-size:.71rem}
#pagos .payments-intro-card h2{max-width:14ch;margin:10px 0 14px!important;font-size:clamp(1.75rem,2.3vw,2.4rem)!important;line-height:1.1!important;letter-spacing:-.045em!important;color:#f8f8ff}
#pagos .payments-intro-card p{margin:0!important;max-width:37ch;font-size:.89rem!important;line-height:1.65!important;color:#aab5ce!important}
#pagos .payment-security-note{
  display:flex!important;align-items:center!important;gap:12px!important;
  margin-top:19px!important;padding:13px 14px!important;
  min-width:0!important;width:100%!important;
  border:1px solid rgba(114,242,171,.2)!important;border-radius:16px!important;
  background:linear-gradient(115deg,rgba(27,78,58,.30),rgba(13,42,38,.30))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
#pagos .payment-security-note>span{
  display:grid;place-items:center;flex:0 0 32px;
  width:32px;height:32px;border-radius:50%;font-size:.91rem;font-weight:900;
  background:#91f4ba;color:#0e3322;
}
#pagos .payment-security-note strong{font-size:.82rem!important;font-weight:800;color:#e8fff1!important;line-height:1.25}
#pagos .payment-security-note small{display:block;font-size:.72rem!important;line-height:1.45!important;color:#9cb8ae!important}

/* Tarjetas de pago uniformes: icono + nombre; fila inferior de acción */
#pagos .payment-public-grid{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  grid-auto-rows:1fr!important;
  width:100%;gap:14px!important;min-width:0;
  align-items:stretch!important;
}
#pagos .payment-public-card{
  --payment-tint:rgba(152,130,225,.85);
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr) 26px!important;
  grid-template-rows:minmax(63px,auto) auto!important;
  grid-template-areas:'brand copy copy' 'state state arrow'!important;
  align-items:center!important;
  align-content:space-between!important;
  column-gap:12px!important;row-gap:17px!important;
  width:100%!important;min-width:0!important;max-width:none!important;
  min-height:158px!important;height:100%!important;
  padding:18px!important;margin:0!important;
  border:1px solid rgba(151,163,206,.22)!important;border-radius:21px!important;
  color:#f8f9ff!important;text-align:left!important;
  background:linear-gradient(140deg,#1c2135,#111727 76%)!important;
  box-shadow:0 14px 33px rgba(1,5,15,.17),inset 0 1px 0 rgba(255,255,255,.045)!important;
  position:relative;isolation:isolate;overflow:hidden!important;
  cursor:pointer;
  transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease!important;
}
#pagos .payment-public-card.yape{--payment-tint:#aa6df1}
#pagos .payment-public-card.binance{--payment-tint:#e8b746}
#pagos .payment-public-card.paypal{--payment-tint:#65aaf1}
#pagos .payment-public-card::before{
  content:''!important;position:absolute!important;z-index:0!important;
  inset:0 auto 0 0!important;width:3px!important;height:auto!important;
  background:var(--payment-tint)!important;opacity:.85!important;
  border-radius:0!important;pointer-events:none;
}
#pagos .payment-public-card::after{
  content:''!important;display:block!important;position:absolute!important;
  inset:auto 18px 48px!important;height:1px!important;
  background:linear-gradient(90deg,rgba(174,184,222,.16),rgba(174,184,222,.05))!important;
  pointer-events:none;
}
#pagos .payment-public-card>:where(.payment-mark,.payment-card-copy,.payment-card-state,.payment-card-arrow){position:relative;z-index:1}
#pagos .payment-public-card:is(:hover,:focus-visible){
  transform:translateY(-3px)!important;
  border-color:var(--payment-tint)!important;
  box-shadow:0 24px 46px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.06)!important;
}
#pagos .payment-public-card:focus-visible{outline:2px solid #a0f1c6!important;outline-offset:3px!important}
#pagos .payment-public-card .payment-mark.payment-brand{
  grid-area:brand!important;display:grid!important;place-items:center!important;
  justify-self:start!important;align-self:center!important;
  flex:0 0 54px!important;width:54px!important;height:54px!important;
  padding:0!important;border:0!important;border-radius:15px!important;
  background:transparent!important;box-shadow:none!important;overflow:hidden!important;
}
#pagos .payment-public-card .payment-mark.payment-brand.binance{background:#181f30!important;border:1px solid rgba(233,191,77,.2)!important;padding:11px!important}
#pagos .payment-public-card .payment-mark.payment-brand.paypal{background:#f7faff!important;padding:11px!important}
#pagos .payment-public-card .payment-brand-image{width:100%!important;height:100%!important;display:block!important;object-fit:contain!important;object-position:center!important}
#pagos .payment-public-card .payment-card-copy{
  grid-area:copy!important;display:flex!important;flex-direction:column!important;
  align-items:flex-start!important;justify-content:center!important;
  min-width:0!important;gap:6px!important;
}
#pagos .payment-public-card .payment-card-copy strong{
  margin:0!important;color:#fff!important;font-size:clamp(.94rem,1.25vw,1.1rem)!important;
  font-weight:850!important;letter-spacing:-.015em;line-height:1.25!important;overflow-wrap:anywhere;
}
#pagos .payment-public-card .payment-card-copy small{
  display:block!important;margin:0!important;color:#a5b0c8!important;
  font-size:.75rem!important;line-height:1.43!important;
  white-space:normal!important;overflow:visible!important;text-overflow:clip!important;
}
#pagos .payment-public-card .payment-card-state{
  grid-area:state!important;display:inline-flex!important;align-items:center!important;
  justify-self:start!important;align-self:center!important;
  margin:0!important;padding:0!important;background:transparent!important;border:0!important;
  color:#c9d6e9!important;font-size:.75rem!important;font-weight:800!important;
  letter-spacing:.01em!important;text-transform:none!important;white-space:nowrap!important;
}
#pagos .payment-public-card .payment-card-arrow{
  grid-area:arrow!important;display:grid!important;place-items:center!important;
  justify-self:end!important;align-self:center!important;
  width:26px!important;height:26px!important;margin:0!important;
  border:1px solid rgba(173,185,221,.18)!important;border-radius:9px!important;
  background:rgba(255,255,255,.045)!important;color:#dce4f5!important;
  font-size:1.35rem!important;line-height:1!important;
}

/* Tablet: cabecera sobre los métodos para conservar columnas respirables */
@media(max-width:1250px){
  #pagos .payments-layout{grid-template-columns:1fr!important}
  #pagos .payments-intro-card{display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,275px)!important;column-gap:22px;align-items:end}
  #pagos .payments-intro-card .eyebrow,#pagos .payments-intro-card h2,#pagos .payments-intro-card p{grid-column:1}
  #pagos .payments-intro-card h2{max-width:none;margin-bottom:9px!important}
  #pagos .payments-intro-card p{max-width:560px}
  #pagos .payment-security-note{grid-column:2;grid-row:1/span 3;align-self:center;margin:0!important}
}
@media(max-width:840px){
  #pagos .payments-intro-card{display:block!important}
  #pagos .payment-security-note{max-width:500px;margin-top:17px!important}
  #pagos .payment-public-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}
/* Mobile: una sola columna, marca + texto + acción en una fila táctil compacta */
@media(max-width:760px){
  #pagos.payments-section{padding-block:34px 44px}
  #pagos .payments-layout{width:calc(100% - 28px);row-gap:19px!important}
  #pagos .payments-intro-card{padding:0!important}
  #pagos .payments-intro-card h2{font-size:clamp(1.7rem,7vw,2.05rem)!important;margin:7px 0 10px!important}
  #pagos .payments-intro-card p{font-size:.84rem!important;line-height:1.58!important}
  #pagos .payment-security-note{padding:11px 12px!important;border-radius:14px!important}
  #pagos .payment-public-grid{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
  #pagos .payment-public-card{
    min-height:92px!important;height:auto!important;padding:14px 15px!important;
    grid-template-columns:50px minmax(0,1fr) 27px!important;
    grid-template-rows:auto!important;
    grid-template-areas:'brand copy arrow'!important;
    column-gap:12px!important;row-gap:0!important;
    border-radius:17px!important;
  }
  #pagos .payment-public-card::after{display:none!important}
  #pagos .payment-public-card .payment-mark.payment-brand{width:50px!important;height:50px!important;flex-basis:50px!important;border-radius:13px!important}
  #pagos .payment-public-card .payment-mark.payment-brand.binance,#pagos .payment-public-card .payment-mark.payment-brand.paypal{padding:10px!important}
  #pagos .payment-public-card .payment-card-copy{gap:5px!important}
  #pagos .payment-public-card .payment-card-copy strong{font-size:.98rem!important}
  #pagos .payment-public-card .payment-card-copy small{font-size:.72rem!important;line-height:1.36!important}
  #pagos .payment-public-card .payment-card-state{display:none!important}
  #pagos .payment-public-card .payment-card-arrow{width:27px!important;height:27px!important}
}
@media(max-width:360px){
  #pagos .payments-layout{width:calc(100% - 22px)}
  #pagos .payment-public-card{padding:12px!important;column-gap:10px!important;grid-template-columns:46px minmax(0,1fr) 24px!important}
  #pagos .payment-public-card .payment-mark.payment-brand{width:46px!important;height:46px!important}
  #pagos .payment-public-card .payment-card-copy strong{font-size:.92rem!important}
  #pagos .payment-public-card .payment-card-copy small{font-size:.69rem!important}
}

/* Modal de pago: accesible, contenida, QR y datos que no desbordan */
.payment-modal-backdrop{padding:clamp(12px,2.4vw,26px)!important;overflow-y:auto;overscroll-behavior:contain;z-index:190!important}
.payment-modal{
  width:min(650px,100%)!important;max-width:100%!important;
  max-height:min(88dvh,790px)!important;
  border:1px solid rgba(157,167,208,.25)!important;border-radius:24px!important;
  background:linear-gradient(160deg,#1c2235,#111523 80%)!important;
  box-shadow:0 32px 90px rgba(0,0,0,.5)!important;
  overflow-x:hidden!important;overflow-y:auto!important;overscroll-behavior:contain;
}
.payment-modal .payment-modal-header{
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:15px!important;padding:19px 22px!important;
  background:rgba(18,24,39,.94)!important;border-bottom:1px solid rgba(164,177,217,.15)!important;
  border-radius:24px 24px 0 0;
}
.payment-modal .payment-modal-header h2{font-size:1.4rem!important;line-height:1.15!important;overflow-wrap:anywhere}
.payment-modal .payment-modal-header .icon-btn{flex:0 0 38px!important;width:38px!important;height:38px!important;border-radius:11px!important}
.payment-modal .payment-modal-body{padding:20px 22px!important}
.payment-modal .payment-detail-hero{margin:0 0 17px!important;gap:13px!important;min-width:0!important;padding:16px!important;border-radius:18px!important;background:linear-gradient(110deg,#232b40,#172032)!important}
.payment-modal .payment-detail-hero>div{min-width:0!important}
.payment-modal .payment-detail-hero .payment-mark.payment-brand{flex:0 0 58px!important;width:58px!important;height:58px!important;border-radius:15px!important}
.payment-modal .payment-detail-hero .payment-mark.payment-brand.binance,.payment-modal .payment-detail-hero .payment-mark.payment-brand.paypal{padding:12px!important}
.payment-modal .payment-detail-hero strong{font-size:1.06rem!important}
.payment-modal .payment-detail-hero small{font-size:.76rem!important;line-height:1.45!important}
.payment-modal .payment-accordion{margin:10px 0!important;border:1px solid rgba(150,166,207,.2)!important;border-radius:15px!important;background:#111827!important;overflow:hidden}
.payment-modal .payment-accordion summary{min-height:54px;display:flex;align-items:center;gap:10px;padding:15px 17px!important;font-size:.92rem!important;line-height:1.4!important}
.payment-modal .payment-accordion-body{padding:0 17px 17px!important;line-height:1.6!important;color:#b5bfd5!important;overflow-wrap:anywhere}
.payment-modal .payment-accordion-body dl>div{display:grid;grid-template-columns:minmax(100px,33%) minmax(0,1fr);gap:12px;border-top:1px solid rgba(152,169,210,.12)}
.payment-modal .payment-accordion-body dt,.payment-modal .payment-accordion-body dd{overflow-wrap:anywhere;word-break:normal}
.payment-modal .payment-qr-box img{width:min(260px,100%);max-height:260px;object-fit:contain}
.payment-modal .payment-modal-footer{
  position:sticky!important;bottom:0!important;z-index:3!important;
  display:flex!important;justify-content:flex-end!important;
  padding:15px 22px max(15px,env(safe-area-inset-bottom))!important;
  background:rgba(18,24,39,.95)!important;border-top:1px solid rgba(164,177,217,.15)!important;
  backdrop-filter:blur(10px);
}
.payment-modal .payment-modal-footer .btn{min-height:45px!important;border-radius:12px!important}
@media(max-width:600px){
  .payment-modal-backdrop{padding:0!important;align-items:end!important}
  .payment-modal{width:100%!important;max-height:min(90dvh,840px)!important;border-radius:23px 23px 0 0!important;border-bottom:0!important}
  .payment-modal .payment-modal-header{padding:17px 17px!important;border-radius:23px 23px 0 0!important}
  .payment-modal .payment-modal-header h2{font-size:1.2rem!important}
  .payment-modal .payment-modal-body{padding:15px 16px!important}
  .payment-modal .payment-detail-hero{padding:13px!important;min-height:78px!important}
  .payment-modal .payment-detail-hero .payment-mark.payment-brand{flex-basis:52px!important;width:52px!important;height:52px!important}
  .payment-modal .payment-detail-hero .payment-mark.payment-brand.binance,.payment-modal .payment-detail-hero .payment-mark.payment-brand.paypal{padding:11px!important}
  .payment-modal .payment-accordion summary{padding:14px!important}
  .payment-modal .payment-accordion-body{padding:0 14px 15px!important}
  .payment-modal .payment-accordion-body dl>div{grid-template-columns:1fr;gap:3px;padding:11px 0}
  .payment-modal .payment-modal-footer{padding:14px 16px max(14px,env(safe-area-inset-bottom))!important}
  .payment-modal .payment-modal-footer .btn{width:100%!important}
}

/* Administrador: cuadros consistentes sin campos comprimidos */
#metodos-de-pago .payment-admin-grid{
  display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:15px!important;align-items:stretch!important;
}
#metodos-de-pago .payment-admin-card{
  display:flex!important;flex-direction:column!important;gap:14px!important;
  min-width:0!important;height:100%!important;padding:20px!important;
  border:1px solid rgba(159,167,203,.22)!important;border-radius:19px!important;
  background:linear-gradient(165deg,#1b2031,#111624)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
}
#metodos-de-pago .payment-admin-title{display:flex!important;align-items:center!important;gap:13px!important;padding-bottom:15px;border-bottom:1px solid rgba(161,177,219,.13);min-width:0}
#metodos-de-pago .payment-admin-title>div{min-width:0}
#metodos-de-pago .payment-admin-title h3{font-size:1.05rem!important;margin:0!important;color:#fff!important}
#metodos-de-pago .payment-admin-title .payment-mark.payment-brand{flex:0 0 48px!important;width:48px!important;height:48px!important;border-radius:13px!important}
#metodos-de-pago .payment-admin-title .payment-mark.payment-brand.binance,#metodos-de-pago .payment-admin-title .payment-mark.payment-brand.paypal{padding:10px!important}
#metodos-de-pago .payment-admin-card label{min-width:0!important;overflow-wrap:anywhere}
#metodos-de-pago .payment-admin-card input,#metodos-de-pago .payment-admin-card textarea{width:100%!important;min-width:0!important;border-radius:11px!important;box-sizing:border-box!important;background:#0d1220!important;border:1px solid rgba(148,160,199,.25)!important}
#metodos-de-pago .payment-admin-card textarea{min-height:105px;resize:vertical}
#metodos-de-pago .payment-admin-card input[type='checkbox']{width:auto!important}
#metodos-de-pago .payment-admin-card .payment-qr-preview{margin-top:auto;padding:12px;border:1px solid rgba(158,174,215,.15);border-radius:13px;background:#101626;min-width:0}
#metodos-de-pago .payment-admin-card .payment-qr-preview img{display:block;max-width:210px;width:100%;height:auto;max-height:210px;object-fit:contain;margin-inline:auto}
@media(max-width:1350px){#metodos-de-pago .payment-admin-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:760px){#metodos-de-pago .payment-admin-grid{grid-template-columns:minmax(0,1fr)!important}#metodos-de-pago .payment-admin-card{padding:17px!important;border-radius:16px!important}}
@media(prefers-reduced-motion:reduce){#pagos .payment-public-card,#pagos .payment-public-card:is(:hover,:focus-visible){transition:none!important;transform:none!important}}