/* ============================================================
   PunchyPass · Próximamente — Apple-style refinement
   Uses design/tokens.css as base
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100vh; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  transition: background 280ms var(--ease-standard), color 280ms var(--ease-standard);
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* ─── BACKDROP ─────────────────────────────────────── */
.bg-stage {
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: var(--gradient-welcome);
}
.bg-grid {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, black 0%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 38%, black 0%, transparent 75%);
}
.bg-orb {
  position: fixed; pointer-events: none; z-index: 1;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.5;
  animation: drift 18s ease-in-out infinite alternate;
}
.bg-orb--a {
  width: 600px; height: 600px;
  background: radial-gradient(circle, rgba(109,40,217,0.4), transparent 70%);
  top: -200px; left: -100px;
}
.bg-orb--b {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(99,102,241,0.35), transparent 70%);
  bottom: -150px; right: -100px;
  animation-delay: -8s;
}
@keyframes drift {
  0%   { transform: translate(0, 0) scale(1); }
  100% { transform: translate(40px, 30px) scale(1.08); }
}

/* ─── NAV ──────────────────────────────────────────── */
.nav {
  position: relative; z-index: 10;
  padding: 28px 36px;
  display: flex; align-items: center; justify-content: space-between;
}
.nav__brand { display: inline-flex; align-items: center; }
.nav__lockup {
  height: 48px;
  width: auto; display: block;
  transition: opacity 200ms var(--ease-standard);
}
.nav__brand:hover .nav__lockup { opacity: 0.85; }
.lang {
  display: inline-flex; align-items: center;
  padding: 4px;
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.lang button {
  border: none; background: transparent;
  padding: 7px 16px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--color-text-secondary);
  border-radius: var(--radius-pill);
  transition: all 180ms var(--ease-standard);
}
.lang button.is-on {
  background: var(--color-text);
  color: var(--color-bg);
}

/* ─── MAIN ─────────────────────────────────────────── */
.main {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  padding: 16px 24px 80px;
  text-align: center;
}

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--color-primary-soft) 100%, transparent);
  border: 1px solid var(--color-primary-ring);
  color: var(--color-primary);
  animation: fadeUp 600ms 0.05s var(--ease-standard) both;
}
.eyebrow .pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-primary);
  position: relative;
  flex: none;
}
.eyebrow .pulse::after {
  content: ''; position: absolute; inset: 0; border-radius: 50%;
  background: var(--color-primary);
  animation: pulse 2s ease-out infinite;
}
@keyframes pulse {
  0%   { transform: scale(1); opacity: 0.9; }
  100% { transform: scale(3.2); opacity: 0; }
}
@keyframes fadeUp {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ─── DECK (hero card + ghosts) ────────────────────── */
.deck {
  position: relative;
  width: min(420px, 92%);
  margin: 48px 0 40px;
  height: 360px;
  display: flex; align-items: center; justify-content: center;
  perspective: 1500px;
  animation: deckIn 1.2s 0.1s cubic-bezier(0.2, 0.85, 0.3, 1.05) both;
}
@keyframes deckIn {
  0%   { opacity: 0; transform: translateY(28px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.deck__glow {
  position: absolute;
  bottom: -10px; left: 8%; right: 8%;
  height: 100px;
  background: radial-gradient(60% 60% at 50% 50%, rgba(109,40,217,0.55), transparent 70%);
  filter: blur(28px);
  z-index: -1;
  animation: glowPulse 5s ease-in-out infinite;
}
@keyframes glowPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%      { opacity: 1; transform: scale(1.08); }
}

.deck__ghost {
  position: absolute;
  width: 100%; max-width: 380px;
  top: 50%; left: 50%;
  transform-origin: center;
  pointer-events: none;
  filter: blur(0.5px);
}
.deck__ghost--back1 {
  transform: translate(-50%, -50%) translateX(48px) translateY(-12px) scale(0.86) rotate(6deg);
  opacity: 0.55;
}
.deck__ghost--back2 {
  transform: translate(-50%, -50%) translateX(-46px) translateY(-22px) scale(0.78) rotate(-7deg);
  opacity: 0.4;
  filter: blur(1.5px);
}

.deck__main {
  width: 100%; max-width: 380px;
  transition: transform 220ms cubic-bezier(0.2, 0.6, 0.2, 1);
  transform-style: preserve-3d;
  will-change: transform;
}

/* ─── PKPass card ──────────────────────────────────── */
.pk {
  border-radius: 24px;
  padding: 22px 24px 24px;
  color: #fff;
  display: flex; flex-direction: column; gap: 18px;
  position: relative; overflow: hidden;
  box-shadow:
    0 40px 70px -25px rgba(0, 0, 0, 0.55),
    0 20px 30px -15px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.pk--ghost {
  height: 220px;
  border-radius: 24px;
  box-shadow:
    0 30px 60px -25px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,255,255,0.08);
}

.pk__head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 10px; font-weight: 700; letter-spacing: 0.1em;
}
.pk__head .pk__brand {
  display: inline-flex; align-items: center; gap: 7px;
  opacity: 0.9;
}
.pk__head .pk__brand svg { width: 14px; height: 14px; }
.pk__biz {
  font-size: 22px; font-weight: 700; letter-spacing: -0.015em;
  line-height: 1.1;
}
.pk__stamps {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px;
}
.pk__st {
  aspect-ratio: 1; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  border: 1.5px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.08);
  transition: transform 380ms cubic-bezier(0.2, 1.4, 0.4, 1),
              background 220ms ease, border-color 220ms ease, opacity 220ms ease;
  opacity: 0.55;
}
.pk__st.is-on {
  background: #fff; border-color: #fff; opacity: 1;
  animation: stampIn 520ms cubic-bezier(0.2, 1.4, 0.4, 1);
}
.pk__st.is-pop { transform: scale(1.18); }
@keyframes stampIn {
  0%   { transform: scale(0.4) rotate(-25deg); opacity: 0; }
  60%  { transform: scale(1.22) rotate(8deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.pk__reward {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.2);
  font-size: 12px;
}
.pk__reward .gift {
  display: inline-flex; align-items: center; gap: 7px; font-weight: 600;
}
.pk__reward .ratio {
  font-weight: 700; font-variant-numeric: tabular-nums;
}

/* Shine sweep */
.pk__shine {
  position: absolute;
  top: -50%; left: -30%; width: 60%; height: 200%;
  background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,0.18) 50%, transparent 70%);
  transform: rotate(15deg) translateX(-100%);
  animation: shine 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes shine {
  0%, 55% { transform: rotate(15deg) translateX(-100%); }
  75%     { transform: rotate(15deg) translateX(250%); }
  100%    { transform: rotate(15deg) translateX(250%); }
}

/* ─── HEADLINE ─────────────────────────────────────── */
.headline {
  margin: 12px 0 22px;
  font-size: clamp(2.6rem, 7.5vw, 6rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 0.98;
  max-width: 17ch;
  text-wrap: balance;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 0.05em 0.18em;
}
.headline__w {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  animation: wordIn 700ms cubic-bezier(0.2, 0.8, 0.25, 1) forwards;
}
.headline__w.is-hi {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--brand-violet-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes wordIn {
  0%   { opacity: 0; transform: translateY(28px); }
  100% { opacity: 1; transform: translateY(0); }
}

.lede {
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  line-height: 1.55;
  max-width: 580px;
  color: var(--color-text-secondary);
  margin: 0 auto;
  text-wrap: pretty;
  animation: fadeUp 600ms 0.55s var(--ease-standard) both;
}

/* ─── BULLETS ──────────────────────────────────────── */
.bullets {
  margin: 36px auto 0;
  display: flex; gap: 10px 28px;
  flex-wrap: wrap; justify-content: center;
  list-style: none; padding: 0;
  max-width: 740px;
  font-size: 0.925rem;
  color: var(--color-text);
}
.bullets li {
  display: inline-flex; align-items: center; gap: 9px;
  opacity: 0; transform: translateY(8px);
  animation: fadeUp 540ms var(--ease-standard) forwards;
}
.bullets__dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--color-primary);
  flex: none;
}

/* ─── COUNTDOWN ────────────────────────────────────── */
.cd {
  margin: 56px auto 0;
  display: flex; flex-direction: column; align-items: center; gap: 18px;
  animation: fadeUp 700ms 0.85s var(--ease-standard) both;
}
.cd__grid {
  display: flex; align-items: flex-end; gap: 6px;
}
.cd__cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 0 12px;
  min-width: 80px;
}
.cd__num {
  font-size: clamp(2.6rem, 5.5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.cd__lbl {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  margin-top: 2px;
}
.cd__sep {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--color-text-secondary);
  opacity: 0.4;
  line-height: 1;
  padding-bottom: 14px;
  user-select: none;
}
.cd__date {
  font-size: 0.95rem;
  color: var(--color-text-secondary);
  letter-spacing: -0.005em;
}
.cd__dateStrong {
  color: var(--color-text);
  font-weight: 600;
}

.cdLive {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 36px auto 0;
  padding: 12px 22px;
  background: rgba(16,185,129,0.12);
  border: 1px solid rgba(16,185,129,0.35);
  border-radius: var(--radius-pill);
  color: var(--color-success);
  font-weight: 600;
}
.cdLive__dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-success);
  box-shadow: 0 0 0 4px rgba(16,185,129,0.2);
  animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); }
  50%      { box-shadow: 0 0 0 8px rgba(16,185,129,0); }
}

/* ─── FORM ─────────────────────────────────────────── */
.form {
  margin: 44px auto 0;
  display: flex; gap: 8px;
  width: 100%; max-width: 500px;
  padding: 6px;
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: var(--shadow-lg);
  transition: border-color 200ms var(--ease-standard),
              box-shadow 200ms var(--ease-standard);
  animation: fadeUp 700ms 1.05s var(--ease-standard) both;
}
.form:focus-within {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg), 0 0 0 4px var(--color-primary-soft);
}
.form input {
  flex: 1; min-width: 0;
  background: transparent; border: none; outline: none;
  padding: 13px 18px;
  color: var(--color-text);
  font-family: inherit; font-size: 1rem;
}
.form input::placeholder { color: var(--color-text-secondary); }
.form button {
  border: none;
  background: var(--color-primary);
  color: #fff;
  font-weight: 600; font-size: 0.95rem;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  display: inline-flex; align-items: center; gap: 7px;
  transition: background 200ms var(--ease-standard),
              transform 120ms var(--ease-standard);
  white-space: nowrap;
}
.form button:hover { background: var(--color-primary-dark); }
.form button:active { transform: scale(0.97); }
.formHint {
  margin: 14px auto 0;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  animation: fadeUp 600ms 1.2s var(--ease-standard) both;
}

.formSuccess {
  margin: 40px auto 0;
  max-width: 500px;
  padding: 20px 24px;
  background: color-mix(in srgb, var(--color-success) 8%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent);
  border-radius: var(--radius-xl);
  display: flex; align-items: center; gap: 16px;
  text-align: left;
  animation: fadeUp 500ms var(--ease-standard) both;
}
.formSuccess__check {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--color-success); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.formSuccess__t { font-weight: 600; color: var(--color-text); }
.formSuccess__s { font-size: 0.875rem; color: var(--color-text-secondary); margin-top: 2px; }

/* ─── WALLETS ──────────────────────────────────────── */
.wallets {
  margin: 56px auto 0;
  display: flex; align-items: center; gap: 16px;
  flex-wrap: wrap; justify-content: center;
  animation: fadeUp 700ms 1.3s var(--ease-standard) both;
}
.wallets__lbl {
  font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.14em; font-size: 0.7rem;
  color: var(--color-text-secondary);
}
.wallets .wbadge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  background: color-mix(in srgb, var(--color-surface) 80%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text);
  font-weight: 500;
  font-size: 0.875rem;
  letter-spacing: -0.005em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.wallets .wbadge svg { width: 18px; height: 18px; }

/* ─── MX BADGE ─────────────────────────────────────── */
.mxBadge {
  margin: 32px auto 0;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px 6px 6px;
  background: color-mix(in srgb, var(--color-surface) 60%, transparent);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  letter-spacing: 0.01em;
  animation: fadeUp 700ms 1.45s var(--ease-standard) both;
}
.mxBadge svg {
  border-radius: 2px;
  overflow: hidden;
  flex: none;
}

/* ─── FOOTER ───────────────────────────────────────── */
.footer {
  position: relative; z-index: 2;
  padding: 36px 32px 32px;
  border-top: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
  background: color-mix(in srgb, var(--color-surface) 40%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.footer__inner {
  max-width: 1100px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
.footer__brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 0.85rem; font-weight: 500;
  color: var(--color-text-secondary);
}
.footer__brand img { height: 22px; }
.footer__links {
  display: inline-flex; gap: 18px; align-items: center;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
}
.footer__links a {
  display: inline-flex; align-items: center; gap: 6px;
  transition: color 180ms var(--ease-standard);
}
.footer__links a:hover { color: var(--color-text); }
.footer__links svg { width: 16px; height: 16px; }

/* ─── LIGHT THEME ──────────────────────────────────── */
html[data-theme="light"] {
  --color-bg:            #fffcf9;
  --color-surface:       #ffffff;
  --color-surface-hover: #f5f1ea;
  --color-border:        #e8e1d4;
  --color-text:          #152f5a;
  --color-text-secondary:#5f6b85;
  --color-primary:       #6d28d9;
  --color-primary-dark:  #5b21b6;
  --color-primary-soft:  rgb(109 40 217 / 0.08);
  --color-primary-ring:  rgb(109 40 217 / 0.20);
  --gradient-welcome:    linear-gradient(135deg, #fffcf9 0%, #faf6ef 50%, #fffcf9 100%);
  --shadow-md:  0 4px 14px -2px rgb(21 47 90 / 0.08);
  --shadow-lg:  0 16px 32px -8px rgb(21 47 90 / 0.10);
}
html[data-theme="light"] .bg-grid {
  background-image:
    linear-gradient(rgba(21,47,90,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(21,47,90,0.04) 1px, transparent 1px);
}
html[data-theme="light"] .bg-orb { opacity: 0.35; }

/* ─── RESPONSIVE ───────────────────────────────────── */
@media (max-width: 720px) {
  .nav { padding: 18px 20px; }
  .nav__lockup { height: 38px; }
  .main { padding: 8px 18px 56px; }
  .deck { width: 92%; height: 300px; margin: 32px 0 16px; }
  .deck__main, .deck__ghost { max-width: 320px; }
  .pk { padding: 18px 20px 20px; gap: 14px; }
  .form { flex-direction: column; padding: 8px; border-radius: var(--radius-lg); }
  .form button { width: 100%; justify-content: center; padding: 14px; }
  .form input { padding: 12px 14px; }
  .cd__cell { min-width: 64px; padding: 0 6px; }
  .cd__num { font-size: 2.2rem; }
  .cd__sep { padding-bottom: 10px; }
  .bullets { font-size: 0.85rem; gap: 10px 18px; }
}
@media (max-width: 420px) {
  .cd__cell { min-width: 52px; padding: 0 4px; }
  .cd__num { font-size: 1.8rem; }
  .cd__sep { font-size: 1.4rem; }
}
@media (max-width: 420px) {
  .cd__cell { min-width: 52px; padding: 0 4px; }
  .cd__num { font-size: 1.8rem; }
  .cd__sep { font-size: 1.4rem; }
}