/* cartao.css — formulário de cartão da tela própria do checkout (js/cartao.js).
   Usa as variáveis e as classes de campo do checkout (.campos, .campo, .msg, .btn); aqui só o que é dele. */
.cc-form{margin-top:12px}
.cc-titulo{font-family:var(--titulo);font-size:17px;font-weight:500;margin:0 0 10px;color:var(--noite)}
.cc-outro{margin-top:10px}
.cc-outro[hidden]{display:none}
.cc-acoes{display:flex;justify-content:flex-end;margin-top:16px}
.cc-pagar[disabled]{opacity:.6;cursor:progress}
.cc-estado{margin:12px 0 0;font-size:14px;font-weight:500;color:var(--noite)}
.cc-estado[hidden],.cc-erro[hidden]{display:none}
.cc-seguranca{margin:12px 0 0;font-size:12.5px;line-height:1.45;color:var(--meta)}
@media (max-width:640px){
  .cc-form .campos>.c6{grid-column:1 / -1}
  .cc-form .campos>.c3{grid-column:span 6}
  .cc-acoes{justify-content:stretch}
  .cc-acoes .btn{width:100%;justify-content:center}
}
/* Fora do checkout (pagamento da certidão de matrícula no pedido de proposta, #res-pagar): a página não tem as classes de
   campo do checkout; aqui só o essencial delas, com as cores do padrão. Sem isto, as mensagens de erro ficavam todas à mostra. */
#res-pagar .cc-form .campos{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:10px 12px;align-items:start}
#res-pagar .cc-form .c6{grid-column:span 6}
#res-pagar .cc-form .c3{grid-column:span 3}
#res-pagar .cc-form .msg{display:none;margin:4px 0 0;font-size:12px;line-height:1.35;font-weight:700;color:var(--erro)}
#res-pagar .cc-form .campo.invalido .msg{display:block}
#res-pagar .cc-form .campo.invalido input{border-color:var(--erro)}
#res-pagar .cc-form .cc-erro{color:var(--erro);font-weight:700}
@media (max-width:640px){#res-pagar .cc-form .campos>.c6{grid-column:1 / -1}#res-pagar .cc-form .campos>.c3{grid-column:span 6}}