/* ===========================
   08. VISIÓN / MANIFIESTO
   Fondo: puntos hexagonales + gradientes de color que se mueven
   Técnica CSS pura (fiel al componente GradientDots de React/Framer-motion):
   - background-image con radial-gradients para la grilla hexagonal de puntos
   - background-image con 4 gradientes radiales de colores corporativos
   - Animación de backgroundPosition + filter:hue-rotate via @keyframes
=========================== */
#vision {
  background: #0e0524;
  padding: 120px 0;
  overflow: hidden;
  position: relative;
}

/* Capa de puntos hexagonales + gradientes de color animados */
#vision-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;

  --bg: #0e0524;
  --dot-size: 10px;
  --spacing: 14px;          /* paso horizontal de la grilla */
  --hex-v: 24.25px;         /* = 14 * √3 ≈ 24.25 (paso vertical hexagonal) */

  background-image:
    /* Fila 1 de puntos: máscara circular que "borra" el dot de la celda */
    radial-gradient(circle at 50% 50%,
      transparent 1.5px,
      var(--bg) 0 var(--dot-size),
      transparent var(--dot-size)
    ),
    /* Fila 2 (offset hexagonal) */
    radial-gradient(circle at 50% 50%,
      transparent 1.5px,
      var(--bg) 0 var(--dot-size),
      transparent var(--dot-size)
    ),
    /* Gradiente 1: morado primario */
    radial-gradient(circle at 50% 50%, #8A3EE6, transparent 62%),
    /* Gradiente 2: naranja corporativo */
    radial-gradient(circle at 50% 50%, #FF6B1A, transparent 62%),
    /* Gradiente 3: lavanda */
    radial-gradient(circle at 50% 50%, #C37FFF, transparent 62%),
    /* Gradiente 4: morado profundo-magenta */
    radial-gradient(ellipse at 50% 50%, #5B2AC8, transparent 62%)
  ;

  background-size:
    var(--spacing)  var(--hex-v),
    var(--spacing)  var(--hex-v),
    200% 200%,
    200% 200%,
    200% 200%,
    200% var(--hex-v)
  ;

  background-position:
    0px 0px,
    calc(var(--spacing) / 2) calc(var(--hex-v) / 2),
    0% 0%,
    0% 0%,
    0% 0%,
    0% 0px
  ;

  animation:
    visionDotsMove  28s linear infinite,
    visionDotsHue    8s linear infinite
  ;
}

@keyframes visionDotsMove {
  0% {
    background-position:
      0px 0px,
      calc(var(--spacing) / 2) calc(var(--hex-v) / 2),
      800%  400%,
       900% -350%,
     -1100% -550%,
       350% var(--hex-v);
  }
  100% {
    background-position:
      0px 0px,
      calc(var(--spacing) / 2) calc(var(--hex-v) / 2),
      0%   0%,
      0%   0%,
      0%   0%,
      0%   0%;
  }
}

@keyframes visionDotsHue {
  from { filter: hue-rotate(0deg)   brightness(1.0) saturate(1.4); }
  to   { filter: hue-rotate(360deg) brightness(1.1) saturate(1.6); }
}

/* La grilla hexagonal pausa cuando el usuario prefiere movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  #vision-dots { animation: none; }
}

.vision-inner {
  max-width: 760px; margin: 0 auto;
  padding: 0 40px;
  position: relative; z-index: 1;
}
@media (max-width: 640px) { .vision-inner { padding: 0 20px; } }
.vision-inner .section-title { color: #fff; }
.vision-inner .section-label { margin-bottom: 20px; }
.vision-ai-loader {
  position: relative;
  width: 180px;
  height: 180px;
  margin: 54px auto 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.15;
  text-align: center;
  user-select: none;
  isolation: isolate;
  filter: drop-shadow(0 22px 48px rgba(255,107,26,0.22));
}
.vision-ai-loader::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 50%;
  animation: visionLoaderCircle 5s linear infinite;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,0.28), transparent 26%),
    linear-gradient(135deg, rgba(255,107,26,0.42), rgba(107,31,184,0.16));
}
.vision-ai-loader::after {
  content: '';
  position: absolute;
  inset: 20px;
  z-index: -1;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(42,14,95,0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.vision-ai-loader span {
  max-width: 118px;
  opacity: 0.88;
  animation: visionLoaderText 3s ease-in-out infinite;
  text-shadow: 0 2px 12px rgba(0,0,0,0.22);
}
@keyframes visionLoaderCircle {
  0% {
    transform: rotate(90deg);
    box-shadow:
      0 7px 14px 0 rgba(255,185,84,0.95) inset,
      0 14px 22px 0 rgba(255,107,26,0.9) inset,
      0 42px 44px 0 rgba(107,31,184,0.62) inset,
      0 0 6px 2px rgba(255,107,26,0.34),
      0 0 20px 4px rgba(255,142,55,0.18);
  }
  50% {
    transform: rotate(270deg);
    box-shadow:
      0 7px 14px 0 rgba(255,216,121,0.95) inset,
      0 14px 10px 0 rgba(255,124,32,0.92) inset,
      0 30px 42px 0 rgba(180,72,28,0.76) inset,
      0 0 7px 2px rgba(255,107,26,0.38),
      0 0 24px 5px rgba(255,181,72,0.22);
  }
  100% {
    transform: rotate(450deg);
    box-shadow:
      0 7px 14px 0 rgba(255,185,84,0.95) inset,
      0 14px 22px 0 rgba(255,107,26,0.9) inset,
      0 42px 44px 0 rgba(107,31,184,0.62) inset,
      0 0 6px 2px rgba(255,107,26,0.34),
      0 0 20px 4px rgba(255,142,55,0.18);
  }
}
@keyframes visionLoaderText {
  0%, 100% {
    opacity: 0.55;
    transform: translateY(0) scale(1);
  }
  24% {
    opacity: 1;
    transform: translateY(-1px) scale(1.06);
  }
  48% {
    opacity: 0.82;
    transform: translateY(0) scale(1);
  }
}
@media (max-width: 1180px) {
  .vision-ai-loader {
    margin-top: 42px;
    width: 148px;
    height: 148px;
  }
}
@media (max-width: 640px) {
  .vision-ai-loader {
    width: 132px;
    height: 132px;
    font-size: 13px;
  }
  .vision-ai-loader::after { inset: 16px; }
}
.vision-body {
  margin-top: 48px;
  display: flex; flex-direction: column; gap: 28px;
}
.vision-body p {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.7;
  color: rgba(255,255,255,0.8);
  font-weight: 400;
}
.vision-body p strong {
  color: #fff;
  font-weight: 700;
}
.vision-body p .highlight {
  color: var(--orange);
  font-weight: 600;
}