/* ──────────────────────────────────────────
   Evergreen Timer Pro — Frontend Styles
   ────────────────────────────────────────── */

.etp-wrapper {
  text-align: center;
  margin: 28px 0;
  font-family: Arial, Helvetica, sans-serif;
}

.etp-headline {
  margin-bottom: 14px;
  font-size: 18px;
  line-height: 1.4;
}

/* Timer box */
.etp-timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #111111;
  color: #ffffff;
  padding: 18px 28px;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}

.etp-block {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  min-width:      64px;
}

.etp-digits {
  font-size:             52px;
  font-weight:           700;
  line-height:           1;
  font-variant-numeric:  tabular-nums;
  letter-spacing:        -1px;
}

.etp-label {
  font-size:      11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  opacity:        .65;
  margin-top:     5px;
}

.etp-sep {
  font-size:     52px;
  font-weight:   700;
  line-height:   1;
  margin-bottom: 18px; /* empuja el ':' a la altura de los números */
  opacity:       .8;
}

/* CTA bajo el timer */
.etp-cta {
  margin-top: 22px;
}

/* Responsive */
@media (max-width: 480px) {
  .etp-digits,
  .etp-sep {
    font-size: 38px;
  }
  .etp-block {
    min-width: 48px;
  }
  .etp-timer {
    padding: 14px 18px;
  }
}