/* ============================================================
   INTELHIA — Data-Art Layer CSS (Option C — light base)
   Hereda home-immersive.css → home.css (diseño claro aprobado).
   Agrega: canvas mesh fijo, secciones claras semi-transparentes
   para que la malla de nodos se vea a través.
   ============================================================ */

@import url('./home-immersive.css');


/* ── CANVAS MESH: fijo en viewport, debajo de todo ─────────── */

#imm-mesh {
  position: fixed;
  top:  0;
  left: 0;
  width:  100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
}

/* main y footer por encima del canvas.
   header se excluye: su único hijo (.site-nav) es position:fixed,
   así que header no crea stacking context y nav mantiene z-index:100 en raíz. */
main,
footer {
  position: relative;
  z-index: 1;
}


/* ── HERO: semi-transparente — malla visible sutilmente ─────
   0.88 opacidad: nodos del canvas apenas perceptibles como textura.
   ─────────────────────────────────────────────────────────── */

.hero-section {
  background: rgba(244, 245, 247, 0.88);
}


/* ── SECCIONES CLARAS: semi-transparentes — malla sutil ─────
   El canvas fijo "aparece" a través del fondo rgba.
   Secciones oscuras (ib-section, ticker, cta, footer)
   ya tienen bg sólido oscuro → malla oculta naturalmente.
   ─────────────────────────────────────────────────────────── */

.modelo-section {
  background: rgba(244, 245, 247, 0.68);
}

.ib-section {
  background: #06090F;
}

/* .hz3-section usa background propio (#070a10) — sin override necesario */

/* .pub-stream usa bg oscuro propio — la malla no se ve a través */


/* ── NAV: z-index alto en raíz, fondo opaco, borde inferior siempre visible ── */

.site-nav {
  z-index: 200;
  background: rgba(244, 245, 247, 0.97);
  border-bottom: 1px solid rgba(11, 14, 20, 0.08);
}

.site-nav.scrolled {
  background: rgba(244, 245, 247, 0.97);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(11, 14, 20, 0.13);
}


/* ── RADAR: JS controla sweep + badges + horizontes ─────────
   Desactivar animación CSS del sweep para que JS pueda
   leer el ángulo exacto y sincronizar los badges.
   ─────────────────────────────────────────────────────────── */

.radar-sweep {
  animation: none !important;
}

/* Badges (incluye dot): ocultos — JS los muestra al paso del sweep */
.sig-badge {
  opacity: 0;
}

/* Horizontes: ocultos — JS anima ciclo adentro→afuera */
.hz {
  opacity: 0;
}

/* Axis labels LARGO/CORTO PLAZO: aparecen con el horizonte más externo */
.hz-axis {
  opacity: 0;
}


/* ── ACCESIBILIDAD: sin animación canvas ────────────────────  */

@media (prefers-reduced-motion: reduce) {
  #imm-mesh  { display: none; }
  .hz        { opacity: 1; }
  .hz-axis   { opacity: 1; }
  .sig-badge { opacity: 1; }
}