/* ============================================================
   premium.css — Capa de experiencia "award-ready"
   Aurora · grano · cursor glow · spotlight · magnetic · kinetic
   Se carga al final: refina sin romper el sistema base.
   ============================================================ */

/* ---------- Selección y scrollbar ---------- */
::selection { background: rgba(37,99,255,.85); color: #fff; }
* { scrollbar-width: thin; scrollbar-color: var(--color-blue) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: linear-gradient(var(--color-blue), var(--color-cyan)); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }

/* ---------- Capas de fondo globales ---------- */
.fx-aurora {
  position: fixed; inset: -25%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(38% 38% at 18% 22%, rgba(37,99,255,.22), transparent 60%),
    radial-gradient(36% 36% at 82% 12%, rgba(34,211,238,.20), transparent 60%),
    radial-gradient(48% 48% at 65% 88%, rgba(37,99,255,.16), transparent 60%),
    radial-gradient(30% 30% at 40% 60%, rgba(34,211,238,.12), transparent 60%);
  filter: blur(44px);
  animation: auroraMove 22s ease-in-out infinite;
}
@keyframes auroraMove {
  0%,100% { transform: translate3d(0,0,0) scale(1); }
  33%     { transform: translate3d(2%, -2%, 0) scale(1.08); }
  66%     { transform: translate3d(-2%, 2%, 0) scale(1.04); }
}

.fx-grain {
  position: fixed; inset: 0; z-index: 9990; pointer-events: none; opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.fx-cursor {
  position: fixed; top: 0; left: 0; width: 30px; height: 30px; margin: -15px 0 0 -15px;
  border-radius: 50%; pointer-events: none; z-index: 9998; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(34,211,238,.55), rgba(37,99,255,.28) 55%, transparent 70%);
  opacity: 0; transition: opacity .3s ease, width .2s ease, height .2s ease;
}
.fx-cursor.is-on { opacity: 1; }
@media (pointer: coarse) { .fx-cursor { display: none; } }

/* ---------- Texto con gradiente animado ---------- */
.grad, .grad-cyan { background-size: 220% 220%; animation: gradShift 6s ease infinite; }
@keyframes gradShift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* ---------- HERO kinético ---------- */
.hero__bg { transform: translate3d(var(--px,0), var(--py,0), 0); transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.hero__bg .orbit--1 { animation: floatA 16s ease-in-out infinite; }
.hero__bg .orbit--2 { animation: floatB 12s ease-in-out infinite; }
.hero__bg .orbit__glow { animation: glowPulse 7s ease-in-out infinite; }
@keyframes floatA { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-16px,18px); } }
@keyframes floatB { 0%,100% { transform: translate(0,0); } 50% { transform: translate(14px,-12px); } }
@keyframes glowPulse { 0%,100% { opacity:.7; transform: scale(1); } 50% { opacity:1; transform: scale(1.12); } }

.hero__title { animation: heroIn 1s var(--ease) both; }
.hero__portrait { animation: heroIn 1.1s var(--ease) .1s both; }
@keyframes heroIn { from { opacity:0; transform: translateY(24px) scale(.98); filter: blur(8px); } to { opacity:1; transform:none; filter:none; } }
/* Anillo cónico girando detrás del retrato */
.hero__portrait::before {
  content:""; position:absolute; inset:-2px; border-radius: inherit; z-index:0;
  background: conic-gradient(from 0deg, transparent, rgba(34,211,238,.5), transparent 30%, rgba(37,99,255,.5), transparent 60%);
  animation: spin 8s linear infinite; opacity:.6;
}
.hero__portrait > * { position: relative; z-index: 1; }

/* ---------- Secciones oscuras inmersivas (blobs vivos) ---------- */
.metrics, .system, .cta-final, .diag__card { position: relative; overflow: hidden; }
.metrics::before, .system::before, .cta-final::before, .diag__card::before {
  content:""; position:absolute; width: 60%; height: 160%; top: -30%; left: -10%; z-index: 0; pointer-events: none;
  background: radial-gradient(circle at 30% 40%, rgba(37,99,255,.35), transparent 55%),
              radial-gradient(circle at 70% 60%, rgba(34,211,238,.22), transparent 55%);
  filter: blur(40px); animation: blobDrift 18s ease-in-out infinite;
}
.cta-final::before { left: auto; right: -10%; }
.metrics > *, .system > *, .cta-final > *, .diag__card > * { position: relative; z-index: 1; }
@keyframes blobDrift {
  0%,100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(18%, 10%) scale(1.15); }
}

/* ---------- Botones: barrido de luz + base magnética ---------- */
.btn { position: relative; overflow: hidden; will-change: transform; }
.btn::after {
  content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.4), transparent);
  transform: skewX(-20deg); transition: left .6s ease; pointer-events:none;
}
.btn:hover::after { left: 150%; }
.btn--primary, .btn--dark { box-shadow: 0 14px 40px rgba(37,99,255,.30), 0 0 0 1px rgba(34,211,238,.12) inset; }

/* ---------- Cards: spotlight que sigue al cursor + glow ---------- */
.card { position: relative; overflow: hidden; isolation: isolate; }
.card::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background: radial-gradient(440px circle at var(--mx,50%) var(--my,50%), rgba(37,99,255,.16), transparent 45%);
  transition: opacity .35s ease;
}
.card:hover::after { opacity: 1; }
.card > * { position: relative; z-index: 1; }
.card:hover { border-color: rgba(34,211,238,.5); box-shadow: 0 20px 55px rgba(11,29,58,.16), 0 0 0 1px rgba(34,211,238,.22); }
.card__icon { transition: transform .35s var(--ease), background .3s; }
.card:hover .card__icon { transform: translateY(-3px) scale(1.06); background: linear-gradient(135deg, rgba(37,99,255,.16), rgba(34,211,238,.16)); }

/* Nodos en sección oscura mantienen glow cian */
.system__pair .card::after { background: radial-gradient(440px circle at var(--mx,50%) var(--my,50%), rgba(34,211,238,.18), transparent 45%); }

/* ---------- Métricas: números con glow ---------- */
.metric__num { background: linear-gradient(180deg,#fff, #bcd2ff); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Reveal cinematográfico (sobrescribe motion.css) ---------- */
.reveal { opacity: 0; transform: translateY(32px) scale(.985); filter: blur(7px);
  transition: opacity .85s var(--ease), transform .85s var(--ease), filter .85s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; filter: none; }
.reveal--left { transform: translateX(-40px); } .reveal--left.is-visible { transform: none; }
.reveal--right { transform: translateX(40px); } .reveal--right.is-visible { transform: none; }

/* ---------- Transición de página con blur ---------- */
.view-fade-enter-active { transition: opacity .55s var(--ease), transform .55s var(--ease), filter .55s var(--ease); }
.view-fade-leave-active { transition: opacity .3s var(--ease), transform .3s var(--ease), filter .3s var(--ease); }
.view-fade-enter-from { opacity: 0; transform: translateY(22px) scale(.99); filter: blur(10px); }
.view-fade-leave-to { opacity: 0; transform: translateY(-12px); filter: blur(7px); }

/* ---------- Header glass refinado al hacer scroll ---------- */
.header.is-scrolled { background: rgba(255,255,255,.72); box-shadow: 0 8px 30px rgba(11,29,58,.08); }
.nav__cta { position: relative; overflow: hidden; }
.nav__cta::after { content:""; position:absolute; inset:0; background: linear-gradient(100deg, transparent, rgba(255,255,255,.25), transparent); transform: translateX(-120%); transition: transform .6s ease; }
.nav__cta:hover::after { transform: translateX(120%); }

/* ---------- Sticky CTA con halo ---------- */
.sticky-cta { box-shadow: 0 14px 40px rgba(37,99,255,.45), 0 0 0 1px rgba(34,211,238,.3); }
.sticky-cta::before { content:""; position:absolute; inset:-2px; border-radius:inherit; background: conic-gradient(from 0deg, transparent, rgba(34,211,238,.6), transparent 40%); animation: spin 5s linear infinite; z-index:-1; opacity:.5; }

/* ---------- Combobox con búsqueda ---------- */
.combo { position: relative; }
.combo__control { position: relative; }
.combo__input { width: 100%; padding: 14px 38px 14px 15px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff;
  font-family: inherit; font-size: .95rem; transition: border-color .2s, box-shadow .2s; }
.combo__input::placeholder { color: rgba(255,255,255,.45); }
.combo__input:focus { outline: none; border-color: var(--color-cyan); box-shadow: 0 0 0 3px rgba(34,211,238,.18); }
.combo__caret { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: rgba(255,255,255,.5); transition: transform .25s; }
.combo.is-open .combo__caret { transform: translateY(-50%) rotate(180deg); }
.combo__panel { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; right: 0; max-height: 260px; overflow: auto;
  background: #0c2143; border: 1px solid rgba(255,255,255,.14); border-radius: 14px; padding: 6px;
  box-shadow: 0 24px 60px rgba(0,0,0,.45); animation: comboIn .18s ease; }
@keyframes comboIn { from { opacity:0; transform: translateY(-6px); } to { opacity:1; transform:none; } }
.combo__opt { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 9px; cursor: pointer;
  color: rgba(255,255,255,.9); font-size: .95rem; transition: background .15s; }
.combo__opt:hover, .combo__opt.is-active { background: rgba(37,99,255,.28); }
.combo__opt.is-selected { color: var(--color-cyan); font-weight: 600; }
.combo__flag { font-size: 1.15rem; line-height: 1; }
.combo__empty { padding: 14px 12px; color: rgba(255,255,255,.5); font-size: .9rem; }

/* ---------- Respeto a reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .fx-aurora, .fx-grain, .fx-cursor, .hero__portrait::before, .sticky-cta::before,
  .metrics::before, .system::before, .cta-final::before, .diag__card::before { animation: none !important; }
  .grad, .grad-cyan { animation: none; }
  .reveal { filter: none; transform: none; }
}