/* EcommerceAgents — fondo y botones premium compartidos */
:root {
  --ea-blue: #2b3af5;
  --ea-purple: #8b2fd6;
  --ea-orange: #ff6a3d;
  --ea-grad-bg: linear-gradient(135deg, #2b3af5 0%, #6a28d9 45%, #8b2fd6 65%, #ff6a3d 100%);
  --ea-premium-shadow: 0 12px 32px rgba(20, 18, 60, 0.14);
  --ea-premium-shadow-lg: 0 20px 50px rgba(20, 18, 60, 0.22);
}

.ea-premium-bg {
  background:
    radial-gradient(1200px 600px at 15% 0%, rgba(43, 58, 245, 0.55), transparent 55%),
    radial-gradient(1000px 700px at 85% 15%, rgba(255, 106, 61, 0.42), transparent 55%),
    radial-gradient(900px 600px at 50% 100%, rgba(139, 47, 214, 0.55), transparent 60%),
    var(--ea-grad-bg);
  background-attachment: fixed;
}

/* Shader de pagina completa (Three.js) */
.premium-hero--page {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-color: #05060f;
  background-image:
    radial-gradient(ellipse 90% 70% at 12% 18%, rgba(43, 58, 245, 0.42), transparent 55%),
    radial-gradient(ellipse 70% 60% at 88% 22%, rgba(139, 47, 214, 0.38), transparent 52%),
    radial-gradient(ellipse 80% 55% at 50% 98%, rgba(255, 106, 61, 0.3), transparent 58%);
}

.premium-hero--page .premium-hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.premium-hero--page.premium-hero--ready .premium-hero-canvas {
  opacity: 1;
}

.premium-hero-overlay--page {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 75% 65% at 50% 42%, rgba(5, 6, 15, 0.45) 0%, rgba(5, 6, 15, 0.15) 50%, transparent 75%);
  pointer-events: none;
}

.premium-hero--viewport {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  background: #05060f;
}

.premium-hero-overlay--soft {
  background:
    radial-gradient(ellipse 85% 75% at 50% 35%, rgba(5, 6, 15, 0.68) 0%, rgba(5, 6, 15, 0.32) 45%, transparent 72%),
    linear-gradient(180deg, rgba(5, 6, 15, 0.22) 0%, transparent 35%, rgba(5, 6, 15, 0.3) 100%);
}

.premium-hero--page.premium-hero--static,
.premium-hero--viewport.premium-hero--static {
  background-color: #05060f;
  background-image:
    radial-gradient(ellipse 90% 70% at 12% 18%, rgba(43, 58, 245, 0.42), transparent 55%),
    radial-gradient(ellipse 70% 60% at 88% 22%, rgba(139, 47, 214, 0.38), transparent 52%),
    radial-gradient(ellipse 80% 55% at 50% 98%, rgba(255, 106, 61, 0.3), transparent 58%);
}

body.ea-shader-page,
body.cr-body--auth,
body.cr-body--dash {
  background-color: #05060f;
  background-image:
    radial-gradient(ellipse 90% 70% at 12% 18%, rgba(43, 58, 245, 0.42), transparent 55%),
    radial-gradient(ellipse 70% 60% at 88% 22%, rgba(139, 47, 214, 0.38), transparent 52%),
    radial-gradient(ellipse 80% 55% at 50% 98%, rgba(255, 106, 61, 0.3), transparent 58%);
}

body.ea-shader-page > *:not(#ea-page-shader):not(.premium-hero--page) {
  position: relative;
  z-index: 1;
}

.ea-premium-bg--animated {
  background-size: 100% 100%, 100% 100%, 100% 100%, 400% 400%;
  animation: ea-premium-bg-drift 28s ease infinite;
}

@keyframes ea-premium-bg-drift {
  0%, 100% { background-position: 0% 0%, 0% 0%, 0% 0%, 0% 50%; }
  50% { background-position: 0% 0%, 0% 0%, 0% 0%, 100% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .ea-premium-bg--animated {
    animation: none;
    background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100%;
  }
}

.ea-premium-card {
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow: var(--ea-premium-shadow-lg);
}

/* Botones premium */
.premium-btn,
.cr-btn-primary:not(.cr-btn-outline),
.cr-btn-publish,
.adm-btn--primary,
.adm-btn--pagar,
.adm-login-btn,
.ea-login-btn,
#page-token .btn-primary,
#page-register .btn-primary,
#page-login .btn-primary,
#page-dashboard .btn-primary,
.btn-primary.ea-premium-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: #fff !important;
  border: none;
  background: linear-gradient(
    120deg,
    #2b3af5 0%,
    #8b2fd6 33%,
    #ff6a3d 66%,
    #2b3af5 100%
  ) !important;
  background-size: 250% 100% !important;
  animation: ea-premium-btn-shift 6s ease infinite;
  box-shadow:
    0 10px 32px rgba(43, 58, 245, 0.35),
    0 4px 16px rgba(139, 47, 214, 0.25) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

.premium-btn::before,
.cr-btn-primary:not(.cr-btn-outline)::before,
.cr-btn-publish::before,
.adm-btn--primary::before,
.adm-btn--pagar::before,
.adm-login-btn::before,
.ea-login-btn::before,
#page-token .btn-primary::before,
#page-register .btn-primary::before,
#page-login .btn-primary::before,
#page-dashboard .btn-primary::before,
.btn-primary.ea-premium-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -120%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.42) 48%,
    transparent 100%
  );
  transform: skewX(-18deg);
  animation: ea-premium-btn-shine 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

.premium-btn:hover:not(:disabled),
.cr-btn-primary:not(.cr-btn-outline):hover:not(:disabled),
.cr-btn-publish:hover:not(:disabled),
.adm-btn--primary:hover:not(:disabled),
.adm-btn--pagar:hover:not(:disabled),
.adm-login-btn:hover:not(:disabled),
.ea-login-btn:hover:not(:disabled),
#page-token .btn-primary:hover:not(:disabled),
#page-register .btn-primary:hover:not(:disabled),
#page-login .btn-primary:hover:not(:disabled),
#page-dashboard .btn-primary:hover:not(:disabled),
.btn-primary.ea-premium-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 16px 40px rgba(43, 58, 245, 0.45),
    0 8px 24px rgba(255, 106, 61, 0.3) !important;
}

@keyframes ea-premium-btn-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes ea-premium-btn-shine {
  0%, 72%, 100% { left: -120%; }
  78% { left: 140%; }
}

@media (prefers-reduced-motion: reduce) {
  .premium-btn,
  .cr-btn-primary:not(.cr-btn-outline),
  .cr-btn-publish,
  .adm-btn--primary,
  .adm-btn--pagar,
  .adm-login-btn,
  .ea-login-btn,
  #page-token .btn-primary,
  #page-register .btn-primary,
  #page-login .btn-primary,
  #page-dashboard .btn-primary,
  .btn-primary.ea-premium-btn {
    animation: none;
    background: linear-gradient(120deg, #2b3af5, #8b2fd6, #ff6a3d) !important;
    background-size: 100% 100% !important;
  }
  .premium-btn::before,
  .cr-btn-primary:not(.cr-btn-outline)::before,
  .cr-btn-publish::before,
  .adm-btn--primary::before,
  .adm-btn--pagar::before,
  .adm-login-btn::before,
  .ea-login-btn::before,
  #page-token .btn-primary::before,
  #page-register .btn-primary::before,
  #page-login .btn-primary::before,
  #page-dashboard .btn-primary::before,
  .btn-primary.ea-premium-btn::before {
    animation: none;
    display: none;
  }
}