/* TSR Countdown styles (v1.0.2) */
.tsr-countdown {
  --accent: #9a3628;
  --fg: #111111;
  --muted: #6b7280;
  --track: #d1d5db;
  /* Fluid ring size */
  --ring-size: clamp(84px, 20vw, 138px);
  /* Space reserved for label below the ring */
  --label-gap: 1.7rem;
  font-family: "Funnel Display", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: var(--fg);
  display: grid;
  gap: 1.1rem;
  justify-items: center;
  margin: 0.5rem 0 1.5rem;
}
.tsr-countdown h2 {
  margin: 0.25rem 0 0.25rem;
  font-weight: 600;
  font-size: clamp(1.15rem, 2.4vw, 1.9rem);
  letter-spacing: .02em;
  text-align: center;
}
.tsr-ring-wrap {
  display: grid;
  grid-template-columns: repeat(4, minmax(120px, 1fr));
  gap: clamp(0.6rem, 2vw, 1.1rem);
  width: 100%;
  max-width: 980px;
}
.tsr-seg {
  position: relative;
  width: var(--ring-size);
  height: var(--ring-size);
  margin-inline: auto;
  /* add margin so label never choca con el siguiente bloque */
  margin-bottom: calc(var(--label-gap) + .4rem);
}
.tsr-svg { width: 100%; height: 100%; }
.tsr-track { stroke: var(--track); opacity: 0.9; }
.tsr-progress {
  stroke: var(--accent);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.12));
  transition: stroke-dashoffset .8s linear, stroke .2s ease;
}
.tsr-val {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-weight: 600;
  font-size: clamp(1.05rem, 5.2vw, 1.8rem);
}
.tsr-num { line-height: 1; letter-spacing: .02em; }
.tsr-label {
  position: absolute;
  bottom: calc(var(--label-gap) * -1);
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(.68rem, 2vw, .78rem);
  letter-spacing: .1em;
  color: var(--muted);
}
.tsr-footer {
  margin-top: 0.75rem;
  color: var(--muted);
  font-size: .9rem;
  text-align: center;
}
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* Tablets y móviles: 2 columnas, aros más pequeños y más espacio para etiquetas */
@media (max-width: 820px) {
  .tsr-countdown { --ring-size: clamp(82px, 18vw, 120px); --label-gap: 1.8rem; }
  .tsr-ring-wrap { grid-template-columns: repeat(2, minmax(130px, 1fr)); gap: 1rem; }
}

/* Móviles normales */
@media (max-width: 480px) {
  .tsr-countdown { --ring-size: clamp(74px, 36vw, 100px); --label-gap: 1.9rem; }
  .tsr-ring-wrap { gap: .9rem; }
  .tsr-val { font-size: clamp(1rem, 6vw, 1.4rem); }
}

/* Muy pequeños (<=380px): opción 1 columna para evitar "apretado" */
@media (max-width: 380px) {
  .tsr-countdown { --ring-size: clamp(70px, 44vw, 92px); --label-gap: 2rem; }
  .tsr-ring-wrap { grid-template-columns: 1fr; gap: .85rem; }
  .tsr-label { font-size: .72rem; }
}