/* Páginas de recurso no celular, rodada de 09/10/2026 à noite. Vale pras seis páginas, que usam o mesmo molde.
   Carregado por último nas páginas internas. A home não carrega. */

/* ---------- rodapé igual ao da home em todas as telas ---------- */
.rodape li a{display:inline;min-height:0}
@media (max-width:640px){.rodape-grade{grid-template-columns:1fr}}

/* ---------- a lista do antes e depois, com o traço passando no meio de cada linha do texto ---------- */
.cl-comp-col li{display:block;position:relative;padding-left:30px}
.cl-comp-col li svg{position:absolute;left:0;top:3px;margin:0}
.cl-comp-col li span{display:inline;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.cl-comp-col.nao li span{background-position:0 .68em}
.cl-borda{display:none}

/* ---------- botões Hoje e Com o Renv Chat, só no celular ---------- */
.cl-ba-tg{display:none}

/* ---------- índice do catálogo, filtro com seta no celular ---------- */
.ind-bt{display:none}

@media (max-width:760px){
  /* telas do app coladas na borda direita, sem canto e sem respiro desse lado. Todas iguais */
  .cl-hero-tela{width:auto;max-width:none;margin:36px 0 0 var(--gutter);border-radius:0;overflow:hidden}
  .cl-row-tela{margin-right:calc(-1 * var(--gutter));margin-left:0;border-radius:0;overflow:hidden}
  body .cl-hero-tela .tg,body .cl-row .cl-row-tela .tg,body .cl-row.e .cl-row-tela .tg{width:172%;margin-left:0;border-top-right-radius:0;border-bottom-right-radius:0}
  .cl-row.d .cl-pil,.cl-row.e .cl-pil,.cl-pil{left:4%;right:auto;bottom:7%;max-width:88%}

  /* título e texto do antes e depois no meio */
  .cl-comp .cl-h2,.cl-comp-dica{text-align:center;margin-inline:auto;text-wrap:balance}
  .cl-comp-dica{display:none}

  /* antes e depois vira dois botões no estilo do seletor Anual e Mensal, e a tela aparece grande */
  .cl-ba-tg{position:relative;display:flex;width:100%;margin:0 0 16px;padding:5px;border-radius:999px;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.04)),#0B100C;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
  .cl-ba-tg button{flex:1;min-height:46px;border-radius:999px;font-size:15px;font-weight:600;color:rgba(255,255,255,.72);transition:background-color .3s ease,color .3s ease}
  .cl-ba-tg button[aria-pressed="true"]{background:#fff;color:#0A0B0A}
  .cl-ba-tg button:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
  .cl-ba{height:500px;border-radius:28px;touch-action:auto}
  .cl-ba-alca,.cl-ba-rot{display:none}
  .cl-ba-antes{transition:clip-path .55s cubic-bezier(.65,0,.35,1)}
  .cl-ba-depois{place-items:center start;padding:0 0 0 16px}
  body .cl-ba-depois .tg{width:172%;margin:0}
  .cl-jan{width:58%;padding:10px 12px 14px}
  .cl-jan header b{font-size:13px}
  /* bilhetes presos na borda direita, com largura fixa, senão o texto saía da tela (14/10/2026) */
  .cl-nota{left:auto!important;right:7%;width:46%;max-width:none;padding:9px 11px;font-size:12.5px;text-wrap:balance}

  /* listas embaixo do antes e depois */
  .cl-comp-col{padding:22px 20px}
  .cl-comp-col li{font-size:15.5px;line-height:1.45}

  /* índice do catálogo, um botão com o nome da área e a lista que abre embaixo */
  .indice .caixa{position:relative}
  .ind-bt{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;margin:8px 0;padding:0 16px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px rgba(10,30,14,.12);color:var(--tinta);text-align:left}
  .ind-bt small{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6A746C}
  .ind-bt-nome{flex:1;min-width:0;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .ind-bt svg{flex:none;width:20px;height:20px;color:#2C7A31;transition:transform .4s var(--mola)}
  .ind-bt[aria-expanded="true"] svg{transform:rotate(180deg)}
  .ind-bt:focus-visible{outline:2px solid #2C7A31;outline-offset:2px}
  .indice .indice-fila{display:none}
  .indice.aberta .indice-fila{position:absolute;left:var(--gutter);right:var(--gutter);top:calc(100% - 4px);z-index:5;display:grid;gap:2px;padding:6px;overflow:visible;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px rgba(10,30,14,.1),0 30px 60px -24px rgba(10,30,14,.45);animation:ind-abre .3s cubic-bezier(.2,.8,.2,1) both}
  .indice.aberta .indice-fila{grid-template-columns:1fr;justify-content:stretch}
  .indice.aberta .ind{display:flex;width:100%;justify-content:space-between;min-height:48px;padding:0 14px;border-radius:12px;white-space:normal}
  @keyframes ind-abre{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

  /* fecho com a foto, tudo no meio */
  .cl-pessoa-txt{text-align:center;justify-items:center;margin-inline:auto}
  .cl-pessoa-txt .cl-h2,.cl-pessoa-txt .lead{margin-inline:auto;text-wrap:balance}
  .cl-pessoa-txt .acoes{justify-content:center}
  .cl-foto{margin-inline:auto}
}
@media (prefers-reduced-motion:reduce){.cl-ba-antes{transition:none}.indice.aberta .indice-fila{animation:none}}
/* chips do topo quebram linha no celular, nada foge da tela */
@media (max-width:760px){
  .cl-chips{flex-wrap:wrap;overflow:visible;margin-inline:0;padding-inline:0;max-width:100%;-webkit-mask-image:none;mask-image:none}
  .cl-chip{flex:0 1 auto}
}

/* ---------- rodada seguinte de 09/10/2026 ---------- */
/* o "Ir para" sem as duas linhas, em cima e embaixo */
.cl-l .indice,.indice{box-shadow:none}
@media (max-width:900px){
  /* catálogo, a tela abre colada no recurso tocado, do tamanho do conteúdo, sem sobra branca */
  .tela{height:auto;min-height:0}
  .tela-slot{margin:-8px 0 8px}
  .itens .item[aria-selected="true"]{border-bottom-left-radius:0;border-bottom-right-radius:0}
  .tela-slot .tela{border-top-left-radius:0;border-top-right-radius:0}
  .cena{padding-bottom:18px}
}
@media (max-width:760px){
  /* antes e depois, os botões continuam e a alça volta pra arrastar com o dedo */
  .cl-ba{touch-action:pan-y}
  .cl-ba-alca{display:grid}
  .cl-ba-alca i{width:44px;height:44px;border-radius:14px}
  .cl-ba-antes{transition:none}
  .cl-ba.anima .cl-ba-antes{transition:clip-path .55s cubic-bezier(.65,0,.35,1)}
  .cl-ba.anima .cl-ba-alca{transition:left .55s cubic-bezier(.65,0,.35,1)}
}

/* caixa de pergunta do topo, no celular a frase quebrava no meio da palavra embaixo do botão (14/10/2026) */
@media (max-width:640px){
  .cl-prompt{flex-wrap:wrap;border-radius:26px;padding:14px 10px 10px 16px;row-gap:12px}
  .cl-digita{flex:1 1 0;white-space:normal;line-height:1.3;min-height:1.3em}
  .cl-prompt .btn{flex:1 1 100%;justify-content:center}
}

/* abas do painel viram filtro com seta no celular (14/10/2026). O botão nasce pelo celular-recursos.js */
.cl-abas-filtro{display:none}
@media (max-width:700px){
  .cl-abas-bt.tem-filtro{position:relative;display:block;overflow:visible;margin:0 0 22px;padding:0}
  .cl-abas-filtro{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:0 16px;border-radius:16px;background:#fff;box-shadow:inset 0 0 0 1px rgba(10,30,14,.12),0 14px 30px -20px rgba(10,30,14,.4);color:var(--tinta,#0A0B0A);text-align:left}
  .cl-abas-filtro small{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#6A746C}
  .cl-abas-filtro-nome{flex:1;min-width:0;font-size:16px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .cl-abas-filtro svg{flex:none;width:20px;height:20px;color:#2C7A31;transition:transform .4s var(--mola,cubic-bezier(.34,1.4,.5,1))}
  .cl-abas-filtro[aria-expanded="true"] svg{transform:rotate(180deg)}
  .cl-abas-filtro:focus-visible{outline:2px solid #2C7A31;outline-offset:2px}
  .tem-filtro .cl-abas-in{display:none}
  .tem-filtro .cl-abas-ov{display:none}
  .tem-filtro.aberta .cl-abas-in{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:6;display:grid;gap:2px;padding:6px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px rgba(10,30,14,.1),0 30px 60px -24px rgba(10,30,14,.45);animation:ind-abre .3s ease}
  .tem-filtro.aberta .cl-abas-in .cl-aba{width:100%;justify-content:flex-start;min-height:48px;padding:0 14px;border-radius:12px;color:#2A322B}
  .tem-filtro.aberta .cl-abas-in .cl-aba[aria-selected="true"]{background:#EEF6EF;color:#0A0B0A}
}