/* Telas de plano e pagamento.
   Mobile-first como o resto do app; usa as variaveis de brand.css. */

.mnt-cabecalho {
    display: grid;
    gap: 4px;
}

.mnt-nota {
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

/* =========================================================================
   Fluxo de pagamento -- prefixo `ckt-`.

   Duas telas, um desenho so: `/assinatura/checkout/<plano>/` (etapas 1 e 2) e
   `/assinatura/pagamento/<uuid>/` (etapa 3). As duas usam
   `monetizacao/base_checkout.html`, que nao tem menu inferior nem barra
   lateral -- quem esta pagando nao deve ter cinco atalhos para sair.

   Coluna unica e estreita tambem no desktop: e um formulario curto, e
   espalhar em duas colunas so aumenta o caminho dos olhos.
   ========================================================================= */

.app-shell--ckt { background: var(--fxm-gray-100); }
.app-shell--ckt .app-screen { padding-bottom: 40px; }

.ckt {
    display: grid;
    gap: 14px;
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
}

/* O `.button` do app nao zera a borda nem a fonte do elemento <button>;
   nas outras telas ele quase sempre e <a>. Aqui e botao de verdade. */
.ckt .button {
    border: 0;
    font-family: var(--fxm-font);
    font-size: 15px;
    cursor: pointer;
}

/* --- cabecalho ------------------------------------------------------ */

.ckt-topo {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 8px;
}

.ckt-topo__sair {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: var(--fxm-gray-100);
    color: var(--fxm-gray-700);
}

.ckt-topo__sair svg { width: 17px; height: 17px; }
.ckt-topo__sair:hover { background: var(--fxm-gray-300); }

.ckt-topo__marca { justify-self: center; display: inline-flex; }

.ckt-topo__seguro {
    justify-self: end;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--fxm-green);
    font-size: 11.5px;
    font-weight: 800;
}

.ckt-topo__seguro svg { width: 14px; height: 14px; }

/* --- trilha de etapas ----------------------------------------------- */

.ckt-etapas {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin: 2px 0 2px;
    padding: 0;
    list-style: none;
}

.ckt-etapa {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 6px;
    text-align: center;
}

/* Trilho que liga uma bola a anterior. Fica ATRAS das bolas (z-index) para
   nao cortar o numero. */
.ckt-etapa::before {
    content: '';
    position: absolute;
    top: 12px;
    right: 50%;
    left: -50%;
    height: 2px;
    background: var(--fxm-gray-300);
}

.ckt-etapa:first-child::before { display: none; }

.ckt-etapa__bola {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--fxm-gray-300);
    color: var(--fxm-gray-500);
    font-size: 12.5px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.ckt-etapa__nome {
    font-size: 11.5px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--fxm-gray-500);
}

/* Etapa em curso. O estado vem de `data-ckt-etapa-atual` no <ol>: no checkout
   quem o troca e o JS, sem recarregar; na tela de acompanhamento vem pronto do
   servidor. Um `data-` so, e a mesma marcacao serve as duas. */
.ckt-etapas[data-ckt-etapa-atual="1"] .ckt-etapa[data-ckt-etapa="1"] .ckt-etapa__bola,
.ckt-etapas[data-ckt-etapa-atual="2"] .ckt-etapa[data-ckt-etapa="2"] .ckt-etapa__bola,
.ckt-etapas[data-ckt-etapa-atual="3"] .ckt-etapa[data-ckt-etapa="3"] .ckt-etapa__bola {
    background: var(--fxm-purple);
    color: var(--fxm-white);
    box-shadow: 0 0 0 3px var(--fxm-purple-soft);
}

.ckt-etapas[data-ckt-etapa-atual="1"] .ckt-etapa[data-ckt-etapa="1"] .ckt-etapa__nome,
.ckt-etapas[data-ckt-etapa-atual="2"] .ckt-etapa[data-ckt-etapa="2"] .ckt-etapa__nome,
.ckt-etapas[data-ckt-etapa-atual="3"] .ckt-etapa[data-ckt-etapa="3"] .ckt-etapa__nome {
    color: var(--fxm-gray-900);
}

/* Etapa ja vencida: o numero some e vira confirmacao. */
.ckt-etapas[data-ckt-etapa-atual="2"] .ckt-etapa[data-ckt-etapa="1"] .ckt-etapa__bola,
.ckt-etapas[data-ckt-etapa-atual="3"] .ckt-etapa[data-ckt-etapa="1"] .ckt-etapa__bola,
.ckt-etapas[data-ckt-etapa-atual="3"] .ckt-etapa[data-ckt-etapa="2"] .ckt-etapa__bola {
    background: var(--fxm-green);
    color: transparent;
}

.ckt-etapas[data-ckt-etapa-atual="2"] .ckt-etapa[data-ckt-etapa="1"] .ckt-etapa__bola::after,
.ckt-etapas[data-ckt-etapa-atual="3"] .ckt-etapa[data-ckt-etapa="1"] .ckt-etapa__bola::after,
.ckt-etapas[data-ckt-etapa-atual="3"] .ckt-etapa[data-ckt-etapa="2"] .ckt-etapa__bola::after {
    content: '\2713';
    position: absolute;
    color: var(--fxm-white);
    font-size: 13px;
}

.ckt-etapas[data-ckt-etapa-atual="2"] .ckt-etapa[data-ckt-etapa="2"]::before,
.ckt-etapas[data-ckt-etapa-atual="3"] .ckt-etapa[data-ckt-etapa="2"]::before,
.ckt-etapas[data-ckt-etapa-atual="3"] .ckt-etapa[data-ckt-etapa="3"]::before {
    background: var(--fxm-green);
}

/* --- resumo do pedido ------------------------------------------------ */

.ckt-pedido {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--fxm-gray-300);
    border-radius: var(--fxm-radius-md);
    background: var(--fxm-white);
}

.ckt-pedido__texto { min-width: 0; }

.ckt-pedido__rotulo {
    margin: 0;
    color: var(--fxm-gray-500);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.ckt-pedido__nome { margin: 3px 0 0; font-size: 16px; font-weight: 800; line-height: 1.2; }

.ckt-pedido__prazo {
    margin: 4px 0 0;
    color: var(--fxm-gray-500);
    font-size: 12px;
    line-height: 1.4;
}

.ckt-pedido__preco {
    flex: none;
    display: flex;
    align-items: baseline;
    gap: 2px;
    margin: 0;
    color: var(--fxm-gray-900);
}

.ckt-pedido__preco span { font-size: 13px; font-weight: 700; }

.ckt-pedido__preco strong {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

/* --- blocos de etapa ------------------------------------------------- */

.ckt-fluxo { display: grid; }

.ckt-bloco {
    padding: 18px 16px 20px;
    border: 1px solid var(--fxm-gray-300);
    border-radius: var(--fxm-radius-lg);
    background: var(--fxm-white);
}

.ckt-bloco__titulo { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.2; }

.ckt-ajuda {
    margin: 12px 0 0;
    color: var(--fxm-gray-700);
    font-size: 13.5px;
    line-height: 1.5;
}

.ckt-email-destino { margin: 2px 0 14px; }

.ckt-conta-sucesso {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: start;
    gap: 11px;
    margin: 0 0 18px;
    padding: 13px;
    border: 1px solid #b7e4ca;
    border-radius: 14px;
    background: #f0fbf4;
    animation: ckt-conta-entrada .32s ease-out both;
}

.ckt-conta-sucesso__icone {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--fxm-green);
    color: var(--fxm-white);
    font-size: 18px;
    font-weight: 800;
}

.ckt-conta-sucesso strong { display: block; color: #176b3a; font-size: 14px; }
.ckt-conta-sucesso p { margin: 4px 0 0; color: var(--fxm-gray-700); font-size: 12.5px; line-height: 1.4; }
.ckt-conta-sucesso__email { overflow-wrap: anywhere; }

.ckt-conta-sucesso__editar {
    margin: 6px 0 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fxm-blue-700, #2449ba);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    text-decoration: underline;
    cursor: pointer;
}

.ckt-conta-editar { margin-top: 12px; }
.ckt-conta-editar .mnt-campo { margin-bottom: 10px; }

@keyframes ckt-conta-entrada {
    from { opacity: 0; transform: translateY(7px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.ckt-rodape {
    margin: 16px 0 0;
    color: var(--fxm-gray-500);
    font-size: 11.5px;
    line-height: 1.45;
    text-align: center;
}

/* --- etapa 1: escolha do metodo -------------------------------------- */

.ckt-metodos { display: grid; gap: 10px; margin: 14px 0 16px; }

.ckt-metodo {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    padding: 14px;
    border: 1.5px solid var(--fxm-gray-300);
    border-radius: var(--fxm-radius-md);
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}

.ckt-metodo:hover { border-color: var(--fxm-purple); }

/* O radio continua no DOM e focavel pelo teclado -- so nao e ele que se ve. */
.ckt-metodo input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.ckt-metodo__icone {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: var(--fxm-gray-100);
    color: var(--fxm-gray-700);
}

.ckt-metodo__icone svg { width: 21px; height: 21px; }

.ckt-metodo__texto { display: grid; gap: 2px; min-width: 0; }
.ckt-metodo__texto b { font-size: 15px; font-weight: 800; }

.ckt-metodo__texto small {
    color: var(--fxm-gray-500);
    font-size: 12.5px;
    line-height: 1.4;
}

.ckt-metodo__marca {
    width: 20px;
    height: 20px;
    border: 2px solid var(--fxm-gray-300);
    border-radius: 50%;
}

.ckt-metodo:has(input:checked) {
    border-color: var(--fxm-purple);
    box-shadow: 0 0 0 3px var(--fxm-purple-soft);
}

.ckt-metodo:has(input:checked) .ckt-metodo__icone {
    background: var(--fxm-purple-soft);
    color: var(--fxm-purple);
}

.ckt-metodo:has(input:checked) .ckt-metodo__marca {
    border-color: var(--fxm-purple);
    background: radial-gradient(circle, var(--fxm-purple) 0 45%, transparent 47%);
}

.ckt-metodo:has(input:focus-visible) {
    outline: 2px solid var(--fxm-purple);
    outline-offset: 2px;
}

.ckt-avancar { width: 100%; }

/* CUPOM: um cartao no MESMO padrao do resumo do pedido (`.ckt-pedido`), com
   campo e botao na escala dos outros campos do checkout (48px, 16px -- o
   16px tambem evita o zoom do Safari no iOS). Antes era um link de 12px e um
   campo de 36px, miudo ao lado do preco. */
.ckt-cupom {
    min-width: 0;
    margin: 10px 0 2px;
    border: 1px solid var(--fxm-gray-300);
    border-radius: var(--fxm-radius-md);
    background: var(--fxm-white);
}

.ckt-cupom--legado {
    margin: 14px 0 18px;
    padding: 14px;
    border: 1px solid var(--fxm-gray-200);
    border-radius: var(--fxm-radius-md);
    background: #f8f9fc;
}

.ckt-cupom--legado > label {
    display: block;
    margin-bottom: 7px;
    font-size: 13px;
    font-weight: 700;
}

/* A linha que abre: a largura toda do cartao, alvo de toque de 52px. */
.ckt-cupom__abrir {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 12px 16px;
    border: 0;
    border-radius: var(--fxm-radius-md);
    background: transparent;
    color: var(--fxm-ink);
    font: 600 15px/1.3 var(--fxm-font);
    text-align: left;
    cursor: pointer;
}
.ckt-cupom__abrir:focus-visible { outline: 2px solid var(--fxm-purple); outline-offset: -2px; }
.ckt-cupom__abrir > span { flex: 1; }
.ckt-cupom__icone { flex: none; width: 22px; height: 22px; color: var(--fxm-purple); }
.ckt-cupom__seta { flex: none; width: 18px; height: 18px; color: var(--fxm-gray-500); transition: transform .2s ease; }
.ckt-cupom__abrir[aria-expanded="true"] .ckt-cupom__seta { transform: rotate(180deg); }

.ckt-cupom__remover {
    display: block;
    margin-top: 10px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fxm-purple);
    font: 600 14px/1.4 var(--fxm-font);
    text-decoration: underline;
    text-underline-offset: 3px;
    cursor: pointer;
}
.ckt-cupom__remover[hidden] { display: none; }

.ckt-cupom__painel {
    max-height: 0;
    overflow: hidden;
    padding: 0 16px;
    opacity: 0;
    transform: translateY(-4px);
    transition: max-height .22s ease, opacity .18s ease, transform .18s ease, padding .22s ease;
}
.ckt-cupom__painel[hidden] { display: none; }
.ckt-cupom__painel.is-open {
    max-height: 220px;
    padding: 4px 16px 16px;
    opacity: 1;
    transform: translateY(0);
}

.ckt-cupom__linha { display: flex; gap: 8px; }
.ckt-cupom__linha input {
    /* `width: 0` + flex: o campo ocupa SO o que sobra. Sem isso, a largura
       propria do <input> (~20 caracteres) alargava a coluna no celular. */
    width: 0;
    min-width: 0;
    min-height: 48px;
    flex: 1 1 0;
    padding: 0 14px;
    border: 1px solid var(--fxm-gray-300);
    border-radius: var(--fxm-radius-sm);
    background: var(--fxm-white);
    color: var(--fxm-ink);
    font: 600 16px/1 var(--fxm-font);
    letter-spacing: .04em;
    text-transform: uppercase;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.ckt-cupom__linha input::placeholder { color: var(--fxm-gray-500); font-weight: 500; letter-spacing: 0; text-transform: none; }
.ckt-cupom__linha input:hover { border-color: var(--fxm-gray-500); }
.ckt-cupom__linha input:focus {
    border-color: var(--fxm-purple);
    box-shadow: 0 0 0 3px rgba(47, 92, 236, .18);
}
.ckt-cupom__linha input:disabled { background: var(--fxm-gray-100); color: var(--fxm-gray-700); }
.ckt-cupom__validar { min-height: 48px; padding: 0 20px; white-space: nowrap; font-size: 15px !important; }
.ckt-cupom--legado .ckt-cupom__linha input { min-height: 44px; font-size: 14px; }
.ckt-cupom--legado .ckt-cupom__validar { min-height: 44px; padding-inline: 16px; font-size: 15px !important; }
.ckt-cupom [data-ckt-cupom-mensagem] { min-height: 0; margin: 8px 0 0; color: var(--fxm-gray-700); font-size: 14px; line-height: 1.4; }
.ckt-cupom [data-ckt-cupom-mensagem]:empty { display: none; }
.ckt-cupom [data-ckt-cupom-mensagem].is-success { color: var(--fxm-green-700, #18794e); font-weight: 600; }
.ckt-cupom [data-ckt-cupom-mensagem].is-error { color: var(--fxm-red-700, #b42318); }

@media (prefers-reduced-motion: reduce) {
    .ckt-cupom__painel, .ckt-cupom__seta { transition: none; }
}

@media (max-width: 420px) {
    .ckt-cupom--legado .ckt-cupom__linha { flex-direction: column; }
    .ckt-cupom--legado .ckt-cupom__validar { width: 100%; }
}

/* --- etapa 2: pagamento ---------------------------------------------- */

.ckt-escolhido {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--fxm-gray-100);
}

.ckt-escolhido__voltar {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--fxm-purple);
    font-family: var(--fxm-font);
    font-size: 13.5px;
    font-weight: 800;
    cursor: pointer;
}

.ckt-escolhido__voltar svg { width: 15px; height: 15px; }

.ckt-escolhido__nome {
    color: var(--fxm-gray-700);
    font-size: 13.5px;
    font-weight: 700;
}

/* --- etapa 3: desfecho ----------------------------------------------- */

.ckt-desfecho {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 28px 18px 24px;
    border: 1px solid var(--fxm-gray-300);
    border-radius: var(--fxm-radius-lg);
    background: var(--fxm-white);
    text-align: center;
}

.ckt-marca {
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--fxm-gray-100);
    color: var(--fxm-gray-700);
}

.ckt-marca svg { width: 28px; height: 28px; }
.ckt-marca--ok { background: var(--fxm-green-soft); color: var(--fxm-green); }
.ckt-marca--erro { background: var(--fxm-red-soft); color: var(--fxm-red); }

.ckt-marca--animada { animation: ckt-aprovado 650ms cubic-bezier(.2, .8, .2, 1) both; }
.ckt-marca--animada svg { animation: ckt-check 500ms 180ms ease-out both; }

@keyframes ckt-aprovado {
    from { opacity: 0; transform: scale(.65); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes ckt-check {
    from { opacity: 0; transform: scale(.75); }
    to { opacity: 1; transform: scale(1); }
}

.ckt-desfecho__link[data-mnt-status-redirect] { margin-top: 0; }

@media (prefers-reduced-motion: reduce) {
    .ckt-marca--animada,
    .ckt-marca--animada svg { animation: none; }
}

.ckt-desfecho__titulo { margin: 4px 0 0; font-size: 21px; font-weight: 800; line-height: 1.2; }

.ckt-desfecho__texto {
    max-width: 36ch;
    margin: 0;
    color: var(--fxm-gray-700);
    font-size: 14px;
    line-height: 1.55;
}

.ckt-desfecho__acao { width: 100%; margin-top: 8px; }

.ckt-desfecho__link {
    margin-top: 2px;
    color: var(--fxm-gray-500);
    font-size: 13.5px;
    font-weight: 700;
}

.ckt-pix { display: grid; justify-items: center; gap: 12px; width: 100%; margin-top: 6px; }

.ckt-pix__qr {
    width: 100%;
    max-width: 230px;
    height: auto;
    border-radius: var(--fxm-radius-sm);
}

.ckt-pix__campo { width: 100%; text-align: left; }

.ckt-pix__copiar {
    width: 100%;
    background: var(--fxm-gray-100);
    color: var(--fxm-gray-900);
}

.ckt-pix__validade { margin: 0; color: var(--fxm-gray-500); font-size: 12.5px; }

@media (min-width: 760px) {
    .ckt { gap: 16px; }
    .ckt-bloco { padding: 24px 22px 26px; }
    .ckt-desfecho { padding: 34px 26px 28px; }
    .ckt-etapa__nome { font-size: 12.5px; }
}

.mnt-link-secundario {
    display: inline-block;
    margin-top: 12px;
    color: var(--fxm-gray-500);
    font-size: 14px;
    font-weight: 700;
}

/* --- Avisos --- */

.mnt-aviso {
    border-radius: var(--fxm-radius-md);
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.5;
}

.mnt-aviso--ok {
    background: var(--fxm-green-soft);
    color: #0f7a48;
}

.mnt-aviso--atencao {
    background: var(--fxm-orange-soft);
    color: #8a5a06;
}

.mnt-aviso code {
    font-size: 12.5px;
    word-break: break-all;
}

.mnt-erro {
    margin: 0;
    border-radius: var(--fxm-radius-md);
    background: var(--fxm-red-soft);
    color: #a3283a;
    padding: 14px 16px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

/* --- Cards de preco --- */

.mnt-precos {
    display: grid;
    gap: 14px;
}

.mnt-preco {
    position: relative;
    display: grid;
    gap: 6px;
    background: var(--fxm-white);
    border: 1px solid var(--fxm-gray-300);
    border-radius: var(--fxm-radius-lg);
    padding: 20px 18px;
}

.mnt-preco--destaque {
    border-color: var(--fxm-purple);
    border-width: 2px;
    box-shadow: var(--fxm-shadow-soft);
}

.mnt-selo {
    position: absolute;
    top: -11px;
    left: 18px;
    background: var(--fxm-purple);
    color: var(--fxm-white);
    border-radius: 999px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.3px;
    text-transform: uppercase;
}

.mnt-preco__nome {
    margin: 0;
    color: var(--fxm-gray-700);
    font-size: 14px;
    font-weight: 700;
}

.mnt-preco__mensal {
    display: flex;
    align-items: baseline;
    gap: 3px;
    margin: 0;
    color: var(--fxm-ink);
}

.mnt-preco__cifra {
    font-size: 17px;
    font-weight: 700;
}

.mnt-preco__valor {
    font-size: 38px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
}

.mnt-preco__por {
    color: var(--fxm-gray-500);
    font-size: 15px;
    font-weight: 700;
}

.mnt-preco__total {
    margin: 0;
    color: var(--fxm-gray-700);
    font-size: 14px;
}

.mnt-preco__desconto {
    margin: 2px 0 0;
    display: inline-block;
    width: fit-content;
    background: var(--fxm-green-soft);
    color: #0f7a48;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 12.5px;
    font-weight: 700;
}

.mnt-preco__chamada {
    margin: 4px 0 0;
    color: var(--fxm-gray-500);
    font-size: 13.5px;
    line-height: 1.5;
}

.mnt-preco__cta {
    margin-top: 12px;
    width: 100%;
    text-transform: capitalize;
}

/* --- Listas de recurso --- */

.mnt-lista {
    display: grid;
    gap: 10px;
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
}

.mnt-lista__item {
    position: relative;
    padding-left: 26px;
    color: var(--fxm-gray-700);
    font-size: 14.5px;
    line-height: 1.45;
}

.mnt-lista__item::before {
    position: absolute;
    left: 0;
    top: 0;
    font-weight: 800;
}

.mnt-lista__item--sim::before {
    content: '\2713';
    color: var(--fxm-green);
}

.mnt-lista__item--nao {
    color: var(--fxm-gray-500);
}

.mnt-lista__item--nao::before {
    content: '\2715';
    color: var(--fxm-gray-500);
}

.mnt-gratuito {
    border-style: dashed;
}

/* --- Checkout --- */

.mnt-resumo__linha {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    font-size: 16px;
}

.mnt-resumo__linha strong {
    font-size: 20px;
    font-weight: 800;
}

.mnt-resumo__nota {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.5;
}

.mnt-resumo__aviso {
    margin: 10px 0 0;
    color: #0f7a48;
    font-size: 13px;
    line-height: 1.5;
}

.mnt-abas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    background: var(--fxm-gray-100);
    border-radius: var(--fxm-radius-md);
    padding: 5px;
}

.mnt-aba {
    border: 0;
    background: transparent;
    border-radius: var(--fxm-radius-sm);
    padding: 11px 8px;
    color: var(--fxm-gray-500);
    font-family: var(--fxm-font);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
}

.mnt-aba--ativa {
    background: var(--fxm-white);
    color: var(--fxm-ink);
    box-shadow: 0 1px 3px rgba(20, 20, 31, 0.12);
}

.mnt-carregando {
    margin: 0;
    color: var(--fxm-gray-500);
    font-size: 14px;
    text-align: center;
}

/* --- Formularios --- */

.mnt-form {
    display: grid;
    gap: 14px;
    margin-top: 14px;
}

.mnt-campo {
    display: grid;
    gap: 6px;
}

.mnt-campo > span {
    color: var(--fxm-gray-700);
    font-size: 13px;
    font-weight: 700;
}

.mnt-campo input,
.mnt-campo textarea {
    width: 100%;
    border: 1px solid var(--fxm-gray-300);
    border-radius: var(--fxm-radius-sm);
    padding: 12px 14px;
    background: var(--fxm-white);
    color: var(--fxm-ink);
    font-family: var(--fxm-font);
    /* 16px evita o zoom automatico do Safari no iOS ao focar o campo. */
    font-size: 16px;
}

.mnt-campo input:focus,
.mnt-campo textarea:focus {
    outline: 2px solid var(--fxm-purple);
    outline-offset: 1px;
    border-color: var(--fxm-purple);
}

.mnt-submit {
    width: 100%;
    margin-top: 4px;
}

.mnt-submit:disabled {
    opacity: 0.6;
    cursor: progress;
}

/* --- Pix --- */

.mnt-pix {
    display: grid;
    gap: 14px;
    justify-items: center;
    text-align: center;
}

.mnt-pix .mnt-campo {
    width: 100%;
    text-align: left;
}

.mnt-pix__qr {
    width: 100%;
    max-width: 260px;
    height: auto;
    border-radius: var(--fxm-radius-sm);
}

.mnt-pix__codigo {
    resize: none;
    font-size: 12.5px;
    word-break: break-all;
}

.mnt-pix__validade {
    margin: 0;
    font-size: 13px;
}

.mnt-pix__espera {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    color: var(--fxm-gray-700);
    font-size: 14px;
    font-weight: 600;
}

.mnt-pulso {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--fxm-green);
    animation: mnt-pulsar 1.4s ease-in-out infinite;
}

@keyframes mnt-pulsar {
    0%, 100% { opacity: 0.25; transform: scale(0.85); }
    50%      { opacity: 1;    transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .mnt-pulso { animation: none; opacity: 1; }
}

/* --- Desfecho --- */

.mnt-final {
    display: grid;
    gap: 10px;
    justify-items: center;
    text-align: center;
    padding: 26px 18px;
}

.mnt-final__icone {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    margin: 0;
    border-radius: 50%;
    background: var(--fxm-green-soft);
    color: var(--fxm-green);
    font-size: 26px;
    font-weight: 800;
}

.mnt-final .button {
    margin-top: 8px;
    width: 100%;
}

/* --- Telas maiores --- */

@media (min-width: 620px) {
    .mnt-precos {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }

    .mnt-final .button,
    .mnt-preco__cta {
        width: auto;
        min-width: 220px;
        justify-self: center;
    }
}


.mnt-planos { display: grid; gap: 16px; }

.mnt-premium { display: grid; gap: 0; }

/* ---------- Premium: um produto, dois periodos ----------
   Os dois planos pagos liberam os mesmos recursos e limites; muda so o preco
   por mes. Dois cards lado a lado sugeririam produtos diferentes e mandariam
   o aluno procurar uma diferenca de recurso que nao existe. */

.mnt-premium__frase { margin: 6px 0 16px; font-size: 14.5px; line-height: 1.55; }
.mnt-premium__frase strong { color: var(--fxm-gray-900); }

.mnt-periodos { display: grid; gap: 10px; }

.mnt-periodo {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 6px 14px;
    padding: 15px 16px;
    border: 1.5px solid var(--fxm-gray-300);
    border-radius: var(--fxm-radius-md);
    background: var(--fxm-white);
    color: var(--fxm-ink);
}
.mnt-periodo:hover { border-color: var(--fxm-purple); }
.mnt-periodo--melhor { border-color: var(--fxm-purple); border-width: 2px; }

.mnt-periodo__quando { font-size: 15.5px; font-weight: 800; }
.mnt-periodo__mes {
    grid-column: 2; grid-row: 1;
    text-align: right;
    font-size: 20px; font-weight: 800; letter-spacing: -.02em;
}
.mnt-periodo__mes span { font-size: 12.5px; font-weight: 700; color: var(--fxm-gray-500); }
.mnt-periodo__total { grid-column: 1 / -1; font-size: 13px; color: var(--fxm-gray-700); }

.mnt-periodo__eco {
    display: inline-block;
    margin-left: 7px;
    padding: 3px 9px;
    border-radius: 999px;
    background: var(--fxm-green-soft);
    color: #0f7a48;
    font-size: 11.5px;
    font-weight: 800;
    vertical-align: middle;
}

.mnt-premium__economia {
    margin-top: 14px;
    padding: 12px 14px;
    border-radius: var(--fxm-radius-sm);
    background: var(--fxm-gray-100);
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--fxm-gray-700);
}
.mnt-premium__economia strong { color: var(--fxm-gray-900); }

.ckt-recompra {
    margin: 0 0 18px;
    padding: 14px;
    border: 1px solid var(--fxm-gray-300);
    border-radius: var(--fxm-radius-md);
    background: var(--fxm-gray-100);
}
.ckt-recompra__rotulo {
    display: grid;
    grid-template-columns: 20px 1fr;
    gap: 10px;
    align-items: start;
    font-size: 13px;
    line-height: 1.5;
    color: var(--fxm-gray-800);
    cursor: pointer;
}
.ckt-recompra__rotulo input { margin: 3px 0 0; }
.ckt-recompra__termos { margin: 8px 0 0 30px; font-size: 12px; }

/* --- SELOS DE SEGURANCA DO PAGAMENTO (`_selos_mercadopago.html`) --------- */
.ckt-resumo .ckt-pedido {
    border-radius: var(--fxm-radius-lg) var(--fxm-radius-lg) 0 0;
}
.mps {
    margin: -1px 0 0;
    padding: 10px 16px 11px;
    border: 1px solid #a9dff5;
    border-radius: 0 0 var(--fxm-radius-lg) var(--fxm-radius-lg);
    background: #f1faff;
}
.mps-marca {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: 7px;
    color: #26384a;
    font: 700 12.5px/1.3 var(--fxm-font);
}
.mps-cadeado { flex: none; width: 17px; height: 17px; color: #008fce; }
/* O logo OFICIAL: so altura, largura pela proporcao. O SVG do kit ja traz a
   AREA DE RESPIRO obrigatoria dentro dele: a 24px o desenho visivel ficava com
   ~15px. A escala maior compensa essa margem interna sem alterar a marca. */
.mps-logo { display: block; width: auto; height: 40px; margin: -8px 0 -8px auto; }
.mps-beneficios {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: 8px 0 0 24px;
    padding: 0;
    list-style: none;
}
.mps-beneficios li {
    position: relative;
    color: #405162;
    font: 600 11.5px/1.4 var(--fxm-font);
}
.mps-beneficios li::before { content: "✓"; margin-right: 4px; color: #00a650; font-weight: 900; }
.mps-beneficios a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.mps-legal {
    margin: 7px 0 0 24px;
    color: #667585;
    font-size: 10px;
    line-height: 1.4;
}
@media (max-width: 480px) {
    .mps { padding: 9px 12px 10px; }
    .mps-marca { gap: 5px; font-size: 11.5px; }
    .mps-logo { height: 36px; margin: -7px 0 -7px auto; }
    .mps-beneficios { gap: 3px 10px; margin: 7px 0 0 22px; }
    .mps-beneficios li { font-size: 10.5px; }
    .mps-legal { margin: 6px 0 0 22px; font-size: 9.5px; }
}

/* --- MINHA ASSINATURA / COMPRA E REEMBOLSO (base /configuracoes/, `tc-*`) --- */
/* O `tc-card` nao tem margem interna (quem da sao os blocos de dentro): os
   blocos desta tela levam a sua. */
.mc .mc-pad { padding: 16px 18px; }
.mc .mc-pad--topo0 { padding-top: 0; }
.mc .mc-pad .mc-btn { margin-top: 0; }
.mc .mc-icone { color: var(--fxm-gray-700); }
.mc .mc-icone--ok { color: var(--fxm-green-700, #18794e); }
.mc-btn {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 46px; margin-top: 14px; padding: 0 20px;
    border: 0; border-radius: 999px; background: var(--fxm-purple); color: #fff;
    font: 800 15px/1 var(--fxm-font); text-decoration: none; cursor: pointer;
}
.mc-btn--perigo { width: 100%; background: #fff; color: #b42318; box-shadow: inset 0 0 0 1.5px #e7b3ad; }
.mc-btn--perigo:hover { background: #fff5f4; }
.mc-vazio p { margin: 0; color: var(--fxm-gray-700); }
.mc-voltar { color: inherit; text-decoration: none; }
.mc-voltar::before { content: "‹ "; }

/* O estado do reembolso numa compra: a cor diz se da para pedir. */
.mc-chip {
    display: inline-block; align-self: flex-start; margin-top: 6px; padding: 3px 9px;
    border-radius: 999px; background: var(--fxm-gray-100); color: var(--fxm-gray-700);
    font-size: 11.5px; font-weight: 800;
}
.mc-chip--disponivel { background: #e4f8ed; color: #146c43; }
.mc-chip--analise { background: #fdf0dc; color: #8a5a12; }
.mc-chip--feito { background: #e9f1fe; color: #1c3fc7; }
.mc-demo-aviso { display: grid; gap: 4px; padding: 13px 16px; border: 1px solid #ecd28c; border-radius: 12px; background: #fff8e5; color: #694f12; font-size: 13.5px; line-height: 1.45; }
.mc-demo-compra { cursor: pointer; }
.mc-demo-compra:hover, .mc-demo-compra:active { background: var(--fxm-gray-100); }
.mc-demo-cenarios { display: flex; flex-wrap: wrap; gap: 8px; }
.mc-demo-cenarios a { padding: 8px 12px; border: 1px solid var(--fxm-gray-300); border-radius: 999px; background: var(--fxm-white); color: var(--fxm-gray-700); font-size: 13px; font-weight: 700; text-decoration: none; }
.mc-demo-cenarios a:hover { border-color: var(--fxm-purple); color: var(--fxm-purple); }
.mc-demo-acoes { display: grid; gap: 10px; }
.mc-btn--demo-secundario { width: 100%; min-height: 42px; margin: 0; background: var(--fxm-white); color: var(--fxm-purple); box-shadow: inset 0 0 0 1.5px var(--fxm-purple); font-size: 14px; }
.mc-btn--demo-secundario:hover { background: var(--fxm-purple-soft); }
.mc-compra + .mc-compra { border-top: 1px solid var(--fxm-gray-100); }
.mc-compra__acao { display: flex; padding: 0 10px 12px 58px; }
.mc-btn--iniciar { min-height: 40px; margin: 0; padding: 0 16px; font-size: 14px; }

.mc-garantia__topo { display: flex; gap: 12px; align-items: flex-start; }
.mc-garantia__icone {
    flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
    background: var(--fxm-gray-100); color: var(--fxm-gray-700);
}
.mc-garantia__icone svg { width: 22px; height: 22px; }
.mc-garantia--disponivel .mc-garantia__icone { background: #e4f8ed; color: #146c43; }
.mc-garantia--analise .mc-garantia__icone { background: #fdf0dc; color: #8a5a12; }
.mc-garantia--feito .mc-garantia__icone { background: #e9f1fe; color: #1c3fc7; }
.mc-garantia__titulo { margin: 0; font-size: 17px; font-weight: 800; color: var(--fxm-ink); }
.mc-garantia__falta { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #e4f8ed; color: #146c43; font-size: 12px; font-weight: 800; vertical-align: 2px; }
.mc-garantia__texto, .mc-garantia__nota { margin: 4px 0 0; color: var(--fxm-gray-700); font-size: 14.5px; line-height: 1.5; }
.mc-garantia__nota { margin-top: 12px; }
.mc-regras { margin: 16px 0 0; padding: 14px 14px 14px 32px; border-radius: 12px; background: #f6f7f9; color: var(--fxm-gray-700); font-size: 14px; line-height: 1.5; }
.mc-regras li + li { margin-top: 4px; }
.mc-regras b { color: var(--fxm-ink); }
.mc-form { margin-top: 16px; }
.mc-form textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--fxm-gray-300); border-radius: var(--fxm-radius-sm); font: inherit; font-size: 16px; resize: vertical; }

.mc-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin: 0; }
.mc-dados dt { color: var(--fxm-gray-500); font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.mc-dados dd { margin: 2px 0 0; color: var(--fxm-ink); font-size: 15px; font-weight: 600; }
.mc-aviso { margin: 0 0 14px; padding: 12px 14px; border-radius: 12px; background: #f6f7f9; font-size: 14.5px; }
.mc-aviso--success { background: #e4f8ed; color: #146c43; }
.mc-aviso--error { background: #fdebee; color: #a8243a; }
.mc-rodape { margin: 18px 0 0; font-size: 14px; }
.mc-rodape a { color: var(--fxm-purple); }
.mc .mc-pad .mc-form .mc-btn { margin-top: 12px; }

/* =====================================================================
   MINHA ASSINATURA E O PEDIDO DE REEMBOLSO (`rb`), 23/10/2026.
   Construido SOBRE os `tc-*` de /edital/ e /progresso/ (menu_conta.css):
   aqui so o que eles nao tem -- a barra dos 7 dias, as etapas, as opcoes
   do motivo, os efeitos da confirmacao e o botao de risco.
   ===================================================================== */
.rb { --rb-verde: #1a7f4b; --rb-verde-fundo: #e4f8ed; --rb-ambar: #8a5a12; --rb-ambar-fundo: #fdf0dc; --rb-risco: #b42318; }

/* A pastilha com icone (sem numero) e a do valor. */
.rb .rb-num { color: var(--fxm-purple-dark); }
.rb-garantia--disponivel .tc-destaque__num { background: var(--rb-verde-fundo); color: var(--rb-verde); }
.rb-garantia--analise .tc-destaque__num { background: var(--rb-ambar-fundo); color: var(--rb-ambar); }
.rb-garantia--feito .tc-destaque__num { background: #e9f1fe; color: var(--fxm-purple-dark); }
.rb-garantia--encerrado .tc-destaque__num,
.rb-garantia--indisponivel .tc-destaque__num { color: var(--fxm-gray-500); }
.rb .rb-valor { display: flex; align-items: center; justify-content: center; gap: 2px; min-width: 96px; font-size: 21px; }
.rb .rb-valor small { margin-top: 3px; font-size: 12px; font-weight: 800; opacity: .7; }

/* Os 7 dias: quanto ainda resta da garantia. */
.rb-barra { height: 8px; border-radius: 999px; background: var(--fxm-gray-100); overflow: hidden; }
.rb-barra span { display: block; height: 100%; border-radius: inherit; background: var(--rb-verde); }

/* A linha de acao do pedido: a mesma `tc-acao`, no tom da garantia. */
.rb-garantia--disponivel .rb-acao { color: var(--rb-verde); }

/* Etiqueta de estado na lista de pagamentos. */
.rb-chip { justify-self: start; width: max-content; margin-top: 5px; padding: 3px 9px; border-radius: 999px; background: var(--fxm-gray-100); color: var(--fxm-gray-700); font-size: 11px; font-weight: 800; white-space: nowrap; }
.rb-chip--disponivel { background: var(--rb-verde-fundo); color: var(--rb-verde); }
.rb-chip--analise { background: var(--rb-ambar-fundo); color: var(--rb-ambar); }
.rb-chip--feito { background: #e9f1fe; color: var(--fxm-purple-dark); }

.rb-voltar { color: inherit; text-decoration: none; }
.rb-voltar::before { content: "‹ "; }
.rb-nota p { margin: 0; color: var(--fxm-gray-700); font-size: 14px; line-height: 1.5; }
.rb-rodape { margin: 4px 2px 0; font-size: 13.5px; }
.rb-rodape a { color: var(--fxm-purple); font-weight: 700; }

.rb-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 18px; margin: 0; }
.rb-dados dt { color: var(--fxm-gray-500); font-size: 10.5px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.rb-dados dd { margin: 3px 0 0; color: var(--fxm-gray-900); font-size: 15px; font-weight: 700; }

.rb-aviso { margin: 0; padding: 12px 14px; border-radius: 12px; background: var(--fxm-gray-100); color: var(--fxm-gray-900); font-size: 14px; line-height: 1.45; }
.rb-aviso--success { background: var(--rb-verde-fundo); color: var(--rb-verde); font-weight: 700; }
.rb-aviso--error { background: #fdebee; color: var(--rb-risco); font-weight: 700; }

/* Demonstracao local. */
.rb-demo { padding: 12px 14px; border-radius: 12px; background: #fff8dc; box-shadow: inset 0 0 0 1px #f3e2a0; font-size: 13.5px; }
.rb-demo p { margin: 0; color: #5c4a00; }
.rb-demo nav { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rb-demo a { padding: 4px 10px; border-radius: 999px; background: #fff; color: #5c4a00; font-weight: 700; text-decoration: none; box-shadow: inset 0 0 0 1px #f3e2a0; }

/* Etapas 1 e 2. */
.rb-etapas { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: -4px 2px 0; }
.rb-etapas span { height: 5px; border-radius: 999px; background: var(--fxm-gray-100); }
.rb-etapas .is-atual { background: var(--fxm-purple); }
.rb-etapas .is-feita { background: var(--rb-verde); }

/* Etapa 1: os motivos como linhas de escolha (o desenho da `tc-acao`). */
.rb-form { margin: 0; }
.rb-opcoes { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.rb-opcoes legend { margin: 4px 2px 10px; padding: 0; }
.rb-opcao {
    display: flex; align-items: center; gap: 12px; min-height: 50px; padding: 10px 14px;
    border: 1.5px solid var(--fxm-gray-200, #e6e8ec); border-radius: 12px; background: #fff;
    cursor: pointer; transition: border-color .15s, background .15s;
}
.rb-opcao:hover { border-color: var(--fxm-gray-300); }
.rb-opcao input { position: absolute; opacity: 0; pointer-events: none; }
.rb-opcao__marca { flex: none; width: 20px; height: 20px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--fxm-gray-300); transition: box-shadow .15s; }
.rb-opcao__texto { font-size: 15px; font-weight: 650; color: var(--fxm-gray-900); }
.rb-opcao:has(input:checked) { border-color: var(--fxm-purple); background: #f3f6ff; }
.rb-opcao:has(input:checked) .rb-opcao__marca { box-shadow: inset 0 0 0 6px var(--fxm-purple); }
.rb-opcao:has(input:focus-visible) { outline: 3px solid var(--fxm-blue-bright); outline-offset: 2px; }

.rb-campo { display: grid; gap: 6px; font-size: 13.5px; font-weight: 700; color: var(--fxm-gray-900); }
.rb-campo small { font-weight: 600; color: var(--fxm-gray-500); }
.rb-campo textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--fxm-gray-200, #e6e8ec); border-radius: 12px; font: inherit; font-size: 16px; font-weight: 400; resize: vertical; }
.rb-campo textarea:focus { outline: none; border-color: var(--fxm-purple); box-shadow: 0 0 0 3px rgba(47, 92, 236, .15); }

.rb-botoes { display: grid; gap: 10px; }
.rb-botoes .btn-form-submit { margin-top: 0; border-radius: 999px; text-decoration: none; }
.rb-btn-leve { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; color: var(--fxm-gray-700); font-size: 14px; font-weight: 700; text-decoration: none; }
.rb-btn-leve:hover { color: var(--fxm-purple); }

/* Etapa 2: os efeitos, o motivo e a confirmacao. */
.rb-efeitos { gap: 0; padding: 4px 16px; }
.rb-efeito { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.rb-efeito + .rb-efeito { border-top: 1px solid var(--fxm-gray-100); }
.rb-efeito__icone { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--fxm-gray-100); color: var(--fxm-purple-dark); }
.rb-efeito__icone svg { width: 19px; height: 19px; }
.rb-efeito--alerta .rb-efeito__icone { background: #fdebee; color: var(--rb-risco); }
.rb-efeito p { margin: 0; color: var(--fxm-gray-700); font-size: 14.5px; line-height: 1.5; }
.rb-efeito b { color: var(--fxm-gray-900); }
.rb-motivo { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rb-motivo p { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--fxm-gray-900); }
.rb-motivo span { color: var(--fxm-gray-700); }
.rb-motivo .rb-btn-leve { min-height: 36px; color: var(--fxm-purple); }
.rb-confirmo { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.45; color: var(--fxm-gray-900); cursor: pointer; }
.rb-confirmo input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--rb-risco); }
.rb-confirmo--demo { font-size: 13px; color: #5c4a00; }
.rb-btn-perigo {
    display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 0 16px;
    border: 0; border-radius: 999px; background: #fff; color: var(--rb-risco); box-shadow: inset 0 0 0 1.5px #e7b3ad;
    font: 800 15px/1 var(--fxm-font); cursor: pointer;
}
.rb-btn-perigo:disabled { color: var(--fxm-gray-500); box-shadow: inset 0 0 0 1.5px var(--fxm-gray-200, #e6e8ec); cursor: not-allowed; }
.rb-btn-perigo:not(:disabled):hover { background: #fff5f4; }