/* Smart Growth IA — estilos y animaciones complementarios a Tailwind */

html {
  scroll-behavior: smooth;
}

body {
  overflow-x: hidden;
}

section[id] {
  scroll-margin-top: 90px;
}

[x-cloak] { display: none !important; }

/* Mueve el badge de reCAPTCHA a la esquina inferior izquierda para que no
   se encime con el widget del agente web (der.). El aviso de términos de
   Google ya se muestra como texto junto al formulario de contacto, así
   que este reacomodo sigue cumpliendo sus lineamientos. */
.grecaptcha-badge {
  right: auto !important;
  left: 4px !important;
}

/* Header con sombra al hacer scroll */
#site-header.is-scrolled {
  box-shadow: 0 8px 30px -12px rgba(10, 31, 68, 0.18);
  border-bottom-color: rgba(10, 31, 68, 0.06);
}

/* ---------- Glow / blob backgrounds ---------- */
.bg-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(70px);
  opacity: 0.35;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Hero floating cards ---------- */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
.animate-floaty {
  animation: floaty 5s ease-in-out infinite;
}
.animate-floaty-delay {
  animation: floaty 5s ease-in-out infinite;
  animation-delay: 1.2s;
}
.animate-floaty-delay-2 {
  animation: floaty 5.5s ease-in-out infinite;
  animation-delay: 2.4s;
}

@keyframes floatBtn {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
.animate-float-btn {
  animation: floatBtn 3s ease-in-out infinite;
}

/* ---------- Neural network hero graphic ---------- */
@keyframes pulseDot {
  0%, 100% { opacity: 0.45; transform: scale(1); filter: drop-shadow(0 0 0 rgba(255,255,255,0)); }
  50% { opacity: 1; transform: scale(1.7); filter: drop-shadow(0 0 7px rgba(255,255,255,0.95)); }
}
.node-dot {
  transform-box: fill-box;
  transform-origin: center;
  animation: pulseDot 2.2s ease-in-out infinite;
}

@keyframes dashFlow {
  to { stroke-dashoffset: -24; }
}
.node-line {
  stroke-dasharray: 4 6;
  animation: dashFlow 1.4s linear infinite;
}

/* Panel del hero: degradado que respira lentamente */
.animate-gradient-pan {
  background-size: 220% 220%;
  animation: gradientPan 9s ease infinite;
}
@keyframes gradientPan {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Halo rotatorio detrás del panel del hero */
.animate-spin-slow {
  animation: spinSlow 12s linear infinite;
}
@keyframes spinSlow {
  to { transform: rotate(360deg); }
}

/* Brillo que recorre la mini tarjeta del dashboard */
.shimmer {
  position: relative;
  overflow: hidden;
}
.shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: translateX(-150%) skewX(-15deg);
  animation: shimmerSweep 3.4s ease-in-out infinite;
  animation-delay: 1.2s;
}
@keyframes shimmerSweep {
  0%   { transform: translateX(-150%) skewX(-15deg); }
  60%, 100% { transform: translateX(260%) skewX(-15deg); }
}

/* ---------- Anillo de atención para CTAs clave ---------- */
@keyframes pingSlow {
  0%   { transform: scale(1); opacity: 0.55; }
  75%, 100% { transform: scale(1.7); opacity: 0; }
}
.animate-ping-slow {
  animation: pingSlow 2.6s cubic-bezier(0,0,0.2,1) infinite;
}

/* ---------- Glass cards ---------- */
.glass-card {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.6);
}

/* ---------- Growth bar chart mini animation ---------- */
@keyframes growBar {
  from { height: 0%; }
}
.bar-anim {
  animation: growBar 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* ---------- Card hover lift ---------- */
.hover-lift {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.hover-lift:hover {
  transform: translateY(-6px);
}

/* ---------- Gradient text ---------- */
.text-gradient {
  background: linear-gradient(135deg, #0A1F44 0%, #12305F 45%, #22C55E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Variante para usar sobre fondos oscuros sólidos (navy), donde el degradado
   normal pierde contraste al empezar en el mismo tono navy del fondo. */
.text-gradient-dark {
  background: linear-gradient(135deg, #86EFAC 0%, #22C55E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Section watermark number ---------- */
.step-number {
  font-family: 'DM Sans', sans-serif;
  font-weight: 800;
  -webkit-text-stroke: 1.5px rgba(10,31,68,0.15);
  color: transparent;
}

/* ---------- Accordion chevron rotation ---------- */
.accordion-chevron {
  transition: transform 0.3s ease;
}

/* Scrollbar accent (opcional, no crítico) */
::selection {
  background: #16A34A;
  color: white;
}