/* Home Digital — capa visual "nueva interfaz" para tienda, cuenta, contacto y páginas legales.
   Solo AGREGA efectos encima de style.css (aurora, haces de luz, red de nodos, borde con luz giratoria,
   punto de luz del cursor). No cambia tamaños, colores de marca ni estructura de ninguna página.
   Se activa con js/nuevo.js, que inserta las capas decorativas. */

@property --nxa { syntax: "<angle>"; initial-value: 0deg; inherits: false; }

/* ---------- capas decorativas fijas (detrás del contenido) ---------- */
.nx-fx { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.nx-aurora {
  position: absolute; inset: -20%;
  background:
    radial-gradient(40% 35% at 30% 28%, rgba(102,58,243,.16), transparent 70%),
    radial-gradient(35% 30% at 72% 38%, rgba(5,167,199,.11), transparent 70%),
    radial-gradient(40% 30% at 50% 82%, rgba(95,185,140,.08), transparent 70%);
  filter: blur(40px);
  animation: nx-aurora 26s ease-in-out infinite alternate;
}
@keyframes nx-aurora {
  0% { transform: translate3d(-4%, -2%, 0) scale(1); }
  50% { transform: translate3d(4%, 3%, 0) scale(1.08); }
  100% { transform: translate3d(-2%, 4%, 0) scale(1.02); }
}
.nx-beams { position: absolute; left: 50%; top: 0; width: 0; height: 100vh; opacity: .8; }
.nx-beam {
  position: absolute; top: -10%; width: 520px; height: 900px; margin-left: -260px;
  background: conic-gradient(from 180deg at 50% 0%, transparent 168deg, rgba(102,58,243,.10) 180deg, transparent 192deg);
  filter: blur(10px); mix-blend-mode: screen; transform-origin: 50% 0;
  -webkit-mask-image: linear-gradient(to bottom, #000 30%, transparent 85%); mask-image: linear-gradient(to bottom, #000 30%, transparent 85%);
  animation: nx-beam-o 6s linear infinite alternate, nx-beam-s 8.5s linear infinite alternate;
}
.nx-beam:nth-child(2) { margin-left: -460px; rotate: 14deg; animation-delay: -3s, -3s; }
.nx-beam:nth-child(3) { margin-left: -60px; rotate: -14deg; animation-delay: -6s, -6s; }
@keyframes nx-beam-o { from { opacity: .45; } to { opacity: 1; } }
@keyframes nx-beam-s { from { scale: 1; } to { scale: 1.12 1.05; } }
.nx-net { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .3; }
[data-tema="claro"] .nx-aurora { opacity: .5; }
[data-tema="claro"] .nx-beams { opacity: .35; mix-blend-mode: multiply; }
[data-tema="claro"] .nx-net { opacity: .22; }

/* ---------- borde con luz que recorre las tarjetas de vidrio ---------- */
.glass-card:not(.is-agotado)::after, .tier-card::after, .route-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--nxa), transparent 0deg, #b9a4ff 30deg, #98c0ef 55deg, transparent 100deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
  animation: nx-ring 12s linear infinite, nx-pulse 3s ease-in-out infinite alternate;
}
.glass-card:nth-of-type(2n)::after { animation-delay: -4s, -1s; }
.glass-card:nth-of-type(3n)::after { animation-delay: -7s, -2s; }
.glass-card:nth-of-type(5n)::after { animation-delay: -9.5s, -.5s; }
@keyframes nx-ring { to { --nxa: 360deg; } }
@keyframes nx-pulse { from { opacity: .3; } to { opacity: .95; } }
[data-tema="claro"] .glass-card::after { opacity: .6; }

/* ---------- punto de luz que sigue al mouse (solo escritorio) ---------- */
.nx-dot {
  position: fixed; left: 0; top: 0; z-index: 99; width: 10px; height: 10px; border-radius: 50%; pointer-events: none;
  background: #b9a4ff; box-shadow: 0 0 16px 4px rgba(185,164,255,.55); mix-blend-mode: screen; transform: translate3d(-100px,-100px,0);
}
[data-tema="claro"] .nx-dot { mix-blend-mode: normal; background: #663af3; box-shadow: 0 0 14px 3px rgba(102,58,243,.4); }
@media (hover: none), (pointer: coarse) { .nx-dot { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .nx-aurora, .nx-beam, .glass-card::after, .tier-card::after, .route-card::after { animation: none !important; }
  .nx-dot { display: none; }
}

/* ---------- tienda: filtro de disponibilidad ---------- */
.disp-filtro { width: 100%; max-width: 1600px; margin: 0 auto; box-sizing: border-box; padding: 0 72px 14px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; position: relative; }
.disp-btn { border-radius: 999px; padding: 8px 16px; font-family: 'Inter', sans-serif; font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid rgba(var(--tinte),0.16); background: rgba(var(--tinte),0.04); color: var(--texto-2); transition: background 140ms ease, color 140ms ease, border-color 140ms ease; }
.disp-btn:hover { background: rgba(var(--tinte),0.1); }
.disp-btn.is-active { background: rgba(102,58,243,0.22); border-color: rgba(185,164,255,0.55); color: var(--texto-fuerte); }
.disp-n { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--enlace); margin-left: 4px; }
.disp-n:empty { display: none; }
[data-tema="claro"] .disp-btn.is-active { background: rgba(102,58,243,0.12); border-color: rgba(102,58,243,0.5); }
@media (max-width: 900px) { .disp-filtro { padding-left: 32px; padding-right: 32px; } }
@media (max-width: 600px) { .disp-filtro { padding-left: 20px; padding-right: 20px; } }