/* SuperGolex · base.css — tipografía, tokens, botones, avisos. Lo comparten la portada y el juego. */
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/poppins-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/poppins-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/poppins-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: 'Poppins'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/poppins-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-024F, U+1E00-1EFF; }

:root {
  --sg-bg: #07090f;
  --sg-bg2: #0c1020;
  --sg-panel: rgba(14, 18, 32, .78);
  --sg-borde: rgba(255, 255, 255, .10);
  --sg-tx: #eef1f8;
  --sg-tx2: #a8b0c4;
  --sg-oro: #f5c451;
  --sg-oro2: #c8901c;
  --sg-oro-claro: #ffe7a3;
  --sg-azul: #2f86ff;
  --sg-rojo: #ff3d52;
  --sg-verde: #36d67a;
  --sg-r: 14px;
  --sg-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --exc-font: var(--sg-font);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--sg-bg); color: var(--sg-tx); font: 400 16px/1.55 var(--sg-font); -webkit-font-smoothing: antialiased; }
.sg img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--sg-oro); outline-offset: 2px; }

svg.exc-ico { width: 1em; height: 1em; flex: none; vertical-align: -.125em; stroke-width: 1.8; overflow: visible; }

/* ── Botones ──────────────────────────────────────────────────────────── */
.sg-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55em;
  min-height: 44px; padding: .6em 1.15em; border-radius: 999px; border: 1px solid transparent;
  font-weight: 600; font-size: .95rem; text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease, filter .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.sg-btn:active { transform: translateY(1px) scale(.98); }
.sg-btn-oro {
  color: #1d1300;
  background: linear-gradient(180deg, #ffe9a6 0%, var(--sg-oro) 42%, var(--sg-oro2) 100%);
  border-color: rgba(255, 236, 170, .9);
  box-shadow: 0 6px 22px rgba(245, 196, 81, .35), inset 0 1px 0 rgba(255, 255, 255, .7);
}
.sg-btn-oro:hover { filter: brightness(1.06); box-shadow: 0 10px 30px rgba(245, 196, 81, .5), inset 0 1px 0 rgba(255,255,255,.7); }
.sg-btn-vidrio { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .22); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.sg-btn-vidrio:hover { background: rgba(255, 255, 255, .14); }
.sg-btn-suave { background: rgba(255, 255, 255, .06); border-color: var(--sg-borde); }
.sg-btn-suave:hover { background: rgba(255, 255, 255, .12); }
.sg-btn-sm { min-height: 38px; padding: .4em .95em; font-size: .88rem; }
.sg-btn-xl { min-height: 56px; padding: .7em 1.6em; font-size: 1.06rem; }
.sg-btn-blo { width: 100%; }
.sg-btn[disabled], .sg-btn.is-cargando { opacity: .7; pointer-events: none; }
.sg-btn.is-cargando::after { content: ''; width: 1em; height: 1em; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: sg-gira .7s linear infinite; }
@keyframes sg-gira { to { transform: rotate(360deg); } }

/* ── Avisos ───────────────────────────────────────────────────────────── */
.sg-toasts { position: fixed; z-index: 9999; left: 50%; bottom: max(16px, env(safe-area-inset-bottom)); transform: translateX(-50%); display: grid; gap: 8px; width: min(92vw, 420px); pointer-events: none; }
.sg-toast { padding: .75em 1em; border-radius: 12px; background: #151b2e; border: 1px solid var(--sg-borde); box-shadow: 0 10px 30px rgba(0,0,0,.45); font-size: .92rem; transition: opacity .3s, transform .3s; }
.sg-toast-danger { border-color: rgba(255, 61, 82, .55); }
.sg-toast-warning { border-color: rgba(245, 196, 81, .55); }
.sg-toast.is-sale { opacity: 0; transform: translateY(6px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}