/* John's Company · v6.4 (02/11/2026): pilha de folhas do CLT, pontos do "digitando" visíveis, botão em 1 linha, palco do topo alinhado. Carrega depois do v63.css. */

/* Preço: o mês em CLT vira uma pilha (volta todo mês); o recibo continua uma folha só. A altura segue o custo (0,55 do mês). */
.escala .holerite{box-shadow:0 1px 2px rgb(14 61 89 / .12),
  7px 7px 0 -1px var(--p-chao),7px 7px 0 0 rgb(14 61 89 / .10),
  14px 14px 0 -2px var(--p-dobra),14px 14px 0 -1px rgb(14 61 89 / .08),
  0 30px 52px -24px rgb(14 61 89 / .42)}
.chave-esc--mes span{display:block;margin-top:2px;color:var(--texto-secundario)}

/* "digitando": pontos em Névoa sólida (12:1 no vidro escuro); repouso .7 (≥ 3:1), pico 1. Onda suave, só opacity e transform. Reduzido = parados e cheios. */
.chat__digitando .chat__bolha{gap:6px}
.chat__digitando i{width:8px;height:8px;background:var(--apoio-claro);opacity:1}
@media (prefers-reduced-motion:no-preference){
  .chat__digitando i{animation:chat-ponto-v64 1.3s cubic-bezier(.45,0,.55,1) infinite}
  .chat__digitando i:nth-child(2){animation-delay:.16s}
  .chat__digitando i:nth-child(3){animation-delay:.32s}
}
@keyframes chat-ponto-v64{0%,70%,100%{opacity:.7;transform:none}35%{opacity:1;transform:translateY(-3px)}}

/* Celular: rótulo curto numa linha; palco do topo na mesma margem do título (antes saía 8 px para cada lado) */
@media (max-width:760px){
  .topo__palco{margin-inline:0;width:100%}
}
@media (max-width:480px){
  [data-chat].jc-botao--largo{white-space:nowrap}   /* só os CTAs de rótulo curto; o fim do chat tem rótulos longos */
}

/* v6.4 conferência Atena: o símbolo não cobre o título do recibo; no celular sai */
.recibo .folha__t{padding-right:40px}
@media (max-width:760px){.recibo__marca{display:none}.recibo .folha__t{padding-right:0}}
@media (max-width:760px){
  .escala{height:560px}
  .holerite{height:500px}
  .recibo{bottom:24px;height:calc(500px * .55)}
  .chave-esc--mes{height:500px}.chave-esc--area{height:calc(500px * .55)}
  .escala + figcaption,.escala figcaption{padding-inline:4px}
}
@media (max-width:760px){
  .recibo__v{font-size:40px}
  .escala{margin-bottom:28px}
}
@media (max-width:760px){.recibo{right:116px;bottom:56px}.recibo__v{font-size:38px}}

/* ── 02/11 · rodapé em cartão de vidro também no computador (antes só no celular) ── */
@media (min-width:900px){
  .rodape__grade{padding:var(--e-5) var(--e-6);border-radius:28px;background:var(--vidro-leve);border:1px solid var(--vidro-leve-borda);box-shadow:0 20px 48px rgb(0 0 0 / .28);column-gap:0}
  .rodape__col{padding-left:var(--e-5);margin-left:var(--e-5);border-left:1px solid var(--fio-forte)}
  .rodape__base{text-align:center;border-top:0}
}

/* 02/11 · colunas do rodapé com a mesma altura: as 2 linhas ficam iguais */
@media (min-width:900px){.rodape__grade{align-items:stretch}}