*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

        :root {
            --navy: #1C2040;
            --navy-deep: #12152E;
            --navy-soft: #2A2F54;
            --cream: #FAF9F7;
            --warm-white: #FFFFFF;
            --stone: #F0EFEC;
            --stone-mid: #E4E3DF;
            --text: #1C2040;
            --text-secondary: #6B6F80;
            --text-tertiary: #9DA1B0;
            --error: #C53030;
            --error-bg: #FFF5F5;

            /* Escala de espaçamento e raio. Antes não existia: as folgas verticais medidas com
               Playwright eram 11,8 · 44 · 28 · 22,2 · 8 · 22,4 · 16 · 14,4 px — oito valores para
               oito espaços, nenhum deles proposital. E cinco raios diferentes (10, 12, 14, 16 px)
               na mesma tela. Uma tela de dinheiro sem ritmo parece feita às pressas, e é
               exatamente o que o cliente não pode sentir aqui. */
            --sp-1: 0.375rem;   /*  6px — dentro de uma linha */
            --sp-2: 0.75rem;    /* 12px — entre itens irmãos */
            --sp-3: 1.125rem;   /* 18px — respiro interno de caixa */
            --sp-4: 1.5rem;     /* 24px — entre blocos da página */
            --sp-5: 2.25rem;    /* 36px — entre contratos */
            --raio: 14px;       /* um raio só para toda caixa de conteúdo */
            --raio-sm: 10px;    /* elementos pequenos: chip, caixa do resumo */
        }

        body {
            font-family: 'Sora', sans-serif;
            background: var(--cream);
            color: var(--text);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            -webkit-font-smoothing: antialiased;
        }

        /* ═══ Ambient background ═══ */
        body::before {
            content: '';
            position: fixed;
            top: -40%; left: -20%;
            width: 80vw; height: 80vw;
            border-radius: 50%;
            background: radial-gradient(circle, rgba(28,32,64,0.02) 0%, transparent 70%);
            pointer-events: none;
            z-index: 0;
        }

        /* ═══ Header ═══ */
        header {
            position: relative; z-index: 10;
            padding: 1.25rem 2rem;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        .header-inner {
            max-width: 480px; width: 100%;
            display: flex; align-items: center; justify-content: space-between;
        }

        .header-wordmark {
            font-size: 0.6rem;
            font-weight: 600;
            letter-spacing: 0.18em;
            text-transform: uppercase;
            color: var(--text-tertiary);
        }

        .header-secure {
            display: flex; align-items: center; gap: 5px;
            font-size: 0.58rem;
            font-weight: 500;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--text-tertiary);
        }

        .header-secure svg { width: 12px; height: 12px; opacity: 0.6; }

        /* ═══ Main composition ═══ */
        main {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 1rem 1.5rem 3rem;
            position: relative;
            z-index: 1;
        }

        /* ═══ Logo pavilion ═══ */
        .logo-pavilion {
            margin-bottom: 2.5rem;
            text-align: center;
            animation: fadeDown 0.6s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .logo-pavilion img {
            height: 120px;
        }

        .logo-divider {
            width: 32px;
            height: 1px;
            background: var(--stone-mid);
            margin: 1.25rem auto 0;
        }

        @keyframes fadeDown {
            from { opacity: 0; transform: translateY(-12px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* ═══ Card ═══ */
        .card {
            background: var(--warm-white);
            border-radius: 24px;
            max-width: 440px;
            width: 100%;
            padding: 3.25rem 2.75rem 3rem;
            box-shadow:
                0 1px 2px rgba(28,32,64,0.03),
                0 4px 16px rgba(28,32,64,0.04),
                0 16px 56px rgba(28,32,64,0.06);
            animation: cardReveal 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
        }

        @keyframes cardReveal {
            from { opacity: 0; transform: translateY(24px) scale(0.98); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .card-title {
            font-size: 1.45rem;
            font-weight: 700;
            color: var(--navy);
            line-height: 1.3;
            margin-bottom: 0.75rem;
        }

        .card-subtitle {
            font-size: 0.85rem;
            font-weight: 400;
            color: var(--text-secondary);
            line-height: 1.7;
            margin-bottom: 2.75rem;
        }

        /* ═══ Form ═══ */
        .field { margin-bottom: 2rem; }

        .field-label {
            display: block;
            font-size: 0.62rem;
            font-weight: 600;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--text-tertiary);
            margin-bottom: 0.75rem;
            padding-left: 2px;
        }

        .field-input {
            width: 100%;
            height: 3.75rem;
            padding: 0 1.25rem;
            background: var(--stone);
            border: 2px solid transparent;
            border-radius: 14px;
            font-family: 'Sora', sans-serif;
            font-size: 1.15rem;
            font-weight: 500;
            color: var(--navy);
            letter-spacing: 0.06em;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            outline: none;
        }

        .field-input::placeholder {
            color: var(--text-tertiary);
            font-weight: 400;
            letter-spacing: 0.02em;
            opacity: 0.7;
        }

        .field-input:focus {
            background: var(--warm-white);
            border-color: var(--navy);
            box-shadow: 0 0 0 4px rgba(28,32,64,0.06);
        }

        .field-input.has-error {
            border-color: var(--error);
            box-shadow: 0 0 0 4px rgba(197,48,48,0.06);
        }

        /* ═══ Error states ═══ */
        .alert {
            padding: 1rem 1.25rem;
            border-radius: 14px;
            margin-bottom: 1.75rem;
            font-size: 0.8rem;
            font-weight: 500;
            line-height: 1.55;
            animation: alertIn 0.3s ease-out;
        }

        @keyframes alertIn {
            from { opacity: 0; transform: translateY(-6px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .alert-error {
            background: var(--error-bg);
            color: var(--error);
        }

        .alert-error strong {
            display: block;
            margin-bottom: 0.35rem;
            font-weight: 600;
        }

        .alert-error .contact-links {
            color: var(--text-secondary);
            font-size: 0.78rem;
            font-weight: 400;
        }

        .alert-error .contact-links a {
            color: var(--navy);
            text-decoration: none;
            font-weight: 600;
            transition: opacity 0.2s;
        }

        .alert-error .contact-links a:hover { opacity: 0.7; }

        /* ═══ Button ═══ */
        .btn-submit {
            width: 100%;
            height: 3.75rem;
            background: var(--navy);
            color: #fff;
            border: none;
            border-radius: 14px;
            font-family: 'Sora', sans-serif;
            font-size: 0.78rem;
            font-weight: 600;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            cursor: pointer;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            box-shadow:
                0 2px 4px rgba(28,32,64,0.12),
                0 8px 24px rgba(28,32,64,0.16);
            position: relative;
            overflow: hidden;
        }

        .btn-submit::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, transparent 40%, rgba(255,255,255,0.04) 100%);
            pointer-events: none;
        }

        .btn-submit:hover {
            background: var(--navy-deep);
            transform: translateY(-2px);
            box-shadow:
                0 4px 8px rgba(28,32,64,0.14),
                0 12px 32px rgba(28,32,64,0.22);
        }

        .btn-submit:active {
            transform: translateY(0);
            box-shadow:
                0 1px 2px rgba(28,32,64,0.12),
                0 4px 12px rgba(28,32,64,0.14);
        }

        /* ═══ Footer ═══ */
        footer {
            text-align: center;
            padding: 1.5rem;
            color: var(--text-tertiary);
            font-size: 0.62rem;
            font-weight: 400;
            letter-spacing: 0.06em;
        }

        /* ═══ Responsive ═══ */
        @media (max-width: 520px) {
            main { padding: 0.5rem 1.25rem 2rem; }
            .logo-pavilion { margin-bottom: 2rem; }
            .logo-pavilion img { height: 90px; }
            .card { padding: 2rem 1.75rem 1.75rem; border-radius: 20px; }
            .card-title { font-size: 1.2rem; }
            .field-input { height: 3.25rem; font-size: 1.05rem; }
            .btn-submit { height: 3.25rem; }
        }

/* ═══ Extrato (E5) ═══ */
.card-extrato { max-width: 560px; }
/* No extrato o subtítulo é a identificação (CPF) e pertence ao cabeçalho — 44px o deixavam órfão,
   longe do bloco que ele apresenta. Na tela de login os mesmos 44px estão certos: lá ele abre o
   formulário e a distância é intencional. */
.card-extrato .card-subtitle { margin-bottom: var(--sp-4); }

.contrato { margin-bottom: var(--sp-5); }

.contrato-cabecalho {
    display: flex; align-items: baseline; justify-content: space-between;
    padding-bottom: var(--sp-2); margin-bottom: var(--sp-2);
    border-bottom: 1px solid var(--stone-mid);
}

.contrato-id {
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--text-tertiary);
}

.contrato-abertas { font-size: 0.72rem; color: var(--text-secondary); }

.quitado-box {
    background: var(--stone); border-radius: 14px; padding: 1.1rem 1.25rem;
    font-size: 0.82rem; color: var(--text-secondary); line-height: 1.6;
}
.quitado-box strong { display: block; color: var(--navy); margin-bottom: 0.2rem; }

.parcelas { list-style: none; display: flex; flex-direction: column; gap: var(--sp-2); }

.parcela {
    background: var(--warm-white); border: 1px solid var(--stone-mid);
    border-radius: var(--raio); padding: var(--sp-3);
}
.parcela--vencido { border-color: rgba(197,48,48,0.35); background: var(--error-bg); }
.parcela--vence_hoje { border-color: var(--navy); }
.parcela--quitado, .parcela--cancelado { opacity: 0.72; }
.parcela--suspensa { border-style: dashed; }

.parcela-topo {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.75rem;
}
.parcela-titulo { font-size: 0.92rem; font-weight: 600; color: var(--navy); }

.selo {
    font-size: 0.58rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
    padding: 0.28rem 0.6rem; border-radius: 999px;
    background: var(--stone); color: var(--text-secondary);
}
.selo--vencido { background: rgba(197,48,48,0.12); color: var(--error); }
.selo--vence_hoje { background: var(--navy); color: #fff; }
.selo--quitado { background: rgba(28,32,64,0.08); color: var(--navy-soft); }

.parcela-linha {
    display: flex; align-items: baseline; justify-content: space-between;
    font-size: 0.8rem; padding: 0.18rem 0;
}
.parcela-rotulo { color: var(--text-tertiary); }
.parcela-valor { color: var(--text); font-weight: 500; }
.parcela-valor--dinheiro { font-size: 1rem; font-weight: 600; color: var(--navy); }
.atraso { font-style: normal; color: var(--error); font-size: 0.72rem; margin-left: 0.4rem; }

.parcela-nota {
    margin-top: 0.6rem; font-size: 0.72rem; line-height: 1.5; color: var(--text-secondary);
}
.parcela-nota--suspensa { color: var(--navy-soft); }

.rodape-ajuda {
    margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--stone-mid);
    font-size: 0.78rem; color: var(--text-secondary); text-align: center;
}
.rodape-ajuda a { color: var(--navy); font-weight: 600; text-decoration: none; }

@media (max-width: 520px) {
    .card-extrato { padding: 1.75rem 1.25rem 1.5rem; }
    .parcela { padding: var(--sp-2) var(--sp-3); }
}

/* ═══ Ações por parcela (E6) ═══ */
.acoes { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }

.btn-acao {
    flex: 1 1 auto; text-align: center;
    padding: 0.7rem 1rem; border-radius: 11px;
    border: 1px solid var(--navy); background: var(--warm-white); color: var(--navy);
    font-family: 'Sora', sans-serif; font-size: 0.72rem; font-weight: 600;
    letter-spacing: 0.04em; text-decoration: none; cursor: pointer;
    transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-acao:hover { background: var(--navy); color: #fff; }
.btn-acao.copiado { background: var(--navy); color: #fff; }

/* ═══ Posição do dado (E8) ═══ */
.posicao {
    font-size: 0.74rem; line-height: 1.55; color: var(--text-secondary);
    background: var(--stone); border-radius: var(--raio); padding: var(--sp-2) var(--sp-3);
    margin-bottom: var(--sp-4);
}
.posicao--atrasado { background: #FFF8E6; color: #7A5A00; }
.posicao--muito_velho { background: var(--error-bg); color: var(--error); font-weight: 500; }

/* --- Vida financeira: o número de cima ------------------------------------------------------ */
/* Responde "quanto já paguei / quanto falta" sem o cliente somar nada — 188 conversas por ano
   existem só por causa dessa pergunta. */
.vida {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* Fio de 1px em vez de folga: a folga deixava passar o branco da página entre as caixas
       enquanto a faixa de quebra logo abaixo era contínua — uma emenda em cima e nenhuma embaixo.
       Com o fundo no contêiner, o gap vira divisor e o conjunto lê como um bloco só. */
    gap: 1px;
    background: var(--stone-mid);
    border-radius: var(--raio-sm) var(--raio-sm) 0 0;
    overflow: hidden;
    margin: 0 0 var(--sp-4);
}
.vida--duas { grid-template-columns: repeat(2, 1fr); }
/* 🔴 A quebra por meio vem COLADA nas caixas, e por isso o bloco perde a margem de baixo aqui.
   A 1ª versão usava `margin-top: -0.9rem` na quebra para puxá-la — gambiarra que dependia do valor
   exato da margem daqui e quebraria em silêncio ao mexer nela. */
.vida:has(+ .vida-quebra) { margin-bottom: 0; }
.vida-item {
    background: var(--stone);
    border-radius: var(--raio-sm);
    padding: var(--sp-2) var(--sp-1);
    text-align: center;
}
.vida-item { border-radius: 0; }
.vida:not(:has(+ .vida-quebra)) { border-radius: var(--raio-sm); }
.vida-rotulo {
    display: block;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: var(--sp-1);
}
.vida-valor {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--navy);
    /* Valor em dinheiro nunca quebra no meio: "R$ 1.200," / "00" é a fonte clássica de ler errado. */
    white-space: nowrap;
}
/* Um fundo só para as três partes. Antes a caixa de "falta pagar" era rosa e a faixa de quebra
   cinza passava por baixo dela — duas cores costuradas na horizontal, que é o tipo de emenda que
   faz a tela parecer montada às pressas. O vermelho fica no NÚMERO, que é onde ele informa. */
.vida-item--saldo .vida-valor { color: var(--error); }

/* "Falta pagar" quebrado por meio, logo abaixo das caixas e na largura delas.
   Sem esta faixa, um balão de R$ 15.457 no meio de parcelas de R$ 102 parece erro de sistema —
   foi a confusão do contrato 3869. Dentro da caixa não cabia: ela tem metade da largura e a linha
   quebrava em três pedaços embaralhados. */
.vida-quebra {
    list-style: none;
    margin: 0 0 var(--sp-4);
    padding: var(--sp-2) var(--sp-3);
    background: var(--stone);
    border-top: 1px solid var(--stone-mid);
    border-radius: 0 0 var(--raio-sm) var(--raio-sm);
    font-size: 0.78rem;
}
.vida-quebra li {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
    color: var(--text-secondary); padding: var(--sp-1) 0;
}
.vida-quebra li + li { border-top: 1px solid var(--stone-mid); }
.vida-quebra-meio { font-weight: 600; color: var(--navy); }
.vida-quebra-meio em {
    font-style: normal; font-weight: 400; font-size: 0.72rem; color: var(--text-tertiary);
    margin-left: var(--sp-1);
}
.vida-quebra-valor { font-weight: 600; color: var(--navy); white-space: nowrap; }

/* --- Histórico dobrado --------------------------------------------------------------------- */
/* Contrato sem saldo nasce fechado. Não é economia de espaço: o pior caso medido é 204 parcelas
   num contrato (p95 = 59), e despejar isso aberto enterraria as parcelas que pedem ação no meio
   do que já está pago. `<details>` nativo: abre sem JavaScript, pelo teclado, e o leitor de tela
   anuncia o estado. */
.historico { margin: 0; }
.historico-resumo {
    cursor: pointer;
    list-style: none;
    background: var(--stone);
    border-radius: var(--raio);
    padding: var(--sp-2) var(--sp-3);
    font-size: 0.86rem;
    color: var(--text-secondary);
}
.historico-resumo::-webkit-details-marker { display: none; }
.historico-resumo strong { display: block; color: var(--navy); margin-bottom: 0.15rem; }
.historico[open] .historico-resumo { border-radius: var(--raio) var(--raio) 0 0; margin-bottom: var(--sp-2); }
/* O "ver" em vermelho parecia mensagem de erro debaixo de um bloco cinza. É um convite a abrir:
   cor do texto principal e o sinal de que existe mais coisa ali. */
.historico-abrir {
    display: inline-block;
    margin-top: var(--sp-1);
    font-weight: 600;
    color: var(--navy);
}
.historico-abrir::after { content: " ⌄"; }
.historico[open] .historico-abrir { display: none; }
.historico[open] .historico-abrir { visibility: hidden; }
.historico-resumo:focus-visible { outline: 2px solid var(--error); outline-offset: 2px; }

/* --- Parcela liquidada: pago × renegociada × substituída ------------------------------------ */
/* O ERP marca `Quitado=Sim` para dinheiro que entrou E para dívida que mudou de plano. O selo
   precisa distinguir, senão a tela chama de "Pago" 13.234 parcelas que não receberam um centavo.
   Verde só para quem pagou de verdade; as outras duas em tom neutro — não são boa notícia nem má,
   são um registro de que aquela parcela mudou de lugar. */
.selo--renegociacao,
.selo--substituicao {
    background: var(--stone-mid);
    color: var(--text-secondary);
}
.parcela--quitado .parcela-nota { color: var(--text-secondary); }

/* Histórico do contrato ainda ativo — mesmo componente do contrato quitado, um degrau mais discreto
   para não competir com as parcelas que pedem ação. */
.historico--parcial { margin-top: var(--sp-2); }
.historico--parcial .historico-resumo { font-size: 0.82rem; }
/* O "ver" precisa de linha própria: colado no texto ele vira parte da frase
   ("1 de 4 neste contrato ver") e deixa de parecer clicável. */
.historico--parcial .historico-abrir { display: block; margin-top: var(--sp-1); }

/* Resumo com duas caixas em vez de três (saiu o "Contratado"). */
.vida--duas { grid-template-columns: repeat(2, 1fr); }

/* --- A próxima a pagar, em destaque ---------------------------------------------------------- */
/* Pedido do Matheus (31/08): o cliente abre a tela e a primeira coisa que vê é o que ele precisa
   resolver. Antes ele encarava a lista inteira e tinha de descobrir sozinho qual linha era a dele. */
.proxima {
    border: 1px solid var(--navy);
    border-radius: var(--raio);
    padding: var(--sp-3);
    margin: 0 0 var(--sp-4);
    background: var(--warm-white);
}
.proxima--vencida { border-color: var(--error); background: var(--error-bg); }
.proxima-rotulo {
    font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--text-secondary); margin: 0 0 var(--sp-2);
}
.proxima--vencida .proxima-rotulo { color: var(--error); }
.proxima-linha {
    display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
    margin-bottom: var(--sp-1);
}
.proxima-data { font-size: 0.95rem; color: var(--text-secondary); }
.proxima-valor {
    font-size: 1.45rem; font-weight: 600; color: var(--navy);
    /* Valor em dinheiro nunca quebra no meio: "R$ 1.200," / "00" é a fonte clássica de ler errado. */
    white-space: nowrap;
}
.proxima--vencida .proxima-valor { color: var(--error); }
.acoes--destaque { margin-top: var(--sp-2); }
.btn-acao--forte { background: var(--navy); color: var(--warm-white); border-color: var(--navy); }

/* --- O meio de pagamento em cada parcela ----------------------------------------------------- */
/* É ele que explica por que uma parcela tem botão de baixar e a outra só WhatsApp. Discreto de
   propósito: informa, não compete com o valor nem com o selo de situação. */
.meio {
    display: inline-block;
    font-size: 0.68rem; font-weight: 600; letter-spacing: 0.04em;
    color: var(--text-secondary);
    background: var(--stone);
    border-radius: 999px;
    padding: 0.15rem var(--sp-1);
    margin: var(--sp-1) 0 var(--sp-2);
}
.proxima .meio { margin: 0 0 var(--sp-1); }


/* Rodapé — o aviso de privacidade é informação de rodapé: presente, legível, sem competir com a
   parcela que o cliente veio ver. Nasceu em 04/09/2026; antes o rodapé era só a marca. */
footer {
    margin-top: var(--sp-5);
    padding: var(--sp-4) var(--sp-3) var(--sp-3);
    border-top: 1px solid var(--borda, #e5e5e5);
    text-align: center;
}
.rodape-privacidade {
    margin: 0 auto var(--sp-2);
    max-width: 46rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--texto-fraco, #666);
}
.rodape-privacidade a { color: inherit; text-decoration: underline; }
.rodape-marca { margin: 0; font-size: 0.8125rem; color: var(--texto-fraco, #666); }

/* --- Portão 3: "Prefere pagar por Pix ou cartão?" ------------------------------------------- */
/* Convite, não botão: o boleto continua sendo o caminho principal (a "2ª via" ganha peso quando o
   portão abre). Fica FORA de .acoes porque, dentro, o <details> aberto esticava os irmãos flex e
   espremia os links num terço da linha. <details> nativo: abre sem JS, pelo teclado, e o leitor de
   tela anuncia o estado. Aberto, dois botões de largura cheia — alvo grande para dedo e para quem
   enxerga pouco. */
.outro-meio { margin-top: var(--sp-2); }
.outro-meio-resumo {
    cursor: pointer; list-style: none; display: inline-block;
    padding: var(--sp-1) 0;
    font-size: 0.8rem; font-weight: 600; color: var(--navy);
}
.outro-meio-resumo::-webkit-details-marker { display: none; }
.outro-meio-resumo::after { content: " ⌄"; }
.outro-meio[open] .outro-meio-resumo::after { content: " ⌃"; }
.outro-meio-resumo:focus-visible { outline: 2px solid var(--error); outline-offset: 2px; }
.outro-meio-aviso, .outro-meio-dica {
    margin: var(--sp-1) 0; font-size: 0.72rem; line-height: 1.5; color: var(--text-secondary);
}
.outro-meio-aviso { color: var(--navy-soft); font-weight: 600; }
.outro-meio-opcoes { display: flex; flex-direction: column; gap: var(--sp-1); }
.outro-meio-opcoes .btn-acao { flex: none; width: 100%; }

/* Carnê (24/09): o botão fica entre o destaque e o resumo, com o respiro de bloco. */
.carne { margin: var(--sp-4) 0; }
.carne .parcela-nota { margin-top: var(--sp-1); }

/* Pagar com Pix agora (C8, 24/09): o <form> some do layout e o botão vira irmão dos outros em .acoes. */
.form-pagar { display: contents; }
.pagina-pagar { padding: var(--sp-4) 0; }
.pagina-pagar p { margin: var(--sp-2) 0; }
.pagar-voltar { margin-top: var(--sp-4); }