/* ECOMMER · fondos y efectos (aurora, rejilla, malla, grano) · sin imágenes pesadas */
:root{--fx-or:255,106,0;--fx-pu:124,58,237;--fx-pk:236,72,153}

/* Logo (bolsa 3D): naranja = ecommer.es oficial (plataforma) · morado = web de cursos */
.logo .lg{height:38px;width:auto;margin-top:-2px;filter:drop-shadow(0 4px 14px rgba(var(--fx-or),.55))}
.cursos .logo .lg{filter:drop-shadow(0 4px 14px rgba(var(--fx-pu),.6))}
.logo .bag{display:none}

/* Capa base para cualquier sección con fondo */
.fx{position:relative;isolation:isolate;overflow:hidden}
.fx>.fx-layer{position:absolute;inset:0;z-index:-1;pointer-events:none}
.fx canvas.aurora{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:.9}

/* Aurora CSS (respaldo sin JS y para móvil) */
.fx-aurora{background:
  radial-gradient(55% 45% at 82% 18%,rgba(var(--fx-pu),.55),transparent 70%),
  radial-gradient(50% 40% at 8% 6%,rgba(var(--fx-or),.28),transparent 72%),
  radial-gradient(70% 38% at 60% 112%,rgba(var(--fx-or),.38),transparent 70%),
  linear-gradient(180deg,#07070a,#0b0714 60%,#07070a)}
.fx-aurora:after{content:"";position:absolute;inset:-20%;background:
  conic-gradient(from 210deg at 70% 30%,transparent 0 30%,rgba(var(--fx-pu),.20) 38%,transparent 48%,rgba(var(--fx-or),.16) 70%,transparent 80%);
  filter:blur(60px);animation:fx-spin 38s linear infinite}
@keyframes fx-spin{to{transform:rotate(360deg)}}

/* Rejilla en perspectiva con horizonte */
.fx-grid{background:linear-gradient(180deg,#07070a 0,#07070a 46%,#0d0716 100%);perspective:520px;overflow:hidden}
.fx-grid:before{content:"";position:absolute;left:-50%;right:-50%;top:46%;bottom:-40%;
  background-image:linear-gradient(rgba(var(--fx-pu),.55) 1px,transparent 1px),linear-gradient(90deg,rgba(var(--fx-pu),.55) 1px,transparent 1px);
  background-size:64px 64px;transform:rotateX(62deg);transform-origin:50% 0;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 85%);mask-image:linear-gradient(180deg,#000,transparent 85%);
  animation:fx-run 3.2s linear infinite}
@keyframes fx-run{to{background-position:0 64px}}
.fx-grid:after{content:"";position:absolute;left:0;right:0;top:46%;height:2px;
  background:linear-gradient(90deg,transparent,rgb(var(--fx-pu)),rgb(var(--fx-or)),transparent);
  box-shadow:0 0 28px 6px rgba(var(--fx-or),.45),0 0 90px 24px rgba(var(--fx-pu),.35)}

/* Malla de color (tarjetas) */
.fx-mesh1{background:radial-gradient(70% 90% at 12% 10%,rgba(var(--fx-or),.8),transparent 60%),radial-gradient(60% 70% at 95% 20%,rgba(var(--fx-pk),.55),transparent 62%),radial-gradient(80% 80% at 60% 120%,rgba(60,10,70,.9),transparent 60%),#12060a}
.fx-mesh2{background:radial-gradient(70% 90% at 90% 0%,rgba(var(--fx-pu),.85),transparent 60%),radial-gradient(60% 70% at 5% 90%,rgba(30,40,170,.7),transparent 62%),radial-gradient(50% 50% at 70% 100%,rgba(var(--fx-pk),.45),transparent 60%),#0a0714}
.fx-mesh3{background:radial-gradient(70% 90% at 10% 100%,rgba(var(--fx-or),.7),transparent 60%),radial-gradient(70% 80% at 85% 5%,rgba(var(--fx-pu),.8),transparent 60%),radial-gradient(40% 40% at 50% 50%,rgba(var(--fx-pk),.35),transparent 70%),#0c0612}

/* Estelas de luz */
.fx-streaks{background:linear-gradient(180deg,#07070a,#0b0612)}
.fx-streaks:before,.fx-streaks:after{content:"";position:absolute;left:-20%;width:140%;height:3px;border-radius:9px;filter:blur(1px);
  background:linear-gradient(90deg,transparent,rgba(var(--fx-pu),.95),rgba(var(--fx-or),.95),transparent);
  box-shadow:0 0 30px 6px rgba(var(--fx-or),.4);animation:fx-sweep 9s ease-in-out infinite}
.fx-streaks:before{top:62%;transform:rotate(-8deg)}
.fx-streaks:after{top:74%;transform:rotate(-5deg);animation-delay:-4.5s;opacity:.7}
@keyframes fx-sweep{50%{transform:translateX(6%) rotate(-6deg);opacity:.5}}

/* Topografía sutil (SVG inline en data-uri generado por JS no hace falta: líneas repetidas) */
.fx-topo{background:repeating-radial-gradient(ellipse at 90% 0%,transparent 0 22px,rgba(255,170,60,.07) 23px 24px),linear-gradient(180deg,#08060b,#0b0712)}

/* Grano (SVG feTurbulence) y viñeta */
.fx-grain:after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.07;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.fx-vig{box-shadow:inset 0 0 220px 60px rgba(0,0,0,.65)}

/* Tarjetas de cristal */
.glass{background:linear-gradient(160deg,rgba(255,255,255,.07),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.1);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-radius:18px;box-shadow:0 20px 60px -20px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.08)}

@media(prefers-reduced-motion:reduce){.fx-aurora:after,.fx-grid:before,.fx-streaks:before,.fx-streaks:after{animation:none}}