/* ═══════════════════════════════════════════════════════════════════════════
   INSCRIÇÃO — v2
   Salvar como: public/inscrever.css

   Direção: interface de aplicativo, não de site.
   • Mobile primeiro: conteúdo full-bleed, separado por filetes em vez de
     cards empilhados. Sem margem lateral desperdiçada.
   • O contrato virou sanfona: 5 grupos fechados ocupam ~260px em vez dos
     ~330px de uma caixa rolável que ainda escondia o resto da tela.
   • Barra de ação fixa no rodapé (sticky): o botão e o total ficam sempre
     visíveis e na altura do polegar.
   • Tudo escopado em .chk para não vazar no resto do site.
   ═══════════════════════════════════════════════════════════════════════════ */

   .chk {
    --tinta:    #0b0c0e;
    --tinta-60: #565d66;
    --tinta-40: #8a929c;
    --branco:   #ffffff;
    --neve:     #f4f5f7;
    --borda:    #e6e8ec;
    --borda-2:  #d3d7dd;
    --cruz:     #cc0000;
    --cruz-bg:  #fff3f3;
    --cruz-esc: #990000;
    --ok:       #0d7a58;
    --ok-bg:    #eefaf5;
    --r:        14px;
    --r-s:      10px;
  
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    color: var(--tinta);
    font-size: 15px;
    line-height: 1.5;
    letter-spacing: -.011em;
    padding: 0 0 96px;
    -webkit-font-smoothing: antialiased;
  }
  .chk h1, .chk h2, .chk h3 {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    letter-spacing: -.035em; margin: 0;
  }
  .chk .num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
  
  /* ── Animação de entrada ─────────────────────────────────────────────── */
  @keyframes chkSobe { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
  .chk .anima { animation: chkSobe .45s cubic-bezier(.22,.9,.3,1) both; animation-delay: calc(var(--d,0) * 60ms); }
  
  /* ═══ TOPO FIXO ═══════════════════════════════════════════════════════════
     Barra estreita com voltar, nome do curso e as marcas de passo. Fica colada
     no topo para o aluno nunca perder a referência de onde está. */
  .chk-topo {
    position: sticky; top: 0; z-index: 20;
    background: rgba(255,255,255,.88); backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--borda);
    padding: 10px 16px 11px;
  }
  .chk-topo-linha { display: flex; align-items: center; gap: 12px; }
  .chk-voltar {
    flex: none; width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--borda); border-radius: 50%; background: var(--branco);
    color: var(--tinta-60); text-decoration: none; font-size: 13px; transition: .2s ease;
  }
  .chk-voltar:hover, .chk-voltar:focus-visible { color: var(--cruz); border-color: var(--cruz); }
  .chk-topo-txt { min-width: 0; flex: 1; }
  .chk-topo-txt strong {
    display: block; font-size: 14px; font-weight: 700; letter-spacing: -.02em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .chk-topo-txt span { display: block; font-size: 11.5px; color: var(--tinta-40); font-weight: 500; }
  
  /* Marcas de passo: traços que se preenchem. Rótulo só do passo atual —
     os nomes dos outros passos não ajudam ninguém e roubam altura. */
  .chk-passos { display: flex; gap: 4px; margin-top: 10px; }
  .chk-passo { flex: 1; height: 3px; border-radius: 3px; background: var(--borda-2); overflow: hidden; }
  .chk-passo span { display: block; height: 100%; width: 0; background: var(--cruz); border-radius: 3px; transition: width .5s cubic-bezier(.22,.9,.3,1); }
  .chk-passo.feito span { width: 100%; background: var(--ok); }
  .chk-passo.agora span { width: 100%; }
  .chk-rot {
    display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--cruz); margin-top: 7px;
  }
  .chk-rot i { font-style: normal; color: var(--tinta-40); letter-spacing: .04em; }
  
  /* ═══ CORPO ══════════════════════════════════════════════════════════════ */
  .chk-corpo { padding: 18px 16px 0; }
  .chk-cab { margin-bottom: 16px; }
  .chk-cab h2 { font-size: 26px; font-weight: 800; line-height: 1.08; margin-bottom: 6px; text-wrap: balance; }
  .chk-cab p { font-size: 14px; color: var(--tinta-60); margin: 0; }
  
  .chk-secao {
    font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--tinta-40); margin: 0 0 10px;
  }
  
  /* ── Contrato em sanfona ─────────────────────────────────────────────── */
  .chk-sanfona { border: 1px solid var(--borda); border-radius: var(--r); overflow: hidden; margin-bottom: 14px; background: var(--branco); }
  .chk-grupo { border-bottom: 1px solid var(--borda); }
  .chk-grupo:last-child { border-bottom: none; }
  .chk-grupo > summary {
    list-style: none; cursor: pointer; padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    font-size: 14.5px; font-weight: 600; transition: background .18s ease;
  }
  .chk-grupo > summary::-webkit-details-marker { display: none; }
  .chk-grupo > summary:hover { background: var(--neve); }
  .chk-grupo > summary:focus-visible { outline: 2px solid var(--cruz); outline-offset: -2px; }
  .chk-grupo-n {
    flex: none; width: 26px; height: 26px; border-radius: 8px; background: var(--neve);
    color: var(--tinta-40); font-size: 11px; font-weight: 800;
    display: flex; align-items: center; justify-content: center;
    font-variant-numeric: tabular-nums; transition: .22s ease;
  }
  .chk-grupo[open] .chk-grupo-n { background: var(--cruz); color: #fff; }
  .chk-grupo-t { flex: 1; }
  .chk-grupo-t em { display: block; font-style: normal; font-size: 11.5px; font-weight: 500; color: var(--tinta-40); margin-top: 1px; }
  .chk-seta { flex: none; font-size: 11px; color: var(--tinta-40); transition: transform .25s ease; }
  .chk-grupo[open] .chk-seta { transform: rotate(180deg); }
  .chk-corpo-grupo { padding: 0 16px 16px 54px; font-size: 13.5px; line-height: 1.65; color: var(--tinta-60); animation: chkSobe .3s ease both; }
  .chk-corpo-grupo h4 { font-family: inherit; font-size: 13px; font-weight: 700; color: var(--tinta); margin: 14px 0 3px; letter-spacing: -.01em; }
  .chk-corpo-grupo h4:first-child { margin-top: 0; }
  .chk-corpo-grupo p { margin: 0; }
  
  /* ── Aceite: interruptor, não caixinha ───────────────────────────────── */
  .chk-aceite {
    display: flex; align-items: center; gap: 14px; cursor: pointer;
    border: 1.5px solid var(--borda); border-radius: var(--r); padding: 14px 16px;
    font-size: 14px; font-weight: 600; line-height: 1.4; transition: .22s ease; background: var(--branco);
  }
  .chk-aceite input { position: absolute; opacity: 0; width: 0; height: 0; }
  .chk-chave {
    flex: none; width: 46px; height: 27px; border-radius: 999px; background: var(--borda-2);
    position: relative; transition: background .25s ease;
  }
  .chk-chave::after {
    content: ''; position: absolute; top: 3px; left: 3px; width: 21px; height: 21px;
    border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25);
    transition: transform .25s cubic-bezier(.34,1.4,.64,1);
  }
  .chk-aceite input:checked ~ .chk-chave { background: var(--ok); }
  .chk-aceite input:checked ~ .chk-chave::after { transform: translateX(19px); }
  .chk-aceite input:focus-visible ~ .chk-chave { box-shadow: 0 0 0 3px rgba(204,0,0,.3); }
  .chk-aceite:has(input:checked) { border-color: var(--ok); background: var(--ok-bg); }
  
  /* ── Planos: lado a lado mesmo no celular ────────────────────────────── */
  .chk-planos { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 18px; }
  .chk-plano {
    position: relative; cursor: pointer; display: flex; flex-direction: column; gap: 2px;
    border: 1.5px solid var(--borda); border-radius: var(--r); padding: 13px 13px 12px;
    background: var(--branco); transition: border-color .2s, box-shadow .2s, background .2s;
  }
  .chk-plano input { position: absolute; opacity: 0; width: 0; height: 0; }
  .chk-plano-rot { font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--tinta-40); }
  .chk-plano-v { font-size: 18px; font-weight: 800; letter-spacing: -.04em; line-height: 1.2; }
  .chk-plano-o { font-size: 11.5px; color: var(--tinta-40); font-weight: 500; line-height: 1.35; }
  .chk-plano.ativo { border-color: var(--cruz); background: var(--cruz-bg); box-shadow: inset 0 0 0 1px var(--cruz); }
  .chk-plano.ativo .chk-plano-rot { color: var(--cruz); }
  
  /* ── Resumo: linha de total em destaque ──────────────────────────────── */
  .chk-resumo { border: 1px solid var(--borda); border-radius: var(--r); overflow: hidden; margin-bottom: 16px; }
  .chk-linha {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    padding: 11px 15px; font-size: 14px; color: var(--tinta-60);
    border-bottom: 1px solid var(--borda);
  }
  .chk-linha strong { font-weight: 600; color: var(--tinta); }
  .chk-linha:last-child { border-bottom: none; }
  .chk-linha-total { background: var(--neve); padding: 13px 15px; }
  .chk-linha-total span { font-weight: 700; color: var(--tinta); font-size: 14.5px; }
  .chk-linha-total strong { font-size: 19px; font-weight: 800; letter-spacing: -.04em; color: var(--cruz); }
  .chk-nota { font-size: 12px; color: var(--tinta-40); padding: 0 15px 12px; margin: -4px 0 0; line-height: 1.45; }
  
  /* ── Formas de pagamento ─────────────────────────────────────────────── */
  .chk-formas { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 16px; }
  .chk-formas-4 { grid-template-columns: 1fr 1fr; }
  .chk-forma {
    position: relative; display: flex; align-items: center; gap: 9px; cursor: pointer;
    border: 1.5px solid var(--borda); border-radius: var(--r-s); padding: 13px 12px;
    font-size: 13.5px; font-weight: 600; background: var(--branco); transition: .2s ease;
  }
  .chk-forma input { position: absolute; opacity: 0; width: 0; height: 0; }
  .chk-forma i { color: var(--tinta-40); font-size: 15px; transition: color .2s; }
  .chk-forma.ativa, .chk-forma:has(input:checked) { border-color: var(--cruz); background: var(--cruz-bg); box-shadow: inset 0 0 0 1px var(--cruz); }
  .chk-forma.ativa i, .chk-forma:has(input:checked) i { color: var(--cruz); }
  .chk-forma:has(input:focus-visible) { outline: 2px solid rgba(204,0,0,.4); outline-offset: 2px; }
  
  /* ── Avisos ──────────────────────────────────────────────────────────── */
  .chk-aviso {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--neve); border-radius: var(--r-s); padding: 12px 14px;
    font-size: 13px; line-height: 1.5; color: var(--tinta-60); margin-bottom: 16px;
  }
  .chk-aviso i { color: var(--cruz); margin-top: 2px; font-size: 13px; }
  .chk-aviso strong { color: var(--tinta); font-weight: 700; }
  .chk-aviso-ok { background: var(--ok-bg); color: #0a5c43; }
  .chk-aviso-ok i { color: var(--ok); }
  .chk-erro {
    display: flex; gap: 10px; align-items: flex-start;
    background: var(--cruz-bg); border: 1px solid #ffcfcf; border-radius: var(--r-s);
    padding: 12px 14px; margin-bottom: 16px; font-size: 13.5px; color: var(--cruz-esc); line-height: 1.5;
  }
  .chk-erro i { margin-top: 2px; }
  .chk-erro strong { display: block; margin-bottom: 1px; }
  
  /* ── Campos de cartão ────────────────────────────────────────────────── */
  .chk-dobra { animation: chkSobe .3s ease both; }
  .chk-cartao { border: 1px solid var(--borda); border-radius: var(--r); padding: 15px; background: var(--neve); margin-bottom: 4px; }
  .chk-campo { margin-bottom: 11px; }
  .chk-campo:last-child { margin-bottom: 0; }
  .chk-par { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
  .chk-rot-campo { display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-40); margin-bottom: 5px; }
  .chk-in {
    width: 100%; padding: 13px 13px; border: 1.5px solid var(--borda-2); border-radius: var(--r-s);
    font-size: 16px; /* 16px evita o zoom automático do iOS ao focar */
    font-family: inherit; font-weight: 500; color: var(--tinta); background: var(--branco);
    transition: border-color .18s, box-shadow .18s;
  }
  .chk-in::placeholder { color: #b6bcc4; font-weight: 400; }
  .chk-in:focus { outline: none; border-color: var(--cruz); box-shadow: 0 0 0 3px rgba(204,0,0,.12); }
  .chk-caps { text-transform: uppercase; }
  
  /* ═══ BARRA DE AÇÃO FIXA ══════════════════════════════════════════════════
     O elemento mais importante do redesign: o botão nunca sai da tela, e leva
     junto o valor que está sendo cobrado — some a dúvida "quanto mesmo?". */
  .chk-acao {
    position: sticky; bottom: 0; z-index: 15;
    margin: 18px -16px 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255,255,255,.92); backdrop-filter: blur(14px);
    border-top: 1px solid var(--borda);
    display: flex; align-items: center; gap: 12px;
  }
  .chk-acao-valor { flex: none; line-height: 1.15; }
  .chk-acao-valor em { display: block; font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--tinta-40); }
  .chk-acao-valor strong { font-size: 17px; font-weight: 800; letter-spacing: -.04em; }
  
  .chk-btn {
    flex: 1; display: flex; align-items: center; justify-content: center; gap: 9px;
    background: var(--cruz); color: #fff; border: none; border-radius: var(--r-s);
    padding: 15px 18px; font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 15px; font-weight: 700; letter-spacing: -.02em; cursor: pointer;
    transition: background .18s, transform .15s, opacity .18s;
  }
  .chk-btn i { font-size: 12px; transition: transform .2s ease; }
  .chk-btn:hover:not(:disabled) { background: var(--cruz-esc); }
  .chk-btn:hover:not(:disabled) i { transform: translateX(3px); }
  .chk-btn:active:not(:disabled) { transform: scale(.985); }
  .chk-btn:focus-visible { outline: 3px solid rgba(204,0,0,.35); outline-offset: 2px; }
  .chk-btn:disabled { background: #dcdfe4; color: #9aa1aa; cursor: not-allowed; }
  
  .chk-nota-acao { font-size: 11.5px; color: var(--tinta-40); text-align: center; margin: 8px 0 0; }
  
  .chk-link {
    background: none; border: none; padding: 0; margin: 0 0 14px; cursor: pointer;
    font: inherit; font-size: 13.5px; font-weight: 600; color: var(--tinta-40);
    display: flex; align-items: center; gap: 7px; transition: color .18s;
  }
  .chk-link:hover { color: var(--cruz); }
  .chk-link i { font-size: 10px; }
  
  .chk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  
  /* ═══ TELAS MAIORES ═══════════════════════════════════════════════════════
     O layout de app continua, só ganha respiro e vira um cartão centralizado. */
  @media (min-width: 700px) {
    .chk { padding-bottom: 60px; }
    .chk-quadro {
      max-width: 560px; margin: 26px auto; background: var(--branco);
      border: 1px solid var(--borda); border-radius: 20px; overflow: hidden;
      box-shadow: 0 1px 2px rgba(11,12,14,.04), 0 20px 46px -26px rgba(11,12,14,.4);
    }
    .chk-topo { border-radius: 20px 20px 0 0; padding: 14px 22px 13px; }
    .chk-corpo { padding: 24px 22px 0; }
    .chk-cab h2 { font-size: 29px; }
    .chk-acao { margin: 22px -22px 0; padding: 14px 22px; border-radius: 0 0 20px 20px; }
    .chk-formas-4 { grid-template-columns: repeat(4, 1fr); }
    .chk-forma { justify-content: center; }
  }
  
  /* ── Movimento reduzido ──────────────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .chk *, .chk *::before, .chk *::after { animation: none !important; transition-duration: .01ms !important; }
  }
  
  /* ── Ponteiro: o cursor-cruz global esconde a mãozinha nos controles ──── */
  .chk button, .chk a, .chk label, .chk summary, .chk input { cursor: pointer; }
  .chk .chk-in { cursor: text; }




/* ═══════════════════════════════════════════════════════════════════════════
   PIX RETORNO — pix-retorno.css
   Salvar em: public/pix-retorno.css
   Carregado após inscrever.css (tokens base já disponíveis).
   ═══════════════════════════════════════════════════════════════════════════ */

   .pix-wrap {
    min-height: 70vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 28px 16px 96px;
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  
  .pix-card {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  /* ── Cabeçalho com logo PIX ───────────────────────────────────────────── */
  .pix-topo {
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #e6e8ec;
  }
  .pix-icone-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px; height: 64px;
    margin-bottom: 12px;
  }
  .pix-icone-wrap i {
    font-size: 36px;
    color: #32BCAD;
    position: relative;
    z-index: 2;
  }
  .pix-pulso {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid rgba(50,188,173,.4);
    animation: pixPulso 2.4s ease-out infinite;
  }
  .pix-pulso:nth-child(2) { animation-delay: 1s; }
  @keyframes pixPulso {
    0%   { transform: scale(1);    opacity: .85; }
    100% { transform: scale(1.75); opacity: 0;   }
  }
  .pix-titulo {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 22px; font-weight: 800; letter-spacing: -.04em;
    color: #0b0c0e; margin: 0 0 5px;
  }
  .pix-sub {
    font-size: 13.5px; color: #565d66; line-height: 1.5; margin: 0;
  }
  
  /* ── Card QR + timer ──────────────────────────────────────────────────── */
  .pix-qr-card {
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 12px rgba(11,12,14,.05);
  }
  .pix-qr-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 18px 14px;
    gap: 14px;
  }
  .pix-qr-area img {
    width: 200px; height: 200px;
    display: block;
    border-radius: 8px;
  }
  
  /* Scanner animado */
  .pix-scanner-wrap {
    position: relative;
    display: inline-block;
  }
  .pix-scanner {
    position: absolute;
    left: 3px; right: 3px;
    height: 2px;
    background: linear-gradient(90deg, transparent, #32BCAD, transparent);
    border-radius: 2px;
    animation: pixScan 2.4s ease-in-out infinite;
    top: 0;
    box-shadow: 0 0 8px rgba(50,188,173,.5);
  }
  @keyframes pixScan {
    0%   { top: 3px; opacity: .9; }
    50%  { top: calc(100% - 5px); opacity: .9; }
    100% { top: 3px; opacity: .9; }
  }
  /* Cantinhos viewfinder */
  .pix-scanner-wrap::before,
  .pix-scanner-wrap::after {
    content: '';
    position: absolute;
    width: 16px; height: 16px;
    border-color: #32BCAD;
    border-style: solid;
  }
  .pix-scanner-wrap::before {
    top: 3px; left: 3px;
    border-width: 2.5px 0 0 2.5px;
    border-radius: 3px 0 0 0;
  }
  .pix-scanner-wrap::after {
    bottom: 3px; right: 3px;
    border-width: 0 2.5px 2.5px 0;
    border-radius: 0 0 3px 0;
  }
  
  /* Botão copiar */
  .pix-btn-copiar {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%;
    padding: 11px;
    background: #32BCAD; color: #fff;
    border: none; border-radius: 9px;
    font-family: 'Manrope', sans-serif;
    font-size: 13.5px; font-weight: 700;
    cursor: pointer; transition: background .18s, transform .15s;
  }
  .pix-btn-copiar:hover  { background: #28a99b; }
  .pix-btn-copiar:active { transform: scale(.98); }
  .pix-btn-copiar.copiado { background: #0d7a58; }
  
  /* Timer — barra integrada ao card QR */
  .pix-timer-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 15px;
    border-top: 1px solid #e6e8ec;
    background: #f4f5f7;
  }
  .pix-timer-anel {
    flex: none;
    position: relative;
    width: 36px; height: 36px;
  }
  .pix-timer-anel svg {
    transform: rotate(-90deg);
    width: 36px; height: 36px;
  }
  .pix-timer-trilha {
    fill: none;
    stroke: #e6e8ec;
    stroke-width: 3.5;
  }
  .pix-timer-arco {
    fill: none;
    stroke: #cc0000;
    stroke-width: 3.5;
    stroke-linecap: round;
    stroke-dasharray: 95.53; /* 2π × 15.2 */
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .95s linear, stroke .5s;
  }
  .pix-timer-num {
    position: absolute;
    inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 10px; font-weight: 800;
    color: #cc0000;
    font-variant-numeric: tabular-nums;
  }
  .pix-timer-info { flex: 1; }
  .pix-timer-label {
    font-size: 10px; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: #8a929c; margin: 0 0 2px;
  }
  .pix-timer-msg {
    font-size: 13px; font-weight: 600; color: #0b0c0e; margin: 0; line-height: 1.35;
  }
  .pix-timer-alt {
    display: none;
    font-size: 11px; font-weight: 500; color: #8a929c;
  }
  
  /* ── Etapas visuais ───────────────────────────────────────────────────── */
  .pix-etapas {
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
  }
  .pix-etapa {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 15px;
    border-bottom: 1px solid #e6e8ec;
    transition: background .3s;
  }
  .pix-etapa:last-child { border-bottom: none; }
  
  .pix-etapa[data-estado="espera"] { opacity: .4; }
  .pix-etapa[data-estado="atual"]  { background: #f4f5f7; }
  .pix-etapa[data-estado="feito"]  { background: #eefaf5; }
  
  .pix-et-icone {
    flex: none;
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px;
    background: #e6e8ec; color: #8a929c;
    transition: background .35s, color .35s;
    position: relative;
  }
  .pix-etapa[data-estado="atual"] .pix-et-icone { background: #cc0000; color: #fff; }
  .pix-etapa[data-estado="feito"] .pix-et-icone { background: #0d7a58; color: #fff; }
  
  .pix-et-spinner {
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    border: 2px solid transparent;
    border-top-color: #cc0000;
    animation: pixSpin .9s linear infinite;
    display: none;
  }
  .pix-etapa[data-estado="atual"] .pix-et-spinner { display: block; }
  .pix-etapa[data-estado="feito"] .pix-et-spinner { display: none; }
  @keyframes pixSpin { to { transform: rotate(360deg); } }
  
  .pix-et-texto { flex: 1; }
  .pix-et-rot {
    font-size: 10px; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: #8a929c; margin: 0 0 1px;
  }
  .pix-etapa[data-estado="atual"] .pix-et-rot { color: #cc0000; }
  .pix-etapa[data-estado="feito"] .pix-et-rot { color: #0d7a58; }
  .pix-et-desc {
    font-size: 13.5px; font-weight: 600; color: #0b0c0e; margin: 0; line-height: 1.3;
  }
  .pix-et-badge {
    flex: none; font-size: 10px; font-weight: 700;
    padding: 2px 9px; border-radius: 99px;
    background: #f4f5f7; color: #565d66;
  }
  .pix-etapa[data-estado="atual"] .pix-et-badge { background: #fff3f3; color: #cc0000; }
  .pix-etapa[data-estado="feito"] .pix-et-badge { background: #eefaf5; color: #0d7a58; }
  
  /* ── Estado sem QR ────────────────────────────────────────────────────── */
  .pix-aguardando {
    text-align: center;
    padding: 48px 24px;
  }
  .pix-aguardando-icone {
    font-size: 52px;
    color: #e2a800;
    display: block;
    margin-bottom: 18px;
  }
  @keyframes pixGiro { to { transform: rotate(360deg); } }
  .pix-aguardando-icone.girando {
    display: inline-block;
    animation: pixGiro 2s linear infinite;
  }
  
  /* ── Rodapé ───────────────────────────────────────────────────────────── */
  .pix-rodape {
    text-align: center;
    padding-top: 16px;
    border-top: 1px solid #e6e8ec;
  }
  .pix-rodape a {
    font-size: 13px; font-weight: 600; color: #8a929c;
    text-decoration: none; display: inline-flex; align-items: center; gap: 6px;
    transition: color .18s;
  }
  .pix-rodape a:hover { color: #cc0000; }
  
  /* ── Desktop ──────────────────────────────────────────────────────────── */
  @media (min-width: 700px) {
    .pix-wrap { padding-top: 40px; }
    .pix-card {
      background: #fff;
      border: 1px solid #e6e8ec;
      border-radius: 20px;
      box-shadow: 0 1px 2px rgba(11,12,14,.04), 0 20px 46px -26px rgba(11,12,14,.35);
      padding: 32px 28px 28px;
    }
    .pix-topo { padding-bottom: 20px; }
  }
  
  /* ── Movimento reduzido ───────────────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .pix-pulso,
    .pix-scanner,
    .pix-et-spinner,
    .pix-aguardando-icone { animation: none !important; }
  }







/* ═══════════════════════════════════════════════════════════════════════════
   CARTÃO — TELA DE RETORNO
   Colar no FIM do public/inscrever.css (depois do bloco .chk e do bloco .pix).
   Usa as mesmas cores dos tokens .chk, escritas em hex porque este bloco vive
   fora daquele escopo.

   Mesma gramática visual do pix-retorno.css: card branco, filetes, etapas
   coladas embaixo. A diferença é que aqui o aluno digita antes de esperar —
   então o formulário fica no topo e as etapas só ganham vida no envio.
   ═══════════════════════════════════════════════════════════════════════════ */

   .cc-wrap {
    min-height: 70vh;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 28px 16px 96px;
    font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #0b0c0e;
  }
  
  .cc-card {
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  
  /* ── Cabeçalho ─────────────────────────────────────────────────────────── */
  .cc-topo {
    text-align: center;
    padding-bottom: 16px;
    border-bottom: 1px solid #e6e8ec;
  }
  .cc-titulo {
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 22px; font-weight: 800; letter-spacing: -.04em;
    margin: 0 0 5px;
  }
  .cc-sub { font-size: 13.5px; color: #565d66; line-height: 1.5; margin: 0; }
  
  /* ── Timer da transação ────────────────────────────────────────────────────
     Mesmo componente do PIX. A sessão de pagamento tem prazo: passou, a
     transação é cancelada e o aluno volta para os cursos. */
  .cc-timer-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 15px;
    border: 1px solid #e6e8ec;
    border-radius: 12px;
    background: #f4f5f7;
  }
  .cc-timer-anel { flex: none; position: relative; width: 36px; height: 36px; }
  .cc-timer-anel svg { transform: rotate(-90deg); width: 36px; height: 36px; }
  .cc-timer-trilha { fill: none; stroke: #e6e8ec; stroke-width: 3.5; }
  .cc-timer-arco {
    fill: none; stroke: #cc0000; stroke-width: 3.5; stroke-linecap: round;
    stroke-dasharray: 95.53; /* 2π × 15.2 */
    stroke-dashoffset: 0;
    transition: stroke-dashoffset .95s linear, stroke .5s;
  }
  .cc-timer-num {
    position: absolute; inset: 0;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 10px; font-weight: 800; color: #cc0000;
    font-variant-numeric: tabular-nums;
  }
  .cc-timer-info { flex: 1; }
  .cc-timer-label {
    font-size: 10px; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: #8a929c; margin: 0 0 2px;
  }
  .cc-timer-msg { font-size: 13px; font-weight: 600; margin: 0; line-height: 1.35; }
  
  /* ── Cartão-espelho ────────────────────────────────────────────────────────
     O único lugar onde a página se permite ser vistosa: o que o aluno digita
     aparece no plástico. Serve de conferência antes de enviar. */
  .cc-espelho {
    perspective: 1000px;
    width: 100%;
    max-width: 320px;
    margin: 0 auto;
    aspect-ratio: 1.586;
  }
  .cc-espelho-in {
    position: relative;
    width: 100%; height: 100%;
    transform-style: preserve-3d;
    transition: transform .55s cubic-bezier(.22,.9,.3,1);
  }
  .cc-espelho.virado .cc-espelho-in { transform: rotateY(180deg); }
  
  .cc-face {
    position: absolute; inset: 0;
    backface-visibility: hidden;
    border-radius: 14px;
    padding: 16px 18px;
    display: flex; flex-direction: column;
    background: linear-gradient(135deg, #1a1d22 0%, #0b0c0e 60%, #2a0708 100%);
    color: #fff;
    box-shadow: 0 10px 28px -14px rgba(11,12,14,.7);
    overflow: hidden;
  }
  .cc-face::after {
    content: '';
    position: absolute; top: -60%; right: -30%;
    width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(204,0,0,.35), transparent 68%);
  }
  .cc-face-tras {
    transform: rotateY(180deg);
    padding: 0;
    justify-content: flex-start;
  }
  
  .cc-face-topo { display: flex; align-items: center; justify-content: space-between; }
  .cc-chip {
    width: 34px; height: 25px; border-radius: 5px;
    background: linear-gradient(150deg, #e5c46a, #b9902f);
    position: relative; z-index: 2;
  }
  .cc-chip::before, .cc-chip::after {
    content: ''; position: absolute; left: 4px; right: 4px; height: 1px;
    background: rgba(0,0,0,.28);
  }
  .cc-chip::before { top: 8px; } .cc-chip::after { top: 16px; }
  .cc-bandeira { font-size: 24px; z-index: 2; opacity: .95; min-height: 25px; }
  .cc-bandeira .fa-regular { opacity: .5; }
  
  .cc-face-numero {
    margin-top: auto;
    font-family: 'Azeret Mono', ui-monospace, monospace;
    font-size: 17px; letter-spacing: .06em; z-index: 2;
    font-variant-numeric: tabular-nums;
  }
  .cc-face-rodape {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 12px; margin-top: 12px; z-index: 2;
  }
  .cc-face-rot {
    font-size: 8px; font-weight: 800; letter-spacing: .12em;
    text-transform: uppercase; color: rgba(255,255,255,.5);
    margin: 0 0 2px;
  }
  .cc-face-val {
    font-size: 12.5px; font-weight: 600; letter-spacing: .04em;
    text-transform: uppercase; margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .cc-face-nome { min-width: 0; }
  
  .cc-tarja { height: 38px; background: #000; margin-top: 20px; }
  .cc-assinatura { display: flex; align-items: center; gap: 10px; margin: 16px 18px 0; }
  .cc-assinatura-faixa {
    flex: 1; height: 30px; border-radius: 4px;
    background: repeating-linear-gradient(-45deg, #f4f5f7, #f4f5f7 6px, #e0e2e6 6px, #e0e2e6 12px);
  }
  .cc-assinatura-cvv {
    flex: none; min-width: 54px; height: 30px; border-radius: 4px;
    background: #fff; color: #0b0c0e;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Azeret Mono', ui-monospace, monospace;
    font-size: 13px; letter-spacing: .12em;
  }
  
  /* ── Formulário ────────────────────────────────────────────────────────── */
  .cc-form-card {
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    background: #fff;
    padding: 16px;
    box-shadow: 0 2px 12px rgba(11,12,14,.05);
  }
  .cc-campo { margin-bottom: 12px; }
  .cc-campo:last-child { margin-bottom: 0; }
  .cc-par { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .cc-rot {
    display: block; font-size: 11px; font-weight: 700; letter-spacing: .07em;
    text-transform: uppercase; color: #8a929c; margin-bottom: 5px;
  }
  .cc-in {
    width: 100%; padding: 13px;
    border: 1.5px solid #d3d7dd; border-radius: 10px;
    font-size: 16px; /* evita o zoom do iOS ao focar */
    font-family: inherit; font-weight: 500; color: #0b0c0e; background: #fff;
    transition: border-color .18s, box-shadow .18s;
  }
  .cc-in::placeholder { color: #b6bcc4; font-weight: 400; }
  .cc-in:focus { outline: none; border-color: #cc0000; box-shadow: 0 0 0 3px rgba(204,0,0,.12); }
  .cc-in.invalido { border-color: #cc0000; background: #fff8f8; }
  .cc-in.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
  .cc-caps { text-transform: uppercase; }
  .cc-erro-campo {
    display: none; font-size: 11.5px; font-weight: 600; color: #cc0000; margin: 5px 0 0;
  }
  .cc-campo.tem-erro .cc-erro-campo { display: block; }
  
  /* Resumo do valor dentro do form */
  .cc-valor {
    display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
    background: #f4f5f7; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px;
  }
  .cc-valor span { font-size: 13px; font-weight: 600; color: #565d66; }
  .cc-valor strong {
    font-size: 19px; font-weight: 800; letter-spacing: -.04em; color: #cc0000;
    font-variant-numeric: tabular-nums;
  }
  .cc-valor em {
    display: block; font-style: normal; font-size: 11px; font-weight: 500;
    color: #8a929c; text-align: right; margin-top: 1px;
  }
  
  /* Botão de envio */
  .cc-btn {
    width: 100%;
    display: flex; align-items: center; justify-content: center; gap: 9px;
    background: #cc0000; color: #fff; border: none; border-radius: 10px;
    padding: 15px 18px;
    font-family: 'Bricolage Grotesque', 'Manrope', sans-serif;
    font-size: 15px; font-weight: 700; letter-spacing: -.02em;
    cursor: pointer; transition: background .18s, transform .15s, opacity .18s;
  }
  .cc-btn:hover:not(:disabled) { background: #990000; }
  .cc-btn:active:not(:disabled) { transform: scale(.985); }
  .cc-btn:focus-visible { outline: 3px solid rgba(204,0,0,.35); outline-offset: 2px; }
  .cc-btn:disabled { background: #dcdfe4; color: #9aa1aa; cursor: not-allowed; }
  .cc-btn .cc-girando { animation: ccGiro .9s linear infinite; }
  @keyframes ccGiro { to { transform: rotate(360deg); } }
  
  .cc-seguro {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    font-size: 11.5px; color: #8a929c; margin: 10px 0 0;
  }
  
  /* Erro geral */
  .cc-erro {
    display: none; gap: 10px; align-items: flex-start;
    background: #fff3f3; border: 1px solid #ffcfcf; border-radius: 10px;
    padding: 12px 14px; font-size: 13.5px; color: #990000; line-height: 1.5;
  }
  .cc-erro.visivel { display: flex; }
  .cc-erro i { margin-top: 2px; }
  .cc-erro strong { display: block; margin-bottom: 1px; }
  
  /* ── Etapas (mesmo componente do PIX, prefixo próprio) ─────────────────── */
  .cc-etapas {
    border: 1px solid #e6e8ec;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
  }
  .cc-etapa {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 15px;
    border-bottom: 1px solid #e6e8ec;
    transition: background .3s, opacity .3s;
  }
  .cc-etapa:last-child { border-bottom: none; }
  .cc-etapa[data-estado="espera"] { opacity: .4; }
  .cc-etapa[data-estado="atual"]  { background: #f4f5f7; }
  .cc-etapa[data-estado="feito"]  { background: #eefaf5; }
  .cc-etapa[data-estado="falhou"] { background: #fff3f3; }
  
  .cc-et-icone {
    flex: none; position: relative;
    width: 32px; height: 32px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; background: #e6e8ec; color: #8a929c;
    transition: background .35s, color .35s;
  }
  .cc-etapa[data-estado="atual"]  .cc-et-icone { background: #cc0000; color: #fff; }
  .cc-etapa[data-estado="feito"]  .cc-et-icone { background: #0d7a58; color: #fff; }
  .cc-etapa[data-estado="falhou"] .cc-et-icone { background: #cc0000; color: #fff; }
  
  .cc-et-spinner {
    position: absolute; inset: -3px;
    border-radius: 50%;
    border: 2px solid transparent; border-top-color: #cc0000;
    animation: ccGiro .9s linear infinite;
    display: none;
  }
  .cc-etapa[data-estado="atual"] .cc-et-spinner { display: block; }
  
  .cc-et-texto { flex: 1; }
  .cc-et-rot {
    font-size: 10px; font-weight: 800; letter-spacing: .07em;
    text-transform: uppercase; color: #8a929c; margin: 0 0 1px;
  }
  .cc-etapa[data-estado="atual"]  .cc-et-rot { color: #cc0000; }
  .cc-etapa[data-estado="feito"]  .cc-et-rot { color: #0d7a58; }
  .cc-etapa[data-estado="falhou"] .cc-et-rot { color: #cc0000; }
  .cc-et-desc { font-size: 13.5px; font-weight: 600; margin: 0; line-height: 1.3; }
  .cc-et-badge {
    flex: none; font-size: 10px; font-weight: 700;
    padding: 2px 9px; border-radius: 99px;
    background: #f4f5f7; color: #565d66;
  }
  .cc-etapa[data-estado="atual"]  .cc-et-badge { background: #fff3f3; color: #cc0000; }
  .cc-etapa[data-estado="feito"]  .cc-et-badge { background: #eefaf5; color: #0d7a58; }
  .cc-etapa[data-estado="falhou"] .cc-et-badge { background: #fff3f3; color: #cc0000; }
  
  /* Enquanto processa, o formulário e o cartão saem de cena */
  .cc-processando .cc-form-card,
  .cc-processando .cc-espelho { display: none; }
  
  /* Expirou: nada mais é clicável, a página já está saindo */
  .cc-expirado .cc-form-card,
  .cc-expirado .cc-espelho { display: none; }
  
  /* ── Estado sem matrícula / carregando ─────────────────────────────────── */
  .cc-aguardando { text-align: center; padding: 48px 24px; }
  .cc-aguardando-icone {
    font-size: 52px; color: #e2a800; display: inline-block; margin-bottom: 18px;
    animation: ccGiro 2s linear infinite;
  }
  
  /* ── Rodapé ────────────────────────────────────────────────────────────── */
  .cc-rodape { text-align: center; padding-top: 16px; border-top: 1px solid #e6e8ec; }
  .cc-rodape a {
    font-size: 13px; font-weight: 600; color: #8a929c; text-decoration: none;
    display: inline-flex; align-items: center; gap: 6px; transition: color .18s;
  }
  .cc-rodape a:hover { color: #cc0000; }
  
  /* ── Desktop ───────────────────────────────────────────────────────────── */
  @media (min-width: 700px) {
    .cc-wrap { padding-top: 40px; }
    .cc-card {
      background: #fff;
      border: 1px solid #e6e8ec;
      border-radius: 20px;
      box-shadow: 0 1px 2px rgba(11,12,14,.04), 0 20px 46px -26px rgba(11,12,14,.35);
      padding: 32px 28px 28px;
    }
    .cc-topo { padding-bottom: 20px; }
  }
  
  /* ── Movimento reduzido ────────────────────────────────────────────────── */
  @media (prefers-reduced-motion: reduce) {
    .cc-espelho-in, .cc-et-spinner, .cc-btn .cc-girando, .cc-aguardando-icone {
      animation: none !important; transition-duration: .01ms !important;
    }
  }