/* SOFT: el modulo de pago compartido (checkout.css, sin tocar) vestido de indigo y lila. */
:root{
  --co-accent:#8250D2; --co-accent-hi:#6B3BBD; --co-ink:#2E1A50; --co-muted:#55427A;
  --co-line:rgba(46,26,80,.14); --co-glass:rgba(250,249,255,.88); --co-field:rgba(46,26,80,.035);
  --co-serif:"Archivo",Helvetica,Arial,sans-serif; --co-sans:"Hanken",Helvetica,Arial,sans-serif;
}
.co-bagbtn{width:42px;height:42px;color:var(--co-ink);border-color:rgba(46,26,80,.2);background:rgba(255,255,255,.5)}
.co-bagbtn svg{width:18px;height:18px}
.co-bagbtn b{color:#fff;font:700 .72rem/17px var(--co-sans)}
.co-add{font:700 .875rem/1 var(--co-sans);letter-spacing:.04em;text-transform:none;color:#fff;min-height:46px;padding:0 1.4rem;
  background:linear-gradient(135deg,#9466E0,#8250D2 60%,#6B3BBD);border:0;box-shadow:0 8px 22px -10px rgba(107,59,189,.65)}
.co-add:hover,.co-add.done{background:linear-gradient(135deg,#A27AE8,#8250D2 60%,#6B3BBD);color:#fff}
.co-scrim{background:rgba(46,26,80,.3)}
.co-bag h2{font-weight:500}
.co-bag h2 small,.co-row,.co-line p,.co-line .rm,.co-f label,.co-brand,.co-steps,.co-back,.co-flipbtn,.co-safe,.co-demo{font-size:.875rem;letter-spacing:.04em}
.co-row{text-transform:none}
.co-line p,.co-f label,.co-back,.co-flipbtn,.co-bag h2 small{text-transform:none}
.co-line .th{background:radial-gradient(70% 60% at 50% 45%,rgba(199,182,246,.25),transparent 72%),#F1EEFF;border:1px solid rgba(130,80,210,.16)}
.co-line .amt,.co-row.total strong,.co-opt b,.co-total strong,.co-finale p strong{color:var(--co-accent-hi);font-weight:600}
.co-qty span{font-size:.875rem}
.co-cta{font:700 .95rem/1 var(--co-sans);letter-spacing:.04em;text-transform:none;color:#fff;
  background:linear-gradient(100deg,#9466E0,#8250D2 55%,#6B3BBD);box-shadow:0 10px 30px -10px rgba(107,59,189,.6)}
.co-cta:hover{box-shadow:0 14px 38px -8px rgba(107,59,189,.75)}
.co-steps li.now i{color:#fff}
.co-panel::before{background:linear-gradient(135deg,rgba(199,182,246,.7),rgba(46,26,80,.08) 30%,rgba(46,26,80,.06) 70%,rgba(148,102,224,.5))}
.co-summary,.co-total{background:rgba(46,26,80,.03)}
.co-in:focus-within{box-shadow:0 0 0 3px rgba(130,80,210,.16)}
.co-in input::placeholder{color:rgba(85,66,122,.55)}
.co-in select option{color:#2E1A50}
.co-sub,.co-finale p{font-size:1rem;font-weight:500}
.co-opt span{font-size:.95rem}.co-opt small{font-size:.875rem}
.co-err{font-size:.875rem}
.co-flipbtn{background:rgba(46,26,80,.03)}
.co-spin{border-color:rgba(130,80,210,.22);border-top-color:var(--co-accent)}
.co-halo i{background:conic-gradient(from 0deg,transparent 0 50%,rgba(148,102,224,.9) 68%,rgba(231,214,255,.95) 76%,rgba(130,80,210,.9) 86%,transparent 97%)}
.co-ring i{background:conic-gradient(from 0deg,rgba(130,80,210,.18) 0 40%,#8250D2 60%,#C7B6F6 72%,#9466E0 84%,rgba(130,80,210,.18) 97%)}
.co-glow{background:radial-gradient(60% 60% at 50% 50%,rgba(199,182,246,.4),transparent 70%)}
/* the card itself: dark plum lacquer, light type on it */
.co-face{background:radial-gradient(120% 90% at 100% 0%,rgba(199,182,246,.25),transparent 55%),
  radial-gradient(90% 80% at 0% 100%,rgba(231,214,255,.14),transparent 60%),linear-gradient(145deg,#3A2168,#1F1138 60%,#301B58);
  border-color:rgba(199,182,246,.3)}
.co-num,.co-front .r3 .c-name,.co-front .r3 .c-exp,.co-front .net,.co-front .nfc{color:#F6F4FF}
.co-front .tier{color:#D9CFFB}
.co-front .r3 small{color:rgba(246,244,255,.6)}
.co-rear .sig b{background:#F6F4FF;color:#2E1A50}
.co-rear p{color:rgba(246,244,255,.55)}
@media(max-width:860px){
  .co-view[data-v="payment"] .co-cardside{background:linear-gradient(rgba(250,249,255,.98) 88%,rgba(250,249,255,0))}
}
@media(pointer:coarse){
  .co-bag,.co-panel::after{background:rgba(250,249,255,.97)}
}