/* ---------- Home · Na prática (Technogym): "hub compacto" ----------
   --icw: diâmetro do ícone da etapa; --o: do topo da etapa ao centro do ícone (empilhado); --G: vão entre etapas (cabe uma ficha);
   --pc / --pv: respiro do cartão; --X: x do fio a partir da borda de fora do cartão (1px de borda + --pc + meio ícone);
   --z: escala do tablet (desenhado em --tw de largura e reduzido com zoom); --fio: espessura do fio. */
.home-tg-hub{--icw:28px;--o:20px;--G:32px;--pc:12px;--pv:12px;--X:calc(1px + var(--pc) + var(--icw) / 2);--fio:3px;--tw:240px;--z:.75;
  --th-card:rgba(42,8,40,.34);--th-borda:rgba(255,255,255,.17);--brilho:drop-shadow(0 0 5px rgba(220,209,84,.55));
  position:relative;padding-block:clamp(44px,4.2vw,56px)}
.home-tg-hub .ico{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.home-tg-hub .th-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* cabeçalho. Até 430px o H2 encolhe um pouco (7,4vw): "Do marketing à instalação." cabia em 390 com 1px de sobra
   e quebrava em 4 linhas em 375 e 360; assim fica em 3 linhas de 320 a 430, com folga. */
.home-tg-hub .th-quem{display:inline-block;margin-right:10px}
.home-tg-hub .th-desde{display:inline-block;color:var(--fg2)}  /* fonte, peso e espaçamento vêm do .sobre que o contém: uma voz só na linha */

/* mapa (empilhado) */
.home-tg-hub .th{margin-top:clamp(22px,2.6vw,32px)}
.home-tg-hub .th-mapa{display:grid;grid-template-columns:minmax(0,1fr)}
.home-tg-hub .th-kick{font:700 12px/1.3 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--acento)}
.home-tg-hub .th-cab{padding-bottom:8px}

/* ficha do que passa no fio (o ícone, 14px depois da borda esquerda, fica em cima da linha) */
.home-tg-hub .th-ficha{position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 6px;border:1.5px solid var(--oliva);border-radius:999px;background:var(--roxo-900);font:600 12px/1.3 var(--fonte);color:#fff;white-space:nowrap;box-shadow:0 0 0 4px rgba(42,8,40,.35),0 6px 16px -8px rgba(0,0,0,.6)}
.home-tg-hub .th-ficha .ico{width:13px;height:13px;color:var(--oliva);stroke-width:2}

/* cartão de etapas (antes / depois da venda) */
.home-tg-hub .th-nos{position:relative;display:grid;row-gap:var(--G);padding:var(--pv) var(--pc);border:1px solid var(--th-borda);border-radius:var(--raio);background:var(--th-card)}
.home-tg-hub .th-no{position:relative;display:grid;grid-template-columns:var(--icw) minmax(0,1fr);column-gap:12px;align-items:start}
.home-tg-hub .th-ic{position:relative;z-index:1;display:grid;place-items:center;width:var(--icw);height:var(--icw);margin-top:calc(var(--o) - var(--icw) / 2);border-radius:50%;background:#fff;color:var(--roxo-900)}
.home-tg-hub .th-ic .ico{width:15px;height:15px}
.home-tg-hub .opera .th-ic{background:var(--roxo-900);color:#fff;box-shadow:inset 0 0 0 2px #fff}
.home-tg-hub .th-ic.nosso{background:var(--oliva);box-shadow:0 0 0 4px rgba(220,209,84,.22)}
.home-tg-hub .th-tx{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1px 10px;min-width:0}
.home-tg-hub .th-tx .th-faz{grid-column:1 / -1}
/* papel da Olivas na etapa (o mesmo que o desenho do ícone diz): pílula de contorno */
.home-tg-hub .th-papel{padding:1px 8px;border:1px solid rgba(255,255,255,.42);border-radius:999px;font:600 12px/1.35 var(--fonte);letter-spacing:0;color:var(--fg);white-space:nowrap}
.home-tg-hub .th-nome{display:block;font-size:15.5px;font-weight:700;line-height:1.25;color:var(--titulo)}
.home-tg-hub .th-faz{font-size:14px;line-height:1.4;color:var(--fg2);text-wrap:pretty}
/* ficha que chega na etapa: no vão acima dela, enfiada no fio */
.home-tg-hub .th-chega{position:absolute;z-index:2;left:calc(var(--icw) / 2 - 15px);top:calc(var(--G) / -2);transform:translateY(-50%);margin:0;line-height:0}

/* fio empilhado: de ícone a ícone; no fim do cartão, segue até a borda */
.home-tg-hub .th-no::after{content:"";position:absolute;left:calc(var(--icw) / 2 - var(--fio) / 2);width:var(--fio);top:var(--o);bottom:calc(-1 * var(--G) - var(--o));background:var(--oliva);filter:var(--brilho)}
.home-tg-hub .th-no:last-child::after{bottom:calc(-1 * var(--pv) - 1px)}
.home-tg-hub .th-depois .th-no:first-child::before{content:"";position:absolute;left:calc(var(--icw) / 2 - var(--fio) / 2);width:var(--fio);top:calc(-1 * var(--pv) - 1px);height:calc(var(--pv) + 1px + var(--o));background:var(--oliva);filter:var(--brilho)}
/* etapas juntas (sem ficha no vão): planejamento e mídia, as duas que a Olivas opera */
.home-tg-hub .th-no.junto{margin-bottom:calc(10px - var(--G))}
.home-tg-hub .th-no.junto::after{bottom:calc(-10px - var(--o))}

/* fio entre os blocos (empilhado): trecho reto com a ficha enfiada nele */
.home-tg-hub .th-liga{position:relative;display:flex;align-items:center;height:34px;margin:0;padding-left:calc(var(--X) - 14px);line-height:0}
.home-tg-hub .th-liga::before,.home-tg-hub .th-depois .th-cab::before{content:"";position:absolute;left:calc(var(--X) - var(--fio) / 2);top:0;bottom:0;width:var(--fio);background:var(--oliva);filter:var(--brilho)}
.home-tg-hub .th-cot{display:none}
.home-tg-hub .th-depois .th-cab{position:relative;padding:2px 0 10px calc(var(--X) + 18px)}

/* o Sales App: tablet no fio e o texto ao lado */
.home-tg-hub .th-app{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center}
.home-tg-hub .th-app > .th-liga{grid-column:1 / -1}
.home-tg-hub .th-liga-in{grid-row:1}
.home-tg-hub .th-tela{grid-column:1;grid-row:2;display:flex}
.home-tg-hub .th-app .th-cab{grid-column:2;grid-row:2;padding:0;min-width:0}
.home-tg-hub .th-liga-out{grid-row:3}
.home-tg-hub .th-app h3,.home-tg-hub .th-bi h3{font-size:clamp(1.35rem,1.9vw,1.6rem);font-weight:800;line-height:1.1;color:var(--titulo)}
.home-tg-hub .th-app h3{margin-top:6px}
.home-tg-hub .th-app .th-faz{margin-top:10px}

/* tablet (ilustração em CSS, sem dados): o Sales App, com o anel oliva de "construímos" */
.home-tg-hub .th-tab{position:relative;flex:none;width:var(--tw);padding:10px;border-radius:22px;background:var(--tinta);zoom:var(--z);
  box-shadow:0 0 0 calc(3px / var(--z)) var(--oliva),0 0 calc(44px / var(--z)) calc(2px / var(--z)) rgba(220,209,84,.24),0 calc(22px / var(--z)) calc(40px / var(--z)) calc(-22px / var(--z)) rgba(0,0,0,.6)}
.home-tg-hub .th-tab::before{content:"";position:absolute;left:50%;top:3px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:#45443E}
.home-tg-hub .th-sa{display:grid;grid-template-rows:auto 1fr;height:100%;overflow:hidden;border-radius:12px;background:#fff;color:var(--tinta);font-size:12px;line-height:1.3}
.home-tg-hub .th-sa-cab{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--roxo-900);color:#fff}
.home-tg-hub .th-sa-cab b{font-size:13px}
.home-tg-hub .th-sa-cab span{display:none;opacity:.85}
/* o aviso "ilustração" tem 12px no desenho (9px na tela depois do zoom do tablet no celular; 9,6px no computador): com 10px ficava em 7,5px no celular */
.home-tg-hub .th-sa-cab small{margin-left:auto;padding:2px 8px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font:600 12px var(--fonte);letter-spacing:.06em;text-transform:uppercase}
.home-tg-hub .th-sa-corpo{display:grid;gap:10px;align-content:start;padding:12px}
.home-tg-hub .th-sa-abas{display:grid;grid-template-columns:1fr 1fr;padding:3px;border-radius:999px;background:#F4F4EF;font-size:11.5px;font-weight:700;line-height:1.2;text-align:center;color:var(--tinta-2)}
.home-tg-hub .th-sa-abas span{padding:5px 6px;border-radius:999px}
.home-tg-hub .th-sa-abas .on{background:var(--roxo);color:#fff}
.home-tg-hub .th-sa-linha{display:flex;align-items:center;justify-content:space-between;gap:10px;color:var(--tinta-2)}
.home-tg-hub .th-sa-cli{display:none}
.home-tg-hub .th-sa-pill{flex:none;padding:2px 8px;border-radius:999px;background:var(--oliva);color:var(--roxo-900);font-size:11px;font-weight:700}
.home-tg-hub .th-sa-itens{display:grid;align-content:space-evenly;gap:8px;padding:9px 0;border-block:1px solid #ECEAE0}
.home-tg-hub .th-sa-itens li{display:grid;grid-template-columns:18px minmax(0,1fr) 34px;align-items:center;gap:8px}
.home-tg-hub .th-sa-itens .ico{width:16px;height:16px;color:var(--roxo)}
.home-tg-hub .th-sa-itens li.cols{font:600 10px/1 var(--fonte);letter-spacing:.06em;text-transform:uppercase;color:#6B6A62}
.home-tg-hub .th-sa-itens .cols span:first-child{grid-column:2}
.home-tg-hub .th-sa-itens li.cols,.home-tg-hub .th-sa-itens li:last-child{display:none}
.home-tg-hub .th-oc{display:block;height:10px;width:var(--w,60%);border-radius:4px;background:repeating-linear-gradient(90deg,#E4E1D6 0 6px,#EEECE4 6px 12px)}
.home-tg-hub .th-sa-fim{display:grid;gap:8px}
.home-tg-hub .th-sa-ok{justify-self:end;display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;background:var(--oliva);color:var(--roxo-900);font-weight:700}
.home-tg-hub .th-sa-ok .ico{width:14px;height:14px;stroke-width:2.4}
.home-tg-hub .th-sa-trilha{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));padding-top:8px;border-top:1px solid #ECEAE0}
.home-tg-hub .th-sa-trilha li{position:relative;display:grid;justify-items:center;gap:3px;font-size:0;font-weight:600;line-height:1.2;color:var(--tinta-2);text-align:center}
.home-tg-hub .th-sa-trilha li + li::before{content:"";position:absolute;top:11px;left:calc(-50% + 15px);right:calc(50% + 15px);height:2px;background:var(--roxo)}
.home-tg-hub .th-sa-ic{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--roxo);color:#fff}
.home-tg-hub .th-sa-ic .ico{width:14px;height:14px}

/* BI: haste com seta e uma barra fina */
.home-tg-hub .th-haste{display:block;height:28px;padding-left:calc(var(--X) - 8px);line-height:0}
.home-tg-hub .th-haste svg{display:block;width:16px;height:28px;overflow:visible;filter:var(--brilho)}
.home-tg-hub .th-haste path{fill:none;stroke:var(--oliva);stroke-width:3}
.home-tg-hub .th-haste polygon{fill:var(--oliva)}
.home-tg-hub .th-bi-barra{display:grid;grid-template-columns:var(--icw) minmax(0,1fr) auto;align-items:center;gap:6px 12px;padding:12px var(--pc);border:1px solid var(--th-borda);border-radius:var(--raio);background:var(--th-card)}
.home-tg-hub .th-bi .th-ic{margin-top:0}
.home-tg-hub .th-bi-tit{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-width:0}
/* o que o BI mostra (quatro visões): no celular, duas linhas de duas, cada uma com o seu ponto; de 621 a 759, quatro mini painéis
   (gráfico decorativo + rótulo) em duas linhas de dois; de 760 para cima, os quatro numa linha.
   As colunas do celular são metades iguais e crescem até o texto se a tela for estreita (320): nunca cortam "Pipeline de vendas". */
.home-tg-hub .th-bi-vis{grid-column:1 / -1;grid-row:2;display:grid;grid-template-columns:repeat(2,minmax(max-content,1fr));gap:3px 12px;font-size:15px;font-weight:600;line-height:1.4;color:var(--titulo)}
.home-tg-hub .th-bi-vis li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.home-tg-hub .th-bi-vis li::before{content:"";flex:none;width:5px;height:5px;border-radius:50%;background:var(--oliva)}
.home-tg-hub .th-bi-vis .th-bi-graf{display:none}
.home-tg-hub .th-bi-graf{flex:none;display:flex;align-items:flex-end;gap:3px;width:62px;height:28px;padding:0 1px;border-bottom:1.5px solid rgba(255,255,255,.4)}
.home-tg-hub .th-bi-graf i{flex:1;height:var(--h);border-radius:2px 2px 0 0;background:rgba(255,255,255,.55)}
.home-tg-hub .th-bi-graf i.o{background:var(--oliva)}
/* funil (pipeline): barras deitadas, cada uma mais curta */
.home-tg-hub .th-bi-graf.funil{flex-direction:column;align-items:flex-start;justify-content:space-between;padding:1px 0;border-bottom:0;border-left:1.5px solid rgba(255,255,255,.4)}
.home-tg-hub .th-bi-graf.funil i{flex:none;width:var(--h);height:5px;border-radius:0 2px 2px 0}

/* fecho: a linha dos três verbos (legenda dos ícones) e os dois botões */
.home-tg-hub .th-fecho{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 24px;margin-top:clamp(20px,2.2vw,28px)}
.home-tg-hub .th-verbos{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:15px;line-height:1.4;color:var(--fg2)}
.home-tg-hub .th-verbos li{display:flex;align-items:center;gap:8px;white-space:nowrap}
.home-tg-hub .th-verbos b{font-size:17px;font-weight:800;letter-spacing:-.01em;color:#fff}
.home-tg-hub .th-verbos .constroi b{color:var(--oliva)}
.home-tg-hub .th-pt{flex:none;width:14px;height:14px;border-radius:50%;background:#fff}
.home-tg-hub .opera .th-pt{background:var(--roxo-900);box-shadow:inset 0 0 0 2px #fff}
.home-tg-hub .constroi .th-pt{background:var(--oliva)}
.home-tg-hub .th-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 24px}
/* área de toque do link (44px de altura) sem mudar o desenho; o ::after do .link-seta é a seta */
.home-tg-hub .th-ctas .link-seta{position:relative}
.home-tg-hub .th-ctas .link-seta::before{content:"";position:absolute;inset:-7px 0 -9px}

/* No celular o sobretítulo oliva termina perto do ponto mais claro do degradê da superfície roxo (85% 0%): em 360 o contraste
   dava 4,50:1 no pior pixel e, abaixo disso, menos. O centro fica um tom mais escuro (#8F2889 no lugar de #9B2C95): 4,7:1 no pior caso.
   O resto do degradê é o mesmo de previa.css. */
@media (max-width:430px){
  .home-tg-hub .h2{font-size:min(1.9rem,7.4vw)}
  html[data-dir="a"] .home-tg-hub[data-surf="roxo"]{--bg:radial-gradient(120% 140% at 85% 0%,#8F2889 0%,var(--roxo) 35%,var(--roxo-900) 100%)}
}
@media (max-width:374px){
  .home-tg-hub{--z:.68}
  .home-tg-hub .th-app{column-gap:12px}
  .home-tg-hub .th-bi-vis{column-gap:10px;font-size:14px}
  .home-tg-hub .th-bi-vis li{gap:7px}
}
/* 320 a 351: tablet menor (medida do tempo do selo "feito pela Olivas", que saiu do bloco em 01/10/2026; o tamanho ficou) */
@media (max-width:351px){
  .home-tg-hub{--z:.58}
}
@media (max-width:620px){
  .home-tg-hub .th-verbos{display:grid;gap:4px}
}
@media (min-width:621px){
  .home-tg-hub{--icw:32px;--o:22px;--pc:16px;--pv:14px;--tw:300px;--z:.8}
  .home-tg-hub .th-ic .ico{width:16px;height:16px}
  .home-tg-hub .th-nome{font-size:17px}
  .home-tg-hub .th-faz{font-size:14.5px}
  .home-tg-hub .th-app{column-gap:28px}
  .home-tg-hub .th-app .th-faz{font-size:16px}
  .home-tg-hub .th-sa-cab span{display:inline}
  .home-tg-hub .th-sa-cli{display:flex}
  .home-tg-hub .th-sa-corpo{padding:12px 14px}
  .home-tg-hub .th-sa-itens li.cols,.home-tg-hub .th-sa-itens li:last-child{display:grid}
  .home-tg-hub .th-sa-trilha li{font-size:11px}
  .home-tg-hub .th-bi-barra{display:flex;flex-wrap:wrap;gap:12px 14px;padding:12px var(--pc)}
  .home-tg-hub .th-bi-graf-m{display:none}
  .home-tg-hub .th-bi-vis{flex:1 0 100%;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 0;padding-top:12px;border-top:1px solid var(--th-borda);font-size:15.5px}
  .home-tg-hub .th-bi-vis li{gap:10px}
  .home-tg-hub .th-bi-vis li::before{content:none}
  .home-tg-hub .th-bi-vis .th-bi-graf{display:flex;width:40px;height:26px}
}
/* 621 a 759: os quatro painéis não cabem numa linha; ficam dois a dois, com o fio entre as colunas */
@media (min-width:621px) and (max-width:759px){
  .home-tg-hub .th-bi-vis li:nth-child(even){padding-left:16px;border-left:1px solid var(--th-borda)}
}
/* 760+: os quatro numa linha, com um fio entre cada um */
@media (min-width:760px){
  .home-tg-hub .th-bi-vis{display:flex;flex-wrap:nowrap;gap:0}
  .home-tg-hub .th-bi-vis li{flex:1 1 auto;padding-left:16px;border-left:1px solid var(--th-borda)}
  .home-tg-hub .th-bi-vis li:first-child{padding-left:0;border-left:0}
}

/* ---------- 1000+: cinco colunas (antes | fio | tablet | fio | depois) ----------
   Só com subgrid (Chrome 117+, Safari 16+, Firefox 71+); sem ele, fica o empilhado, que funciona em qualquer largura.
   A altura do meio é fixa (--H = 336px) e a coluna do fio também (--F = 104px): os cotovelos em SVG têm essas medidas
   no viewBox e não deformam. As três etapas de cada cartão têm a mesma altura, então os ícones ficam em 1/6, 1/2 e 5/6
   de --H (45,33 / 168 / 290,67): o Salesforce sai da 3ª, o tablet recebe e entrega no meio, Omie e Senior recebem na 1ª. */
@supports (grid-template-rows:subgrid){
@media (min-width:1000px){
  .home-tg-hub{--H:336px;--F:104px;--G:34px;--icw:32px;--pc:12px;--pv:0px;--tw:300px;--z:.8;--C:calc(var(--tw) * var(--z))}
  .home-tg-hub .th-mapa{max-width:none;grid-template-columns:minmax(0,1fr) var(--F) var(--C) var(--F) minmax(0,1fr);grid-template-rows:auto var(--H) auto}
  .home-tg-hub .th-lado{grid-row:1 / 3;display:grid;grid-template-rows:subgrid;min-width:0}
  .home-tg-hub .th-antes{grid-column:1}
  .home-tg-hub .th-depois{grid-column:5}
  .home-tg-hub .th-lado .th-cab,.home-tg-hub .th-depois .th-cab{grid-row:1;align-self:end;padding:0 0 12px}
  .home-tg-hub .th-depois .th-cab::before{content:none}
  .home-tg-hub .th-nos{grid-row:2;grid-template-rows:repeat(3,minmax(0,1fr))}
  .home-tg-hub .th-no{align-items:center}
  .home-tg-hub .th-antes .th-papel{margin-right:10px}  /* longe do ponto de saída do fio, na borda do cartão */
  .home-tg-hub .th-faz{text-wrap:balance}
  .home-tg-hub .th-ic{margin-top:0}
  .home-tg-hub .th-no::after{top:50%;bottom:calc(-1 * var(--G) - 50%)}
  .home-tg-hub .th-no:last-child::after,.home-tg-hub .th-depois .th-no:first-child::before{content:none}
  .home-tg-hub .th-no.junto{margin-bottom:0}
  .home-tg-hub .th-no.junto::after{bottom:calc(-1 * var(--G) - 50%)}

  .home-tg-hub .th-app{grid-column:2 / 5;grid-row:1 / 3;grid-template-columns:subgrid;grid-template-rows:subgrid;column-gap:0;align-items:stretch;min-width:0}
  .home-tg-hub .th-app .th-cab{grid-column:1 / 4;grid-row:1;align-self:end;justify-self:center;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 12px;max-width:100%;padding:0 0 14px;text-align:center}
  .home-tg-hub .th-app .th-kick{display:none}
  .home-tg-hub .th-app h3{margin-top:0}
  .home-tg-hub .th-app .th-faz{flex:0 0 100%;margin-top:0;font-size:14.5px;text-wrap:pretty}
  .home-tg-hub .th-uso{display:block}
  .home-tg-hub .th-tela{grid-column:2;grid-row:2}
  .home-tg-hub .th-tab{height:calc(var(--H) / var(--z));padding:12px;border-radius:24px}
  .home-tg-hub .th-sa-corpo{grid-template-rows:auto auto auto 1fr auto;align-content:stretch}

  /* cotovelos: SVG do tamanho da coluna do fio; a ficha fica no trecho vertical */
  .home-tg-hub .th-app > .th-liga{display:block;height:auto;padding:0}
  .home-tg-hub .th-app > .th-liga-in{grid-column:1;grid-row:2}
  .home-tg-hub .th-app > .th-liga-out{grid-column:3;grid-row:2;z-index:3}
  .home-tg-hub .th-liga::before{content:none}
  .home-tg-hub .th-cot{display:block;position:absolute;left:0;top:0;width:var(--F);height:var(--H);overflow:visible;filter:var(--brilho)}
  .home-tg-hub .th-cot path{fill:none;stroke:var(--oliva);stroke-width:3;stroke-linecap:round}
  .home-tg-hub .th-cot polygon,.home-tg-hub .th-cot .pt{fill:var(--oliva)}
  .home-tg-hub .th-cot .halo{fill:rgba(220,209,84,.25)}
  .home-tg-hub .th-liga .th-ficha{position:absolute;left:50%;transform:translate(-50%,-50%);padding:2px 9px}
  .home-tg-hub .th-liga-in .th-ficha{top:68.25%}
  .home-tg-hub .th-liga-out .th-ficha{top:31.75%}
  .home-tg-hub .th-liga .th-ficha .ico{display:none}

  /* haste do tablet ao BI e a barra numa linha só */
  .home-tg-hub .th-bi{grid-column:1 / -1;grid-row:3}
  .home-tg-hub .th-haste{padding-left:0}
  .home-tg-hub .th-haste svg{margin-inline:auto}
  .home-tg-hub .th-bi-barra{flex-wrap:nowrap;gap:18px;padding:12px 18px}
  .home-tg-hub .th-bi .th-ic{--icw:36px}
  .home-tg-hub .th-bi .th-ic .ico{width:18px;height:18px}
  .home-tg-hub .th-bi-tit{flex:none;flex-wrap:nowrap}
  .home-tg-hub .th-bi-vis{flex:1 1 auto;min-width:0;padding-top:0;border-top:0}
  .home-tg-hub .th-bi-vis li,.home-tg-hub .th-bi-vis li:first-child{padding-left:18px;border-left:1px solid var(--th-borda)}
  .home-tg-hub .th-bi-vis .th-bi-graf{width:44px}
}
}
@media (min-width:1000px) and (max-width:1279px){
  .home-tg-hub .th-papel{position:absolute;width:1px;height:1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0)}
}
@media (min-width:1200px){
  .home-tg-hub{--icw:34px;--pc:14px}
  .home-tg-hub .th-ic .ico{width:17px;height:17px}
  .home-tg-hub .th-bi-vis{font-size:16.5px}
  .home-tg-hub .th-bi-vis li{gap:12px}
}

/* animação: uma vez, quando o mapa entra na tela. Sem JS, com movimento reduzido ou já visível ao carregar, tudo aparece pronto. */
@media (prefers-reduced-motion:no-preference){
  .home-tg-hub .th-armado .th-ficha{opacity:0}
  .home-tg-hub .th-vivo .th-ficha{opacity:1;transition:opacity .35s ease calc(.2s + var(--i,0) * .14s)}
  .home-tg-hub .th-armado .th-cot path{stroke-dasharray:1;stroke-dashoffset:1}
  .home-tg-hub .th-vivo .th-cot path{stroke-dashoffset:0;transition:stroke-dashoffset .7s ease calc(var(--d,0) * 1s)}
  .home-tg-hub .th-armado .th-cot polygon{opacity:0}
  .home-tg-hub .th-vivo .th-cot polygon{opacity:1;transition:opacity .2s ease calc(.65s + var(--d,0) * 1s)}
  .home-tg-hub .th-armado .th-sa-ok{opacity:0}
  .home-tg-hub .th-vivo .th-sa-ok{opacity:1;transition:opacity .3s ease .8s}
}
@media print{
  .home-tg-hub .th-armado .th-ficha,.home-tg-hub .th-armado .th-cot polygon,.home-tg-hub .th-armado .th-sa-ok{opacity:1!important}
  .home-tg-hub .th-armado .th-cot path{stroke-dashoffset:0!important}
}