/* ==========================================================================
   EFECTOS GLOBALES — Adexyon Premium
   Grano de fondo, barra de progreso, partículas y brillos reutilizables.
   Pensado para ser ligero: solo CSS + un canvas puntual, sin librerías.
   ========================================================================== */

/* --- Grano/textura sutil sobre todo el sitio (look "premium film grain") --- */
.adx-noise {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
}

/* --- Barra de progreso de lectura, arriba del todo --- */
.adx-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  z-index: 10001;
  background: var(--gradient-accent);
  box-shadow: 0 0 12px rgba(241, 198, 172, 0.6);
  transition: width 0.1s linear;
}
@media (prefers-reduced-motion: reduce) {
  .adx-scroll-progress { transition: none; }
}

/* --- Canvas de partículas: flotan suavemente detrás del contenido --- */
.adx-particles {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}

/* --- Orbes de luz decorativos reutilizables (más allá del hero) --- */
.adx-glow-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  will-change: transform;
}
.adx-glow-orb--copper {
  background: radial-gradient(circle, rgba(241,198,172,0.5), rgba(201,130,95,0.15) 60%, transparent 75%);
}
.adx-glow-orb--slate {
  background: radial-gradient(circle, rgba(143,151,179,0.4), rgba(75,81,100,0.12) 60%, transparent 75%);
}

/* --- Divisores de sección con línea metálica luminosa --- */
.adx-divider-glow {
  height: 1px;
  width: 100%;
  background: linear-gradient(90deg, transparent, var(--color-accent-light), var(--color-accent-2), transparent);
  opacity: 0.5;
}

/* --- Puntos brillantes decorativos tipo "estrellas" (usados con JS opcional) --- */
.adx-sparkle {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-accent-light);
  box-shadow: 0 0 6px 1px rgba(241,198,172,0.8);
  animation: adx-twinkle 2.6s ease-in-out infinite;
}
@keyframes adx-twinkle {
  0%, 100% { opacity: 0.2; transform: scale(0.8); }
  50% { opacity: 1; transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
  .adx-sparkle { animation: none; opacity: 0.6; }
}

/* --- Logo de marca: aplica un halo cobrizo sutil al hacer hover --- */
.adx-brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}
.adx-brand-logo img {
  filter: drop-shadow(0 0 14px rgba(201,130,95,0.35));
  transition: filter var(--duration-medium) var(--ease-smooth), transform var(--duration-medium) var(--ease-smooth);
}
.adx-brand-logo:hover img {
  filter: drop-shadow(0 0 22px rgba(241,198,172,0.55));
  transform: translateY(-1px);
}
.adx-brand-logo__icon {
  height: 38px;
  width: auto;
}
.adx-brand-logo__wordmark {
  height: 16px;
  width: auto;
  margin-top: 2px;
}
.adx-brand-logo--icon img {
  height: 40px;
  width: auto;
}
@media (max-width: 420px) {
  .adx-brand-logo__wordmark { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .adx-glow-orb { animation: none !important; }
}