/* Bloco B3 do case Technogym (#caminho), conceito "Sales App no meio" (protótipo: _proto/tg-hub.html).
   Carregado depois do previa-case.css, só pelo case.html. Todas as regras ficam sob .tg-hub.
   Antes da venda (planejamento, mídia paga e inbound com RD Station, Salesforce) → Sales App → depois da venda (Omie e Senior,
   Mandaê e Jamef, Field Control) → BI. Depois do mapa, o fecho com os três verbos (operamos, integramos, construímos)
   e, na legenda, as hipóteses do "antes" numa lista curta.
   No fio, a "ficha" do que chega a cada etapa, enfiada no fio como uma conta (sem dizer qual sistema envia, quando a fonte não diz).
   Trecho tracejado (.hb-tracejado) = ligação a confirmar. Hoje sem uso: a RD Station → Salesforce foi confirmada (Felipe, 30/09/2026).
   --tx = x do fio a partir da borda de fora do cartão (1px de borda + 16px de respiro + metade do ícone de 36px).
   Dentro do cartão (posição relativa à caixa de dentro, depois da borda), o fio fica em --tx menos 1px.
   Até 620: tudo empilhado, e o tablet e o monitor do BI ocupam a largura toda, com o texto em cima.
   621 a 999: empilhado em 720px; o Sales App com o tablet (300px de desenho; reduzido com zoom --z só de 621 a 699) no fio e o texto ao lado.
   1000+: cinco colunas (antes | fio | tablet | fio | depois) com as linhas de etapa compartilhadas (subgrid):
     linhas 1 cab | 2 etapa | 3 vão | 4 etapa | 5 vão | 6 etapa | 7 haste | 8 BI.
   As etapas têm a mesma altura (1fr): o meio do tablet cai no meio da 2ª etapa, e os cotovelos
   (Salesforce → tablet, tablet → Omie e Senior) são calculados em % da própria caixa, sem JS. */
.tg-hub{--G:38px;--tx:35px;--icw:36px;--o:32px;--R:14px;--z:.78;--TW:calc(300px * var(--z));--F:112px;--L:88px;--fio:3px;--hb-card:rgba(42,8,40,.34);--hb-borda:rgba(255,255,255,.17);--brilho:drop-shadow(0 0 5px rgba(220,209,84,.55))}
.tg-hub .hb{margin-top:clamp(32px,4vw,56px)}
.tg-hub .hb-mapa{display:grid;grid-template-columns:minmax(0,1fr)}
.tg-hub h3{font-size:clamp(1.3rem,1.8vw,1.55rem);font-weight:800;line-height:1.12;color:var(--titulo)}
.tg-hub .hb-kick{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-bottom:8px;font:700 12px/1.3 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--acento)}
.tg-hub .hb-tit{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.tg-hub .hb-sub{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;font-size:15px;font-weight:600;line-height:1.3;color:var(--fg)}

/* papel: construímos (cheio, oliva) ≠ integramos / operamos (contorno) */
.tg-hub .hb-papel{display:inline-block;padding:2px 8px;border:1px solid rgba(255,255,255,.42);border-radius:999px;font:600 12px/1.35 var(--fonte);letter-spacing:0;text-transform:none;color:var(--fg);white-space:nowrap}
.tg-hub .hb-papel.nosso{border-color:var(--oliva);background:var(--oliva);color:var(--roxo-900)}

/* ficha do que passa no fio (o ícone, 14px depois da borda esquerda, fica em cima da linha) */
.tg-hub .hb-ficha{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 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)}
.tg-hub .hb-ficha .ico{width:13px;height:13px;color:var(--oliva);stroke-width:2}

/* cartão de etapas (antes / depois da venda) */
.tg-hub .hb-passos{position:relative;display:grid;row-gap:var(--G);border:1px solid var(--hb-borda);border-radius:var(--raio);background:var(--hb-card)}
.tg-hub .hb-passo{position:relative;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:14px;align-items:start;padding:14px 16px}
.tg-hub .hb-ic{position:relative;z-index:1;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#fff;color:var(--roxo-900)}
.tg-hub .hb-ic .ico{width:18px;height:18px}
.tg-hub .opera .hb-ic{background:var(--roxo-900);color:#fff;box-shadow:inset 0 0 0 2px #fff}
.tg-hub .hb-corpo{display:grid;gap:3px;min-width:0}
.tg-hub .hb-etapa{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;font:700 12px/1.3 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2)}
.tg-hub .hb-etapa .hb-papel{margin-left:auto}
.tg-hub .hb-n{font-variant-numeric:tabular-nums;color:var(--acento)}
.tg-hub .hb-sis{display:block;font-size:17px;font-weight:700;line-height:1.25;color:var(--titulo);text-wrap:balance}
.tg-hub .hb-faz{font-size:14.5px;line-height:1.45;color:var(--fg2);text-wrap:pretty}
/* ficha que chega na etapa: no vão acima dela, enfiada no fio */
.tg-hub .hb-chega{position:absolute;z-index:2;left:calc(var(--tx) - 15px);top:calc(var(--G) / -2);transform:translateY(-50%)}

/* fio empilhado: segmentos de ícone a ícone (ícone preso no topo da etapa: centro a --o do topo) */
.tg-hub .hb-passo::after{content:"";position:absolute;left:calc(var(--tx) - 1px - var(--fio) / 2);width:var(--fio);top:var(--o);bottom:calc(-1 * var(--G) - var(--o));background:var(--oliva)}
.tg-hub .hb-passo:last-child::after{bottom:-1px}
.tg-hub .hb-depois .hb-passo:first-child::before{content:"";position:absolute;left:calc(var(--tx) - 1px - var(--fio) / 2);width:var(--fio);top:-1px;height:calc(var(--o) + 1px);background:var(--oliva)}
/* ligação a confirmar: o trecho que sai desta etapa é tracejado */
.tg-hub .hb-passo.hb-tracejado::after{background:repeating-linear-gradient(180deg,var(--oliva) 0 7px,transparent 7px 13px)}
/* etapas juntas (sem ficha no vão): planejamento e inbound, as duas que a Olivas opera. Empilhado, o vão encolhe para 8px */
.tg-hub .hb-passo.hb-junto{margin-bottom:calc(8px - var(--G))}
.tg-hub .hb-passo.hb-junto::after{bottom:calc(-8px - var(--o))}

/* cabeçalhos */
.tg-hub .hb-cab{padding-bottom:16px}
.tg-hub .hb-depois .hb-cab,.tg-hub .hb-app .hb-cab{position:relative;padding:6px 0 20px calc(var(--tx) + 24px)}
.tg-hub .hb-depois .hb-cab::before,.tg-hub .hb-app .hb-cab::before,.tg-hub .hb-fluxo::before,.tg-hub .hb-junta::before{content:"";position:absolute;left:calc(var(--tx) - var(--fio) / 2);top:0;bottom:0;width:var(--fio);background:var(--oliva)}

/* fluxos entre blocos (empilhado): fio + ficha enfiada nele */
.tg-hub .hb-fluxo{position:relative;display:flex;align-items:center;min-height:54px;margin:0;padding-left:calc(var(--tx) - 14px)}
.tg-hub .hb-ponta,.tg-hub .hb-orig{display:none}

/* as duas entradas do pedido no Sales App (Backlog e After Sales) */
.tg-hub .hb-entra{display:grid;gap:8px;margin-top:14px;font-size:14.5px;font-weight:600;line-height:1.4;color:var(--titulo);text-align:left}
.tg-hub .hb-entra > span{padding-left:10px;border-left:3px solid var(--oliva)}
.tg-hub .hb-rot{margin-right:6px;font:700 12px var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--fg2);white-space:nowrap}

/* o Sales App empilhado: fio, texto, tablet na largura toda, fio */
.tg-hub .hb-app{display:grid;grid-template-columns:minmax(0,1fr)}
.tg-hub .hb-f-in{grid-row:1}
.tg-hub .hb-app .hb-cab{grid-row:2;min-width:0}
.tg-hub .hb-f-out{grid-row:4}

/* o tablet: o mesmo Sales App do topo da página (ilustração), com o anel oliva de "construímos" e um halo.
   Até 620, na largura toda e com a altura do conteúdo; a partir de 621, desenhado com 300px e reduzido com zoom
   (sombras em px "de desenho", divididos por --z) */
.tg-hub .hb-tela{grid-row:3;position:relative;display:flex;flex-direction:column;align-items:stretch;min-width:0}
.tg-hub .hb-tela .tablet{flex:none;box-shadow:0 0 0 3px var(--oliva),0 0 48px 2px rgba(220,209,84,.22),0 24px 44px -22px rgba(0,0,0,.6)}
.tg-hub .hb-tela .sa-trilha li{font-size:11px}
/* as duas entradas, como abas do app (ilustração) */
.tg-hub .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)}
.tg-hub .sa-abas span{padding:5px 8px;border-radius:999px}
.tg-hub .sa-abas .on{background:var(--roxo);color:#fff}

/* haste até o BI (empilhado: o fio segue com a ficha e entra no cartão com uma ponta) */
.tg-hub .hb-junta{position:relative;display:flex;flex-wrap:wrap;align-content:center;gap:6px;min-height:66px;margin:0;padding:10px 0 18px calc(var(--tx) - 14px)}
.tg-hub .hb-junta::before{bottom:10px}
.tg-hub .hb-junta .hb-ponta{display:block;position:absolute;left:calc(var(--tx) - 7px);bottom:0;width:0;height:0;border:7px solid transparent;border-bottom:0;border-top:11px solid var(--oliva)}

/* BI */
.tg-hub .hb-bi-card{position:relative;display:grid;gap:22px;padding:20px 16px 18px;border:1px solid var(--hb-borda);border-radius:var(--raio);background:var(--hb-card)}
.tg-hub .hb-grande{margin-top:14px;font-size:clamp(1.6rem,3.1vw,2.7rem);font-weight:800;line-height:1.08;letter-spacing:-.02em;color:var(--acento);text-wrap:balance}
.tg-hub .hb-bi-txt .hb-faz{margin-top:12px;font-size:15px}

/* monitor do BI (ilustração em CSS, sem dados) */
.tg-hub .hb-monitor{width:100%;max-width:560px}
.tg-hub .hb-mon{padding:10px;border-radius:18px;background:var(--tinta);box-shadow:0 0 0 3px var(--oliva),0 0 56px 2px rgba(220,209,84,.2),0 28px 50px -24px rgba(0,0,0,.6)}
.tg-hub .hb-pe{width:22%;height:20px;margin:0 auto;background:linear-gradient(#34332C,#1F1E19);clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.tg-hub .hb-base{width:38%;height:6px;margin:0 auto;border-radius:6px;background:#1F1E19}
.tg-hub .bi{overflow:hidden;border-radius:10px;background:#fff;color:var(--tinta);font-size:12px;line-height:1.3}
.tg-hub .bi-cab{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--roxo-900);color:#fff}
.tg-hub .bi-cab b{font-size:13px}
.tg-hub .bi-cab span{opacity:.85}
.tg-hub .bi-cab small{margin-left:auto;padding:2px 8px;border:1px solid rgba(255,255,255,.45);border-radius:999px;font:600 10px var(--fonte);letter-spacing:.06em;text-transform:uppercase}
/* as quatro visões do BI, como abas (só os nomes; a de cima do painel é a comercial) */
.tg-hub .bi-visoes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0;padding:0 14px;list-style:none;border-bottom:1px solid #ECEAE0;font-size:11.5px;font-weight:700;line-height:1.2;text-align:center;white-space:nowrap;color:var(--tinta-2)}
.tg-hub .bi-visoes li{padding:9px 0 8px}
.tg-hub .bi-visoes .on{color:var(--roxo);box-shadow:inset 0 -2px 0 var(--roxo)}
.tg-hub .bi-corpo{display:grid;gap:12px;padding:12px 14px 14px}
.tg-hub .bi-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.tg-hub .bi-kpi{display:grid;gap:7px;padding:9px 10px;border-radius:8px;background:#F4F4EF}
.tg-hub .bi-kpi span{display:flex;align-items:center;gap:5px;min-width:0;font-size:11.5px;font-weight:700;color:var(--tinta-2);white-space:nowrap}
.tg-hub .bi-kpi .ico{width:14px;height:14px;color:var(--roxo)}
.tg-hub .bi-kpi .oculto{height:14px}
.tg-hub .bi-baixo{display:grid;gap:12px}
.tg-hub .bi-graf{display:flex;align-items:flex-end;gap:6px;height:78px;padding:0 2px;border-bottom:1px solid #ECEAE0}
.tg-hub .bi-graf i{flex:1;height:var(--h);border-radius:4px 4px 0 0;background:var(--roxo)}
.tg-hub .bi-graf i:nth-child(3n){background:var(--oliva)}
.tg-hub .bi-tab{display:grid;gap:7px}
.tg-hub .bi-tab li{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) 14px;align-items:center;gap:8px}
.tg-hub .bi-tab li.bi-cols{font:600 10px/1 var(--fonte);letter-spacing:.06em;text-transform:uppercase;color:#6B6A62}
.tg-hub .bi-tab .ico{width:14px;height:14px;color:var(--oliva-900);stroke-width:2.4}

/* brilho do fio (todas as peças) */
.tg-hub .hb-passo::after,.tg-hub .hb-depois .hb-passo:first-child::before,.tg-hub .hb-depois .hb-cab::before,.tg-hub .hb-app .hb-cab::before,
.tg-hub .hb-fluxo::before,.tg-hub .hb-fluxo::after,.tg-hub .hb-junta::before,.tg-hub .hb-junta::after,.tg-hub .hb-tela::after{filter:var(--brilho)}
/* no tablet do meio, as etapas seguintes do pedido aparecem feitas (roxo) */
.tg-hub .hb-tela .sa-trilha li:not(.nosso) .sa-ic{border-color:var(--roxo);background:var(--roxo);color:#fff}
.tg-hub .hb-tela .sa-trilha li + li::before{background:var(--roxo)}

/* fecho: os três verbos (é também a legenda dos papéis) */
.tg-hub .hb-fim{position:relative;display:grid;gap:22px;margin-top:clamp(32px,4vw,48px);padding:clamp(22px,3vw,34px);border-radius:22px;background:rgba(42,8,40,.5);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.tg-hub .hb-fim::before{content:"";position:absolute;left:clamp(22px,3vw,34px);top:0;width:64px;height:4px;border-radius:0 0 4px 4px;background:var(--oliva)}
.tg-hub .hb-fim-t{font-size:clamp(28px,3.1vw,40px);font-weight:800;line-height:1.08;letter-spacing:-.015em;color:#fff;text-wrap:balance}
.tg-hub .hb-fim-t em{font-style:normal;color:var(--oliva)}
.tg-hub .hb-fim-k{display:block;margin-bottom:12px;font:700 12px/1.3 var(--fonte);letter-spacing:.08em;text-transform:uppercase;color:var(--oliva)}
.tg-hub .hb-papeis{display:grid;gap:16px}
.tg-hub .hb-lp{display:grid;align-content:start;gap:4px;min-width:0}
.tg-hub .hb-lp + .hb-lp{padding-top:16px;border-top:1px solid var(--linha)}
.tg-hub .hb-lp-ics{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:6px}
.tg-hub .hb-lp-no{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--roxo-900)}
.tg-hub .hb-lp-no .ico{width:17px;height:17px;stroke-width:2}
.tg-hub .hb-lp-no.opera{background:var(--roxo-900);color:#fff;box-shadow:inset 0 0 0 2px #fff}
.tg-hub .hb-lp-no.nosso{background:var(--oliva)}
.tg-hub .hb-lp-verbo{font-size:clamp(24px,2.3vw,30px);font-weight:800;line-height:1.1;letter-spacing:-.01em;color:#fff}
.tg-hub .hb-lp-constroi .hb-lp-verbo{color:var(--oliva)}
.tg-hub .hb-lp-oque{font-size:16px;line-height:1.45;color:var(--fg2);text-wrap:pretty}

/* legenda: o que o desenho quer dizer e, numa lista curta, as hipóteses do "antes" */
.tg-hub .hb-leg{display:grid;gap:12px;margin-top:20px;font-size:14px;line-height:1.5;color:var(--fg2)}
.tg-hub .hb-chave{display:flex;flex-wrap:wrap;gap:8px 20px}
.tg-hub .hb-chave li{display:flex;align-items:center;gap:8px}
.tg-hub .hb-chave i{flex:none}
.tg-hub .hb-chave i.l-ficha{width:24px;height:14px;border:1.5px solid var(--oliva);border-radius:999px;background:var(--roxo-900)}
.tg-hub .hb-chave i.l-trac{width:30px;height:14px;background:repeating-linear-gradient(90deg,var(--oliva) 0 7px,transparent 7px 12px) center / 100% 3px no-repeat}  /* caixa da altura da ficha ao lado, traço no meio */
/* em linha, como uma frase: o rótulo e os itens correm juntos; o ponto fica preso ao item (espaço fixo), então a
   linha quebra depois dele e nunca começa com "·" */
.tg-hub .hb-antes-l .hb-rot,.tg-hub .hb-antes-l ul,.tg-hub .hb-antes-l li{display:inline}
.tg-hub .hb-antes-l li{white-space:nowrap}  /* cada hipótese inteira numa linha; quebra só entre elas */
.tg-hub .hb-antes-l .hb-rot{margin-right:10px;color:var(--acento)}
.tg-hub .hb-antes-l li:not(:last-child)::after{content:"\00a0·";margin-right:8px;opacity:.6}

@media (max-width:374px){
  .tg-hub{--G:34px}
  .tg-hub .bi-visoes{padding:0 10px;font-size:11px}
  .tg-hub .hb-passo{column-gap:12px}
}
@media (max-width:559px){
  .tg-hub .bi-kpi{padding:8px}
  .tg-hub .bi-kpi .ico{display:none}
  .tg-hub .bi-graf{display:none}
  .tg-hub .bi-tab li:nth-child(4){display:none}
  .tg-hub .hb-pe{height:14px}
}
@media (min-width:560px){
  .tg-hub .bi-baixo{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:end}
}
@media (min-width:621px){
  /* alinhado à esquerda, como o título e o texto de cima */
  .tg-hub .hb-mapa,.tg-hub .hb-fim,.tg-hub .hb-leg{max-width:720px}
  .tg-hub .hb-bi-card{padding:24px 26px 26px}
  /* o Sales App: tablet no fio, à esquerda, e o texto ao lado */
  .tg-hub .hb-app{grid-template-columns:var(--TW) minmax(0,1fr);column-gap:28px}
  .tg-hub .hb-app > .hb-fluxo{grid-column:1 / -1}
  .tg-hub .hb-f-out{grid-row:3}
  .tg-hub .hb-app .hb-cab{grid-column:2;grid-row:2;align-self:center;padding:4px 0 8px}
  .tg-hub .hb-app .hb-cab::before{content:none}
  .tg-hub .hb-tela{grid-column:1;grid-row:2;align-items:flex-start}
  .tg-hub .hb-tela::after{content:"";flex:1;min-height:14px;width:var(--fio);margin-left:calc(var(--tx) - var(--fio) / 2);background:var(--oliva)}
  .tg-hub .hb-tela .tablet{width:300px;max-width:none;aspect-ratio:3/4;zoom:var(--z);box-shadow:0 0 0 calc(3px / var(--z)) var(--oliva),0 0 calc(56px / var(--z)) calc(2px / var(--z)) rgba(220,209,84,.24),0 calc(24px / var(--z)) calc(44px / var(--z)) calc(-22px / var(--z)) rgba(0,0,0,.6)}
  .tg-hub .hb-tela .sa-corpo{grid-template-rows:auto auto auto auto 1fr;align-content:stretch;gap:12px;padding:14px 16px}
  .tg-hub .hb-tela .sa-itens{gap:10px;padding:11px 0}
  .tg-hub .hb-tela .sa-fim{align-self:end}
  /* o tablet é reduzido com zoom (--z): o selo e o cabeçalho de coluna, de 10px, renderiam 7,8px. Aqui nunca ficam abaixo de 9px na tela
     (o texto da tela, de 12px, rende 9,4px com --z .78); com --z 1 valem os 10px da regra */
  .tg-hub .hb-tela .sa-cab small,.tg-hub .hb-tela .sa-itens li.sa-cols{font-size:max(10px,calc(9px / var(--z)))}
}
/* 700 a 999 (06/10/2026): o tablet no tamanho do desenho (300px), sem a redução. Com --z .78 ele ficava com 234px e o texto da tela
   caía para 8 a 9px, com folga sobrando na coluna do texto. De 621 a 699 a redução continua, para a coluna do texto não ficar estreita. */
@media (min-width:700px) and (max-width:999px){
  .tg-hub{--z:1}
}

/* ---------- 1000+: o infográfico em cinco colunas ----------
   Só com subgrid (Chrome 117+, Safari 16+, Firefox 71+); sem ele, fica o empilhado de 720px, que funciona em qualquer largura. */
@supports (grid-template-rows:subgrid){
@media (min-width:1000px){
  .tg-hub{--G:48px;--z:.8;--F:120px;--C:calc(300px * var(--z))}
  .tg-hub .hb-fim,.tg-hub .hb-leg{max-width:none}
  .tg-hub .hb-mapa{max-width:none;grid-template-columns:minmax(0,1fr) var(--F) var(--C) var(--F) minmax(0,1fr);grid-template-rows:auto 1fr var(--G) 1fr var(--G) 1fr var(--L) auto}
  .tg-hub .hb-lado{grid-row:1 / 7;display:grid;grid-template-rows:subgrid;min-width:0}
  .tg-hub .hb-antes{grid-column:1}
  .tg-hub .hb-depois{grid-column:5}
  .tg-hub .hb-lado .hb-cab,.tg-hub .hb-depois .hb-cab{grid-row:1;align-self:end;padding:0 0 18px}
  .tg-hub .hb-depois .hb-cab::before{content:none}
  .tg-hub .hb-passos{grid-row:2 / 7;grid-template-rows:subgrid;row-gap:0}
  .tg-hub .hb-passo:nth-child(1){grid-row:1}
  .tg-hub .hb-passo:nth-child(2){grid-row:3}
  .tg-hub .hb-passo:nth-child(3){grid-row:5}
  .tg-hub .hb-passo{align-items:center;padding:14px 16px}
  /* fio do cartão: de ícone a ícone (etapas de mesma altura, ícone no meio: o próximo centro fica a G + 50% do fim desta) */
  .tg-hub .hb-passo::after{top:50%;bottom:calc(-1 * var(--G) - 50%)}
  .tg-hub .hb-passo:last-child::after,.tg-hub .hb-depois .hb-passo:first-child::before{content:none}
  .tg-hub .hb-passo.hb-junto{margin-bottom:0}
  .tg-hub .hb-passo.hb-junto::after{bottom:calc(-1 * var(--G) - 50%)}

  .tg-hub .hb-app{grid-column:2 / 5;grid-row:1 / 7;display:grid;grid-template-columns:subgrid;grid-template-rows:subgrid;column-gap:0;min-width:0}
  /* cabeçalho do meio: largo (as três colunas do meio), para cada entrada do pedido caber em uma linha */
  .tg-hub .hb-app .hb-cab{grid-column:1 / 4;grid-row:1;align-self:end;justify-self:center;max-width:480px;padding:0 0 20px;text-align:center}
  .tg-hub .hb-app .hb-kick,.tg-hub .hb-app .hb-tit{justify-content:center}
  .tg-hub .hb-app .hb-entra{width:fit-content;max-width:100%;margin-inline:auto}
  .tg-hub .hb-tela{grid-column:2;grid-row:2 / 7;align-items:center}
  .tg-hub .hb-tela::before{content:"";flex:1}
  /* fio que desce do tablet até a haste do BI */
  .tg-hub .hb-tela::after{min-height:0;margin-left:0}

  /* cotovelos: sobem da etapa de baixo para a de cima (Salesforce → tablet; tablet → Omie e Senior).
     Ponto oliva na saída, seta na chegada */
  .tg-hub .hb-fluxo{display:grid;place-items:center;min-height:0;padding:0}
  .tg-hub .hb-app > .hb-f-in{grid-column:1;grid-row:4 / 7}
  .tg-hub .hb-app > .hb-f-out{grid-column:3;grid-row:2 / 5}
  .tg-hub .hb-fluxo::before{left:0;right:calc(50% - var(--fio) / 2);top:50%;bottom:calc(25% - var(--G) / 4 - var(--fio) / 2);width:auto;background:none;border-right:var(--fio) solid var(--oliva);border-bottom:var(--fio) solid var(--oliva);border-bottom-right-radius:var(--R)}
  .tg-hub .hb-fluxo::after{content:"";position:absolute;left:calc(50% - var(--fio) / 2);right:0;top:calc(25% - var(--G) / 4 - var(--fio) / 2);bottom:50%;border-left:var(--fio) solid var(--oliva);border-top:var(--fio) solid var(--oliva);border-top-left-radius:var(--R)}
  /* a ficha do cotovelo fica no trecho vertical (a linha passa atrás dela): sem ícone, para sobrar ar dos dois lados */
  .tg-hub .hb-fluxo .hb-ficha{padding:3px 9px}
  .tg-hub .hb-fluxo .hb-ficha .ico{display:none}
  .tg-hub .hb-ponta{display:block;position:absolute;right:-2px;top:calc(25% - var(--G) / 4 - 7px);width:0;height:0;border:7px solid transparent;border-right:0;border-left:11px solid var(--oliva)}
  .tg-hub .hb-orig{display:block;position:absolute;left:-6px;bottom:calc(25% - var(--G) / 4 - 6px);width:12px;height:12px;border-radius:50%;background:var(--oliva);box-shadow:0 0 0 4px rgba(220,209,84,.25)}
  /* a seta que sai do tablet atravessa a borda do cartão e encosta no ícone de 05: o fio não para na borda */
  .tg-hub .hb-app > .hb-f-out{z-index:3}
  .tg-hub .hb-f-out::after{right:calc(var(--icw) / 2 - var(--tx) + 8px)}
  .tg-hub .hb-f-out .hb-ponta{right:calc(var(--icw) / 2 - var(--tx) + 1px)}

  /* haste: do tablet ao BI, com a ficha enfiada nela */
  .tg-hub .hb-bi{grid-column:1 / -1;grid-row:7 / 9}
  .tg-hub .hb-junta{display:grid;justify-items:center;align-content:center;height:var(--L);min-height:0;padding:0 0 14px}
  .tg-hub .hb-junta::before{content:none}
  .tg-hub .hb-junta::after{content:"";position:absolute;left:calc(50% - var(--fio) / 2);top:0;bottom:11px;width:var(--fio);background:var(--oliva)}
  .tg-hub .hb-junta .hb-ponta{right:auto;left:calc(50% - 7px);top:auto;bottom:0;border:7px solid transparent;border-bottom:0;border-top:11px solid var(--oliva)}
  .tg-hub .hb-junta .hb-ficha{padding:3px 10px}
  .tg-hub .hb-junta .hb-ficha .ico{display:none}

  .tg-hub .hb-bi-card{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);align-items:center;gap:clamp(28px,4vw,56px);padding:clamp(28px,3vw,40px)}
  .tg-hub .hb-bi-card h3{font-size:clamp(1.5rem,2vw,1.8rem)}
  .tg-hub .hb-monitor{justify-self:end}

  /* fecho: a frase em cima, os três papéis lado a lado */
  .tg-hub .hb-papeis{grid-template-columns:minmax(0,1.25fr) minmax(0,1.2fr) minmax(0,.85fr);column-gap:0}
  .tg-hub .hb-lp + .hb-lp{padding:0 0 0 clamp(20px,2.4vw,36px);border-top:0;border-left:1px solid var(--linha)}
  .tg-hub .hb-lp:not(:last-child){padding-right:clamp(20px,2.4vw,36px)}
}
}
@media (min-width:1000px) and (max-width:1199px){
  .tg-hub{--tx:31px;--icw:32px;--G:40px;--z:.84;--F:120px}
  .tg-hub .hb-passo{grid-template-columns:32px minmax(0,1fr);column-gap:12px;padding:12px 14px}
  .tg-hub .hb-ic{width:32px;height:32px}
  .tg-hub .hb-ic .ico{width:16px;height:16px}
  .tg-hub .hb-sis{font-size:16px}
  .tg-hub .hb-faz{font-size:14px}
  /* o papel desce para o fim da etapa (sempre no mesmo lugar, em vez de quebrar em umas e não em outras) */
  .tg-hub .hb-etapa{display:contents}
  .tg-hub .hb-etapa .hb-papel{order:9;justify-self:start;margin:5px 0 0}
  /* cabeçalho do meio mais estreito: as entradas quebram em duas linhas, em vez de encostar nos títulos dos lados */
  .tg-hub .hb-app .hb-cab{max-width:calc(var(--C) + 80px)}
}
/* 1000 a 1099: colunas do fio mais estreitas, tablet um pouco menor e cartão com menos respiro */
@media (min-width:1000px) and (max-width:1099px){
  .tg-hub{--F:116px;--z:.8;--tx:29px}
  .tg-hub .hb-passo{column-gap:10px;padding:12px}
  .tg-hub .hb-fluxo .hb-ficha{padding:3px 7px}
}
@media (min-width:1200px){
  .tg-hub{--F:128px;--z:.9}
}
@media (min-width:1300px){
  .tg-hub{--z:1}
}

/* animação (previa-bloco-hub.js): uma vez, quando o mapa entra na tela, as fichas aparecem em sequência e a trilha
   do tablet acende. Sem JS, com movimento reduzido ou já visível ao carregar, tudo aparece pronto. */
@media (prefers-reduced-motion:no-preference){
  .tg-hub .hb-armado .hb-ficha{opacity:0;transform:scale(.8)}
  .tg-hub .hb-vivo .hb-ficha{opacity:1;transform:none;transition:opacity .3s ease calc(var(--i,0) * .13s),transform .35s cubic-bezier(.3,1.5,.5,1) calc(var(--i,0) * .13s)}
  .tg-hub .hb-armado .sa-fechar{opacity:0;transform:translateY(4px)}
  .tg-hub .hb-vivo .sa-fechar{opacity:1;transform:none;transition:opacity .3s ease .33s,transform .3s ease .33s}
  /* :not(.hb-vivo): sem isso, esta regra (mais abaixo e de mesmo peso) vencia a de "feito" e a trilha nunca acendia */
  .tg-hub .hb-armado:not(.hb-vivo) .sa-trilha li:not(.nosso) .sa-ic{border-color:#D9D6CB;background:#fff;color:var(--roxo)}
  .tg-hub .hb-vivo .sa-trilha li:not(.nosso) .sa-ic{transition:background-color .25s ease,border-color .25s ease,color .25s ease}
  .tg-hub .hb-vivo .sa-trilha li:nth-child(1) .sa-ic{transition-delay:.45s}
  .tg-hub .hb-vivo .sa-trilha li:nth-child(2) .sa-ic{transition-delay:.6s}
  .tg-hub .hb-vivo .sa-trilha li:nth-child(3) .sa-ic{transition-delay:.75s}
  .tg-hub .hb-vivo .sa-trilha li:nth-child(4) .sa-ic{transition-delay:.9s}
}
@media print{
  .tg-hub .hb-armado .hb-ficha,.tg-hub .hb-armado .sa-fechar{opacity:1!important}
  .tg-hub .hb-armado .sa-trilha li:not(.nosso) .sa-ic{border-color:var(--roxo)!important;background:var(--roxo)!important;color:#fff!important}
}