/* ============================================================================
   Torres de estatística da home (assets/torres.js)
   A seção é alta (a rolagem é o "tempo" da cena) e o palco fica preso na tela.
   ========================================================================== */
/* overflow visível: as seções da home têm overflow:hidden, e isso desliga o
   position:sticky do palco (o ancestral vira o "rolador" do sticky) */
#desempenho.torres { position: relative; height: 250vh; overflow: visible; padding: 0; }
.tr-pin { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.tr-palco {
  width: 100%; max-width: 1180px; height: 100%; margin: 0 auto;
  padding: calc(var(--cx-nav-h, 80px) + 26px) 24px 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.tr-cabecalho h2 { margin: 6px 0 6px; }
.tr-cabecalho .section-lede { max-width: 70ch; margin: 0; }

.tr-cena {
  position: relative; flex: 1; min-height: 200px; border-radius: 16px; overflow: hidden;
  border: 3px solid #1f2748; background: #0a0e1f;
  box-shadow: 0 10px 0 #070a18, 0 18px 34px rgba(0, 0, 0, .5);
}
#trCanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.tr-rotulos { position: absolute; left: 0; right: 0; bottom: 0; height: 16%; pointer-events: none; }
.tr-rotulo {
  position: absolute; bottom: 8%; transform: translateX(-50%); text-align: center; line-height: 1.3;
  font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #c9d2ea; text-shadow: 0 1px 0 #000, 0 0 6px #000;
}
.tr-rotulo i { display: block; font-style: normal; white-space: nowrap; max-width: 11ch; overflow: hidden; text-overflow: ellipsis; margin: 0 auto; }
.tr-rotulo b { color: var(--cor, #ffd43b); font-weight: 700; white-space: nowrap; }
.tr-rotulo.relogio i { color: #ffe08a; }

.tr-numeros { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.tr-numeros div {
  background: rgba(10, 15, 32, .85); border: 1px solid rgba(148, 163, 184, .18); border-radius: 12px; padding: 10px 14px;
}
.tr-numeros b { display: block; font-size: 19px; color: #f8fafc; line-height: 1.2; }
.tr-numeros span { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #94a3b8; }

@media (max-width: 760px) {
  .tr-palco { padding: calc(var(--cx-nav-h, 64px) + 8px) 14px 14px; gap: 10px; }
  .tr-cabecalho .section-lede { font-size: 13.5px; line-height: 1.5; }
  .tr-rotulo i { display: none; }
  .tr-rotulo { font-size: 10px; }
  .tr-numeros { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .tr-numeros div { padding: 7px 8px; }
  .tr-numeros b { font-size: 15px; }
  .tr-numeros span { font-size: 9.5px; }
  .tr-numeros div:nth-child(n+4) { display: none; }   /* hoje e sequência ficam no perfil */
}

/* sem movimento: a cena já aparece pronta, sem prender a rolagem */
#desempenho.torres.tr-sem-rolagem { height: auto; }
.tr-sem-rolagem .tr-pin { position: static; height: auto; }
.tr-sem-rolagem .tr-palco { height: auto; padding-top: 60px; }
.tr-sem-rolagem .tr-cena { flex: none; height: 56vh; }