/* ===== FX PACK v16 — dinamismo premium (compartido por ambas páginas) ===== */
/* plata cepillada que reacciona al cursor */
.light{
  background:
    radial-gradient(520px circle at var(--mx,50%) var(--my,18%), rgba(255,255,255,.7), transparent 62%),
    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='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .14 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, rgba(255,255,255,.34) 0 1px, rgba(0,0,0,.018) 1px 2px, transparent 2px 4px),
    radial-gradient(60% 55% at 14% 0%, rgba(255,255,255,.95), transparent 70%),
    radial-gradient(45% 50% at 96% 100%, rgba(109,40,217,.13), transparent 70%),
    linear-gradient(135deg,#f7f8fa 0%,#d8dbe3 42%,#eef0f3 68%,#c4c8d2 100%);
}
/* brillo que cruza los botones principales */
.btn-solid::before{content:''; position:absolute; top:0; left:-130%; width:55%; height:100%; transform:skewX(-20deg); pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); transition:left .8s var(--ease);}
.btn-solid:hover::before{left:150%;}
/* flotación suave de piezas 3D */
@keyframes floaty{0%,100%{translate:0 0;} 50%{translate:0 -9px;}}
.logo-plate{animation:floaty 8s ease-in-out infinite;}
.plaque:nth-child(1){animation:floaty 7s ease-in-out infinite;} .plaque:nth-child(2){animation:floaty 7s ease-in-out -3.5s infinite;}
.mk-card:nth-child(2){animation:floaty 9s ease-in-out -2s infinite;}
/* navegación por capítulos */
.chapters{position:fixed; right:1.1rem; top:50%; transform:translateY(-50%); z-index:450; display:flex; flex-direction:column; gap:.7rem; mix-blend-mode:difference;}
.chapters a{position:relative; width:7px; height:7px; border-radius:7px; background:rgba(255,255,255,.5); transition:height .35s var(--ease), background .3s;}
.chapters a.on{height:28px; background:#fff;}
.chapters a span{position:absolute; right:18px; top:50%; transform:translateY(-50%) translateX(8px); opacity:0; white-space:nowrap; font-family:var(--display); font-weight:500; font-size:.55rem; letter-spacing:.16em; color:#fff; transition:opacity .25s, transform .25s; pointer-events:none;}
.chapters a:hover span, .chapters a.on span{opacity:1; transform:translateY(-50%);}
.chapters a.on span{opacity:.0;}
.chapters a:hover span{opacity:1;}
@media (max-width:1000px){ .chapters{display:none;} }
/* hero con profundidad */
.hero-xghost{position:absolute; z-index:-1; right:-16%; top:50%; width:min(58vw,780px); max-width:none; translate:var(--gx,0px) calc(-50% + var(--gy,0px)); opacity:.11; mix-blend-mode:screen; pointer-events:none; animation:ghostSpin 40s ease-in-out infinite alternate;}
@keyframes ghostSpin{from{rotate:-6deg; scale:1;} to{rotate:6deg; scale:1.06;}}
.hero-ambient{translate:var(--ax,0px) var(--ay,0px);}
.video-frame{transform:perspective(1200px) rotateY(var(--vy,0deg)) rotateX(var(--vx,0deg)); transition:transform .25s ease-out;}
.video-frame-wrap:hover .video-frame{transform:perspective(1200px) rotateY(var(--vy,0deg)) rotateX(var(--vx,0deg)) translateY(-4px) scale(1.02);}
.hero-title .no, .hero-title .yes{display:block; animation:lineUp 1.1s var(--ease) 1.75s both;}
.hero-title .yes{animation-delay:1.95s;}
@keyframes lineUp{from{transform:translateY(105%); opacity:0;} to{transform:none; opacity:1;}}
@media (max-width:900px){ .hero-xghost{width:90vw; right:-30%; opacity:.14;} }