@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700&family=Montserrat:wght@400;500;600;700;800&display=swap');

* { box-sizing: border-box; margin: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background:
    radial-gradient(900px 520px at 6% -10%, var(--bg-glow-1), transparent 60%),
    radial-gradient(800px 520px at 100% 0%, var(--bg-glow-2), transparent 60%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s ease, color .2s ease;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font-family: inherit; }

h1, h2, h3 { font-weight: 700; letter-spacing: .01em; }
.brand-font { font-family: var(--font-display); letter-spacing: .04em; }

.gold-text {
  background: linear-gradient(135deg, var(--gold-hi) 0%, var(--gold-400) 50%, var(--gold-700) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.sub { color: var(--text-2); font-size: .92rem; }
.muted { color: var(--text-3); }

/* ---------- Scrollbar ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 10px; }

/* ---------- Utilidades ---------- */
.row { display: flex; align-items: center; }
.gap-1 { gap: 8px; } .gap-2 { gap: 14px; } .gap-3 { gap: 22px; }
.between { justify-content: space-between; }
.wrap-tags { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Botón de tema (claro/oscuro) ---------- */
.theme-toggle {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex: 0 0 auto;
}
.theme-toggle:hover { border-color: var(--gold); }
.theme-toggle svg { width: 18px; height: 18px; }
:root[data-theme="light"] .icon-moon { display: none; }
:root[data-theme="dark"]  .icon-sun  { display: none; }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .icon-moon { display: none; }
  :root:not([data-theme="dark"]) .icon-sun  { display: block; }
}