/* ============================================
   Estilos Globales Personalizados (Complemento a Tailwind CSS)
============================================ */

/* Importamos la fuente Poppins si no se carga globalmente o para asegurar overrides */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

body {
  /* Antialiasing para mejor renderizado de fuentes */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Considerar un color de fondo de fallback si Tailwind no carga */
  background-color: #0D1117; /* Corresponde a ai-dark-bg */
}

/* Estilos para la barra de scroll (opcional, pero puede mejorar la estética) */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: #161B22; /* Corresponde a ai-card-bg */
}

::-webkit-scrollbar-thumb {
  background: #58A6FF; /* Corresponde a ai-primary */
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #1F6FEB; /* Corresponde a ai-secondary */
}

/* Animación de "glow" para texto (si se usa fuera de la config de Tailwind) */
/* La hemos definido en tailwind.config, pero podría estar aquí si se prefiere CSS puro */
/*
.animate-glow {
  animation: glow 2s ease-in-out infinite alternate;
}

@keyframes glow {
  from {
    text-shadow: 0 0 5px theme('colors.ai-primary'),
                 0 0 10px theme('colors.ai-primary'),
                 0 0 15px theme('colors.ai-secondary');
  }
  to {
    text-shadow: 0 0 10px theme('colors.ai-primary'),
                 0 0 15px theme('colors.ai-secondary'),
                 0 0 20px theme('colors.ai-secondary');
  }
}
*/

/* Efecto glassmorphism si se necesita de forma personalizada y no con clases de Tailwind */
/*
.glassmorphism-custom {
  background: rgba(22, 27, 34, 0.8); // Similar a ai-card-bg con transparencia
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid #30363D; // Similar a ai-border
}
*/

/* Clases para animaciones de entrada con GSAP (si se prefiere controlarlas desde CSS) */
.gsap-fade-in {
  opacity: 0;
}

.gsap-fade-in-up {
  opacity: 0;
  transform: translateY(20px);
}

/* Estilo para el header cuando hace scroll (se manejará con JS y clases de Tailwind) */
#main-header.scrolled {
  background-color: rgba(13, 17, 23, 0.85); /* ai-dark-bg con opacidad */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Placeholder para estilos de componentes muy específicos que no se cubran con Tailwind */
/* Ejemplo: Estilos complejos para un gráfico SVG interactivo */

/* Animación de gradiente para el botón principal */
.gradient-button {
  position: relative;
  overflow: hidden;
}

.gradient-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #0066CC, #00CCFF, #FFD700);
  transition: left 0.5s ease-in-out;
  z-index: 1;
}

.gradient-button:hover::before {
  left: 0;
}

.gradient-button span {
  position: relative;
  z-index: 10;
}

/* Animación de gradiente para botones de servicios (alternativa) */
.gradient-button-alt {
  position: relative;
  overflow: hidden;
}

.gradient-button-alt::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #79C0FF, #FFD700); /* Gradiente Cian a Dorado */
  transition: left 0.5s ease-in-out;
  z-index: 1;
}

.gradient-button-alt:hover::before {
  left: 0;
}

/* Animación de gradiente para botones de servicios */
.gradient-slide-button {
  position: relative;
  background: #79C0FF; /* Color azul inicial */
  transition: background 0.3s ease-in-out;
}

.gradient-slide-button:hover {
  background: linear-gradient(90deg, #79C0FF, #FFD700); /* Gradiente azul a dorado al hover */
}

.gradient-slide-button span {
  position: relative;
  z-index: 2;
}

/* Utilidades adicionales para efectos de gradiente en botones */
@layer utilities {
  .bg-\[length\:200\%\] {
    background-size: 200% auto;
  }
  .bg-left {
    background-position: left center;
  }
  .group-hover\:bg-\[position\:100\%_center\]:hover {
    background-position: 100% center;
  }
  .transition-\[background-position\] {
    transition-property: background-position;
  }
}

/* Estilo para el borde con gradiente en las tarjetas de agentes IA */
#agentes-por-sector .group:hover {
  border-color: transparent;
  background-image: linear-gradient(var(--tw-gradient-stops));
  --tw-gradient-from: #161B22;
  --tw-gradient-to: #161B22;
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
  background-origin: border-box;
  border-image: linear-gradient(to right, var(--tw-gradient-from), var(--tw-gradient-to));
  --tw-gradient-from: #58A6FF;
  --tw-gradient-to: #79C0FF;
  border-image-slice: 1;
}


/* Animación de pulso y salto para llamar la atención */
@keyframes pulse-jump {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(88, 166, 255, 0.7);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 0 20px 10px rgba(88, 166, 255, 0);
  }
}

.animate-pulse-jump {
  animation: pulse-jump 2.5s infinite;
  border-radius: 0.75rem; /* Corresponde a rounded-xl para que el shadow se vea bien */
}

/* Fin de estilos personalizados */