/* =====================================================================
   AMDAD · Hero inmersivo (mesh gradient azul/negro en CSS puro)
   Sin dependencias — reemplaza al shader React/WebGL de la referencia.
   ===================================================================== */

.hero-home {
  position: relative;
  min-height: 100svh;
  background: #000;
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

/* ---- Capa de blobs (mesh gradient) ---- */
.hero-blobs {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-blobs span {
  position: absolute;
  border-radius: 9999px;
  filter: blur(72px);
  transform: translateZ(0);
  will-change: transform;
}
.hero-blobs .b1 { width: 46vw; height: 46vw; left: -8vw;  top: -8vw;    background: #0B2E7A; opacity: .70; animation: heroFloatA 26s ease-in-out infinite; }
.hero-blobs .b2 { width: 40vw; height: 40vw; right: -6vw; top: -12vw;   background: #103A9E; opacity: .65; animation: heroFloatB 31s ease-in-out infinite; }
.hero-blobs .b3 { width: 54vw; height: 54vw; left: 8vw;   bottom: -30vw; background: #071E57; opacity: .85; animation: heroFloatC 36s ease-in-out infinite; }
.hero-blobs .b4 { width: 34vw; height: 34vw; right: 4vw;  bottom: -12vw; background: #1E4FCC; opacity: .45; animation: heroFloatD 22s ease-in-out infinite; }

@keyframes heroFloatA { 0%,100% { transform: translate(0,0) scale(1);      } 50% { transform: translate(6vw, 4vw)  scale(1.15); } }
@keyframes heroFloatB { 0%,100% { transform: translate(0,0) scale(1.05);   } 50% { transform: translate(-5vw, 5vw) scale(1);    } }
@keyframes heroFloatC { 0%,100% { transform: translate(0,0) scale(1);      } 50% { transform: translate(4vw, -5vw) scale(1.12); } }
@keyframes heroFloatD { 0%,100% { transform: translate(0,0) scale(1);      } 50% { transform: translate(-6vw,-3vw) scale(1.2); } }

/* ---- Rejilla wireframe sutil (eco del segundo MeshGradient) ---- */
.hero-grid {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .12;
  background-image:
    linear-gradient(rgba(120,160,255,0.7) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,160,255,0.7) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 75%);
  -webkit-mask-image: radial-gradient(120% 90% at 70% 30%, #000 30%, transparent 75%);
}

/* ---- Viñeta + grano ---- */
.hero-vignette {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.35), rgba(0,0,0,0) 25%, rgba(0,0,0,0.55));
}
.hero-grain {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Entradas suaves (equivalente a framer-motion) ---- */
.hero-in { opacity: 0; transform: translateY(22px); animation: heroIn .9s cubic-bezier(0.22,1,0.36,1) forwards; }
.hero-in.d1 { animation-delay: .15s; }
.hero-in.d2 { animation-delay: .30s; }
.hero-in.d3 { animation-delay: .45s; }
.hero-in.d4 { animation-delay: .60s; }
@keyframes heroIn { to { opacity: 1; transform: translateY(0); } }

/* ---- Nav vertical del hero ---- */
.hero-nav a { position: relative; }
.hero-nav a::after {
  content: ''; position: absolute; right: 0; bottom: -2px; height: 1px; width: 0;
  background: rgba(255,255,255,.85); transition: width .3s cubic-bezier(0.22,1,0.36,1);
}
.hero-nav a:hover::after { width: 100%; }

/* ---- Badge IA³ (borde pulsante + texto giratorio) ---- */
.ia3-badge { position: relative; width: 118px; height: 118px; display: grid; place-items: center; }
.ia3-glow {
  position: absolute; inset: 12px; border-radius: 50%;
  box-shadow: 0 0 34px 6px rgba(30,79,204,.55), inset 0 0 18px rgba(30,79,204,.35);
  animation: ia3pulse 3.2s ease-in-out infinite;
}
.ia3-ring {
  position: absolute; inset: 16px; border-radius: 50%;
  background: conic-gradient(from 0deg, #1E4FCC, #0A214F, #2D6BE0, #071E57, #1E4FCC);
  animation: ia3spin 6s linear infinite;
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
}
.ia3-core {
  position: absolute; inset: 24px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, #0A214F, #000);
  display: grid; place-items: center;
  font-weight: 800; letter-spacing: .02em; color: #fff; font-size: 20px;
  box-shadow: inset 0 0 12px rgba(0,0,0,.7);
}
.ia3-core sup { font-size: .55em; }
.ia3-text { position: absolute; inset: 0; animation: ia3spin 20s linear infinite; }
.ia3-text text { fill: rgba(255,255,255,.75); font-size: 9px; font-weight: 600; letter-spacing: .18em; }

@keyframes ia3spin  { to { transform: rotate(360deg); } }
@keyframes ia3pulse { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.05); } }

/* ---- Nav horizontal en el home: fijo (no reserva espacio) y oculto sobre el hero ---- */
body[data-home="1"] #site-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  transition: transform .45s cubic-bezier(0.22,1,0.36,1), opacity .35s ease;
}
body[data-home="1"] #site-nav.nav-hidden {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  .ia3-badge { width: 92px; height: 92px; }
  .ia3-core { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-blobs span, .ia3-ring, .ia3-text, .ia3-glow { animation: none !important; }
  .hero-in { opacity: 1 !important; transform: none !important; animation: none !important; }
}