/* =========================================================
   BG WRAP — Fondo grande (HERO + CARACTERÍSTICAS)
   Archivo: css/bg-wrap.css
   OBJETIVO:
   - Imagen de fondo cubriendo todo el bloque
   - Un solo tono oscuro uniforme (sin 2 colores)
   - Luces futuristas suaves (sin cambiar el tono base)
   - Fade inferior para evitar “línea”/corte visual
   ========================================================= */

.bgWrap{
  position: relative;
  overflow: hidden;

  /* Fondo: solo imagen (la oscuridad la controla el overlay) */
  background: url("../assets/img/hero-bg.jpg") center / cover no-repeat;

  /* Fade inferior (transición suave al resto de la web) */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 92%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 92%, transparent 100%);
}

/* Overlay pro: un solo tono + luces suaves */
.bgWrap::before{
  content:"";
  position:absolute;
  inset:0;

  /* ✅ 1 solo tono base + “luces” futuristas */
  background:
    radial-gradient(900px 520px at 18% 0%, rgba(255,60,172,.16), transparent 60%),
    radial-gradient(900px 520px at 82% 20%, rgba(43,134,197,.12), transparent 60%),
    rgba(5,6,18,.72);

  /* Suaviza la imagen para que no compita con el texto */
  backdrop-filter: blur(10px);

  z-index: 0;
}

/* Grain sutil (opcional) */
.bgWrap::after{
  content:"";
  position:absolute;
  inset:0;
  opacity:.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  pointer-events:none;
  z-index: 0;
}

/* Contenido siempre arriba del overlay */
.bgWrap > *{
  position: relative;
  z-index: 1;
}