/* ==========================================================================
     🎛️ CONSOLA INDUSTRIAL CRISTALINA BRUSHED (ESTILO NOOMO VIBRANT)
     ========================================================================== */
  .overlay-tactical-control-deck {
    display: grid !important; 
    grid-template-columns: repeat(2, 64px) !important; 
    grid-template-rows: repeat(2, 64px) !important;
    gap: 8px !important; 
    position: relative !important;
    justify-content: center !important;
    align-content: center !important;
    width: fit-content !important;
    z-index: 110 !important; 
  }

  .hud-pill-gadget-square {
    font-family: 'Space Mono', monospace !important;
    font-size: 0.72rem !important; 
    font-weight: 700 !important;
    width: 100% !important; 
    height: 100% !important; 
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    
    /* 🪐 EL SECRETO PREMIUM: Cristal traslúcido flotante con blur masivo */
    background: rgba(255, 255, 255, 0.03) !important; 
    border: 1px solid rgba(255, 255, 255, 0.15) !important; 
    color: rgba(255, 255, 255, 0.4) !important; 
    backdrop-filter: blur(24px) !important; /* Desenfoque periférico premium */
    -webkit-backdrop-filter: blur(24px) !important;
    
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  }

  /* Clip-paths originales blindados en su lugar exacto */
  .node-top-left { clip-path: polygon(12px 0%, 100% 0%, 100% 100%, 0% 100%, 0% 12px) !important; }
  .node-top-right { clip-path: polygon(0% 0%, calc(100% - 12px) 0%, 100% 12px, 100% 100%, 0% 100%) !important; }
  .node-bottom-left { clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 12px 100%, 0% calc(100% - 12px)) !important; }
  .node-bottom-right { clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0% 100%) !important; }

  /* Hovers mínimos y elegantes: El verde lima se apodera del cuadrante al tacto manual */
  .hud-pill-gadget-square:hover {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: #cdfa1b !important;
    color: #cdfa1b !important;
    text-shadow: 0 0 6px var(--hud-brand-neon);
  }

   /* ==========================================================================
     HUD RADAR CENTER PLATE (RECALIBRADO ANTI-PARPADEO)
     ========================================================================== */

   .hud-radar-center-plate {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) scale(1) !important;
    width: 62px !important; 
    height: 62px !important; 
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.03) !important; 
    border: 1px solid rgba(255, 255, 255, 0.08) !important; 
    color: rgba(255, 255, 255, 0.4) !important; 
    backdrop-filter: blur(24px) !important;
    -webkit-backdrop-filter: blur(24px) !important;
    z-index: 999 !important; 
    pointer-events: none !important; 
    
    /* Aplicamos exactamente la misma velocidad de escala que el isotopo para que viajen juntos */
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
                background 0.3s ease, 
                border-color 0.3s ease, 
                box-shadow 0.3s ease !important;
  }

  /* Sincronización del Push mecánico en la placa de fondo al hacer clic */
  .hud-cross-center-isotopo:active ~ .hud-radar-center-plate {
    transform: translate(-50%, -50%) scale(0.95) !important;
  }

  /* ==========================================================================
     🎯 EL ISÓTOPO CENTRAL: TOTALMENTE DE VIDRIO (NÚCLEO MAESTRO)
     ========================================================================== */
  .hud-cross-center-isotopo {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    
    /* El translate debe estar FIRME. No debe transicionarse jamás para evitar hundimientos */
    transform: translate(-50%, -50%) scale(1) !important;
    
    width: 44px !important; 
    height: 44px !important; 
    border-radius: 50% !important; 
    background: rgba(255, 255, 255, 0.04) !important; 
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.02) !important;
    z-index: 1000 !important; 
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    
    /* CRÍTICO: Transicionamos únicamente la escala y los colores con un tiempo rápido (0.2s).
       Al dejar fuera las propiedades de posición (top, left, transform), el navegador 
       no sufrirá retrasos en los ejes al remover la clase de la terminal, eliminando el hundimiento. */
    transition: transform 0.2s cubic-bezier(0.25, 1, 0.5, 1),
                background 0.3s ease, 
                border-color 0.3s ease, 
                box-shadow 0.3s ease !important;
  }
  
  .hud-cross-center-isotopo:hover {
    background: rgba(205, 250, 27, 0.12) !important;
    border-color: #cdfa1b !important;
    /* Al hacer hover, solo alteramos el scale, el translate se queda intacto */
    transform: translate(-50%, -50%) scale(1.05) !important;
    box-shadow: 0 0 18px rgba(205, 250, 27, 0.35) !important;
  }

    .hud-cross-center-isotopo:active {
    /* El Push mecánico: se encoge de forma tridimensional limpia al presionar */
    transform: translate(-50%, -50%) scale(0.95) !important;
    box-shadow: 0 0 10px rgba(205, 250, 27, 0.15) !important;
  }


  .cross-isotopo-mini path { 
    fill: rgba(255, 255, 255, 0.35) !important; 
    transition: fill 0.3s ease !important;
  }
  .hud-cross-center-isotopo:hover .cross-isotopo-mini path {
    fill: #cdfa1b !important; /* El isotopo del logo se enciende en verde insignia */
  }

  .global-navbar.is-active-ai-console ~ main #cinematicScreen .hud-cross-center-isotopo,
.global-navbar.is-active-ai-console ~ main #cinematicScreen .btn-hud-core-radar-trigger,
.global-navbar.is-active-ai-console ~ main #cinematicScreen .radar-circle-neon,
.global-navbar.is-active-ai-console ~ main #cinematicScreen .radar-text-trigger,
.global-navbar.is-active-ai-console ~ main #cinematicScreen #node-command-title,
.global-navbar.is-active-ai-console ~ main #cinematicScreen .hud-cross-center-isotopo svg,
.global-navbar.is-active-ai-console ~ main #cinematicScreen .hud-cross-center-isotopo path {
color: var(--niyyah-accent) !important;
fill: #cdfa1b !important; 
background: rgba(205, 250, 27, 0.12) !important; 
border-color: #cdfa1b !important;
box-shadow: 0 0 18px rgba(205, 250, 27, 0.35) !important;
opacity: 1 !important;

visibility: visible !important;

}

.global-navbar.is-active-ai-console ~ main #cinematicScreen .hud-cross-center-isotopo {
  background: rgba(10, 10, 10, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.15) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

.global-navbar.is-active-ai-console ~ main #cinematicScreen .hud-radar-center-plate {
  background: rgba(205, 250, 27, 0.05) !important;
  border-color: rgba(205, 250, 27, 0.35) !important;
  box-shadow: 0 0 25px rgba(205, 250, 27, 0.08) !important;
  opacity: 1 !important;
  visibility: visible !important;
  transform: translate(-50%, -50%) scale(1) !important;
}

  /* ==========================================================================
   🔮 EFECTO DE CRISTAL RETINA (GLASSMORPHISM TIPOGRÁFICO)
   ========================================================================== */
.hero-title-compact-editorial {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0 0 1.2rem 0;
  text-transform: uppercase;

  /* 🚀 EL SECRETO DE CRISTAL: Teñimos el texto con un gradiente blanco traslúcido 
     que simula la refracción de la luz de arriba a abajo */
  background: linear-gradient(
    180deg, 
    rgba(255, 255, 255, 0.95) 0%, 
    rgba(255, 255, 255, 0.65) 60%, 
    rgba(255, 255, 255, 0.40) 100%
  );
  
  /* Recortamos el fondo para que viva estrictamente adentro de la tipografía */
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important; /* Volvemos invisible el color sólido base */

  /* 📐 MICRO-BORDE DE PRECISIÓN: Dibuja un contorno sutil de vidrio alrededor de las letras */
  -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.25);

  /* 🪐 PROFUNDIDAD TRIDIMENSIONAL: Sombra suave y difuminada que despega las letras del video de Dune */
  filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.45));
}

/* 📐 LÍNEAS DE COORDENADAS CARTESIANAS (EL INSTRUMENTO DEL CURSOR) */
.hud-axis-line-x,
.hud-axis-line-y {
  position: fixed;
  background: rgba(255, 255, 255, 0.05); /* Línea blanca fantasma casi invisible */
  pointer-events: none;
  z-index: 10; /* Por detrás de las letras pero encima del video */
  transition: opacity 0.3s ease;
  opacity: 0;
}

/* La línea horizontal ocupa todo el ancho */
.hud-axis-line-x {
  left: 0;
  width: 100vw;
  height: 1px;
}

/* La línea vertical ocupa todo el alto */
.hud-axis-line-y {
  top: 0;
  width: 1px;
  height: 100vh;
}

/* Cuando el sensor se activa, las guías de precisión se encienden sutilmente */
.video-hero-section:hover .hud-axis-line-x,
.video-hero-section:hover .hud-axis-line-y {
  opacity: 1;
}