.disc-xs {
      position: relative;
      width: 5%;
      padding-bottom: 5%;
      border-radius: 50%;
      background: conic-gradient(
        red calc(var(--disc-d, 0%) * 1%),
        yellow calc(var(--disc-d, 0%) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%)) * 1%),
        green calc((var(--disc-d, 0%) + var(--disc-i, 0%)) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%)) * 1%),
        blue calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%)) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%) + var(--disc-c, 0%)) * 1%),
        white 0%,
        white 100%
      );
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    

    .disc-sm {
      position: relative;
      width: 10%;
      padding-bottom: 10%;
      border-radius: 50%;
      background: conic-gradient(
        red calc(var(--disc-d, 0%) * 1%),
        yellow calc(var(--disc-d, 0%) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%)) * 1%),
        green calc((var(--disc-d, 0%) + var(--disc-i, 0%)) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%)) * 1%),
        blue calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%)) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%) + var(--disc-c, 0%)) * 1%),
        white 0%,
        white 100%
      );
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    .disc-md {
      position: relative;
      width: 30%;
      padding-bottom: 30%;
      border-radius: 50%;
      background: conic-gradient(
        red calc(var(--disc-d, 0%) * 1%),
        yellow calc(var(--disc-d, 0%) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%)) * 1%),
        green calc((var(--disc-d, 0%) + var(--disc-i, 0%)) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%)) * 1%),
        blue calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%)) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%) + var(--disc-c, 0%)) * 1%),
        white 0%,
        white 100%
      );
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    .disc-lg {
      position: relative;
      width: 35%;
      padding-bottom: 35%;
      border-radius: 50%;
      background: conic-gradient(
        red calc(var(--disc-d, 0%) * 1%),
        yellow calc(var(--disc-d, 0%) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%)) * 1%),
        green calc((var(--disc-d, 0%) + var(--disc-i, 0%)) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%)) * 1%),
        blue calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%)) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%) + var(--disc-c, 0%)) * 1%),
        white 0%,
        white 100%
      );
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    .disc-xl {
      position: relative;
      width: 70%;
      padding-bottom: 70%;
      border-radius: 50%;
      background: conic-gradient(
        red calc(var(--disc-d, 0%) * 1%),
        yellow calc(var(--disc-d, 0%) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%)) * 1%),
        green calc((var(--disc-d, 0%) + var(--disc-i, 0%)) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%)) * 1%),
        blue calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%)) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%) + var(--disc-c, 0%)) * 1%),
        white 0%,
        white 100%
      );
      overflow: hidden;
      box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    }

    .disc-md::before {
      content: "";
      position: absolute;
      top: 5%;
      left: 5%;
      bottom: 5%;
      right: 5%;
      border-radius: 50%;
      background: conic-gradient(
        red calc(var(--disc-d, 0%) * 1%),
        yellow calc(var(--disc-d, 0%) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%)) * 1%),
        green calc((var(--disc-d, 0%) + var(--disc-i, 0%)) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%)) * 1%),
        blue calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%)) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%) + var(--disc-c, 0%)) * 1%),
        white 0%,
        white 100%
      );
    }

    .disc-lg::before {
      content: "";
      position: absolute;
      top: 5%;
      left: 5%;
      bottom: 5%;
      right: 5%;
      border-radius: 50%;
      background: white;
    }

    .disc-xl::before {
      content: "";
      position: absolute;
      top: 5%;
      left: 5%;
      bottom: 5%;
      right: 5%;
      border-radius: 50%;
      background: white;
    }

    .disc-sm::before {
      content: "";
      position: absolute;
      top: 5%;
      left: 5%;
      bottom: 5%;
      right: 5%;
      border-radius: 50%;
      background: conic-gradient(
        red calc(var(--disc-d, 0%) * 1%),
        yellow calc(var(--disc-d, 0%) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%)) * 1%),
        green calc((var(--disc-d, 0%) + var(--disc-i, 0%)) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%)) * 1%),
        blue calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%)) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%) + var(--disc-c, 0%)) * 1%),
        white 0%,
        white 100%
      );
    }

    .disc-xs::before {
      content: "";
      position: absolute;
      top: 5%;
      left: 5%;
      bottom: 5%;
      right: 5%;
      border-radius: 50%;
      background: conic-gradient(
        red calc(var(--disc-d, 0%) * 1%),
        yellow calc(var(--disc-d, 0%) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%)) * 1%),
        green calc((var(--disc-d, 0%) + var(--disc-i, 0%)) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%)) * 1%),
        blue calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%)) * 1%) calc((var(--disc-d, 0%) + var(--disc-i, 0%) + var(--disc-s, 0%) + var(--disc-c, 0%)) * 1%),
        white 0%,
        white 100%
      );
    }

    .disc .img-container {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 80%;
      height: 80%;
      border-radius: 50%;
      overflow: hidden;
    }

    .disc .img-container img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

 

/* Hover Effect */
.disc:not(.no-hoverdisc):hover {
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  transform: scale(1.05);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

/* Seu CSS existente */

/* Novo CSS para a legenda */
.legend-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  margin-right: 20px;
}

.color {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 8px;
}

.red {
  background-color: red;
}

.yellow {
  background-color: yellow;
}

.green {
  background-color: green;
}

.blue {
  background-color: blue;
}

.disc-label {
  position: absolute;
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 16px;
  color: white;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 5px 10px;
  border-radius: 5px;
}