/* Fondo vivo Lopri: auroras + líneas de energía, fijo detrás de todo */
html{background:#eaf2ff}
body{background:transparent!important}
.fx-bg{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:linear-gradient(165deg,#dfeaff 0%,#f4f8ff 38%,#e6f1ff 70%,#d9e8ff 100%)}
.fx-bg i{position:absolute;border-radius:50%;will-change:transform}
.fx-bg .b1{width:70vmax;height:70vmax;left:-22vmax;top:-26vmax;background:radial-gradient(circle,rgba(47,107,255,.55) 0,rgba(47,107,255,.18) 38%,transparent 66%);animation:fxa 26s ease-in-out infinite alternate;translate:0 calc(var(--sy,0)*-.06px)}
.fx-bg .b2{width:62vmax;height:62vmax;right:-20vmax;top:8vh;background:radial-gradient(circle,rgba(32,196,255,.5) 0,rgba(32,196,255,.16) 40%,transparent 66%);animation:fxb 30s ease-in-out infinite alternate;translate:0 calc(var(--sy,0)*-.1px)}
.fx-bg .b3{width:58vmax;height:58vmax;left:18vw;bottom:-30vmax;background:radial-gradient(circle,rgba(123,97,255,.42) 0,rgba(123,97,255,.12) 42%,transparent 66%);animation:fxc 34s ease-in-out infinite alternate;translate:0 calc(var(--sy,0)*-.04px)}
.fx-bg .b4{width:40vmax;height:40vmax;left:50vw;top:30vh;background:radial-gradient(circle,rgba(0,214,170,.28) 0,transparent 64%);animation:fxd 24s ease-in-out infinite alternate}
@keyframes fxa{to{transform:translate(18vw,14vh) scale(1.15)}}
@keyframes fxb{to{transform:translate(-22vw,22vh) scale(.9)}}
@keyframes fxc{to{transform:translate(-14vw,-18vh) scale(1.2)}}
@keyframes fxd{to{transform:translate(-30vw,-10vh) scale(1.3)}}
.fx-bg svg{position:absolute;left:-5%;width:110%;height:100%;top:0;opacity:.9}
.fx-bg svg path{fill:none;stroke-linecap:round}
.fx-bg .wl{stroke:url(#fxG);stroke-width:1.4;opacity:.38}
.fx-bg .wp{stroke:#fff;stroke-width:2.6;opacity:.95;stroke-dasharray:90 1400;animation:fxflow 9s linear infinite;filter:drop-shadow(0 0 6px #6fd3ff)}
.fx-bg .wp:nth-of-type(2n){animation-duration:12s;animation-delay:-4s}
.fx-bg .wp:nth-of-type(3n){animation-duration:15s;animation-delay:-8s}
@keyframes fxflow{from{stroke-dashoffset:1490}to{stroke-dashoffset:0}}
.fx-bg .wg{animation:fxdrift 18s ease-in-out infinite alternate;transform-origin:center}
@keyframes fxdrift{to{transform:translateY(-3%) scaleY(1.06)}}
.fx-bg .grid{position:absolute;inset:0;background-image:radial-gradient(rgba(29,111,224,.16) 1px,transparent 1.4px);background-size:26px 26px;-webkit-mask-image:radial-gradient(120% 80% at 50% 30%,#000 30%,transparent 80%);mask-image:radial-gradient(120% 80% at 50% 30%,#000 30%,transparent 80%)}
.fx-bg .spark{position:absolute;width:3px;height:3px;border-radius:50%;background:#fff;box-shadow:0 0 10px 3px rgba(111,211,255,.8);animation:fxtw 4s ease-in-out infinite}
@keyframes fxtw{0%,100%{opacity:0;transform:scale(.4)}50%{opacity:1;transform:scale(1)}}
/* secciones sin cortes: dejan ver el fondo */
.tint{background:transparent!important}
/* bandas oscuras de orilla a orilla */
.al-band,.gx-wrap{margin-left:0!important;margin-right:0!important;border-radius:0!important}
@media (prefers-reduced-motion:reduce){.fx-bg *{animation:none!important}}
/* Logo Lopri 3D */
.logo3d{display:inline-block;position:relative;width:var(--s,48px);height:var(--s,48px);perspective:700px;flex:none;vertical-align:middle}
.logo3d .coin{position:absolute;inset:0;transform-style:preserve-3d;animation:lg3 11s cubic-bezier(.45,.05,.25,1) infinite}
.logo3d:hover .coin{animation-duration:3.5s}
.logo3d .coin img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;max-width:none!important;margin:0!important;border-radius:50%;object-fit:contain;background:#fff;backface-visibility:hidden;-webkit-backface-visibility:hidden;transform:translateZ(3px);box-shadow:none!important;padding:0!important}
.logo3d .coin img.lg-back{transform:rotateY(180deg) translateZ(3px)}
.logo3d .coin i{position:absolute;inset:0;border-radius:50%;background:linear-gradient(90deg,#082c78,#5ab0ff 50%,#082c78);transform:translateZ(var(--z))}
.logo3d::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.85) 50%,transparent 62%);background-size:260% 100%;mix-blend-mode:screen;animation:lgshine 5.5s ease-in-out infinite;z-index:2}
.logo3d::before{content:"";position:absolute;inset:-5px;border-radius:50%;border:1.5px solid rgba(56,200,255,.55);box-shadow:0 0 14px rgba(56,200,255,.5),inset 0 0 10px rgba(56,200,255,.3);animation:lghalo 3s ease-in-out infinite;pointer-events:none}
.logo3d .orb{position:absolute;inset:-7px;border-radius:50%;animation:lgorb 4s linear infinite;pointer-events:none;z-index:3}
.logo3d .orb::after{content:"";position:absolute;top:-2px;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#fff;box-shadow:0 0 8px 3px #38c8ff}
@keyframes lg3{0%{transform:rotateY(-18deg) rotateX(6deg)}28%{transform:rotateY(18deg) rotateX(-5deg)}52%{transform:rotateY(-10deg) rotateX(3deg)}68%{transform:rotateY(0) rotateX(0)}84%{transform:rotateY(360deg) rotateX(0)}100%{transform:rotateY(342deg) rotateX(6deg)}}
@keyframes lgshine{0%,55%{background-position:120% 0}85%,100%{background-position:-60% 0}}
@keyframes lghalo{50%{transform:scale(1.08);opacity:.55}}
@keyframes lgorb{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.logo3d .coin,.logo3d::after,.logo3d::before,.logo3d .orb{animation:none}}