/**
 * painel-movel.css — a área logada do site (/painel) no CELULAR.
 *
 * Opção 1 escolhida pelo dono em 25/09/2026: cartões e menu inferior, com as
 * cores e as letras do app. Tudo aqui está dentro de @media (max-width:900px),
 * o mesmo limite do bloco de celular do painel: no computador NADA muda.
 * Carregado por último, depois do CSS do próprio painel.
 *
 * Corrige o que foi medido no celular: tabelas cortadas (viram cartões),
 * letra de 10,5–11,5px (mínimo 12,5px), botões menores que 40px (44px),
 * sino e avatar numa linha solta (vão para o topo, ao lado da marca).
 */
/* A marca é inserida pelo painel-movel.js; fora do celular ela não aparece
   (o computador já tem a marca no menu lateral). */
.pm-marca{display:none}

@media (max-width:900px){
  .pm-marca{display:block}
  body{font-family:Arial,Helvetica,sans-serif}

  /* ── topo: marca + sino + avatar numa linha; título e subtítulo abaixo ── */
  .cab{display:grid!important;grid-template-columns:1fr auto;grid-template-areas:"marca perfil" "texto texto";align-items:center;gap:8px 10px;margin:0 0 14px!important}
  .cab>div:not(.perfil){grid-area:texto;min-width:0;max-width:none!important;width:100%}
  .cab .perfil{grid-area:perfil;display:flex!important;gap:8px;align-items:center}
  .pm-marca{grid-area:marca;font:700 21px Arial,Helvetica,sans-serif;letter-spacing:-1px;color:#10273e;text-decoration:none}
  .pm-marca span{color:#df5900}
  .cab .atualiz{display:none!important}
  .cab h1{font-size:25px!important;line-height:1.18;letter-spacing:-.5px;color:#10273e}
  .cab .sub{font-size:14px!important;color:#536477;max-width:none!important}
  .sino,.avatar{min-width:40px;min-height:40px}

  /* ── cartões: o mesmo desenho do app ── */
  .cartao{border-radius:16px!important;background:#f5f6fa;border:1px solid #dfe6ec;box-shadow:none!important;padding:16px!important}

  /* ── botões: principal laranja com letra escura; secundário branco com borda ── */
  .btn,.btn-1,.btn-p{min-height:46px;border-radius:12px!important;background:#f97316!important;color:#10273e!important;border:0!important;font-weight:700}
  .btn-2,.btn-3,.btn-claro{min-height:46px;border-radius:12px!important;background:#fff!important;color:#10273e!important;border:1px solid #b7c4d1!important;font-weight:400}
  .linkinho,.links-pt a{min-height:44px;display:inline-flex;align-items:center}

  /* ── letra mínima de 12,5px ── */
  .rolante td span[style*="font-size:11.5px"]{font-size:12.5px!important}
  /* Trilha das 5 etapas: 11px sem quebrar palavra — a única exceção ao mínimo,
     porque são cinco nomes lado a lado; o nome da etapa atual aparece em
     tamanho normal no cartão "Seu próximo passo". */
  .passo .nm{font-size:11px!important;white-space:nowrap!important;letter-spacing:-.2px;word-break:normal!important}
  /* Links da Ajuda: a linha inteira é o alvo do toque (44px). */
  #ajuda .kv{min-height:44px;align-items:center}
  #ajuda .kv a{display:inline-flex;align-items:center;min-height:44px}
  .pill,.rot,.aviso-item .quando,.avisos-pe,.mk{font-size:12.5px!important}

  /* ── tabelas viram cartões ──
     Cada linha (uma dívida, um pedido, uma modalidade) é um cartão; cada célula
     é "rótulo … valor". O rótulo vem do cabeçalho da coluna (painel-movel.js). */
  .rolante{overflow:visible!important}
  .rolante>table{width:100%!important;min-width:0!important}
  .rolante table,.rolante tbody,.rolante tr,.rolante td{display:block}
  .rolante thead{display:none}
  .rolante tr{background:#fff;border:1px solid #dfe6ec;border-radius:12px;padding:10px 14px;margin:0 0 10px}
  .rolante td{display:flex!important;justify-content:space-between;align-items:center;gap:12px;padding:6px 0!important;border:0!important;font-size:14px!important;text-align:right!important;white-space:normal!important}
  .rolante td::before{content:attr(data-rotulo);color:#536477;font-size:13px;font-weight:400;text-align:left;flex:0 0 auto}
  .rolante td:first-child{display:block!important;text-align:left!important;font-weight:700;border-bottom:1px solid #e0e7ef!important;padding-bottom:8px!important;margin-bottom:4px}
  .rolante td:first-child::before{content:none}
  .rolante td:empty,.rolante td[data-rotulo=""]:not(.acoes):not(:first-child){display:none!important}
  .rolante td.acoes{display:grid!important;grid-template-columns:1fr 1fr;gap:8px;padding-top:10px!important}
  .rolante td.acoes::before{content:none}
  .rolante td.acoes>*{min-height:44px;display:flex;align-items:center;justify-content:center;border:1px solid #b7c4d1;border-radius:12px;background:#fff;color:#10273e;font-size:14px;text-decoration:none}
  .rolante td.acoes>:only-child{grid-column:1/-1}
  .rolante td.acoes .apagar{color:#b02525}
  .rolante .pill{white-space:nowrap}

  /* ── menu inferior: o do app ── */
  .barra-baixo{background:#fff!important;border-top:1px solid #e0e7ef!important;box-shadow:none!important}
  .barra-baixo button{font-size:12px!important;color:#10273e;min-height:48px}
  .barra-baixo button[aria-current="page"]{color:#df5900!important}
}

/* ══════════ a cara do app, no celular (25/09/2026) ══════════
 * Pedido do dono: cores, letras, tamanhos e estilo iguais aos do app. As
 * variáveis de cor do painel passam a ter os valores do app (v4-tema.css), o
 * que leva a paleta a todas as telas; as medidas abaixo são as do app,
 * conferidas na auditoria visual. Só no celular: no computador nada muda. */
.pm-sol{display:none}
@media (max-width:900px){
  :root{
    --tinta:#10273e; --tinta-2:#536477; --tinta-3:#536477;
    --laranja:#f97316; --laranja-forte:#df5900; --laranja-fraco:#fff4eb;
    --verde:#18754c; --verde-forte:#18754c; --verde-fraco:#e7f4ed;
    --ambar:#aa4908; --ambar-fraco:#fff4e0;
    --rubro:#b02525; --rubro-forte:#b02525; --rubro-fraco:#fdecec;
    --papel:#ffffff; --papel-2:#f5f6fa; --ceu:#f5f6fa; --ceu-2:#e0e7ef;
    --linha:#dfe6ec; --linha-forte:#becbd7; --sombra:none;
  }
  body,.area,main{background:#fff!important;color:#10273e}
  body,button,input,select,textarea{font-family:Arial,Helvetica,sans-serif}

  /* títulos e textos: medidas do app */
  .cab h1{font-size:27px!important;font-weight:700!important;letter-spacing:-.5px}
  .cab .sub{font-size:14px!important;line-height:1.5}
  .cartao h2{font-size:19px!important;font-weight:700!important}
  .cartao h3{font-size:17px!important;font-weight:700!important}
  .desc,.cartao p{color:#536477;line-height:1.5}
  .rot{font-size:12.5px!important;color:#aa4908;font-weight:700;letter-spacing:.2px}

  /* linhas "rótulo … valor" */
  .kv{border-color:#e0e7ef!important;padding:9px 0!important;font-size:14px}
  .kv>span:first-child{color:#536477}

  /* campos: 46px, canto 10px, borda do app */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea{
    min-height:46px;border:1px solid #becbd7!important;border-radius:10px!important;font-size:16px!important;
    padding:11px 12px!important;background:#fff!important;color:#10273e!important;box-shadow:none!important}
  label{color:#10273e}

  /* etiquetas (pill): canto redondo e as cores do app */
  .pill{border-radius:99px!important;font-weight:700;padding:3px 10px!important}
  .p-alerta{background:#fff4e0!important;color:#aa4908!important}
  .p-ok{background:#e7f4ed!important;color:#18754c!important}
  .p-critico{background:#fdecec!important;color:#b02525!important}

  /* topo: sino e avatar redondos como no app */
  .sino{border-radius:50%!important;border:1px solid #dfe6ec!important;background:#fff!important}
  .avatar{background:#10273e!important;color:#fff!important}

  /* ── Minhas solicitações: opção B ── */
  .pm-desk{display:none}
  .pm-sol{display:block}
  .pm-grupo{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:18px 0 10px}
  .pm-grupo h2{font-size:19px;font-weight:700;margin:0;color:#10273e}
  .pm-lista{background:#fff;border:1px solid #dfe6ec;border-radius:16px;padding:2px 16px}
  .pm-ped{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #e0e7ef;
    padding:14px 0;min-height:64px;font:inherit;color:#10273e;cursor:pointer}
  .pm-ped:last-child{border-bottom:0}
  .pm-ped-txt{flex:1;min-width:0}
  .pm-ped-txt>b{font-size:16px}
  .pm-mini{font-size:13px;color:#536477}
  .pm-bloco{display:block;margin-top:2px}
  .pm-atraso{color:#aa4908}
  .pm-chev{width:18px;height:18px;flex:0 0 auto;fill:none;stroke:#536477;stroke-width:2}
  .pm-ped .pill{flex:0 0 auto;white-space:nowrap}

  /* detalhe do pedido: folha que sobe de baixo */
  .pm-fundo{position:fixed;inset:0;background:rgba(16,39,62,.45);z-index:60}
  .pm-folha{position:fixed;left:0;right:0;bottom:0;z-index:61;background:#fff;border-radius:20px 20px 0 0;
    padding:8px 18px calc(18px + env(safe-area-inset-bottom,0px));max-height:85vh;overflow:auto;box-shadow:0 -8px 30px rgba(16,39,62,.2)}
  .pm-fundo[hidden],.pm-folha[hidden]{display:none}
  .pm-puxa{display:block;width:44px;height:24px;margin:0 auto 6px;border:0;background:none;position:relative}
  .pm-puxa::after{content:'';position:absolute;left:2px;right:2px;top:9px;height:5px;border-radius:9px;background:#dfe6ec}
  .pm-folha-topo{display:flex;justify-content:space-between;align-items:center;gap:10px}
  .pm-folha-valor{font-size:22px;color:#10273e}
  .pm-folha-valor span{font-weight:400;font-size:15px;color:#536477}
  .pm-etapas{list-style:none;margin:14px 0;padding:0}
  .pm-etapas li{display:flex;gap:12px;align-items:flex-start;padding:7px 0}
  .pm-etapas i{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:12px;font-weight:700;background:#e0e7ef;color:#536477}
  .pm-etapas .pm-feito i{background:#18754c;color:#fff}
  .pm-etapas .pm-atual i{background:#f97316;color:#10273e}
  .pm-etapas .pm-negado i{background:#b02525;color:#fff}
  .pm-etapas b{font-size:15px;color:#10273e}
  .pm-nota{background:#f7f9fc;border:1px solid #e0e7ef;border-radius:12px;padding:12px 14px;font-size:13px;color:#536477;margin:0 0 12px}
  .pm-atend{width:100%}
  .pm-fechar{display:block;margin:6px auto 0;min-height:44px;background:none;border:0;color:#536477;text-decoration:underline;font:inherit;font-size:14px}
  body.pm-travado{overflow:hidden}
}
/* ── Meu diagnóstico no celular: resumo + pontos em lista (25/09/2026) ── */
@media (max-width:900px){
  .pm-diag-resumo{display:flex;gap:16px;align-items:center}
  .pm-anel{flex:0 0 92px;height:92px;border-radius:50%;display:grid;place-items:center;
    background:conic-gradient(var(--pm-cor,#18754c) 0 var(--pm-pct,0%),#e0e7ef 0)}
  .pm-anel b{width:74px;height:74px;border-radius:50%;background:#fff;display:grid;place-items:center;font-size:26px;color:#10273e}
  .pm-diag-nota{margin:8px 0 2px;font-weight:700;font-size:16px;color:#10273e}
  .pm-link{background:none;border:0;padding:0;font:inherit;font-size:13px;color:#536477;text-decoration:underline;min-height:0;cursor:pointer}
  .pm-ponto .pill{display:inline-block}
  .pm-ponto-tit{font-size:16px;margin-top:6px;color:#10273e}
  .pm-folha-tit{font-weight:700;font-size:21px;margin:10px 0 6px;color:#10273e}
  .pm-folha-txt{color:#536477;margin:0 0 12px;line-height:1.5}
  .pm-folha-txt b{color:#10273e}
  .pm-folha-nums{background:#f5f6fa;border:1px solid #dfe6ec;border-radius:16px;padding:4px 16px;margin:0 0 12px}
  .pm-folha .btn{display:flex;align-items:center;justify-content:center;width:100%;text-decoration:none}
  .pm-prox{background:#fff4eb;border:1px solid #e56611;border-radius:16px;padding:16px;margin:16px 0 0}
  .pm-prox .rot{margin:0}
  .pm-prox-tit{font-weight:700;font-size:17px;margin:6px 0 12px;color:#10273e}
  .pm-prox .btn{width:100%}
}
/* ── Início no celular: jornada, próximo passo e "Seu resumo" em lista ── */
@media (max-width:900px){
  #visao>.grade{display:none!important}
  .pm-jornada .rot{margin:0 0 10px}
  .pm-trilha{overflow:visible}
  #pmInicio .pm-prox h3{font-size:16px!important;margin:6px 0 4px!important;color:#10273e}
  #pmInicio .pm-prox p{margin:0 0 12px}
  #pmInicio .pm-prox .btn,#pmInicio .pm-prox button{width:100%}
  .p-neutro{background:#f3f4f8!important;color:#536477!important}
}

/* ══════════ sintonia fina com o app: tipografia e espaço (25/09/2026) ══════════
 * Medido lado a lado (app × painel no celular, 8 e 11 telas). O estilo geral do
 * site (site-shell.css) aplicava 16px num cinza-azulado (#49617f) a todo texto
 * descritivo e vencia as regras anteriores — daí o !important aqui, só no
 * celular. Valores = os do app (v4-tema.css). */
@media (max-width:900px){
  body{font-size:14px!important}
  /* texto corrido: 14px no cinza do app (era 16px #49617f em 51 trechos) */
  .area p,.area .desc,.area li,.area label,.area .kv{font-size:14px!important;color:#536477;line-height:1.5}
  .area .desc b,.area .desc strong,.area p b,.area p strong,.area .kv b{color:#10273e}
  .area .kv b{font-size:14px!important}
  /* texto pequeno: 13px */
  .area .mini,.area .desc.mini,.area small,.area .pm-mini{font-size:13px!important}
  /* números em destaque: 22px/700 (eram 21, 24 e 25px com peso 800) */
  .area .valorao{font-size:22px!important;font-weight:700!important;letter-spacing:-.3px}
  /* botões: 14px/700 (eram 15px/800) */
  .area .btn,.area .btn-1,.area .btn-2,.area .btn-3,.area .btn-claro,.area .btn-p{font-size:14px!important;font-weight:700!important}
  .area .btn-2,.area .btn-3,.area .btn-claro{font-weight:400!important}
  /* o app não passa de 700 */
  .area b,.area strong,.area h1,.area h2,.area h3,.area h4,.area .rot{font-weight:700!important}
  /* títulos dentro de cartão: 19px (h2) e 16px (h3), como os do app */
  .area .cartao h2{font-size:19px!important}
  .area .cartao h3,.area h3{font-size:16px!important;line-height:1.3}
  /* espaço entre cartões: 12px (era 11px). O espaço vem do gap das colunas;
     margem no cartão somaria em dobro (24px, visto na medição). */
  .area .grade,.area .col{gap:12px!important}
  .area .col>.cartao,.area .grade>.cartao{margin-bottom:0!important}
  /* exceção mantida: nomes das 5 etapas da trilha (11px, cabem numa linha) */
  .area .passo .nm{font-size:11px!important}
}

@media (max-width:900px){
  /* cor do texto descritivo e do pequeno: a do app (o site-shell pintava #49617f) */
  .area p,.area .desc,.area .mini,.area .desc.mini,.area small,.area li,.area .kv>span:first-child{color:#536477!important}
  .area .rot{color:#aa4908}
  /* peso 800 escrito direto nas telas (34 trechos): 700, como no app */
  .area [style*="font-weight:800"],.area [style*="font-weight: 800"],.area .passo .nm{font-weight:700!important}
  /* regra da grade do painel que forçava 25px no número do último cartão */
  .area .g3>.cartao:last-child:nth-child(odd) .valorao,.area .cartao .valorao[style]{font-size:22px!important}
}
@media (max-width:900px){
  /* Etiquetas (.rot): 12,5px no laranja escuro do app em todas as telas. A
     regra de texto corrido (.area p) as pintava de cinza a 14px quando eram <p>
     ("Seu próximo passo", "Recomendação principal"), e três telas traziam
     outro laranja escrito direto no código. */
  .area p.rot,.area .rot,.area .rot[style]{font-size:12.5px!important;font-weight:700!important;color:#aa4908!important;letter-spacing:.2px}
}
/* ── 4 abas como no app e telas-menu (25/09/2026) ── */
@media (max-width:900px){
  .barra-baixo.pm-4abas{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .barra-baixo.pm-4abas button{font-size:12px}
  .barra-baixo.pm-4abas button[aria-current="page"]{color:#df5900}
  .pm-hub-tela .rot{margin:0 0 8px}
  .pm-hub{min-height:72px}
  .pm-feito-txt{color:#18754c!important;font-weight:700}
  .pm-perfil-topo{display:flex;gap:14px;align-items:center;margin:0 0 12px}
  .pm-perfil-av{flex:0 0 56px;height:56px;border-radius:50%;background:#10273e;color:#fff;display:grid;place-items:center;font-size:22px;font-weight:700}
  .pm-sair{width:100%;margin-top:14px}
}
/* ── Ícones do topo no estilo dos ícones do menu (25/09/2026, pedido do dono) ──
 * Sino, chave (admin) e conta: círculo branco de 40px com borda fina e ícone
 * de traço fino azul-marinho — o mesmo desenho dos ícones do Perfil e das abas.
 * A inicial dá lugar ao ícone de pessoa da aba Perfil. Só no celular. */
@media (max-width:900px){
  .cab .sino,.cab .botao-admin,.cab .avatar{
    width:40px!important;height:40px!important;min-width:40px;padding:0!important;border-radius:50%!important;
    border:1px solid #dfe6ec!important;background:#fff!important;box-shadow:none!important;
    color:#10273e!important;display:inline-grid!important;place-items:center;gap:0!important}
  .cab .sino .ic-svg,.cab .botao-admin .ic-svg{width:21px;height:21px;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important}
  .cab .sino .ic-svg *,.cab .botao-admin .ic-svg *{fill:none!important;stroke:currentColor!important}
  .cab .botao-admin>span:not([data-ic]){display:none!important}
  .cab .botao-admin[hidden]{display:none!important}
  /* conta: o ícone de pessoa da aba Perfil (traço 1,8, azul-marinho) no lugar da inicial */
  .cab .avatar{font-size:0!important;color:transparent!important;
    background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310273e' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4 4-6 8-6s8 2 8 6'/%3E%3C/svg%3E") center/21px 21px no-repeat!important}
  .cab .sino .bolinha{background:#f97316!important;color:#10273e!important;font-weight:700}
}
/* ── Início no celular: Mix A, "o mês primeiro" (25/09/2026, escolha do dono) ──
 * O mês (barra: gastos, parcelas, sobra), quatro números com gráfico pequeno,
 * o que mais custa e o próximo passo. Cores = as do app. */
@media (max-width:900px){
  .pm-ola{margin:0 0 8px!important}
  .pm-mes,.pm-custo{margin:0 0 12px}
  .pm-mes-topo{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 10px}
  .pm-mes-topo .rot{margin:0}
  .pm-barra-mes{position:relative;display:flex;height:16px;border-radius:9px;overflow:visible;background:#e0e7ef}
  .pm-barra-mes>i{display:block;height:100%}
  .pm-barra-mes>i:first-child{border-radius:9px 0 0 9px}
  .pm-barra-mes>i:last-of-type{border-radius:0 9px 9px 0}
  .pm-barra-mes>i:only-of-type{border-radius:9px}
  .pm-renda-marca{position:absolute;top:-4px;bottom:-4px;width:3px;margin-left:-1.5px;background:#b02525;border-radius:2px}
  .pm-legenda{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .pm-legenda li{font-size:13px!important;color:#536477;display:flex;flex-direction:column;gap:2px;padding-left:14px;position:relative}
  .pm-legenda li>i{position:absolute;left:0;top:4px;width:9px;height:9px;border-radius:50%}
  .pm-legenda b{font-size:15px;color:#10273e}
  .pm-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 12px}
  .pm-tile{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;background:#fff;border:1px solid #dfe6ec;
    border-radius:16px;padding:14px;min-height:132px;font:inherit;color:#10273e;cursor:pointer;min-width:0}
  .pm-tile .rot{margin:0}
  .pm-tile-v{font-size:20px;letter-spacing:-.3px;color:#10273e;line-height:1.2}
  .pm-tile-v small{font-size:13px;font-weight:400;color:#536477}
  .pm-tile .pill{margin-top:2px}
  .pm-spark{display:block;width:100%;height:30px;margin-top:4px}
  .pm-gauge{display:block;width:96px;height:54px;margin:2px 0}
  .pm-prog{display:block;width:100%;height:8px;border-radius:9px;background:#e0e7ef;overflow:hidden;margin-top:6px}
  .pm-prog>i{display:block;height:100%;background:#18754c;border-radius:9px}
  .pm-prog-custo>i{background:#b02525}
  .pm-bom{color:#18754c!important}
  .pm-ruim{color:#b02525!important}
  .pm-rank{padding:8px 0;border-bottom:1px solid #e0e7ef}
  .pm-rank:last-of-type{border-bottom:0}
  .pm-rank-t{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;font-size:15px}
  .pm-rank-t>b{white-space:nowrap}
  #pmInicio .pm-prox{margin:0 0 12px}
  #pmInicio .pm-prox .pm-mini{margin:0 0 12px}
}
@media (max-width:900px){
  /* nome da etapa no cartão do próximo passo: azul-marinho, como no app (a regra de texto corrido o pintava de cinza) */
  .area #pmInicio .pm-prox-tit{color:#10273e!important;font-size:17px!important;font-weight:700!important;margin:6px 0 4px}
}
/* ── Notificações no celular: centralizadas na tela (26/09/2026, pedido do dono) ──
 * A regra do painel (position:absolute; right:0) vinha depois da de celular e
 * vencia: a caixa nascia no sino e saía pela borda direita. Aqui ela fica
 * presa à tela, com 16px de cada lado, logo abaixo do topo, e rola por dentro. */
@media (max-width:900px){
  .avisos{position:fixed!important;left:16px!important;right:16px!important;top:calc(env(safe-area-inset-top,0px) + 72px)!important;
    width:auto!important;max-width:520px;margin:0 auto;max-height:calc(100vh - 180px);overflow:auto!important;z-index:70!important;
    border-radius:16px!important;border:1px solid #dfe6ec!important;box-shadow:0 12px 40px rgba(16,39,62,.22)!important}
  .avisos-topo{padding:14px 16px!important}
  .avisos-topo b{font-size:16px!important;color:#10273e}
  .lermarcar{font-size:13px!important;font-weight:700!important;color:#df5900!important;min-height:40px}
  .aviso-item{padding:14px 16px!important}
  .aviso-item b{font-size:15px!important;font-weight:700!important;color:#10273e;overflow-wrap:anywhere}
  .aviso-item .corpo{font-size:13px!important;color:#536477!important;overflow-wrap:anywhere}
  .avisos-pe{font-size:13px!important;font-weight:400!important;color:#536477!important}
}
@media (max-width:900px){
  /* a sobra do mês, logo abaixo do "Olá" (26/09/2026) */
  .area .pm-mes .pm-mes-sobra{font-size:22px!important;font-weight:700!important;letter-spacing:-.3px;line-height:1.2;margin:0 0 2px}
  .area .pm-mes .pm-mes-sobra.pm-bom{color:#18754c!important}
  .area .pm-mes .pm-mes-sobra.pm-ruim{color:#b02525!important}
  .area .pm-mes .pm-mes-sub{margin:0 0 12px}
}
/* ── Botões do Início no celular (28/09/2026, opção B com ajuste do dono) ──
 * A troca de dívida é o objetivo: botão forte, no laranja do site com letra
 * branca. O próximo passo fica em contorno branco. Cantos arredondados. */
@media (max-width:900px){
  .area #pmInicio .pm-btn-forte,.area #pmInicio .pm-btn-contorno{display:flex;align-items:center;justify-content:center;width:100%;
    min-height:48px;border-radius:999px!important;font-size:15px!important;font-weight:700!important;margin-top:12px}
  .area #pmInicio .pm-btn-forte{background:#ff5c00!important;color:#fff!important;border:1px solid #ff5c00!important}
  .area #pmInicio .pm-btn-contorno{background:#fff!important;color:#10273e!important;border:1px solid #b7c4d1!important}
}