/* ═══════════════════════════════════════════════════════════════════
   BITXXO — Landing Page nativa v2 (puerto 8085)
   Paleta institucional "Cyber-Navy Neon": fondo azul oscuro nocturno,
   acentos azul neón + violeta ciber, tarjetas glassmorphic.
═══════════════════════════════════════════════════════════════════ */

:root {
  --bg-base:        #080c14;
  --bg-card:        rgba(18, 26, 46, 0.55);
  --bg-card-solid:  #0f1626;
  --bg-card-hover:  rgba(24, 34, 58, 0.7);
  --bg-topbar:      rgba(8, 12, 20, 0.78);

  --border:         rgba(0, 242, 254, 0.14);
  --border-focus:   rgba(0, 242, 254, 0.4);

  --neon-blue:      #00f2fe;
  --neon-blue-glow: rgba(0, 242, 254, 0.22);
  --violet:         #7f00ff;
  --violet-glow:    rgba(127, 0, 255, 0.22);
  --amber:          #f59e0b;
  --amber-glow:     rgba(245, 158, 11, 0.14);

  --text-on-accent: #04101a;
  --text-primary:   #eef4fb;
  --text-secondary: #8a9bc0;
  --text-muted:     #46577f;

  --r-card:         16px;
  --r-sm:           8px;
  --r-pill:         999px;

  --t-fast:         170ms ease;
  --t-smooth:       310ms cubic-bezier(0.4, 0, 0.2, 1);

  --topbar-h:       68px;
  --blur-glass:     16px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg-base);
  color: var(--text-primary);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  scroll-behavior: smooth;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }
img, svg { max-width: 100%; }
section { padding: 96px 24px; position: relative; }
.lp-container { max-width: 1180px; margin: 0 auto; position: relative; z-index: 1; }

/* Fondo ambiental — halos de gradiente 3D fijos (azul neón + violeta ciber)
   detrás de todo el contenido; se conservan en cada breakpoint. */
body {
  background:
    radial-gradient(circle at 12% 0%, var(--violet-glow), transparent 42%),
    radial-gradient(circle at 88% 18%, var(--neon-blue-glow), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(127, 0, 255, 0.08), transparent 45%),
    var(--bg-base);
  background-attachment: fixed;
}

.lp-glass {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--r-card);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
}

/* ── TOPBAR ──────────────────────────────────────────────────────── */
.lp-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 28px;
  background: var(--bg-topbar);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  border-bottom: 1px solid var(--border);
}

.lp-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--neon-blue);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 2.5px;
  flex-shrink: 0;
  text-shadow: 0 0 18px var(--neon-blue-glow);
}
.lp-logo i { font-size: 22px; }

.lp-nav {
  display: flex;
  align-items: center;
  gap: 28px;
}
.lp-nav a {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.2px;
  transition: color var(--t-fast);
  white-space: nowrap;
}
.lp-nav a:hover { color: var(--text-primary); }

.lp-nav-toggle {
  display: none;
  color: var(--text-primary);
  font-size: 20px;
}

.lp-topbar__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.lp-cta-secondary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: var(--r-pill);
  background: rgba(127, 0, 255, 0.1);
  border: 1px solid rgba(127, 0, 255, 0.4);
  color: #d6b8ff;
  font-size: 13px;
  font-weight: 600;
  transition: box-shadow var(--t-fast), transform var(--t-fast), background var(--t-fast);
}
.lp-cta-secondary:hover { background: rgba(127, 0, 255, 0.18); box-shadow: 0 0 20px var(--violet-glow); transform: translateY(-1px); }

.lp-cta-platform {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: var(--r-pill);
  background: var(--neon-blue);
  color: var(--text-on-accent);
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  transition: box-shadow var(--t-fast), transform var(--t-fast);
}
.lp-cta-platform:hover { box-shadow: 0 0 26px var(--neon-blue-glow); transform: translateY(-1px); }

/* ── HERO ────────────────────────────────────────────────────────── */
/* Edge-to-edge de verdad: `.lp-hero` (la <section>) ya NO tiene
   max-width/margin/padding lateral propios — ocupa el 100% del ancho
   de pantalla y su fondo (heredado de `body`, uniforme en toda la
   página) se conecta sin cortes con la Navbar de arriba, sin ningún
   "widget" ni tarjeta de por medio (nunca hubo `border-radius` en
   `.lp-hero`, así que no había ninguno que sacar — se deja constancia
   en el CHANGELOG). El `padding-top:116px` SÍ se mantiene: no es el
   margen "de widget" que pide sacar el brief, es la separación
   funcional para que el contenido no arranque tapado debajo de la
   Navbar `position:sticky` — sacarlo sería un bug, no un ajuste de
   estilo. El grid de 2 columnas (60/40) y su ancho legible
   (`max-width:1200px`, pedido explícito de esta ronda — el resto del
   sitio usa 1180 vía `.lp-container`, pero acá se sigue el número
   puntual del brief) se movieron a `.lp-hero__inner`, ver abajo. */
.lp-hero {
  width: 100%;
  /* El selector genérico `section { padding: 96px 24px; }` (ver arriba
     del archivo) le pondría 24px de gutter lateral a CUALQUIER
     section, incluida esta — hay que pisarlo explícito con
     `padding-left/right:0`, no alcanza con solo redefinir top/bottom,
     para que el fondo llegue de verdad al borde de la pantalla.
     `padding-top` de 116px NO se toca, sigue siendo el clearance
     funcional para la Navbar `sticky`, no un margen de "widget" de
     sobra. `padding-bottom`/`margin-bottom` forzados a 0 con
     `!important` a pedido explícito de esta ronda — el objetivo es que
     el filo inferior de la imagen del Hero quede exactamente sobre la
     línea de arranque de la siguiente sección (el Orquestador), sin
     ningún colchón de por medio. */
  padding: 116px 0 0;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  overflow: hidden;
}

.lp-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  /* flex-end en vez de center — pedido explícito de una ronda anterior
     y reforzado con `!important` en esta. En la práctica sigue siendo
     un cambio mayormente "de intención": `.lp-hero__content` ya tiene
     su propio `align-self:center` (no se mueve) y `.lp-hero__visual`
     ya tenía su propio `align-self:flex-end` (mismo anclaje al pie) —
     ninguna de las 2 columnas hereda este valor del padre en la
     práctica, pero se deja explícito tal como lo pide el brief. */
  align-items: flex-end !important;
  gap: 48px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.lp-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 22px;
  /* Ya quedaba centrado por herencia de `align-items:center` en
     `.lp-hero__inner`, pero el brief pide el centrado vertical
     explícito en esta columna puntualmente — se deja como
     `align-self` propio para que no dependa de un valor heredado del
     padre que podría cambiar en una ronda futura. */
  align-self: center;
}

/* Antes .lp-stats era una <section> propia, centrada, full-width,
   debajo del hero — el brief pide las tarjetas de stats DENTRO de la
   columna izquierda, alineadas con el resto del texto, así que el
   centrado (`max-width:1000px;margin:0 auto`) ya no aplica: acá adentro
   simplemente ocupa el 100% del ancho de `.lp-hero__content`. */
.lp-stats__grid {
  width: 100%;
  margin-top: 4px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  /* Compactado a pedido explícito — clase exclusiva del Hero (un solo
     uso en index.html), sin riesgo de afectar otra sección.
     `max-width` bajado más de lo pedido (90%→76%): con la imagen
     agrandada a 120%/1.15 y anclada a la derecha, el 90% literal
     dejaba la 3ra tarjeta ("100% Non-Custodial") tapada por la imagen
     (verificado con un screenshot antes de dar esto por terminado —
     ver docs/CHANGELOG.md). El punto 4 del propio brief pide
     explícitamente "sin tapar texto ni botones", así que se priorizó
     ese resultado sobre el número literal del punto 3. */
  gap: 8px !important;
  max-width: 76% !important;
}

.lp-hero::before,
.lp-hero::after {
  content: '';
  position: absolute;
  width: 480px;
  height: 480px;
  border-radius: 50%;
  filter: blur(90px);
  z-index: 0;
  pointer-events: none;
}
.lp-hero::before { top: -160px; left: 8%; background: var(--violet-glow); }
.lp-hero::after { top: -100px; right: 6%; background: var(--neon-blue-glow); }
.lp-hero > * { position: relative; z-index: 1; }

.lp-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(0, 242, 254, 0.3);
  background: rgba(0, 242, 254, 0.06);
  color: #7fe8ff;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.lp-hero h1 {
  font-size: clamp(32px, 5vw, 58px);
  font-weight: 800;
  letter-spacing: -0.5px;
  max-width: 820px;
  line-height: 1.15;
}
.lp-hero h1 span {
  background: linear-gradient(120deg, var(--neon-blue), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lp-hero p.lp-hero__subtitle {
  max-width: 640px;
  color: var(--text-secondary);
  font-size: 16px;
}

.lp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 14px;
  margin-top: 8px;
}
/* Compactado SOLO en el Hero — `.lp-hero__actions` y `.lp-btn` son
   clases genéricas reusadas también en la sección de DePIN Node (el
   botón "Descargar para Windows"); una regla sin escopear achicaría
   ESE botón también, algo que el brief no pide (habla puntualmente de
   "la columna izquierda" del Hero). Se escopea a `#hero` para que el
   resto del sitio no se vea afectado — ver docs/CHANGELOG.md. */
#hero .lp-hero__actions {
  gap: 10px !important;
  margin-bottom: 12px !important;
}
#hero .lp-btn {
  padding: 8px 16px !important;
  font-size: 13px !important;
}

.lp-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border-radius: var(--r-sm);
  font-size: 14px;
  font-weight: 700;
  transition: box-shadow var(--t-fast), transform var(--t-fast), background var(--t-fast);
}
.lp-btn--primary {
  background: linear-gradient(120deg, var(--neon-blue), #00c2e0);
  color: var(--text-on-accent);
}
.lp-btn--primary:hover { box-shadow: 0 10px 32px var(--neon-blue-glow); transform: translateY(-2px); }
.lp-btn--ghost {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text-primary);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
}
.lp-btn--ghost:hover { border-color: var(--border-focus); background: var(--bg-card-hover); }
.lp-btn--violet {
  background: linear-gradient(120deg, var(--violet), #a352ff);
  color: #fff;
}
.lp-btn--violet:hover { box-shadow: 0 10px 32px var(--violet-glow); transform: translateY(-2px); }

.lp-hero__meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-muted);
  /* Compactado a pedido explícito — esta clase es exclusiva del Hero
     (verificado, un solo uso en index.html), no hace falta escoparla. */
  font-size: 11px !important;
  margin-bottom: 14px !important;
}

/* ── HERO — IMAGEN IA (columna derecha) ───────────────────────────── */
/* Ancla la columna al borde INFERIOR del grid (no al centro, como
   antes) — `align-self:end` en un grid item solo tiene efecto cuando
   la fila es más alta que el propio contenido (acá pasa porque la
   columna de texto, con las 3 tarjetas de stats, es más alta que la
   imagen), así que esto es justo lo que hace falta para que el corte
   de los hombros de la imagen quede pegado abajo, sin hueco debajo, en
   vez de flotar centrado con espacio vacío arriba y abajo. Sin
   padding-bottom/margin-bottom propios — no había ninguno que sacar. */
.lp-hero__visual {
  position: relative;
  display: flex !important;
  /* flex-end (antes center) — la escala tan grande de rondas
     anteriores (147.5% efectivo) centrada en la columna se salía por
     los 2 lados; el lado izquierdo invadía el texto/los botones del
     Hero, que están en la OTRA columna del grid pero sin ningún
     `overflow:hidden` propio entre columnas (solo `.lp-hero` recorta,
     y eso pasa recién en el borde real de la pantalla). Alineando la
     imagen a la derecha, cualquier desborde de escala crece hacia el
     borde derecho (donde `.lp-hero` sí lo recorta limpio) en vez de
     hacia la izquierda. */
  justify-content: flex-end !important;
  align-items: flex-end;
  align-self: flex-end !important;
  width: 100% !important;
  /* Explícitos en 0 (con !important) a pedido puntual del brief — no
     había ningún margin/padding acá que estuviera empujando la
     columna hacia arriba, pero se dejan igual para que quede a prueba
     de que una regla futura los reintroduzca por accidente. */
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  /* line-height:0 — sin efecto real hoy (el único hijo es un <img>,
     block-level, no hay texto/contenido inline suelto acá que pueda
     dejar un hueco de line-height debajo), pero pedido explícito del
     brief y una salvaguarda barata contra el "espacio fantasma" que
     el line-height normal de un contenedor le agrega a una imagen
     inline si algún día deja de tener `display:block`. */
  line-height: 0;
  /* Sin animación/transición propias hoy tampoco (no había ninguna que
     sacar acá — la única que existía vivía en `.lp-hero__image`, ver
     abajo), pero se fuerzan igual a pedido explícito del brief. */
  animation: none !important;
  transition: none !important;
}
/* Resplandor de fondo azul/violeta neón detrás de la imagen — combina
   con el visor de circuitos iluminados de la imagen y con los halos
   `::before`/`::after` que ya tiene `.lp-hero` (mismos 2 colores del
   tema, `--neon-blue-glow`/`--violet-glow`). `inset` negativo lo hace
   más grande que la imagen para que el blur se note en los bordes. */
.lp-hero__visual::before {
  content: '';
  position: absolute;
  inset: -12%;
  background: radial-gradient(circle, var(--neon-blue-glow) 0%, var(--violet-glow) 45%, transparent 72%);
  filter: blur(50px);
  z-index: 0;
  pointer-events: none;
}
/* Sin animación flotante a partir de esta ronda — pedido explícito
   ("elimina cualquier animación o flotación"). Antes había un
   `@keyframes lp-hero-float` (traslación vertical ±15px/4s) + su
   fallback `@media (prefers-reduced-motion:reduce)`; ambos se
   borraron directamente en vez de dejarlos como CSS muerto, ya que
   `animation:none` los vuelve inalcanzables para siempre — no tenía
   sentido conservar un keyframe y un media query que nada vuelve a
   activar. Con la animación afuera, ya no hay ningún conflicto de
   cascada por el que evitar `!important` en `transform` (esa
   excepción de la ronda anterior ya no aplica — ver
   docs/CHANGELOG.md), así que ahora SÍ lleva `!important` como el
   resto de la regla. */
.lp-hero__image {
  position: relative;
  z-index: 1;
  display: block !important;
  animation: none !important;
  transition: none !important;
  /* max-width vuelve a subir (100%→120%) y la escala también
     (1.05→1.15) — esta ronda compacta la COLUMNA IZQUIERDA (texto/
     botones/stats, ver `.lp-hero__content` y afines más abajo) en vez
     de seguir achicando la imagen, así que hay margen real de sobra
     para agrandarla de nuevo sin volver a invadir nada. El anclaje a
     la derecha (`justify-content:flex-end` en `.lp-hero__visual` +
     `transform-origin:bottom right` acá abajo, de la ronda anterior)
     sigue siendo lo que evita que este agrandado vuelva a desbordar
     hacia la izquierda — se mantiene sin cambios. */
  max-width: 120% !important;
  height: auto !important;
  margin-bottom: 0 !important;
  align-self: flex-end !important;
  /* `transform-origin:bottom right` — sin cambios respecto a la ronda
     anterior, sigue siendo lo que hace que el crecimiento de `scale()`
     sea hacia arriba y hacia la izquierda-ADENTRO desde esa esquina
     fija, nunca hacia afuera por la izquierda. */
  transform-origin: bottom right !important;
  transform: scale(1.15) !important;
  /* Doble drop-shadow (azul + violeta) — refuerza el glow del fondo
     directamente sobre los bordes/transparencia del PNG, no solo
     alrededor del recuadro. */
  filter: drop-shadow(0 0 34px rgba(0, 242, 254, 0.4)) drop-shadow(0 0 60px rgba(127, 0, 255, 0.3));
}

/* ── STATS BAR ───────────────────────────────────────────────────── */
/* Ya no es una <section> propia (`.lp-stats`, ahora sin usar — vivía
   acá con `padding:0 24px 96px` y centraba `.lp-stats__grid` a
   `max-width:1000px;margin:0 auto` en su propia fila debajo del hero).
   El grid en sí (`.lp-stats__grid`) se define una sola vez más arriba,
   junto a `.lp-hero__content`, para que quede claro que ahora vive
   DENTRO de la columna izquierda del hero, ocupando su 100% de ancho
   en vez de auto-centrarse en la página. Las tarjetas individuales
   (`.lp-stat-card` y sus hijos) no cambiaron. */
.lp-stat-card {
  padding: 24px 20px;
  text-align: center;
  padding: 8px 12px !important;
}
.lp-stat-card__value {
  font-size: 26px;
  font-weight: 800;
  background: linear-gradient(120deg, var(--neon-blue), var(--violet));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-family: 'Consolas', 'SFMono-Regular', Menlo, monospace;
  font-size: 18px !important;
}
.lp-stat-card__label {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
  font-size: 11px !important;
}

/* ── CINTA DE INSIGNIAS/CONECTORES — zócalo/footer del Orquestador ─── */
/* Antes vivía en su propia <section class="lp-ecosystem"> ("Compatible
   Ecosystem & Institutional Feeds"), con su propio header y ~168px de
   padding vertical (96px del `section` genérico + 72px de acá) entre
   el Hero y el diagrama. Esa sección se eliminó y la cinta `.lp-marquee`
   se fusionó dentro de `#workflow-orchestrator` — primero (ronda
   anterior) como sub-cabecera arriba del lienzo; esta ronda la pide
   como "zócalo"/footer, ABAJO del lienzo de nodos en su lugar (mismo
   HTML, se movió de posición en el DOM — ver `index.html`). El
   `border-top` (en vez de `border-bottom`) separa la cinta del lienzo
   que ahora queda arriba suyo; color literal `rgba(255,255,255,0.1)`
   pedido puntual del brief, distinto del token `--border` (que tiene
   tinte cian) que usa el resto del sitio. */
.lp-orch__feeds {
  padding: 20px 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.lp-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.lp-marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.lp-marquee:hover .lp-marquee__track { animation-play-state: paused; }

.lp-marquee__group {
  display: flex;
  align-items: center;
  gap: 16px;
  padding-right: 16px;
  flex-shrink: 0;
}

.lp-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 22px;
  border-radius: var(--r-pill);
  background: rgba(14, 22, 38, 0.6);
  white-space: nowrap;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
  transition: box-shadow var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.lp-pill i { color: var(--neon-blue); font-size: 15px; }
.lp-pill:hover {
  border-color: var(--border-focus);
  box-shadow: 0 0 22px var(--neon-blue-glow);
  transform: translateY(-2px);
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-marquee__track,
  .lp-globe__arc,
  .lp-globe__ping,
  .lp-globe__metric {
    animation: none;
  }
}

/* ── SECCIONES GENÉRICAS ─────────────────────────────────────────── */
.lp-section__header {
  text-align: center;
  max-width: 660px;
  margin: 0 auto 48px;
}
.lp-section__eyebrow {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--violet);
  margin-bottom: 10px;
}
.lp-section__header h2 {
  font-size: clamp(26px, 3.5vw, 36px);
  font-weight: 800;
  letter-spacing: -0.3px;
  /* Balancea el wrap entre líneas (evita 1 palabra sola colgando en la
     última línea) — pedido a raíz del título de Arquitectura Cuántica,
     pero la clase es compartida por TODOS los `<h2>` de encabezado de
     sección del sitio, así que el efecto es global a propósito (mejora
     pura, sin downside: en navegadores sin soporte de `text-wrap` esta
     línea simplemente se ignora y el wrap sigue como antes). */
  text-wrap: balance !important;
}
.lp-section__header p {
  margin-top: 12px;
  color: var(--text-secondary);
  font-size: 15px;
}

.lp-card {
  padding: 26px 24px;
  transition: box-shadow var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.lp-card:hover {
  border-color: var(--border-focus);
  box-shadow: 0 8px 30px rgba(0, 242, 254, 0.08);
  transform: translateY(-2px);
}
.lp-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-sm);
  font-size: 19px;
  margin-bottom: 16px;
}
.lp-card h3 { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.lp-card p { color: var(--text-secondary); font-size: 13.5px; }
.lp-card .lp-card__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
}
.status--live { background: var(--neon-blue-glow); color: var(--neon-blue); }
/* .status--spec (violeta, "En especificación"/antes "Módulo Activo"
   en Capas 1/2) quedó sin ningún uso en index.html — las 3 tarjetas de
   Arquitectura Cuántica ahora usan `.status--live` para que las 3
   insignias brillen igual (pedido explícito). Se borró la regla en
   vez de dejarla como CSS muerto. */

/* ── CAPAS DEL MOTOR (Quant Engine) ──────────────────────────────── */
#quant-engine .lp-layers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
#quant-engine .lp-card__icon.icon-1 { background: var(--neon-blue-glow); color: var(--neon-blue); }
#quant-engine .lp-card__icon.icon-2 { background: var(--violet-glow); color: #c9a3ff; }
#quant-engine .lp-card__icon.icon-3 { background: var(--neon-blue-glow); color: var(--neon-blue); }

/* ── PRIMITIVAS COMPARTIDAS DE "BADGE + HINT" DE DIAGRAMA ─────────── */
/* Estas clases nacieron para el diagrama de referencia del Quant
   Engine (eliminado por ser una copia redundante del Orquestador,
   ver docs/CHANGELOG.md) — de esa camada sobreviven
   `.lp-flow__badge`/`.lp-flow__scroll`/`.lp-flow__lines`, que el
   Orquestador sigue reusando tal cual. `.lp-flow__header` y
   `.lp-flow__hint` SÍ se borraron en esta ronda — la fila que los
   envolvía (`.lp-flow__header`, con el badge + el hint "Interactúa
   con los nodos...") se eliminó de `index.html` y el badge se montó
   directo dentro de `.lp-orch__diagram` como overlay absoluto (ver
   `.lp-orch__live-overlay` más abajo); el texto del hint no se
   reubicó a ningún otro lado, se descarta del todo — pedido explícito
   del brief, no un olvido. `.lp-flow` (el wrapper del diagrama viejo,
   `margin-top:56px`) y `.lp-flow__diagram`/`.lp-flow__edge`/
   `.lp-flow__node` (el lienzo, las líneas y las tarjetas de ESE
   diagrama en particular) ya se habían borrado en la ronda que
   eliminó el Quant Engine — no los usa nadie más. */
.lp-flow__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(0, 242, 254, 0.3);
  background: rgba(0, 242, 254, 0.06);
  color: #7fe8ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Badge "LIVE" del Orquestador — antes "Vista Comercial · Solo
   Lectura" (cyan, candado), ahora un punto verde pulsante + texto de
   estado en vivo. Verde real (`#00ff88`), el mismo tono que ya usan
   las partículas de comando/ejecución del propio diagrama (distinto
   del cyan que usa el badge `.status--live` de las tarjetas de
   arriba — acá se sigue la paleta interna del Orquestador, no la
   convención de esas tarjetas). */
.lp-flow__badge--live {
  border-color: rgba(0, 255, 136, 0.35);
  background: rgba(0, 255, 136, 0.08);
  color: #6dffc2;
}
.lp-flow__badge-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00ff88;
  box-shadow: 0 0 6px #00ff88;
  flex-shrink: 0;
  animation: lp-flow-badge-pulse 1.8s ease-in-out infinite;
}
@keyframes lp-flow-badge-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px #00ff88; }
  50% { opacity: 0.45; box-shadow: 0 0 2px #00ff88; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-flow__badge-dot { animation: none; }
}

/* Montado DENTRO del lienzo del Orquestador (`.lp-orch__diagram`, que
   ya tiene `position:relative`) en vez de en su propia fila arriba —
   `top`/`left` quedan en el mismo sistema de coordenadas de DISEÑO que
   usa todo el diagrama (ver DESIGN_W/DESIGN_H en main.js), así que se
   escalan junto con el resto del lienzo vía el `transform:scale()` que
   aplica `updateScale()` — el badge queda anclado a la esquina
   proporcionalmente, no en píxeles fijos de pantalla.
   `pointer-events:none` para que no intercepte el drag/hover de los
   nodos que caigan debajo/cerca de esa esquina. */
.lp-orch__live-overlay {
  position: absolute !important;
  top: 12px !important;
  left: 16px !important;
  z-index: 10 !important;
  pointer-events: none !important;
}

/* min-width:0 anula el "min-width:auto" implícito que hereda un item de
   flex de su contenido. Ya no queda ningún uso de esta clase dentro de
   un contenedor flex (el Orquestador dejó de compartir fila con un
   panel lateral), pero se deja puesto — es inofensivo fuera de flex y
   evita reintroducir el bug de overflow horizontal si en el futuro
   alguna sección vuelve a envolver este scroll en un flex/grid. */
.lp-flow__scroll { overflow-x: auto; padding-bottom: 4px; min-width: 0; }

/* Sigue en uso — la clase del <svg> del Orquestador
   (`<svg class="lp-flow__lines" id="lp-orch-lines">`). */
.lp-flow__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* @keyframes lp-flow-dash sigue en uso — la reutiliza `.lp-globe__arc`
   (los arcos del globo DePIN, sección aparte) — no se tocó aunque la
   regla `.lp-flow__edge` que también la usaba (del diagrama eliminado)
   sí se borró. */
@keyframes lp-flow-dash { to { stroke-dashoffset: -36; } }

/* ── DEPIN NODE ──────────────────────────────────────────────────── */
.lp-depin {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.lp-depin__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 30px !important;
  align-items: center !important;
}
.lp-depin__steps { list-style: none; margin-top: 20px; display: flex; flex-direction: column; gap: 14px; }
.lp-depin__steps li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  font-size: 14px;
  color: var(--text-secondary);
}
.lp-depin__steps li i { color: var(--neon-blue); margin-top: 3px; }
.lp-depin__panel {
  padding: 28px;
  text-align: center;
}
.lp-depin__panel i.fa-windows { font-size: 40px; color: var(--neon-blue); margin-bottom: 14px; }
.lp-depin__panel .lp-depin__filesize { margin-top: 10px; font-size: 12px; color: var(--text-muted); }

/* ── DEPIN GLOBE — RED VISUAL CON NODOS ANIMADOS (ilustrativo) ───── */
/* `.lp-globe-wrap` YA tenía `position:relative` desde que se escribió
   esta sección (confirmado leyendo el CSS antes de tocar nada, y
   verificado con Playwright en 11 anchos de viewport de 390 a 1920px:
   `getComputedStyle(wrap).position` da `"relative"` en todos). Se
   deja el `!important` que pide el brief de todas formas, como
   salvaguarda explícita — no hacía falta para resolver ningún bug
   real, pero tampoco tiene ningún costo. */
.lp-globe-wrap {
  position: relative !important;
  max-width: 1180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  /* margin/width/padding forzados a pedido explícito — ahora que
     `.lp-globe-wrap` vive DENTRO de `.lp-depin__inner` (columna
     derecha del grid, ver arriba) en vez de como fila propia debajo,
     ya no necesita su propio margen superior ni centrarse por su
     cuenta — el grid padre ya lo ubica. */
  margin: 0 !important;
  width: 100% !important;
  padding: 0 !important;
}

/* Oculto a pedido explícito — el aviso "vista ilustrativa..." tenía
   sentido como leyenda centrada debajo del globo cuando ocupaba una
   fila propia a todo el ancho; en la columna angosta del grid de 2
   columnas se ve fuera de lugar. Sigue en el DOM (no se borró el
   `<p>`), solo no se renderiza. */
.lp-globe__caption {
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: center;
  display: none !important;
}

.lp-globe {
  position: relative;
  width: min(460px, 100%);
  aspect-ratio: 1 / 1;
}

.lp-globe__sphere {
  position: absolute;
  inset: 6%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(0, 242, 254, 0.16), transparent 55%),
    radial-gradient(circle at 68% 72%, rgba(127, 0, 255, 0.16), transparent 55%),
    radial-gradient(circle at 50% 50%, #0f1a30, #060a12 72%);
  box-shadow: inset 0 0 60px rgba(0, 242, 254, 0.12), 0 0 60px rgba(127, 0, 255, 0.1);
  overflow: hidden;
}
.lp-globe__lat, .lp-globe__long {
  position: absolute;
  border: 1px solid rgba(0, 242, 254, 0.16);
  border-radius: 50%;
}
.lp-globe__lat--1 { inset: 18% 0; }
.lp-globe__lat--2 { inset: 38% 0; }
.lp-globe__lat--3 { inset: 58% 0; }
.lp-globe__long--1 { inset: 0 18%; }
.lp-globe__long--2 { inset: 0 38%; }
.lp-globe__long--3 { inset: 0 58%; }

.lp-globe__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-globe__arc {
  fill: none;
  stroke: var(--neon-blue);
  stroke-width: 1.6;
  opacity: 0.6;
  stroke-dasharray: 5 9;
  animation: lp-flow-dash 1.4s linear infinite;
}

.lp-globe__node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.lp-globe__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon-blue);
  box-shadow: 0 0 10px var(--neon-blue), 0 0 20px var(--neon-blue-glow);
  display: block;
}
.lp-globe__ping {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--neon-blue);
  animation: lp-globe-ping 2.4s ease-out infinite;
}
.lp-globe__label {
  font-size: 10px;
  font-weight: 600;
  color: var(--text-secondary);
  white-space: nowrap;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
@keyframes lp-globe-ping {
  0% { transform: scale(1); opacity: 0.7; }
  100% { transform: scale(4.2); opacity: 0; }
}

.lp-globe__metric {
  position: static;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  width: 100%;
  max-width: 340px;
  font-size: 11.5px;
}
.lp-globe__metric i { font-size: 18px; color: var(--neon-blue); flex-shrink: 0; }
.lp-globe__metric strong { display: block; font-size: 11.5px; color: var(--text-primary); }
.lp-globe__metric span { color: var(--text-secondary); font-size: 11px; }

@keyframes lp-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (min-width: 901px) {
  .lp-globe-wrap { display: block; min-height: 540px; padding-top: 8px; }
  .lp-globe__caption { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
  .lp-globe { position: absolute; left: 50%; top: 54%; transform: translate(-50%, -50%); }
  .lp-globe__metric {
    position: absolute;
    width: auto;
    animation: lp-float 5s ease-in-out infinite;
  }
  .lp-globe__metric--1 { top: 10%; left: 2%; animation-delay: 0s; }
  .lp-globe__metric--2 { top: 48%; right: 2%; animation-delay: 1.2s; }
  /* Antes `bottom:6%` (≈32px sobre los 540px de min-height, ya casi
     idéntico al `bottom:30px` pedido acá) + `left:12%` — se deja en
     su propio carril a la izquierda (no se cambió a `right`, que
     hubiera quedado pisando a `--2`) un poco más afuera (12%→5%)
     para separarlo más del globo. `top:auto` no cambia nada en la
     práctica: nunca tuvo `top` seteado, así que ya heredaba `auto`
     por default. */
  .lp-globe__metric--3 {
    top: auto !important;
    bottom: 30px !important;
    left: 5% !important;
    margin: 0 !important;
    animation-delay: 2.4s;
  }
}

/* ── TELEMETRÍA MULTI-BROKER ─────────────────────────────────────── */
.lp-brokers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 40px;
}
.lp-broker-chip {
  padding: 20px 16px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.lp-broker-chip i { font-size: 22px; color: var(--neon-blue); }
.lp-broker-chip span { font-size: 13px; font-weight: 600; color: var(--text-primary); }

/* ── TOKENOMICS / WHITEPAPER ─────────────────────────────────────── */
.lp-tokenomics__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}
.lp-vault-card {
  padding: 20px;
  text-align: center;
}
.lp-vault-card__pct { font-size: 28px; font-weight: 800; font-family: 'Consolas', monospace; }
.lp-vault-card__label { margin-top: 6px; font-size: 12px; color: var(--text-secondary); }
.lp-vault-card__addr {
  display: block;
  margin-top: 8px;
  font-family: 'Consolas', 'SFMono-Regular', Menlo, monospace;
  font-size: 11px;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.lp-vault-card__addr:hover { color: var(--neon-blue); }

.lp-contract-box {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: 'Consolas', 'SFMono-Regular', Menlo, monospace;
  font-size: 12.5px;
}
.lp-contract-box__row { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.lp-contract-box__row span:first-child { color: var(--text-muted); }
.lp-contract-box__row span:last-child { color: var(--text-primary); }
.lp-contract-box a { color: var(--neon-blue); }
.lp-contract-box__links { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }

/* ── GEMINI AI ACADEMY ───────────────────────────────────────────── */
#gemini-ai-academy .lp-layers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.lp-xp-bar {
  margin-top: 18px;
  height: 8px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  overflow: hidden;
}
.lp-xp-bar__fill {
  height: 100%;
  width: 68%;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--violet), var(--neon-blue));
}
.lp-xp-meta { display: flex; justify-content: space-between; margin-top: 8px; font-size: 11.5px; color: var(--text-muted); }

/* ── BÚNKER ANALYTICS ────────────────────────────────────────────── */
.lp-bunker {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.lp-bunker__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.lp-bunker__list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.lp-bunker__list li { display: flex; gap: 10px; font-size: 14px; color: var(--text-secondary); }
.lp-bunker__list li i { color: var(--neon-blue); margin-top: 3px; }

.lp-equity-panel { padding: 18px; }
.lp-bunker-terminal__metrics {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  margin-top: 12px;
}
.lp-equity-panel__line {
  margin-top: 14px;
  height: 90px;
  border-radius: var(--r-sm);
  background:
    linear-gradient(180deg, rgba(0, 242, 254, 0.12), transparent),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 40px);
  position: relative;
  overflow: hidden;
}
.lp-equity-panel__line svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ── SHEETS / PAPER TRADING ──────────────────────────────────────── */
.lp-sheets__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.lp-sheets__list { list-style: none; display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
.lp-sheets__list li { display: flex; gap: 10px; font-size: 14px; color: var(--text-secondary); }
.lp-sheets__list li i { color: #c9a3ff; margin-top: 3px; }

/* ── ORQUESTADOR DE FLUJO DE TRABAJO — DIAGRAMA COMERCIAL ─────────── */
/* Padding vertical propio, más ajustado que el `96px` del selector
   genérico `section` (ver arriba del archivo) — con la sección de
   Ecosistema/Compatibilidad eliminada (fusionada adentro, ver
   `.lp-orch__feeds`), esta sección pasó a ser la que sigue
   directamente al Hero. Compactado más todavía en esta ronda
   (48px→15px arriba, 48px→20px abajo, ambos con `!important` a pedido
   explícito) — con el `padding-bottom:0` del Hero de una ronda
   anterior, el tramo Hero→Orquestador queda casi sin aire de por
   medio. Horizontal (24px) sin cambios, no lo pedía el brief. */
#workflow-orchestrator {
  padding: 48px 24px;
  margin-top: 0 !important;
  padding-top: 10px !important;
  padding-bottom: 20px !important;
}

/* .lp-orch__scroll (compuesta con .lp-flow__scroll) es hermana de
   .lp-container en el HTML (no su hija) por cómo está armado el
   markup, pero respeta el mismo `max-width:1180px; margin:0 auto` que
   `.lp-container` — alineado con los márgenes del sitio (ronda
   anterior).

   DESKTOP (≥992px): `overflow-x:hidden` — ya NO hay scroll horizontal
   posible acá. El lienzo (`.lp-orch__diagram`, ver abajo) tiene un
   ancho de DISEÑO fijo (`DESIGN_W=1500px` en main.js) más angosto que
   antes (1800→1500, compactando el espaciado entre zonas) y
   `updateScale()` en main.js lo escala (`transform:scale()`) para que
   SIEMPRE quepa dentro del espacio real disponible — nunca desborda,
   nunca hace falta scrollear. Ver `.lp-orch__scale` más abajo para
   cómo se evita el bug clásico de "doble escalado".

   MOBILE/TABLET (<992px, media query al final del archivo): vuelve al
   comportamiento de rondas anteriores — `overflow-x:auto` + pan/swipe
   real, SIN auto-escala (factor siempre 1 en JS) — encoger el texto a
   un tamaño ilegible en un teléfono para eliminar un scroll horizontal
   que de por sí ya es la forma nativa de explorar contenido ancho en
   mobile no es una mejora real, así que ahí se mantiene el lienzo a
   tamaño completo y el pan de siempre (hint "Deslizá para explorar"
   incluido). */
.lp-orch__scroll {
  max-width: 1180px;
  margin: 32px auto 0;
  overflow-x: hidden;
  border-radius: var(--r-card);
  border: 1px solid var(--border);
  background-color: #060a12;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.09) 1px, transparent 1px);
  background-size: 22px 22px;
}

.lp-orch__pad {
  padding: 0 32px;
}

/* Wrapper cuyo tamaño en px lo calcula `updateScale()` en main.js
   (= DESIGN_W/DESIGN_H * factor de escala real) — al ser un bloque de
   flujo normal con ese tamaño exacto, `margin:0 auto` lo centra solo
   dentro de `.lp-orch__pad` sin ninguna matemática de centrado manual
   (funciona igual si el factor es 1 — sobra espacio a los costados —
   que si es <1 — llena el ancho disponible exacto). */
.lp-orch__scale {
  margin: 0 auto;
  overflow: hidden;
}

.lp-orch__diagram {
  position: relative;
  /* Tamaño de DISEÑO fijo (1500×700, ver DESIGN_W/DESIGN_H en
     main.js) — ya NO es `width:100%` fluido. Es el sistema de
     coordenadas que usan los left/top % de cada nodo, el viewBox del
     SVG y el drag por puntero, TOTALMENTE DESACOPLADO de cuánto se
     vea en pantalla (main.js nunca lee `getBoundingClientRect()` de
     este elemento para esa matemática, solo estas dos constantes) —
     así el `transform:scale()` que aplica `updateScale()` es un
     escalado puramente visual, sin el bug de "doble escalado" de una
     ronda mucho anterior (leer el tamaño YA escalado y reusarlo como
     si fuera el tamaño de diseño). `transform-origin` en la esquina
     superior izquierda para que coincida con cómo `.lp-orch__scale`
     mide su propio tamaño. 1800→1500 de ancho de diseño: comprime el
     espaciado horizontal entre Zona 1 (Brokers) y Zona 4 (MT5/
     Academia) sin tocar ningún nodo — el sistema es 100% porcentual,
     así que reducir esta única constante compacta TODO el clúster
     proporcionalmente. */
  width: 1500px;
  height: 700px;
  transform-origin: top left;
}

.lp-orch__node {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  max-width: 190px;
  border-radius: var(--r-sm);
  background: var(--bg-card);
  border: 1px solid var(--border);
  backdrop-filter: blur(var(--blur-glass));
  -webkit-backdrop-filter: blur(var(--blur-glass));
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  cursor: grab;
  user-select: none;
  touch-action: none;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, opacity 0.2s ease, filter 0.2s ease;
  z-index: 2;
}
.lp-orch__node i { font-size: 15px; flex-shrink: 0; }
.lp-orch__node small { display: block; font-weight: 500; color: var(--text-muted); font-size: 10px; }
.lp-orch__node:hover { border-color: var(--border-focus); }
.lp-orch__node.is-dragging {
  cursor: grabbing;
  box-shadow: 0 0 26px var(--neon-blue-glow);
  z-index: 5;
}
.lp-orch__node--wide { max-width: 210px; }

/* Zonas 1 y 4 (externas, mercado/usuarios) borde cian; Zonas 2 y 3
   (centro, cerebro/infraestructura) borde violeta. */
.lp-orch__node--z1, .lp-orch__node--z4 { border-color: rgba(0, 242, 254, 0.35); }
.lp-orch__node--z1 i, .lp-orch__node--z4 i { color: var(--neon-blue); }
.lp-orch__node--z2, .lp-orch__node--z3 { border-color: rgba(127, 0, 255, 0.4); }
.lp-orch__node--z2 i, .lp-orch__node--z3 i { color: #c9a3ff; }

/* Enjambre Multi-Agente — sub-nodos "satélite" compactos, en órbita
   cerrada alrededor de Gemini: bloque bien más chico que un nodo
   normal, borde/ícono en el mismo magenta-violeta que sus partículas,
   para leerse a simple vista como "parte del enjambre de IA". */
.lp-orch__node--satellite {
  max-width: 128px;
  padding: 7px 10px;
  gap: 7px;
  font-size: 10.5px;
  border-color: rgba(192, 38, 211, 0.5);
  box-shadow: 0 0 14px rgba(192, 38, 211, 0.16), 0 4px 14px rgba(0, 0, 0, 0.4);
}
.lp-orch__node--satellite i { font-size: 12px; color: #e879f9; }
.lp-orch__node--satellite small { font-size: 8.5px; }
/* Badge propio de "Native Google AI Sync" — mismo patrón que el badge
   de Gemini, pero en magenta/violeta (no verde) para que combine con
   el resto del Enjambre en vez de tomar el color reservado al núcleo. */
.lp-orch__node--satellite .lp-orch__badge {
  margin-top: 3px;
  padding: 1px 6px;
  font-size: 8px;
  background: rgba(192, 38, 211, 0.16);
  border-color: rgba(192, 38, 211, 0.45);
  color: #f0abfc;
}

.lp-orch__node--hub {
  max-width: 220px;
  padding: 14px 18px;
  background: linear-gradient(145deg, rgba(127, 0, 255, 0.2), rgba(18, 26, 46, 0.75));
  border-color: #00ff88;
  /* Resplandor neón DOBLE, a propósito: verde (comanda hacia la Red
     DePIN/Brokers) + violeta (recibe al Enjambre Multi-Agente) — dos
     capas de box-shadow apiladas, no una mezcla de color única, para
     que se lean los dos roles del nodo por separado. */
  box-shadow:
    0 0 22px rgba(0, 255, 136, 0.2),
    0 0 40px rgba(192, 38, 211, 0.22);
}
.lp-orch__node--hub i { color: #00ff88; font-size: 18px; }
.lp-orch__badge {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  background: rgba(0, 255, 136, 0.14);
  border: 1px solid rgba(0, 255, 136, 0.4);
  color: #00ff88;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
}

/* ── Paleta de partículas: verde = comando/ejecución/señal (desde
   Gemini hacia la Red DePIN), azul = telemetría/feedback (de vuelta
   hacia Gemini/Pool/Token — INCLUYE el Pipeline Cuántico pesado,
   Brokers→Plugin→Compute Workers→Pool→Vault, el eje visual principal),
   azul SUTIL = las 2 fuentes secundarias reconectadas (TradingView,
   Institutional MT5 Telemetry → Vault) — mismo tono, pero claramente
   más tenue para no competir visualmente con el Pipeline Cuántico
   pesado, violeta/magenta = Enjambre Multi-Agente, dorado/amarillo =
   Economía del Token (Pool → Token → Staking Vault), a propósito
   distinto de todo lo demás para que la ruta de recompensas/DeFi se
   lea aparte del resto del circuito. Mismo trazado base sutil para
   todas, solo cambia el color de la partícula viajera y un tinte leve
   en la curva. ───────────────────────────────────────────────────── */
.lp-orch__edge { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 1.6; transition: opacity 0.4s ease, stroke-width 0.2s ease; }
.lp-orch__particle { transition: opacity 0.4s ease; }
.lp-orch__edge--green { stroke: rgba(0, 255, 136, 0.22); }
.lp-orch__edge--blue { stroke: rgba(0, 242, 254, 0.22); }
.lp-orch__edge--blue-soft { stroke: rgba(0, 242, 254, 0.12); }
.lp-orch__edge--violet, .lp-orch__edge--violet-fast { stroke: rgba(192, 38, 211, 0.24); }
.lp-orch__edge--gold { stroke: rgba(245, 158, 11, 0.24); }
.lp-orch__particle--green { fill: #00ff88; filter: drop-shadow(0 0 6px #00ff88); }
.lp-orch__particle--blue { fill: var(--neon-blue); filter: drop-shadow(0 0 6px var(--neon-blue)); }
/* Azul sutil — partícula más chica y con menos glow que el azul
   "pesado" del pipeline principal, a propósito, para que se lea como
   secundaria de un vistazo. */
.lp-orch__particle--blue-soft { fill: rgba(0, 242, 254, 0.55); filter: drop-shadow(0 0 3px rgba(0, 242, 254, 0.4)); }
.lp-orch__particle--violet { fill: #e879f9; filter: drop-shadow(0 0 6px #c026d3); }
/* "-fast" es la misma familia violeta/magenta pero con partícula algo
   más grande y glow más intenso — simboliza la cadena de "alta
   velocidad" Gemini ⇄ Native Google AI Sync ⇄ MT5 Quant Terminals; la
   velocidad REAL de avance por frame se controla en JS (ver
   PARTICLE_SPEED en main.js), esto es solo el refuerzo visual. */
.lp-orch__particle--violet-fast { fill: #f0abfc; filter: drop-shadow(0 0 8px #d946ef); }
.lp-orch__particle--gold { fill: var(--amber); filter: drop-shadow(0 0 6px var(--amber)); }

/* ── Resaltado dinámico (hover / click) — ilumina las aristas del nodo
   activo y atenúa todo lo demás. ─────────────────────────────────── */
.lp-orch__node.is-dimmed { opacity: 0.32; filter: grayscale(55%); }
.lp-orch__node.is-focused { border-color: #fff; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), 0 0 24px rgba(255, 255, 255, 0.25); }
.lp-orch__edge.is-dimmed { opacity: 0.06; }
.lp-orch__edge.is-active {
  stroke-width: 2.6;
  opacity: 1 !important;
}
.lp-orch__edge--green.is-active { stroke: #00ff88; filter: drop-shadow(0 0 5px rgba(0, 255, 136, 0.6)); }
.lp-orch__edge--blue.is-active, .lp-orch__edge--blue-soft.is-active { stroke: var(--neon-blue); filter: drop-shadow(0 0 5px rgba(0, 242, 254, 0.6)); }
.lp-orch__edge--violet.is-active, .lp-orch__edge--violet-fast.is-active { stroke: #c026d3; filter: drop-shadow(0 0 5px rgba(192, 38, 211, 0.65)); }
.lp-orch__edge--gold.is-active { stroke: var(--amber); filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.65)); }
.lp-orch__particle.is-dimmed { opacity: 0.08; }

/* ── Tour Autoguiado — bucle infinito de 5 estados (ver TOUR_GROUPS en
   main.js): Estado 0 = todo al 100% (6s), Estados 1-4 = un flujo
   iluminado cada uno (3.5s c/u), vuelve al Estado 0 y repite sin fin
   mientras nadie interactúe. Atenuación propia (15%), DISTINTA del 6%
   que usa el resaltado manual por hover/click de acá arriba — el tour
   es un "vistazo" pasivo de fondo, más suave a propósito; reutiliza
   `is-active` para el flujo iluminado (mismo glow que el hover). ─── */
.lp-orch__edge.is-tour-dimmed { opacity: 0.15; }
.lp-orch__particle.is-tour-dimmed { opacity: 0.15; }

/* Transición más lenta y pareja (0.8s, ease-in-out) SOLO mientras el
   bucle automático está corriendo — `main.js` le agrega la clase
   `is-tour-mode` al <svg> mientras el tour anima, y se la saca en
   cuanto una interacción real lo pausa. Sin esto, cada cambio de
   estado (cada 3.5s/6s) sería un salto brusco de opacidad; el
   resaltado manual por hover/click sigue usando la transición base
   (0.4s) de más arriba, más inmediata a propósito. Mayor especificidad
   que la regla base (2 clases vs. 1), así que gana sin importar el
   orden en la cascada. */
#lp-orch-lines.is-tour-mode .lp-orch__edge,
#lp-orch-lines.is-tour-mode .lp-orch__particle {
  transition: opacity 0.8s ease-in-out;
}

/* ── Hint de "deslizá para explorar" — solo mobile/tablet ─────────── */
.lp-orch__swipe-hint {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-muted);
  transition: opacity 0.3s ease;
}
.lp-orch__swipe-hint i { color: var(--neon-blue); animation: lp-swipe-hint-nudge 1.6s ease-in-out infinite; }
.lp-orch__swipe-hint.is-hidden { opacity: 0; pointer-events: none; }

@keyframes lp-swipe-hint-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
  .lp-orch__swipe-hint i { animation: none; }
}

/* Tablets y mobile (mismo umbral que el auto-centrado en JS) — el
   hint de swipe solo tiene sentido cuando el pan horizontal es la
   forma principal de explorar el lienzo. */
@media (max-width: 991px) {
  .lp-orch__swipe-hint { display: flex; }
  /* Mismo umbral que DESKTOP_BREAKPOINT en main.js — acá abajo se
     desactiva la auto-escala (factor siempre 1) y vuelve el pan/scroll
     real de siempre, así que hace falta permitirlo de nuevo (el
     desktop lo tiene en `hidden`, ver más arriba). */
  .lp-orch__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* Mobile angosto — más margen invisible en los extremos del scroll
   para que, al deslizar hasta el final, los nodos de punta (TradingView
   API, Clientes MT5) no queden pegados al borde de la pantalla. */
@media (max-width: 768px) {
  .lp-orch__pad { padding: 0 48px; }
}

/* ── HERO — vuelve a 1 columna en mobile/tablet ───────────────────── */
@media (max-width: 991px) {
  .lp-hero__inner {
    grid-template-columns: 1fr;
    gap: 40px;
    text-align: center;
  }
  .lp-hero__content {
    align-items: center;
    text-align: center;
  }
  .lp-hero__actions { justify-content: center; }
  /* La imagen se achica un poco más en mobile angosto para no competir
     con el texto por espacio vertical arriba del pliegue. */
  .lp-hero__visual { max-width: 340px; margin: 0 auto; }
}

/* ── FOOTER ──────────────────────────────────────────────────────── */
.lp-footer {
  border-top: 1px solid var(--border);
  padding: 48px 24px 28px;
}
.lp-footer__inner {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.lp-footer__top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px;
}
.lp-footer__links { display: flex; gap: 22px; flex-wrap: wrap; }
.lp-footer__links a { font-size: 13px; color: var(--text-secondary); }
.lp-footer__links a:hover { color: var(--text-primary); }

.lp-legal-notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  border-radius: var(--r-sm);
  background: var(--amber-glow);
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.lp-legal-notice i { color: var(--amber); margin-top: 2px; flex-shrink: 0; }
.lp-legal-notice p { font-size: 12px; color: var(--text-secondary); line-height: 1.6; }
.lp-legal-notice strong { color: var(--text-primary); }

.lp-footer__copy {
  font-size: 12px;
  color: var(--text-muted);
  text-align: center;
}

/* ── RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .lp-stats__grid { grid-template-columns: 1fr; }
  #quant-engine .lp-layers,
  #gemini-ai-academy .lp-layers { grid-template-columns: 1fr; }
  .lp-tokenomics__grid { grid-template-columns: repeat(2, 1fr); }
  .lp-brokers__grid { grid-template-columns: repeat(2, 1fr); }
  .lp-depin__inner, .lp-bunker__inner, .lp-sheets__inner { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .lp-nav { position: fixed; top: var(--topbar-h); left: 0; right: 0; background: var(--bg-topbar); backdrop-filter: blur(var(--blur-glass)); flex-direction: column; align-items: flex-start; padding: 18px 24px; gap: 16px; border-bottom: 1px solid var(--border); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: var(--t-smooth); }
  .lp-nav.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; }
  .lp-nav-toggle { display: block; }
  .lp-topbar__actions .lp-cta-secondary { display: none; }
  .lp-topbar__actions .lp-cta-platform { padding: 8px 14px; }
  .lp-stats__grid { grid-template-columns: 1fr; }
  section { padding: 64px 18px; }
}