/* ===== Burbujas decorativas (glassmorphism) — global ===== */
.deco-bubbles {
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  position: absolute;
  z-index: 0;
}
.deco-bubbles span {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 50%;
  display: block;
  position: absolute;
  animation: bubbleFloat 14s ease-in-out infinite;
}
.deco-bubbles span:nth-child(1) {
  width: 220px; height: 220px; top: 8%; left: -60px;
  background: radial-gradient(circle at 30% 30%, rgba(106, 76, 147, 0.18), rgba(106, 76, 147, 0.05));
  border: 1px solid rgba(106, 76, 147, 0.12);
  animation-delay: 0s;
}
.deco-bubbles span:nth-child(2) {
  width: 140px; height: 140px; top: 30%; right: -40px;
  background: radial-gradient(circle at 30% 30%, rgba(164, 180, 148, 0.22), rgba(164, 180, 148, 0.05));
  border: 1px solid rgba(164, 180, 148, 0.15);
  animation-delay: -3s;
}
.deco-bubbles span:nth-child(3) {
  width: 90px; height: 90px; top: 65%; left: 8%;
  background: radial-gradient(circle at 30% 30%, rgba(245, 166, 35, 0.18), rgba(245, 166, 35, 0.04));
  border: 1px solid rgba(245, 166, 35, 0.12);
  animation-delay: -6s;
}
.deco-bubbles span:nth-child(4) {
  width: 180px; height: 180px; bottom: 5%; right: 6%;
  background: radial-gradient(circle at 30% 30%, rgba(106, 76, 147, 0.14), rgba(106, 76, 147, 0.03));
  border: 1px solid rgba(106, 76, 147, 0.10);
  animation-delay: -9s;
}
.deco-bubbles span:nth-child(5) {
  width: 60px; height: 60px; top: 18%; left: 42%;
  background: radial-gradient(circle at 30% 30%, rgba(102, 126, 234, 0.20), rgba(102, 126, 234, 0.04));
  border: 1px solid rgba(102, 126, 234, 0.12);
  animation-delay: -2s;
}
.deco-bubbles span:nth-child(6) {
  width: 110px; height: 110px; bottom: 18%; left: 38%;
  background: radial-gradient(circle at 30% 30%, rgba(164, 180, 148, 0.18), rgba(164, 180, 148, 0.04));
  border: 1px solid rgba(164, 180, 148, 0.12);
  animation-delay: -7s;
}

@keyframes bubbleFloat {
  0%, 100% { transform: translateY(0) translateX(0) scale(1); }
  33%      { transform: translateY(-30px) translateX(15px) scale(1.05); }
  66%      { transform: translateY(20px) translateX(-15px) scale(0.95); }
}

/* Asegura que el contenido quede por encima */
section.has-bubbles { position: relative; overflow: hidden; }
section.has-bubbles > .container,
section.has-bubbles > .container-fluid { position: relative; z-index: 2; }

@media (max-width: 768px) {
  .deco-bubbles span:nth-child(1) { width: 140px; height: 140px; }
  .deco-bubbles span:nth-child(2) { width: 90px; height: 90px; }
  .deco-bubbles span:nth-child(4) { width: 120px; height: 120px; }
}

/* Respeta accesibilidad */
@media (prefers-reduced-motion: reduce) {
  .deco-bubbles span { animation: none; }
}