/* ════════════════════════════════════════════════════════════════════════
   NexoGamer — componentes de botón compartidos (cross-page)
   ------------------------------------------------------------------------
   Fuente única de los botones que aparecen en varias páginas. Se carga DESPUÉS
   de tokens.css y de css/category.css, así que gana en la cascada y unifica la
   deriva que había (p.ej. el botón Amazon era violeta en index y naranja en
   categorías; .nav-cta era píldora en noticia.html y rect en el resto).
   ════════════════════════════════════════════════════════════════════════ */
:root { --ng-amazon: #FF9900; --ng-amazon-2: #FF8000; }

/* Botón Amazon (CTA de conversión) — naranja de marca Amazon en TODO el sitio */
.btn-amazon {
  display: inline-flex; align-items: center; gap: 6px;
  background: linear-gradient(135deg, var(--ng-amazon), var(--ng-amazon-2));
  color: #111; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  text-transform: none;
  padding: 10px 18px; border-radius: var(--ng-r-sm); border: none;
  white-space: nowrap; flex-shrink: 0;
  transition: opacity var(--ng-dur) var(--ng-ease), transform var(--ng-dur) var(--ng-ease), box-shadow var(--ng-dur) var(--ng-ease);
}
.btn-amazon:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255,140,0,.3); }

/* Botón compartir (icono) */
.btn-share {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border-radius: var(--ng-r-sm);
  background: rgba(255,255,255,.06); border: 1px solid var(--ng-border);
  color: var(--ng-text-muted); cursor: pointer; flex-shrink: 0;
  transition: all var(--ng-dur) var(--ng-ease);
}
.btn-share:hover { background: rgba(157,78,221,.15); border-color: var(--ng-violet); color: var(--ng-violet); }

/* CTA del nav — gradiente violeta de marca, mismo estilo en todas las páginas */
.nav-cta {
  display: inline-flex; align-items: center; gap: 7px;
  background: linear-gradient(135deg, var(--ng-violet), var(--ng-violet-light));
  color: var(--ng-bg); padding: 11px 24px; border-radius: var(--ng-r-sm);
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  border: none; cursor: pointer; font-family: inherit; overflow: hidden;
  box-shadow: 0 4px 16px rgba(157,78,221,.25);
  transition: transform var(--ng-dur-slow) var(--ng-ease), box-shadow var(--ng-dur-slow) var(--ng-ease);
}
.nav-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(157,78,221,.4); }