.fade-up {
  opacity: 0;
  animation: fadeUp 0.6s ease forwards;
}

@keyframes fadeUp {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.hero-gradient {
  background: linear-gradient(135deg, #7743f0, #a8d8ea, #9c8fa8);
}

.card-diseno {
  break-inside: avoid;
  margin-bottom: 1.5rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.bubble {
  position: absolute;
  bottom: -50px;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  animation: rise calc(var(--i) * 1s) linear infinite;
  left: calc(var(--i) * 5%);
}

@keyframes rise {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.5;
  }

  50% {
    transform: translateY(-150px) scale(1.2);
    opacity: 0.7;
  }

  100% {
    transform: translateY(-300px) scale(1);
    opacity: 0;
  }
}

img {
  background-color: #f3f4f6;
}