/* ═══════════════════════════════════════════════════════════════
   GOOD FILE — Design System
   Dark-first. Orange fire + Binance gold on deep black.
   Typefaces: Rajdhani (display) · Figtree (body) · JetBrains Mono (data)
═══════════════════════════════════════════════════════════════ */

/* ─── Tokens ──────────────────────────────────────────────────── */
:root {
  /* Surfaces */
  --bg-body:      #161513;
  --bg-surface:   #1c1a18;
  --bg-card:      #221f1d;
  --bg-card-h:    #282523;
  --bg-input:     #2c2927;

  /* Borders */
  --border:       rgba(255,255,255,0.07);
  --border-m:     rgba(255,255,255,0.12);
  --border-o:     rgba(255, 85, 0, 0.45);

  /* Text */
  --text-1:       #F0F0F0;
  --text-2:       #9A9A9A;
  --text-3:       #555555;

  /* Accent — Orange */
  --orange:       #FF5500;
  --orange-l:     #FF7733;
  --orange-d:     #CC4400;
  --orange-dim:   rgba(255, 85, 0, 0.10);
  --orange-glow:  rgba(255, 85, 0, 0.22);

  /* Accent — Gold (Binance palette) */
  --gold:         #F0B429;
  --gold-l:       #FFD060;
  --gold-dim:     rgba(240, 180, 41, 0.10);

  /* Gradients */
  /* Deepens toward --orange-d instead of lightening toward a pale FF8C00 —
     that lighter stop measured 2.33:1 contrast for the white button text
     sitting on top of it (fails WCAG's 3:1 minimum even for large/bold
     text), and hover's brightness(1.12) pushed it lower still. Deepening
     instead keeps every point along the gradient at 3:1+ (up to 4.78:1 at
     the --orange-d end), even after the hover brightness boost. */
  --grad-orange:  linear-gradient(135deg, var(--orange) 0%, var(--orange-d) 100%);
  --grad-gold:    linear-gradient(135deg, #F0B429 0%, #FFDB70 100%);
  --grad-hero:
    radial-gradient(ellipse 60% 60% at 15% 55%, rgba(255,85,0,0.07) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 85% 20%, rgba(240,180,41,0.04) 0%, transparent 60%);

  /* Shadows */
  --shadow-card:  0 4px 30px rgba(0,0,0,0.7);
  --shadow-o:     0 0 40px rgba(255,85,0,0.18);

  /* Type */
  --font-d:  'Rajdhani', sans-serif;
  --font-b:  'Figtree', sans-serif;
  --font-m:  'JetBrains Mono', monospace;

  /* Spacing scale */
  --sp-xs: 0.5rem;
  --sp-sm: 1rem;
  --sp-md: 1.5rem;
  --sp-lg: 2.5rem;
  --sp-xl: 4rem;
  --sp-2x: 7rem;

  /* Radii */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;

  /* Transitions */
  --t-fast: 160ms ease;
  --t-base: 260ms ease;
  --t-slow: 400ms cubic-bezier(0.25,0.8,0.25,1);
}

/* Light theme overrides */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg-body:    #F4F4F4;
    --bg-surface: #FFFFFF;
    --bg-card:    #FAFAFA;
    --bg-card-h:  #F0F0F0;
    --bg-input:   #FFFFFF;
    --border:     rgba(0,0,0,0.08);
    --border-m:   rgba(0,0,0,0.14);
    --text-1:     #0D0D0D;
    --text-2:     #555555;
    --text-3:     #999999;
    --orange-dim: rgba(255, 85, 0, 0.06);
    --shadow-card: 0 2px 20px rgba(0,0,0,0.10);
  }
}
:root[data-theme="dark"] {
  --bg-body:    #161513;
  --bg-surface: #1c1a18;
  --bg-card:    #221f1d;
  --text-1:     #F0F0F0;
  --text-2:     #9A9A9A;
}

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

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-b);
  background: var(--bg-body);
  color: var(--text-1);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-d);
  font-weight: 700;
  line-height: 1.15;
  text-wrap: balance;
  color: var(--text-1);
}

a { color: var(--orange); text-decoration: none; transition: color var(--t-fast); }
a:hover { color: var(--orange-l); }

img { max-width: 100%; height: auto; }

/* Bootstrap overrides */
.container { --bs-gutter-x: 2rem; }

/* ─── Scrollbar ───────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-body); }
::-webkit-scrollbar-thumb { background: var(--border-m); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--orange); }

/* ─── Navbar ──────────────────────────────────────────────────── */
.gf-navbar {
  background: rgba(22,21,19,0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border);
  padding: 0.85rem 0;
  transition: background var(--t-base);
}
.gf-navbar.scrolled {
  background: rgba(22,21,19,0.97);
  box-shadow: 0 2px 30px rgba(0,0,0,0.6);
}

.navbar-brand { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand-icon { color: var(--orange); font-size: 1.4rem; line-height: 1; }
.brand-text {
  font-family: var(--font-d);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-1);
}
.brand-accent { color: var(--orange); }

.gf-navbar .nav-link {
  font-family: var(--font-b);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-2);
  padding: 0.4rem 0.75rem;
  border-radius: var(--r-sm);
  transition: color var(--t-fast), background var(--t-fast);
}
.gf-navbar .nav-link:hover { color: var(--text-1); background: var(--orange-dim); }

/* ─── Live search (navbar) ──────────────────────────────────────── */
/* Lives outside the collapsible menu (see navbar.php) so it's visible on
   every screen size, including mobile before the hamburger is opened. */
.gf-navbar > .container {
  justify-content: flex-start;
  gap: 0.75rem;
  /* Deliberately NOT flex-wrap:nowrap here — Bootstrap's own collapse
     mechanism depends on this container staying wrap-able below the `lg`
     breakpoint so `.navbar-collapse` (which Bootstrap gives flex-basis:100%)
     can drop onto its own full-width line when the hamburger menu opens.
     Forcing nowrap here once broke exactly that: the opened mobile menu had
     nowhere to wrap to and got crushed into whatever sliver of the row was
     left over instead of rendering as its own row. */
}
/* Brand + search + hamburger toggle, grouped so THEY don't wrap amongst
   themselves without preventing the sibling .navbar-collapse from wrapping
   onto its own line below (see the container comment above). */
.gf-navbar-top {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: nowrap;
}
.gf-search {
  position: relative;
  flex: 1 1 160px;
  max-width: 220px;
  min-width: 70px; /* stays usable instead of shrinking to nothing once nowrap forces it to give up space */
}
.gf-search-icon {
  position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%);
  color: var(--text-3);
  font-size: 0.9rem;
  pointer-events: none;
}
.gf-search-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border-m);
  border-radius: var(--r-sm);
  color: var(--text-1);
  font-size: 0.85rem;
  padding: 0.5rem 0.75rem 0.5rem 2.25rem;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.gf-search-input:focus {
  outline: none;
  border-color: var(--orange);
  background: var(--bg-surface);
}
.gf-search-results {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  width: max(260px, 100%);
  background: var(--bg-surface);
  border: 1px solid var(--border-m);
  border-radius: var(--r-sm);
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  max-height: 420px;
  overflow-y: auto;
  z-index: 1060;
}
@media (max-width: 420px) {
  .gf-search-results { left: auto; right: 0; }
}
.gf-search-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0.85rem;
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
}
.gf-search-item:last-child { border-bottom: none; }
.gf-search-item:hover, .gf-search-item.active { background: var(--orange-dim); }
.gf-search-item img {
  width: 40px; height: 40px;
  object-fit: cover;
  border-radius: 4px;
  background: #1a1a1a;
  flex-shrink: 0;
}
.gf-search-item-name { font-size: 0.85rem; color: var(--text-1); font-weight: 500; }
.gf-search-item-price { font-size: 0.75rem; color: var(--gold); font-family: var(--font-m); }
.gf-search-empty, .gf-search-loading {
  padding: 1rem;
  font-size: 0.82rem;
  color: var(--text-3);
  text-align: center;
}
.gf-search-more {
  display: block;
  padding: 0.6rem 0.85rem;
  font-size: 0.78rem;
  text-align: center;
  color: var(--orange);
  border-top: 1px solid var(--border);
  text-decoration: none;
}
.gf-search-more:hover { background: var(--orange-dim); color: var(--orange-l); }

.btn-cart {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  background: var(--bg-card);
  border: 1px solid var(--border-m);
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 1.1rem;
  transition: all var(--t-fast);
}
.btn-cart:hover { color: var(--orange); border-color: var(--border-o); background: var(--orange-dim); }
.cart-badge {
  position: absolute;
  top: -6px; right: -6px;
  min-width: 18px; height: 18px;
  background: var(--orange);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  padding: 0 4px;
}

.btn-user {
  display: flex; align-items: center; gap: 0.5rem;
  background: none; border: 1px solid var(--border-m);
  color: var(--text-2);
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  cursor: pointer;
  transition: all var(--t-fast);
}
.btn-user:hover { color: var(--text-1); border-color: var(--orange); }

.btn-ghost-sm {
  font-size: 0.875rem; font-weight: 500;
  color: var(--text-2);
  border: 1px solid var(--border-m);
  padding: 0.4rem 1rem;
  border-radius: var(--r-sm);
  transition: all var(--t-fast);
}
.btn-ghost-sm:hover { color: var(--text-1); border-color: var(--orange); }

.btn-primary-sm {
  font-size: 0.875rem; font-weight: 600;
  background: var(--grad-orange);
  color: #fff;
  padding: 0.4rem 1.1rem;
  border-radius: var(--r-sm);
  box-shadow: 0 0 16px var(--orange-glow);
  transition: all var(--t-fast);
}
.btn-primary-sm:hover { color: #fff; filter: brightness(1.12); box-shadow: 0 0 24px var(--orange-glow); }

.gf-dropdown {
  background: var(--bg-card);
  border: 1px solid var(--border-m);
  border-radius: var(--r-md);
  padding: 0.4rem;
  min-width: 180px;
}
.gf-dropdown .dropdown-item {
  color: var(--text-2);
  font-size: 0.875rem;
  border-radius: var(--r-sm);
  padding: 0.45rem 0.85rem;
  transition: all var(--t-fast);
}
.gf-dropdown .dropdown-item:hover { background: var(--orange-dim); color: var(--text-1); }
.gf-dropdown .dropdown-divider { border-color: var(--border); }

/* ─── Hero ────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: 62vh;
  display: flex;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 2rem;
  overflow: hidden;
  background: var(--bg-body);
}
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
}
.hero-gradient { position: absolute; inset: 0; background: var(--grad-hero); pointer-events: none; }
.hero-grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
  opacity: 0.4;
}

.hero-content { position: relative; z-index: 2; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-m);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  background: var(--orange-dim);
  border: 1px solid var(--border-o);
  padding: 0.35rem 0.85rem;
  border-radius: 2px;
  margin-bottom: 1rem;
}
.eyebrow-dot {
  width: 6px; height: 6px;
  background: var(--orange);
  border-radius: 50%;
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0%,100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.6); }
}

.hero-title {
  font-family: var(--font-d);
  font-size: clamp(2.1rem, 4.5vw, 3.75rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--text-1);
  margin-bottom: 0.85rem;
}
.hero-title .line-accent { color: var(--orange); display: block; }
.hero-title .line-gold   { color: var(--gold);   display: block; }

.hero-subtitle {
  font-size: 1rem;
  color: var(--text-2);
  max-width: 520px;
  margin-bottom: 1.25rem;
  font-weight: 400;
}

.hero-cta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }

.btn-hero-primary {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: var(--grad-orange);
  color: #fff;
  font-family: var(--font-d);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.7rem 1.75rem;
  border-radius: var(--r-sm);
  box-shadow: 0 0 30px var(--orange-glow), 0 4px 20px rgba(0,0,0,0.4);
  transition: all var(--t-base);
  text-transform: uppercase;
}
.btn-hero-primary:hover { color: #fff; filter: brightness(1.12); box-shadow: 0 0 50px rgba(255,85,0,0.35), 0 8px 30px rgba(0,0,0,0.5); transform: translateY(-2px); }

.btn-hero-ghost {
  display: inline-flex; align-items: center; gap: 0.6rem;
  background: transparent;
  color: var(--text-2);
  font-size: 0.95rem;
  font-weight: 500;
  padding: 0.7rem 1.5rem;
  border: 1px solid var(--border-m);
  border-radius: var(--r-sm);
  transition: all var(--t-base);
}
.btn-hero-ghost:hover { color: var(--text-1); border-color: var(--orange); background: var(--orange-dim); }

.hero-pay-row {
  margin-top: 1.25rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.pay-label { font-family: var(--font-m); font-size: 0.7rem; color: var(--text-3); letter-spacing: 0.1em; text-transform: uppercase; }

.pay-chip {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.78rem; font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 3px;
  border: 1px solid;
  transition: all var(--t-fast);
}
.pay-chip-binance { color: #F0B429; border-color: rgba(240,180,41,0.3); background: rgba(240,180,41,0.06); }
.pay-chip-paypal  { color: #009cde; border-color: rgba(0,156,222,0.3); background: rgba(0,156,222,0.06); }
.pay-chip-stripe  { color: #635bff; border-color: rgba(99,91,255,0.3); background: rgba(99,91,255,0.06); }
.pay-chip-usdt    { color: #26a17b; border-color: rgba(38,161,123,0.3); background: rgba(38,161,123,0.06); }

/* Stats bar */
.hero-stats {
  display: flex; gap: 2rem; flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.stat-item { display: flex; flex-direction: column; }
.stat-num {
  font-family: var(--font-m);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-1);
}
.stat-lbl {
  font-size: 0.78rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Hero product float */
.hero-visual {
  position: relative;
  z-index: 2;
}
.hero-product-card {
  background: var(--bg-card);
  border: 1px solid var(--border-m);
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-card), 0 0 60px rgba(255,85,0,0.06);
  animation: float-y 6s ease-in-out infinite;
}
@keyframes float-y {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.hero-product-card .product-thumb { aspect-ratio: 1/1; object-fit: cover; background: #1a1a1a; width: 100%; }

/* ─── Section Shared ──────────────────────────────────────────── */
.section { padding: var(--sp-xl) 0; }
.section-sm { padding: var(--sp-lg) 0; }
.section-xl { padding: var(--sp-2x) 0; }

.section-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--font-m);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 0.75rem;
}
.section-label::before {
  content: '';
  display: block;
  width: 20px; height: 1px;
  background: var(--orange);
}

.section-title {
  font-family: var(--font-d);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 1rem;
}
.section-sub {
  color: var(--text-2);
  font-size: 1.05rem;
  max-width: 520px;
}

/* ─── Product Cards ───────────────────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
/* Below 768px the 280px minimum only ever fits ONE card per row — every
   product grid on the site (home, catálogo) turned into a single tall,
   slow-to-browse column on phones AND on the 577–767px band (large phones,
   small tablets in portrait). Two narrower cards per row all the way up to
   the tablet breakpoint is the standard mobile storefront pattern and lets
   a shopper see twice as much without scrolling. The rest of the
   card-internal size trims that go with this live further down this file,
   right after each property's own base rule — see the note there. */
@media (max-width: 767px) {
  .products-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
}

.product-card {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color var(--t-base), box-shadow var(--t-base), transform var(--t-slow);
}
.product-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--grad-orange);
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform var(--t-base);
}
.product-card:hover {
  border-color: var(--border-o);
  box-shadow: var(--shadow-o), var(--shadow-card);
  transform: translateY(-3px);
}
.product-card:hover::before { transform: scaleY(1); }

.product-thumb-wrap {
  position: relative;
  aspect-ratio: 1/1;
  overflow: hidden;
  background: #111;
}
.product-thumb-wrap img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow);
}
.product-card:hover .product-thumb-wrap img { transform: scale(1.04); }

.product-badge {
  position: absolute;
  top: 10px; left: 10px;
  font-family: var(--font-m);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 2px;
}
.badge-cat  { background: var(--bg-surface); color: var(--text-2); border: 1px solid var(--border-m); }
.badge-feat { background: var(--grad-orange); color: #fff; }
.badge-sale { background: var(--grad-gold); color: #000; }

.product-body { padding: 1.25rem; flex: 1; display: flex; flex-direction: column; }

.product-name {
  font-family: var(--font-d);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 0.4rem;
  text-wrap: balance;
}
.product-desc {
  font-size: 0.85rem;
  color: var(--text-2);
  margin-bottom: auto;
  padding-bottom: 1rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ═══ RAFFLE CARDS — always-on eye-catching treatment ═══ */
@keyframes raffle-glow {
  0%, 100% { box-shadow: 0 0 0 1px rgba(240,180,41,.35), 0 0 22px rgba(255,85,0,.16); }
  50%      { box-shadow: 0 0 0 1px rgba(240,180,41,.65), 0 0 36px rgba(255,85,0,.32); }
}
.raffle-card {
  border-color: rgba(240,180,41,.4);
  animation: raffle-glow 2.4s ease-in-out infinite;
}
.raffle-card::before { background: var(--grad-gold); transform: scaleY(1); width: 3px; }
.raffle-card:hover {
  transform: translateY(-6px) scale(1.02);
  border-color: var(--gold);
  box-shadow: 0 0 0 1px var(--gold), 0 14px 44px rgba(255,85,0,.38), var(--shadow-card);
  animation-play-state: paused;
}
.raffle-card:hover .product-thumb-wrap img { transform: scale(1.08); }

.raffle-live-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: var(--grad-orange); color: #fff;
}
.raffle-live-badge .eyebrow-dot { background: #fff; margin: 0; }

.raffle-countdown {
  display: flex; align-items: center; gap: .4rem;
  margin-bottom: 1rem;
  flex-wrap: wrap; /* safety net — the tuned mobile sizes below keep this
    from ever actually being needed on a real device, but a nowrap row of
    4 non-shrinking min-width boxes silently overflowing past the raffle
    card's own overflow:hidden edge is exactly the kind of invisible bug
    that only shows up with a real active raffle to look at, so this stays
    even after the real fix. */
}
.cd-unit {
  display: flex; flex-direction: column; align-items: center;
  background: rgba(0,0,0,.35);
  border: 1px solid rgba(240,180,41,.3);
  border-radius: 4px;
  padding: .4rem .5rem;
  min-width: 46px;
}
.cd-num {
  font-family: var(--font-m);
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 12px rgba(240,180,41,.5);
  line-height: 1;
}
.cd-lbl {
  font-size: .62rem;
  color: rgba(255,255,255,.55);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-top: .25rem;
}
.cd-colon {
  font-family: var(--font-m);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--gold);
  animation: pulse-dot 1s infinite;
  padding-bottom: 1rem;
}
.raffle-countdown.cd-urgent .cd-unit { border-color: rgba(239,68,68,.5); }
.raffle-countdown.cd-urgent .cd-num  { color: #ef4444; text-shadow: 0 0 12px rgba(239,68,68,.55); }
.raffle-countdown.cd-urgent .cd-colon { color: #ef4444; }
.raffle-countdown.cd-ended {
  font-family: var(--font-m);
  font-size: .85rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* Raffle countdown: 4 boxes at their default 46px min-width need ~250px+
   total — comfortably fits a full-width desktop card, but overflowed a
   ~150px-wide compact mobile card's own overflow:hidden edge, silently
   clipping the minutes/seconds boxes (confirmed live with a real active
   raffle — a state this project's testing had never actually hit before,
   since no raffle happened to be running while every earlier mobile pass
   this session was done). Shrunk to fit the same compact card. Placed here,
   after the base .cd-* rules rather than back in the earlier ≤767px block,
   because a media-query rule loses a same-specificity tie to a plain rule
   that comes later in the file regardless of which one currently matches —
   it has to sit below its own base rule to actually win. */
@media (max-width: 767px) {
  .raffle-countdown { gap: 0.25rem; margin-bottom: 0.75rem; }
  .cd-unit { min-width: 32px; padding: 0.3rem 0.3rem; }
  .cd-num { font-size: 0.85rem; }
  .cd-lbl { font-size: 0.48rem; margin-top: 0.15rem; }
  .cd-colon { font-size: 0.85rem; padding-bottom: 0.65rem; }
}

.raffle-share-row { display: flex; gap: .5rem; margin-top: .65rem; flex-wrap: wrap; }
.raffle-share-btn {
  display: inline-flex; align-items: center; gap: .35rem;
  font-size: .72rem; font-weight: 600; padding: .35rem .65rem;
  border-radius: 2px; border: 1px solid var(--border-m); color: var(--text-2);
  text-decoration: none; transition: all var(--t-base);
}
.raffle-share-btn:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-1px); }

.product-meta {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.product-price {
  display: flex; flex-direction: column;
}
.price-current {
  font-family: var(--font-m);
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--gold);
}
.price-original {
  font-family: var(--font-m);
  font-size: 0.75rem;
  color: var(--text-3);
  text-decoration: line-through;
}
.price-discount {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--orange);
  background: var(--orange-dim);
  padding: 0.1rem 0.35rem;
  border-radius: 2px;
}

.btn-buy {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--grad-orange);
  color: #fff;
  font-family: var(--font-d);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.5rem 1.1rem;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  text-transform: uppercase;
  transition: all var(--t-fast);
  white-space: nowrap;
}
.btn-buy:hover { color: #fff; filter: brightness(1.15); box-shadow: 0 0 20px var(--orange-glow); }

/* Compact mobile/sub-tablet card sizing (≤767px, matches the .products-grid
   2-column switch above). This has to sit AFTER every one of these
   properties' own base rule above — a media-query rule loses a same-
   specificity tie to a plain rule that appears later in the file regardless
   of which one currently matches the viewport, so placing this block any
   earlier (it originally sat right after .products-grid, near the top of
   this file) silently no-ops every property here that also has a later
   base declaration. Confirmed live via computed-style checks: only
   .product-meta's flex-direction (which has no competing later value) was
   ever actually taking effect from that earlier position — every font-size
   and padding trim below was being overridden back to full desktop size,
   which is exactly why cards still read as oversized on phones after that
   "fix" shipped. */
@media (max-width: 767px) {
  .product-body { padding: 0.85rem; }
  .product-name { font-size: 0.92rem; margin-bottom: 0.3rem; }
  .product-desc { font-size: 0.74rem; padding-bottom: 0.6rem; -webkit-line-clamp: 2; }
  /* Price + buy button stack instead of sitting side by side — at ~170px
     card width there isn't room for both "$XX.XX" and an "AÑADIR" button on
     one line without one of them getting clipped by the card's own
     overflow:hidden (confirmed live: the button was cut to "AÑA"). */
  .product-meta { margin-top: 0.6rem; padding-top: 0.6rem; gap: 0.5rem; flex-direction: column; align-items: stretch; }
  .price-current { font-size: 1rem; }
  .price-original { font-size: 0.65rem; }
  .product-badge { font-size: 0.55rem; padding: 0.15rem 0.4rem; top: 6px; left: 6px; }
  /* The category badge (top-right) collided head-on with the featured/sale
     badge (top-left, "DESTACADO"/"OFERTA -X%"/"GRATIS") once both were
     squeezed into a ~170px-wide card — dropped as the less essential of the
     two on this compact layout; still shown on the full product page. */
  .product-card .badge-cat { display: none; }
  .btn-buy { font-size: 0.72rem; padding: 0.45rem 0.6rem; justify-content: center; width: 100%; }
}

/* ─── Category Filter ─────────────────────────────────────────── */
.category-filter {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}
.cat-pill {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-size: 0.82rem;
  font-weight: 500;
  padding: 0.4rem 1rem;
  border-radius: 2px;
  border: 1px solid var(--border-m);
  background: var(--bg-card);
  color: var(--text-2);
  cursor: pointer;
  transition: all var(--t-fast);
  text-decoration: none;
}
.cat-pill:hover, .cat-pill.active {
  background: var(--orange-dim);
  border-color: var(--border-o);
  color: var(--orange);
}

/* ─── Payment Section ─────────────────────────────────────────── */
.payment-section {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.pay-method-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}
.pay-method-card {
  background: var(--bg-card);
  border: 1px solid var(--border-m);
  border-radius: var(--r-md);
  padding: 1.5rem 1rem;
  text-align: center;
  transition: all var(--t-base);
}
.pay-method-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.4);
}
.pay-method-card.primary {
  border-color: rgba(240,180,41,0.4);
  background: rgba(240,180,41,0.04);
}
.pay-icon { font-size: 2.2rem; margin-bottom: 0.75rem; }
.pay-method-name {
  font-family: var(--font-d);
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-1);
  margin-bottom: 0.25rem;
}
.pay-method-sub { font-size: 0.75rem; color: var(--text-3); }

/* ─── Checkout & Forms ────────────────────────────────────────── */
.gf-card {
  background: var(--bg-card);
  border: 1px solid var(--border-m);
  border-radius: var(--r-lg);
  padding: 2rem;
}

.gf-form-group { margin-bottom: 1.25rem; }
.gf-label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-2);
  margin-bottom: 0.5rem;
  font-family: var(--font-m);
}
.gf-input {
  width: 100%;
  background: var(--bg-input);
  border: 1px solid var(--border-m);
  border-radius: var(--r-sm);
  color: var(--text-1);
  padding: 0.7rem 1rem;
  font-family: var(--font-b);
  font-size: 0.95rem;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  outline: none;
}
.gf-input:focus {
  border-color: var(--orange);
  box-shadow: 0 0 0 3px var(--orange-dim);
}
.gf-input::placeholder { color: var(--text-3); }

.pay-selector {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
@media (min-width: 480px) { .pay-selector { grid-template-columns: repeat(4, 1fr); } }

.pay-option { position: relative; }
.pay-option input[type=radio] { position: absolute; opacity: 0; pointer-events: none; }
.pay-option label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  padding: 0.9rem 0.5rem;
  background: var(--bg-input);
  border: 1px solid var(--border-m);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 0.8rem;
  color: var(--text-2);
  font-weight: 500;
  transition: all var(--t-fast);
  text-align: center;
}
.pay-option input:checked + label {
  border-color: var(--orange);
  background: var(--orange-dim);
  color: var(--orange);
  box-shadow: 0 0 0 1px var(--orange);
}
.pay-option label i { font-size: 1.4rem; }

.btn-checkout {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  width: 100%;
  background: var(--grad-orange);
  color: #fff;
  font-family: var(--font-d);
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 1rem;
  border-radius: var(--r-sm);
  border: none;
  cursor: pointer;
  box-shadow: 0 0 30px var(--orange-glow);
  transition: all var(--t-base);
}
.btn-checkout:hover { filter: brightness(1.12); box-shadow: 0 0 50px rgba(255,85,0,0.3); transform: translateY(-1px); }

/* Order summary */
.order-line {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.order-line:last-child { border-bottom: none; }
.order-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0 0;
  border-top: 2px solid var(--border-m);
  margin-top: 0.5rem;
}
.total-label { font-family: var(--font-d); font-size: 1.1rem; font-weight: 700; }
.total-amount { font-family: var(--font-m); font-size: 1.6rem; font-weight: 700; color: var(--gold); }

/* ─── Auth Pages ──────────────────────────────────────────────── */
.auth-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 1rem;
  background: var(--bg-body);
}
.auth-card {
  width: 100%; max-width: 420px;
  background: var(--bg-card);
  border: 1px solid var(--border-m);
  border-radius: var(--r-lg);
  padding: 2.5rem;
}
.auth-title {
  font-family: var(--font-d);
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.auth-sub { font-size: 0.9rem; color: var(--text-2); margin-bottom: 2rem; }

/* ─── Dashboard ───────────────────────────────────────────────── */
.dash-header {
  padding: 7rem 0 2rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.dash-title { font-family: var(--font-d); font-size: 2.2rem; font-weight: 700; }

.dash-order-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.25rem;
  margin-bottom: 1rem;
  transition: border-color var(--t-fast);
}
.dash-order-card:hover { border-color: var(--border-m); }

.order-status {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--font-m);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
}
.status-completed { background: rgba(34,197,94,0.12); color: #22c55e; }
.status-pending   { background: rgba(240,180,41,0.12); color: var(--gold); }
.status-failed    { background: rgba(239,68,68,0.12); color: #ef4444; }

/* ─── Admin ───────────────────────────────────────────────────── */
.admin-layout { display: flex; min-height: 100vh; }
.admin-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: var(--bg-surface);
  border-right: 1px solid var(--border);
  padding: 5rem 1rem 2rem;
}
.admin-main { flex: 1; padding: 5rem 2rem 2rem; overflow-x: auto; }

.admin-nav-link {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.55rem 0.85rem;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-size: 0.875rem;
  font-weight: 500;
  transition: all var(--t-fast);
  text-decoration: none;
  margin-bottom: 2px;
}
.admin-nav-link:hover, .admin-nav-link.active {
  background: var(--orange-dim);
  color: var(--orange);
}

.admin-nav-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.65rem 0.9rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  color: var(--text-1);
  font-size: 0.9rem;
  font-weight: 600;
}
.admin-nav-toggle[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.admin-nav-toggle .bi-chevron-down { transition: transform var(--t-fast); }

/* On desktop the collapse is always expanded, regardless of Bootstrap's
   .show state — the toggle button itself is hidden here (d-md-none), the
   mobile-only collapsed/expanded behavior only matters below the breakpoint. */
@media (min-width: 769px) {
  .admin-sidebar nav.collapse { display: block !important; }
}

@media (max-width: 768px) {
  .admin-layout { flex-direction: column; }
  .admin-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 4.5rem 1rem 0.75rem;
  }
  .admin-sidebar > div:first-child { display: none; } /* GOODFILE brand block — redundant with the top navbar on mobile */
  .admin-nav-toggle { display: flex; }
  .admin-sidebar nav.show,
  .admin-sidebar nav.collapsing {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.6rem;
    max-height: 65vh;
    overflow-y: auto;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: var(--r-sm);
    padding: 0.5rem;
  }
  .admin-sidebar nav .divider { margin: 0.4rem 0 !important; }
  .admin-nav-link { margin-bottom: 0; white-space: normal; }
  .admin-main { padding: 1.5rem 1rem 2rem; }

  /* Admin forms/filters everywhere use hand-styled flex rows with inline
     min-width/max-width hacks (search box + selects + button) sized for
     desktop — on a phone those minimums add up wider than the screen, so
     the row can't actually wrap and content gets pushed off-screen instead
     of just stacking. Force every field in .admin-main full-width on
     mobile regardless of what inline width it was given. */
  .admin-main [style*="min-width"] { min-width: 0 !important; }
  .admin-main [style*="max-width"] { max-width: 100% !important; }
  .admin-main form.d-flex,
  .admin-main .d-flex.flex-wrap { row-gap: 0.6rem; }
  .admin-main input[type="text"],
  .admin-main input[type="search"],
  .admin-main input[type="email"],
  .admin-main input[type="password"],
  .admin-main input[type="number"],
  .admin-main input[type="date"],
  .admin-main input[type="url"],
  .admin-main select.gf-input,
  .admin-main input.gf-input {
    width: 100%;
  }
  .admin-main input[type="file"] { max-width: 100%; }

  /* Bootstrap's .row relies on an ancestor .container to cancel its own
     negative gutter margins — .admin-main isn't one, so any raw .row inside
     it (dashboard stat cards, the product form's two-column layout) bled
     past the edge of the screen. */
  .admin-main .row { margin-left: 0; margin-right: 0; }
}

.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
  font-family: var(--font-m);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  text-align: left;
}
.admin-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--text-2);
  vertical-align: middle;
}
.admin-table tr:hover td { background: var(--bg-card-h); color: var(--text-1); }

/* Stat cards (admin) */
.stat-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
}
.stat-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad-orange);
}
.stat-card-num {
  font-family: var(--font-m);
  font-size: 2rem;
  font-weight: 700;
  color: var(--text-1);
}
.stat-card-lbl {
  font-size: 0.78rem;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.25rem;
}
.stat-card-icon {
  position: absolute;
  right: 1.25rem; top: 1.25rem;
  font-size: 1.75rem;
  color: var(--orange);
  opacity: 0.25;
}

.stat-card-link { display: block; text-decoration: none; transition: transform var(--t-base), border-color var(--t-base); }
.stat-card-link:hover { transform: translateY(-2px); }
.stat-card-link:hover .stat-card { border-color: var(--border-o); }
.stat-card-urgent.stat-card::after { background: linear-gradient(135deg, #ef4444, #f97316); }
.stat-card-urgent .stat-card-icon { color: #ef4444; opacity: 0.35; }
.stat-card-urgent .stat-card-num { color: #ef4444; }

/* ─── Payment Pages ───────────────────────────────────────────── */
.payment-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5rem 1rem;
  background: var(--bg-body);
}
.payment-card {
  width: 100%; max-width: 500px;
  background: var(--bg-card);
  border: 1px solid var(--border-m);
  border-radius: var(--r-lg);
  padding: 2.5rem;
}
.payment-card.binance-card { border-color: rgba(240,180,41,0.3); }

.qr-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
}
.qr-box {
  background: #fff;
  padding: 1rem;
  border-radius: var(--r-sm);
  display: inline-block;
}
.wallet-address {
  font-family: var(--font-m);
  font-size: 0.78rem;
  color: var(--text-2);
  word-break: break-all;
  background: var(--bg-input);
  border: 1px solid var(--border-m);
  border-radius: var(--r-sm);
  padding: 0.65rem 1rem;
  cursor: pointer;
  transition: border-color var(--t-fast);
}
.wallet-address:hover { border-color: var(--orange); }

/* ─── Success Page ────────────────────────────────────────────── */
.success-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  padding: 5rem 1rem;
}
.success-icon {
  width: 80px; height: 80px;
  background: rgba(34,197,94,0.12);
  border: 2px solid rgba(34,197,94,0.3);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 2.5rem;
  color: #22c55e;
  margin: 0 auto 1.5rem;
}

/* ─── Product Detail ──────────────────────────────────────────── */
.product-detail-header {
  padding: 7rem 0 3rem;
  background: var(--bg-surface);
  border-bottom: 1px solid var(--border);
}
.product-rating { display: flex; align-items: center; gap: 0.4rem; }
.star-fill { color: var(--gold); }
.star-empty { color: var(--text-3); }

.star-picker { display: flex; gap: .35rem; font-size: 1.4rem; }
.star-pick { cursor: pointer; transition: color var(--t-fast), transform var(--t-fast); }
.star-pick:hover { transform: scale(1.15); }

.spec-list { list-style: none; padding: 0; }
.spec-list li {
  display: flex; justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.875rem;
}
.spec-list li:last-child { border-bottom: none; }
.spec-key { color: var(--text-3); }
.spec-val { color: var(--text-1); font-family: var(--font-m); font-size: 0.8rem; }

/* ─── Toast ───────────────────────────────────────────────────── */
.gf-toast {
  position: fixed;
  bottom: 2rem; right: 2rem;
  background: var(--bg-card);
  border: 1px solid var(--orange);
  border-radius: var(--r-sm);
  padding: 0.9rem 1.5rem;
  font-size: 0.875rem;
  color: var(--text-1);
  font-weight: 500;
  box-shadow: var(--shadow-card), 0 0 20px var(--orange-glow);
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
  pointer-events: none;
  z-index: 9999;
  max-width: 320px;
}
.gf-toast.show { opacity: 1; transform: translateY(0); }

/* ─── Footer ──────────────────────────────────────────────────── */
.gf-footer {
  background: var(--bg-surface);
  border-top: 1px solid var(--border);
  padding: 2rem 0 1.5rem;
  margin-top: 1.5rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 768px) {
  /* Below this width the 4 columns stack — .footer-grid's gap becomes a ROW
     gap for every stacked section, so keeping the brand block full-width and
     putting the 3 short link lists (Software/Soporte/Legal) side by side in
     one row — instead of 2-per-row, which left Legal alone on its own extra
     row — means the row's height is set once by the tallest list (Software,
     6 items) instead of twice. minmax(0,1fr) keeps a long link like
     "Política de reembolso" wrapping inside its column instead of forcing
     it wider than its third of the row. */
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 0.85rem; margin-bottom: 1.5rem; }
  .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .gf-footer { padding: 1.5rem 0 1.25rem; margin-top: 1rem; }
  .footer-heading { margin-bottom: 0.5rem; }
  .footer-links li { margin-bottom: 0.3rem; }
  .footer-links a { font-size: 0.78rem; }
  .footer-tagline { font-size: 0.8rem; margin-bottom: 0.75rem; }
  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    padding-top: 1rem;
    padding-bottom: 3.5rem; /* clears the floating contact button, which
      otherwise sits fixed over this exact bottom-right corner of the page */
  }
}

.footer-logo {
  display: flex; align-items: center; gap: 0.6rem;
  margin-bottom: 0.75rem;
}
.footer-tagline { font-size: 0.875rem; color: var(--text-3); margin-bottom: 1rem; }
.payment-badges { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.pay-badge {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 2px;
  border: 1px solid;
}
.pay-binance { color: var(--gold); border-color: rgba(240,180,41,0.25); }
.pay-usdt    { color: #26a17b; border-color: rgba(38,161,123,0.25); }
.pay-paypal  { color: #009cde; border-color: rgba(0,156,222,0.25); }
.pay-stripe  { color: #635bff; border-color: rgba(99,91,255,0.25); }

.footer-heading {
  font-family: var(--font-m);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 0.75rem;
}
.footer-links { list-style: none; padding: 0; }
.footer-links li { margin-bottom: 0.4rem; }
.footer-links a { font-size: 0.875rem; color: var(--text-2); transition: color var(--t-fast); }
.footer-links a:hover { color: var(--orange); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  color: var(--text-3);
}
.footer-secure { display: flex; align-items: center; gap: 0.4rem; color: var(--gold); }

/* ─── Alert ───────────────────────────────────────────────────── */
.gf-alert {
  padding: 0.85rem 1rem;
  border-radius: var(--r-sm);
  font-size: 0.875rem;
  margin-bottom: 1.25rem;
  border-left: 3px solid;
}
.gf-alert-error   { background: rgba(239,68,68,0.08);  border-color: #ef4444; color: #ef4444; }
.gf-alert-success { background: rgba(34,197,94,0.08);  border-color: #22c55e; color: #22c55e; }
.gf-alert-info    { background: var(--orange-dim);     border-color: var(--orange); color: var(--orange); }
.gf-alert-gold    { background: var(--gold-dim);       border-color: var(--gold);   color: var(--gold); }

/* ─── Utilities ───────────────────────────────────────────────── */
.text-orange { color: var(--orange); }
.text-gold   { color: var(--gold); }
.text-muted-gf { color: var(--text-2); }
.font-mono   { font-family: var(--font-m); }
.font-display { font-family: var(--font-d); }
.divider     { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }

/* Responsive */
@media (max-width: 991px) {
  .hero { min-height: auto; }
  /* This used to be clamp(2.25rem, 8vw, 3.5rem) — its own 2.25rem FLOOR was
     actually higher than what the base rule's clamp(2.1rem, 4.5vw, 3.75rem)
     would have produced at a typical phone width, so this "mobile override"
     was quietly making the title *bigger* than desktop-scaled sizing would
     have given it, right when the hero copy is at its longest (4 stacked
     lines) and screen space is at its tightest. */
  .hero-title { font-size: clamp(1.6rem, 6.5vw, 2.75rem); }
  .hero-visual { display: none; }
}
@media (max-width: 576px) {
  .gf-card { padding: 1.25rem; }
  .pay-selector { grid-template-columns: repeat(2, 1fr); }
  .hero-stats { gap: 1.5rem; margin-top: 1.5rem; padding-top: 1.25rem; }
  .stat-num { font-size: 1.25rem; }
  .hero-eyebrow { font-size: 0.62rem; padding: 0.3rem 0.7rem; }
  .hero-subtitle { font-size: 0.85rem; margin-bottom: 1rem; }
}

/* Navbar on narrow phones: the brand wordmark at full size (was eating ~136px
   of a 360px-wide row) left the always-visible search box squeezed down to
   an unusably cramped ~90px, clipping its own placeholder text almost
   immediately. Shrinking the brand frees that space back up for search. */
@media (max-width: 480px) {
  .navbar-brand { gap: 0.4rem; }
  .brand-icon { font-size: 1.1rem; }
  .brand-text { font-size: 1.05rem; }
  .gf-navbar > .container { gap: 0.5rem; }
  .gf-search-input { padding-left: 1.9rem; font-size: 0.8rem; }
  .gf-search-icon { left: 0.55rem; font-size: 0.8rem; }
}

/* ─── Animations ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
  }
  .reveal.visible { opacity: 1; transform: translateY(0); }
  .reveal-delay-1 { transition-delay: 0.1s; }
  .reveal-delay-2 { transition-delay: 0.2s; }
  .reveal-delay-3 { transition-delay: 0.3s; }
}