/* styles.css — base compartida de páginas públicas GiftCardYa.
 *
 * Contiene SOLO lo que estaba duplicado en cada HTML: reset, variables de
 * tema (dark + light), tipografías, nav y controles de nav. Cada página sigue
 * teniendo su <style> inline para lo suyo — y como este archivo se carga ANTES
 * de ese <style>, cualquier override page-specific sigue ganando en la cascada.
 *
 * El Service Worker ya cachea .css (ASSET_REGEX en sw.js) y build.js lo incluye
 * en el hash de CACHE_VERSION, así que este archivo se versiona/purga solo.
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #0a0a0f; --bg2: #111118; --bg3: #16161f; --card: #1a1a26;
  --border: rgba(255,255,255,0.07); --border-hover: rgba(255,255,255,0.15);
  --text: #f0f0f5; --muted: #9a9ab8;
  --accent: #7c6aff; --accent2: #ff6a9a; --accent3: #6affcc; --gold: #ffb84a;
  --font-display: 'Syne', sans-serif; --font-body: 'DM Sans', sans-serif;
}
[data-theme="light"] {
  --bg: #f5f5f8; --bg2: #ffffff; --bg3: #ededf2; --card: #ffffff;
  --border: rgba(10,10,30,0.08); --border-hover: rgba(10,10,30,0.18);
  --text: #1a1a26; --muted: #555577;
  --accent: #6850f5; --accent2: #e94e84; --accent3: #2ba77d; --gold: #d89500;
}
[data-theme="light"] nav { background: rgba(255,255,255,0.85) !important; }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); min-height: 100vh; }
a { color: inherit; text-decoration: none; }

nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 0 5%; height: 68px; display: flex; align-items: center; justify-content: space-between; background: rgba(10,10,15,0.85); backdrop-filter: blur(20px); border-bottom: 1px solid var(--border); }
.logo { font-family: var(--font-display); font-size: 20px; font-weight: 800; color: var(--text); display: flex; align-items: center; gap: 10px; }
.logo-icon { width: 30px; height: 30px; background: linear-gradient(135deg, var(--accent), var(--accent2)); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; }
.nav-right { display: flex; align-items: center; gap: 10px; }
.btn-ghost { background: none; border: 1px solid var(--border); color: var(--muted); padding: 8px 14px; border-radius: 10px; font-size: 13px; transition: all .2s; cursor: pointer; }
.btn-ghost:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle { background: none; border: 1px solid var(--border); color: var(--text); width: 40px; height: 40px; border-radius: 10px; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; }