/*
 * Páginas públicas secundárias: /afiliados (programa de parceiros), /assinar e /assinar/retorno.
 * Carregado DEPOIS de site.css e usa os mesmos tokens, escala (múltiplos de 4px) e componentes.
 * Aqui só entra o que essas páginas têm de novo.
 */

:root {
    --erro-fundo: oklch(0.975 0.018 27);
    --erro-borda: oklch(0.53 0.19 27 / 0.3);
    --erro-anel: oklch(0.53 0.19 27 / 0.18);
    --contorno-claro: oklch(1 0 0 / 0.35);
    --contorno-claro-hover: oklch(1 0 0 / 0.08);
}

/* ------------------------------------------------------------ utilitários */

.link-texto {
    font-weight: 700;
    color: var(--verde-forte);
    text-decoration: underline;
    text-decoration-color: var(--verde-borda);
    text-underline-offset: 3px;
    transition: text-decoration-color var(--transicao);
}

.link-texto:hover {
    text-decoration-color: currentColor;
}

.link-discreto--icone {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.link-discreto--icone .icone {
    width: 1rem;
    height: 1rem;
}

/* Botão secundário sobre o verde profundo do bloco final */
.botao--contorno-claro {
    border-color: var(--contorno-claro);
    background: transparent;
    color: var(--sobre-verde);
}

.botao--contorno-claro:hover {
    background: var(--contorno-claro-hover);
}

.botao:disabled,
.botao[aria-disabled='true'] {
    opacity: 0.72;
    cursor: progress;
}

.secao--sem-topo {
    padding-top: 0;
}

/* Números que mudam: sempre alinhados */
.extrato-total,
.extrato-valor,
.resumo-lista dd,
.kpi-valor,
.divisao-legenda dd {
    font-variant-numeric: tabular-nums;
}

/* =============================================================== AFILIADOS */

/* ------------------------------------------------------ hero: extrato */

.extrato {
    width: 100%;
    max-width: 22rem;
    overflow: hidden;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-card);
    background: var(--superficie);
    box-shadow: var(--sombra-elevada);
}

.extrato-cabeca {
    position: relative;
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid var(--verde-borda);
    background: var(--verde-fundo);
    isolation: isolate;
}

.extrato-guilhoche {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    color: var(--verde-guilhoche);
    -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000);
    mask-image: linear-gradient(90deg, transparent 35%, #000);
}

.extrato-rotulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-size: var(--t-12);
    font-weight: 700;
    color: var(--texto-2);
}

.extrato-total {
    margin-top: 0.25rem;
    font-family: var(--fonte-display);
    font-size: var(--t-40);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.035em;
    color: var(--verde-forte);
}

.extrato-nota {
    font-size: var(--t-12);
    font-weight: 600;
    color: var(--texto-3);
}

.extrato-lista {
    padding: 0.5rem 1.25rem;
}

.extrato-linha {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-block: 0.75rem;
}

.extrato-linha + .extrato-linha {
    border-top: 1px solid var(--borda);
}

.extrato-icone {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--verde-fundo);
    color: var(--verde-forte);
}

.extrato-icone .icone {
    width: 1rem;
    height: 1rem;
}

.extrato-desc {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    line-height: 1.35;
}

.extrato-desc strong {
    font-size: var(--t-14);
}

.extrato-desc span {
    overflow: hidden;
    font-size: var(--t-12);
    color: var(--texto-3);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.extrato-valor {
    font-family: var(--fonte-display);
    font-size: var(--t-14);
    font-weight: 700;
    color: var(--verde-forte);
    white-space: nowrap;
}

.extrato-linha--pix .extrato-icone {
    background: var(--ouro-fundo);
    color: var(--ouro-texto);
}

.extrato-linha--pix .extrato-valor {
    color: var(--texto);
}

.flutuante--link {
    flex-direction: column;
    gap: 0.5rem;
}

.link-demo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    border: 1px dashed var(--verde-borda);
    border-radius: var(--raio-controle);
    background: var(--verde-fundo);
    font-size: var(--t-14);
    font-weight: 700;
    color: var(--verde-forte);
}

.link-demo span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.link-demo .icone {
    width: 1rem;
    height: 1rem;
}

@media (max-width: 559px) {
    .flutuante--link {
        position: relative;
        margin-top: -1.5rem;
    }
}

@media (min-width: 560px) and (max-width: 1023px) {
    .hero-visual--extrato .extrato,
    .hero-visual--extrato .flutuante--link {
        grid-column: 1 / -1;
        justify-self: center;
    }

    .hero-visual--extrato .flutuante--link {
        max-width: 22rem;
    }
}

@media (min-width: 1024px) {
    .hero-visual--extrato {
        height: 29rem;
    }

    .hero-visual--extrato .extrato {
        position: absolute;
        top: 0;
        left: 0;
    }

    .hero-visual--extrato .flutuante--link {
        bottom: 0;
        width: 19rem;
    }
}

/* -------------------------------------------------- faixa de números */

.resumo {
    padding-block: 1.5rem;
    border-block: 1px solid var(--borda);
    background: var(--superficie);
}

.resumo-lista {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1rem;
}

.resumo-lista div {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 0.25rem;
}

.resumo-lista dt {
    font-size: var(--t-14);
    font-weight: 600;
    color: var(--texto-3);
}

.resumo-lista dd {
    font-family: var(--fonte-display);
    font-size: var(--t-24);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    color: var(--verde-forte);
}

@media (min-width: 880px) {
    .resumo-lista {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 0;
    }

    .resumo-lista div {
        padding-inline: 1.5rem;
    }

    .resumo-lista div:first-child {
        padding-left: 0;
    }

    .resumo-lista div + div {
        border-left: 1px solid var(--borda);
    }

    .resumo-lista dd {
        font-size: var(--t-32);
    }
}

/* ------------------------------------------------ trilha (como funciona) */

.trilha {
    display: grid;
    gap: 2rem;
}

/* Celular: linha do tempo vertical, marco à esquerda */
.trilha-passo {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-left: 3.5rem;
}

.trilha-marco {
    position: absolute;
    top: 0;
    left: 0;
}

.trilha-passo:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 3rem;
    bottom: -1.5rem;
    left: 1.25rem;
    border-left: 1px dashed var(--borda-forte);
}

.trilha .passo-numero {
    line-height: 2.5rem;
}

.trilha .passo-titulo {
    margin-top: -0.5rem;
}

/* O último passo (PIX) ganha o dourado do ganho */
.trilha-passo:last-child .icone-caixa {
    border-color: var(--ouro-borda);
    background: var(--ouro-fundo);
    color: var(--ouro-texto);
}

@media (min-width: 1024px) {
    .trilha {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 1.5rem;
    }

    .trilha-passo {
        padding-left: 0;
    }

    .trilha-marco {
        position: static;
        margin-bottom: 0.5rem;
    }

    .trilha-passo:not(:last-child)::after {
        top: 1.25rem;
        right: -1.5rem;
        bottom: auto;
        left: 3.25rem;
        border-top: 1px dashed var(--borda-forte);
        border-left: 0;
    }

    .trilha .passo-numero {
        line-height: 1.5;
    }

    .trilha .passo-titulo {
        margin-top: 0;
    }
}

/* ---------------------------------------------------------- simulação */

/* Rótulo longo: no celular o campo desce para a linha de baixo em vez de espremer o texto */
[data-simulador] .campo-cabeca {
    flex-wrap: wrap;
}

[data-simulador] .campo-cabeca label {
    flex: 1 1 12rem;
}

.atalhos {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.atalho {
    min-height: 2.5rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-pilula);
    background: var(--superficie);
    font-size: var(--t-14);
    font-weight: 600;
    color: var(--texto-2);
    cursor: pointer;
    transition: border-color var(--transicao), background-color var(--transicao), color var(--transicao);
}

.atalho:hover {
    border-color: var(--verde-borda);
    color: var(--verde-forte);
}

.atalho[aria-pressed='true'] {
    border-color: var(--verde);
    background: var(--verde-fundo);
    color: var(--verde-forte);
}

.sim-fixos {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--borda-forte);
}

.sim-fixos div {
    display: flex;
    flex-direction: column-reverse;
    justify-content: flex-end;
}

.sim-fixos dt {
    font-size: var(--t-12);
    font-weight: 600;
    color: var(--texto-3);
}

.sim-fixos dd {
    font-family: var(--fonte-display);
    font-size: var(--t-20);
    font-weight: 700;
}

/* Carteira: uma moeda por cliente ativo (até um limite; o resto vira "+N") */
.carteira-visual {
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 0.375rem;
    min-height: 2.75rem;
}

.carteira-mais {
    display: inline-flex;
    align-items: center;
    height: 1.25rem;
    padding-inline: 0.5rem;
    border-radius: var(--raio-pilula);
    background: var(--ouro-fundo);
    font-size: var(--t-12);
    font-weight: 700;
    color: var(--ouro-texto);
}

/* ------------------------------------------------ divisão da mensalidade */

.divisao {
    display: flex;
    height: 0.75rem;
    overflow: hidden;
    border-radius: var(--raio-pilula);
    background: var(--barra);
}

.divisao-sua {
    width: var(--parte, 20%);
    background: linear-gradient(90deg, var(--ouro-sombra), var(--ouro));
}

.divisao-legenda {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: -0.5rem;
}

.divisao-legenda div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}

.divisao-legenda dt {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--t-14);
    font-weight: 600;
    color: var(--texto-2);
}

.divisao-legenda dd {
    font-family: var(--fonte-display);
    font-size: var(--t-20);
    font-weight: 700;
}

.divisao-legenda div:first-child dd {
    color: var(--ouro-texto);
}

.divisao-legenda dd span {
    font-family: var(--fonte-texto);
    font-size: var(--t-14);
    font-weight: 600;
    color: var(--texto-3);
}

.divisao-ponto {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 50%;
    background: var(--barra);
}

.divisao-ponto--sua {
    background: var(--ouro);
}

/* ------------------------------------------------------- para quem é */

.publicos {
    display: grid;
    gap: 1rem;
}

.publicos .bento-item {
    height: 100%;
}

@media (min-width: 720px) {
    .publicos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .publicos {
        gap: 1.5rem;
    }
}

/* ------------------------------------------------------------- painel */

.painel-grade {
    display: grid;
    gap: 3rem;
    align-items: center;
}

.painel-lista {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.painel-lista li {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.painel-lista li > span:last-child {
    display: flex;
    flex-direction: column;
    line-height: 1.4;
}

.painel-lista strong {
    font-weight: 700;
}

.painel-lista li > span:last-child span {
    font-size: var(--t-14);
    color: var(--texto-3);
}

.painel-demo {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.painel-janela {
    overflow: hidden;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-card);
    background: var(--fundo);
    box-shadow: var(--sombra-elevada);
}

.painel-janela-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--borda);
    background: var(--superficie);
}

.painel-janela-titulo {
    font-family: var(--fonte-display);
    font-size: var(--t-14);
    font-weight: 700;
}

.painel-kpis {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
    padding: 1rem;
}

.kpi {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    padding: 1rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio-controle);
    background: var(--superficie);
}

.kpi-rotulo {
    font-size: var(--t-12);
    font-weight: 600;
    color: var(--texto-3);
}

.kpi-valor {
    font-family: var(--fonte-display);
    font-size: var(--t-24);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    overflow-wrap: anywhere;
}

.kpi-delta {
    font-size: var(--t-12);
    font-weight: 700;
    color: var(--sucesso);
}

.kpi-delta--neutro {
    color: var(--texto-3);
}

.kpi--destaque {
    border-color: var(--verde-borda);
    background: var(--verde-fundo);
}

.kpi--destaque .kpi-valor {
    color: var(--verde-forte);
}

.painel-link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 1rem 1rem;
    padding: 0.5rem 0.5rem 0.5rem 0.75rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio-controle);
    background: var(--superficie);
    font-size: var(--t-14);
    font-weight: 600;
    color: var(--texto-2);
}

.painel-link .icone {
    width: 1rem;
    height: 1rem;
    color: var(--verde);
}

.painel-link > span:first-of-type {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.painel-copiar {
    padding: 0.25rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--verde);
    font-size: var(--t-12);
    font-weight: 700;
    color: var(--sobre-verde);
}

.painel-legenda {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--t-12);
    color: var(--texto-3);
}

@media (min-width: 960px) {
    .painel-grade {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 4rem;
    }

    .painel-grade .secao-cabeca {
        margin-bottom: 2.5rem;
    }
}

/* ================================================================ ASSINAR */

.checkout {
    position: relative;
    padding-block: 2rem 4rem;
    overflow: hidden;
    isolation: isolate;
}

.checkout-guilhoche {
    position: absolute;
    inset: 0 0 auto;
    z-index: -1;
    width: 100%;
    height: 14rem;
    color: var(--verde-guilhoche);
    -webkit-mask-image: linear-gradient(transparent, #000 30%, transparent);
    mask-image: linear-gradient(transparent, #000 30%, transparent);
}

/* Etapas: 1 dados → 2 Mercado Pago → 3 acesso */
.etapas {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
}

.etapa {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--t-14);
    font-weight: 600;
    color: var(--texto-3);
}

.etapa:not(:last-child)::after {
    content: '';
    width: 1.5rem;
    margin-left: 0.25rem;
    border-top: 1px solid var(--borda-forte);
}

.etapa-numero {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 1.75rem;
    height: 1.75rem;
    border: 1px solid var(--borda-forte);
    border-radius: 50%;
    background: var(--superficie);
    font-family: var(--fonte-display);
    font-size: var(--t-12);
    font-weight: 700;
}

.etapa-numero .icone {
    width: 0.875rem;
    height: 0.875rem;
    stroke-width: 2.5;
}

.etapa--atual {
    color: var(--texto);
}

.etapa--atual .etapa-numero {
    border-color: var(--verde);
    background: var(--verde);
    color: var(--sobre-verde);
}

.etapa--feita .etapa-numero {
    border-color: var(--verde-borda);
    background: var(--verde-fundo);
    color: var(--verde-forte);
}

/* Celular: só a etapa atual mostra o nome (as outras ficam para leitores de tela) */
@media (max-width: 639px) {
    .etapa:not(.etapa--atual) .etapa-nome {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
}

.checkout-grade {
    display: grid;
    gap: 2.5rem;
}

.checkout-cabeca {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.checkout-titulo {
    font-family: var(--fonte-display);
    font-size: var(--t-32);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

.checkout-sub {
    max-width: 38rem;
    color: var(--texto-2);
}

.indicado {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--t-14);
    color: var(--texto-3);
}

.indicado .icone {
    width: 1rem;
    height: 1rem;
    color: var(--ouro-texto);
}

.indicado strong {
    font-weight: 700;
    color: var(--texto-2);
}

@media (min-width: 640px) {
    .checkout {
        padding-block: 3rem 5rem;
    }

    .checkout-titulo {
        font-size: var(--t-40);
    }

    .checkout-sub {
        font-size: var(--t-20);
    }
}

@media (min-width: 960px) {
    .checkout-grade {
        grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
        gap: 3rem;
        align-items: start;
    }

    .checkout-lado {
        position: sticky;
        top: 6rem;
        margin-top: 0.5rem;
    }
}

/* ------------------------------------------------------------ formulário */

.formulario {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    box-shadow: var(--sombra-elevada);
}

.formulario-avisos {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.aviso {
    display: flex;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid;
    border-radius: var(--raio-controle);
    font-size: var(--t-14);
}

.aviso .icone {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.0625rem;
}

.aviso--erro {
    border-color: var(--erro-borda);
    background: var(--erro-fundo);
    color: var(--texto);
}

.aviso--erro .icone {
    color: var(--erro);
}

.aviso--alerta {
    border-color: var(--ouro-borda);
    background: var(--ouro-fundo);
    color: var(--texto);
}

.aviso--alerta .icone {
    color: var(--ouro-texto);
}

.aviso-titulo {
    font-weight: 700;
}

.formulario-campos {
    display: grid;
    gap: 1.25rem;
}

.entrada {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.entrada > label {
    font-size: var(--t-14);
    font-weight: 700;
}

.entrada input:not([type='checkbox']) {
    width: 100%;
    height: 3rem;
    padding-inline: 0.875rem;
    border: 1px solid var(--borda-forte);
    border-radius: var(--raio-controle);
    background: var(--superficie);
    font-size: var(--t-16);
    font-weight: 500;
    transition: border-color var(--transicao), box-shadow var(--transicao);
}

.entrada input::placeholder {
    color: var(--texto-3);
    opacity: 0.7;
}

.entrada input:not([type='checkbox']):hover {
    border-color: var(--verde-borda);
}

.entrada input:not([type='checkbox']):focus {
    outline: none;
    border-color: var(--verde);
    box-shadow: 0 0 0 3px var(--verde-borda);
}

.entrada-dica {
    font-size: var(--t-12);
    color: var(--texto-3);
}

.entrada-erro {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    font-size: var(--t-14);
    font-weight: 600;
    color: var(--erro);
}

.entrada-erro .icone {
    width: 1rem;
    height: 1rem;
    margin-top: 0.1875rem;
}

.entrada--erro input:not([type='checkbox']),
.entrada--erro input:not([type='checkbox']):hover {
    border-color: var(--erro);
}

.entrada--erro input:not([type='checkbox']):focus {
    border-color: var(--erro);
    box-shadow: 0 0 0 3px var(--erro-anel);
}

/* Com erro, a dica cede lugar à mensagem de erro */
.entrada--erro .entrada-dica {
    display: none;
}

.caixa {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border: 1px solid var(--borda);
    border-radius: var(--raio-controle);
    background: var(--fundo);
}

.entrada--erro .caixa {
    border-color: var(--erro-borda);
    background: var(--erro-fundo);
}

.caixa input {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.125rem;
    accent-color: var(--verde);
    cursor: pointer;
}

.caixa label {
    font-size: var(--t-14);
    color: var(--texto-2);
    cursor: pointer;
}

.formulario-rodape {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.garantias {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.garantias li {
    display: flex;
    gap: 0.75rem;
    font-size: var(--t-14);
    color: var(--texto-2);
}

.garantias .icone {
    width: 1.125rem;
    height: 1.125rem;
    margin-top: 0.125rem;
    color: var(--verde);
}

@media (min-width: 640px) {
    .formulario {
        padding: 2rem;
    }

    .formulario-campos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.5rem 1rem;
    }

    .entrada--inteira {
        grid-column: 1 / -1;
    }
}

/* Resumo lateral: detalhes da cobrança */
.resumo-cobranca {
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--borda);
}

.resumo-cobranca div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding-block: 0.75rem;
    border-bottom: 1px solid var(--borda);
    font-size: var(--t-14);
}

.resumo-cobranca dt {
    color: var(--texto-3);
}

.resumo-cobranca dd {
    font-weight: 700;
    text-align: right;
}

.checkout-lado .plano-nome {
    font-family: var(--fonte-texto);
}

/* ----------------------------------------------------------------- retorno */

.retorno {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    max-width: 44rem;
    padding: 1.5rem;
    box-shadow: var(--sombra-elevada);
}

.retorno-cabeca {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
}

.retorno-selo {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.5rem;
    border: 1px solid var(--verde-borda);
    border-radius: 50%;
    background: var(--verde-fundo);
    color: var(--verde-forte);
}

.retorno-selo .icone {
    width: 1.75rem;
    height: 1.75rem;
}

.proximos {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--borda);
}

.proximo {
    display: flex;
    gap: 1rem;
}

.proximo-titulo {
    font-family: var(--fonte-display);
    font-size: var(--t-16);
    font-weight: 700;
    line-height: 1.4;
}

.proximo-texto {
    margin-top: 0.25rem;
    font-size: var(--t-14);
    color: var(--texto-2);
}

.retorno-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.retorno-nota {
    margin-top: 0;
}

@media (max-width: 479px) {
    .retorno-acoes .botao {
        flex: 1 1 100%;
    }
}

@media (min-width: 640px) {
    .retorno {
        padding: 2.5rem;
    }

    .proximo-titulo {
        font-size: var(--t-20);
    }
}

/* ---------------------------------------------------------- acessibilidade */

@media (prefers-reduced-motion: reduce) {
    .atalho,
    .link-texto,
    .entrada input {
        transition: none;
    }
}

@media (forced-colors: active) {
    .divisao-sua,
    .divisao-ponto {
        forced-color-adjust: none;
    }
}

/* Caixas de ícone ao lado de texto não encolhem em telas estreitas */
.proximo .icone-caixa,
.painel-lista .icone-caixa {
    flex-shrink: 0;
}