/* ═══════════════════════════════════════════════════════════
   Burbujas neumórficas decorativas en el fondo (7 blobs)
   Posiciones en píxeles fijos — no porcentajes.
   ═══════════════════════════════════════════════════════════ */
.deco-blobs {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.deco-blobs .blob {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 28% 24%,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.55) 8%,
      rgba(255, 255, 255, 0.15) 18%,
      var(--base) 36%,
      #DCE3EE 58%,
      #BAC4D2 85%,
      #98A4B8 100%
    );
  box-shadow:
    -20px -20px 40px rgba(255, 255, 255, 0.95),
     22px  22px 50px rgba(75, 95, 135, 0.50),
    -75px -75px 130px rgba(255, 255, 255, 0.80),
     80px  80px 150px rgba(75, 95, 135, 0.70),
     inset   0    2px   3px rgba(255, 255, 255, 1.0),
     inset   2px  0     3px rgba(255, 255, 255, 0.75),
     inset   0   -3px   4px rgba(75, 95, 135, 0.65),
     inset  -3px  0     4px rgba(75, 95, 135, 0.40),
     inset -28px -28px 52px rgba(75, 95, 135, 0.65),
     inset  16px  16px 34px rgba(255, 255, 255, 1.0);
}
.deco-blobs .blob.b1 {
  width: 520px; height: 520px;
  top: -200px; left: -180px;
  opacity: 0.95;
}
.deco-blobs .blob.b2 {
  width: 420px; height: 420px;
  bottom: -140px; right: -100px;
  opacity: 0.95;
}

/* Blob con tinte cálido — bordes brillantes ámbar */
.deco-blobs .blob.b4 {
  width: 300px; height: 300px;
  top: 90px; right: 380px;
  background:
    radial-gradient(
      circle at 28% 24%,
      rgba(255, 252, 245, 0.95) 0%,
      rgba(255, 248, 230, 0.55) 8%,
      rgba(255, 245, 220, 0.20) 18%,
      #F2E8DC 36%,
      #E5D4BE 60%,
      #C5A98A 88%,
      #A88869 100%
    );
  opacity: 0.85;
  box-shadow:
    -18px -18px 38px rgba(255, 245, 225, 0.90),
     20px  20px 48px rgba(150, 105, 65, 0.55),
    -55px -55px 110px rgba(255, 245, 225, 0.75),
     60px  60px 130px rgba(150, 105, 65, 0.65),
     inset   0    2px   3px rgba(255, 252, 245, 1.0),
     inset   2px  0     3px rgba(255, 252, 245, 0.75),
     inset   0   -3px   4px rgba(150, 105, 65, 0.65),
     inset  -3px  0     4px rgba(150, 105, 65, 0.40),
     inset -24px -24px 48px rgba(150, 105, 65, 0.60),
     inset  14px  14px 30px rgba(255, 252, 245, 1.0);
}

/* Blob con tinte frío — bordes brillantes azulados */
.deco-blobs .blob.b5 {
  width: 260px; height: 260px;
  bottom: 200px; left: 300px;
  background:
    radial-gradient(
      circle at 28% 24%,
      rgba(248, 252, 255, 0.95) 0%,
      rgba(238, 247, 255, 0.55) 8%,
      rgba(225, 240, 255, 0.20) 18%,
      #E1E8F5 36%,
      #C8D5E8 60%,
      #9CB0CF 88%,
      #7A92B6 100%
    );
  opacity: 0.85;
  box-shadow:
    -18px -18px 38px rgba(232, 244, 255, 0.90),
     20px  20px 48px rgba(60, 95, 155, 0.55),
    -55px -55px 110px rgba(232, 244, 255, 0.75),
     60px  60px 130px rgba(60, 95, 155, 0.65),
     inset   0    2px   3px rgba(248, 252, 255, 1.0),
     inset   2px  0     3px rgba(248, 252, 255, 0.75),
     inset   0   -3px   4px rgba(60, 95, 155, 0.65),
     inset  -3px  0     4px rgba(60, 95, 155, 0.40),
     inset -24px -24px 48px rgba(60, 95, 155, 0.60),
     inset  14px  14px 30px rgba(248, 252, 255, 1.0);
}

/* Anillos huecos: paredes inclinadas + filos brillantes */
.deco-blobs .ring {
  position: absolute;
  border-radius: 50%;
  background:
    radial-gradient(
      circle at 28% 24%,
      #98A4B8 0%,
      #BAC4D2 30%,
      #DCE3EE 65%,
      var(--base) 88%,
      rgba(255, 255, 255, 0.5) 100%
    );
  box-shadow:
    inset -32px -32px 56px rgba(255, 255, 255, 1.0),
    inset  32px  32px 56px rgba(75, 95, 135, 0.75),
    inset   0    3px  4px rgba(75, 95, 135, 0.60),
    inset   0   -3px  4px rgba(255, 255, 255, 0.85),
    inset   3px  0    4px rgba(75, 95, 135, 0.40),
    inset  -3px  0    4px rgba(255, 255, 255, 0.55);
}
.deco-blobs .ring.r1 {
  width: 360px; height: 360px;
  top: 110px; right: -140px;
  opacity: 0.90;
}
.deco-blobs .ring.r2 {
  width: 180px; height: 180px;
  bottom: 320px; right: 240px;
  opacity: 0.80;
}

/* Pill rotada con bordes brillantes */
.deco-blobs .pill {
  position: absolute;
  border-radius: 80px;
  background:
    linear-gradient(135deg,
      rgba(255, 255, 255, 0.95) 0%,
      rgba(255, 255, 255, 0.45) 6%,
      rgba(255, 255, 255, 0.15) 14%,
      var(--base) 32%,
      #DCE3EE 62%,
      #BAC4D2 88%,
      #98A4B8 100%
    );
  box-shadow:
    -18px -18px 38px rgba(255, 255, 255, 0.95),
     20px  20px 48px rgba(75, 95, 135, 0.55),
    -55px -55px 110px rgba(255, 255, 255, 0.80),
     60px  60px 120px rgba(75, 95, 135, 0.65),
     inset   0    2px   3px rgba(255, 255, 255, 1.0),
     inset   2px  0     3px rgba(255, 255, 255, 0.75),
     inset   0   -3px   4px rgba(75, 95, 135, 0.65),
     inset  -3px  0     4px rgba(75, 95, 135, 0.40),
     inset -20px -20px 40px rgba(75, 95, 135, 0.60),
     inset  12px  12px 26px rgba(255, 255, 255, 1.0);
}
.deco-blobs .pill.p1 {
  width: 280px; height: 140px;
  top: 380px; left: -90px;
  transform: rotate(-25deg);
  opacity: 0.85;
}
.deco-blobs .pill.p2 {
  width: 340px; height: 130px;
  top: 580px; left: 520px;
  transform: rotate(35deg);
  opacity: 0.75;
}