/* ================= CUENTA REGRESIVA DE LA APERTURA =================
   Va en la portada en lugar del boton "Crear cuenta gratis" hasta el
   31 de octubre. La pinta js/cuenta-regresiva.js; sin JS se ve el boton. */
.cuenta-regresiva{margin:6px auto 0;max-width:880px}
.cuenta-regresiva[hidden],.hero-cta[hidden]{display:none}
/* El reloj es mas alto que el boton: deja sitio al "Desliza" de abajo. */
.hero:has(.cuenta-regresiva:not([hidden])){padding-bottom:110px}
.cr-titulo{font-family:var(--font-title);text-transform:uppercase;letter-spacing:6px;color:var(--gold-bright);
  font-size:clamp(.78rem,1.6vw,1.05rem);margin-bottom:18px;display:flex;align-items:center;justify-content:center;gap:14px;
  text-shadow:0 0 18px rgba(244,215,116,.45)}
.cr-titulo::before,.cr-titulo::after{content:"";width:clamp(28px,7vw,90px);height:1px;
  background:linear-gradient(90deg,transparent,var(--gold))}
.cr-titulo::after{background:linear-gradient(90deg,var(--gold),transparent)}

.cr-reloj{display:flex;align-items:stretch;justify-content:center;gap:clamp(6px,1.4vw,16px)}
.cr-sep{font-family:var(--font-title);font-weight:700;color:var(--gold-deep);align-self:center;
  font-size:clamp(2rem,6vw,4.6rem);line-height:1;margin-top:-.35em;animation:crLatido 1s steps(1) infinite}
@keyframes crLatido{50%{opacity:.25}}

.cr-caja{position:relative;flex:0 1 auto;min-width:clamp(70px,17vw,176px);
  padding:clamp(12px,2.2vw,24px) clamp(6px,1.5vw,18px) clamp(10px,1.6vw,16px);
  background:linear-gradient(180deg,rgba(28,22,36,.92),rgba(10,8,14,.94));
  border:1px solid var(--border-mid);border-radius:10px;
  box-shadow:0 18px 48px rgba(0,0,0,.7),inset 0 1px 0 rgba(244,215,116,.18),0 0 34px rgba(212,175,55,.16);
  animation:crBrillo 3.2s ease-in-out infinite}
/* esquinas ornamentales, como las tarjetas del sitio */
.cr-caja::after{content:"";position:absolute;inset:7px;pointer-events:none;opacity:.6;
  background:
    linear-gradient(var(--gold),var(--gold)) left top/14px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left top/1px 14px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right top/14px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right top/1px 14px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left bottom/14px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) left bottom/1px 14px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right bottom/14px 1px no-repeat,
    linear-gradient(var(--gold),var(--gold)) right bottom/1px 14px no-repeat}
@keyframes crBrillo{
  0%,100%{box-shadow:0 18px 48px rgba(0,0,0,.7),inset 0 1px 0 rgba(244,215,116,.18),0 0 26px rgba(212,175,55,.12)}
  50%{box-shadow:0 18px 48px rgba(0,0,0,.7),inset 0 1px 0 rgba(244,215,116,.3),0 0 52px rgba(212,175,55,.32)}}

.cr-num{display:block;font-family:var(--font-title);font-weight:900;line-height:1;
  font-size:clamp(2.6rem,9.5vw,7.4rem);font-variant-numeric:tabular-nums;letter-spacing:1px;
  background:linear-gradient(180deg,#fff6cf 0%,var(--gold-bright) 38%,var(--gold) 62%,var(--gold-deep) 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 0 rgba(60,40,5,.85)) drop-shadow(0 0 22px rgba(244,215,116,.35))}
.cr-num.cr-cambio{animation:crGolpe .45s var(--ease-out)}
@keyframes crGolpe{0%{transform:translateY(-14%) scale(1.06);opacity:.35}100%{transform:none;opacity:1}}
.cr-lbl{display:block;margin-top:clamp(6px,1vw,10px);color:var(--text-dim);text-transform:uppercase;
  letter-spacing:clamp(1px,.4vw,3px);font-size:clamp(.6rem,1.3vw,.82rem);font-family:var(--font-title)}

.cr-pie{margin-top:18px;color:#cfc7b6;font-size:clamp(.9rem,1.8vw,1.05rem);text-shadow:0 2px 12px rgba(0,0,0,.9)}
.cr-pie b{color:var(--gold-bright);font-weight:600}

@media (max-width:560px){
  .cr-sep{display:none}
  .cr-reloj{gap:8px}
  .cr-caja{min-width:0;flex:1 1 0}
  .cr-titulo{letter-spacing:3px}
  .cr-caja::after{inset:5px;opacity:.45}
  .cr-lbl{letter-spacing:.5px;font-size:.56rem}
}
@media (prefers-reduced-motion:reduce){
  .cr-sep,.cr-caja,.cr-num.cr-cambio{animation:none}
}