/* ============================================
   ANIMACIONES Y MICRO-INTERACCIONES PREMIUM
   ============================================ */

/* Animación sutil del logo al cargar */
@keyframes logoAppear {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes logoGlow {
  0%, 100% {
    filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0));
  }
  50% {
    filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.1));
  }
}

#logo img {
  animation: logoAppear 1.2s ease-out, logoGlow 4s ease-in-out infinite;
  transition: transform 0.3s ease, filter 0.3s ease;
}

#logo img:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 25px rgba(255, 255, 255, 0.15));
}

/* Animación del tagline */
@keyframes slideUpFade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

#header p {
  animation: slideUpFade 1s ease-out 0.3s both;
}

/* Animación del botón CTA */
@keyframes buttonAppear {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.major .button {
  animation: buttonAppear 1s ease-out 0.6s both;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
}

.major .button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.6s ease;
}

.major .button:hover::before {
  left: 100%;
}

.major .button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Micro-interacciones en el menú de navegación */
#nav a {
  position: relative;
  transition: all 0.3s ease;
  padding: 8px 16px;
  border-radius: 6px;
}

#nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, #00bcd4, #008fb3);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

#nav a:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: translateY(-2px);
  backdrop-filter: blur(10px);
}

#nav a:hover::after {
  width: 80%;
}

/* Efecto parallax sutil para el contenido */
@keyframes parallaxFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.major {
  animation: parallaxFloat 6s ease-in-out infinite;
}

/* Animación de la barra de progreso */
@keyframes progressGlow {
  0%, 100% {
    box-shadow: 0 0 5px rgba(0, 188, 212, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(0, 188, 212, 0.6);
  }
}

.progress-bar, 
.carousel-progress {
  animation: progressGlow 3s ease-in-out infinite;
}

/* Efecto hover mejorado para botones */
.button {
  position: relative;
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.button::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.3) 0%, transparent 70%);
  transition: all 0.5s ease;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}

.button:hover::after {
  width: 300px;
  height: 300px;
}

/* Animación sutil para las tarjetas de servicios */
.service-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.service-icon {
  transition: all 0.3s ease;
}

.service-card:hover .service-icon {
  transform: scale(1.1) rotate(5deg);
}

/* Animación de entrada para secciones */
@keyframes sectionFadeIn {
  0% {
    opacity: 0;
    transform: translateY(50px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.wrapper {
  animation: sectionFadeIn 0.8s ease-out;
}

/* Efecto cursor personalizado para área interactiva */
.interactive-area {
  cursor: none;
}

.custom-cursor {
  position: fixed;
  width: 20px;
  height: 20px;
  background: rgba(0, 188, 212, 0.8);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition: transform 0.1s ease;
  mix-blend-mode: difference;
}

/* Animación de scroll suave personalizada */
html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Efecto de typing para el tagline */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

@keyframes blink {
  0%, 50% { border-color: transparent }
  51%, 100% { border-color: rgba(255, 255, 255, 0.7) }
}

.typing-effect {
  overflow: hidden;
  border-right: 2px solid rgba(255, 255, 255, 0.7);
  white-space: nowrap;
  margin: 0 auto;
  animation: typing 3s steps(40, end), blink 1s infinite;
}

/* Glow effect para elementos importantes */
.glow {
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
  }
  to {
    text-shadow: 0 0 20px rgba(0, 188, 212, 0.8), 0 0 30px rgba(0, 188, 212, 0.6);
  }
}

/* Efecto particle para el fondo (sutil) */
.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
}

.particle {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: float 15s infinite linear;
}

@keyframes float {
  0% {
    transform: translateY(100vh) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-10vh) translateX(100px);
    opacity: 0;
  }
}

/* Responsive para animaciones */
@media screen and (max-width: 768px) {
  .major {
    animation: none; /* Reducir animaciones en móvil */
  }
  
  #logo img {
    animation-duration: 0.8s;
  }
  
  .service-card:hover {
    transform: translateY(-4px);
  }
}