/* =============================================================
   TuringForge — Página do produto: "Prova viva"
   Barras de duelo antes/depois + contadores animados (sem libs).
   ============================================================= */

.tf-duel-panel {
  box-shadow: 0 20px 60px -30px rgba(6, 182, 212, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.03) inset;
}

.tf-duel-track {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tf-duel-bar {
  position: relative;
  height: 44px;
  width: 0%;
  min-width: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: width 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.tf-duel-bar .tf-duel-label {
  position: absolute;
  left: 14px;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.tf-bar-antes {
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.05));
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #94a3b8;
}

.tf-bar-depois {
  background: linear-gradient(90deg, rgba(6, 182, 212, 0.85), rgba(59, 130, 246, 0.85));
  border: 1px solid rgba(34, 211, 238, 0.4);
  color: #050E1F;
  box-shadow: 0 8px 30px -12px rgba(34, 211, 238, 0.6);
}

.tf-bar-depois.tf-bar-invertida {
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.9), rgba(6, 182, 212, 0.9));
  border-color: rgba(16, 185, 129, 0.45);
  color: #03130a;
  box-shadow: 0 8px 30px -12px rgba(16, 185, 129, 0.55);
}

.tf-bar-ram {
  background: linear-gradient(90deg, rgba(245, 158, 11, 0.9), rgba(139, 92, 246, 0.9));
  border: 1px solid rgba(245, 158, 11, 0.45);
  color: #160f02;
  box-shadow: 0 8px 30px -12px rgba(245, 158, 11, 0.55);
}

/* contadores */
[data-count] {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  .tf-duel-bar {
    transition: none;
  }
}