/* VGLIA — landing pública.
   Presenta la plataforma antes de iniciar sesión. La estructura la marca el
   sticky scroller: un panel visual se queda anclado mientras el texto de al
   lado avanza, de modo que cada capacidad se explica sobre su propia imagen.

   Todo el efecto es CSS (position: sticky). El JavaScript sólo cambia qué
   panel se ve; si falla, la página sigue leyéndose entera. */

.landing { background: var(--vglia-bg-950); }

.landing__bg {
  position: fixed;
  inset: 0;
  /* Detrás de todo, como .app-backdrop. Un z-index: 0 aquí obligaría a elevar
     cada hijo de .landing, y esa regla pisaba el position del enlace de
     "saltar al contenido". */
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(70rem 46rem at 78% -6%, rgb(var(--vglia-blue-rgb) / 0.16), transparent 62%),
    radial-gradient(56rem 40rem at 8% 22%, rgb(var(--vglia-purple-rgb) / 0.1), transparent 60%),
    radial-gradient(50rem 40rem at 50% 108%, rgb(var(--vglia-cyan-rgb) / 0.08), transparent 62%);
}

/* --- Cabecera ------------------------------------------------------------- */

.landing-nav {
  position: sticky;
  top: 0;
  z-index: var(--z-topbar);
  display: flex;
  align-items: center;
  gap: var(--space-6);
  height: var(--topbar-height);
  padding-inline: var(--page-padding-x);
  background: rgb(3 10 18 / 0.72);
  backdrop-filter: blur(var(--blur-lg));
  -webkit-backdrop-filter: blur(var(--blur-lg));
  border-bottom: var(--border-width) solid var(--vglia-border-subtle);
}

.landing-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-left: auto;
}

.landing-nav__link {
  font-size: var(--text-sm);
  color: var(--vglia-text-secondary);
  transition: color var(--transition-fast) var(--ease-out);
}

.landing-nav__link:hover { color: var(--vglia-text-primary); }

@media (max-width: 860px) {
  .landing-nav__links .landing-nav__link { display: none; }
}

/* --- Portada -------------------------------------------------------------- */

.hero {
  display: grid;
  place-items: center;
  min-height: min(88vh, 760px);
  padding: var(--space-24) var(--page-padding-x) var(--space-20);
  text-align: center;
}

.hero__inner { max-width: 62rem; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  margin-bottom: var(--space-6);
  border-radius: var(--radius-pill);
  border: var(--border-width) solid rgb(var(--vglia-cyan-rgb) / 0.3);
  background: rgb(var(--vglia-cyan-rgb) / 0.08);
  color: var(--vglia-cyan-300);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
}

.hero__title {
  font-family: var(--font-display);
  font-size: var(--text-5xl);
  font-weight: var(--weight-semibold);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  color: var(--vglia-text-primary);
}

.hero__lead {
  max-width: 46rem;
  margin: var(--space-6) auto 0;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--vglia-text-secondary);
  text-wrap: pretty;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-8);
}

.hero__metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: var(--space-6);
  max-width: 48rem;
  margin: var(--space-16) auto 0;
  padding-top: var(--space-8);
  border-top: var(--border-width) solid var(--vglia-border-subtle);
}

.hero__metric-value {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--vglia-text-primary);
}

.hero__metric-label {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  color: var(--vglia-text-muted);
}

/* --- Sticky scroller ------------------------------------------------------ */
/* Dos columnas. La derecha se ancla (position: sticky) y va cambiando de panel
   mientras la izquierda desplaza un bloque de texto por capacidad. */

.scroller {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--space-16);
  max-width: var(--container-xl);
  margin-inline: auto;
  padding: var(--space-16) var(--page-padding-x) var(--space-24);
  align-items: start;
}

.scroller__steps { display: grid; }

/* Cada paso ocupa una pantalla: el panel anclado tiene tiempo de cambiar. */
.scroller__step {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 84vh;
  padding-block: var(--space-8);
  opacity: 0.32;
  transition: opacity var(--transition-slow) var(--ease-out);
}

.scroller__step.is-current { opacity: 1; }

.scroller__index {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--vglia-cyan-400);
}

.scroller__index::after {
  content: "";
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, var(--vglia-cyan-400), transparent);
}

.scroller__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--vglia-text-primary);
  text-wrap: balance;
}

.scroller__body {
  margin-top: var(--space-4);
  max-width: 40ch;
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--vglia-text-secondary);
}

.scroller__list {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding: 0;
  list-style: none;
}

.scroller__list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-sm);
  color: var(--vglia-text-secondary);
}

.scroller__list .vg-icon { color: var(--vglia-cyan-400); }

/* Panel anclado */
.scroller__sticky {
  position: sticky;
  top: calc(var(--topbar-height) + var(--space-8));
  height: min(74vh, 620px);
}

.scroller__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--card-padding);
  border-radius: var(--radius-xl);
  background: var(--vglia-glass-bg);
  backdrop-filter: blur(var(--blur-md));
  -webkit-backdrop-filter: blur(var(--blur-md));
  border: var(--border-width) solid var(--vglia-border-default);
  box-shadow: var(--shadow-xl);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition:
    opacity var(--transition-slow) var(--ease-out),
    transform var(--transition-slow) var(--ease-out);
  pointer-events: none;
  overflow: hidden;
}

.scroller__panel.is-current { opacity: 1; transform: none; pointer-events: auto; }

.scroller__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: var(--space-4);
  margin-bottom: var(--space-4);
  border-bottom: var(--border-width) solid var(--vglia-border-subtle);
}

.scroller__panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-4); }

/* Debajo de 1024px el efecto se apaga: en móvil un panel anclado estorba más
   de lo que aporta. Los paneles pasan a mostrarse en línea, uno tras otro. */
@media (max-width: 1024px) {
  .scroller { grid-template-columns: minmax(0, 1fr); gap: var(--space-8); }
  .scroller__step { min-height: 0; opacity: 1; padding-block: var(--space-6); }
  .scroller__sticky { position: static; height: auto; display: grid; gap: var(--space-6); }
  .scroller__panel {
    position: static;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    height: 380px;
  }
}

/* --- Rejilla de módulos --------------------------------------------------- */

.section {
  max-width: var(--container-xl);
  margin-inline: auto;
  padding: var(--space-20) var(--page-padding-x);
}

.section__head { max-width: 46rem; margin-bottom: var(--space-10); }

.section__title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight);
  color: var(--vglia-text-primary);
  text-wrap: balance;
}

.section__lead {
  margin-top: var(--space-3);
  font-size: var(--text-md);
  line-height: var(--leading-relaxed);
  color: var(--vglia-text-secondary);
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: var(--space-4);
}

.module-tile {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-6);
  border-radius: var(--radius-lg);
  border: var(--border-width) solid var(--vglia-border-subtle);
  background: var(--vglia-surface-900);
  transition: border-color var(--transition-normal) var(--ease-out),
              transform var(--transition-normal) var(--ease-out);
}

.module-tile:hover {
  border-color: rgb(var(--accent-rgb, var(--vglia-blue-rgb)) / 0.4);
  transform: translateY(-3px);
}

.module-tile__name {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--vglia-text-primary);
}

.module-tile__desc { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--vglia-text-secondary); }

/* --- Cierre y pie --------------------------------------------------------- */

.cta {
  max-width: var(--container-md);
  margin: var(--space-12) auto var(--space-24);
  padding: var(--space-16) var(--space-8);
  text-align: center;
  border-radius: var(--radius-xl);
  border: var(--border-width) solid var(--vglia-border-default);
  background:
    radial-gradient(90% 120% at 50% 0%, rgb(var(--vglia-blue-rgb) / 0.18), transparent 66%),
    var(--vglia-surface-900);
}

.landing-footer {
  padding: var(--space-8) var(--page-padding-x);
  border-top: var(--border-width) solid var(--vglia-border-subtle);
  background: var(--vglia-bg-950);
}

.landing-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: var(--container-xl);
  margin-inline: auto;
  font-size: var(--text-xs);
  color: var(--vglia-text-muted);
}

/* --- Aparición al entrar en pantalla -------------------------------------- */
/* El estado inicial sólo se aplica si el navegador soporta IntersectionObserver
   y el JavaScript llegó a marcar la página: sin JS nada queda invisible. */

[data-reveal] { opacity: 1; }

.js-reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--duration-enter) var(--ease-out), transform var(--duration-enter) var(--ease-out);
}

.js-reveal-ready [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js-reveal-ready [data-reveal] { opacity: 1; transform: none; }
  .scroller__panel { transition: opacity var(--transition-fast) linear; transform: none; }
}

/* ============================================================================
   Interior de los paneles del sticky scroller.
   Son maquetas de la plataforma dibujadas con los mismos tokens que la
   plataforma real: nada aquí es una captura de pantalla.
   ========================================================================= */

/* 1 · Launchpad */
.panel-tiles {
  display: grid;
  align-content: center;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  height: 100%;
}

.panel-tile {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  border: var(--border-width) solid var(--vglia-border-subtle);
  background:
    radial-gradient(130% 120% at 100% 0%, rgb(var(--accent-rgb, var(--vglia-blue-rgb)) / 0.12), transparent 64%),
    var(--vglia-surface-900);
}

.panel-tile__label {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--vglia-text-primary);
}

/* 2 · Analítica */
.panel-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-3);
}

.panel-kpi {
  display: grid;
  gap: 2px;
  padding: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--vglia-surface-900);
  border: var(--border-width) solid var(--vglia-border-subtle);
}

.panel-kpi__label { font-size: var(--text-2xs); color: var(--vglia-text-muted); }

.panel-kpi__value {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--vglia-text-primary);
}

.panel-chart { flex: 1; width: 100%; min-height: 0; }

/* 3 · Mapa */
.panel-map {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background: var(--map-water);
  border: var(--border-width) solid var(--vglia-border-subtle);
  overflow: hidden;
}

.panel-map__world,
.panel-map__overlay {
  grid-area: 1 / 1;
  width: 100%;
  height: auto;
}

/* El contorno se pinta como máscara y no como imagen: así el color sale
   directo del token --map-land en lugar de un filter que habría que
   recalcular cada vez que cambie la paleta. El SVG sigue siendo un archivo
   aparte, cacheable, en lugar de 28 KB incrustados en cada página. */
.panel-map__world {
  aspect-ratio: 1000 / 520;
  background-color: var(--map-land);
  -webkit-mask: url("../../img/brand/world-outline.e98d9fd4aa66.svg") center / contain no-repeat;
  mask: url("../../img/brand/world-outline.e98d9fd4aa66.svg") center / contain no-repeat;
}

.panel-map__nodes circle {
  fill: var(--map-node);
  filter: drop-shadow(0 0 6px rgb(var(--vglia-cyan-rgb) / 0.8));
}

.panel-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-3);
  padding-top: var(--space-4);
  border-top: var(--border-width) solid var(--vglia-border-subtle);
}

.panel-stats div { display: grid; gap: 2px; }

.panel-stats strong {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--vglia-text-primary);
}

.panel-stats span { font-size: var(--text-2xs); color: var(--vglia-text-muted); }

/* 4 · Copiloto */
.chat { display: grid; align-content: center; gap: var(--space-4); flex: 1; min-height: 0; }

.chat__row { display: flex; gap: var(--space-3); }

.chat__bubble {
  display: grid;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--vglia-surface-900);
  border: var(--border-width) solid var(--vglia-border-subtle);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--vglia-text-secondary);
}

.chat__bubble--user {
  justify-self: end;
  max-width: 80%;
  color: var(--vglia-text-primary);
  background: rgb(var(--vglia-blue-rgb) / 0.14);
  border-color: rgb(var(--vglia-blue-rgb) / 0.28);
}

.chat__list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

.chat__list li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--vglia-text-primary);
}

.chat__list .vg-icon { color: var(--color-danger); }

.panel-suggestions { display: grid; gap: var(--space-2); margin-top: auto; }

/* 5 · Flujo de automatización */
.flow {
  display: grid;
  align-content: center;
  justify-items: center;
  gap: var(--space-2);
  height: 100%;
  padding: var(--space-2);
}

.flow__node {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 300px;
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--vglia-surface-900);
  border: var(--border-width) solid rgb(var(--accent-rgb, var(--vglia-blue-rgb)) / 0.3);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  color: var(--vglia-text-primary);
}

.flow__arrow { color: var(--vglia-text-disabled); }

.flow__branch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-3);
  width: 100%;
}

.flow__branch .flow__node { max-width: none; font-size: var(--text-xs); }

@media (max-width: 520px) {
  .panel-tiles,
  .panel-kpis,
  .panel-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow__branch { grid-template-columns: minmax(0, 1fr); }
}