*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%; height: 100%;
  overflow: hidden;
  background: #121614;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: #F4F6F5;
}

canvas#bg {
  position: fixed; inset: 0;
  width: 100%; height: 100%;
  z-index: 0;
  filter: blur(28px);
  transform: scale(1.08); /* evita bordes oscuros del blur */
}

.vignette {
  position: fixed; inset: 0;
  background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 20%, rgba(12,16,14,.65) 100%);
  z-index: 1; pointer-events: none;
}

/* ─── Main layout ─── */
main {
  position: relative; z-index: 10;
  height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 2rem; text-align: center;
}

/* ─── Status label ─── */
.label {
  font-size: .62rem; font-weight: 500;
  letter-spacing: .32em; text-transform: uppercase;
  color: rgba(118,144,131,.6);
  margin-bottom: 2.2rem;
  opacity: 0;
  animation: fadein .9s ease .2s forwards;
}

/* ─── Logo ─── */
.logo {
  font-size: clamp(3.8rem, 11vw, 9rem);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: 1;
  color: #F4F6F5;
  margin-bottom: 1.4rem;
  opacity: 0;
  animation: fadein .9s ease .45s forwards;
}

/* ─── Thin rule under logo ─── */
.rule {
  width: clamp(36px, 5vw, 56px);
  height: 1px;
  background: rgba(244,246,245,.14);
  margin-bottom: 1.6rem;
  opacity: 0;
  animation: fadein .9s ease .6s forwards;
}

/* ─── Tagline ─── */
.tagline {
  font-size: clamp(.78rem, 1.7vw, .96rem);
  font-weight: 300;
  color: rgba(244,246,245,.3);
  letter-spacing: .04em;
  line-height: 1.7;
  max-width: 560px;
  margin-bottom: 3.6rem;
  opacity: 0;
  animation: fadein .9s ease .75s forwards;
}

/* ─── Countdown ─── */
.countdown {
  display: flex; align-items: flex-start;
  gap: clamp(.8rem, 2.2vw, 2.2rem);
  margin-bottom: 3rem;
  opacity: 0;
  animation: fadein .9s ease .9s forwards;
}

.cd-sep {
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 200;
  color: rgba(244,246,245,.1);
  margin-top: clamp(.5rem, 1.1vw, .75rem);
  line-height: 1;
}

.cd-item { display: flex; flex-direction: column; align-items: center; gap: .45rem; }

.cd-num {
  font-size: clamp(1.8rem, 4.2vw, 3rem);
  font-weight: 600; line-height: 1;
  color: #F4F6F5;
  font-variant-numeric: tabular-nums;
  min-width: clamp(52px, 6.5vw, 80px);
  text-align: center;
}

.cd-label {
  font-size: .57rem; font-weight: 400;
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(118,144,131,.5);
}

/* ─── Vertical divider ─── */
.divider {
  width: 1px; height: 28px;
  background: linear-gradient(to bottom, transparent, rgba(244,246,245,.1), transparent);
  margin-bottom: 2rem;
  opacity: 0;
  animation: fadein .9s ease 1.1s forwards;
}

/* ─── Contact ─── */
.contact {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none;
  color: rgba(201,181,154,.38);
  font-size: .78rem; font-weight: 400;
  letter-spacing: .04em;
  transition: color .4s ease;
  opacity: 0;
  animation: fadein .9s ease 1.2s forwards;
}
.contact:hover { color: rgba(201,181,154,.75); }
.contact svg { flex-shrink: 0; opacity: .4; transition: opacity .4s ease; }
.contact:hover svg { opacity: .68; }

/* ─── Footer ─── */
footer {
  position: fixed; bottom: 1.8rem;
  width: 100%; text-align: center;
  font-size: .6rem; font-weight: 400;
  color: rgba(244,246,245,.12);
  letter-spacing: .14em;
  z-index: 10;
  opacity: 0;
  animation: fadein .9s ease 1.5s forwards;
}

/* ─── Animation ─── */
@keyframes fadein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 420px) {
  .cd-sep { display: none; }
  .countdown { gap: .55rem; }
  .tagline { font-size: .8rem; }
}