@font-face {
  font-family: "TikTok Sans Display";
  src: url("/fonts/TikTok-Sans-Display-Bold.otf") format("opentype");
  font-weight: bold;
  font-style: normal;
}

.count-down {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-family: "TikTok Sans Display", sans-serif;
}

.timer {
  display: flex;
  gap: 40px;
  margin: 1em 0;
}

.timer-box {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 205px;
  width: 205px;
  font-size: 130px;
  padding: 30px 0;
  font-weight: bold;
  line-height: 123px;
  border-radius: 24.238px;
  background: rgba(255, 255, 255, 0.4);
  background-blend-mode: soft-light;
  backdrop-filter: blur(33.93281555175781px);
}

.time-text {
  color: #fff;
  text-align: center;
  font-size: 31.733px;
  font-weight: 700;
  line-height: 30.147px; /* 95% */
  text-transform: uppercase;
  margin-top: 23px;
}

/* --- Estilos responsivos --- */
@media (max-width: 976px) {
  .timer {
    gap: 20px;
    flex-wrap: wrap;
    justify-content: center;
    flex-direction: column;
  }

  .timer-box {
    width: 134px;
    height: 120px;
    font-size: 85px;
    padding: 20px 0;
  }

  .time-text {
    font-size: 20px;
    margin-top: 15px;
  }
}