:root{
    --brand:#0f766e;          /* sobrescrito pelo CONFIG.corPrincipal */
    --brand-soft:#e6f4f2;
    --ink:#0f1720;
    --mute:#667085;
    --line:#e6e8ec;
    --bg:#f3f4f7;
    --card:#ffffff;
    --ok:#16a34a;
    --ok-d:#128a3e;
    --radius:16px;
    --shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px rgba(16,24,40,.06);
  }
  *{box-sizing:border-box;margin:0}
  html{-webkit-text-size-adjust:100%}
  body{background:var(--bg);color:var(--ink);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased}

  /* barra de urgência (opcional) */
  .urgency{display:none;background:var(--ink);color:#fff;text-align:center;font-size:13px;font-weight:600;padding:9px 12px;letter-spacing:.2px}
  .urgency.on{display:block}
  .urgency b{font-variant-numeric:tabular-nums;background:rgba(255,255,255,.14);padding:2px 8px;border-radius:6px;margin-left:6px}

  .page{max-width:1040px;margin:0 auto;padding:20px 16px 56px}

  /* banner */
  .banner{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-bottom:20px;background:#dfe3ea;line-height:0}
  .banner img{width:100%;height:auto;display:block}
  .banner .ph{line-height:1.4;aspect-ratio:1200/300;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
    background:repeating-linear-gradient(135deg,#eef0f4,#eef0f4 14px,#e6e9ef 14px,#e6e9ef 28px);color:#7a8294;font-weight:600;text-align:center;padding:12px;border:2px dashed #c4cad6;border-radius:var(--radius)}
  .banner .ph small{font-weight:500;font-size:12px}

  .grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:20px;align-items:start}
  @media(max-width:880px){.grid{grid-template-columns:1fr}.summary{order:-1;position:static!important}}

  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px}
  .stack>.card+.card{margin-top:16px}

  /* passos */
  .step-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
  .dot{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;font-weight:700;font-size:14px;flex:none;transition:.2s}
  .dot.done{background:var(--ok)}
  .step-h h2{font-size:17px;font-weight:700;letter-spacing:-.2px}
  .step-h p{font-size:13px;color:var(--mute)}

  .field+.field{margin-top:12px}
  label{display:block;font-size:13px;font-weight:600;margin-bottom:6px}
  input{width:100%;padding:14px;border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:16px;background:#fff;transition:.15s;color:var(--ink)}
  input::placeholder{color:#a3aab8}
  input:focus{outline:0;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
  .phone{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:12px;background:#fff;transition:.15s;overflow:hidden}
  .phone:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
  .phone .cc{display:grid;place-items:center;padding:0 14px;background:#f3f4f7;border-right:1.5px solid var(--line);font-weight:700;font-size:16px;color:var(--ink)}
  .phone input{border:0;border-radius:0;box-shadow:none!important}
  .row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media(max-width:520px){.row2{grid-template-columns:1fr}}

  /* métodos */
  .methods{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .m{position:relative;display:flex;align-items:center;gap:12px;text-align:left;border:1.5px solid var(--line);border-radius:14px;padding:14px;background:#fff;cursor:pointer;font:inherit;transition:.15s;color:var(--ink)}
  .m:hover{border-color:#c9ced8}
  .m.sel{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px var(--brand-soft)}
  .m .badge{width:42px;height:42px;border-radius:11px;display:grid;place-items:center;color:#fff;font-weight:800;font-size:15px;flex:none}
  .m[data-m="mpesa"] .badge{background:#e60000}
  .m[data-m="emola"] .badge{background:#f58220}
  .m b{display:block;font-size:15px}
  .m small{color:var(--mute);font-size:12px}
  .m .tick{margin-left:auto;width:20px;height:20px;border-radius:50%;border:2px solid #cfd4de;flex:none;transition:.15s}
  .m.sel .tick{border-color:var(--brand);background:var(--brand) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M5 10.5l3.2 3.2L15 7' stroke='white' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat}
  @media(max-width:520px){.methods{grid-template-columns:1fr}}

  .pay{display:none;margin-top:16px;animation:in .25s ease}
  .pay.show{display:block}
  @keyframes in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .num{display:flex;align-items:center;justify-content:space-between;gap:12px;background:linear-gradient(135deg,#111827,#1f2937);color:#fff;border-radius:14px;padding:16px 18px}
  .num span{font-size:12px;color:#aab2c0;display:block}
  .num strong{font-size:24px;letter-spacing:1px;font-weight:800;display:block;margin:2px 0}
  .copy{border:0;background:#fff;color:var(--ink);border-radius:10px;padding:10px 16px;font:inherit;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;transition:.15s}
  .copy:hover{transform:translateY(-1px)}
  .amount-line{display:flex;justify-content:space-between;align-items:center;margin:14px 2px 4px;font-size:14px;color:var(--mute)}
  .amount-line b{color:var(--ink);font-size:18px}
  .steps-list{list-style:none;padding:0;margin:14px 0 0;counter-reset:s}
  .steps-list li{counter-increment:s;display:flex;gap:12px;font-size:14px;padding:9px 0;border-top:1px solid var(--line)}
  .steps-list li:first-child{border-top:0}
  .steps-list li::before{content:counter(s);flex:none;width:22px;height:22px;border-radius:50%;background:#eef0f4;color:#475066;font-weight:700;font-size:12px;display:grid;place-items:center;margin-top:1px}
  .note{display:flex;gap:10px;background:#fff8e6;border:1px solid #f4dfa0;color:#6b5210;border-radius:12px;padding:12px 14px;font-size:13px;margin-top:12px}

  /* CTA */
  .cta{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;background:var(--ok);color:#fff;border:0;border-radius:14px;padding:18px;font:inherit;font-size:17px;font-weight:700;cursor:pointer;text-decoration:none;box-shadow:0 8px 20px rgba(22,163,74,.28);transition:.15s}
  .cta:hover{background:var(--ok-d);transform:translateY(-1px)}
  .cta[disabled]{background:#c3c9d4;box-shadow:none;cursor:not-allowed;transform:none}
  .cta svg{width:22px;height:22px;flex:none}
  .hint{font-size:13px;color:var(--mute);text-align:center;margin-top:12px}

  /* resumo */
  .summary{position:sticky;top:16px}
  .prod{display:flex;gap:14px;align-items:center;padding-bottom:18px;border-bottom:1px solid var(--line)}
  .thumb{width:76px;height:76px;border-radius:14px;object-fit:cover;flex:none;background:linear-gradient(135deg,var(--brand),#111827);display:grid;place-items:center;color:#fff;font-weight:800;font-size:26px;overflow:hidden}
  .thumb img{width:100%;height:100%;object-fit:cover;display:block}
  .prod h3{font-size:16px;font-weight:700;line-height:1.3}
  .prod p{font-size:13px;color:var(--mute);margin-top:2px}
  .lines{padding:16px 0;border-bottom:1px solid var(--line)}
  .line{display:flex;justify-content:space-between;font-size:14px;color:var(--mute)}
  .line+.line{margin-top:8px}
  .line s{color:#9aa1af}
  .line .off{color:var(--ok);font-weight:700}
  .total{display:flex;justify-content:space-between;align-items:baseline;padding-top:16px}
  .total span{font-weight:600}
  .total b{font-size:28px;letter-spacing:-.8px;font-weight:800}
  .perks{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
  .perks li{display:flex;gap:10px;font-size:14px}
  .perks svg{width:18px;height:18px;flex:none;color:var(--ok);margin-top:2px}
  .guarantee{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:14px;background:var(--brand-soft);border-radius:12px;font-size:13px}
  .guarantee svg{width:26px;height:26px;color:var(--brand);flex:none}
  .guarantee b{display:block;font-size:14px;margin-bottom:1px}
  .secure{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;font-size:12px;color:var(--mute)}
  .secure svg{width:15px;height:15px}

  footer{text-align:center;font-size:12px;color:#8b92a1;margin-top:28px}

/* ===== dados bancários (Angola) ===== */
.m .badge{background:#111827;font-size:13px}
.methods.one{grid-template-columns:1fr}
.bank-box{background:linear-gradient(135deg,#111827,#1f2937);color:#fff;border-radius:14px;padding:6px 18px 8px}
.bank-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:14px 0 10px;border-bottom:1px solid rgba(255,255,255,.12);font-weight:700;font-size:15px}
.copy-all{border:0;background:rgba(255,255,255,.14);color:#fff;border-radius:8px;padding:8px 12px;font:inherit;font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap;transition:.15s}
.copy-all:hover{background:rgba(255,255,255,.24)}
.drow{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08)}
.drow:last-child{border-bottom:0}
.drow .k{font-size:12px;color:#aab2c0;display:block}
.drow .v{font-size:17px;font-weight:700;display:block;margin-top:2px;overflow-wrap:anywhere;letter-spacing:.3px}
.drow.big .v{font-size:19px;letter-spacing:.6px}
.drow .copy{padding:8px 14px;font-size:13px;flex:none}
@media(max-width:520px){.copy-all{padding:8px 10px;font-size:12px}.drow .v{font-size:16px}.drow.big .v{font-size:17px}}

/* ===== seletor de tickets ===== */
.tickets{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tk{position:relative;display:flex;align-items:center;gap:12px;text-align:left;border:1.5px solid var(--line);border-radius:14px;padding:12px;background:#fff;cursor:pointer;font:inherit;color:var(--ink);transition:.15s}
.tk:hover{border-color:#c9ced8}
.tk.sel{border-color:var(--brand);background:var(--brand-soft);box-shadow:0 0 0 3px var(--brand-soft)}
.tk .tt{width:58px;height:58px;border-radius:10px;overflow:hidden;flex:none;background:#111827;color:#fff;display:grid;place-items:center;font-weight:800}
.tk .tt img{width:100%;height:100%;object-fit:cover;display:block}
.tk b{display:block;font-size:17px;letter-spacing:-.3px;line-height:1.2}
.tk small{color:var(--mute);font-size:12px}
.tk .selo{position:absolute;top:-9px;right:10px;background:var(--brand);color:#fff;font-size:10px;font-weight:800;letter-spacing:.4px;padding:3px 8px;border-radius:999px}
@media(max-width:520px){.tickets{gap:10px}.tk{padding:10px;gap:10px}.tk .tt{width:50px;height:50px}.tk b{font-size:15px}}
.thumb img{animation:swap .25s ease}
@keyframes swap{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}

.tk .tt{background:#0a0a0c}
.custom{margin-top:14px;animation:in .25s ease}
.usdbox{display:flex;align-items:stretch;border:1.5px solid var(--line);border-radius:12px;background:#fff;overflow:hidden;transition:.15s}
.usdbox:focus-within{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.usdbox span{display:grid;place-items:center;padding:0 16px;background:#f3f4f7;border-right:1.5px solid var(--line);font-weight:800;font-size:18px}
.usdbox input{border:0;border-radius:0;box-shadow:none!important;font-size:18px;font-weight:700}
.custom small{display:block;margin-top:8px;font-size:13px;color:var(--mute)}
.custom small.err{color:#b42318}
/* cartões de ticket em coluna: imagem grande em cima */
.tk{flex-direction:column;align-items:stretch;gap:8px;padding:8px 8px 10px}
.tk .tt{width:100%;height:auto;aspect-ratio:16/10;border-radius:9px}
.tk .tt img{object-position:center 50%}
.tk>span:last-of-type{padding:0 4px}
.tk b{font-size:18px}
@media(max-width:520px){.tk{padding:7px 7px 9px}.tk .tt{width:100%;height:auto}.tk b{font-size:16px}}
@media(min-width:880px){.tickets{grid-template-columns:repeat(3,1fr)}}