.carousel-slide {
    transition: transform 0.5s ease-in-out;
  }
/* Efecto Fade-In */
.fade-in {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Activamos el efecto cuando el elemento está en vista */
.fade-in.visible {
opacity: 1;
transform: translateY(0);
}



* {
  margin: 0;
  padding: 0;
}

.section-con-onda {
  position: relative;
  width: 100%;
  height: 80vh; /* Mantiene la altura flexible */
  clip-path: url(#clip-onda);
  -webkit-clip-path: url(#clip-onda);
  overflow: hidden;
}

.section-con-onda img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.contenido {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 40;
  color: white;
}

.section-con-onda svg {
  z-index: 30;
}

.section-con-onda .bg-black {
  z-index: 10;
}

/* Asegura que el SVG se vea bien incluso al hacer zoom */
.section-con-onda svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%; /* O puedes usar h-auto si prefieres que se ajuste según el contenido */
  z-index: 30;
}

/* parte del loas redes socales al principio*/
@keyframes pulseGlow {
  0% {
    transform: scale(1);
    opacity: 0.7;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.8), 0 0 10px rgba(0, 255, 255, 0.6), 0 0 15px rgba(0, 255, 255, 0.4);
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.8), 0 0 20px rgba(0, 255, 255, 0.6), 0 0 30px rgba(0, 255, 255, 0.4);
  }
  100% {
    transform: scale(1);
    opacity: 0.7;
    text-shadow: 0 0 5px rgba(0, 255, 255, 0.8), 0 0 10px rgba(0, 255, 255, 0.6), 0 0 15px rgba(0, 255, 255, 0.4);
  }
}

/* Animación personalizada */
.animate-pulse-glow {
  animation: pulseGlow 1.5s infinite ease-in-out;
}

/* Animación personalizada para el logo */
@keyframes logoGlow {
  0% {
    transform: scale(1);
    opacity: 0.7;
    filter: brightness(1) drop-shadow(0 0 5px rgba(0, 255, 255, 0.8));
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
    filter: brightness(1.2) drop-shadow(0 0 15px rgba(0, 255, 255, 0.8));
  }
  100% {
    transform: scale(1);
    opacity: 0.7;
    filter: brightness(1) drop-shadow(0 0 5px rgba(0, 255, 255, 0.8));
  }
}

/* Aplicando la animación al logo */
.animate-logo-glow {
  animation: logoGlow 1.5s infinite ease-in-out;
}



/* parte del titulo de aqnimacion de mantenete informadoal dia */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.animate-fade-in-up {
  animation: fadeInUp 1s ease-out both;
}