/* ═══════════════════════════════════════════════════════════
   NexxoIA — Crystal Liquid UI (nav, botones, flechas)
   ═══════════════════════════════════════════════════════════ */

:root {
  --crystal-teal: #14b8a6;
  --crystal-border-outer: rgba(255, 255, 255, 0.38);
  --crystal-border-inner: rgba(20, 184, 166, 0.55);
  --crystal-glass-dark: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.14) 0%,
    rgba(12, 28, 38, 0.82) 42%,
    rgba(6, 14, 22, 0.9) 100%
  );
  --crystal-glass-light: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(25, 45, 68, 0.78) 48%,
    rgba(15, 30, 50, 0.88) 100%
  );
  --crystal-shadow:
    0 0 0 1px var(--crystal-border-outer),
    0 0 0 2px var(--crystal-border-inner),
    0 10px 36px rgba(0, 0, 0, 0.38),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --crystal-shadow-hover:
    0 0 0 1px rgba(255, 255, 255, 0.48),
    0 0 0 2px rgba(20, 184, 166, 0.75),
    0 14px 42px rgba(0, 0, 0, 0.42),
    0 0 32px rgba(20, 184, 166, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.nav-pill.crystal-nav {
  backdrop-filter: blur(22px) saturate(1.45);
  -webkit-backdrop-filter: blur(22px) saturate(1.45);
  background: var(--crystal-glass-dark) !important;
  border: none !important;
  box-shadow: var(--crystal-shadow) !important;
}

body.theme-dark .nav-pill.crystal-nav {
  background: var(--crystal-glass-light) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.42),
    0 0 0 2px rgba(79, 208, 197, 0.5),
    0 12px 40px rgba(0, 0, 0, 0.32),
    inset 0 1px 0 rgba(255, 255, 255, 0.16) !important;
}

.crystal-nav .nav-link.active {
  background: linear-gradient(155deg, rgba(20, 184, 166, 0.28) 0%, rgba(12, 28, 38, 0.65) 100%);
  box-shadow: 0 0 0 1px rgba(20, 184, 166, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.btn-dark,
a.btn-dark,
button.btn-dark,
.cf-btn,
.nav-overlay-cta {
  border: none !important;
  backdrop-filter: blur(12px) saturate(1.3);
  -webkit-backdrop-filter: blur(12px) saturate(1.3);
  background: linear-gradient(155deg, rgba(94, 234, 212, 0.95) 0%, rgba(20, 184, 166, 0.92) 38%, rgba(13, 148, 136, 0.96) 100%) !important;
  color: #042a24 !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.45), 0 0 0 2px rgba(20, 184, 166, 0.55), 0 8px 28px rgba(20, 184, 166, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45) !important;
}

.btn-dark:hover,
a.btn-dark:hover,
.cf-btn:hover:not(:disabled),
.nav-overlay-cta:hover {
  transform: translateY(-2px) scale(1.02) !important;
  box-shadow: var(--crystal-shadow-hover) !important;
}

.btn-outline,
a.btn-outline {
  border: none !important;
  backdrop-filter: blur(14px) saturate(1.25);
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.12) 0%, rgba(10, 24, 32, 0.55) 100%) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 0 2px rgba(20, 184, 166, 0.32), 0 6px 22px rgba(0, 0, 0, 0.28) !important;
}

/* ── Flecha hero (siguiente sección) ── */
.section-nav-float--hero {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  z-index: 200;
  pointer-events: none;
  filter: drop-shadow(0 8px 24px rgba(0, 0, 0, 0.55));
}

.section-nav-float--hero .nav-arrows {
  pointer-events: none;
}

.section-nav-float--hero .nav-arrows > * {
  pointer-events: auto;
}

.hero:has(.section-nav-float--hero) {
  overflow: visible !important;
}

/* ── Volver arriba (fija, esquina inferior derecha) ── */
a.back-to-top.crystal-arrow {
  position: fixed !important;
  left: auto !important;
  right: max(20px, env(safe-area-inset-right, 0px)) !important;
  bottom: max(28px, env(safe-area-inset-bottom, 0px)) !important;
  top: auto !important;
  z-index: 100002;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin: 0;
  text-decoration: none;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  filter: drop-shadow(0 8px 28px rgba(0, 0, 0, 0.55));
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease,
    transform 0.28s cubic-bezier(0.34, 1.2, 0.64, 1);
}

a.back-to-top.crystal-arrow:focus-visible {
  outline: 2px solid rgba(20, 184, 166, 0.85);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  a.back-to-top.crystal-arrow {
    right: max(14px, env(safe-area-inset-right, 0px)) !important;
    bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
    width: 48px;
    height: 48px;
  }
}

.nav-arrow.crystal-arrow,
a.back-to-top.crystal-arrow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: none;
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  background:
    radial-gradient(140% 130% at 28% 16%, rgba(255, 255, 255, 0.75) 0%, transparent 50%),
    radial-gradient(90% 90% at 72% 88%, rgba(0, 0, 0, 0.2) 0%, transparent 55%),
    linear-gradient(155deg, rgba(240, 245, 250, 0.55) 0%, rgba(160, 175, 195, 0.4) 45%, rgba(90, 100, 120, 0.5) 100%) !important;
  color: #1e293b !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.75),
    0 0 0 2px rgba(20, 184, 166, 0.65),
    0 0 24px rgba(20, 184, 166, 0.35),
    0 12px 36px rgba(0, 0, 0, 0.45),
    inset 0 2px 6px rgba(255, 255, 255, 0.65),
    inset 0 -6px 14px rgba(0, 0, 0, 0.15) !important;
  flex-shrink: 0;
}

.nav-arrow.crystal-arrow svg,
a.back-to-top.crystal-arrow svg {
  width: 22px;
  height: 22px;
  stroke-width: 2.25;
}

.nav-arrow.crystal-arrow:hover,
a.back-to-top.crystal-arrow:hover {
  transform: translateY(-3px) scale(1.06) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.65),
    0 0 0 2px rgba(20, 184, 166, 0.75),
    0 14px 38px rgba(0, 0, 0, 0.4),
    0 0 28px rgba(20, 184, 166, 0.28),
    inset 0 2px 5px rgba(255, 255, 255, 0.55) !important;
}

body.theme-dark .nav-arrow.crystal-arrow,
body.theme-dark a.back-to-top.crystal-arrow {
  background:
    radial-gradient(140% 130% at 28% 16%, rgba(255, 255, 255, 0.5) 0%, transparent 48%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.28) 0%, rgba(160, 175, 195, 0.22) 50%, rgba(100, 115, 135, 0.32) 100%) !important;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.5),
    0 0 0 2px rgba(79, 208, 197, 0.55),
    0 10px 30px rgba(0, 0, 0, 0.3),
    inset 0 2px 4px rgba(255, 255, 255, 0.45) !important;
}

/* Overlay móvil */
.nav-overlay-cta {
  letter-spacing: -0.01em;
}

.nav-overlay-link {
  border-radius: 100px;
  transition: background 0.22s ease, box-shadow 0.22s ease;
}

.nav-overlay-link:hover {
  box-shadow: inset 0 0 0 1px rgba(20, 184, 166, 0.25);
}

/* Texto sólo para lectores de pantalla.
   Los artefactos rotulan su título en .brand-meta, un span dentro del header
   de la app; el documento se quedaba sin h1 y sin encabezado de nivel 1 en el
   outline. clip-path en vez de display:none para que siga siendo anunciado. */
.nx-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ═══════════════════════════════════════════════════════════
   NexxoIA — Hero Video Scroll Scrub
   Escenario de vídeo arriba + panel de texto propio abajo. El texto
   nunca se pinta sobre el vídeo: en reposo cada uno tiene su zona; al
   hacer scroll el panel se retira y el escenario se expande a pantalla
   completa mientras el vídeo avanza (vuelo por la red de nodos).
   --stage-p (0→1) lo escribe js/hero-video-scrub.js.
   ═══════════════════════════════════════════════════════════ */

.hero-scroll-track {
  position: relative;
  width: 100%;
  height: 240vh;
}

.hero-scroll-track .hero {
  /* Geometría del escenario en reposo:
     · arranca bajo la nav flotante (--stage-top)
     · alto = el menor entre ~58% del viewport y el alto 16:9 del ancho,
       así el logotipo del vídeo (franja central del fotograma) nunca se
       recorta por los lados, ni en escritorio ni en móvil vertical. */
  --stage-p: 0;
  --stage-top: 78px;
  --stage-h0: min(calc(58svh - 40px), 56.25vw);
  --stage-fade: 36px;

  position: sticky !important;
  top: 0 !important;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100svh;
  min-height: 0 !important;
  max-height: 100svh;
  overflow: hidden !important;
  padding: 0 !important;
  display: block !important;
  text-align: center;
  box-sizing: border-box;
}

@media (max-width: 768px) {
  .hero-scroll-track {
    height: 200vh;
  }
  .hero-scroll-track .hero {
    /* Escenario + texto se centran como un único bloque (~300px de texto) */
    --stage-top: calc(72px + max(0px, (100svh - 72px - 56.25vw - 320px) / 2));
    --stage-h0: 56.25vw;
    --stage-fade: 22px;
  }
}

/* ── Escenario de vídeo ── */
.hero-video-wrap {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--stage-top) * (1 - var(--stage-p)));
  height: calc(var(--stage-h0) + (100% - var(--stage-h0)) * var(--stage-p));
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
  background: transparent;
  /* Bordes difuminados hacia el fondo de la página: sin cortes duros.
     Se desvanecen al expandirse a pantalla completa. */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 calc(var(--stage-fade) * (1 - var(--stage-p))),
    #000 calc(100% - var(--stage-fade) * (1 - var(--stage-p))),
    transparent 100%
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 calc(var(--stage-fade) * (1 - var(--stage-p))),
    #000 calc(100% - var(--stage-fade) * (1 - var(--stage-p))),
    transparent 100%
  );
  will-change: top, height;
}

.hero-video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 50%;
  pointer-events: none;
  display: block;
}

/* Viñeta muy sutil: sólo da profundidad cuando el vuelo ocupa la pantalla */
.hero-video-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: var(--stage-p);
  background: radial-gradient(
    ellipse 80% 75% at 50% 50%,
    transparent 55%,
    rgba(4, 12, 18, 0.55) 100%
  );
}

/* ── Panel de texto (zona propia, bajo el escenario) ── */
.hero-scroll-track .hero-content {
  position: absolute !important;
  left: 0;
  right: 0;
  top: calc(var(--stage-top) + var(--stage-h0));
  bottom: 0;
  z-index: 3;
  max-width: none !important;
  margin: 0 !important;
  padding: 8px 24px clamp(20px, 4svh, 44px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  will-change: transform, opacity;
}

.hero-scroll-track .hero-h1 {
  font-size: clamp(28px, 3.1vw, 48px) !important;
  line-height: 1.08 !important;
  max-width: none !important;
  margin: 0 auto clamp(10px, 1.6svh, 16px) !important;
  white-space: nowrap;
}

.hero-scroll-track .hero-h1 br {
  display: none;
}

.hero-scroll-track .hero-sub {
  font-size: clamp(14.5px, 1.15vw, 17px) !important;
  line-height: 1.6;
  max-width: 600px !important;
  margin: 0 auto clamp(16px, 2.6svh, 26px) !important;
}

.hero-scroll-track .btn-group {
  margin: 0 !important;
}

@media (max-width: 768px) {
  .hero-scroll-track .hero-content {
    padding: 28px 22px 32px;
    justify-content: flex-start;
  }
  .hero-scroll-track .hero-h1 {
    white-space: normal;
    font-size: clamp(28px, 8vw, 40px) !important;
  }
  .hero-scroll-track .hero-h1 br {
    display: inline;
  }
}

/* Pantallas bajas en horizontal: compactar sin solapar el escenario */
@media (min-width: 769px) and (max-height: 640px) {
  .hero-scroll-track .hero {
    --stage-top: 72px;
    --stage-h0: min(calc(54svh - 40px), 56.25vw);
  }
  .hero-scroll-track .hero-sub {
    display: none;
  }
}

/* Rejilla de puntos fuera del vídeo: sólo decora el panel */
.hero-scroll-track .hero::before {
  opacity: 0.35 !important;
}

/* Transición suave hacia la siguiente sección */
.hero::after {
  content: "" !important;
  display: block !important;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 120px;
  z-index: 4;
  pointer-events: none;
  opacity: var(--stage-p, 1);
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--nx-bg-deep, #060e15) 100%
  ) !important;
}

body.theme-dark .hero::after {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    #f8f7f4 100%
  ) !important;
}

/* Movimiento reducido: sin pin ni scrub; escenario y panel estáticos */
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-track {
    height: auto;
  }
  .hero-scroll-track .hero {
    position: relative !important;
  }
}