:root {
  --page: #f4f7fb;
  --surface: #ffffff;
  --ink: #172033;
  --muted: #667085;
  --line: #d9e1ec;
  --dark: #101827;
  --dark-2: #182235;
  --gold: #4f8dff;
  --gold-2: #c4b5fd;
  --green: #0f9f6e;
  --blue: #2878d7;
  --red: #d92d52;
  --shadow: 0 18px 42px rgba(17, 24, 39, .11);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--page); color: var(--ink); }
button, input { font: inherit; }
button:disabled { opacity: .65; cursor: not-allowed; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; }
[hidden] { display: none !important; }

.site { width: min(1220px, 100%); margin: 0 auto; padding-bottom: 34px; }
.topnav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 68px;
  padding: 0 18px;
  background: rgba(255, 255, 255, .92);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(14px);
}
.logo { display: flex; align-items: baseline; gap: 6px; white-space: nowrap; }
.logo strong { font-size: 22px; color: var(--dark); }
.logo span { color: var(--gold); font-weight: 900; }
.domain-pill {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
}
.topnav nav { display: flex; gap: 8px; align-items: center; overflow-x: auto; scrollbar-width: none; }
.topnav nav::-webkit-scrollbar { display: none; }
.topnav nav a {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 13px;
  border-radius: 10px;
  color: #344054;
  font-size: 14px;
  font-weight: 850;
  white-space: nowrap;
}
.topnav nav a:hover, .nav-cta { background: #dbe6ff; color: #1e3a8a !important; }

.access-gate {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 18px;
  background:
    linear-gradient(90deg, rgba(16, 24, 39, .92), rgba(16, 24, 39, .72)),
    url("/recargas/img/topup-hero.webp") center/cover no-repeat;
}
.access-card {
  width: min(430px, 100%);
  padding: 22px;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 28px 80px rgba(0,0,0,.38);
}
.access-card h1 { margin-top: 10px; font-size: 34px; line-height: 1.05; color: var(--dark); }
.access-card p { margin: 10px 0 18px; color: var(--muted); line-height: 1.45; }

.hero {
  position: relative;
  min-height: 500px;
  margin: 18px;
  overflow: hidden;
  border-radius: 22px;
  background: var(--dark);
  box-shadow: var(--shadow);
}
.hero picture { display: contents; }
.hero__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(16,24,39,.94), rgba(16,24,39,.62) 52%, rgba(16,24,39,.16)),
    linear-gradient(180deg, rgba(16,24,39,.04), rgba(16,24,39,.72));
}
.hero__content {
  position: relative;
  z-index: 1;
  min-height: 500px;
  max-width: 620px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 42px;
}
.hero__content::before {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: min(360px, 82vw);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url("/recargas/img/panther-logo-extraido-square.webp") center/contain no-repeat;
  opacity: .16;
  filter: saturate(.9) contrast(1.08);
  pointer-events: none;
  z-index: -1;
}
.badge {
  width: fit-content;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  background: #dbe6ff;
  color: #1e1b4b;
  border: 1px solid #8b5cf6;
  font-size: 12px;
  font-weight: 950;
}
h1 { margin-top: 13px; color: #fff; font-size: clamp(46px, 7vw, 78px); line-height: .92; letter-spacing: 0; }
.hero p { margin-top: 15px; color: #edf4ff; font-size: 18px; line-height: 1.45; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 24px; }
.social-links,
.footer-socials {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.social-links {
  margin-top: 12px;
}
.social-promo {
  width: min(520px, 100%);
  margin-top: 16px;
  padding: 14px;
  border: 1px solid rgba(79,141,255,.36);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(79,141,255,.20), rgba(255,255,255,.08)),
    rgba(8, 11, 18, .62);
  box-shadow: 0 18px 48px rgba(0,0,0,.28);
  backdrop-filter: blur(10px);
}
.social-promo > span {
  display: block;
  color: #c4b5fd;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}
.social-promo strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-size: 18px;
  line-height: 1.2;
}
.social-links a,
.footer-socials a {
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}
.social-links a:hover,
.footer-socials a:hover {
  border-color: rgba(79,141,255,.45);
  background: rgba(79,141,255,.14);
  color: #c4b5fd;
}
.social-promo .social-links a,
.social-band__actions a {
  min-height: 42px;
  border: 0;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 13px;
  box-shadow: 0 12px 28px rgba(0,0,0,.20);
}
.social-tiktok {
  background: linear-gradient(135deg, #12141c, #00f2ea 52%, #ff0050) !important;
  color: #fff !important;
}
.social-instagram {
  background: linear-gradient(135deg, #f58529, #dd2a7b 48%, #8134af) !important;
  color: #fff !important;
}
.social-band {
  width: min(1180px, calc(100% - 32px));
  margin: 14px auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  padding: 18px;
  border: 1px solid rgba(79,141,255,.26);
  border-radius: 10px;
  background:
    radial-gradient(circle at 8% 20%, rgba(79,141,255,.22), transparent 28%),
    linear-gradient(135deg, rgba(18,20,28,.98), rgba(20,28,42,.96));
  box-shadow: 0 18px 45px rgba(0,0,0,.22);
}
.social-band h2 {
  margin: 10px 0 5px;
  color: #fff;
  font-size: 26px;
  line-height: 1.1;
}
.social-band p {
  margin: 0;
  color: #cbd5e1;
  line-height: 1.45;
}
.social-band__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.hero-primary, .hero-secondary {
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  border-radius: 12px;
  font-weight: 950;
}
.hero-primary { background: var(--gold); color: #231700; }
.hero-secondary { color: #fff; border: 1px solid rgba(255,255,255,.32); background: rgba(255,255,255,.1); }
.hero-arrow{width:16px;height:16px;margin-left:6px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}
.hero-card {
  position: absolute;
  z-index: 2;
  right: 28px;
  bottom: 28px;
  width: min(310px, calc(100% - 56px));
  padding: 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.94);
  box-shadow: 0 20px 52px rgba(0,0,0,.22);
}
.hero-card span { color: var(--muted); font-size: 12px; font-weight: 900; text-transform: uppercase; }
.hero-card strong { display: block; margin-top: 5px; font-size: 25px; }
.hero-card p { margin-top: 7px; color: var(--muted); line-height: 1.4; }

.trust-row {
  margin: 18px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.trust-row div, .section, .checkout-main, .summary-card, .process, .orders-section {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow);
}
.trust-row div { display: grid; grid-template-columns: 42px 1fr; column-gap: 12px; padding: 15px; align-items: center; }
.trust-row b {
  grid-row: span 2;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #e9f2ff;
  color: var(--blue);
}
.trust-row strong { display: block; }
.trust-row span { color: var(--muted); font-size: 13px; margin-top: 2px; }

.flow-strip {
  margin: 0 18px 28px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.flow-step {
  display: grid;
  grid-template-columns: 38px 1fr;
  gap: 9px;
  align-items: center;
  min-height: 74px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.flow-step b {
  grid-row: span 2;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--gold);
  color: #041008;
  font-weight: 950;
}
.flow-step strong { color: var(--ink); }
.flow-step span { color: var(--muted); font-size: 12px; }
.flow-step.done {
  border-color: rgba(32, 196, 122, .40);
  background: rgba(32, 196, 122, .10);
}
.flow-step.done b {
  background: #20c47a;
  color: #06140d;
}

.section, .orders-section { margin: 18px; padding: 18px; }
.section-head, .panel-head { margin-bottom: 14px; }
.section-head span, .panel-head span {
  color: #9a6400;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}
.section-head h2, .panel-head h2, .orders__head h2, .process h2 { margin-top: 4px; font-size: 25px; color: var(--dark); }
.panel-head p { margin-top: 5px; color: var(--muted); line-height: 1.45; }

.game-card {
  display: grid;
  grid-template-columns: 150px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f9fbff;
}
.game-card img { width: 150px; height: 104px; object-fit: cover; border-radius: 10px; }
.game-card strong { display: block; font-size: 24px; }
.game-card p { margin-top: 4px; color: var(--muted); line-height: 1.45; }
.game-card a {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--dark);
  color: #fff;
  font-weight: 900;
}

.popular-grid, .packs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.popular-grid { margin-top: 14px; }
.popular-card, .pack {
  position: relative;
  min-height: 142px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(17,24,39,.06);
}
.popular-card::before, .pack::before {
  content: "Free Fire";
  display: inline-flex;
  min-height: 23px;
  align-items: center;
  padding: 0 8px;
  border-radius: 999px;
  background: #dbe6ff;
  color: #1e1b4b;
  font-size: 11px;
  font-weight: 950;
  margin-bottom: 11px;
}
.popular-card strong, .pack strong { display: block; font-size: 20px; line-height: 1.12; }
.popular-card small, .pack small { display: block; margin-top: 7px; color: var(--muted); }
.popular-card b, .pack b { display: block; margin-top: 12px; color: var(--green); font-size: 19px; }
.pack em {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 7px;
  border-radius: 999px;
  background: #e8fff5;
  color: #057a55;
  font-size: 10px;
  font-style: normal;
  font-weight: 950;
}
.stock-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  padding: 4px;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.9);
  background: #e8fff5;
  color: #057a55;
  font-size: 10px;
  line-height: 1.05;
  font-weight: 950;
  text-align: center;
  box-shadow: 0 10px 22px rgba(17,24,39,.12);
}
.stock-badge.out-stock {
  background: #fff0f2;
  color: var(--red);
}
.pack.active, .popular-card:hover { border-color: var(--gold); box-shadow: 0 16px 34px rgba(79,141,255,.18); }

.checkout {
  margin: 18px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 370px;
  gap: 18px;
  align-items: start;
}
.checkout-main, .summary-card, .process { padding: 18px; }
.checkout-side { position: sticky; top: 86px; display: grid; gap: 14px; }
.step { display: flex; gap: 12px; align-items: center; margin: 20px 0 12px; }
.step > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--dark);
  color: #fff;
  font-weight: 950;
}
.step h2 { font-size: 19px; }
.step p { margin-top: 2px; color: var(--muted); font-size: 13px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.field { display: block; margin-bottom: 12px; }
.field span { display: block; margin-bottom: 6px; color: #344054; font-size: 13px; font-weight: 850; }
.field input, .tab, .payment {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  outline: none;
}
.field input { padding: 0 13px; }
.field input:focus { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(40,120,215,.12); }
.input-action {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 0 !important;
}
.input-action button {
  min-height: 48px;
  border: 1px solid rgba(79,141,255,.34);
  border-radius: 12px;
  padding: 0 12px;
  background: rgba(79,141,255,.12);
  color: var(--clean-gold);
  font-weight: 950;
  cursor: pointer;
}
.input-action button:hover {
  border-color: rgba(79,141,255,.55);
}
.search-field input { background: #f9fbff; }
.verify-btn {
  width: 100%;
  min-height: 46px;
  margin: -2px 0 10px;
  border: 1px solid #bcd8ff;
  border-radius: 12px;
  background: #edf6ff;
  color: #175aa6;
  font-weight: 950;
  cursor: pointer;
}
.verify-box {
  min-height: 42px;
  margin-bottom: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #f9fbff;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.verify-box.ok { border-color: #a9e8d0; background: #ecfff7; color: #057a55; }
.verify-box.error { border-color: #ffc1cd; background: #fff1f4; color: var(--red); }
.player-card {
  margin: 0 0 14px;
  padding: 14px;
  border: 1px solid rgba(79,141,255,.28);
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(79,141,255,.10), rgba(255,255,255,.02));
}
.player-card__head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  margin-bottom: 12px;
}
.player-card__head span {
  color: var(--gold);
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}
.player-card__head strong { color: #fff; font-size: 20px; text-align: right; }
.player-card__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.player-card__grid div {
  min-height: 58px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
}
.player-card__grid span {
  display: block;
  color: var(--muted);
  font-size: 11px;
  font-weight: 850;
}
.player-card__grid strong {
  display: block;
  margin-top: 4px;
  color: var(--ink);
  font-size: 13px;
  overflow-wrap: anywhere;
}
.player-signature {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,.08);
  color: var(--muted);
  line-height: 1.4;
}
.tabs, .payments { display: grid; gap: 10px; }
.tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; }

.game-picker {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 20px 0 24px;
}

.game-option {
  position: relative;
  display: grid;
  grid-template-columns: minmax(140px, 34%) 1fr;
  align-items: stretch;
  min-height: 190px;
  overflow: hidden;
  border: 1px solid rgba(79, 141, 255, .24);
  border-radius: 18px;
  background: linear-gradient(135deg, #080b12, #10151f);
  color: #f8fbff;
  text-align: left;
  padding: 0;
  cursor: pointer;
  box-shadow: 0 18px 42px rgba(0, 0, 0, .26);
}

.game-option-main {
  min-height: 260px;
  border-color: rgba(79, 141, 255, .42);
}

.game-option-main span {
  font-size: clamp(34px, 4.8vw, 58px);
  padding-top: 108px;
  padding-bottom: 42px;
}

.game-option-upcoming {
  opacity: .78;
  cursor: not-allowed;
}

.game-option-upcoming img {
  filter: saturate(.72) brightness(.82);
}

.game-option img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .9;
  transform: none;
}

.game-option::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 10, 16, .08), rgba(7, 10, 16, .55) 34%, rgba(7, 10, 16, .92));
  pointer-events: none;
}

.game-option span,
.game-option small {
  position: relative;
  z-index: 2;
  display: block;
  grid-column: 2;
  align-self: end;
  padding: 0 20px;
}

.game-option span {
  margin-top: auto;
  padding-top: 72px;
  padding-bottom: 30px;
  font-weight: 950;
  font-size: clamp(24px, 3vw, 34px);
  line-height: 1;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .72);
}

.game-option small {
  display: block;
  align-self: start;
  margin-top: -22px;
  padding-bottom: 26px;
  color: rgba(79, 141, 255, .92);
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.game-option.active {
  border-color: rgba(79, 141, 255, .82);
  box-shadow: 0 0 0 2px rgba(79, 141, 255, .18), 0 22px 48px rgba(0, 0, 0, .38);
}

@media (max-width: 680px) {
  .game-picker { gap: 12px; }
  .game-option {
    grid-template-columns: 118px 1fr;
    min-height: 136px;
    border-radius: 16px;
  }
  .game-option-main {
    grid-template-columns: 132px 1fr;
    min-height: 166px;
  }
  .game-option-main span {
    padding-top: 54px;
    padding-bottom: 34px;
    font-size: 30px;
  }
  .game-option::after {
    background: linear-gradient(90deg, rgba(7, 10, 16, .05), rgba(7, 10, 16, .72) 42%, rgba(7, 10, 16, .95));
  }
  .game-option span,
  .game-option small {
    padding-left: 14px;
    padding-right: 14px;
  }
  .game-option span {
    padding-top: 42px;
    padding-bottom: 26px;
    font-size: 21px;
  }
  .game-option small {
    margin-top: -18px;
    padding-bottom: 18px;
    font-size: 13px;
  }
}
.payments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tab, .payment { cursor: pointer; font-weight: 900; }
.tab.active, .payment.active { background: #dbe6ff; border-color: var(--gold); color: #1e3a8a; }
.payment-panel { margin-top: 12px; }
.payment-box {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #f9fbff;
  color: var(--ink);
}
.payment-box p { color: var(--muted); line-height: 1.45; }
.qr-box {
  grid-template-columns: minmax(160px, 240px) 1fr;
  align-items: center;
}
.qr-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: contain;
  display: block;
  border-radius: 14px;
  border: 1px solid rgba(79,141,255,.35);
  background: #fff;
  padding: 8px;
}
.qr-placeholder {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px dashed rgba(79,141,255,.55);
  background:
    linear-gradient(90deg, rgba(255,255,255,.08) 25%, transparent 25% 50%, rgba(255,255,255,.08) 50% 75%, transparent 75%) 0 0 / 18px 18px,
    rgba(79,141,255,.08);
  color: var(--gold);
  text-align: center;
  font-weight: 950;
}
.qr-placeholder span, .qr-placeholder small { display: block; }
.qr-placeholder small { color: var(--muted); font-size: 11px; }

.summary { margin-top: 12px; }
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; color: var(--muted); }
.summary-row strong { color: var(--ink); text-align: right; }
.summary-row.total { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 14px; font-size: 18px; }
.summary-row.total strong { color: var(--green); }
.primary, .secondary {
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  border-radius: 12px;
  font-weight: 950;
  cursor: pointer;
}
.primary { border: 0; background: var(--gold); color: #211600; }
.secondary { border: 1px solid #a9e8d0; background: #ecfff7; color: #057a55; }
.support-action { border-color: rgba(34, 197, 94, .55); background: linear-gradient(135deg, rgba(236,255,247,.98), rgba(211,255,232,.98)); }
.support-float {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 45;
  display: grid;
  gap: 2px;
  min-width: 132px;
  min-height: 58px;
  padding: 10px 14px;
  border: 1px solid rgba(34, 197, 94, .55);
  border-radius: 16px;
  color: #eafff3;
  background: linear-gradient(135deg, #057a55, #10b981);
  box-shadow: 0 18px 42px rgba(0,0,0,.32), 0 0 0 1px rgba(255,255,255,.08) inset;
  font: inherit;
  font-weight: 950;
  text-align: left;
  cursor: pointer;
}
.support-float span { font-size: 11px; opacity: .84; }
.support-float strong { font-size: 15px; line-height: 1; }
.support-float:hover { transform: translateY(-1px); filter: brightness(1.05); }
.result { min-height: 20px; margin-top: 12px; color: var(--muted); }
.result.ok { color: var(--green); }
.result.error { color: var(--red); }
.payment-live { display: grid; justify-items: center; gap: 14px; padding: 18px; border: 1px solid rgba(255,255,255,.10); border-radius: 12px; background: rgba(4, 9, 7, .34); text-align: center; }
.payment-live__head { display: grid; gap: 6px; justify-items: center; }
.payment-live__head h3 { margin: 0; color: #fff; font-size: 22px; }
.payment-live__head p { margin: 0; color: var(--muted); }
.payment-live__head strong { color: #fff; }
.qr-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 10px; background: rgba(0, 230, 25, .14); color: #00e619; font-weight: 950; letter-spacing: 0; }
.payment-live__qr { width: min(330px, 100%); padding: 14px; border-radius: 14px; background: #fff; }
.payment-live__qr .qr-image { width: 100%; max-width: none; margin: 0; border: 0; border-radius: 8px; }
.qr-download { display: inline-flex; min-height: 42px; align-items: center; justify-content: center; padding: 0 16px; border-radius: 8px; background: rgba(0, 230, 25, .18); color: #40ff65; font-weight: 950; }
.qr-cancel { min-height: 42px; padding: 0 16px; border-radius: 8px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: var(--muted); font-weight: 900; cursor: pointer; }
.qr-cancel:hover { border-color: rgba(255,255,255,.28); color: #fff; background: rgba(255,255,255,.10); }
.payment-live__hint, .payment-live__timer, .payment-live__order { color: var(--muted); }
.payment-live__expired { width: 100%; display: grid; gap: 8px; padding: 16px; border-radius: 10px; border: 1px solid rgba(255, 193, 7, .25); background: rgba(255, 193, 7, .08); color: #ffe6a3; }
.payment-live__expired strong { color: #fff2c2; font-size: 18px; }
.payment-live__status { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 12px; border-radius: 10px; background: rgba(255,255,255,.04); color: #fff; }
.status-dot { width: 14px; height: 14px; border-radius: 999px; border: 2px solid currentColor; border-top-color: transparent; animation: spin .85s linear infinite; }
.payment-live__status.paid { color: #40ff65; background: rgba(0, 230, 25, .10); }
.payment-live__status.done { color: #40ff65; background: rgba(0, 230, 25, .14); }
.payment-live__status.done .status-dot, .payment-live__status.paid .status-dot { animation: none; border-top-color: currentColor; background: currentColor; box-shadow: 0 0 18px rgba(64,255,101,.35); }
.payment-live__status.error { color: #ff8f8f; background: rgba(255,80,80,.10); }
.payment-live__status.expired { color: #ffd166; background: rgba(255, 193, 7, .10); }
.payment-live__status.expired .status-dot, .payment-live__status.error .status-dot { animation: none; border-top-color: currentColor; }
.payment-live.paid, .payment-live.done { border-color: rgba(64,255,101,.22); background: rgba(0, 230, 25, .06); }
.payment-live.expired { border-color: rgba(255, 193, 7, .24); background: rgba(255, 193, 7, .05); }
@keyframes spin { to { transform: rotate(360deg); } }

.process-grid { display: grid; gap: 9px; margin-top: 12px; }
.process-grid div { display: grid; grid-template-columns: 32px 1fr; column-gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: #f9fbff; border: 1px solid var(--line); }
.process-grid i { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #e9f2ff; color: var(--blue); font-style: normal; font-weight: 950; }
.process-grid strong { display: block; }
.process-grid span { color: var(--muted); font-size: 12px; }

.orders__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.orders__head button { border: 1px solid var(--line); background: #fff; border-radius: 10px; padding: 8px 10px; color: var(--muted); }
.orders__list { display: grid; gap: 9px; }
.order { display: flex; justify-content: space-between; gap: 12px; padding: 13px; border: 1px solid var(--line); border-radius: 13px; background: #f9fbff; }
.order strong, .order span { display: block; }
.order span { color: var(--muted); font-size: 12px; margin-top: 3px; }
.order b { color: var(--green); white-space: nowrap; }
.empty { padding: 16px; border: 1px dashed var(--line); border-radius: 13px; color: var(--muted); text-align: center; }

.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(16,24,39,.62); }
.modal.hidden { display: none; }
.modal__box { width: min(430px, 100%); padding: 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,.3); }
.modal__close { float: right; border: 1px solid var(--line); border-radius: 10px; background: #f9fbff; color: var(--ink); padding: 8px 10px; }
.modal__box h2 { clear: both; margin-top: 14px; }
.modal__body { display: grid; gap: 9px; margin-top: 14px; }
.modal__body div { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.modal__body strong { color: var(--ink); text-align: right; }
.mini-timeline { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin-top: 14px; }
.mini-timeline span { border: 1px solid var(--line); border-radius: 999px; padding: 7px 6px; text-align: center; font-size: 11px; font-weight: 900; color: var(--muted); }
.mini-timeline .done { background: #ecfff7; color: #057a55; border-color: #a9e8d0; }
.auth-footer {
  margin: 0 18px 34px;
  padding: 16px 0 0;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
}
.auth-footer strong { color: var(--ink); }
.auth-footer span,
.auth-signature {
  color: var(--gold);
  letter-spacing: 0;
}
.auth-footer .footer-socials {
  justify-content: flex-end;
}
.auth-footer .footer-socials a {
  color: var(--gold);
  border-color: rgba(79,141,255,.22);
  background: rgba(79,141,255,.08);
}
.auth-signature {
  margin: 12px 0 0;
  text-align: center;
  font-size: 12px;
  font-weight: 950;
}

@media (max-width: 900px) {
  .checkout { grid-template-columns: 1fr; }
  .checkout-side { position: static; }
  .popular-grid, .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-card { position: relative; right: auto; bottom: auto; width: auto; margin: -90px 18px 18px; }
}

@media (max-width: 680px) {
  .topnav { display: grid; min-height: auto; padding: 12px 14px; }
  .logo { justify-content: center; }
  .topnav nav { justify-content: start; }
  .topnav nav a { min-height: 36px; padding: 0 10px; background: #f9fbff; font-size: 13px; }
  .hero { min-height: 430px; margin: 0; border-radius: 0 0 20px 20px; }
  .hero__content { min-height: 430px; justify-content: end; padding: 24px 18px 112px; }
  .hero p { font-size: 15px; }
  .trust-row, .form-grid, .payments { grid-template-columns: 1fr; }
  .trust-row, .section, .checkout, .orders-section { margin: 14px; }
  .game-card { grid-template-columns: 92px 1fr; }
  .game-card img { width: 92px; height: 88px; }
  .game-card a { grid-column: 1 / -1; }
}

@media (max-width: 430px) {
  h1 { font-size: 45px; }
  .popular-grid, .packs, .tabs { grid-template-columns: 1fr; }
  .checkout-main, .summary-card, .process, .section, .orders-section { padding: 15px; }
}

/* Panther Legend Store storefront */
:root {
  --page: #050806;
  --surface: #0c120f;
  --ink: #eef7f1;
  --muted: #a7abb1;
  --line: rgba(79, 141, 255, .18);
  --dark: #08090c;
  --gold: #4f8dff;
  --green: #4f8dff;
  --blue: #cfd3da;
  --shadow: 0 20px 52px rgba(0, 0, 0, .34);
}

body { background: var(--page); color: var(--ink); }
.site { width: min(1180px, 100%); }
.topnav {
  min-height: 64px;
  background: rgba(5, 8, 6, .94);
  border-bottom-color: rgba(79, 141, 255, .22);
}
.logo { align-items: center; gap: 10px; }
.logo::before {
  content: "";
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: url("/favicon.svg") center/70% no-repeat, rgba(44, 255, 137, .1);
  background: url("/recargas/img/panther-icon-extraido.webp") center/cover no-repeat;
  border: 1px solid rgba(79, 141, 255, .36);
}
.logo strong { color: #fff; font-size: 16px; }
.logo span { display: block; color: rgba(79, 141, 255, .86); font-size: 10px; text-transform: uppercase; }
.domain-pill {
  border-color: rgba(79, 141, 255, .28);
  background: rgba(79, 141, 255, .08);
  color: rgba(238,247,241,.82);
}
.topnav nav a { color: rgba(238,247,241,.78); border-radius: 8px; }
.topnav nav a:hover, .nav-cta { background: var(--gold) !important; color: #061008 !important; }
.theme-toggle {
  min-height: 38px;
  border: 1px solid rgba(79, 141, 255, .35);
  border-radius: 9px;
  padding: 0 12px;
  background: rgba(79, 141, 255, .12);
  color: var(--gold);
  font-weight: 950;
  cursor: pointer;
  white-space: nowrap;
}

.access-gate {
  min-height: auto;
  padding: 18px;
  background: #050806;
}
.access-card {
  background: #0c120f;
  border-color: rgba(79,141,255,.25);
}
.access-card h1 { color: #fff; }

.hero {
  min-height: auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr);
  gap: 52px;
  align-items: center;
  margin: 0;
  padding: 72px 18px 58px;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.hero__image, .hero__overlay { display: none; }
.hero__content {
  min-height: auto;
  padding: 0;
  max-width: 560px;
}
.badge {
  min-height: 27px;
  background: rgba(79,141,255,.12);
  border-color: rgba(79,141,255,.32);
  color: var(--gold);
}
h1 {
  margin-top: 16px;
  font-size: clamp(46px, 6vw, 70px);
  color: #fff;
}
h1 span { color: var(--gold); }
.hero p { color: var(--muted); max-width: 460px; }
.hero-primary {
  background: var(--gold);
  color: #041008;
  border-radius: 9px;
}
.hero-secondary { display: none; }
.hero-preview {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(79,141,255,.34);
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 24px 70px rgba(0,0,0,.42);
}
.hero-preview img { width: 100%; height: 100%; object-fit: contain; display: block; background: #07080b; }

.trust-row {
  margin: 0 18px 34px;
  display: flex;
  gap: 34px;
}
.flow-strip { margin-bottom: 34px; }
.flow-step {
  background: #0c120f;
  border-color: rgba(255,255,255,.09);
}
.flow-step.active { border-color: rgba(79,141,255,.48); }
.flow-step strong { color: #fff; }
.trust-row div {
  display: flex;
  gap: 9px;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.trust-row b {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(79,141,255,.14);
  color: var(--gold);
  font-size: 11px;
}
.trust-row strong { color: #fff; font-size: 13px; }
.trust-row span { display: none; }

.section, .orders-section, .checkout-main, .summary-card, .process, .popular-card, .pack, .game-card {
  background: #0c120f;
  border-color: rgba(255,255,255,.09);
  box-shadow: none;
}
.section, .orders-section { margin: 0 18px 32px; padding: 0; border: 0; background: transparent; }
.section-head, .panel-head { margin-bottom: 22px; }
.section-head span, .panel-head span {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--gold);
}
.section-head span::before, .panel-head span::before {
  content: "";
  width: 32px;
  height: 2px;
  background: var(--gold);
}
.section-head h2, .panel-head h2, .orders__head h2, .process h2 { color: #fff; font-size: 34px; }
.section-head h2::after, .panel-head h2::after { content: ""; color: var(--gold); }

.game-card {
  grid-template-columns: minmax(190px, 280px) 1fr auto;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
}
.game-card img { width: 100%; height: 160px; border-radius: 0; }
.game-card strong { color: #fff; }
.game-card a { margin-right: 16px; background: var(--gold); color: #041008; }

.popular-grid, .packs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.popular-card, .pack {
  min-height: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 14px;
  background:
    radial-gradient(circle at 70% 12%, rgba(111,232,255,.18), transparent 34%),
    linear-gradient(180deg, #131b17, #080d0a);
  transition: border-color .18s ease, transform .18s ease;
}
.popular-card:hover, .pack.active {
  border-color: rgba(79,141,255,.52);
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(0,0,0,.22), 0 0 0 1px rgba(79,141,255,.14) inset;
}
.product-art {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  background:
    radial-gradient(circle at 50% 42%, rgba(111,232,255,.22), transparent 30%),
    linear-gradient(135deg, rgba(79,141,255,.22), rgba(34,139,255,.16) 48%, rgba(0,0,0,.08)),
    url("/recargas/img/free-fire-card.webp") center/cover no-repeat;
  overflow: hidden;
}
.product-art.photo-art {
  background: #050806;
}
.product-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(5,8,6,.10), rgba(5,8,6,.74));
}
.product-art.photo-art::after {
  background:
    linear-gradient(180deg, rgba(5,8,6,0) 38%, rgba(5,8,6,.66) 100%),
    radial-gradient(circle at 65% 35%, rgba(111,232,255,.10), transparent 35%);
}
.product-art img {
  position: absolute;
  z-index: 1;
  left: 50%;
  top: 48%;
  width: min(128px, 58%);
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 18px 20px rgba(0,0,0,.46));
}
.product-art.photo-art img {
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: none;
  object-fit: cover;
  filter: saturate(1.08) contrast(1.04);
}
.product-art.gem-art img {
  object-fit: contain;
}
.pack.starter .product-art img, .popular-card.starter .product-art img { width: min(92px, 48%); }
.pack.mid .product-art img, .popular-card.mid .product-art img { width: min(112px, 54%); }
.pack.hot .product-art img, .popular-card.hot .product-art img { width: min(128px, 58%); }
.pack.pro .product-art img, .popular-card.pro .product-art img { width: min(145px, 64%); }
.pack.mega .product-art img, .popular-card.mega .product-art img { width: min(162px, 70%); }
.pack-kicker {
  display: block;
  margin: 13px 15px 0;
  color: rgba(79,141,255,.82);
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}
.popular-card::before, .pack::before { display: none; }
.popular-card strong, .pack strong {
  margin: 5px 15px 0;
  color: #fff;
  font-size: 17px;
}
.popular-card .photo-art + .pack-kicker,
.pack .photo-art + .pack-kicker {
  margin-top: 14px;
}
.popular-card small, .pack small {
  margin: 7px 15px 0;
  color: var(--muted);
}
.popular-card b, .pack b {
  margin: 12px 15px 16px;
  color: var(--gold);
}
.select-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  margin: 0 15px 15px;
  padding: 0 12px;
  border-radius: 9px;
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: 12px;
  font-weight: 950;
}
.pack.active .select-label {
  background: linear-gradient(180deg, #8b5cf6, #4f8dff);
  color: #041008;
}
.pack em {
  top: 10px;
  right: 10px;
  background: linear-gradient(180deg, #8b5cf6, #4f8dff);
  color: #041008;
}

.checkout {
  margin: 0 18px 34px;
  grid-template-columns: minmax(0, 1fr) 360px;
}
.checkout-main, .summary-card, .process {
  border-radius: 14px;
  border-color: rgba(255,255,255,.09);
}
.panel-head p, .step p, .field span, .summary-row, .process-grid span, .order span, .empty { color: var(--muted); }
.step > span {
  background: var(--gold);
  color: #041008;
}
.field input, .tab, .payment {
  background: #050806;
  color: #fff;
  border-color: rgba(255,255,255,.12);
}
.field input:focus {
  border-color: rgba(79,141,255,.56);
  box-shadow: 0 0 0 3px rgba(79,141,255,.13);
}
.verify-btn, .secondary {
  background: rgba(79,141,255,.1);
  border-color: rgba(79,141,255,.28);
  color: var(--gold);
}
.verify-box, .process-grid div, .order, .empty {
  background: #080d0a;
  border-color: rgba(255,255,255,.09);
}
.payment-box, .player-card__grid div {
  background: #080d0a;
  border-color: rgba(255,255,255,.09);
}
.player-card__grid strong, .payment-box strong { color: #fff; }
.payment-box p { color: var(--muted); }
.locked-payment {
  border-style: dashed;
  background:
    radial-gradient(circle at 20% 0, rgba(79,141,255,.18), transparent 32%),
    #080d0a;
}
.locked-payment strong { color: var(--gold); }
.qr-placeholder {
  background:
    linear-gradient(90deg, rgba(255,255,255,.06) 25%, transparent 25% 50%, rgba(255,255,255,.06) 50% 75%, transparent 75%) 0 0 / 18px 18px,
    rgba(79,141,255,.08);
}
.tab.active, .payment.active, .primary {
  background: linear-gradient(180deg, #8b5cf6, #4f8dff);
  border-color: var(--gold);
  color: #041008;
}
.summary-row strong, .modal__body strong { color: #fff; }
.summary-row.total strong { color: var(--gold); }

.modal__box {
  background: #0c120f;
  border-color: rgba(79,141,255,.28);
}
.modal__box h2 { color: #fff; }
.modal__close { background: #050806; color: #fff; border-color: rgba(255,255,255,.14); }
.reseller-band {
  margin: 0 18px 28px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 24px;
  border-radius: 14px;
  background: #0c120f;
  border: 1px solid rgba(79,141,255,.22);
}
.reseller-band h2 { color: #fff; font-size: 28px; }
.reseller-band p { color: var(--muted); margin-top: 5px; }
.reseller-band button {
  min-height: 44px;
  border: 0;
  border-radius: 9px;
  padding: 0 16px;
  background: linear-gradient(180deg, #8b5cf6, #4f8dff);
  color: #041008;
  font-weight: 950;
}

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; gap: 28px; padding-top: 38px; }
  .hero-preview { order: -1; }
  .popular-grid, .packs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .checkout { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .topnav { background: rgba(5,8,6,.98); }
  .domain-pill { justify-content: center; width: 100%; }
  .topnav nav a { background: #0c120f; }
  .theme-toggle { width: 100%; }
  .hero { padding: 28px 14px 34px; }
  .trust-row { display: grid; gap: 12px; }
  .flow-strip { grid-template-columns: 1fr; }
  .game-card { grid-template-columns: 1fr; }
  .game-card a { margin: 0 14px 14px; }
  .popular-grid, .packs { grid-template-columns: 1fr; }
  .reseller-band { align-items: stretch; flex-direction: column; }
  .auth-footer { display: grid; text-align: center; }
  .player-card__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .qr-box { grid-template-columns: 1fr; }
  .qr-image, .qr-placeholder { width: min(260px, 100%); margin: 0 auto; }
}

html[data-theme="light"] {
  --page: #f4f0e8;
  --surface: #ffffff;
  --ink: #111318;
  --muted: #5f6470;
  --line: rgba(79, 141, 255, .24);
  --dark: #15171d;
  --gold: #4f8dff;
  --green: #4f8dff;
  --blue: #5e626a;
  --shadow: 0 18px 44px rgba(34, 26, 10, .12);
}

html[data-theme="light"] body { background: var(--page); color: var(--ink); }
html[data-theme="light"] .topnav {
  background: rgba(255, 255, 255, .94);
  border-bottom-color: rgba(79, 141, 255, .24);
}
html[data-theme="light"] .logo strong,
html[data-theme="light"] .section-head h2,
html[data-theme="light"] .panel-head h2,
html[data-theme="light"] .orders__head h2,
html[data-theme="light"] .process h2,
html[data-theme="light"] .game-card strong,
html[data-theme="light"] .popular-card strong,
html[data-theme="light"] .pack strong,
html[data-theme="light"] .reseller-band h2 {
  color: #15171d;
}
html[data-theme="light"] .topnav nav a { color: #31343b; }
html[data-theme="light"] .topnav nav a:not(.nav-cta) { background: transparent; }
html[data-theme="light"] .hero,
html[data-theme="light"] .section,
html[data-theme="light"] .orders-section {
  background: transparent;
}
html[data-theme="light"] .hero p,
html[data-theme="light"] .trust-row strong { color: #343944; }
html[data-theme="light"] h1 { color: #15171d; }
html[data-theme="light"] .hero-preview img { background: #111318; }
html[data-theme="light"] .checkout-main,
html[data-theme="light"] .summary-card,
html[data-theme="light"] .process,
html[data-theme="light"] .popular-card,
html[data-theme="light"] .pack,
html[data-theme="light"] .game-card,
html[data-theme="light"] .reseller-band,
html[data-theme="light"] .access-card,
html[data-theme="light"] .modal__box {
  background: #dbe6ff;
  border-color: rgba(79, 141, 255, .22);
  box-shadow: var(--shadow);
}
html[data-theme="light"] .field input,
html[data-theme="light"] .tab,
html[data-theme="light"] .payment,
html[data-theme="light"] .verify-box,
html[data-theme="light"] .process-grid div,
html[data-theme="light"] .order,
html[data-theme="light"] .empty,
html[data-theme="light"] .modal__close {
  background: #fff;
  border-color: rgba(79, 141, 255, .22);
  color: #15171d;
}
html[data-theme="light"] .payment-box,
html[data-theme="light"] .player-card,
html[data-theme="light"] .player-card__grid div {
  background: #fff;
  border-color: rgba(79, 141, 255, .22);
}
html[data-theme="light"] .player-card__head strong,
html[data-theme="light"] .player-card__grid strong,
html[data-theme="light"] .payment-box strong {
  color: #15171d;
}
html[data-theme="light"] .summary-row strong,
html[data-theme="light"] .modal__body strong,
html[data-theme="light"] .auth-footer strong {
  color: #15171d;
}
html[data-theme="light"] .verify-btn,
html[data-theme="light"] .secondary,
html[data-theme="light"] .theme-toggle {
  background: #dbe6ff;
  border-color: rgba(79, 141, 255, .34);
  color: #1e3a8a;
}
html[data-theme="light"] .access-gate {
  background: rgba(244, 240, 232, .98);
}

/* Reparacion visual cliente: estilo plataforma de recargas */
:root{--clean-bg:#080b12;--clean-card:#111722;--clean-card-2:#151d2a;--clean-line:#263244;--clean-text:#f6f8fb;--clean-muted:#9aa6b6;--clean-gold:#4f8dff;--clean-green:#20c47a}
html[data-theme="dark"] body{background:var(--clean-bg);color:var(--clean-text)}
html[data-theme="dark"] .site{width:min(1180px,100%)}
html[data-theme="dark"] .topnav{min-height:64px;margin:0 auto;background:rgba(8,11,18,.86);border-bottom:1px solid var(--clean-line);backdrop-filter:blur(14px)}
html[data-theme="dark"] .logo strong,html[data-theme="dark"] .section-head h2,html[data-theme="dark"] .panel-head h2,html[data-theme="dark"] .orders__head h2,html[data-theme="dark"] .process h2{color:var(--clean-text)}
html[data-theme="dark"] .domain-pill{background:rgba(79,141,255,.08);border-color:rgba(79,141,255,.22);color:#c4b5fd}
html[data-theme="dark"] .topnav nav a{color:#cbd5e1;border-radius:8px}html[data-theme="dark"] .topnav nav a:hover,html[data-theme="dark"] .nav-cta{background:rgba(79,141,255,.12);color:#c4b5fd!important}.theme-toggle{border-radius:8px!important}
.hero{min-height:430px;margin:16px;border-radius:10px;box-shadow:none;border:1px solid var(--clean-line)}.hero__overlay{background:linear-gradient(90deg,rgba(8,11,18,.95),rgba(8,11,18,.70) 55%,rgba(8,11,18,.24)),linear-gradient(180deg,rgba(8,11,18,.05),rgba(8,11,18,.80))}.hero__content{min-height:430px;padding:38px}.hero h1{font-size:clamp(42px,6vw,68px);line-height:.95}.hero p{max-width:560px;color:#d9e2ef}.hero-preview{border-radius:10px;border-color:rgba(79,141,255,.28);background:#080b12}.hero-primary{border-radius:8px;background:var(--clean-gold);color:#17100a}.badge{border-radius:999px;background:rgba(79,141,255,.12);border-color:rgba(79,141,255,.28);color:#c4b5fd}
.trust-row{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.trust-row div,.section,.checkout-main,.summary-card,.process,.orders-section,.popular-card,.pack,.game-card{border-radius:10px;box-shadow:none}html[data-theme="dark"] .trust-row div,html[data-theme="dark"] .section,html[data-theme="dark"] .checkout-main,html[data-theme="dark"] .summary-card,html[data-theme="dark"] .process,html[data-theme="dark"] .orders-section,html[data-theme="dark"] .popular-card,html[data-theme="dark"] .pack,html[data-theme="dark"] .game-card{background:var(--clean-card);border-color:var(--clean-line)}.flow-strip{gap:8px}.flow-step{border-radius:10px;min-height:66px}html[data-theme="dark"] .flow-step{background:var(--clean-card);border-color:var(--clean-line)}.flow-step b,.step>span{border-radius:8px;background:var(--clean-gold);color:#17100a}
.section,.orders-section{margin:16px;padding:16px}.section-head span,.panel-head span{color:#8b5cf6}.game-card{grid-template-columns:120px minmax(0,1fr) auto}.game-card img{width:120px;height:82px;border-radius:8px}.game-card a{border-radius:8px;background:var(--clean-gold);color:#17100a}.popular-grid,.packs{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}.popular-card,.pack{min-height:168px;padding:12px;border-radius:10px}.product-art{height:74px!important;margin-bottom:8px!important}.popular-card strong,.pack strong{font-size:16px}.popular-card small,.pack small{font-size:12px}.popular-card b,.pack b{font-size:17px;color:var(--clean-green)}.select-label{border-radius:8px}.pack.active,.popular-card:hover{border-color:var(--clean-gold);box-shadow:0 0 0 2px rgba(79,141,255,.12)}
.checkout{grid-template-columns:minmax(0,1fr) 340px;gap:14px;margin:16px}.checkout-main,.summary-card,.process{padding:16px}.checkout-side{top:78px}.field span{color:var(--clean-muted)}html[data-theme="dark"] .field input,html[data-theme="dark"] .tab,html[data-theme="dark"] .payment,html[data-theme="dark"] .verify-box,html[data-theme="dark"] .payment-box,html[data-theme="dark"] .process-grid div,html[data-theme="dark"] .order,html[data-theme="dark"] .empty{background:var(--clean-card-2);border-color:var(--clean-line);color:var(--clean-text)}.field input,.tab,.payment,.verify-btn,.payment-box,.qr-image,.primary,.secondary{border-radius:8px}.tab.active,.payment.active{background:rgba(79,141,255,.12);border-color:var(--clean-gold);color:#c4b5fd}.primary{background:var(--clean-gold);color:#17100a}.secondary{background:rgba(32,196,122,.12);border-color:rgba(32,196,122,.35);color:#54e39d}.summary-row strong,.modal__body strong{color:var(--clean-text)}.summary-row.total strong{color:var(--clean-green)}
.reseller-band{border-radius:10px;background:linear-gradient(135deg,#111722,#0b1018);border-color:var(--clean-line);box-shadow:none}.auth-footer{border-color:var(--clean-line)}
.access-gate[hidden]{display:none!important}.access-card{border-radius:10px}.modal__box{border-radius:10px}
@media (max-width:1000px){.popular-grid,.packs{grid-template-columns:repeat(3,minmax(0,1fr))}.checkout{grid-template-columns:1fr}.checkout-side{position:static}.hero-preview{display:none}}
@media (max-width:680px){.topnav{display:grid;grid-template-columns:1fr auto;min-height:auto;padding:10px}.domain-pill{display:none}.topnav nav{grid-column:1/-1}.hero{min-height:360px;margin:10px}.hero__content{min-height:360px;padding:24px}.trust-row,.flow-strip,.popular-grid,.packs{grid-template-columns:1fr}.game-card{grid-template-columns:1fr}.game-card img{width:100%;height:150px}.checkout,.section,.orders-section,.trust-row{margin:10px}.form-grid,.payments,.tabs{grid-template-columns:1fr}.qr-box{grid-template-columns:1fr}}

/* Ajuste plataforma tipo catalogo gaming */
.platform-note{color:var(--clean-muted)}
.logo span{color:var(--clean-gold)}
.hero h1 span{color:var(--clean-gold)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:12px}.section-head h2{line-height:1.05}.popular-card,.pack{overflow:hidden}.popular-card:after,.pack:after{content:"";position:absolute;inset:auto 10px 10px auto;width:48px;height:48px;border-radius:999px;background:rgba(79,141,255,.10);pointer-events:none}.popular-card b,.pack b{display:inline-flex;align-items:center;min-height:30px;padding:0 8px;border-radius:8px;background:rgba(32,196,122,.10)}.pack.active .select-label{background:var(--clean-gold);color:#17100a}.checkout-main{position:relative}.checkout-main:before{content:"Compra segura";position:absolute;right:14px;top:14px;padding:4px 8px;border-radius:999px;background:rgba(32,196,122,.12);color:#54e39d;font-size:11px;font-weight:950}.reseller-band{display:flex;align-items:center;justify-content:space-between;gap:18px}.reseller-band .badge{margin-bottom:8px}.reseller-actions{display:flex;gap:10px;flex-wrap:wrap}.reseller-link{min-height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 14px;border-radius:8px;background:var(--clean-gold);color:#17100a;font-weight:950}.secondary-link{background:rgba(32,196,122,.12);color:#54e39d;border:1px solid rgba(32,196,122,.35)}
@media (max-width:680px){.section-head{display:block}.reseller-band{display:grid}.reseller-actions{display:grid}.reseller-link{width:100%}.checkout-main:before{position:static;display:inline-flex;margin-bottom:10px}}

/* Ocultar bloques internos en la tienda cliente */
.orders-section,
.reseller-band,
#login,
#mayoristas { display: none !important; }

.search-field {
  display: none !important;
}

/* Panther quality pass */
html[data-theme="dark"] body {
  background:
    linear-gradient(180deg, #070b12 0%, #0b111a 46%, #070b12 100%);
}
.site { padding-bottom: 44px; }
.topnav {
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.logo strong { letter-spacing: 0; }
.domain-pill {
  min-height: 32px;
  border-radius: 8px;
}
.hero {
  min-height: 460px;
  border-radius: 14px;
  overflow: hidden;
}
.hero__image {
  filter: saturate(1.08) contrast(1.04);
  object-position: center;
}
.hero__overlay {
  background:
    linear-gradient(90deg, rgba(7,11,18,.96), rgba(7,11,18,.68) 54%, rgba(7,11,18,.18)),
    linear-gradient(180deg, rgba(7,11,18,.08), rgba(7,11,18,.76));
}
.hero__content {
  min-height: 460px;
  max-width: 650px;
}
.hero h1 {
  max-width: 620px;
}
.hero p {
  max-width: 520px;
  font-size: 17px;
}
.trust-row div {
  min-height: 72px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(17,23,34,.76);
}
.flow-step {
  border-color: rgba(255,255,255,.08);
  background: rgba(17,23,34,.72);
}
.checkout-main,
.summary-card,
.process,
.section {
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(17,23,34,.86);
}
.popular-grid,
.packs {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.popular-card,
.pack {
  min-height: 232px;
  padding: 0;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: #101722;
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.popular-card:hover,
.pack:hover,
.pack.active {
  transform: translateY(-2px);
  border-color: rgba(79,141,255,.54);
  box-shadow: 0 18px 42px rgba(0,0,0,.28), 0 0 0 1px rgba(79,141,255,.14) inset;
}
.product-art {
  height: auto !important;
  aspect-ratio: 16 / 10;
  margin: 0 !important;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.product-art img {
  width: 58%;
  max-height: 84%;
}
.product-art.photo-art img {
  object-fit: cover;
  object-position: center;
}
.pack-kicker,
.popular-card small,
.pack small,
.popular-card strong,
.pack strong,
.popular-card b,
.pack b,
.select-label {
  margin-left: 14px;
  margin-right: 14px;
}
.pack-kicker {
  margin-top: 12px;
}
.popular-card strong,
.pack strong {
  min-height: 38px;
  font-size: 17px;
}
.popular-card small,
.pack small {
  min-height: 16px;
}
.popular-card b,
.pack b {
  margin-bottom: 12px;
  font-size: 18px;
}
.select-label {
  width: calc(100% - 28px);
  min-height: 36px;
  margin-bottom: 14px;
}
.stock-badge {
  top: 10px;
  left: 10px;
  right: auto;
  bottom: auto;
  width: auto;
  min-width: 66px;
  height: 30px;
  padding: 0 9px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.72);
}
.pack em {
  top: 10px;
  right: 10px;
}
.pack.no-stock,
.popular-card.no-stock {
  opacity: .56;
  cursor: not-allowed;
  filter: grayscale(.15) saturate(.68);
}
.pack.no-stock:hover,
.popular-card.no-stock:hover {
  transform: none;
  border-color: rgba(255,255,255,.09);
  box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.pack.no-stock .select-label {
  background: rgba(217,45,82,.12);
  color: #ff9aad;
}
.field input,
.tab,
.payment,
.payment-box,
.summary-card,
.primary,
.secondary {
  min-height: 44px;
}
.summary-card {
  position: sticky;
  top: 82px;
}
.summary-row {
  gap: 12px;
}
.primary {
  font-weight: 950;
}
.player-card {
  border-radius: 10px;
}
@media (max-width: 1100px) {
  .popular-grid,
  .packs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .hero {
    min-height: 410px;
    margin: 10px;
  }
  .hero__content {
    min-height: 410px;
    padding: 24px;
  }
  .hero h1 {
    font-size: 44px;
  }
  .hero p {
    font-size: 15px;
  }
  .trust-row {
    grid-template-columns: 1fr;
  }
  .popular-grid,
  .packs {
    grid-template-columns: 1fr;
  }
  .popular-card,
  .pack {
    min-height: 0;
  }
  .product-art {
    aspect-ratio: 16 / 8;
  }
  .summary-card {
    position: static;
  }
  .js-enabled .reveal,
  .js-enabled .popular-card,
  .js-enabled .pack,
  .js-enabled .game-card,
  .js-enabled .flow-step,
  .js-enabled .trust-row > div {
    opacity: 1;
    transform: none;
  }
  .hero__image {
    animation: none;
  }
  .product-art img,
  .game-card img {
    transition: none;
  }
}

/* Panther fluid pass: motion, product cards and optimized image framing */
.js-enabled .reveal,
.js-enabled .popular-card,
.js-enabled .pack,
.js-enabled .game-card,
.js-enabled .flow-step,
.js-enabled .trust-row > div {
  opacity: 0;
  transform: translateY(18px);
}
.js-enabled .is-visible {
  opacity: 1;
  transform: translateY(0);
  transition:
    opacity .48s ease,
    transform .48s cubic-bezier(.2,.75,.22,1),
    border-color .2s ease,
    box-shadow .2s ease,
    background .2s ease;
  transition-delay: var(--reveal-delay, 0ms);
}
.hero__image {
  will-change: transform;
  animation: heroDrift 14s ease-in-out infinite alternate;
}
@keyframes heroDrift {
  from { transform: scale(1); }
  to { transform: scale(1.035); }
}
.popular-grid,
.packs {
  align-items: stretch;
}
.popular-card,
.pack {
  display: flex;
  flex-direction: column;
  isolation: isolate;
  will-change: transform;
}
.popular-card::after,
.pack::after {
  display: none;
}
.product-art {
  overflow: hidden;
  background:
    radial-gradient(circle at 22% 12%, rgba(79,141,255,.20), transparent 28%),
    linear-gradient(135deg, #172233, #080d14);
}
.product-art img {
  transition: transform .42s ease, filter .42s ease;
  will-change: transform;
}
.popular-card:hover .product-art img,
.pack:hover .product-art img,
.pack.active .product-art img {
  transform: translate(-50%, -50%) scale(1.06);
}
.popular-card:hover .product-art.photo-art img,
.pack:hover .product-art.photo-art img,
.pack.active .product-art.photo-art img {
  transform: scale(1.06);
}
.popular-card small,
.pack small {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mini-icon,
.card-icon {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: 0 0 auto;
}
.mini-icon {
  width: 13px;
  height: 13px;
  color: var(--clean-gold);
}
.price-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: auto 14px 12px;
}
.price-row b {
  margin: 0;
}
.card-icon {
  width: 34px;
  height: 34px;
  padding: 8px;
  border-radius: 9px;
  color: #8b5cf6;
  background: rgba(79,141,255,.10);
  border: 1px solid rgba(79,141,255,.20);
}
.select-label {
  margin-top: 0;
}
.hero-primary,
.primary,
.secondary,
.game-card a,
.tab,
.payment,
.select-label {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.hero-primary:hover,
.primary:hover,
.game-card a:hover,
.select-label:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(79,141,255,.16);
}
.tab:hover,
.payment:hover,
.secondary:hover {
  border-color: rgba(79,141,255,.42);
}
.topnav {
  transform: translateZ(0);
}
.checkout-main,
.summary-card,
.process,
.section {
  backdrop-filter: blur(10px);
}
.game-card {
  overflow: hidden;
}
.game-card img {
  transition: transform .42s ease;
}
.game-card:hover img {
  transform: scale(1.04);
}
.discount-note {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  gap: 14px;
  margin: 14px 0 18px;
  padding: 14px;
  border: 1px solid rgba(79,141,255,.24);
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(79,141,255,.14), rgba(32,196,122,.08)),
    rgba(17,23,34,.84);
}
.discount-note strong,
.discount-note span {
  display: block;
}
.discount-note strong {
  color: #fff;
  font-size: 17px;
}
.discount-note span {
  margin-top: 3px;
  color: var(--clean-muted);
  line-height: 1.35;
}
.discount-kicker {
  width: fit-content;
  min-height: 24px;
  display: inline-flex !important;
  align-items: center;
  padding: 0 9px;
  border-radius: 999px;
  background: rgba(79,141,255,.16);
  color: #c4b5fd !important;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}
.discount-prices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}
.discount-prices span {
  min-height: 38px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 9px;
  background: rgba(5,8,6,.32);
  color: #8b5cf6;
  font-weight: 950;
}
.discount-prices b {
  color: #fff;
}
.discount-note button {
  align-self: center;
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  padding: 0 13px;
  background: var(--clean-gold);
  color: #17100a;
  font-weight: 950;
  white-space: nowrap;
  cursor: pointer;
}
.discount-note button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px rgba(79,141,255,.16);
}
html[data-theme="light"] .discount-note {
  background: #dbe6ff;
  border-color: rgba(79, 141, 255, .24);
}
html[data-theme="light"] .discount-note strong {
  color: #15171d;
}
html[data-theme="light"] .discount-prices span {
  background: #fff;
  border-color: rgba(79, 141, 255, .22);
  color: #9a6400;
}
html[data-theme="light"] .discount-prices b {
  color: #15171d;
}
@media (max-width: 760px) {
  .discount-note {
    align-items: stretch;
    flex-direction: column;
  }
  .discount-note button {
    width: 100%;
  }
  .discount-prices {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
.trust-row,
#productos,
#destacados {
  display: none !important;
}
.flow-strip {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 8px;
}
.flow-strip .flow-step:nth-child(4) {
  display: none;
}
.hero {
  min-height: 360px;
}
.hero__content {
  min-height: 360px;
}
@media (max-width: 760px) {
  .js-enabled .reveal,
  .js-enabled .popular-card,
  .js-enabled .pack,
  .js-enabled .game-card,
  .js-enabled .flow-step,
  .js-enabled .trust-row > div {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero__image {
    object-position: center top;
  }
  .topnav {
    grid-template-columns: 1fr auto;
    gap: 8px;
    flex-wrap: wrap;
  }
  .topnav nav {
    display: flex;
    width: 100%;
    order: 3;
    justify-content: center;
  }
  .domain-pill,
  .theme-toggle {
    display: none;
  }
  .hero {
    min-height: 260px;
    margin: 8px;
    border-radius: 12px;
  }
  .hero__content {
    min-height: 260px;
    padding: 20px;
    justify-content: flex-end;
  }
  .hero__content::before {
    width: min(270px, 74vw);
    opacity: .13;
    inset: 48% auto auto 50%;
  }
  .hero h1 {
    margin-top: 10px;
    font-size: 38px;
  }
  .hero p {
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.35;
  }
  .hero-actions {
    margin-top: 14px;
  }
  .social-links {
    margin-top: 10px;
  }
  .social-links a {
    flex: 1 1 0;
    min-height: 38px;
  }
  .social-promo {
    margin-top: 12px;
    padding: 12px;
  }
  .social-promo strong {
    font-size: 15px;
  }
  .social-promo .social-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .social-promo .social-links a {
    width: 100%;
    min-height: 40px;
    font-size: 12px;
  }
  .social-band {
    width: calc(100% - 20px);
    margin: 10px auto;
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 14px;
  }
  .social-band h2 {
    font-size: 20px;
  }
  .social-band p {
    font-size: 13px;
  }
  .social-band__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .social-band__actions a {
    min-height: 42px;
    padding: 0 10px;
    font-size: 12px;
  }
  .hero-primary {
    width: 100%;
    min-height: 46px;
  }
  .flow-strip {
    margin: 8px;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px;
  }
  .flow-step {
    min-height: 62px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    padding: 9px;
  }
  .flow-step b {
    width: 24px;
    height: 24px;
    border-radius: 7px;
    font-size: 12px;
  }
  .flow-step strong {
    font-size: 12px;
    line-height: 1.1;
  }
  .flow-step span {
    display: none;
  }
  .checkout {
    margin: 8px;
    gap: 10px;
  }
  .checkout-main,
  .summary-card,
  .process {
    padding: 12px;
    border-radius: 10px;
  }
  .panel-head {
    margin-bottom: 10px;
  }
  .panel-head h2 {
    font-size: 22px;
    line-height: 1.05;
  }
  .panel-head p {
    font-size: 13px;
  }
  .step {
    margin: 14px 0 9px;
    gap: 9px;
  }
  .step > span {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    font-size: 13px;
  }
  .step h2 {
    font-size: 17px;
  }
  .step p {
    font-size: 12px;
  }
  .field {
    margin-bottom: 9px;
  }
  .field input,
  .tab,
  .payment {
    min-height: 46px;
    border-radius: 10px;
  }
  .discount-note {
    margin: 10px 0 12px;
    padding: 11px;
  }
  .discount-note strong {
    font-size: 15px;
  }
  .discount-note span {
    font-size: 12px;
  }
  .discount-prices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }
  .discount-prices span {
    min-height: 32px;
    padding: 6px 7px;
    font-size: 12px;
  }
  .packs {
    gap: 9px;
  }
  .pack {
    min-height: 0;
    border-radius: 10px;
  }
  .product-art {
    aspect-ratio: 16 / 7;
  }
  .pack-kicker {
    display: none;
  }
  .pack strong {
    min-height: auto;
    margin-top: 10px;
    font-size: 16px;
  }
  .pack small {
    min-height: auto;
    font-size: 12px;
  }
  .price-row {
    margin-bottom: 10px;
  }
  .select-label {
    min-height: 34px;
    margin-bottom: 10px;
  }
  .stock-badge {
    min-width: 62px;
    height: 28px;
    font-size: 9px;
  }
  .payments {
    grid-template-columns: 1fr;
  }
  .qr-image,
  .qr-placeholder {
    width: min(220px, 100%);
  }
  .summary-card {
    position: static;
  }
}
@media (prefers-reduced-motion: reduce) {
  .js-enabled .reveal,
  .js-enabled .popular-card,
  .js-enabled .pack,
  .js-enabled .game-card,
  .js-enabled .flow-step,
  .js-enabled .trust-row > div {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .hero__image {
    animation: none;
  }
  .product-art img,
  .game-card img,
  .hero-primary,
  .primary,
  .secondary,
  .game-card a,
  .tab,
  .payment,
  .select-label {
    transition: none;
  }
}

/* Catalogo de juegos atendidos por WhatsApp */
#juegos {
  background: rgba(17,23,34,.58);
}
#juegos .section-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 520px);
  align-items: end;
  gap: 16px;
}
#juegos .section-head p {
  margin: 0;
  color: var(--clean-muted, var(--muted));
  line-height: 1.45;
  font-size: 14px;
}
.games-showcase {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
.catalog-game {
  position: relative;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border: 1px solid rgba(79,141,255,.18);
  border-radius: 14px;
  background: #070911;
  box-shadow: 0 16px 34px rgba(0,0,0,.20);
  isolation: isolate;
}
.catalog-game img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #080b12;
  transition: transform .5s ease, filter .5s ease;
  z-index: -2;
}
.catalog-game::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3,5,10,.38), rgba(3,5,10,.6) 46%, rgba(3,5,10,.95)),
    linear-gradient(90deg, rgba(3,5,10,.82), rgba(3,5,10,.24) 58%, rgba(3,5,10,.48));
  z-index: -1;
}
.catalog-game::after {
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px;
  pointer-events: none;
}
.catalog-game:hover img {
  transform: scale(1.055);
  filter: saturate(1.08) contrast(1.05);
}
.catalog-game div {
  display: grid;
  gap: 7px;
  padding: 18px 18px 0;
}
.catalog-game span {
  width: fit-content;
  padding: 5px 9px;
  border: 1px solid rgba(79,141,255,.26);
  border-radius: 999px;
  color: #8b5cf6;
  background: rgba(79,141,255,.10);
  font-size: 10px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.catalog-game strong {
  color: #fff;
  font-size: clamp(22px, 2.5vw, 34px);
  line-height: .98;
  text-shadow: 0 3px 18px rgba(0,0,0,.72);
}
.catalog-game p {
  max-width: 92%;
  color: #d8ddd8;
  font-size: 13px;
  line-height: 1.36;
  text-shadow: 0 2px 14px rgba(0,0,0,.82);
}
.catalog-game a,
.catalog-game button {
  width: fit-content;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 16px 18px 18px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #8b5cf6, #4f8dff);
  color: #17100a;
  font-size: 13px;
  font-weight: 950;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}
.catalog-game button {
  background: linear-gradient(180deg, #8b5cf6, #4f8dff);
  color: #17100a;
  border: 1px solid rgba(255,255,255,.16);
}
.catalog-game a:hover,
.catalog-game button:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 28px rgba(79,141,255,.20);
}
.featured-game {
  border-color: rgba(79,141,255,.30);
  background:
    radial-gradient(circle at 20% 0, rgba(79,141,255,.15), transparent 32%),
    rgba(8,11,18,.92);
}
html[data-theme="light"] .catalog-game {
  border-color: rgba(79,141,255,.24);
}
html[data-theme="light"] .catalog-game strong {
  color: #fff;
}

/* Ajuste final: los packs de diamantes deben verse completos, sin recortes raros. */
.popular-card .product-art,
.pack .product-art {
  display: grid;
  place-items: center;
  min-height: 104px;
  padding: 10px;
  background:
    radial-gradient(circle at 50% 38%, rgba(111,232,255,.18), transparent 34%),
    radial-gradient(circle at 18% 12%, rgba(79,141,255,.18), transparent 30%),
    linear-gradient(135deg, #172233, #080d14);
}

.popular-card .product-art.photo-art img,
.pack .product-art.photo-art img {
  position: relative;
  inset: auto;
  left: auto;
  top: auto;
  width: min(150px, 86%);
  height: min(96px, 100%);
  max-height: 96px;
  object-fit: contain;
  object-position: center;
  transform: none;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.42)) saturate(1.08) contrast(1.04);
}

.popular-card .product-art.gem-art img,
.pack .product-art.gem-art img {
  width: min(120px, 78%);
  height: min(88px, 100%);
  max-height: 88px;
  object-fit: contain;
}

.popular-card:hover .product-art.photo-art img,
.pack:hover .product-art.photo-art img,
.pack.active .product-art.photo-art img {
  transform: scale(1.04);
}

@media (max-width: 1000px) {
  .games-showcase {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
@media (max-width: 680px) {
  #juegos .section-head {
    display: block;
  }
  #juegos .section-head p {
    margin-top: 8px;
  }
  .games-showcase {
    display: flex;
    overflow-x: auto;
    gap: 10px;
    scroll-snap-type: x mandatory;
    padding-bottom: 4px;
  }
  .catalog-game {
    flex: 0 0 82%;
    min-height: 280px;
    scroll-snap-align: start;
  }
  .popular-card .product-art,
  .pack .product-art {
    min-height: 118px;
  }
  .popular-card .product-art.photo-art img,
  .pack .product-art.photo-art img {
    width: min(170px, 88%);
    height: min(106px, 100%);
    max-height: 106px;
  }
}
body:has(.maintenance-screen) {
  min-height: 100vh;
  background: radial-gradient(circle at top, rgba(68, 212, 255, .14), transparent 34%), #07111f;
}

.maintenance-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  color: #f8fbff;
}

.maintenance-card {
  width: min(440px, 100%);
  text-align: center;
  padding: 28px 20px;
  border: 1px solid rgba(148, 163, 184, .28);
  border-radius: 18px;
  background: rgba(8, 15, 28, .92);
  box-shadow: 0 24px 80px rgba(0, 0, 0, .34);
}

.maintenance-card img {
  width: 82px;
  height: 82px;
  object-fit: cover;
  border-radius: 22px;
  margin-bottom: 12px;
}

.maintenance-card span {
  display: block;
  color: #6ee7f9;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
}

.maintenance-card h1 {
  margin: 10px 0;
  font-size: clamp(28px, 9vw, 42px);
  line-height: 1;
}

.maintenance-card p {
  color: #cbd5e1;
  line-height: 1.55;
  margin: 0 0 18px;
}

.maintenance-whatsapp {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  background: #25d366;
  color: #052e16;
  font-weight: 900;
  text-decoration: none;
}

.maintenance-card small {
  display: block;
  margin-top: 14px;
  color: #94a3b8;
}

@media (max-width: 680px) {
  .support-float {
    right: 12px;
    bottom: 12px;
    min-width: 112px;
    min-height: 52px;
    padding: 9px 12px;
    border-radius: 14px;
  }

  .support-float strong {
    font-size: 14px;
  }
}

/* Panther Storefront Pro refresh - 2026-06-30 */
html[data-theme="dark"] {
  --page: #030705;
  --surface: #08100c;
  --ink: #f5fff7;
  --muted: #8fa79a;
  --line: rgba(31, 255, 99, .14);
  --clean-gold: #20e866;
  --clean-green: #20e866;
  --clean-text: #f5fff7;
  --clean-muted: #8fa79a;
  --clean-card: #08100c;
  --clean-card-2: #0d1711;
  --clean-line: rgba(31, 255, 99, .14);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% -4%, rgba(32,232,102,.18), transparent 28%),
    radial-gradient(circle at 86% 6%, rgba(16,185,129,.12), transparent 24%),
    linear-gradient(180deg, #030705 0%, #07110c 48%, #030705 100%);
}

.site {
  width: min(1120px, 100%);
}

.topnav {
  min-height: 60px;
  margin: 10px auto 0;
  width: min(1120px, calc(100% - 20px));
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  background: rgba(4, 9, 7, .82);
  box-shadow: 0 18px 54px rgba(0,0,0,.26);
}

.logo strong {
  color: #fff;
}

.logo span,
.domain-pill,
.hero h1 span,
.section-head span,
.panel-head span {
  color: #20e866;
}

.domain-pill {
  border-color: rgba(32,232,102,.22);
  background: rgba(32,232,102,.08);
}

.topnav nav a {
  border-radius: 9px;
  color: #cfe7d8;
}

.topnav nav a:hover,
.nav-cta {
  background: rgba(32,232,102,.12);
  color: #20e866 !important;
}

.theme-toggle {
  border-color: rgba(32,232,102,.20);
  background: rgba(32,232,102,.08);
  color: #ddffe9;
}

.hero {
  min-height: 430px;
  margin: 14px 10px 16px;
  border: 1px solid rgba(32,232,102,.20);
  border-radius: 18px;
  box-shadow: 0 26px 70px rgba(0,0,0,.36);
}

.hero__overlay {
  background:
    linear-gradient(90deg, rgba(3,7,5,.92), rgba(3,7,5,.62) 48%, rgba(3,7,5,.18)),
    linear-gradient(180deg, rgba(3,7,5,.10), rgba(3,7,5,.74));
}

.hero__content {
  min-height: 430px;
  padding: 40px;
}

.hero h1 {
  max-width: 560px;
  font-size: clamp(42px, 6vw, 68px);
  line-height: .95;
}

.hero p {
  max-width: 510px;
  color: #cfe7d8;
}

.badge {
  border-color: rgba(32,232,102,.24);
  background: rgba(32,232,102,.12);
  color: #55ff95;
}

.hero-primary,
.primary,
.reseller-link {
  border: 0;
  border-radius: 10px;
  background: linear-gradient(180deg, #39ff7e, #0cbf45);
  color: #021306;
  box-shadow: 0 14px 34px rgba(32,232,102,.20);
}

.hero-primary:hover,
.primary:hover,
.reseller-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 18px 42px rgba(32,232,102,.26);
}

.social-promo {
  display: none;
}

.game-focus {
  margin: 0 10px 14px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 310px;
  gap: 12px;
  align-items: stretch;
}

.game-focus__card,
.game-focus__benefits,
.trust-row div,
.flow-step,
.section,
.checkout-main,
.summary-card,
.process {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px;
  background: rgba(8,16,12,.86);
  box-shadow: 0 18px 48px rgba(0,0,0,.24);
}

.game-focus__card {
  display: grid;
  grid-template-columns: minmax(220px, 42%) 1fr;
  overflow: hidden;
  min-height: 250px;
}

.game-focus__card img {
  width: 100%;
  height: 100%;
  min-height: 250px;
  object-fit: cover;
  background: #050806;
}

.game-focus__card > div {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
}

.game-focus h2 {
  margin: 12px 0 8px;
  color: #fff;
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1;
}

.game-focus p {
  color: #a9c3b4;
  line-height: 1.55;
}

.game-focus__actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.game-focus__actions a,
.game-focus__actions button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border-radius: 10px;
  font-weight: 950;
  cursor: pointer;
}

.game-focus__actions a {
  background: #20e866;
  color: #021306;
}

.game-focus__actions button {
  border: 1px solid rgba(32,232,102,.32);
  background: rgba(32,232,102,.10);
  color: #6aff9c;
}

.game-focus__benefits {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.game-focus__benefits div {
  padding: 14px;
  border: 1px solid rgba(32,232,102,.12);
  border-radius: 10px;
  background: rgba(255,255,255,.035);
}

.game-focus__benefits strong,
.game-focus__benefits span {
  display: block;
}

.game-focus__benefits strong {
  color: #fff;
}

.game-focus__benefits span {
  margin-top: 4px;
  color: #8fa79a;
  font-size: 13px;
}

.trust-row {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 10px 14px;
}

.trust-row div {
  min-height: 72px;
  display: grid;
  grid-template-columns: 38px 1fr;
  column-gap: 10px;
  padding: 13px;
}

.trust-row b {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: rgba(32,232,102,.12);
  color: #20e866;
}

.trust-row strong {
  color: #fff;
}

.trust-row span {
  display: block;
  color: #8fa79a;
}

.flow-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 10px 18px;
}

.flow-strip .flow-step:nth-child(4) {
  display: grid;
}

.flow-step {
  min-height: 78px;
}

.flow-step b,
.step > span {
  background: #20e866;
  color: #021306;
}

#destacados {
  display: block !important;
}

.section,
.checkout {
  margin-left: 10px;
  margin-right: 10px;
}

.section {
  padding: 18px;
}

.section-head {
  margin-bottom: 16px;
}

.section-head h2,
.panel-head h2,
.process h2 {
  color: #fff;
}

.section-head p,
.panel-head p {
  color: #8fa79a;
}

.popular-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.popular-card {
  min-height: 216px;
  border-radius: 12px;
  background: #0b1510;
}

.checkout {
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 14px;
}

.checkout-main,
.summary-card,
.process {
  padding: 18px;
}

.checkout-main {
  overflow: hidden;
}

.checkout-main::before {
  content: "Compra guiada";
  top: 16px;
  right: 16px;
  background: rgba(32,232,102,.12);
  color: #65ff9d;
}

.step {
  margin-top: 18px;
}

.field input,
.tab,
.payment,
.verify-box,
.payment-box,
.process-grid div,
.order,
.empty {
  border-color: rgba(255,255,255,.10);
  background: #050a07;
  color: #fff;
}

.field input:focus {
  border-color: rgba(32,232,102,.56);
  box-shadow: 0 0 0 3px rgba(32,232,102,.13);
}

.tabs {
  display: flex;
  gap: 8px;
}

.tab.active,
.payment.active {
  border-color: rgba(32,232,102,.55);
  background: rgba(32,232,102,.12);
  color: #73ffa5;
}

.packs {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.pack {
  min-height: 132px;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "kicker stock"
    "title price"
    "desc price"
    "select select";
  align-items: center;
  gap: 4px 12px;
  padding: 15px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 92% 8%, rgba(32,232,102,.12), transparent 34%),
    #08110c;
}

.pack .product-art {
  display: none;
}

.pack .pack-kicker {
  grid-area: kicker;
  margin: 0;
  color: #20e866;
}

.pack strong {
  grid-area: title;
  min-height: 0;
  margin: 0;
  color: #fff;
  font-size: 19px;
}

.pack small {
  grid-area: desc;
  min-height: 0;
  margin: 0;
  color: #9bb7a8;
}

.pack .price-row {
  grid-area: price;
  margin: 0;
  justify-content: flex-end;
  align-self: center;
}

.pack .price-row b {
  margin: 0;
  min-height: 40px;
  padding: 0 10px;
  border-radius: 10px;
  background: rgba(32,232,102,.12);
  color: #20e866;
  font-size: 21px;
}

.pack .price-row svg {
  display: none;
}

.pack .select-label {
  grid-area: select;
  width: 100%;
  min-height: 38px;
  margin: 10px 0 0;
  border-radius: 9px;
  background: rgba(255,255,255,.07);
}

.pack.active {
  border-color: rgba(32,232,102,.72);
  box-shadow: 0 0 0 1px rgba(32,232,102,.22) inset, 0 18px 42px rgba(0,0,0,.30);
}

.pack.active .select-label {
  background: #20e866;
  color: #021306;
}

.pack .stock-badge {
  grid-area: stock;
  position: static;
  min-width: 72px;
  height: 30px;
  border-color: rgba(32,232,102,.35);
  background: rgba(32,232,102,.12);
  color: #73ffa5;
  box-shadow: none;
}

.pack em {
  top: 10px;
  right: 10px;
  background: #20e866;
  color: #021306;
}

.summary-card {
  position: sticky;
  top: 84px;
}

.summary-row {
  border-color: rgba(255,255,255,.08);
}

.summary-row.total strong {
  color: #20e866;
}

.secondary,
.verify-btn {
  border-color: rgba(32,232,102,.28);
  background: rgba(32,232,102,.08);
  color: #71ffa4;
}

.support-float {
  right: 18px;
  bottom: 18px;
  border: 1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, #33ef78, #0bb445);
  color: #031407;
  box-shadow: 0 16px 44px rgba(32,232,102,.26);
}

.support-float span,
.support-float strong {
  color: #031407;
}

.social-band {
  display: none;
}

.other-games {
  margin-top: 16px;
}

@media (max-width: 980px) {
  .game-focus,
  .checkout {
    grid-template-columns: 1fr;
  }

  .summary-card,
  .checkout-side {
    position: static;
  }

  .popular-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .topnav {
    width: calc(100% - 16px);
    margin-top: 8px;
  }

  .hero {
    min-height: 430px;
    margin: 8px;
  }

  .hero__image {
    object-position: center top;
    opacity: .72;
  }

  .hero__overlay {
    background:
      linear-gradient(180deg, rgba(3,7,5,.18), rgba(3,7,5,.72) 48%, rgba(3,7,5,.94)),
      linear-gradient(90deg, rgba(3,7,5,.78), rgba(3,7,5,.28));
  }

  .hero__content {
    min-height: 430px;
    padding: 24px 18px 92px;
    justify-content: end;
  }

  .game-focus {
    margin: 0 8px 12px;
  }

  .game-focus__card {
    grid-template-columns: 1fr;
  }

  .game-focus__card img {
    min-height: 180px;
    max-height: 220px;
  }

  .game-focus__benefits,
  .trust-row,
  .flow-strip,
  .popular-grid,
  .packs {
    grid-template-columns: 1fr;
  }

  .trust-row,
  .flow-strip,
  .checkout,
  .section {
    margin-left: 8px;
    margin-right: 8px;
  }

  .section,
  .checkout-main,
  .summary-card,
  .process {
    padding: 14px;
  }

  .pack {
    min-height: 124px;
  }

  .checkout-main::before {
    position: static;
    margin-bottom: 12px;
  }

  .support-float {
    right: 12px;
    bottom: 12px;
  }
}

/* Correccion identidad Panther: volver a dorado/negro, sin verde competencia */
html[data-theme="dark"] {
  --line: rgba(79, 141, 255, .18);
  --clean-gold: #4f8dff;
  --clean-green: #4f8dff;
  --clean-line: rgba(79, 141, 255, .18);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% -4%, rgba(79,141,255,.14), transparent 28%),
    radial-gradient(circle at 86% 6%, rgba(79,141,255,.08), transparent 24%),
    linear-gradient(180deg, #050806 0%, #0b0f0c 48%, #050806 100%);
}

.logo span,
.domain-pill,
.hero h1 span,
.section-head span,
.panel-head span,
.pack .pack-kicker,
.pack .price-row b,
.summary-row.total strong {
  color: #4f8dff;
}

.domain-pill,
.theme-toggle,
.game-focus__actions button,
.secondary,
.verify-btn {
  border-color: rgba(79,141,255,.28);
  background: rgba(79,141,255,.09);
  color: #8b5cf6;
}

.topnav nav a:hover,
.nav-cta,
.badge,
.pack .price-row b,
.pack .stock-badge,
.checkout-main::before {
  border-color: rgba(79,141,255,.28);
  background: rgba(79,141,255,.12);
  color: #8b5cf6 !important;
}

.hero,
.game-focus__card,
.game-focus__benefits,
.trust-row div,
.flow-step,
.section,
.checkout-main,
.summary-card,
.process {
  border-color: rgba(79,141,255,.14);
}

.hero-primary,
.primary,
.reseller-link,
.game-focus__actions a,
.pack.active .select-label,
.flow-step b,
.step > span,
.pack em {
  background: linear-gradient(180deg, #8b5cf6, #4f8dff);
  color: #17100a;
}

.hero-primary,
.primary,
.reseller-link {
  box-shadow: 0 14px 34px rgba(79,141,255,.18);
}

.hero-primary:hover,
.primary:hover,
.reseller-link:hover {
  box-shadow: 0 18px 42px rgba(79,141,255,.24);
}

.game-focus__benefits div,
.pack {
  border-color: rgba(79,141,255,.12);
}

.field input:focus {
  border-color: rgba(79,141,255,.56);
  box-shadow: 0 0 0 3px rgba(79,141,255,.13);
}

.tab.active,
.payment.active {
  border-color: rgba(79,141,255,.55);
  background: rgba(79,141,255,.12);
  color: #8b5cf6;
}

.pack {
  background:
    radial-gradient(circle at 92% 8%, rgba(79,141,255,.11), transparent 34%),
    #08110c;
}

.pack.active {
  border-color: rgba(79,141,255,.72);
  box-shadow: 0 0 0 1px rgba(79,141,255,.22) inset, 0 18px 42px rgba(0,0,0,.30);
}

.pack .stock-badge {
  border-color: rgba(79,141,255,.35);
  background: rgba(79,141,255,.12);
  color: #8b5cf6;
}

.support-float {
  background: linear-gradient(180deg, #8b5cf6, #4f8dff);
  color: #17100a;
  box-shadow: 0 16px 44px rgba(79,141,255,.24);
}

.store-entry {
  margin: 0 10px 18px;
  display: block;
}

.catalog-entry-card {
  position: relative;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  padding: 28px 34px;
  border: 1px solid rgba(79,141,255,.24);
  border-radius: 16px;
  background:
    linear-gradient(90deg, rgba(4,7,6,.86), rgba(4,7,6,.52) 46%, rgba(4,7,6,.04)),
    url("/recargas/img/free-fire-entry-bg.jpg?v=visible-20260630") right center / auto 100% no-repeat,
    #060a08;
  box-shadow: 0 22px 58px rgba(0,0,0,.28);
}

.catalog-entry-card::after {
  content: "";
  position: absolute;
  right: 28px;
  top: 22px;
  width: 62px;
  height: 62px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.25);
  background:
    linear-gradient(180deg, #8b5cf6, #4f8dff);
  box-shadow: 0 16px 36px rgba(79,141,255,.24);
}

.catalog-entry-card span {
  position: relative;
  z-index: 1;
  color: #4f8dff;
  font-size: 14px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.catalog-entry-card strong {
  position: relative;
  z-index: 1;
  margin-top: 7px;
  color: #fff;
  font-size: clamp(34px, 5vw, 58px);
  line-height: .96;
}

.catalog-entry-card p {
  position: relative;
  z-index: 1;
  width: min(420px, 72%);
  margin-top: 14px;
  color: #cfd8d2;
  font-size: 18px;
  line-height: 1.45;
}

.catalog-entry-card b {
  position: relative;
  z-index: 1;
  width: fit-content;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 28px;
  padding: 0 18px;
  border: 1px solid rgba(79,141,255,.42);
  border-radius: 10px;
  color: #8b5cf6;
  font-style: normal;
}

.catalog-entry-card i {
  font-style: normal;
}

.pack.no-stock .select-label,
.popular-card.no-stock .select-label {
  background: rgba(79,141,255,.08);
  color: #8b5cf6;
}

@media (max-width: 680px) {
  .store-entry {
    margin-left: 8px;
    margin-right: 8px;
  }
}

/* Mobile: entrada por juego antes de mostrar montos */
@media (max-width: 680px) {
  .hero,
  .game-focus,
  .trust-row,
  .flow-strip,
  #destacados,
  .checkout {
    display: none !important;
  }

  body.game-flow-open .flow-strip,
  body.game-flow-open .checkout {
    display: grid !important;
  }

  body.game-flow-open .flow-strip {
    grid-template-columns: 1fr;
  }

  .store-entry {
    margin-top: 10px;
  }

  .catalog-entry-card {
    min-height: 320px;
    padding: 24px;
    justify-content: end;
    background:
      linear-gradient(180deg, rgba(3,7,5,.02), rgba(3,7,5,.22) 38%, rgba(3,7,5,.82)),
      url("/recargas/img/free-fire-entry-bg.jpg?v=visible-20260630") center top / cover no-repeat,
      #060a08;
  }

  .catalog-entry-card::after {
    right: 18px;
    top: 18px;
    width: 58px;
    height: 58px;
  }

  .catalog-entry-card span,
  .catalog-entry-card strong,
  .catalog-entry-card p,
  .catalog-entry-card b {
    text-shadow: 0 2px 12px rgba(0,0,0,.78);
  }

  .catalog-entry-card p {
    width: 100%;
    font-size: 15px;
  }

  body.game-flow-open .store-entry {
    position: sticky;
    top: 8px;
    z-index: 8;
  }

  body.game-flow-open .catalog-entry-card {
    min-height: 78px;
    padding: 14px 16px;
    background:
      linear-gradient(90deg, rgba(4,7,6,.88), rgba(4,7,6,.44)),
      url("/recargas/img/free-fire-entry-bg.jpg?v=visible-20260630") right center / auto 120% no-repeat,
      #060a08;
  }

  body.game-flow-open .catalog-entry-card span,
  body.game-flow-open .catalog-entry-card p,
  body.game-flow-open .catalog-entry-card b,
  body.game-flow-open .catalog-entry-card::after {
    display: none;
  }

  body.game-flow-open .catalog-entry-card strong {
    font-size: 22px;
  }
}

/* 2026-07-03: experiencia tipo tienda, mas limpia y enfocada */
body {
  background:
    radial-gradient(circle at 18% 0%, rgba(79,141,255,.16), transparent 30%),
    linear-gradient(180deg, #050706 0%, #090d0b 48%, #050706 100%);
}

.site {
  width: min(1180px, 100%);
}

.topnav {
  margin: 0 auto;
  background: rgba(5, 7, 6, .86);
  border-bottom-color: rgba(79,141,255,.16);
}

.topnav nav a {
  color: #d9e2df;
}

.domain-pill {
  background: rgba(79,141,255,.09);
  border-color: rgba(79,141,255,.2);
  color: #8b5cf6;
}

.hero {
  min-height: 560px;
  margin: 16px 10px 14px;
  border-radius: 18px;
  border: 1px solid rgba(79,141,255,.20);
}

.hero__content {
  min-height: 560px;
}

.hero h1 {
  max-width: 700px;
}

.hero p {
  max-width: 560px;
}

.hero-preview,
.store-entry,
.game-focus,
.flow-strip,
.social-band,
#destacados,
.other-games,
.orders-section,
.checkout .game-picker {
  display: none !important;
}

.trust-row {
  margin: 10px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.trust-row div {
  min-height: 78px;
  border-radius: 14px;
  background: rgba(255,255,255,.045);
  border-color: rgba(79,141,255,.16);
}

.game-select-section {
  margin: 18px 10px 34px;
  padding: 0;
  border: 0;
  background: transparent;
}

.game-select-section .section-head {
  display: grid;
  gap: 6px;
  margin-bottom: 16px;
}

.game-select-section .section-head h2 {
  font-size: clamp(34px, 5vw, 56px);
  color: #fff;
}

.game-select-section .section-head::after {
  content: "Free Fire ya esta disponible. Los demas juegos se abriran pronto.";
  max-width: 620px;
  color: #a9b7b1;
  font-size: 16px;
  line-height: 1.45;
}

.game-picker {
  gap: 16px;
}

.game-option {
  border-radius: 18px;
  transform: translateZ(0);
}

.game-option-main {
  min-height: 330px;
  grid-template-columns: minmax(230px, 42%) 1fr;
}

.game-option-main span {
  font-size: clamp(42px, 7vw, 76px);
  padding-top: 132px;
  padding-bottom: 52px;
}

.game-option-main::before {
  content: "Disponible ahora";
  position: absolute;
  z-index: 3;
  right: 22px;
  top: 22px;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  padding: 0 14px;
  border-radius: 999px;
  background: linear-gradient(180deg, #8b5cf6, #4f8dff);
  color: #17100a;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.game-option-upcoming {
  min-height: 154px;
  grid-template-columns: 190px 1fr;
}

.game-option-upcoming span {
  padding-top: 55px;
  padding-bottom: 42px;
  font-size: clamp(24px, 3.3vw, 34px);
}

.game-option-upcoming small {
  width: fit-content;
  margin-top: -34px;
  margin-left: 20px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(79,141,255,.12);
  border: 1px solid rgba(79,141,255,.24);
}

.checkout {
  display: none;
  margin: 20px 10px 34px;
}

body.game-flow-open .checkout {
  display: grid;
}

body.game-flow-open .game-select-section,
body.game-flow-open .trust-row,
body.game-flow-open .hero {
  display: none !important;
}

body.game-flow-open .topnav {
  position: sticky;
}

.checkout-main,
.summary-card,
.process {
  border-radius: 16px;
  background: rgba(255,255,255,.055);
  border-color: rgba(79,141,255,.16);
}

.panel-head h2 {
  color: #fff;
}

@media (max-width: 760px) {
  .topnav {
    margin: 0;
  }

  .hero {
    min-height: 460px;
    margin: 8px;
    border-radius: 16px;
  }

  .hero__content {
    min-height: 460px;
    padding: 26px 18px 34px;
    justify-content: end;
  }

  .hero h1 {
    font-size: clamp(42px, 13vw, 64px);
  }

  .trust-row {
    grid-template-columns: 1fr;
    margin: 8px;
  }

  .game-select-section {
    margin: 18px 8px 30px;
  }

  .game-option-main {
    grid-template-columns: 1fr;
    min-height: 320px;
  }

  .game-option-main img {
    position: absolute;
    inset: 0;
  }

  .game-option-main::after {
    background: linear-gradient(180deg, rgba(7,10,16,.12), rgba(7,10,16,.22) 36%, rgba(7,10,16,.94));
  }

  .game-option-main span {
    grid-column: 1;
    padding: 220px 18px 28px;
    font-size: 40px;
  }

  .game-option-upcoming {
    grid-template-columns: 126px 1fr;
    min-height: 126px;
  }

  .game-option-upcoming span {
    padding-top: 38px;
    padding-bottom: 34px;
    font-size: 22px;
  }

  .game-option-upcoming small {
    margin-left: 14px;
    margin-top: -26px;
    font-size: 11px;
  }

  .checkout {
    margin: 8px;
  }
}

/* Flujo guiado: primero ID, despues paquetes compactos */
/* player-name-field ya no se oculta: sin esto, Blood Strike/Honor of Kings/Marvel Rivals/PUBG Mobile/Mobile Legends BR
   (que no autocompletan el nombre como Free Fire) no tenian forma de escribirlo y quedaban trabados sin poder comprar. */
body.game-flow-open .discount-note,
body.game-flow-open:not(.player-verified) .packages-step,
body.game-flow-open:not(.player-verified) .package-controls,
body.game-flow-open:not(.player-verified) #packs,
body.game-flow-open:not(.player-verified) .payment-step,
body.game-flow-open:not(.player-verified) .checkout-side {
  display: none !important;
}

/* /v2/juego reactiva el aviso de precio especial (arriba queda oculto para el flujo viejo de una sola pagina). */
body.game-flow-open .discount-note.v2-visible {
  display: flex !important;
}

body.game-flow-open:not(.player-verified) .checkout {
  grid-template-columns: minmax(0, 720px);
  justify-content: center;
}

body.game-flow-open:not(.player-verified) .checkout-main {
  max-width: 720px;
  margin: 0 auto;
}

body.game-flow-open:not(.player-verified) .panel-head {
  margin-bottom: 18px;
}

body.game-flow-open:not(.player-verified) .panel-head h2 {
  font-size: clamp(30px, 5vw, 48px);
}

body.game-flow-open:not(.player-verified) .panel-head p::after {
  content: " Despues de confirmar tu jugador, te mostramos los paquetes.";
}

body.game-flow-open:not(.player-verified) .form-grid {
  grid-template-columns: 1fr;
}

body.game-flow-open:not(.player-verified) .field input#ffid {
  min-height: 64px;
  font-size: 22px;
  font-weight: 900;
}

body.game-flow-open.player-verified .packages-step {
  margin-top: 16px;
}

body.game-flow-open.player-verified .packages-step p {
  color: #aebbb5;
}

body.game-flow-open.player-verified .search-field {
  display: none;
}

body.game-flow-open.player-verified .tabs {
  display: none;
}

body.game-flow-open.player-verified .packs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.game-flow-open.player-verified .pack {
  min-height: 96px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name price"
    "meta action";
  gap: 6px 10px;
  padding: 12px;
  border-radius: 12px;
}

body.game-flow-open.player-verified .pack .product-art,
body.game-flow-open.player-verified .pack .pack-kicker,
body.game-flow-open.player-verified .pack small,
body.game-flow-open.player-verified .pack em,
body.game-flow-open.player-verified .pack .stock-badge {
  display: none !important;
}

body.game-flow-open.player-verified .pack strong {
  grid-area: name;
  align-self: end;
  font-size: 16px;
  line-height: 1.15;
}

body.game-flow-open.player-verified .pack .price-row {
  grid-area: price;
  align-self: start;
  justify-self: end;
  display: block;
}

body.game-flow-open.player-verified .pack .price-row b {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border-radius: 8px;
  background: rgba(32,196,122,.12);
  color: #54e39d;
  font-size: 16px;
}

body.game-flow-open.player-verified .pack .price-row svg {
  display: none;
}

body.game-flow-open.player-verified .pack .select-label {
  grid-area: action;
  justify-self: end;
  align-self: end;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 11px;
}

body.game-flow-open.player-verified .pack::before {
  content: "Disponible";
  grid-area: meta;
  align-self: end;
  color: #aebbb5;
  font-size: 11px;
  font-weight: 850;
}

body.game-flow-open.player-verified .checkout {
  grid-template-columns: minmax(0, 1fr) 300px;
}

body.game-flow-open.player-verified .checkout-main,
body.game-flow-open.player-verified .summary-card,
body.game-flow-open.player-verified .process {
  padding: 14px;
}

body.game-flow-open.player-verified .summary-card {
  position: sticky;
  top: 78px;
}

@media (max-width: 900px) {
  body.game-flow-open.player-verified .checkout {
    grid-template-columns: 1fr;
  }
  body.game-flow-open.player-verified .checkout-side {
    position: static;
  }
}

@media (max-width: 680px) {
  body.game-flow-open.player-verified .packs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  body.game-flow-open.player-verified .pack {
    min-height: 92px;
    padding: 10px;
  }

  body.game-flow-open.player-verified .pack strong {
    font-size: 14px;
  }

  body.game-flow-open.player-verified .pack .price-row b {
    font-size: 14px;
    padding: 0 7px;
  }

  body.game-flow-open:not(.player-verified) .field input#ffid {
    min-height: 58px;
    font-size: 20px;
  }
}

/* Cuenta cliente Panther: IDs guardados, historial y saldo preparado */
.customer-account{margin:16px;padding:18px;border:1px solid rgba(79,141,255,.18);border-radius:14px;background:linear-gradient(180deg,rgba(12,16,23,.96),rgba(7,10,15,.96))}.account-head{display:grid;gap:6px;margin-bottom:14px}.account-head span,.account-card>span,.account-summary span{color:#8b5cf6;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em}.account-head h2{margin:0;color:#fff;font-size:clamp(24px,4vw,38px)}.account-head p,.account-card small,.account-summary small,.saved-id span,.account-order span{color:#94a3b8}.account-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.account-card,.account-summary{border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(255,255,255,.035);padding:14px}.account-card{display:grid;gap:10px}.account-card h3{margin:0;color:#fff;font-size:20px}.account-card label{display:grid;gap:6px;color:#cbd5e1;font-size:13px;font-weight:800}.account-card input{min-height:44px;border:1px solid rgba(255,255,255,.10);border-radius:9px;background:rgba(2,6,23,.62);color:#fff;padding:0 12px}.account-card button,.account-summary button,.saved-id__actions button{min-height:42px;border:0;border-radius:9px;background:#4f8dff;color:#17100a;font-weight:950;cursor:pointer}.account-dashboard{display:grid;gap:12px}.account-summary{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:12px;align-items:center}.account-summary div{display:grid;gap:4px}.account-summary strong{color:#fff;font-size:22px}.saved-list{display:grid;gap:8px}.saved-id,.account-order{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid rgba(255,255,255,.08);border-radius:10px;padding:10px;background:rgba(2,6,23,.36)}.saved-id div,.account-order div{display:grid;gap:3px;min-width:0}.saved-id strong,.account-order strong,.account-order b{color:#fff}.saved-id__actions{display:flex!important;flex-direction:row;gap:6px!important}.saved-id__actions button{min-height:34px;padding:0 10px}.saved-id__actions button:last-child,.account-summary button{background:rgba(255,255,255,.08);color:#e2e8f0;border:1px solid rgba(255,255,255,.12)}@media (max-width:760px){.customer-account{margin:10px;padding:12px}.account-grid,.account-summary{grid-template-columns:1fr}.saved-id,.account-order{align-items:flex-start;flex-direction:column}}

/* Mejora visual cuenta cliente: entrada clara para crear cuenta */
.account-create-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:center;margin-bottom:12px;padding:18px;border-radius:16px;border:1px solid rgba(79,141,255,.32);background:radial-gradient(circle at 20% 0%,rgba(79,141,255,.16),transparent 34%),linear-gradient(135deg,rgba(17,24,39,.98),rgba(5,8,13,.98));box-shadow:0 18px 50px rgba(0,0,0,.22)}.account-create-hero span{color:#4f8dff;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}.account-create-hero h3{margin:4px 0 6px;color:#fff;font-size:clamp(28px,4vw,46px);line-height:1}.account-create-hero p{margin:0;max-width:620px;color:#cbd5e1;font-size:16px}.account-create-hero a{min-height:46px;display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border-radius:10px;background:#4f8dff;color:#17100a;font-weight:950;text-decoration:none}.account-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}.account-benefits div{display:grid;gap:3px;min-height:78px;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035)}.account-benefits strong{color:#fff}.account-benefits span{color:#94a3b8;font-size:13px}.account-entry-grid{grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr)}.account-card--create{border-color:rgba(79,141,255,.30);background:linear-gradient(180deg,rgba(79,141,255,.075),rgba(255,255,255,.035))}.account-card--create h3{font-size:24px}.account-card--create button{min-height:48px;font-size:15px}.account-card--login{align-self:start}.account-card--login button{background:rgba(255,255,255,.08);color:#e2e8f0;border:1px solid rgba(255,255,255,.14)}@media (max-width:760px){.account-create-hero{grid-template-columns:1fr;padding:14px}.account-create-hero a{width:100%}.account-benefits,.account-entry-grid{grid-template-columns:1fr}.account-create-hero h3{font-size:30px}}

/* Cuenta cliente: mostrar formularios solo al elegir iniciar sesion o registrarse */
.account-choice{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}.account-choice button{min-height:46px;padding:0 16px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.08);color:#e2e8f0;font-weight:950;cursor:pointer}.account-choice button.active{background:#4f8dff;color:#17100a;border-color:#4f8dff}.account-forms[hidden],.account-card[hidden]{display:none!important}.account-forms{margin-top:12px}@media (max-width:760px){.account-choice{justify-content:stretch}.account-choice button{flex:1 1 160px}}

/* Registro cliente estilo formulario profesional */
.account-card select{min-height:44px;border:1px solid rgba(255,255,255,.10);border-radius:9px;background:rgba(2,6,23,.62);color:#fff;padding:0 12px;outline:0}.account-card select:focus,.account-card input:focus{border-color:rgba(79,141,255,.62);box-shadow:0 0 0 3px rgba(79,141,255,.10)}.account-card--create h3{color:#fff;margin-bottom:2px}.account-card--create label{font-size:12px;text-transform:none;letter-spacing:0}.account-card--create button[type="submit"]{margin-top:2px}

/* Metodo de pago: QR Bancario / Saldo Panther */
.payment-method-box{display:grid;gap:10px;padding:14px;border:1px solid rgba(79,141,255,.18);border-radius:12px;background:rgba(255,255,255,.035)}.payment-method-box>span{color:#8b5cf6;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.06em}.payment-method-box .payments{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.payment-method-box .payment{display:grid;gap:4px;min-height:74px;text-align:left}.payment-method-box .payment strong{color:#fff}.payment-method-box .payment small{color:#94a3b8}.payment-method-box .payment.active strong{color:#c4b5fd}.payment-method-box .locked-payment{margin-top:0;border-radius:10px}@media (max-width:680px){.payment-method-box .payments{grid-template-columns:1fr}}

/* Perfil cliente y saldo USD */
.customer-profile-card{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr) auto;gap:12px;align-items:stretch}.profile-info,.wallet-balance-card,.wallet-history-card{border:1px solid rgba(255,255,255,.09);border-radius:14px;background:rgba(255,255,255,.035);padding:16px}.profile-info span,.wallet-balance-card span,.wallet-history-head span{color:#8b5cf6;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.06em}.profile-info h3,.wallet-history-head h3{margin:6px 0 10px;color:#fff;font-size:22px}.profile-info p{margin:5px 0;color:#cbd5e1}.wallet-balance-card{display:grid;gap:6px}.wallet-balance-card strong{color:#fff;font-size:34px;line-height:1}.wallet-balance-card small,.wallet-history-head p{color:#94a3b8}.wallet-balance-card button,.profile-logout{min-height:42px;border-radius:10px;border:0;font-weight:950;cursor:pointer}.wallet-balance-card button{margin-top:8px;background:#4f8dff;color:#17100a}.profile-logout{align-self:start;background:rgba(255,255,255,.08);color:#e2e8f0;border:1px solid rgba(255,255,255,.12);padding:0 14px}.wallet-history-card{display:grid;gap:12px}.wallet-history-head h3{margin-bottom:4px}.wallet-table-wrap{max-height:360px;overflow:auto;border:1px solid rgba(255,255,255,.08);border-radius:12px}.wallet-table{width:100%;border-collapse:collapse;color:#e2e8f0}.wallet-table th,.wallet-table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.07);text-align:left}.wallet-table th{position:sticky;top:0;background:#111722;color:#8b5cf6;font-size:12px;text-transform:uppercase}.wallet-table td:last-child{text-align:right;font-weight:950}.wallet-plus{color:#54e39d}.wallet-minus{color:#ffb86b}.account-tools-grid{grid-template-columns:repeat(2,minmax(0,1fr))}@media (max-width:860px){.customer-profile-card,.account-tools-grid{grid-template-columns:1fr}.profile-logout{width:100%}}

/* Historial de saldo tipo Binance: movimientos en tarjetas */
.wallet-movement-list{display:grid;gap:10px;max-height:420px;overflow:auto;padding-right:4px}.wallet-movement{display:grid;grid-template-columns:minmax(90px,.55fr) minmax(90px,.45fr);gap:4px 12px;align-items:center;padding:13px 14px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(2,6,23,.40)}.wallet-movement strong{color:#54e39d;font-size:20px;line-height:1}.wallet-movement.debit strong{color:#ffb86b}.wallet-movement span{justify-self:end;color:#d7fbe7;font-weight:900}.wallet-movement time{grid-column:1/-1;color:#94a3b8;font-size:13px}.wallet-history-card .wallet-table-wrap{display:none}@media (max-width:560px){.wallet-movement{grid-template-columns:1fr}.wallet-movement span{justify-self:start}}

/* Pestaña Recarga al instante con saldo */
.instant-recharge{margin:16px;padding:18px;border:1px solid rgba(79,141,255,.18);border-radius:16px;background:linear-gradient(180deg,rgba(12,16,23,.96),rgba(7,10,15,.96))}.instant-head{display:grid;gap:5px;margin-bottom:14px}.instant-head span{color:#8b5cf6;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}.instant-head h2{margin:0;color:#fff;font-size:clamp(28px,4vw,42px)}.instant-head p{margin:0;color:#cbd5e1}.instant-panel{display:grid;grid-template-columns:240px minmax(0,1fr);gap:14px}.instant-balance{display:grid;align-content:start;gap:8px;padding:16px;border:1px solid rgba(255,255,255,.09);border-radius:14px;background:radial-gradient(circle at 20% 0%,rgba(79,141,255,.14),transparent 35%),rgba(255,255,255,.035)}.instant-balance span{color:#94a3b8;font-weight:900}.instant-balance strong{color:#fff;font-size:36px;line-height:1}.instant-balance a{min-height:40px;display:inline-flex;align-items:center;justify-content:center;border-radius:10px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);color:#e2e8f0;text-decoration:none;font-weight:950}.instant-list{display:grid;gap:10px}.instant-game-title{display:flex;align-items:center;justify-content:space-between;color:#fff}.instant-game-title strong{font-size:20px}.instant-game-title span{min-width:30px;height:30px;display:grid;place-items:center;border-radius:999px;background:rgba(79,141,255,.16);color:#4f8dff;font-weight:950}.instant-pack{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:13px 14px;border:1px solid rgba(255,255,255,.09);border-radius:12px;background:rgba(2,6,23,.40)}.instant-pack div{display:grid;gap:4px}.instant-pack strong{color:#fff}.instant-pack span{color:#94a3b8}.instant-pack b{color:#fff;font-size:18px}.instant-pack button{min-height:38px;padding:0 14px;border:0;border-radius:10px;background:#4f8dff;color:#17100a;font-weight:950;cursor:pointer}@media (max-width:780px){.instant-recharge{margin:10px;padding:12px}.instant-panel{grid-template-columns:1fr}.instant-pack{grid-template-columns:1fr}.instant-pack button{width:100%}}

/* Fases de compra con saldo Panther */
.wallet-phase-guide .flow-step.done{border-color:rgba(32,196,122,.42)!important;background:rgba(32,196,122,.10)!important}.wallet-phase-guide .flow-step.done b{background:#20c47a!important;color:#06140d!important}.account-phase-card{display:grid;gap:8px;padding:16px;border:1px solid rgba(79,141,255,.24);border-radius:14px;background:linear-gradient(135deg,rgba(79,141,255,.12),rgba(255,255,255,.035))}.account-phase-card span{color:#4f8dff;font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.08em}.account-phase-card h3{margin:0;color:#fff;font-size:24px}.account-phase-card p{margin:0;color:#cbd5e1;line-height:1.45}.account-phase-card button{min-height:44px;width:max-content;max-width:100%;padding:0 16px;border:0;border-radius:10px;background:#4f8dff;color:#17100a;font-weight:950;cursor:pointer}.account-phase-card.ready{border-color:rgba(32,196,122,.30);background:linear-gradient(135deg,rgba(32,196,122,.12),rgba(255,255,255,.035))}.account-phase-card.ready span{color:#54e39d}@media(max-width:760px){.account-phase-card button{width:100%}.hero-secondary{display:inline-flex!important}}

/* Flujo saldo Panther: acciones guiadas y carga rapida */
.hero-secondary{display:inline-flex!important}.summary-row.phase-row{border-color:rgba(79,141,255,.22);background:rgba(79,141,255,.08);border-radius:10px;padding:9px 10px}.summary-row.phase-row strong{color:#c4b5fd}.summary-guide{display:grid;gap:5px;margin-top:10px;padding:12px;border-radius:12px;border:1px solid rgba(255,255,255,.10);background:rgba(255,255,255,.045);color:#cbd5e1;font-size:13px;line-height:1.35}.summary-guide b{color:#4f8dff;font-size:12px;text-transform:uppercase;letter-spacing:.08em}.summary-guide.pay{border-color:rgba(32,196,122,.32);background:rgba(32,196,122,.09)}.summary-guide.pay b{color:#54e39d}.summary-guide.account,.summary-guide.balance{border-color:rgba(79,141,255,.28);background:rgba(79,141,255,.08)}.wallet-topup{display:grid;gap:8px;margin-top:8px;padding:10px;border:1px solid rgba(255,255,255,.10);border-radius:12px;background:rgba(2,6,23,.32)}.wallet-topup>span{color:#8b5cf6!important;font-size:11px!important;font-weight:950!important;text-transform:uppercase;letter-spacing:.07em}.wallet-topup__chips{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}.wallet-topup__chips button{min-height:34px;margin:0!important;padding:0 8px;border-radius:8px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.08);color:#e2e8f0;font-size:12px;font-weight:950;cursor:pointer}.wallet-topup__chips button.active,.wallet-topup__chips button:hover{background:#4f8dff;color:#17100a;border-color:#4f8dff}.wallet-topup label{display:grid;gap:5px;color:#94a3b8;font-size:12px;font-weight:850}.wallet-topup input{min-height:38px;border:1px solid rgba(255,255,255,.12);border-radius:9px;background:rgba(2,6,23,.62);color:#fff;padding:0 10px}.wallet-topup input:focus{outline:0;border-color:rgba(79,141,255,.65);box-shadow:0 0 0 3px rgba(79,141,255,.10)}@media(max-width:760px){.wallet-topup__chips{grid-template-columns:repeat(2,minmax(0,1fr))}.wallet-topup__chips button:last-child{grid-column:1/-1}.summary-guide{font-size:12px}.summary-card .primary{min-height:48px}}

/* Cuenta cliente: datos personales y seguridad */
.account-settings-card{display:grid;gap:14px}.account-settings-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-items:end;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:rgba(2,6,23,.30)}.account-settings-form label{display:grid;gap:6px;color:#cbd5e1;font-size:12px;font-weight:850}.account-settings-form input{min-height:42px;border:1px solid rgba(255,255,255,.10);border-radius:9px;background:rgba(2,6,23,.62);color:#fff;padding:0 11px}.account-settings-form input:focus{outline:0;border-color:rgba(79,141,255,.65);box-shadow:0 0 0 3px rgba(79,141,255,.10)}.account-settings-form button{min-height:42px;border:0;border-radius:9px;background:#4f8dff;color:#17100a;font-weight:950;cursor:pointer}.profile-info h3{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;letter-spacing:.03em}.profile-info p{overflow-wrap:anywhere}@media(max-width:900px){.account-settings-form{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:560px){.account-settings-form{grid-template-columns:1fr}.account-settings-form button{width:100%}}
.account-link-button{min-height:38px!important;background:transparent!important;color:#4f8dff!important;border:1px solid rgba(79,141,255,.35)!important}
.account-card button:disabled,.account-summary button:disabled,.wallet-balance-card button:disabled{opacity:.62;cursor:wait;filter:saturate(.8)}

/* 2026-07-09: cliente ordenado en una sola ruta de compra */
.client-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 0 10px 16px;
}

.path-card {
  min-height: 118px;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas:
    "num label"
    "num text";
  gap: 4px 12px;
  align-content: center;
  padding: 16px;
  border: 1px solid rgba(79,141,255,.18);
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  color: #e2e8f0;
}

.path-card b {
  grid-area: num;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #4f8dff;
  color: #17100a;
  font-size: 20px;
  font-weight: 950;
}

.path-card span {
  grid-area: label;
  color: #8b5cf6;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.path-card strong {
  grid-area: text;
  color: #fff;
  font-size: 16px;
  line-height: 1.25;
}

.path-card.active {
  border-color: rgba(79,141,255,.42);
  background:
    radial-gradient(circle at 18% 0%, rgba(79,141,255,.16), transparent 38%),
    rgba(255,255,255,.06);
}

.game-select-section,
.instant-recharge {
  display: none !important;
}

body.game-flow-open .client-path {
  display: none !important;
}

.customer-account {
  margin-top: 0;
}

.account-head {
  max-width: 760px;
}

.checkout-main::before {
  content: "Compra guiada";
}

@media (max-width: 760px) {
  body:not(.game-flow-open) .hero {
    display: block !important;
  }

  .client-path {
    grid-template-columns: 1fr;
    margin: 0 8px 12px;
  }

  .path-card {
    min-height: 96px;
    padding: 14px;
  }

  .topnav nav {
    width: 100%;
  }

  .topnav nav a {
    flex: 1 0 auto;
    justify-content: center;
  }

}

/* 2026-07-09: ideas funcionales adaptadas a Panther */
.client-status {
  width: min(860px, calc(100% - 20px));
  min-height: 66px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  align-items: center;
  margin: -48px auto 16px;
  position: relative;
  z-index: 3;
  overflow: hidden;
  border: 1px solid rgba(79,141,255,.22);
  border-radius: 18px;
  background:
    linear-gradient(90deg, rgba(79,141,255,.18), rgba(32,196,122,.10)),
    rgba(8, 13, 10, .94);
  box-shadow: 0 22px 54px rgba(0,0,0,.32);
  backdrop-filter: blur(14px);
}

.client-status__pill {
  min-height: 64px;
  display: grid;
  justify-content: center;
  align-content: center;
  gap: 3px;
  padding: 10px 18px;
  color: #fff;
  text-align: center;
}

.client-status__pill + .client-status__pill {
  border-left: 1px solid rgba(255,255,255,.14);
}

.client-status__pill span {
  color: #b9c8c0;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.client-status__pill strong {
  color: #8b5cf6;
  font-size: 20px;
  line-height: 1.1;
}

.client-status.is-logged .client-status__pill:last-child strong {
  color: #54e39d;
}

.customer-profile-card {
  grid-template-columns: auto minmax(0, 1fr) minmax(280px, .78fr) auto;
  gap: 0;
  overflow: hidden;
  padding: 0;
  border-color: rgba(79,141,255,.18);
  background:
    linear-gradient(90deg, rgba(79,141,255,.16), transparent 48%),
    rgba(6, 10, 8, .96);
}

.profile-avatar {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  align-self: center;
  margin: 22px;
  border-radius: 999px;
  background:
    radial-gradient(circle at 35% 22%, rgba(79,141,255,.42), transparent 34%),
    linear-gradient(180deg, #4f8dff, #1e1b4b);
  color: #17100a;
  font-size: 32px;
  font-weight: 950;
}

.customer-profile-card .profile-info,
.customer-profile-card .wallet-balance-card {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.customer-profile-card .profile-info {
  align-content: center;
  padding: 24px 20px 24px 0;
}

.customer-profile-card .wallet-balance-card {
  margin: 18px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(2,6,23,.26);
}

.wallet-balance-card strong {
  color: #54e39d;
  font-size: clamp(34px, 4vw, 48px);
}

.profile-logout {
  margin: 18px 18px 0 0;
}

body.game-flow-open:not(.player-verified) .packages-step,
body.game-flow-open:not(.player-verified) #packs {
  display: grid !important;
}

body.game-flow-open:not(.player-verified) .packages-step {
  margin-top: 18px;
}

body.game-flow-open:not(.player-verified) .packs,
body.game-flow-open.player-verified .packs {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body.game-flow-open .pack {
  min-height: 92px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "name price"
    "meta action";
  gap: 6px 10px;
  align-content: center;
  padding: 12px;
  border-radius: 12px;
  border-color: rgba(255,255,255,.10);
  background: rgba(255,255,255,.035);
}

body.game-flow-open .pack .pack-value {
  display: block;
  color: #54e39d;
  font-size: 18px;
  font-weight: 950;
}

body.game-flow-open.player-verified .pack .pack-value,
body.game-flow-open:not(.player-verified) .pack .pack-value {
  grid-area: price;
  align-self: start;
  justify-self: end;
}

body.game-flow-open .pack .product-art,
body.game-flow-open .pack .pack-kicker,
body.game-flow-open .pack small,
body.game-flow-open .pack em,
body.game-flow-open .pack .stock-badge {
  display: none !important;
}

body.game-flow-open .pack strong {
  grid-area: name;
  align-self: end;
  font-size: 16px;
  line-height: 1.18;
}

body.game-flow-open .pack .select-label {
  grid-area: action;
  justify-self: end;
  align-self: end;
  min-height: 28px;
  padding: 0 9px;
  border-radius: 8px;
  font-size: 11px;
}

body.game-flow-open .pack::before {
  content: "Disponible";
  grid-area: meta;
  align-self: end;
  color: #aebbb5;
  font-size: 11px;
  font-weight: 850;
}

body.game-flow-open .pack.active {
  border-color: rgba(79,141,255,.78);
  background:
    linear-gradient(135deg, rgba(79,141,255,.16), rgba(255,255,255,.04)),
    rgba(255,255,255,.04);
}

body.game-flow-open:not(.player-verified) .pack {
  cursor: not-allowed;
  opacity: .72;
}

body.game-flow-open:not(.player-verified) .pack .select-label {
  background: rgba(79,141,255,.10);
  color: #8b5cf6;
}

body.game-flow-open .pack .price-row {
  display: none !important;
}

.account-tools-grid .account-card:last-child {
  gap: 12px;
}

.account-order {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  min-height: 82px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
}

.account-order strong {
  font-size: 18px;
}

.account-order span {
  margin-top: 4px;
}

.account-order b {
  color: #54e39d;
  font-size: 18px;
}

@media (max-width: 980px) {
  .customer-profile-card {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .customer-profile-card .wallet-balance-card,
  .profile-logout {
    grid-column: 1 / -1;
  }

  .profile-logout {
    margin: 0 18px 18px;
  }

  body.game-flow-open:not(.player-verified) .packs,
  body.game-flow-open.player-verified .packs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .client-status {
    width: calc(100% - 16px);
    min-height: 58px;
    margin: -28px auto 12px;
    border-radius: 14px;
  }

  .client-status__pill {
    min-height: 56px;
    padding: 8px 10px;
  }

  .client-status__pill strong {
    font-size: 16px;
  }

  .customer-profile-card {
    grid-template-columns: 1fr;
  }

  .profile-avatar {
    width: 72px;
    height: 72px;
    margin: 16px 16px 0;
    font-size: 24px;
  }

  .customer-profile-card .profile-info {
    padding: 14px 16px;
  }

  .customer-profile-card .wallet-balance-card {
    margin: 0 12px 12px;
  }

  body.game-flow-open:not(.player-verified) .packs,
  body.game-flow-open.player-verified .packs {
    grid-template-columns: 1fr;
  }

  body.game-flow-open:not(.player-verified) .checkout {
    grid-template-columns: 1fr;
  }
}

/* 2026-07-09: checkout por fases, sin amontonar informacion */
body.game-flow-open:not(.player-verified) .packages-step,
body.game-flow-open:not(.player-verified) .package-controls,
body.game-flow-open:not(.player-verified) #packs,
body.game-flow-open:not(.player-verified) .payment-step,
body.game-flow-open:not(.player-verified) .checkout-side {
  display: none !important;
}

body.game-flow-open:not(.player-verified) .checkout {
  grid-template-columns: minmax(0, 720px) !important;
  justify-content: center;
}

body.game-flow-open:not(.player-verified) .checkout-main {
  max-width: 720px;
  margin: 0 auto;
}

body.game-flow-open.player-verified:not(.package-selected) .payment-step,
body.game-flow-open.player-verified:not(.package-selected) .checkout-side {
  display: none !important;
}

body.game-flow-open.player-verified:not(.package-selected) .checkout {
  grid-template-columns: minmax(0, 920px) !important;
  justify-content: center;
}

body.game-flow-open.player-verified:not(.package-selected) .checkout-main {
  max-width: 920px;
  margin: 0 auto;
}

body.game-flow-open.player-verified.package-selected .checkout {
  grid-template-columns: minmax(0, 1fr) 300px;
}

body.game-flow-open .packages-step,
body.game-flow-open .payment-step {
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}

body.game-flow-open .panel-head {
  max-width: 760px;
}

body.game-flow-open .panel-head p::after {
  content: "";
}

@media (max-width: 900px) {
  body.game-flow-open.player-verified.package-selected .checkout {
    grid-template-columns: 1fr;
  }
}

/* 2026-07-09: sesiones separadas para evitar pantallas amontonadas */
body[data-client-session="home"] .customer-account,
body[data-client-session="home"] .checkout,
body[data-client-session="home"] .orders-section,
body[data-client-session="home"] .flow-strip,
body[data-client-session="wallet"] .hero,
body[data-client-session="wallet"] .store-categories,
body[data-client-session="wallet"] .welcome-games,
body[data-client-session="wallet"] .more-games,
body[data-client-session="wallet"] .client-path,
body[data-client-session="wallet"] .checkout,
body[data-client-session="wallet"] .orders-section,
body[data-client-session="wallet"] .flow-strip,
body[data-client-session="recharge"] .hero,
body[data-client-session="recharge"] .store-categories,
body[data-client-session="recharge"] .welcome-games,
body[data-client-session="recharge"] .more-games,
body[data-client-session="recharge"] .client-path,
body[data-client-session="recharge"] .customer-account,
body[data-client-session="recharge"] .orders-section,
body[data-client-session="orders"] .hero,
body[data-client-session="orders"] .store-categories,
body[data-client-session="orders"] .welcome-games,
body[data-client-session="orders"] .more-games,
body[data-client-session="orders"] .client-path,
body[data-client-session="orders"] .customer-account,
body[data-client-session="orders"] .checkout,
body[data-client-session="orders"] .flow-strip {
  display: none !important;
}

body[data-client-session="wallet"] .customer-account {
  display: block !important;
}

body[data-client-session="orders"] .orders-section {
  display: block !important;
  margin: 16px 10px 34px;
}

body[data-client-session="home"] .client-path {
  display: grid !important;
}

body[data-client-session="home"] .welcome-games {
  display: block !important;
}

body[data-client-session="home"] .store-categories {
  display: block !important;
}

body[data-client-session="home"] .more-games {
  display: block !important;
}

body[data-client-session="home"] #destacados {
  display: block !important;
}

.topnav nav a.active,
.client-session-menu .path-card.active {
  border-color: rgba(79,141,255,.55);
  background: rgba(79,141,255,.14);
  color: #c4b5fd !important;
}

.client-session-menu {
  width: min(920px, calc(100% - 20px));
  margin: 0 auto 18px;
}

.client-session-menu .path-card {
  min-height: 132px;
  cursor: pointer;
}

.client-session-menu .path-card b {
  width: 48px;
  height: 48px;
}

.client-session-menu .path-card strong {
  max-width: 240px;
}

body[data-client-session="wallet"] .customer-account,
body[data-client-session="orders"] .orders-section,
body[data-client-session="recharge"] .checkout {
  animation: sessionIn .18s ease-out both;
}

@keyframes sessionIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .client-session-menu {
    width: calc(100% - 16px);
  }

  .client-session-menu .path-card {
    min-height: 104px;
  }
}

/* 2026-07-09: bienvenida primero, juegos despues, cuenta antes de recargar */
.welcome-games {
  width: min(1040px, calc(100% - 20px));
  margin: 0 auto 16px;
  padding: 18px;
  border: 1px solid rgba(79,141,255,.18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 18% 0%, rgba(79,141,255,.12), transparent 34%),
    rgba(255,255,255,.035);
}

.welcome-games__head {
  display: grid;
  gap: 6px;
  margin-bottom: 14px;
}

.welcome-games__head span {
  color: #8b5cf6;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.welcome-games__head h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 4vw, 48px);
  line-height: 1;
}

.welcome-games__head p {
  max-width: 660px;
  color: #aebbb5;
  line-height: 1.45;
}

.welcome-games__grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.welcome-game {
  position: relative;
  min-height: 220px;
  display: grid;
  align-content: end;
  gap: 5px;
  overflow: hidden;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(2,6,23,.46);
  color: #fff;
  text-align: left;
  cursor: pointer;
}

.welcome-game img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .72;
  transition: transform .2s ease, opacity .2s ease;
}

.welcome-game::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(2,6,23,.10), rgba(2,6,23,.88));
}

.welcome-game > span,
.welcome-game > strong,
.welcome-game > small,
.welcome-game > b {
  position: relative;
  z-index: 1;
}

.welcome-game > span {
  width: fit-content;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(79,141,255,.16);
  color: #8b5cf6;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.welcome-game > strong {
  font-size: 22px;
  line-height: 1.05;
}

.welcome-game > small {
  color: #dce7e1;
  line-height: 1.35;
}

.welcome-game > b {
  width: fit-content;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 0 11px;
  border-radius: 9px;
  background: #4f8dff;
  color: #17100a;
  font-size: 13px;
  font-weight: 950;
}

.welcome-game:hover img {
  transform: scale(1.04);
  opacity: .9;
}

.welcome-game.featured {
  min-height: 260px;
}

.welcome-game.featured > strong {
  font-size: clamp(30px, 4vw, 48px);
}

.client-session-menu .path-card b {
  font-size: 18px;
}

@media (max-width: 980px) {
  .welcome-games__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .welcome-games {
    width: calc(100% - 16px);
    padding: 12px;
  }

  .welcome-games__grid {
    grid-template-columns: 1fr;
  }

  .welcome-game,
  .welcome-game.featured {
    min-height: 190px;
  }
}

/* 2026-07-10: embudo cliente mas corto y vendedor */
body[data-client-session="home"] .hero {
  min-height: 340px;
  margin: 12px auto 0;
  width: min(1160px, calc(100% - 20px));
  grid-template-columns: minmax(0, 1fr) minmax(240px, .58fr);
}

body[data-client-session="home"] .hero__content {
  min-height: 340px;
  padding: 28px;
}

body[data-client-session="home"] .hero h1 {
  font-size: clamp(38px, 5vw, 58px);
}

body[data-client-session="home"] .hero p {
  max-width: 520px;
  margin-top: 12px;
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.hero-proof span {
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #dce7e1;
  font-size: 12px;
  font-weight: 850;
}

body[data-client-session="home"] .client-status {
  margin: -18px auto 10px;
}

body[data-client-session="home"] .trust-row {
  width: min(1040px, calc(100% - 20px));
  margin: 0 auto 12px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

body[data-client-session="home"] .trust-row div {
  min-height: 74px;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255,255,255,.035);
  border-color: rgba(79,141,255,.16);
}

body[data-client-session="home"] .trust-row b {
  width: 38px;
  height: 38px;
  font-size: 12px;
}

body[data-client-session="home"] .trust-row span {
  display: block;
}

body[data-client-session="home"] .welcome-games {
  margin-bottom: 12px;
}

body[data-client-session="home"] .home-offers {
  width: min(1040px, calc(100% - 20px));
  margin: 0 auto 14px;
  padding: 18px;
  border: 1px solid rgba(32,196,122,.18);
  border-radius: 16px;
  background:
    radial-gradient(circle at 82% 0%, rgba(32,196,122,.12), transparent 34%),
    rgba(255,255,255,.035);
}

body[data-client-session="home"] .home-offers .section-head {
  margin-bottom: 12px;
}

body[data-client-session="home"] .home-offers .section-head p {
  max-width: 680px;
  margin-top: 6px;
  color: #aebbb5;
  line-height: 1.45;
}

body[data-client-session="home"] .home-offers .popular-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

body[data-client-session="home"] .home-offers .popular-card {
  min-height: 148px !important;
  padding: 10px !important;
}

body[data-client-session="home"] .home-offers .popular-card.no-stock {
  opacity: .68;
}

body[data-client-session="home"] .home-offers .product-art {
  height: 56px !important;
  margin-bottom: 6px !important;
}

body[data-client-session="home"] .home-offers .stock-badge {
  width: auto;
  min-width: 46px;
  height: 24px;
  right: 8px;
  bottom: auto;
  top: 8px;
  padding: 0 7px;
  font-size: 9px;
}

body[data-client-session="home"] .home-offers .popular-card strong {
  font-size: 15px !important;
}

body[data-client-session="home"] .home-offers .popular-card small {
  font-size: 11px !important;
}

body[data-client-session="home"] .home-offers .price-row b {
  font-size: 17px !important;
}

.balance-explain {
  width: min(1040px, calc(100% - 20px));
  margin: 0 auto 16px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, .48fr);
  gap: 12px;
  padding: 18px;
  border: 1px solid rgba(79,141,255,.18);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(79,141,255,.10), rgba(32,196,122,.07)),
    rgba(255,255,255,.035);
}

.balance-explain > div:first-child {
  display: grid;
  align-content: center;
  gap: 8px;
}

.balance-explain span:first-child,
.balance-example b {
  color: #8b5cf6;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.balance-explain h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1.05;
}

.balance-explain p {
  max-width: 680px;
  margin: 0;
  color: #cbd5e1;
  line-height: 1.5;
}

.balance-example {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 14px;
  background: rgba(2,6,23,.42);
}

.balance-example strong {
  color: #54e39d;
  font-size: 28px;
  line-height: 1;
}

.balance-example span {
  color: #aebbb5;
  line-height: 1.35;
}

.balance-example a {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  padding: 0 14px;
  border-radius: 9px;
  background: #4f8dff;
  color: #17100a;
  font-weight: 950;
}

.client-session-menu {
  width: min(1040px, calc(100% - 20px));
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.client-path__head {
  grid-column: 1 / -1;
  display: grid;
  gap: 5px;
  margin-bottom: 2px;
}

.client-path__head span {
  color: #8b5cf6;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.client-path__head h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(26px, 3.4vw, 40px);
  line-height: 1;
}

.client-path__head p {
  max-width: 640px;
  margin: 0 0 6px;
  color: #aebbb5;
  line-height: 1.45;
}

.client-session-menu .path-card {
  min-height: 112px;
}

body[data-client-session="home"] .social-band {
  width: min(1040px, calc(100% - 20px));
  margin-top: 6px;
}

@media (max-width: 1000px) {
  body[data-client-session="home"] .hero {
    grid-template-columns: 1fr;
  }

  body[data-client-session="home"] .hero-preview {
    display: none;
  }
}

@media (max-width: 760px) {
  body[data-client-session="home"] .hero {
    width: calc(100% - 16px);
    min-height: auto;
    margin-top: 8px;
  }

  body[data-client-session="home"] .hero__content {
    min-height: auto;
    padding: 22px 16px 28px;
  }

  body[data-client-session="home"] .hero h1 {
    font-size: clamp(34px, 11vw, 46px);
  }

  .hero-proof {
    display: grid;
    grid-template-columns: 1fr;
  }

  body[data-client-session="home"] .client-status {
    margin: 8px auto 10px;
  }

  body[data-client-session="home"] .trust-row,
  .client-session-menu {
    grid-template-columns: 1fr;
    width: calc(100% - 16px);
  }

  body[data-client-session="home"] .home-offers {
    width: calc(100% - 16px);
    padding: 12px;
  }

  body[data-client-session="home"] .home-offers .popular-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .balance-explain {
    width: calc(100% - 16px);
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .balance-example a {
    width: 100%;
  }

  body[data-client-session="home"] .trust-row div {
    min-height: 68px;
  }

  .client-session-menu .path-card {
    min-height: 92px;
  }
}

/* 2026-07-10: correccion final de cascada para que el hero no tape el catalogo */
body[data-client-session="home"] .hero {
  grid-template-columns: 1fr !important;
  min-height: auto !important;
  padding: 16px 18px 22px !important;
}

body[data-client-session="home"] .hero__content {
  min-height: 230px !important;
  max-width: 720px !important;
}

body[data-client-session="home"] .hero h1 {
  font-size: clamp(34px, 4.6vw, 52px) !important;
}

body[data-client-session="home"] .hero-actions {
  margin-top: 18px !important;
}

body[data-client-session="home"] .hero-proof {
  margin-top: 12px !important;
}

body[data-client-session="home"] .hero-preview {
  display: none !important;
}

@media (max-width: 760px) {
  body[data-client-session="home"] .hero {
    padding: 16px 14px 20px !important;
  }

  body[data-client-session="home"] .hero__content {
    min-height: 220px !important;
  }
}

@media (max-width: 520px) {
  body[data-client-session="home"] .home-offers .popular-grid {
    grid-template-columns: 1fr;
  }
}

/* 2026-07-10: catalogo por fases con juegos primero y montos despues */
body[data-client-session="home"] .welcome-games,
body[data-client-session="home"] .home-offers {
  width: min(1180px, calc(100% - 24px));
  padding: 22px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  scroll-margin-top: 92px;
}

body[data-client-session="home"] .welcome-games {
  margin: 10px auto 4px;
}

body[data-client-session="home"] .home-offers {
  margin: 0 auto 18px;
  padding-top: 10px;
}

.welcome-games__head,
body[data-client-session="home"] .home-offers .section-head {
  max-width: 760px;
  margin-bottom: 18px;
}

.welcome-games__head span,
body[data-client-session="home"] .home-offers .section-head span {
  color: #20e866;
}

.welcome-games__head h2,
body[data-client-session="home"] .home-offers .section-head h2 {
  font-size: clamp(32px, 4vw, 52px);
  letter-spacing: 0;
}

body[data-client-session="home"] .home-offers .section-head h2 mark {
  color: #20e866;
  background: transparent;
}

.welcome-games__grid {
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 16px;
}

.welcome-game,
.welcome-game.featured {
  min-height: 236px;
  aspect-ratio: 3 / 4;
  padding: 12px;
  border-radius: 8px;
  border-color: rgba(255,255,255,.10);
  background: #08100c;
}

.welcome-game img {
  object-position: center;
}

.welcome-game[data-game-card="marvelrivals"] img {
  object-position: 18% center;
}

.welcome-game[data-game-card="pubgm"] img {
  object-position: 44% center;
}

.welcome-game[data-game-card="hok"] img,
.welcome-game[data-game-card="arena_breakout"] img,
.welcome-game[data-game-card="bloodstrike"] img {
  object-position: center top;
}

.welcome-game::after {
  background:
    linear-gradient(180deg, rgba(0,0,0,.02) 0%, rgba(0,0,0,.20) 46%, rgba(0,0,0,.90) 100%);
}

.welcome-game.active {
  border-color: rgba(32,232,102,.78);
  box-shadow: 0 0 0 1px rgba(32,232,102,.25), 0 16px 36px rgba(0,0,0,.24);
}

.welcome-game > span {
  display: none;
}

/* /v2/catalogo muestra precio real desde la API en este span; el resto de badges sigue oculto arriba. */
.welcome-game > span.price-badge {
  display: block;
  background: none;
  padding: 0;
  border-radius: 0;
  text-transform: none;
  font-size: 12px;
  font-weight: 800;
  color: #8b5cf6;
}

.welcome-game > strong,
.welcome-game.featured > strong {
  font-size: 16px;
  line-height: 1.05;
  text-shadow: 0 2px 10px rgba(0,0,0,.65);
}

.welcome-game > small {
  display: none;
}

.welcome-game > b {
  min-height: 28px;
  margin-top: 4px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #20e866;
  font-size: 12px;
}

body[data-client-session="home"] .home-offers .popular-grid.amount-grid {
  grid-template-columns: repeat(auto-fit, minmax(184px, 1fr));
  gap: 14px;
}

.amount-card {
  min-height: 78px;
  display: grid;
  gap: 7px;
  align-content: center;
  padding: 16px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: #0b100d;
  color: #fff;
  text-align: left;
  cursor: pointer;
  transition: border-color .18s ease, transform .18s ease, background .18s ease;
}

.amount-card:hover {
  transform: translateY(-2px);
  border-color: rgba(32,232,102,.54);
  background: #0d1711;
}

.amount-card b {
  color: #20e866;
  font-size: 16px;
  line-height: 1;
}

.amount-card strong {
  color: #fff;
  font-size: 14px;
  line-height: 1.2;
}

.amount-card span {
  color: #8fa79a;
  font-size: 12px;
}

.amount-card small {
  color: #c7d5cf;
  font-size: 12px;
}

.amount-card.no-stock {
  opacity: .55;
  cursor: not-allowed;
}

.amount-empty {
  grid-column: 1 / -1;
  min-height: 88px;
  display: grid;
  place-items: center;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background: #0b100d;
  color: #aebbb5;
}

@media (max-width: 760px) {
  body[data-client-session="home"] .welcome-games,
  body[data-client-session="home"] .home-offers {
    width: calc(100% - 16px);
    padding: 16px 0;
  }

  .welcome-games__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .welcome-game,
  .welcome-game.featured {
    min-height: 176px;
  }

  body[data-client-session="home"] .home-offers .popular-grid.amount-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .amount-card {
    min-height: 86px;
    padding: 12px;
  }
}

/* 2026-07-10: secciones comerciales de juegos adicionales sin mencionar proveedor */
.more-games {
  width: min(1180px, calc(100% - 24px));
  margin: 0 auto 20px;
  padding: 20px 0 4px;
  scroll-margin-top: 92px;
}

.more-games__head {
  max-width: 760px;
  display: grid;
  gap: 7px;
  margin-bottom: 16px;
}

.more-games__head span,
.more-games__column > span {
  color: #20e866;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
}

.more-games__head h2 {
  margin: 0;
  color: #fff;
  font-size: clamp(30px, 3.8vw, 48px);
  line-height: 1.04;
}

.more-games__head p {
  margin: 0;
  color: #aebbb5;
  line-height: 1.5;
}

.more-games__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.more-games__column {
  min-height: 230px;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  background:
    linear-gradient(180deg, rgba(32,232,102,.06), rgba(255,255,255,.025)),
    #0b100d;
}

.more-games__column h3 {
  margin: 0;
  color: #fff;
  font-size: 21px;
  line-height: 1.12;
}

.more-games__column p {
  margin: 0;
  color: #aebbb5;
  line-height: 1.45;
}

.offer-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.offer-tags button {
  min-height: 36px;
  padding: 0 11px;
  border: 1px solid rgba(32,232,102,.22);
  border-radius: 8px;
  background: rgba(32,232,102,.08);
  color: #dfffea;
  font-weight: 850;
  cursor: pointer;
}

.offer-tags button:hover {
  border-color: rgba(32,232,102,.58);
  background: rgba(32,232,102,.14);
}

@media (max-width: 900px) {
  .more-games__grid {
    grid-template-columns: 1fr;
  }

  .more-games__column {
    min-height: 0;
  }
}

@media (max-width: 760px) {
  .more-games {
    width: calc(100% - 16px);
    padding-top: 12px;
  }
}

/* 2026-07-10: bloque comercial de categorias tipo tienda digital */
.store-categories {
  width: min(1180px, calc(100% - 24px));
  margin: 8px auto 18px;
  scroll-margin-top: 92px;
}

.store-categories__perks {
  min-height: 30px;
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  color: #9fb1a8;
  font-size: 13px;
  font-weight: 850;
}

.store-categories__perks span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.store-categories__perks span::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: #20e866;
  box-shadow: 0 0 14px rgba(32,232,102,.65);
}

.store-categories__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.store-categories--single {
  width: min(1040px, calc(100% - 20px));
}

.store-categories--single .store-categories__grid {
  grid-template-columns: minmax(0, 1fr);
}

.store-categories--single .store-category-card {
  min-height: 176px;
  padding: 22px 24px;
}

/* 2026-07-10: cuentas cliente completas y menos confusas */
.account-journey {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 0 0 12px;
}

.account-journey div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 3px 10px;
  align-items: center;
  min-height: 78px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(255,255,255,.035);
}

.account-journey div.active {
  border-color: rgba(79,141,255,.34);
  background: linear-gradient(135deg, rgba(79,141,255,.13), rgba(255,255,255,.035));
}

.account-journey b {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  grid-row: 1 / 3;
  border-radius: 999px;
  background: #4f8dff;
  color: #17100a;
  font-weight: 950;
}

.account-journey strong {
  color: #fff;
  font-size: 14px;
}

.account-journey span,
.account-form-copy {
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.35;
}

.account-overview-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border: 1px solid rgba(79,141,255,.24);
  border-radius: 14px;
  background:
    radial-gradient(circle at 90% 0%, rgba(79,141,255,.14), transparent 34%),
    rgba(255,255,255,.035);
}

.account-overview-head span {
  color: #4f8dff;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.account-overview-head h3 {
  margin: 5px 0;
  color: #fff;
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.1;
}

.account-overview-head p {
  max-width: 720px;
  margin: 0;
  color: #cbd5e1;
  line-height: 1.45;
}

.account-overview-head button {
  min-height: 44px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: #4f8dff;
  color: #17100a;
  font-weight: 950;
  cursor: pointer;
}

.account-access-shell {
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(0, 1.22fr);
  gap: 12px;
  align-items: start;
}

.account-access-info {
  display: grid;
  gap: 12px;
  min-height: 100%;
  padding: 16px;
  border: 1px solid rgba(79,141,255,.22);
  border-radius: 14px;
  background:
    radial-gradient(circle at 20% 0%, rgba(79,141,255,.14), transparent 34%),
    rgba(255,255,255,.035);
}

.account-access-info > span {
  color: #4f8dff;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.account-access-info h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(22px, 3vw, 30px);
}

.account-access-preview {
  display: grid;
  gap: 8px;
}

.account-access-preview div {
  display: grid;
  gap: 3px;
  min-height: 68px;
  padding: 11px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(2,6,23,.30);
}

.account-access-preview strong {
  color: #fff;
}

.account-access-preview small {
  color: #94a3b8;
  line-height: 1.35;
}

.account-overview-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.account-overview-actions button:first-child {
  background: rgba(255,255,255,.08);
  color: #e2e8f0;
  border: 1px solid rgba(255,255,255,.12);
}

.account-dashboard-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.account-dashboard-nav button {
  min-height: 42px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  background: rgba(255,255,255,.045);
  color: #e2e8f0;
  font-weight: 950;
  cursor: pointer;
}

.account-dashboard-nav button:hover {
  border-color: rgba(79,141,255,.45);
  color: #8b5cf6;
}

.account-settings-card details {
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(2,6,23,.32);
  overflow: hidden;
}

.account-settings-card details + details {
  margin-top: 10px;
}

.account-settings-card summary {
  min-height: 46px;
  display: flex;
  align-items: center;
  padding: 0 14px;
  color: #fff;
  font-weight: 950;
  cursor: pointer;
}

.account-settings-card details[open] summary {
  border-bottom: 1px solid rgba(255,255,255,.08);
  color: #4f8dff;
}

.account-settings-card .account-settings-form {
  padding: 12px;
}

.register-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.register-steps button {
  min-height: 38px !important;
  padding: 0 8px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 10px !important;
  background: rgba(255,255,255,.06) !important;
  color: #cbd5e1 !important;
  font-size: 12px !important;
}

.register-steps button.active,
.register-steps button.done {
  border-color: rgba(79,141,255,.56) !important;
  background: rgba(79,141,255,.16) !important;
  color: #8b5cf6 !important;
}

.register-panel {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px;
  background: rgba(2,6,23,.32);
}

.register-panel[hidden] {
  display: none !important;
}

.register-panel legend {
  padding: 0 6px;
  color: #4f8dff;
  font-size: 12px;
  font-weight: 950;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.register-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.register-actions button {
  min-width: 140px;
}

.register-actions .secondary {
  background: rgba(255,255,255,.08) !important;
  color: #e2e8f0 !important;
  border: 1px solid rgba(255,255,255,.12) !important;
}

.register-review {
  display: grid;
  gap: 7px;
  padding: 12px;
  border: 1px solid rgba(79,141,255,.20);
  border-radius: 12px;
  background: rgba(79,141,255,.08);
}

.register-review strong {
  color: #fff;
}

.register-review span {
  color: #cbd5e1;
}

@media (max-width: 860px) {
  .account-journey {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .account-overview-head {
    grid-template-columns: 1fr;
  }

  .account-overview-head button {
    width: 100%;
  }

  .account-access-shell {
    grid-template-columns: 1fr;
  }

  .account-forms {
    order: -1;
  }

  .account-overview-actions {
    justify-content: stretch;
  }

  .account-overview-actions button {
    flex: 1 1 180px;
  }

  .account-dashboard-nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .account-journey {
    grid-template-columns: 1fr;
  }

  .register-steps,
  .register-actions {
    grid-template-columns: 1fr;
  }

  .register-actions {
    display: grid;
  }

  .register-actions button {
    width: 100%;
  }

  .account-dashboard-nav {
    grid-template-columns: 1fr;
  }
}

.store-category-card {
  position: relative;
  min-height: 224px;
  display: grid;
  align-content: center;
  gap: 9px;
  overflow: hidden;
  padding: 24px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  background: #070b10;
  color: #fff;
}

.store-category-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 84% 45%, rgba(32,232,102,.22), transparent 34%),
    linear-gradient(90deg, rgba(7,11,16,.96), rgba(7,11,16,.64));
  z-index: 0;
}

.store-category-card::after {
  position: absolute;
  right: 20px;
  top: 22px;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: rgba(32,232,102,.16);
  color: #35ff7b;
  font-size: 30px;
  font-weight: 950;
  z-index: 1;
}

.store-category-card > * {
  position: relative;
  z-index: 2;
}

.store-category-card span {
  width: fit-content;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #d7e3dc;
  font-size: 11px;
  font-weight: 950;
  text-transform: uppercase;
}

.store-category-card.is-live span {
  border: 0;
  padding: 0;
  background: transparent;
  color: #20e866;
}

.store-category-card h2 {
  max-width: 270px;
  margin: 0;
  color: #fff;
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1;
}

.store-category-card p {
  max-width: 275px;
  margin: 0;
  color: #cbd5e1;
  line-height: 1.42;
}

.store-category-card a,
.store-category-card button {
  width: fit-content;
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 8px;
  padding: 0 14px;
  border: 1px solid rgba(32,232,102,.34);
  border-radius: 8px;
  background: rgba(32,232,102,.08);
  color: #68ff9f;
  font-weight: 950;
  cursor: pointer;
}

.store-category-card button {
  color: #d6dde8;
  border-color: rgba(255,255,255,.13);
  background: rgba(255,255,255,.035);
}

.store-category-card a:hover,
.store-category-card button:hover {
  border-color: rgba(32,232,102,.64);
  color: #fff;
}

.category-games {
  border-color: rgba(32,232,102,.34);
}

.category-games::before {
  background:
    linear-gradient(90deg, rgba(7,11,16,.98), rgba(7,11,16,.62), rgba(7,11,16,.88)),
    url("/recargas/img/juegos/blood-strike.jpeg") right center / cover no-repeat;
}

.category-games::after { content: "GG"; }
.category-streaming::after { content: "▶"; color: #60a5fa; background: rgba(96,165,250,.16); }
.category-social::after { content: "@"; color: #fb71c8; background: rgba(251,113,200,.16); }
.category-tools::after { content: "AI"; color: #c084fc; background: rgba(192,132,252,.16); }
.category-gifts::after { content: "$"; color: #fbbf24; background: rgba(251,191,36,.16); }
.category-flash::after { content: "%"; color: #ff6b6b; background: rgba(255,107,107,.16); }

.category-streaming { border-color: rgba(96,165,250,.22); }
.category-social { border-color: rgba(251,113,200,.22); }
.category-tools { border-color: rgba(192,132,252,.22); }
.category-gifts { border-color: rgba(251,191,36,.22); }
.category-flash { border-color: rgba(255,107,107,.22); }

@media (max-width: 980px) {
  .store-categories__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .store-categories {
    width: calc(100% - 16px);
  }

  .store-categories__perks {
    justify-content: flex-start;
    gap: 10px;
  }

  .store-categories__grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .store-category-card {
    min-height: 190px;
    padding: 18px;
  }
}

/* 2026-07-10: guia funcional y correccion a colores Panther */
.action-guide {
  width: min(1040px, calc(100% - 20px));
  min-height: 92px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin: 0 auto 14px;
  padding: 16px;
  border: 1px solid rgba(79, 141, 255, .24);
  border-radius: 14px;
  background:
    radial-gradient(circle at 90% 0%, rgba(79, 141, 255, .16), transparent 34%),
    linear-gradient(135deg, rgba(17, 23, 34, .94), rgba(8, 11, 18, .96));
  box-shadow: 0 18px 42px rgba(0, 0, 0, .20);
}

.action-guide span {
  color: #4f8dff;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.action-guide strong {
  display: block;
  margin-top: 5px;
  color: #fff;
  font-size: clamp(20px, 3vw, 30px);
  line-height: 1.05;
}

.action-guide p {
  max-width: 680px;
  margin-top: 6px;
  color: #cbd5e1;
  line-height: 1.42;
}

.action-guide__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
}

.action-guide__buttons button {
  min-height: 42px;
  padding: 0 15px;
  border-radius: 9px;
  border: 1px solid rgba(79, 141, 255, .34);
  background: rgba(79, 141, 255, .10);
  color: #c4b5fd;
  font-weight: 950;
  cursor: pointer;
}

.action-guide__buttons button:first-child {
  border: 0;
  background: linear-gradient(180deg, #8b5cf6, #4f8dff);
  color: #17100a;
}

.action-guide[data-action="pay"] {
  border-color: rgba(79, 141, 255, .42);
  background:
    radial-gradient(circle at 84% 0%, rgba(79, 141, 255, .22), transparent 32%),
    linear-gradient(135deg, rgba(24, 18, 9, .98), rgba(8, 11, 18, .96));
}

body[data-client-session="home"] .action-guide {
  margin-top: 0;
}

.welcome-games__head span,
body[data-client-session="home"] .home-offers .section-head span,
.welcome-game span,
.welcome-game strong,
.amount-card b,
.store-category-card.is-live span,
.balance-example strong,
.balance-explain span:first-child {
  color: #4f8dff !important;
}

.welcome-game.active,
.welcome-game:hover,
.amount-card:hover,
.category-games,
.store-category-card a,
.store-category-card button:hover {
  border-color: rgba(79, 141, 255, .58) !important;
}

.welcome-game.active,
.welcome-game:hover,
.amount-card:hover,
.store-category-card a,
.store-category-card button:hover {
  box-shadow: 0 16px 36px rgba(0, 0, 0, .24), 0 0 0 1px rgba(79, 141, 255, .14) inset !important;
}

.store-category-card::before {
  background:
    radial-gradient(circle at 84% 45%, rgba(79, 141, 255, .18), transparent 34%),
    linear-gradient(90deg, rgba(7, 11, 16, .98), rgba(7, 11, 16, .68), rgba(7, 11, 16, .92)) !important;
}

.store-category-card::after {
  color: #4f8dff !important;
  background: rgba(79, 141, 255, .14) !important;
}

.store-category-card a {
  background: rgba(79, 141, 255, .10) !important;
  color: #c4b5fd !important;
}

.store-category-card button {
  border-color: rgba(255, 255, 255, .13) !important;
  background: rgba(255, 255, 255, .035) !important;
  color: #d6dde8 !important;
  box-shadow: none !important;
}

.amount-card {
  border-color: rgba(79, 141, 255, .18);
}

.amount-card b {
  background: rgba(79, 141, 255, .10);
}

.summary-guide.pay {
  border-color: rgba(79, 141, 255, .32);
  background: rgba(79, 141, 255, .09);
}

.summary-guide.pay b {
  color: #4f8dff;
}

html[data-theme="light"] .action-guide {
  background:
    radial-gradient(circle at 90% 0%, rgba(184, 121, 24, .12), transparent 34%),
    #dbe6ff;
  border-color: rgba(79, 141, 255, .24);
  box-shadow: var(--shadow);
}

html[data-theme="light"] .action-guide strong {
  color: #15171d;
}

html[data-theme="light"] .action-guide p {
  color: #5f6470;
}

@media (max-width: 760px) {
  .action-guide {
    width: calc(100% - 16px);
    grid-template-columns: 1fr;
    padding: 14px;
  }

  .action-guide__buttons {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .action-guide__buttons button {
    width: 100%;
  }
}

/* 2026-07-10: Panther manda sobre capas verdes anteriores */
html[data-theme="dark"] {
  --clean-gold: #4f8dff;
  --clean-green: #4f8dff;
  --clean-line: rgba(79, 141, 255, .18);
  --line: rgba(79, 141, 255, .18);
}

html[data-theme="dark"] body {
  background:
    radial-gradient(circle at 12% -4%, rgba(79, 141, 255, .10), transparent 28%),
    radial-gradient(circle at 86% 6%, rgba(79, 141, 255, .08), transparent 24%),
    linear-gradient(180deg, #050806 0%, #0b111a 48%, #050806 100%) !important;
}

.logo span,
.domain-pill,
.hero h1 span,
.section-head span,
.panel-head span,
.welcome-games__head span,
.client-path__head span,
.store-categories__perks span,
.store-category-card.is-live span,
.pack .pack-kicker,
.summary-row.total strong,
.amount-card b {
  color: #4f8dff !important;
}

.domain-pill,
.topnav,
.hero,
.welcome-game.active,
.welcome-game:hover,
.amount-card:hover,
.pack.active,
.store-category-card a,
.store-category-card button:hover,
.field input:focus,
.tab.active,
.payment.active,
.category-games {
  border-color: rgba(79, 141, 255, .56) !important;
}

.hero-primary,
.primary,
.reseller-link,
.game-focus__actions a,
.flow-step b,
.step > span,
.pack.active .select-label,
.pack em,
.pack .price-row b,
.support-float {
  background: linear-gradient(180deg, #8b5cf6, #4f8dff) !important;
  color: #17100a !important;
  box-shadow: 0 14px 34px rgba(79, 141, 255, .18) !important;
}

.hero-primary:hover,
.primary:hover,
.reseller-link:hover {
  box-shadow: 0 18px 42px rgba(79, 141, 255, .24) !important;
}

.nav-cta,
.topnav nav a:hover,
.badge,
.theme-toggle,
.secondary,
.verify-btn,
.pack .stock-badge,
.tab.active,
.payment.active,
.summary-guide.pay,
.store-category-card a {
  background: rgba(79, 141, 255, .10) !important;
  color: #c4b5fd !important;
}

.trust-row b,
.checkout-main::before {
  background: rgba(79, 141, 255, .12) !important;
  color: #4f8dff !important;
}

.pack,
.welcome-game,
.amount-card,
.store-category-card {
  background-color: #0c120f;
}

.pack.active,
.popular-card:hover,
.amount-card:hover,
.welcome-game:hover,
.welcome-game.active {
  box-shadow: 0 18px 42px rgba(0, 0, 0, .26), 0 0 0 1px rgba(79, 141, 255, .16) inset !important;
}

.support-float span,
.support-float strong {
  color: #17100a !important;
}

.wallet-plus,
.wallet-movement strong,
.account-phase-card.ready span {
  color: #4f8dff !important;
}

.wallet-phase-guide .flow-step.done {
  border-color: rgba(79, 141, 255, .42) !important;
  background: rgba(79, 141, 255, .10) !important;
}

.wallet-phase-guide .flow-step.done b {
  background: linear-gradient(180deg, #8b5cf6, #4f8dff) !important;
  color: #17100a !important;
}