/* =========================================================
   MARK: RELOJ BASE - Compatibilidad count-section
   Uso recomendado: base minima para relojes formales.
   Compatible con: .count-section, .countdown, .count-box y reloj-base.js.
   No depende de: ningun demo especifico.
   ========================================================= */

/* MARK: Variables */
.count-section[class*="reloj-"] {
  --reloj-base-ink: var(--reloj-ink, #231f1a);
  --reloj-base-muted: var(--reloj-muted, #75695b);
  --reloj-base-accent: var(--reloj-accent, #b99048);
  --reloj-base-line: var(--reloj-line, rgba(185, 144, 72, 0.34));
  color: var(--reloj-base-ink);
  box-sizing: border-box;
}

.count-section[class*="reloj-"] *,
.count-section[class*="reloj-"] *::before,
.count-section[class*="reloj-"] *::after {
  box-sizing: border-box;
}

/* MARK: Contenedor principal */
.count-section[class*="reloj-"] {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  gap: clamp(14px, 3vw, 24px);
  width: min(100%, 680px);
  margin-inline: auto;
  overflow: hidden;
}

/* MARK: Titulo */
.count-section[class*="reloj-"] .eyebrow {
  position: relative;
  z-index: 3;
  margin: 0;
  text-align: center;
}

/* MARK: Orbita / reloj */
.count-section[class*="reloj-"] .countdown {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(100%, 460px);
}

/* MARK: Tarjetas de tiempo */
.count-section[class*="reloj-"] .count-box {
  min-width: 0;
  text-align: center;
}

/* MARK: Numeros */
.count-section[class*="reloj-"] .count-box strong {
  display: block;
  line-height: 1;
}

/* MARK: Etiquetas */
.count-section[class*="reloj-"] .count-box span {
  display: block;
  overflow-wrap: anywhere;
}

/* MARK: Boton calendario */
.count-section[class*="reloj-"] .text-button {
  position: relative;
  z-index: 4;
  cursor: pointer;
}

/* MARK: Decoraciones */
.count-section[class*="reloj-"]::before,
.count-section[class*="reloj-"]::after {
  pointer-events: none;
}

/* MARK: Responsive escritorio */
@media (min-width: 980px) {
  .count-section[class*="reloj-"] {
    min-height: var(--reloj-min-height-desktop, 620px);
  }
}

/* MARK: Responsive tablet */
@media (max-width: 900px) {
  .count-section[class*="reloj-"] {
    width: min(100%, calc(100vw - 28px));
  }
}

/* MARK: Responsive iPhone / moviles */
@media (max-width: 640px) {
  .count-section[class*="reloj-"] {
    min-height: var(--reloj-min-height-mobile, 520px);
    padding-inline: max(14px, env(safe-area-inset-left, 0px));
  }
}