/* ═══════════════════════════════════════════════════════════════
   LotoDigital — Design System v2
   Lima eléctrico #C6F432 sobre casi-negro #0B0D10
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&display=swap');

/* ── Tokens ─────────────────────────────────────────────────── */
:root {
  --bg:        #0B0D10;
  --bg-elev:   #14171C;
  --bg-elev-2: #1B1F26;
  --line:      rgba(255,255,255,0.08);
  --line-2:    rgba(255,255,255,0.14);
  --fg:        #F4F5F7;
  --fg-dim:    #9CA3AF;
  --fg-muted:  #9CA3AF;
  --accent:    #C6F432;
  --accent-ink:#0B0D10;
  --hot:       #FF5A4E;
  --gold:      #FFC542;
  --good:      #2BD37C;
  --radius-sm: 10px;
  --radius:    14px;
  --radius-lg: 22px;
  --shadow:    0 1px 0 rgba(255,255,255,0.04) inset, 0 6px 30px rgba(0,0,0,0.4);
}

/* ── Base ────────────────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', 'Helvetica Neue', system-ui, sans-serif;
  background-color: var(--bg);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Space Grotesk', 'Helvetica Neue', system-ui, sans-serif !important;
}

/* ── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg-elev); }
::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: var(--fg-muted); }

/* ── Mobile menu ─────────────────────────────────────────────── */
[x-cloak] { display: none !important; }
.mobile-menu { transition: max-height .3s ease, opacity .3s ease; }
.mobile-menu.closed { max-height: 0; opacity: 0; overflow: hidden; }
.mobile-menu.open   { max-height: 400px; opacity: 1; }

/* ── Hero ────────────────────────────────────────────────────── */
.hero-gradient {
  background-color: var(--bg);
  position: relative;
}
.hero-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 60% at 20% 50%, rgba(198,244,50,0.14) 0%, transparent 65%),
    radial-gradient(ellipse 55% 65% at 85% 50%, rgba(255,90,78,0.10) 0%, transparent 65%);
  pointer-events: none;
}

/* ── Glass (dark) ────────────────────────────────────────────── */
.glass {
  background: rgba(20,23,28,0.82);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.10);
}

/* ── Cards ───────────────────────────────────────────────────── */
.prize-card {
  background: var(--bg-elev);
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--line);
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.prize-card:hover {
  border-color: var(--line-2);
  box-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.prize-card-img {
  transition: all 0.5s cubic-bezier(0.4,0,0.2,1);
}
.past-draw-card .prize-card-img {
  filter: grayscale(100%) opacity(0.45);
}
.past-draw-card:hover .prize-card-img {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.05);
}

/* ── Neumorph ────────────────────────────────────────────────── */
.neumorph-sm {
  background: var(--bg-elev);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.neumorph-sm:hover {
  border-color: var(--line-2);
}

/* ── Hover lift ──────────────────────────────────────────────── */
.hover-grow { transition: transform 0.3s cubic-bezier(0.175,0.885,0.32,1.275); }
.hover-grow:hover { transform: translateY(-4px); }

/* ── Swiper overrides ────────────────────────────────────────── */
.swiper-button-next, .swiper-button-prev {
  color: var(--accent) !important;
  background: var(--bg-elev-2);
  width: 38px !important;
  height: 38px !important;
  border-radius: 50%;
  border: 1px solid var(--line);
}
.swiper-button-next::after, .swiper-button-prev::after {
  font-size: 13px !important;
  font-weight: 800;
}
.swiper-pagination-bullet { background: var(--fg-muted); opacity: 1; }
.swiper-pagination-bullet-active { background: var(--accent); opacity: 1; }

/* ── Ticker linear ───────────────────────────────────────────── */
.winners-ticker .swiper-wrapper,
.winners-gallery-swiper .swiper-wrapper {
  transition-timing-function: linear !important;
}

/* ── Section pill label ──────────────────────────────────────── */
.section-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(198,244,50,0.08);
  color: var(--accent);
  padding: 4px 14px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid rgba(198,244,50,0.18);
}

/* ── Buttons ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 11px 20px !important;
  border-radius: var(--radius) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  font-family: 'Inter', sans-serif !important;
  line-height: 1 !important;
  transition: transform .12s, filter .15s, box-shadow .15s, background .15s;
  white-space: nowrap !important;
  cursor: pointer !important;
  border: none !important;
  text-decoration: none !important;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent) !important; color: var(--accent-ink) !important; }
.btn-primary:hover { filter: brightness(1.08); box-shadow: 0 0 0 4px rgba(198,244,50,0.2); }
.btn-ghost { background: rgba(255,255,255,0.06) !important; color: var(--fg) !important; border: 1px solid var(--line) !important; }
.btn-ghost:hover { background: rgba(255,255,255,0.10) !important; }
.btn-danger { background: rgba(255,90,78,0.12) !important; color: var(--hot) !important; border: 1px solid rgba(255,90,78,0.2) !important; }
.btn-danger:hover { background: rgba(255,90,78,0.20) !important; }
.btn-sm { padding: 7px 14px !important; font-size: 12px !important; border-radius: var(--radius-sm) !important; }
.btn-lg { padding: 15px 28px !important; font-size: 16px !important; border-radius: var(--radius-lg) !important; }
.btn-block { width: 100% !important; display: flex !important; }

/* ── Form fields ─────────────────────────────────────────────── */
.field-label {
  display: block !important;
  font-size: 11px !important;
  color: var(--fg-dim) !important;
  margin-bottom: 6px !important;
  font-family: 'JetBrains Mono', monospace !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}
.field-input {
  width: 100% !important;
  padding: 12px 16px !important;
  background: var(--bg) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  color: var(--fg) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 14px !important;
  transition: border-color .15s, box-shadow .15s;
  outline: none !important;
  -webkit-appearance: none;
  appearance: none;
}
.field-input:focus { border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(198,244,50,0.15) !important; }
.field-input::placeholder { color: var(--fg-muted) !important; opacity: 1 !important; }
.field-input:-webkit-autofill,
.field-input:-webkit-autofill:hover,
.field-input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 40px #14171C inset !important;
  -webkit-text-fill-color: #F4F5F7 !important;
  transition: background-color 9999s ease-in-out 0s;
}
select.field-input { cursor: pointer; }

/* ── Dark cards ──────────────────────────────────────────────── */
.card {
  background: var(--bg-elev) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius-lg) !important;
  transition: border-color 0.2s;
}
.card:hover { border-color: var(--line-2); }
.card-2 { background: var(--bg-elev-2); border: 1px solid var(--line); border-radius: var(--radius); }

/* ── Alerts ──────────────────────────────────────────────────── */
.alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600; display: flex; align-items: center; gap: 10px; border: 1px solid; }
.alert-error   { background: rgba(255,90,78,0.10);  color: var(--hot);    border-color: rgba(255,90,78,0.20); }
.alert-success { background: rgba(43,211,124,0.10); color: var(--good);   border-color: rgba(43,211,124,0.20); }
.alert-warning { background: rgba(255,197,66,0.10); color: var(--gold);   border-color: rgba(255,197,66,0.20); }
.alert-info    { background: rgba(198,244,50,0.08); color: var(--accent); border-color: rgba(198,244,50,0.18); }

/* ── Badge ───────────────────────────────────────────────────── */
.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; font-family: 'JetBrains Mono', monospace; }
.badge-good   { background: rgba(43,211,124,0.12);  color: var(--good); }
.badge-hot    { background: rgba(255,90,78,0.12);   color: var(--hot); }
.badge-gold   { background: rgba(255,197,66,0.12);  color: var(--gold); }
.badge-accent { background: rgba(198,244,50,0.10);  color: var(--accent); }
.badge-muted  { background: rgba(255,255,255,0.06); color: var(--fg-muted); }

/* ── Section helpers ─────────────────────────────────────────── */
.section-title { font-family: 'Space Grotesk', sans-serif; font-size: clamp(22px,3vw,32px); font-weight: 700; letter-spacing: -0.02em; color: var(--fg); margin: 0 0 4px; }
.section-sub   { font-size: 14px; color: var(--fg-dim); margin: 0; }

/* ── Combo number display ────────────────────────────────────── */
.combo-display { background: rgba(198,244,50,0.08); border: 1px solid rgba(198,244,50,0.18); border-radius: var(--radius-sm); padding: 8px 14px; font-family: 'JetBrains Mono', monospace; font-size: 14px; font-weight: 600; color: var(--accent); letter-spacing: 0.1em; display: flex; align-items: center; gap: 8px; }

/* ── Stat card ───────────────────────────────────────────────── */
.stat-card { background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.stat-label { font-size: 10px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: 0.08em; font-family: 'JetBrains Mono', monospace; margin-bottom: 6px; }
.stat-value { font-family: 'Space Grotesk', sans-serif; font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: var(--fg); }

/* ── Plan card label (radio selector) ───────────────────────── */
.plan-label { color: #F4F5F7 !important; }
input.peer:checked ~ div .plan-label { color: #C6F432 !important; }

/* ── Table ───────────────────────────────────────────────────── */
.dark-table { width: 100%; border-collapse: collapse; }
.dark-table th { padding: 10px 14px; text-align: left; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--fg-muted); font-family: 'JetBrains Mono', monospace; border-bottom: 1px solid var(--line); }
.dark-table td { padding: 12px 14px; font-size: 13px; color: var(--fg-dim); border-bottom: 1px solid var(--line); vertical-align: middle; }
.dark-table tr:last-child td { border-bottom: none; }
.dark-table tr:hover td { background: rgba(255,255,255,0.02); }