/* ============================================================
   H Solución — HERO AI CORE (integración aprobada)
   Escena de 5 capas fundida con el fondo del hero. Sin marcos.
   Paleta aprobada del núcleo: #8A2BE2 · #FF2D95 · #00E5FF
   Prefijo hai- para no chocar con los estilos de la landing.
   ============================================================ */

.hero{isolation:isolate}
.hero .hero-grid{z-index:2}   /* texto comercial SIEMPRE por encima de la escena */

/* ── Escena: cubre todo el hero, se funde con el fondo (gradientes a transparente, sin bordes) ── */
.hai-scene{
  position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;
  background:
    radial-gradient(52% 64% at 70% 50%, rgba(138,43,226,.14), transparent 62%),
    radial-gradient(38% 48% at 84% 26%, rgba(255,45,149,.07), transparent 62%),
    radial-gradient(40% 52% at 56% 76%, rgba(0,229,255,.06), transparent 64%);
}
.hai-layer{position:absolute;inset:0;width:100%;height:100%}
#haiSpace{z-index:1}
#haiEco{z-index:2;overflow:visible}
.hai-core{
  z-index:3;position:absolute;left:50%;top:50%;width:400px;
  transform:translate(-50%,-50%);
  mix-blend-mode:screen;                 /* el negro del WebP desaparece → sin tarjeta */
  /* máscara radial: los 4 bordes se difuminan a transparente → CERO rectángulo */
  -webkit-mask-image:radial-gradient(ellipse closest-side at 50% 50%, #000 64%, rgba(0,0,0,0) 100%);
          mask-image:radial-gradient(ellipse closest-side at 50% 50%, #000 64%, rgba(0,0,0,0) 100%);
  filter:drop-shadow(0 0 34px rgba(138,43,226,.35));
  will-change:transform,filter;pointer-events:none;user-select:none;
}
#haiFx{z-index:4}
#haiNodes{z-index:5}

/* ── Ancla de composición: reserva el espacio del núcleo en la grilla del hero ── */
.hai-anchor{min-height:clamp(500px,66vh,680px)}

/* ── Nodos del ecosistema ── */
.hai-node{
  position:absolute;transform:translate(-50%,-50%);
  display:flex;flex-direction:column;align-items:center;gap:6px;
}
.hai-node-ic{
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  color:var(--text);
  background:radial-gradient(circle at 50% 40%, rgba(20,26,54,.92), rgba(10,14,32,.86));
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 4px 18px rgba(0,0,0,.5), inset 0 0 12px rgba(255,255,255,.05);
  transition:box-shadow .4s ease, border-color .4s ease, transform .4s ease, color .4s ease;
}
.hai-node-ic svg{width:22px;height:22px;display:block}
.hai-node-lbl{
  font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.1em;
  color:var(--text-2);text-transform:uppercase;white-space:nowrap;opacity:.72;
  transition:opacity .4s,color .4s;
}
.hai-pal-cyan   { --nc:#00E5FF; }
.hai-pal-violet { --nc:#8A2BE2; }
.hai-pal-magenta{ --nc:#FF2D95; }
/* respuesta breve cuando llega un pulso de información */
.hai-node.lit .hai-node-ic{
  color:#fff;border-color:var(--nc);
  box-shadow:0 0 22px -2px var(--nc), 0 0 40px -6px var(--nc), inset 0 0 14px rgba(255,255,255,.12);
  transform:scale(1.1);
}
.hai-node.lit .hai-node-lbl{opacity:1;color:#cfeeff}

/* ── Título conectado al núcleo ── */
.hai-title{
  position:absolute;z-index:6;transform:translate(-50%,-100%);
  text-align:center;pointer-events:none;
  /* halo oscuro: el título lee limpio aunque un nodo pase por detrás */
  filter:drop-shadow(0 0 6px rgba(5,6,11,.9)) drop-shadow(0 0 16px rgba(5,6,11,.7));
}
.hai-name{
  font-family:var(--font-display);font-weight:700;font-size:clamp(18px,2.2vmin,27px);
  letter-spacing:.06em;line-height:1;
  background:linear-gradient(90deg,#fff,#cfe9ff 60%,#d9b8ff);
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 26px rgba(0,229,255,.22);
}
.hai-sub{
  margin-top:7px;font-family:var(--font-mono);font-weight:600;
  font-size:clamp(7.5px,1vmin,10px);letter-spacing:.26em;color:#00E5FF;opacity:.9;
}
.hai-conduit{display:flex;flex-direction:column;align-items:center;margin-top:8px}
.hai-conduit span{width:2px;height:30px;background:linear-gradient(#00E5FF,rgba(0,229,255,0));border-radius:2px;box-shadow:0 0 8px rgba(0,229,255,.6)}
.hai-conduit i{width:7px;height:7px;margin-top:-2px;border-radius:50%;background:#00E5FF;box-shadow:0 0 12px 2px #00E5FF;
  animation:haiDotBlink 2.6s ease-in-out infinite}   /* alumbra y se apaga, suave */
@keyframes haiDotBlink{
  0%,100%{opacity:.25;box-shadow:0 0 4px 1px rgba(0,229,255,.35)}
  50%{opacity:1;box-shadow:0 0 14px 3px #00E5FF}
}

/* ── Centro de Control (visual anterior reubicado) ── */
.control-grid{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:center}
.control-grid > *{min-width:0}
.control-head p{color:var(--text-2);font-size:16.5px;max-width:48ch}
.control-head h2{font-family:var(--font-display);font-weight:700;font-size:clamp(28px,3.6vw,40px);letter-spacing:-.015em;line-height:1.12;margin:14px 0 14px}

/* ── Responsive ── */
@media (max-width:980px){
  .control-grid{grid-template-columns:1fr;gap:44px}
  .hai-anchor{min-height:min(102vw,540px)}
}
@media (max-width:760px){
  .hai-node-lbl{display:none}          /* menos saturación en móvil */
  .hai-node-ic{width:40px;height:40px}
  .hai-node-ic svg{width:19px;height:19px}
}

/* ── Reduced motion: escena visible pero estática (lo maneja hero-ai.js) ── */
@media (prefers-reduced-motion:reduce){
  .hai-core{transition:none}
}