/* =============================================================
   Cachopería Vikinga — Abriremos pronto
   ============================================================= */
:root {
  --bg:         #080808;
  --bg-panel:   #121212;
  --white:      #FFFFFF;
  --white-70:   rgba(255,255,255,0.72);
  --white-45:   rgba(255,255,255,0.45);
  --gold:       #F5B83D;
  --line:       rgba(255,255,255,0.14);
  --line-gold:  rgba(245,184,61,0.35);

  --display: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--white);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
[hidden] { display: none !important; }
::selection { background: var(--gold); color: var(--bg); }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ---------- Layout ---------- */
.soon {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 1rem 1.5rem;
  overflow: clip;
  text-align: center;
}
.halo {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(36% 30% at 50% 26%, rgba(245,184,61,.26), transparent 70%),
    radial-gradient(30% 22% at 50% 100%, rgba(245,184,61,.10), transparent 70%);
  filter: blur(50px);
  pointer-events: none;
  animation: glow 6s ease-in-out infinite alternate;
}
@keyframes glow {
  from { opacity: .7; transform: scale(1); }
  to   { opacity: 1;  transform: scale(1.06); }
}
.knot {
  position: absolute;
  width: min(120vw, 900px);
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  fill: none;
  stroke: var(--gold);
  stroke-width: .35;
  opacity: .07;
  pointer-events: none;
  animation: spin 120s linear infinite;
}
@keyframes spin { to { rotate: 360deg; } }

.inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 46rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.15rem;
  flex: 1;
  justify-content: center;
}
.inner > * { animation: rise .9s var(--ease-out) both; }
.inner > :nth-child(2) { animation-delay: .12s; }
.inner > :nth-child(3) { animation-delay: .22s; }
.inner > :nth-child(4) { animation-delay: .32s; }
.inner > :nth-child(n+5) { animation-delay: .42s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Contenido ---------- */
.logo {
  width: min(62vw, 300px);
  height: auto;
  filter: drop-shadow(0 24px 40px rgba(0,0,0,.6));
  animation: rise .9s var(--ease-out) both, float 5s ease-in-out .9s infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-10px); }
}
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.eyebrow::before {
  content: "";
  width: 7px; height: 7px;
  background: var(--gold);
  border-radius: 50%;
}
.title {
  font-family: var(--display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: clamp(3.4rem, 14vw, 7.5rem);
  line-height: .9;
}
.title em { font-style: normal; color: var(--gold); }
.sub {
  color: var(--white-70);
  font-size: 1.08rem;
  max-width: 38ch;
  text-wrap: pretty;
}

/* ---------- Cuenta atrás ---------- */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .6rem;
  width: 100%;
  max-width: 30rem;
  margin-top: .6rem;
}
.unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: .9rem .3rem .8rem;
  background: var(--bg-panel);
  border: 1px solid var(--line-gold);
  border-radius: 14px;
}
.unit span {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.1rem, 9vw, 3.2rem);
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.unit small {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--white-45);
}
.date { font-weight: 600; font-size: .98rem; }
.date::first-letter { text-transform: uppercase; }

/* ---------- Ventajas ---------- */
.perks {
  display: grid;
  gap: .6rem;
  width: 100%;
  max-width: 40rem;
  margin-top: .8rem;
}
.perks li {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  padding: .85rem 1rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(18,18,18,.6);
}
.perks strong {
  font-family: var(--display);
  font-size: 1.25rem;
  text-transform: uppercase;
  color: var(--gold);
  line-height: 1.1;
}
.perks span { font-size: .88rem; color: var(--white-70); }

/* ---------- Botones ---------- */
.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: .6rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .9rem 1.6rem;
  min-height: 48px;
  border-radius: 999px;
  font-weight: 700;
  font-size: .98rem;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s, color .25s;
}
.btn-gold { background: var(--gold); color: var(--bg); }
.btn-gold:hover { box-shadow: 0 10px 30px -8px rgba(245,184,61,.55); transform: translateY(-2px); }
.btn-ghost { border: 1.5px solid rgba(255,255,255,.35); }
.btn-ghost:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }

.foot {
  position: relative;
  z-index: 1;
  margin-top: 2.5rem;
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--white-45);
}

@media (min-width: 720px) {
  .countdown { gap: .9rem; }
  .unit { padding: 1.2rem .5rem 1rem; }
  .perks { grid-template-columns: repeat(3, 1fr); }
}