/* ==========================================================================
   🛸 FILOSOFÍA VIBRANT: CRISTAL LÍQUIDO E INGRAVIDEZ EDITORIAL
   ========================================================================== */
:root {
  --hud-mono-font: 'Space Mono', 'Anonymous Pro', monospace;
  --hud-text-wash: rgba(255, 255, 255, 0.45); /* Blanco fantasma esmerilado */
  --hud-brand-neon: #cdfa1b; /* Verde corporativo: SÓLO COMO EVENTO */
}

.video-hero-section {
  position: relative;
  width: 100vw;
  height: 100vh;
  background: #080808; /* Fondo industrial profundo */
  overflow: hidden;
  box-sizing: border-box;
}

.cinematic-bg-video {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 1 !important;
  transition: filter .45s ease;
  pointer-events: none !important; 
}
.global-navbar.is-open ~ main #cinematicScreen .cinematic-bg-video{
    filter:
      brightness(.95)
      contrast(.32)
      saturate(.45);
}
.global-navbar.is-open ~ main .hud-cinematic-viewport-frame{

    opacity:.15;

    transform:
        scale(.93)
        translateY(-40px);

    filter:blur(8px);

    transition:.45s;

    pointer-events:none;
}
.telemetry-lens-canvas {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 50 !important;
  
  /* Volvemos al Canvas transparente al tacto para que el mouse no se trabe */
  pointer-events: none !important; 
  
  /* 🚀 EL REPARADOR MASTER: Forzamos a que el fondo del Canvas sea 100% transparente 
     y eliminamos cualquier filtro o blend-mode viejo que estuviera opacando el video */
  background: transparent !important;
  background-color: transparent !important;
  mix-blend-mode: normal !important;
  filter: none !important;
}


/* Viñeteado radial mínimo de alta fidelidad, centro totalmente libre */
.video-overlay-darkener {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(circle at center, transparent 55%, rgba(150, 160, 172, 1) 100%);
}

/* ==========================================================================
   📟 LAYOUT FLOTANTE DESPEJADO (MÁXIMO VACÍO INTERACTIVO)
   ========================================================================== */
.hud-cinematic-viewport-frame {
  position: absolute;
  inset: 0;
  z-index: 100;
  padding: 8vh 6vw; /* Expandido para dar un aire de chasis Apple Vision Pro */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  box-sizing: border-box;
}

.hud-top-console-area {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
  align-items: flex-start;
}

.hud-live-terminal-chassis { 
  font-family: var(--hud-mono-font, 'Space Mono', monospace) !important; 
  font-size: 0.56rem !important; /* Tamaño sutil pero nítido */
  
  /* 🚀 EL CAMBIO DEFECTIVO: Le damos un interlineado holgado y expandimos 
     las letras para que cada carácter de código respire y sea legible */
  line-height: 2.0 !important; 
  letter-spacing: 0.14em !important; /* Kerning extendido estilo Teenage Engineering */
  
  /* Blanco puro semitransparente para un contraste limpio sobre el fondo oscuro */
  color: rgba(255, 255, 255, 0.75) !important; 
  text-transform: uppercase !important;
  max-width: 320px;
}

/* ==========================================================================
   🔮 EFECTO CRISTAL REAL (GLASSMORPHISM TIPOGRÁFICO RECTIFICADO)
   ========================================================================== */
.hero-title-compact-editorial {
  font-family: 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.05;
  margin: 0;
  text-transform: uppercase;
  font-size: clamp(2.2rem, 3.8vw, 3.2rem) !important; /* Calibrado para la columna derecha */

  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.6) 60%, rgba(255, 255, 255, 0.35) 100%);
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 0.5px rgba(255, 255, 255, 0.2);
  filter: drop-shadow(0px 4px 8px rgba(0, 0, 0, 0.45));
}
.hero-manifesto-container-fluid {
  width: 100%;
  max-width: 500px !important; 
  display: block;
}


.hero-manifesto-excerpt-right {
  font-family: var(--hud-mono-font, 'Space Mono', monospace) !important;
  
  font-size: 0.68rem !important; 
  line-height: 1.9 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 0;
  
  /* Evitamos que el navegador rompa palabras de forma arbitraria con guiones */
  word-break: keep-all !important; 
  white-space: normal !important;
  
  /* Blanco lavado de alta definición */
  color: rgba(255, 255, 255, 0.75) !important;
}

.hero-manifesto-excerpt-right strong{
    color:#fff;
    font-weight:700;
}

.hero-manifesto-excerpt-right em{
    font-style:italic;
    opacity:.9;
}

.hud-action-trigger-right {
  opacity: 0;
  transform: translateY(3px);
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none !important; /* Desactivado mientras se escribe para no estorbar */
}

/* En cuanto Stimulus inyecta la clase, el botón se materializa y se activa */
.hud-action-trigger-right.is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important; /* 🚀 CLICS LIBERADOS AL 100% */
}
/* Reutilizamos los estilos base limpios de la terminal y ejes */
.hud-live-terminal-chassis { font-family: var(--hud-mono-font); font-size: 0.54rem; line-height: 1.8; color: rgba(255, 255, 255, 0.4); text-transform: uppercase; }
.btn-quote-terminal-command { font-family: var(--hud-mono-font); font-size: 0.6rem; font-weight: 700; color: #ffffff; text-decoration: none; letter-spacing: 0.1em; pointer-events: auto !important; }
.btn-quote-terminal-command:hover { color: var(--hud-brand-neon); text-shadow: 0 0 6px var(--hud-brand-neon); }

.terminal-line {
  opacity: 0;
  transform: translateY(1px);
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}
.terminal-line.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.terminal-cursor {
  display: inline-block;
  width: 4px;
  height: 8px;
  background: #ffffff;
  animation: terminalStaticBlink 0.9s steps(2, start) infinite;
  vertical-align: middle;
}

@keyframes terminalStaticBlink {
  to { visibility: hidden; }
}

/* ==========================================================================
   📐 UX NATURAL: COMPOSICIÓN INFERIOR ESPACIAL
   ========================================================================== */
.hud-bottom-impact-zone {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* Reposa orgánicamente en la base */
  width: 100%;
}

.hud-left-utility-chassis {
  pointer-events: auto !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
}

/* Switch de audio de texto de alta fidelidad */
.btn-hud-audio-toggle {
  background: transparent;
  border: none;
  font-family: var(--hud-mono-font, 'Space Mono', monospace);
  font-size: 0.54rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  padding: 0;
  transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.btn-hud-audio-toggle:hover {
  color: #ffffff;
}
.btn-hud-audio-toggle.is-active span {
  color: var(--hud-brand-neon, #cdfa1b);
  text-shadow: 0 0 6px var(--hud-brand-neon, #cdfa1b);
}


/* LADO INFERIOR DERECHO (REMATES EDITORIALES) */
.hud-anchor-branding-editorial {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  max-width: 520px;
}


/* El botón transformado en un comando de ejecución flotante */
.btn-quote-terminal-command {
  font-family: var(--hud-mono-font);
  font-size: 0.6rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  letter-spacing: 0.1em;
  pointer-events: auto !important;
  transition: color 0.25s ease;
}
.btn-quote-terminal-command:hover {
  color: var(--hud-brand-neon);
  text-shadow: 0 0 6px var(--hud-brand-neon);
}

/* ==========================================================================
   🎯 INTERFERENCIA ULTRA FINAL DEL ESCÁNER FLOTANTE (ESTILO SUIZO)
   ========================================================================== */
/* ==========================================================================
   🎯 INSTRUMENTAL DEL ESCÁNER FLOTANTE (ESTILO SUIZO / NOOMO VIBRANT)
   ========================================================================== */
.hud-cursor-scanner-pure-text {
  position: fixed;
  font-family: var(--hud-mono-font, 'Space Mono', monospace);
  line-height: 1.5;
  padding: 4px 0;
  pointer-events: none;
  z-index: 200;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  
  /* 🪐 EL SECRETO DE CONTRASTE: Filtro de sombra suave ultra-fina para despegar 
     el texto blanco de los tonos cálidos del video trasero sin ensuciar */
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.75));
}

.hud-cursor-scanner-pure-text.is-active {
  opacity: 1;
  transform: translateY(0);
}

/* Tag superior de estado */
.scanner-header-tag {
  font-size: 0.42rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.3); /* Blanco esmerilado sutil */
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

/* Etiqueta anatómica detectada (El único evento de color verde fino) */
.text-neon-event {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--hud-brand-neon, #cdfa1b); /* Tu verde lima insignia corporativo */
  text-transform: uppercase;
  margin: 1px 0 3px 0;
}

/* 📐 REJILLA DE MÉTRICAS CARTESIANAS (REDISEÑO TOTALMENTE LIMPIO YE ELEGANTE) */
.scanner-metrics-grid {
  display: flex;
  gap: 16px; /* Espaciado holgado industrial entre ejes */
  font-size: 0.46rem;
  font-weight: 500;
  letter-spacing: 0.12em; /* Kerning premium extendido */
  color: rgba(255, 255, 255, 0.45); /* Blanco traslúcido para etiquetas fijas (X, Y, SPD) */
}

/* Los números de los píxeles reales mutando en vivo se solidifican a blanco brillante */
.scanner-metrics-grid span {
  color: #ffffff !important; /* Blanco puro de alta visibilidad */
  font-weight: 700;
  text-shadow: 0 0 4px rgba(255, 255, 255, 0.2);
}

/* ==========================================================================
   🛸 GRID DE 3 COLUMNAS TÁCTICAS (MÁXIMO AIRE ESTILO APPLE VISION)
   ========================================================================== */
.hud-cinematic-viewport-frame.layout-three-columns {
  position: absolute;
  inset: 0;
  z-index: 100;
  padding: 8vh 5vw;
  display: grid !important;
  /* Columna Izquierda, Centro libre espacioso, Columna Derecha */
  grid-template-columns: 24vw 1fr 32vw !important;
  gap: 4vw !important;
  box-sizing: border-box;
  pointer-events: none !important; 
}

/* Distribución vertical de la columna izquierda */
.hud-column-left-chassis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
  height: 100%;
  pointer-events: auto !important; /* Libera clics en controles izquierdos */
}

.hud-left-utility-block,
.hud-utility-wrapper,
.hud-pill-gadget-square,
.hud-cross-center-isotopo,
.btn-hud-audio-toggle,
.btn-quote-terminal-command {
  pointer-events: auto !important;
  position: relative;
  z-index: 120 !important; /* Un paso arriba en el espacio tridimensional */
}

.hud-left-utility-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
  width: fit-content;
}

/* Distribución vertical escalonada de la columna derecha */
.hud-column-right-branding {
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* Carga de forma natural en la base inferior */
  align-items: flex-end;
  text-align: right;
  height: 100%;
  gap: 2rem; /* Respiro limpio estilo Noomo entre bloques */
  
  /* 🚀 LIBERACIÓN TRIDIMENSIONAL: La columna hereda el permiso de recibir mouse */
  pointer-events: auto !important; 
}

.btn-precision-command-deck {
  display: inline-flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  
  text-decoration: none !important;
  font-family: var(--hud-mono-font, 'Space Mono', monospace) !important;
  font-size: 0.72rem !important; 
  font-weight: 700 !important;
  letter-spacing: 0.12em !important;
  
  /* Acabado de chasis de cristal líquido esmerilado */
  padding: 14px 28px !important;
  background: rgba(255, 255, 255, 0.02) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 4px;
  
  color: rgba(255, 255, 255, 0.8) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
}

/* Hover de contraste puro industrial */
.btn-precision-command-deck:hover {
  color: #000000 !important;
  background: #ffffff !important; 
  border-color: #ffffff !important;
  box-shadow: 0 8px 25px rgba(255, 255, 255, 0.12);
  transform: translateY(-1px);
}

.command-arrow {
  color: rgba(255, 255, 255, 0.3);
  transition: color 0.25s ease;
}
.btn-precision-command-deck:hover .command-arrow {
  color: #000000;
}

.command-block {
  display: inline-block;
  color: var(--hud-brand-neon, #cdfa1b);
  font-size: 0.8rem;
}
.btn-precision-command-deck:hover .command-block {
  color: #000000;
}

.command-block.is-blink-fast {
  animation: terminalCursorFastBlink 0.4s steps(2, start) infinite;
}

@keyframes terminalCursorFastBlink {
  to { visibility: hidden; }
}




/* ==========================================================================
   🕹️ ESCUDO TÁCTIL UNIVERSAL DE PRECISIÓN (GLASS PANEL)
   ========================================================================== */
.hud-tactile-click-overlay {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 70 !important; 
  pointer-events: auto !important; 
  background: transparent;
  cursor: pointer;
}

/* ==========================================================================
   🛸 POP-UP DE ESTADO CINEMÁTICO EMERGENTE (ESTILO NETFLIX CRISTALINO)
   ========================================================================== */
.hud-state-popup-glass {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  /* Cristal traslúcido ultra-fino suspendido al centro */
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: 50%;
  
  z-index: 80 !important; /* Por encima de la capa de click pero abajo de los textos */
  pointer-events: none !important; /* Totalmente transparente al tacto */
  opacity: 0;
}

.hud-state-popup-glass .popup-icon {
  font-family: var(--hud-mono-font, monospace);
  font-size: 1.2rem;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.2);
  margin-left: 2px; /* Ajuste óptico de balance geométrico para el triángulo de PLAY */
}

/* Clase de activación elástica instantánea controlada por JS */
.hud-state-popup-glass.is-triggered {
  animation: netflixGlassPulse 0.65s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes netflixGlassPulse {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.7);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.05);
  }
  45% {
    transform: translate(-50%, -50%) scale(1.0);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.15);
  }
}