/* ═══════════════════════════════════════════════════════════════════
   VURA GLOBAL · efectos de todo el sitio (se carga en todas las páginas)
   1) puntero suave: flecha con resorte que gira hacia donde se mueve
   2) cambio de tema: el tema nuevo se abre en círculo desde el botón
   3) botón principal (.btn-primary): brillo que recorre el borde
   4) .vx-arcoiris: botón con borde en los colores del logo
   5) .vx-beam: haz de luz que recorre el borde de una tarjeta
   ═══════════════════════════════════════════════════════════════════ */

/* ─── 1 · Puntero ─────────────────────────────────────────────────── */
/* Solo con .vx-cur-on (lo pone el JS en equipos con mouse). En campos de
   texto vuelve el cursor del sistema para que se vea dónde se escribe. */
html.vx-cur-on, html.vx-cur-on *:not(input):not(textarea):not(select):not([contenteditable="true"]) { cursor: none !important; }
html.vx-cur-on input[type="button"], html.vx-cur-on input[type="submit"],
html.vx-cur-on input[type="checkbox"], html.vx-cur-on input[type="radio"] { cursor: none !important; }
.vx-cur {
  position: fixed; left: 0; top: 0; z-index: 2147483647;
  width: 32px; height: 32px; margin: -16px 0 0 -16px;
  pointer-events: none; opacity: 0; transition: opacity .2s ease;
  will-change: transform;
}
.vx-cur.vx-visible { opacity: 1; }
.vx-cur svg {
  display: block; width: 100%; height: 100%; overflow: visible;
  transition: transform .2s cubic-bezier(.4,0,.2,1);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.28));
}
.vx-cur.vx-link svg { transform: scale(1.18); }
.vx-cur.vx-press svg { transform: scale(.84); }
.vx-cur .vx-f { fill: #0b0b10; stroke: #fff; transition: fill .2s; }
[data-theme="dark"] .vx-cur .vx-f { fill: #fff; stroke: #0b0b10; }
.vx-cur.vx-link .vx-f { fill: #4f46e5; stroke: #fff; }
[data-theme="dark"] .vx-cur.vx-link .vx-f { fill: #a5b4fc; stroke: #0b0b10; }

/* ─── 2 · Cambio de tema en círculo ───────────────────────────────── */
/* El JS usa la View Transitions API; sin soporte cambia instantáneo como antes. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

/* ─── 3 · Botón principal con brillo en el borde ──────────────────── */
/* Un cono de luz gira detrás y una capa del color del botón lo tapa salvo
   un borde de 1,5 px: se ve una chispa que recorre el perímetro. */
.btn-primary { position: relative; isolation: isolate; overflow: hidden; }
.btn-primary::before {
  content: ''; position: absolute; z-index: -2; left: 50%; top: 50%;
  width: max(260%, 240px); aspect-ratio: 1; translate: -50% -50%;
  background: conic-gradient(from 0deg, transparent 0deg 262deg, rgba(255,255,255,.15) 292deg, rgba(255,255,255,.95) 350deg, transparent 360deg);
  animation: vx-giro 3s linear infinite;
}
.btn-primary::after {
  content: ''; position: absolute; z-index: -1; inset: 1.5px;
  border-radius: calc(var(--r-sm, 8px) - 1.5px);
  background: inherit;
  box-shadow: inset 0 -8px 12px rgba(255,255,255,.13);
}
@keyframes vx-giro { to { rotate: 360deg; } }

/* ─── 4 · Botón arcoíris con los colores del logo ─────────────────── */
.vx-arcoiris {
  border: 1.5px solid transparent !important;
  background:
    linear-gradient(var(--indigo-cta, #4f46e5), var(--indigo-cta, #4f46e5)) padding-box,
    linear-gradient(90deg, #f09060, #d87878, #9048a8, #6030c0, #818cf8, #f09060) border-box !important;
  background-size: 100% 100%, 200% 100% !important;
  box-shadow: 0 10px 26px -10px rgba(240,144,96,.6), 0 10px 30px -12px rgba(96,48,192,.7) !important;
  animation: vx-arcoiris 3.2s linear infinite;
}
.vx-arcoiris:hover { filter: brightness(1.12); }
@keyframes vx-arcoiris { to { background-position: 0 0, 200% 0; } }

/* ─── 5 · Haz de luz en el borde de una tarjeta ───────────────────── */
/* <span class="vx-beam" aria-hidden="true"></span> como primer hijo de una
   tarjeta con position: relative. */
@property --vx-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.vx-beam {
  position: absolute; inset: 0; border-radius: inherit; padding: 1.5px;
  pointer-events: none;
  background: conic-gradient(from var(--vx-ang), transparent 0deg 285deg, #f09060 325deg, #c7d2fe 350deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: vx-beam 6s linear infinite;
}
@keyframes vx-beam { to { --vx-ang: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .btn-primary::before, .vx-beam { display: none; }
  .vx-arcoiris { animation: none; }
}

/* ─── 6 · Menú de vidrio esmerilado (todas las páginas, día y noche) ── */
/* Fondo del color de la página al 55 % con desenfoque: se ve lo que pasa por
   detrás y los links se leen igual. La portada del home lo deja 100 %
   transparente mientras está sobre el video (body.fx-nav-sobre, vura-fx.css). */
body:not(.fx-nav-sobre) > nav {
  background: color-mix(in srgb, var(--bg) 55%, transparent) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.5) !important;
  backdrop-filter: blur(18px) saturate(1.5) !important;
  border-bottom-color: transparent !important;
  box-shadow: none !important;
}