/**
 * Estilos Personalizados, Parallax y Micro-Animaciones
 * Dra. Karina Perez Muñante - Landing Page Odontológica
 */

@keyframes pulse-slow {
  0%, 100% {
    transform: scale(1);
    opacity: 1;
  }
  50% {
    transform: scale(1.04);
    opacity: 0.92;
  }
}

@keyframes float-subtle {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes float-reverse {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(8px);
  }
}

.animate-float {
  animation: float-subtle 4.5s ease-in-out infinite;
}

.animate-float-reverse {
  animation: float-reverse 5.5s ease-in-out infinite;
}

.animate-pulse-slow {
  animation: pulse-slow 3.5s ease-in-out infinite;
}

.glass-nav {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.hero-gradient {
  background: radial-gradient(circle at 15% 15%, rgba(249, 164, 209, 0.28) 0%, transparent 45%),
              radial-gradient(circle at 85% 75%, rgba(155, 139, 229, 0.3) 0%, transparent 50%),
              linear-gradient(180deg, #FFFFFF 0%, #FAF8FE 100%);
}

.footer-gradient {
  background: radial-gradient(circle at 50% 0%, rgba(244, 241, 253, 0.9) 0%, rgba(255, 247, 250, 0.7) 50%, #FFFFFF 100%);
}

/* Transiciones Parallax Suaves */
.parallax-element {
  will-change: transform;
  transition: transform 0.15s cubic-bezier(0.25, 1, 0.5, 1);
}

.card-hover-effect {
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.card-hover-effect:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -10px rgba(155, 139, 229, 0.22);
}

.tab-btn.active {
  background: linear-gradient(135deg, #7865D6 0%, #9B8BE5 100%);
  color: #FFFFFF;
  box-shadow: 0 8px 20px -4px rgba(120, 101, 214, 0.4);
}

.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: #9B8BE5;
  border-radius: 9999px;
}

/* Brillo Sutil Shimmer para Botones Principales de Conversión (IxD) */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}
.btn-shimmer::after {
  content: '';
  position: absolute;
  top: -50%;
  left: -60%;
  width: 40%;
  height: 200%;
  background: linear-gradient(
    60deg,
    rgba(255, 255, 255, 0) 20%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 80%
  );
  transform: rotate(25deg);
  animation: shimmer-sweep 4.5s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  pointer-events: none;
}

@keyframes shimmer-sweep {
  0% {
    left: -60%;
  }
  25%, 100% {
    left: 140%;
  }
}

/* Barra Superior de Progreso de Lectura */
#scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #7865D6 0%, #9B8BE5 50%, #F9A4D1 100%);
  z-index: 100;
  width: 0%;
  transition: width 0.1s ease-out;
  pointer-events: none;
}

/* Animación de pista para el comparador */
@keyframes hint-bounce {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-4px);
  }
}
.animate-hint-bounce {
  animation: hint-bounce 2s ease-in-out infinite;
}