/* Estilos personalizados de Yoltek que no se pueden lograr solo con utilidades de Tailwind */

.glass-card {
  background: rgba(25, 32, 45, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(133, 147, 153, 0.1);
}

.chat-bubble-shadow {
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.4);
}

/* Estado inicial de las secciones animadas al hacer scroll (ver js/main.js) */
.scroll-animate {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.scroll-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* ==========================================================================
   Estilos personalizados de Yoltek (Complemento a utilidades de Tailwind)
   ========================================================================== */

/* Tarjetas con efecto cristal (Glassmorphism) */
.glass-card {
  background: rgba(25, 32, 45, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(133, 147, 153, 0.15);
}

/* Sombra y resplandor para el botón flotante del chat */
.chat-bubble-shadow {
  box-shadow: 0 0 20px rgba(0, 210, 255, 0.4);
}

/* Configuración para íconos de Google Material Symbols */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Línea conectora animada/degradada para la sección de timeline/procesos */
.timeline-line::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom, #89ceff 0%, rgba(137, 206, 255, 0) 100%);
  transform: translateX(-50%);
}

/* Estado inicial de las secciones animadas al hacer scroll (main.js) */
.scroll-animate {
  opacity: 0;
  transform: translateY(2.5rem);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.scroll-animate.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Texto con degradado cyan neón */
.gradient-text {
  background: linear-gradient(135deg, #89ceff 0%, #0ea5e9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* Efecto de resplandor neón radial para la Hero Section */
.hero-gradient {
  background: radial-gradient(circle at 50% 50%, rgba(14, 165, 233, 0.15) 0%, transparent 70%);
}

/* Efecto cristal con soporte para coordenadas de mouse */
.glass {
  background: rgba(30, 41, 59, 0.4);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.1);
}