.gauge-container {
  position: relative;
  width: 340px;      /* Tamanho fixo ou altere para max-width */
  height: 170px;
  margin: 40px auto;
  /* Para centralizar no Bootstrap: */
  display: flex;
  justify-content: center;
  align-items: center;
}
.gauge-arc {
  width: 100%;
  height: 100%;
  border-radius: 170px 170px 0 0/170px 170px 0 0;
  background: linear-gradient(90deg, #e74c3c 0%, #fbc02d 50%, #2ecc71 100%);
  position: absolute;
  top: 0; left: 0;
  z-index: 1;
}
.gauge-pointer {
  position: absolute;
  width: 8px;
  height: 75%;
  left: 50%;
  bottom: 20;
  transform-origin: bottom center;
  border-radius: 8px;
  z-index: 2;
  transition: transform 0.5s cubic-bezier(.4,2,.5,1);
}
.gauge-value {
  position: absolute;
  left: 0; right: 0;
  bottom: 22px;
  text-align: center;
  font-size: 2.5rem;
  color: #555;
  font-weight: bold;
  z-index: 3;
}
.gauge-label {
  position: absolute;
  left: 0; right: 0;
  bottom: -8px;
  text-align: center;
  font-size: 1.1rem;
  color: #888;
  z-index: 3;
}