/* Look & feel tipo Zara: blanco, negro, tipografía fina en mayúsculas, ángulos rectos */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;-webkit-touch-callout:none;touch-action:manipulation;cursor:default;background:#fff;color:#000;
  font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:300;letter-spacing:.04em;
  -webkit-user-select:none;user-select:none;-webkit-text-size-adjust:100%}
body{padding-top:env(safe-area-inset-top)}
::-webkit-scrollbar{display:none}
button{touch-action:manipulation}
.top{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;
  align-items:center;padding:22px 40px;border-bottom:1px solid #000}
.logo{font-size:22px;font-weight:500;letter-spacing:.35em}
.step{font-size:12px;color:#707070}
main{max-width:1000px;margin:0 auto;padding:0 40px 40px;min-height:calc(100vh - 70px)}
.screen{display:none}
.screen.active{display:block}
.screen.center.active{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;
  -webkit-justify-content:center;justify-content:center;align-items:center;min-height:70vh;text-align:center}
h2{font-size:13px;font-weight:500;letter-spacing:.2em;margin:34px 0 16px}
.hidden{display:none}

.countries{display:grid;grid-template-columns:repeat(4,1fr);grid-gap:10px}
.country{border:1px solid #d4d4d4;height:92px;min-width:0;padding:0 8px;text-align:center;font-size:13px;
  text-transform:uppercase;background:#fff;cursor:pointer;display:-webkit-flex;display:flex;
  -webkit-justify-content:center;justify-content:center;align-items:center}
.country.sel{background:#000;color:#fff;border-color:#000}

.amount-row{display:-webkit-flex;display:flex;align-items:stretch}
.amount{-webkit-flex:1;flex:1;font-size:64px;font-weight:200;border-bottom:1px solid #000;
  display:-webkit-flex;display:flex;align-items:center;padding:0 10px;margin-right:30px}
.keypad{display:grid;grid-template-columns:repeat(3,84px);grid-gap:8px}
.key{border:1px solid #d4d4d4;background:#fff;font-size:24px;font-weight:300;height:60px;padding:0}
.key:active{background:#000;color:#fff}

button{font-family:inherit;letter-spacing:.2em;border-radius:0;-webkit-appearance:none;cursor:pointer}
.primary{display:block;width:100%;margin-top:30px;background:#000;color:#fff;border:1px solid #000;
  padding:22px;font-size:14px;font-weight:500}
.primary:disabled{background:#fff;color:#b5b5b5;border-color:#d4d4d4}
.back{background:none;border:0;padding:24px 0 0;font-size:12px;font-weight:500}
.summary{font-size:13px;color:#707070;margin:0 0 24px;text-transform:uppercase}

.methods{display:grid;grid-template-columns:repeat(3,1fr);grid-gap:14px}
.method{border:1px solid #000;background:#fff;padding:0;height:240px;text-align:center;
  display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;
  -webkit-justify-content:center;justify-content:center;align-items:center;font-size:14px;font-weight:500}
.method:active{background:#000;color:#fff}
.logos{display:-webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;align-items:center;height:60px;margin-bottom:22px}
.logos img{height:100%;width:auto;margin:0 6px;max-width:150px}
.logos.small{height:40px}
.country-bar{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;
  align-items:center;padding-top:26px;font-size:13px;font-weight:500;text-transform:uppercase;letter-spacing:.2em}
.link{background:none;border:0;border-bottom:1px solid #000;padding:0 0 2px;font-size:11px;font-weight:500;letter-spacing:.2em}

.form label{display:block;font-size:11px;font-weight:500;letter-spacing:.18em;margin-bottom:22px}
.form input{display:block;width:100%;border:0;border-bottom:1px solid #000;border-radius:0;
  font-family:inherit;font-weight:300;font-size:26px;padding:8px 0;margin-top:6px;outline:0;
  -webkit-user-select:text;user-select:text;background:transparent}
.two{display:grid;grid-template-columns:1fr 1fr;grid-gap:30px}

.spinner{width:44px;height:44px;border:1px solid #d4d4d4;border-top-color:#000;border-radius:50%;
  margin:0 auto 24px;-webkit-animation:sp 1s linear infinite;animation:sp 1s linear infinite}
@-webkit-keyframes sp{to{-webkit-transform:rotate(360deg)}}
@keyframes sp{to{transform:rotate(360deg)}}
.check{font-size:64px;font-weight:200;margin-bottom:10px}
.toast{position:fixed;left:50%;bottom:24px;-webkit-transform:translateX(-50%);transform:translateX(-50%);
  background:#000;color:#fff;padding:12px 22px;font-size:12px;display:none}
.toast.show{display:block}

.qr{padding:26px;border:1px solid #000;background:#fff;min-width:372px;min-height:372px}
.qr svg{display:block;width:320px;height:320px}
.qr img{display:block;width:300px;height:300px;image-rendering:-webkit-optimize-contrast;image-rendering:pixelated}
.hint{font-size:12px;color:#707070;margin:22px 0 0;text-transform:uppercase}

/* Modo app instalada (pantalla completa): cabecera algo más baja bajo la barra de estado */
@media all and (display-mode:standalone){.top{padding-top:30px}}

.tap{width:200px;height:200px;margin:10px auto 0}
.tap svg{width:100%;height:100%}
.w{-webkit-animation:wv 1.6s ease-in-out infinite;animation:wv 1.6s ease-in-out infinite;opacity:.15}
.w2{-webkit-animation-delay:.25s;animation-delay:.25s}
.w3{-webkit-animation-delay:.5s;animation-delay:.5s}
@-webkit-keyframes wv{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes wv{0%,100%{opacity:.15}50%{opacity:1}}

/* Ticket que se "imprime": sale de la ranura y baja a saltos, como una impresora térmica */
.okh{margin:10px 0 6px;font-size:15px}
.printer{width:400px;height:14px;background:#000;margin:14px auto 0;border-radius:2px}
.tk-wrap{width:340px;margin:0 auto;overflow:hidden;padding-bottom:6px}
.ticket{background:#fff;border:1px solid #d4d4d4;border-top:0;padding:18px 20px 22px;text-align:left;
  font-family:"Courier New",Courier,monospace;font-size:13px;font-weight:400;letter-spacing:0;color:#000;
  -webkit-transform:translateY(-100%);transform:translateY(-100%);
  -webkit-animation:prn 4.5s steps(45,end) .3s forwards;animation:prn 4.5s steps(45,end) .3s forwards}
@-webkit-keyframes prn{to{-webkit-transform:translateY(0)}}
@keyframes prn{to{transform:translateY(0)}}
.ticket .c{text-align:center}
.ticket .brand{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:500;letter-spacing:.35em;font-size:16px;margin-bottom:4px}
.ticket .row{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;margin:4px 0}
.ticket .row span:first-child{-webkit-flex:1;flex:1;padding-right:12px}
.ticket .sep{border-top:1px dashed #000;margin:10px 0}
.ticket .tot{font-weight:700;font-size:15px}
.ticket .bars{height:38px;margin:14px 0 6px}
.ticket .bars svg{width:100%;height:100%}
.note{font-size:11px;color:#707070;max-width:420px;margin:16px auto 0;line-height:1.5;text-transform:uppercase;border-top:1px solid #d4d4d4;padding-top:12px}
.note:empty{display:none}
.qrlogo{height:56px;margin:0 0 18px}
.qr{position:relative}
.qrcenter{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);
  background:#fff;padding:7px 9px;border-radius:10px;display:-webkit-flex;display:flex;align-items:center;-webkit-justify-content:center;justify-content:center}
.qrcenter img{display:block;max-width:84px;max-height:50px;width:auto;height:auto}