/* =========================================================
   HERO BACKGROUND BLEND
   Igual al estilo del ejemplo: nube suave de color
========================================================= */

.hero-home{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: #fbfbfc;
}

.hero-home > .container{
  position: relative;
  z-index: 2;
}

/* única capa de color, sin elementos visibles */
.hero-bg-blend{
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* masa principal de color */
.hero-bg-blend::before{
  content: "";
  position: absolute;
  width: 980px;
  height: 860px;
  right: -140px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  opacity: .95;

  background:
    radial-gradient(circle at 62% 28%,
      rgba(201, 244, 222, .95) 0%,
      rgba(201, 244, 222, .68) 12%,
      rgba(201, 244, 222, .28) 24%,
      rgba(201, 244, 222, 0) 48%
    ),

    radial-gradient(circle at 68% 58%,
      rgba(153, 225, 255, .95) 0%,
      rgba(153, 225, 255, .72) 14%,
      rgba(153, 225, 255, .34) 28%,
      rgba(153, 225, 255, 0) 54%
    ),

    radial-gradient(circle at 38% 56%,
      rgba(221, 191, 255, .82) 0%,
      rgba(221, 191, 255, .54) 12%,
      rgba(221, 191, 255, .22) 24%,
      rgba(221, 191, 255, 0) 46%
    ),

    radial-gradient(circle at 52% 66%,
      rgba(185, 235, 255, .80) 0%,
      rgba(185, 235, 255, .42) 16%,
      rgba(185, 235, 255, 0) 40%
    ),

    radial-gradient(circle at 34% 46%,
      rgba(245, 210, 255, .52) 0%,
      rgba(245, 210, 255, .20) 16%,
      rgba(245, 210, 255, 0) 36%
    );

  filter: blur(78px) saturate(108%);
}

/* velo general muy sutil para lavar la mezcla */
.hero-bg-blend::after{
  content: "";
  position: absolute;
  width: 760px;
  height: 620px;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  opacity: .55;

  background:
    radial-gradient(circle at 50% 50%,
      rgba(255,255,255,.22) 0%,
      rgba(255,255,255,.10) 30%,
      rgba(255,255,255,0) 72%
    );

  filter: blur(60px);
}

/* tablet */
@media (max-width: 1199px){
  .hero-bg-blend::before{
    width: 820px;
    height: 740px;
    right: -170px;
    filter: blur(74px) saturate(106%);
  }

  .hero-bg-blend::after{
    width: 620px;
    height: 540px;
    right: 0;
  }
}

/* móvil */
@media (max-width: 991px){
  .hero-bg-blend::before{
    width: 620px;
    height: 560px;
    right: -180px;
    top: 180px;
    transform: none;
    opacity: .82;
    filter: blur(66px) saturate(104%);
  }

  .hero-bg-blend::after{
    width: 420px;
    height: 360px;
    right: -20px;
    top: 210px;
    transform: none;
    opacity: .42;
    filter: blur(52px);
  }
}

@media (max-width: 767px){
  .hero-bg-blend::before{
    width: 470px;
    height: 430px;
    right: -140px;
    top: 150px;
    opacity: .70;
    filter: blur(58px) saturate(102%);
  }

  .hero-bg-blend::after{
    width: 280px;
    height: 240px;
    right: -20px;
    top: 180px;
    opacity: .28;
    filter: blur(40px);
  }
}