:root {
    --tinta: #0f172a;
    --tinta-suave: #475569;
    --fundo: #f8fafc;
    --borda: #e2e8f0;
    --marca: #2563eb;
    --marca-escura: #1d4ed8;
    --bom: #16a34a;
    --erro: #dc2626;
    --atencao: #b45309;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: system-ui, "Segoe UI", Roboto, sans-serif;
    color: var(--tinta);
    background: var(--fundo);
    line-height: 1.55;
}

a {
    color: var(--marca);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    background: #fff;
    border-bottom: 1px solid var(--borda);
}

.marca {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    font-size: 18px;
    color: var(--tinta);
}

.ponto {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--erro);
    box-shadow: 0 0 0 3px rgba(220, 38, 38, .18);
}

.topo nav {
    display: flex;
    align-items: center;
    gap: 16px;
}

main {
    max-width: 1040px;
    margin: 0 auto;
    padding: 32px 24px 64px;
}

h1 {
    font-size: 30px;
    margin: 0 0 12px;
    letter-spacing: -.01em;
}

h2 {
    font-size: 20px;
    margin: 0 0 12px;
}

h3 {
    font-size: 17px;
    margin: 0 0 8px;
}

.apoio {
    color: var(--tinta-suave);
}

.opcional {
    color: var(--tinta-suave);
    font-weight: 400;
}

.botao {
    display: inline-block;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 10px;
    background: var(--marca);
    color: #fff;
    font: inherit;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
}

.botao:hover {
    background: var(--marca-escura);
    text-decoration: none;
}

.botao.vazado {
    background: #fff;
    color: var(--tinta);
    border-color: var(--borda);
}

.botao.vazado:hover {
    background: #f1f5f9;
}

.botao.perigo {
    background: var(--erro);
}

.botao.perigo:hover {
    background: #b91c1c;
}

.botao.grande {
    padding: 13px 24px;
    font-size: 16px;
    width: 100%;
}

.ligacao {
    background: none;
    border: none;
    padding: 0;
    color: var(--marca);
    font: inherit;
    cursor: pointer;
}

.capa {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    align-items: center;
    gap: 40px;
    padding: 40px 0 32px;
}

.capa h1 {
    font-size: 44px;
    line-height: 1.1;
    margin: 0 0 18px;
}

.capa p {
    margin: 0 0 24px;
    color: var(--tinta-suave);
    font-size: 17px;
}

.capa .apoio {
    font-size: 14px;
    margin: 16px 0 0;
}

.faixa-beneficios {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
}

.faixa-beneficios li {
    padding: 5px 11px;
    border: 1px solid var(--borda);
    border-radius: 999px;
    background: #fff;
    color: var(--tinta);
    font-size: 13px;
    font-weight: 600;
}

.selo {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--marca);
    font-size: 13px;
    font-weight: 600;
    margin: 0 0 16px !important;
}

.ilustracao {
    width: 100%;
    height: auto;
}

.acoes {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.passos {
    margin: 40px 0;
}

.passos h2,
.perguntas h2 {
    font-size: 26px;
    text-align: center;
    margin-bottom: 24px;
}

.passos ol {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: passo;
}

.passos li {
    counter-increment: passo;
    padding-top: 44px;
    position: relative;
}

.passos li::before {
    content: counter(passo);
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--marca);
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    display: grid;
    place-items: center;
}

.passos p {
    margin: 0;
    color: var(--tinta-suave);
}

.centro {
    text-align: center;
    max-width: 60ch;
    margin: 0 auto 24px;
}

.perguntas {
    margin: 56px 0 0;
}

.perguntas details {
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: #fff;
    padding: 4px 18px;
    margin-bottom: 10px;
}

.perguntas summary {
    cursor: pointer;
    font-weight: 600;
    padding: 14px 0;
    list-style: none;
}

.perguntas summary::-webkit-details-marker {
    display: none;
}

.perguntas summary::after {
    content: "+";
    float: right;
    color: var(--tinta-suave);
    font-weight: 400;
    font-size: 20px;
    line-height: 1;
}

.perguntas details[open] summary::after {
    content: "−";
}

.perguntas p {
    margin: 0 0 16px;
    color: var(--tinta-suave);
}

.acoes .botao.grande {
    width: auto;
}

.colunas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
    gap: 16px;
    margin: 48px 0;
}

.colunas article {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 14px;
    padding: 20px;
}

.colunas p {
    margin: 0;
    color: var(--tinta-suave);
}

.beneficios {
    margin: 24px 0 8px;
}

.beneficios h2,
.diferenca h2,
.privacidade h2 {
    font-size: 26px;
    text-align: center;
    margin: 0 0 12px;
}

.beneficios .colunas {
    margin-top: 8px;
}

.slogan {
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 10px;
}

.comparativo {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
    margin: 28px 0 0;
}

.comparativo article {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 14px;
    padding: 22px 24px;
}

.comparativo .melhor {
    border-color: var(--marca);
    box-shadow: 0 8px 24px rgba(37, 99, 235, .12);
}

.comparativo ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.comparativo li {
    position: relative;
    padding: 6px 0 6px 24px;
    color: var(--tinta-suave);
}

.comparativo li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--bom);
    font-weight: 700;
}

.comparativo .lista-menos li::before {
    content: "–";
    color: var(--tinta-suave);
    font-weight: 600;
}

.privacidade {
    margin: 48px 0;
    padding: 36px 28px;
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 16px;
    text-align: center;
}

.privacidade p {
    max-width: 62ch;
    margin: 0 auto 16px;
    color: var(--tinta-suave);
}

.privacidade .chamada {
    margin: 0 auto;
    color: var(--tinta);
    font-weight: 600;
}

.selo-plano {
    display: inline-block;
    margin: 0 0 10px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #eff6ff;
    color: var(--marca);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.plano-headline {
    margin: 0 0 4px;
    font-weight: 600;
}

.economia {
    margin: 0;
    color: var(--bom);
    font-size: 14px;
    font-weight: 600;
}

.equivalente {
    margin: 2px 0 0;
    color: var(--tinta-suave);
    font-size: 13px;
}

.planos h2 {
    text-align: center;
    font-size: 26px;
    margin-bottom: 20px;
}

.grade {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    align-items: start;
}

.plano {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 14px;
    padding: 24px;
}

.plano.destaque {
    border-color: var(--marca);
    box-shadow: 0 8px 24px rgba(37, 99, 235, .12);
}

.preco {
    font-size: 28px;
    font-weight: 700;
    margin: 4px 0 8px;
}

.preco small {
    font-size: 13px;
    font-weight: 500;
    color: var(--tinta-suave);
}

.descricao {
    color: var(--tinta-suave);
    margin-top: 0;
}

.plano ul {
    list-style: none;
    padding: 0;
    margin: 16px 0;
}

.plano li {
    padding: 6px 0 6px 24px;
    position: relative;
    color: var(--tinta-suave);
}

.plano li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--bom);
    font-weight: 700;
}

.teste {
    font-size: 13px;
    color: var(--atencao);
}

.cartao {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 16px;
    padding: 32px;
    max-width: 460px;
    margin: 24px auto;
}

.cartao.largo {
    max-width: 720px;
}

/* Encerrar conta fica fechado por padrão: é irreversível e não deve estar a um
   clique de distância de quem só veio ver a fatura. */
.painel.perigo > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: 18px;
    color: var(--erro);
}

.painel.perigo[open] > summary {
    margin-bottom: 12px;
}

.conversa {
    display: grid;
    gap: 12px;
    margin: 16px 0 24px;
}

.fala {
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 14px 16px;
    background: #fff;
}

.fala.suporte {
    border-color: var(--marca);
    background: #eff6ff;
}

.fala p {
    margin: 0;
    color: var(--tinta);
}

.fala-quem {
    font-size: 12px;
    font-weight: 600;
    color: var(--tinta-suave) !important;
    margin-bottom: 6px !important;
}

.lista-chamados {
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
}

.lista-chamados li {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 10px 0;
    border-bottom: 1px solid var(--borda);
}

.lista-chamados li:last-child {
    border-bottom: none;
}

.duvida {
    border-bottom: 1px solid var(--borda);
    padding: 4px 0;
}

.duvida:last-child {
    border-bottom: none;
}

.duvida summary {
    cursor: pointer;
    font-weight: 600;
    padding: 12px 0;
}

.duvida p {
    margin: 0 0 14px;
    color: var(--tinta-suave);
}

.texto-legal h2 {
    font-size: 18px;
    margin: 28px 0 8px;
}

.texto-legal p,
.texto-legal li {
    color: var(--tinta-suave);
}

.texto-legal ul {
    padding-left: 20px;
}

.texto-legal li {
    margin-bottom: 6px;
}

.formulario {
    display: grid;
    gap: 16px;
    margin-top: 20px;
}

.formulario label {
    display: grid;
    gap: 6px;
    font-weight: 600;
    font-size: 14px;
}

.formulario input,
.formulario select,
.formulario textarea {
    padding: 11px 12px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    font: inherit;
    font-weight: 400;
    background: #fff;
}

.formulario input:focus,
.formulario select:focus {
    outline: 2px solid var(--marca);
    outline-offset: 1px;
    border-color: transparent;
}

.formulario small {
    font-weight: 400;
    color: var(--tinta-suave);
}

.aviso {
    padding: 12px 14px;
    border-radius: 10px;
    margin: 16px 0;
    font-size: 14px;
}

.aviso.erro {
    background: #fef2f2;
    color: var(--erro);
}

.aviso.bom {
    background: #f0fdf4;
    color: var(--bom);
}

.aviso.atencao {
    background: #fffbeb;
    color: var(--atencao);
}

.painel {
    border-top: 1px solid var(--borda);
    padding-top: 20px;
    margin-top: 24px;
}

.cartao-numeros {
    display: grid;
    gap: 12px;
}

.cartao-numeros div {
    background: #fff;
    border: 1px solid var(--borda);
    border-radius: 14px;
    padding: 20px 22px;
    display: flex;
    align-items: baseline;
    gap: 14px;
}

.cartao-numeros strong {
    font-size: 34px;
    color: var(--marca);
    line-height: 1;
}

.cartao-numeros span {
    color: var(--tinta-suave);
    font-size: 14px;
}

.conexoes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin: 16px 0 18px;
}

.conexao {
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 16px 18px;
}

.conexao header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.conexao h3 {
    margin: 0;
    font-size: 16px;
}

.conexao .apoio {
    font-size: 13px;
    margin: 0 0 10px;
}

.conexao .aviso {
    font-size: 13px;
    margin: 10px 0 0;
}

.conexao .dados {
    margin: 12px 0 0;
}

.conexao .dados dd {
    font-size: 14px;
    word-break: break-word;
}

.sinal {
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

.sinal::before {
    content: "●";
    margin-right: 5px;
}

.sinal.bom {
    background: #ecfdf5;
    color: #047857;
}

.sinal.atencao {
    background: #fffbeb;
    color: #b45309;
}

.sinal.ruim {
    background: #fef2f2;
    color: #b91c1c;
}

.sinal.neutro {
    background: var(--fundo);
    color: var(--tinta-suave);
}

.repasse {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}

.qr {
    line-height: 0;
    padding: 10px;
    border: 1px solid var(--borda);
    border-radius: 12px;
    background: #fff;
}

.qr svg {
    display: block;
}

.dados dd.chave {
    font-size: 14px;
    font-weight: 600;
    word-break: break-all;
}

.copiar {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.copiar input {
    flex: 1;
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    font: inherit;
    background: var(--fundo);
}

.copiar .botao {
    white-space: nowrap;
}

.valor-grande {
    font-size: 32px;
    font-weight: 800;
    color: var(--marca);
    margin: 0 0 14px;
    letter-spacing: -.02em;
}

.valor-grande.apagado {
    color: var(--tinta);
}

.destaque-saldo {
    border-color: var(--marca);
    background: #f8fbff;
}

.dados.compactos {
    gap: 6px;
    margin-bottom: 14px;
}

.dados.compactos dd {
    font-size: 15px;
}

.formulario.em-linha {
    display: flex;
    align-items: flex-end;
    gap: 12px;
    flex-wrap: wrap;
}

.formulario.em-linha label {
    flex: 1;
    min-width: 150px;
}

.tabela small.apoio {
    display: block;
    font-size: 12px;
}

.cabecalho-conta {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.cabecalho-conta h1 {
    margin: 0 0 4px;
}

.cabecalho-conta .apoio {
    margin: 0;
    font-size: 14px;
}

.etiqueta {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
}

.etiqueta.ativa {
    background: #eff6ff;
    color: var(--marca);
}

.etiqueta.neutra {
    background: var(--fundo);
    color: var(--tinta-suave);
    border: 1px solid var(--borda);
}

.blocos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
    margin-top: 24px;
}

.bloco {
    border: 1px solid var(--borda);
    border-radius: 14px;
    padding: 20px;
}

.bloco h2 {
    font-size: 16px;
    margin-bottom: 14px;
}

.bloco .botao {
    margin-top: 4px;
}

.bloco .apoio {
    font-size: 14px;
}

.dados {
    display: grid;
    gap: 12px;
    margin: 0 0 18px;
}

.dados dt {
    font-size: 13px;
    color: var(--tinta-suave);
}

.dados dd {
    margin: 2px 0 0;
    font-size: 17px;
    font-weight: 700;
}

.rotulo-lista {
    font-size: 13px;
    color: var(--tinta-suave);
    margin: 16px 0 8px;
}

.lista-ganhos {
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.lista-ganhos li {
    padding-left: 22px;
    position: relative;
    margin-bottom: 8px;
}

.lista-ganhos li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--marca);
    font-weight: 700;
}

.passos-curtos {
    margin: 0 0 14px;
    padding-left: 20px;
    font-size: 14px;
}

.passos-curtos li {
    margin-bottom: 8px;
}

.direita {
    text-align: right;
}

.destaque-plano {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px;
}

.linha {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 12px;
}

.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tabela th,
.tabela td {
    text-align: left;
    padding: 8px 0;
    border-bottom: 1px solid var(--borda);
}

.tabela th {
    color: var(--tinta-suave);
    font-weight: 600;
}

code {
    background: var(--fundo);
    border: 1px solid var(--borda);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 13px;
    word-break: break-all;
}

.painel textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--borda);
    border-radius: 10px;
    background: #fff;
    font-family: ui-monospace, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    resize: vertical;
}

.abas {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 20px 0 4px;
    border-bottom: 1px solid var(--borda);
}

.abas a {
    padding: 10px 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tinta-suave);
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.abas a:hover {
    color: var(--tinta);
}

.abas a.atual {
    color: var(--marca);
    border-bottom-color: var(--marca);
}

.numeros {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 12px;
    margin-top: 24px;
}

.numeros div {
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 16px;
}

.numeros strong {
    display: block;
    font-size: 26px;
    line-height: 1.2;
}

.numeros span {
    font-size: 13px;
    color: var(--tinta-suave);
}

.par {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.recursos {
    border: 1px solid var(--borda);
    border-radius: 12px;
    padding: 12px 16px 16px;
    margin: 4px 0;
}

.recursos legend {
    font-size: 14px;
    font-weight: 600;
    padding: 0 6px;
}

/* A especificidade acompanha a de .formulario label, que também vale aqui e
   traria o layout em grade das demais linhas do formulário. */
.formulario label.marcavel {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 400;
    margin-top: 10px;
}

.formulario label.marcavel input {
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
    accent-color: var(--marca);
}

.rodape {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    max-width: 1040px;
    margin: 0 auto;
    padding: 24px;
    color: var(--tinta-suave);
    font-size: 13px;
    border-top: 1px solid var(--borda);
}

/* ==========================================================================
   Área interna: conta, parceiro, suporte e administração.

   Tudo daqui para baixo depende de `body.app` ou de `.pagina`, e nenhuma
   regra alcança a vitrine. A separação é proposital: a página inicial vende,
   e por isso é centrada e espaçada; o painel é ferramenta de trabalho, e
   pede largura, densidade e hierarquia. Um estilo só para os dois lados
   obrigaria a revisar a vitrine a cada acerto de painel.
   ========================================================================== */

body.app {
    --app-fundo: #f3f6fb;
    --app-borda: #e5eaf2;
    --app-linha: #eef2f7;
    --app-rotulo: #6b7a8d;
    --app-sombra: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 14px -10px rgba(15, 23, 42, .28),
        0 26px 44px -34px rgba(15, 23, 42, .5);
    /* Um clarão azul atrás do cabeçalho, quase imperceptível: dá profundidade
       ao topo sem virar fundo colorido. */
    background: var(--app-fundo)
        radial-gradient(1100px 380px at 50% -180px, rgba(37, 99, 235, .10), rgba(37, 99, 235, 0) 70%)
        no-repeat;
}

body.app ::selection {
    background: #dbeafe;
}

/* Número em coluna alinha quando a tabela atualiza: sem largura fixa de
   dígito, cada linha desloca a anterior. */
body.app .tabela td,
body.app .numeros strong,
body.app .valor-grande,
body.app .dados dd {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ topo */

body.app .topo {
    position: sticky;
    top: 0;
    z-index: 20;
    padding: 12px 28px;
    border-bottom: 1px solid var(--app-borda);
}

body.app .topo nav {
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

body.app .topo nav a {
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 14px;
    font-weight: 600;
    color: var(--tinta-suave);
    transition: background .15s ease, color .15s ease;
}

body.app .topo nav a:hover {
    background: #f1f5f9;
    color: var(--tinta);
    text-decoration: none;
}

body.app .topo nav a.botao {
    color: var(--tinta);
    border-color: var(--app-borda);
}

body.app main {
    max-width: 1280px;
    padding: 28px 28px 72px;
}

body.app .rodape {
    max-width: 1280px;
    border-top-color: var(--app-borda);
}

/* Um anel só para todo o painel: o foco precisa ser visível em botão, link e
   campo, e cada um deles trazia o seu por herança de outra parte da folha. */
body.app a:focus-visible,
body.app .botao:focus-visible,
body.app .ligacao:focus-visible,
body.app summary:focus-visible {
    outline: 2px solid #93c5fd;
    outline-offset: 2px;
    border-radius: 8px;
}

/* -------------------------------------------------------------- a página */

.pagina {
    display: grid;
    gap: 20px;
    align-content: start;
}

/* Conta e suporte não têm tabela larga; esticá-las até a borda só afastaria
   o rótulo do campo. */
.pagina.media {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

/* O título mora num cartão como o resto: solto sobre o fundo, a página começa
   com um texto no vazio e só parece um site; dentro do cartão, começa com a
   barra de um programa. */
.cabecalho-pagina {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 20px 24px;
    background: #fff;
    border: 1px solid var(--app-borda);
    border-radius: 16px;
    box-shadow: var(--app-sombra);
}

.cabecalho-pagina h1 {
    margin: 0 0 2px;
    font-size: 25px;
    letter-spacing: -.025em;
}

.cabecalho-pagina .apoio {
    margin: 0;
    max-width: 72ch;
    font-size: 14px;
}

.identidade {
    display: flex;
    align-items: center;
    gap: 16px;
}

.avatar {
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    flex: none;
    border-radius: 15px;
    background: var(--marca);
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: .02em;
    box-shadow: 0 8px 18px -10px rgba(37, 99, 235, .9);
}

.pagina > .apoio {
    margin: 0;
    max-width: 82ch;
    font-size: 14px;
}

/* ---------------------------------------------------------------- cartões */

.pagina .painel,
.pagina .bloco,
.pagina > form.formulario {
    margin: 0;
    padding: 22px 24px;
    background: #fff;
    border: 1px solid var(--app-borda);
    border-top: 1px solid var(--app-borda);
    border-radius: 16px;
    box-shadow: var(--app-sombra);
}

.pagina .painel > h2,
.pagina .bloco > h2,
.pagina > form.formulario .painel > h2 {
    margin: 0 0 14px;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.pagina .painel > h2 + .apoio,
.pagina .bloco > h2 + .apoio {
    margin-top: -8px;
}

.pagina .painel > .apoio,
.pagina .bloco > .apoio {
    font-size: 14px;
}

/* Cartão dentro de cartão vira seção: a moldura dupla confunde onde um bloco
   termina e o outro começa. */
.pagina .painel .painel,
.pagina > form.formulario .painel {
    margin: 4px 0 0;
    padding: 20px 0 0;
    background: none;
    border: 0;
    border-top: 1px solid var(--app-linha);
    border-radius: 0;
    box-shadow: none;
}

.pagina .blocos {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    margin: 0;
}

.pagina .bloco .botao {
    margin-top: 8px;
}

/* Dois dados curtos lado a lado dentro do cartão; empilhados sobrava faixa
   branca à direita e o cartão vizinho ficava mais alto sem motivo. */
.pagina .bloco .dados {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
}

.pagina .painel > .linha:first-child,
.pagina .painel > form.linha:first-child {
    margin-top: 0;
}

.pagina .linha.busca input {
    flex: 1;
    min-width: 220px;
}

/* --------------------------------------------------------- cartão de número */

.pagina .numeros {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 16px;
    margin: 0;
}

.pagina .numeros div {
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--app-borda);
    border-radius: 16px;
    box-shadow: var(--app-sombra);
    transition: transform .18s ease, box-shadow .18s ease;
}

.pagina .numeros div:hover {
    transform: translateY(-2px);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 20px -12px rgba(15, 23, 42, .35),
        0 30px 50px -34px rgba(15, 23, 42, .6);
}

.marca-icone,
.pagina .numeros .marca-icone {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    margin-bottom: 14px;
    border-radius: 12px;
    background: #eff6ff;
    color: var(--marca);
}

.marca-icone svg {
    width: 20px;
    height: 20px;
}

.pagina .numeros strong {
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -.025em;
    line-height: 1.15;
}

/* O rótulo é o outro span do cartão; sem a exceção, esta regra desmancharia o
   quadrado do ícone. */
.pagina .numeros span:not(.marca-icone) {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.4;
}

.pagina .valor-grande {
    font-size: 34px;
    margin-bottom: 16px;
}

.pagina .bloco.destaque-saldo {
    background: #f7faff;
    border-color: #c7dcfb;
    box-shadow: 0 1px 2px rgba(37, 99, 235, .06), 0 14px 32px -22px rgba(37, 99, 235, .75);
}

/* ---------------------------------------------------------------- tabelas */

.pagina .painel:has(> .tabela) {
    overflow-x: auto;
}

.pagina .tabela th {
    padding: 0 12px 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--app-rotulo);
    border-bottom: 1px solid var(--app-borda);
}

.pagina .tabela td {
    padding: 12px;
    border-bottom: 1px solid var(--app-linha);
    vertical-align: top;
    transition: background .12s ease;
}

.pagina .tabela th:first-child,
.pagina .tabela td:first-child {
    padding-left: 0;
}

.pagina .tabela th:last-child,
.pagina .tabela td:last-child {
    padding-right: 0;
}

.pagina .tabela tr:last-child td {
    border-bottom: 0;
    padding-bottom: 0;
}

.pagina .tabela tr:hover td {
    background: #f8fafc;
}

/* ------------------------------------------------------------------ abas */

.pagina .abas {
    margin: 0;
    padding: 5px;
    gap: 2px;
    background: #fff;
    border: 1px solid var(--app-borda);
    border-bottom: 1px solid var(--app-borda);
    border-radius: 12px;
    box-shadow: var(--app-sombra);
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
}

.pagina .abas::-webkit-scrollbar {
    display: none;
}

.pagina .abas a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    padding: 9px 14px;
    border: 0;
    border-radius: 9px;
    white-space: nowrap;
    transition: background .15s ease, color .15s ease;
}

.pagina .abas svg {
    width: 16px;
    height: 16px;
    opacity: .9;
}

.pagina .abas a:hover {
    background: #f1f5f9;
    color: var(--tinta);
    text-decoration: none;
}

.pagina .abas a.atual {
    background: #eff6ff;
    color: var(--marca);
}

/* Filtro dentro do conteúdo: mesma gramática, sem competir com a navegação
   principal logo acima. */
.pagina .abas.leves {
    padding: 0;
    background: none;
    border: 0;
    box-shadow: none;
}

.pagina .abas.leves a {
    background: #fff;
    border: 1px solid var(--app-borda);
}

.pagina .abas.leves a.atual {
    background: #eff6ff;
    border-color: #bfdbfe;
}

/* --------------------------------------------------------------- botões */

body.app .botao {
    padding: 10px 16px;
    font-size: 14px;
    border-radius: 10px;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

body.app .botao.grande {
    padding: 12px 20px;
    font-size: 15px;
}

/* Na coluna estreita do login o botão largo guia o olho; num cartão de painel
   ele vira uma faixa azul de ponta a ponta e rouba a cena do conteúdo. O
   `justify-self` é o que importa: dentro do formulário em grade o botão se
   estica sozinho, mesmo sem largura declarada. */
.pagina .botao.grande,
.pagina .formulario > .botao,
.pagina .formulario > button {
    width: auto;
    justify-self: start;
}

body.app .botao.vazado {
    border-color: #dfe6f0;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}

body.app .botao.vazado:hover {
    background: #f1f5f9;
    border-color: #ccd7e6;
}

body.app .botao[disabled] {
    opacity: .55;
    cursor: default;
    box-shadow: none;
}

body.app .botao[disabled]:hover {
    background: #fff;
}

body.app .ligacao {
    font-weight: 600;
}

body.app .ligacao:hover {
    text-decoration: underline;
}

/* --------------------------------------------------------------- etiquetas */

body.app .etiqueta {
    padding: 6px 13px;
    border: 1px solid transparent;
    font-size: 12px;
    letter-spacing: .02em;
}

body.app .etiqueta.ativa {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: var(--marca-escura);
}

body.app .etiqueta.neutra {
    background: #f8fafc;
    border-color: var(--app-borda);
}

body.app .sinal {
    border: 1px solid transparent;
    font-size: 12px;
    font-weight: 600;
}

body.app .sinal.bom {
    border-color: #a7f3d0;
}

body.app .sinal.atencao {
    border-color: #fde68a;
}

body.app .sinal.ruim {
    border-color: #fecaca;
}

body.app .sinal.neutro {
    background: #f8fafc;
    border-color: var(--app-borda);
}

/* --------------------------------------------------------------- avisos */

body.app .aviso {
    border: 1px solid transparent;
    border-radius: 12px;
}

body.app .aviso.erro {
    border-color: #fecaca;
}

body.app .aviso.bom {
    border-color: #bbf7d0;
}

body.app .aviso.atencao {
    border-color: #fde68a;
}

.pagina > .aviso {
    margin: 0;
}

/* ------------------------------------------------------------ formulários */

body.app .formulario label {
    font-size: 13px;
    color: #334155;
}

/* Em grade, cada pedaço do rótulo vira uma linha, e "Celular (opcional)"
   descia o campo em relação ao vizinho. Em bloco, a observação fica ao lado
   do nome do campo e os dois campos do par voltam a se alinhar. */
body.app .formulario label:not(.marcavel) {
    display: block;
}

body.app .formulario label:not(.marcavel) > input,
body.app .formulario label:not(.marcavel) > select,
body.app .formulario label:not(.marcavel) > textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
}

body.app .formulario label:not(.marcavel) > small {
    display: block;
    margin-top: 6px;
}

body.app .formulario input,
body.app .formulario select,
body.app .formulario textarea,
body.app .painel textarea,
body.app .copiar input,
body.app .linha input {
    border-color: #dfe6f0;
    border-radius: 10px;
    transition: border-color .15s ease, box-shadow .15s ease;
}

body.app .formulario input:focus,
body.app .formulario select:focus,
body.app .formulario textarea:focus,
body.app .copiar input:focus,
body.app .linha input:focus {
    outline: none;
    border-color: var(--marca);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .14);
}

body.app .recursos {
    border-color: var(--app-borda);
    border-radius: 12px;
    background: #fbfcfe;
}

/* Sete itens numa coluna só empurravam o botão de salvar para fora da tela. */
.pagina .recursos {
    columns: 2;
    column-gap: 28px;
}

.pagina .recursos legend {
    column-span: all;
}

.pagina .formulario label.marcavel {
    break-inside: avoid;
}

body.app .linha input {
    padding: 10px 12px;
    font: inherit;
    background: #fff;
}

/* -------------------------------------------------------- listas e dados */

.pagina .dados dt {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--app-rotulo);
}

.pagina .dados dd {
    font-size: 16px;
}

.pagina .lista-chamados li {
    border-bottom-color: var(--app-linha);
    padding: 12px 0;
}

.pagina .fala {
    border-color: var(--app-borda);
    border-radius: 12px;
    background: #fbfcfe;
}

.pagina .fala.suporte {
    border-color: #bfdbfe;
    background: #f4f8ff;
}

.pagina .duvida {
    border-bottom-color: var(--app-linha);
}

.pagina .conexao {
    border-color: var(--app-borda);
    border-radius: 12px;
    background: #fbfcfe;
}

.pagina .copiar input {
    background: #f8fafc;
    font-size: 14px;
}

.pagina .plano {
    border-color: var(--app-borda);
    border-radius: 14px;
    box-shadow: var(--app-sombra);
}

.pagina .painel.perigo > summary {
    font-size: 16px;
}

/* ------------------------------------------------- cartões de uma coluna */

body.app .cartao {
    border-color: var(--app-borda);
    border-radius: 16px;
    box-shadow: var(--app-sombra);
    margin: 40px auto;
}

body.app .cartao h1 {
    font-size: 25px;
    letter-spacing: -.02em;
}

@media (max-width: 900px) {
    body.app .topo {
        padding: 10px 16px;
    }

    body.app main {
        padding: 20px 16px 56px;
    }

    body.app .rodape {
        padding: 20px 16px;
    }

    .cabecalho-pagina h1 {
        font-size: 23px;
    }

    .pagina .painel,
    .pagina .bloco,
    .pagina > form.formulario {
        padding: 18px 16px;
    }

    /* Sem largura de sobra, a tabela rola em vez de espremer as colunas até
       o texto quebrar letra a letra. */
    .pagina .tabela {
        min-width: 520px;
    }
}

@media (max-width: 560px) {
    body.app .topo nav a {
        padding: 7px 9px;
        font-size: 13px;
    }

    .pagina .numeros {
        grid-template-columns: 1fr;
    }

    body.app .cartao {
        margin: 24px auto;
    }
}

@media (max-width: 860px) {
    .capa {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .capa .acoes {
        justify-content: center;
    }

    .capa .faixa-beneficios {
        justify-content: center;
    }

    .comparativo {
        grid-template-columns: 1fr;
    }

    .ilustracao {
        order: -1;
        max-width: 520px;
        margin: 0 auto;
    }
}

@media (max-width: 520px) {
    .capa h1 {
        font-size: 30px;
    }

    .cartao {
        padding: 24px;
    }

    .par {
        grid-template-columns: 1fr;
    }
}