/* Budget Xperience · capa de movimiento en la línea DNT Experiencia.
   Solo visual: se carga después de pox.css / pox-app.css y no cambia ninguna regla de negocio. */
:root{
  --dnt-azul:#3D8EF2; --dnt-champagne:#C9B98D; --dnt-negro:#03060C;
  --ease-cine:cubic-bezier(.33,0,.2,1); --ease-suave:cubic-bezier(.42,0,.58,1);
}

/* ───────── Intro: la X nebulosa ───────── */
.bux-intro{position:fixed;inset:0;z-index:9999;background:var(--dnt-negro);overflow:hidden;color:#E7EDF6;font-family:Inter,sans-serif;cursor:pointer}
.bux-intro .ix-visual{position:absolute;inset:0;opacity:0}
.bux-intro .ix-x,.bux-intro .ix-echo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% center;transform-origin:68% 48%;will-change:transform,filter}
.bux-intro .ix-echo{opacity:0;mix-blend-mode:screen;clip-path:polygon(0 43%,100% 43%,100% 44%,0 44%)}
.bux-intro .ix-glow{position:absolute;left:72%;top:44%;width:46vmax;height:46vmax;margin:-23vmax 0 0 -23vmax;border-radius:50%;opacity:0;pointer-events:none;
  background:radial-gradient(circle,rgba(61,142,242,.38) 0%,rgba(201,185,141,.12) 32%,transparent 66%);filter:blur(10px);mix-blend-mode:screen}
.bux-intro .ix-veil{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,transparent 25%,var(--dnt-negro) 92%)}
.bux-intro .ix-grain{position:absolute;inset:-50%;opacity:.05;pointer-events:none;
  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 baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:ix-grain 1.2s steps(4) infinite}
.bux-intro .ix-scan{position:absolute;left:0;right:0;top:50%;height:1px;opacity:0;background:linear-gradient(90deg,transparent,var(--dnt-azul),transparent);box-shadow:0 0 24px var(--dnt-azul)}
.bux-intro .ix-sign{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;text-align:center}
.bux-intro .ix-sign>*{opacity:0}
.ix-welcome{font-family:Sora,sans-serif;font-weight:300;font-size:18px;letter-spacing:.5em;padding-left:.5em;text-transform:uppercase;color:#AAB7CB}
.ix-mark{font-family:Sora,sans-serif;font-size:clamp(44px,7vw,88px);font-weight:300;line-height:1;letter-spacing:-.01em;text-shadow:0 6px 40px rgba(61,142,242,.35)}
.ix-mark b{font-weight:600}
.ix-mark i{font-style:normal;color:var(--dnt-azul)}
.ix-line{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.32em;color:#8392AA;text-transform:uppercase}
.ix-load{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:14px;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;color:#8392AA}
.ix-track{display:block;width:160px;height:1px;background:rgba(150,175,215,.18);overflow:hidden}
.ix-track>span{display:block;height:100%;background:var(--dnt-azul);box-shadow:0 0 10px var(--dnt-azul);transform:scaleX(0);transform-origin:left}
.ix-skip{position:absolute;right:28px;bottom:24px;font-size:11px;letter-spacing:.12em;color:#8392AA;opacity:0;text-transform:uppercase}

.bux-intro.go .ix-scan{animation:ix-scan 1.6s cubic-bezier(.65,0,.35,1) .2s both}
.bux-intro.go .ix-visual{animation:ix-form 3.2s var(--ease-cine) .6s both}
.bux-intro.go .ix-x{animation:ix-breathe 12s var(--ease-suave) infinite,ix-focus 9s ease-in-out infinite}
.bux-intro.go .ix-echo{animation:ix-fracture 9s linear 1.8s infinite}
.bux-intro.go .ix-glow{animation:ix-glow-in 3.4s var(--ease-cine) 1.2s both,ix-pulse 6s var(--ease-suave) 4.6s infinite}
.bux-intro.go .ix-welcome{animation:ix-dissolve 2.6s var(--ease-cine) .8s both}
.bux-intro.go .ix-mark{animation:ix-mark 2.8s var(--ease-cine) 1.7s both}
.bux-intro.go .ix-line{animation:ix-dissolve 2.2s var(--ease-cine) 2.7s both}
.bux-intro.go .ix-load{animation:ix-soft 1s ease-out 3.2s both}
.bux-intro.go .ix-track>span{animation:ix-progress 2.6s var(--ease-suave) 3.3s forwards}
.bux-intro.go .ix-skip{animation:ix-soft 1s ease-out 2s forwards}
.bux-intro.out{animation:ix-depart 1.8s var(--ease-suave) both;pointer-events:none}
.bux-intro.out .ix-sign{animation:ix-lift 1.2s ease-in both}
.bux-intro.out .ix-visual{animation:ix-push 1.8s var(--ease-suave) both}

@keyframes ix-grain{0%{transform:translate(0,0)}25%{transform:translate(-5%,3%)}50%{transform:translate(4%,-4%)}75%{transform:translate(-3%,-2%)}100%{transform:translate(0,0)}}
@keyframes ix-scan{0%{opacity:0;transform:scaleX(0)}40%{opacity:1;transform:scaleX(1)}100%{opacity:0;transform:scaleX(1)}}
@keyframes ix-form{from{opacity:0;filter:blur(24px) brightness(1.6);transform:scale(1.08)}to{opacity:.92;filter:blur(0) brightness(1);transform:scale(1)}}
@keyframes ix-breathe{0%,100%{transform:translate3d(-8px,5px,0) rotate(-3deg) scale(1.13)}50%{transform:translate3d(10px,-7px,0) rotate(3deg) scale(1.19)}}
@keyframes ix-focus{0%,30%,65%,100%{filter:blur(0)}47%{filter:blur(2.5px)}}
@keyframes ix-fracture{0%,86%,100%{opacity:0;transform:translateX(0)}88%{opacity:.7;transform:translateX(-14px)}91%{opacity:.4;transform:translateX(9px);clip-path:polygon(0 61%,100% 61%,100% 62.5%,0 62.5%)}94%{opacity:0}}
@keyframes ix-glow-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes ix-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.65;transform:scale(1.08)}}
@keyframes ix-dissolve{from{opacity:0;filter:blur(12px);letter-spacing:.9em}to{opacity:1;filter:blur(0)}}
@keyframes ix-mark{from{opacity:0;filter:blur(14px);transform:scale(1.04)}to{opacity:1;filter:blur(0);transform:scale(1)}}
@keyframes ix-soft{to{opacity:1}}
@keyframes ix-progress{to{transform:scaleX(1)}}
@keyframes ix-lift{to{opacity:0;filter:blur(10px);transform:translateY(-14px)}}
@keyframes ix-push{to{opacity:0;transform:scale(1.25);filter:blur(8px) brightness(1.4)}}
@keyframes ix-depart{0%,35%{opacity:1}100%{opacity:0;visibility:hidden}}

/* ───────── Atmósfera interior ───────── */
.bux-ambient{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.bux-ambient img{position:absolute;right:-12vw;top:-8vh;width:78vw;height:auto;opacity:.10;mix-blend-mode:screen;filter:saturate(.8);
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 65% 45%,#000 30%,transparent 75%);mask-image:radial-gradient(ellipse 60% 60% at 65% 45%,#000 30%,transparent 75%);
  transform-origin:70% 45%;animation:amb-drift 38s var(--ease-suave) infinite alternate}
.bux-ambient::after{content:"";position:absolute;right:8vw;top:18vh;width:40vmax;height:40vmax;border-radius:50%;
  background:radial-gradient(circle,rgba(61,142,242,.10),transparent 65%);animation:amb-pulse 14s var(--ease-suave) infinite}
[data-theme="light"] .bux-ambient img{opacity:.05;mix-blend-mode:multiply;filter:invert(1) saturate(.4)}
.app{position:relative;z-index:1}
@keyframes amb-drift{from{transform:translate3d(0,0,0) rotate(-2deg) scale(1)}to{transform:translate3d(-30px,20px,0) rotate(2deg) scale(1.06)}}
@keyframes amb-pulse{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}

/* Línea de luz bajo la barra superior */
.topbar{position:relative}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent 0%,var(--dnt-azul) 45%,var(--dnt-champagne) 55%,transparent 100%);
  background-size:200% 100%;opacity:.55;animation:line-sweep 9s linear infinite}
@keyframes line-sweep{from{background-position:100% 0}to{background-position:-100% 0}}

/* Marca: respiración del ícono */
.brand-mark{animation:mark-breathe 6s var(--ease-suave) infinite}
@keyframes mark-breathe{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 8px rgba(61,142,242,.55))}}

/* Entradas escalonadas (las activa pox-motion.js) */
.mo-in{opacity:0;transform:translateY(14px);filter:blur(6px)}
.mo-in.mo-on{opacity:1;transform:none;filter:none;transition:opacity .9s var(--ease-cine),transform 1.1s var(--ease-cine),filter .9s var(--ease-cine);transition-delay:var(--d,0ms)}

/* Barras y líneas que se dibujan */
.mo-armed .vz-fill{transform:scaleX(0);transform-origin:left}
.mo-armed.mo-on .vz-fill{transform:scaleX(1);transition:transform 1.6s var(--ease-cine);transition-delay:calc(var(--d,0ms) + 250ms)}
.mo-armed .vz-mark{opacity:0}
.mo-armed.mo-on .vz-mark{opacity:1;transition:opacity .6s ease calc(var(--d,0ms) + 1.4s)}
.spark .sp-line{stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400)}
.mo-on .spark .sp-line{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--ease-cine) .5s}
.spark .sp-area{opacity:0}.mo-on .spark .sp-area{opacity:1;transition:opacity 1.2s ease 1.2s}
.spark .sp-dot{opacity:0}.mo-on .spark .sp-dot{opacity:1;animation:dot-pulse 2.8s var(--ease-suave) 2.2s infinite;transition:opacity .4s ease 2s}
@keyframes dot-pulse{0%,100%{filter:drop-shadow(0 0 0 transparent)}50%{filter:drop-shadow(0 0 6px var(--dnt-azul))}}

/* Tarjetas: luz que sigue al cursor y elevación sutil */
.stat,.card,.tile{position:relative;transition:transform .5s var(--ease-cine),border-color .5s ease,box-shadow .5s ease}
.stat::before,.card::before,.tile::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),rgba(61,142,242,.10),transparent 45%)}
.stat:hover::before,.card:hover::before,.tile:hover::before{opacity:1}
.stat:hover,.tile:hover{transform:translateY(-3px);box-shadow:0 18px 50px -20px rgba(61,142,242,.35)}
.card:hover{box-shadow:0 24px 70px -30px rgba(61,142,242,.30)}

/* Navegación lateral: indicador con brillo */
.rail a{transition:color .35s ease,background-color .35s ease}
.rail a[aria-current="page"] svg{filter:drop-shadow(0 0 6px rgba(61,142,242,.7))}
.rail a:not([aria-current]):hover svg{transform:translateY(-1px);transition:transform .35s var(--ease-cine)}

/* Títulos con revelado de luz */
.page-head h1{background:linear-gradient(100deg,currentColor 40%,var(--dnt-champagne) 50%,currentColor 60%);background-size:250% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:title-shine 2.8s var(--ease-cine) .6s both}
@keyframes title-shine{from{background-position:100% 0}to{background-position:0 0}}

/* Pantalla de acceso con la X detrás */
.login-wrap{position:relative;overflow:hidden}
.login-wrap .bux-ambient{position:absolute}
.login-wrap .bux-ambient img{opacity:.5;right:-20vw;top:-15vh;width:100vw}
.login-card{position:relative;z-index:1;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.login-logo{animation:mark-breathe 6s var(--ease-suave) infinite}

@media (prefers-reduced-motion:reduce){
  .bux-intro{display:none!important}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .mo-in{opacity:1;transform:none;filter:none}
  .mo-armed .vz-fill{transform:none}.mo-armed .vz-mark,.spark .sp-area,.spark .sp-dot{opacity:1}.spark .sp-line{stroke-dashoffset:0}
}

/* Impresión (hoja de la oportunidad, Ctrl+P): todo visible y sin atmósfera */
@media print{ .mo-in{opacity:1!important;transform:none!important;filter:none!important} .bux-ambient,.bux-intro{display:none!important} }