/* Hero Section Premium */
.hero-premium {
  background: linear-gradient(180deg, #000000 0%, #0a0a0a 50%, #111111 100%);
  position: relative;
  overflow: hidden;
}

.hero-premium::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(
      ellipse at 50% 0%,
      rgba(120, 119, 198, 0.12) 0%,
      transparent 50%
    ),
    radial-gradient(
      ellipse at 80% 50%,
      rgba(59, 130, 246, 0.08) 0%,
      transparent 40%
    );
  pointer-events: none;
}

/* Title with gradient animation */
.hero-premium .display-3 {
  color: #ffffff;
  animation: fadeInUp 0.8s ease-out;
}

.btn-solicitar-demo {
  animation: floatImage 6s ease-in-out infinite;
}

.hero-premium .text-gradient {
  background: linear-gradient(135deg, #0abf53 0%, #764ba2 50%, #f5061a 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 6s ease infinite;
}

@keyframes gradientShift {
  0%,
  100% {
    background-position: 0% center;
  }
  50% {
    background-position: 100% center;
  }
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Subtitle styling */
.hero-premium .fs-3 {
  color: rgba(255, 255, 255, 0.75);
  animation: fadeInUp 0.8s ease-out 0.2s both;
}

/* Demo button with subtle glow animation */
.hero-premium .btn-primary {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border: none;
  box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
  transition: all 0.3s ease;
  animation:
    fadeInUp 0.8s ease-out 0.4s both,
    pulseGlow 3s ease-in-out infinite 1.2s;
}

.hero-premium .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 30px rgba(102, 126, 234, 0.6);
  background: linear-gradient(135deg, #7b8eef 0%, #8a5db0 100%);
}

@keyframes pulseGlow {
  0%,
  100% {
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.4);
  }
  50% {
    box-shadow: 0 4px 30px rgba(102, 126, 234, 0.6);
  }
}

/* Secondary button */
.hero-premium .btn-ghost-dark {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
  animation: fadeInUp 0.8s ease-out 0.5s both;
}

.hero-premium .btn-ghost-dark:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

/* Image with subtle float animation */
.hero-premium .hero-image-wrapper {
  animation: fadeInUp 0.8s ease-out 0.3s both;
}

.hero-premium .hero-image-wrapper .img-fluid {
  animation: floatImage 6s ease-in-out infinite;
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
}

@keyframes floatImage {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Floating media cards */
.hero-premium .media-card {
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

.hero-premium .media-card.bg-primary {
  background: linear-gradient(
    135deg,
    rgba(102, 126, 234, 0.9) 0%,
    rgba(118, 75, 162, 0.9) 100%
  ) !important;
}

.hero-premium .media-card.bg-warning {
  background: linear-gradient(
    135deg,
    rgba(251, 191, 36, 0.95) 0%,
    rgba(246, 149, 3, 0.95) 100%
  ) !important;
}

/* Icon Blocks Section Premium */
.icon-blocks-premium {
  background: linear-gradient(180deg, #111111 0%, #0a0a0a 100%);
  padding: 60px 0;
  position: relative;
}

.icon-blocks-premium::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
}

.icon-blocks-premium .text-center h5 {
  color: #ffffff;
}

.icon-blocks-premium .text-center span {
  color: rgba(255, 255, 255, 0.6);
}

.icon-blocks-premium .bi {
  color: #a78bfa !important;
}

.bg-elegant {
  background-color: #111e2d;
}

/* Efecto holográfico de brillo */
@keyframes holoShine {
  0% {
    transform: rotate(-45deg) translateY(-100%);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: rotate(-45deg) translateY(100%);
    opacity: 0;
  }
}

/* Contenedor de imagen con efecto */
.hero-image-wrapper .position-relative:first-child {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
}

.hero-image-wrapper .position-relative:first-child::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    0deg,
    transparent,
    transparent 30%,
    rgba(255, 255, 255, 0.4)
  );
  transform: rotate(-45deg) translateY(-100%);
  z-index: 10;
  pointer-events: none;
  animation: holoShine 1.5s ease-out 0.5s forwards;
}

/* Efecto en el título */
.hero-premium .display-4 {
  position: relative;
  overflow: hidden;
  display: inline-block;
}

.hero-premium .display-4::before {
  content: "";
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(
    0deg,
    transparent,
    transparent 30%,
    rgba(255, 255, 255, 0.6)
  );
  transform: rotate(-45deg) translateY(-100%);
  z-index: 1;
  pointer-events: none;
  animation: holoShine 1.2s ease-out 0.3s forwards;
}