/* ---------- Página de serviço · Na prática (Technogym) ----------
   O infográfico é o "hub compacto" da Home: as classes th-* vêm de previa-bloco-home-tg.css (tudo sob .home-tg-hub),
   e a entrada animada, de previa-bloco-home-tg.js. Aqui fica só o que é desta página (sob .tg-servico):
   o cabeçalho em duas colunas (H2 + lead), a legenda sem botões, a ficha curta e o fecho.
   Este arquivo precisa vir depois de previa.css, previa-servico.css e previa-bloco-home-tg.css. */

/* cabeçalho: H2 de um lado, lead do outro (a .pratica-top é de previa.css); empilhado até 980 */
.tg-servico .pratica-top{gap:16px clamp(28px,4vw,56px);align-items:end}
.tg-servico .pratica-top .lead{margin-top:0;max-width:56ch;text-wrap:pretty}

/* legenda dos ícones: logo abaixo do desenho, sem os botões da Home */
.tg-servico .th-fecho{margin-top:clamp(16px,1.8vw,22px)}

/* ficha: só o que o desenho não diz (cliente desde, ritmo das conexões, registro e reenvio) */
.tg-servico .tg-base{margin-top:clamp(20px,2.2vw,28px)}
.tg-servico .tg-ficha{padding:16px 20px 8px}
.tg-servico .tg-cab{margin-bottom:8px}
.tg-servico .tg-ficha .tg-dados{margin:0}  /* sem a margem padrão do <dl> */
.tg-servico .tg-ficha .tg-dados > div{padding:9px 0}
.tg-servico .tg-ficha .tg-dados dd{margin-top:1px;text-wrap:balance}
.tg-servico .fecho{margin-top:clamp(20px,2.2vw,28px)}

/* 621 a 980: os três dados lado a lado (o primeiro, "2022", só ocupa o que precisa) */
@media (min-width:621px){
  .tg-servico .tg-ficha{padding:16px 24px 8px}
  .tg-servico .tg-ficha .tg-dados{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);column-gap:clamp(20px,3vw,32px)}
}
/* 981+: uma faixa só, com o logo à esquerda e os dados à direita, separados por um fio.
   O título "Technogym em resumo" continua no HTML (leitor de tela); na faixa, o logo já diz de quem é o resumo. */
@media (min-width:981px){
  .tg-servico .tg-ficha{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;column-gap:clamp(20px,2.4vw,32px);padding:16px 24px}
  .tg-servico .tg-cab{margin:0}
  .tg-servico .tg-cab h3{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .tg-servico .tg-cab img{height:30px}
  .tg-servico .tg-ficha .tg-dados{column-gap:0}
  .tg-servico .tg-ficha .tg-dados > div{padding:2px clamp(16px,2vw,28px);border-top:0;border-left:1px solid #ECEAE0}
  .tg-servico .tg-ficha .tg-dados > div:last-child{padding-right:0}
}