@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root{
--neutral-0:#ffffff;
--neutral-25:#fafafa;
--neutral-50:#f4f4f4;
--neutral-100:#e8e8e8;
--neutral-200:#d4d4d4;
--neutral-300:#b8b8b8;
--neutral-400:#9a9a9a;
--neutral-500:#7d7d7d;
--neutral-600:#616161;
--neutral-700:#484848;
--neutral-800:#2f2d33;
--neutral-900:#1c1a1f;
--neutral-950:#14121a;
--blue-50:#e7eefb;
--blue-100:#c7d7f5;
--blue-200:#93afeb;
--blue-300:#5f87e0;
--blue-400:#2c5fd6;
--blue-500:#1250c4;
--blue-600:#063fa8;
--blue-700:#052f7e;
--blue-800:#042359;
--blue-900:#03172f;
--slate-50:#eef1f4;
--slate-100:#dce2e8;
--slate-200:#b7c2ce;
--slate-300:#92a3b3;
--slate-400:#6d8398;
--slate-500:#4f647c;
--slate-600:#3a4b61;
--slate-700:#2c3a4c;
--slate-800:#1f2937;
--slate-900:#141b24;
--status-success:#1e9e64;
--status-success-tint:#e5f4ec;
--status-warning:#c99a02;
--status-warning-tint:#fff7d9;
--status-danger:#d93a2b;
--status-danger-tint:#ffe9e6;
--status-info:var(--blue-600);
--status-info-tint:#e7eefb;
--surface-page:var(--neutral-25);
--surface-card:var(--neutral-0);
--surface-sunken:var(--neutral-50);
--surface-dark:var(--slate-900);
--surface-dark-raised:var(--slate-800);
--border-subtle:var(--neutral-200);
--border-default:var(--neutral-300);
--border-strong:var(--neutral-500);
--border-dark:rgba(255,255,255,0.12);
--text-primary:var(--neutral-900);
--text-secondary:var(--neutral-600);
--text-tertiary:var(--neutral-400);
--text-inverse:var(--neutral-0);
--text-inverse-secondary:rgba(255,255,255,0.68);
--accent-primary:var(--blue-600);
--accent-primary-hover:var(--blue-700);
--accent-primary-tint:var(--blue-50);
--accent-secondary:var(--slate-600);
--accent-secondary-hover:var(--slate-700);
--accent-secondary-tint:var(--slate-50);
--focus-ring:var(--blue-500);
--surface-dark-rgb:20,27,36;
--font-display:'Space Grotesk',ui-sans-serif,sans-serif;
--font-body:'IBM Plex Sans',ui-sans-serif,sans-serif;
--font-mono:'IBM Plex Mono',ui-monospace,monospace;
--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;
--display-2xl:4.5rem;
--display-xl:3.5rem;
--display-lg:2.5rem;
--display-md:2rem;
--display-sm:1.5rem;
--display-xs:1.25rem;
--body-lg:1.125rem;
--body-md:1rem;
--body-sm:0.875rem;
--body-xs:0.75rem;
--data-2xl:3.5rem;
--data-xl:2.75rem;
--data-lg:2rem;
--data-md:1.5rem;
--data-sm:1rem;
--lh-tight:1.08;
--lh-snug:1.25;
--lh-normal:1.5;
--lh-relaxed:1.65;
--tracking-tight:-0.02em;
--tracking-normal:0em;
--tracking-wide:0.04em;
--tracking-widest:0.12em;
--space-0:0;
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-8:32px;
--space-10:40px;
--space-12:48px;
--space-16:64px;
--space-20:80px;
--space-24:96px;
--space-32:128px;
--container-max:1200px;
--container-pad:24px;
--radius-sm:6px;
--radius-md:10px;
--radius-lg:16px;
--radius-xl:24px;
--radius-pill:999px;
--shadow-sm:0 1px 2px rgba(28,26,31,0.06),0 1px 1px rgba(28,26,31,0.04);
--shadow-md:0 4px 12px rgba(28,26,31,0.08),0 2px 4px rgba(28,26,31,0.05);
--shadow-lg:0 16px 32px rgba(28,26,31,0.14),0 4px 10px rgba(28,26,31,0.06);
--glow-primary:0 0 0 1px rgba(6,63,168,0.35),0 0 24px rgba(18,80,196,0.35);
--glow-secondary:0 0 0 1px rgba(58,75,97,0.4),0 0 24px rgba(58,75,97,0.3);
--ease-standard:cubic-bezier(0.4,0,0.2,1);
--ease-out:cubic-bezier(0,0,0.2,1);
--duration-fast:150ms;
--duration-base:250ms;
--duration-slow:400ms;
}

@keyframes pulse-live{0%,100%{opacity:1}50%{opacity:0.45}}
@keyframes fade-up{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

*{box-sizing:border-box}
body{margin:0;font-family:var(--font-body);color:var(--text-primary);background:var(--surface-page);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);margin:0;letter-spacing:var(--tracking-tight);font-weight:var(--weight-semibold);
  /* red de seguridad: ninguna palabra larga puede empujar la página */
  overflow-wrap:break-word}
p{margin:0}
a{color:var(--accent-primary)}
a:hover{color:var(--accent-primary-hover)}
.tabular{font-variant-numeric:tabular-nums}

html{scroll-behavior:smooth}
.gx-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center}
/* variante con la columna de texto un poco más ancha (hero y problema de
   Inicio). Va en clase y no inline para que la media query pueda apilarla. */
@media(min-width:881px){.gx-two-wide{grid-template-columns:1.05fr 1fr}}
.gx-two-rev{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-16);align-items:center}
.gx-two-rev>*:first-child{order:2}
.gx-two-rev>*:last-child{order:1}
.gx-tri{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.gx-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-6)}
.gx-cards2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.gx-flow{display:flex;align-items:stretch;justify-content:center;gap:var(--space-3);flex-wrap:nowrap}
.gx-cases{display:flex;flex-wrap:wrap;gap:var(--space-4)}
.gx-logos{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-4)}
.gx-footcols{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:var(--space-8)}
.gx-subnav-scroll{display:flex;align-items:center;gap:var(--space-6);overflow-x:auto;-ms-overflow-style:none;scrollbar-width:none}
.gx-subnav-scroll::-webkit-scrollbar{display:none}

@media(max-width:880px){
  .gx-two,.gx-two-rev{grid-template-columns:1fr;gap:var(--space-8)}
  .gx-two-rev>*:first-child{order:1}
  .gx-two-rev>*:last-child{order:2}
  .gx-tri,.gx-cards2{grid-template-columns:1fr}
  .gx-pillars{grid-template-columns:1fr}
  .gx-flow{flex-direction:column;align-items:stretch}
  /* `rotate` (no `transform`) so GSAP can drive transform without clobbering it */
  .gx-flow-arrow{rotate:90deg}
  .gx-footcols{grid-template-columns:1fr 1fr;gap:var(--space-8)}
}
@media(max-width:560px){
  .gx-footcols{grid-template-columns:1fr}
}

/* Mobile: el ritmo vertical del desktop (96px entre secciones) deja la
   página larguísima. Comprimimos los tokens de espaciado grandes en vez
   de tocar cada bloque, porque el padding de las secciones ya los usa. */
@media(max-width:640px){
  :root{
    --space-24:60px;
    --space-20:48px;
    --space-16:40px;
    --space-12:32px;
    --container-pad:20px;
    /* La escala de display está pensada para desktop. En pantallas chicas
       una palabra como "Autogestionable" a 40px no entra en 320px y empuja
       la página, así que bajamos los tamaños grandes. */
    --display-xl:2.4rem;
    --display-lg:1.9rem;
    --display-md:1.6rem;
    --display-sm:1.35rem;
  }
}

/* ============================================================
   CAPA DE MOVIMIENTO
   `gx-motion` lo agrega un script inline en <head> solo cuando
   prefers-reduced-motion no está activo. Todo lo que se oculta a
   la espera de GSAP cuelga de esa clase, así que sin JS, sin GSAP
   o con reduced-motion el sitio se ve completo y estático.
   ============================================================ */

/* --- Lenis --- */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* --- Estado inicial de los reveals --- */
.gx-motion [data-reveal]{opacity:0}
.gx-motion [data-reveal-stagger]>*{opacity:0}

/* --- Nav: transparente arriba, sólida con blur al scrollear --- */
.gx-nav{position:sticky;top:0;z-index:50;background:transparent;border-bottom:1px solid transparent;transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard)}
.gx-nav-bar{max-width:var(--container-max);margin:0 auto;padding:14px var(--container-pad);display:flex;align-items:center;gap:var(--space-8)}
.gx-nav-menu{display:flex;align-items:center;gap:var(--space-6);margin-left:auto}
.gx-nav-link{text-decoration:none;font-size:var(--body-sm);font-weight:var(--weight-medium);color:var(--text-secondary);padding-bottom:4px;border-bottom:2px solid transparent}
.gx-nav-link.is-current{font-weight:var(--weight-semibold);color:var(--text-primary);border-bottom-color:var(--accent-primary)}
.gx-nav-cta{padding:8px 14px;font-size:var(--body-sm);white-space:nowrap}
.gx-nav-cta i{font-size:16px}
.gx-nav-toggle{display:none;margin-left:auto;width:44px;height:44px;padding:0;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:var(--surface-card);color:var(--text-primary);font-size:22px;align-items:center;justify-content:center;cursor:pointer;transition:background var(--duration-fast) var(--ease-standard)}
.gx-nav-toggle:hover{background:var(--surface-sunken)}
.gx-nav-toggle:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}

/* Mobile y tablet: los links pasan a un panel desplegable.
   Antes vivían con `display:flex` inline, que le ganaba a la media query,
   así que nunca se ocultaban y desbordaban la página a lo ancho. */
@media(max-width:880px){
  .gx-nav-toggle{display:inline-flex}
  .gx-nav-menu{position:absolute;top:100%;left:0;right:0;margin:0;flex-direction:column;align-items:stretch;gap:0;padding:var(--space-2) var(--container-pad) var(--space-5);background:var(--surface-card);border-bottom:1px solid var(--border-subtle);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard),visibility var(--duration-base)}
  .gx-nav.is-menu-open .gx-nav-menu{opacity:1;visibility:visible;transform:none}
  .gx-nav-menu .gx-nav-link{font-size:var(--body-md);padding:14px 0;border-bottom:1px solid var(--border-subtle)}
  .gx-nav-menu .gx-nav-link.is-current{border-bottom-color:var(--border-subtle);color:var(--accent-primary)}
  .gx-nav-menu .gx-nav-cta{width:100%;margin-top:var(--space-4);padding:13px 20px;font-size:var(--body-md)}
  .gx-nav-menu .gx-nav-cta i{font-size:18px}
}
.gx-nav.is-solid{background:rgba(255,255,255,0.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--border-subtle);box-shadow:var(--shadow-md)}
/* El header es sticky y queda en el flujo: arriba de todo se ve el fondo
   claro de la página detrás, no el hero. Por eso los colores de texto del
   design system quedan como están y solo cambia el fondo/sombra. */
.gx-nav a{transition:color var(--duration-fast) var(--ease-standard)}
.gx-nav .gx-nav-link:hover{color:var(--text-primary)!important}

/* Logo: dos variantes del mismo lockup que se intercambian con cross-fade.
   La oscura es la de base porque el header es sticky y queda en el flujo:
   arriba de todo tiene detrás el fondo claro de la página, no el hero.
   La blanca se activa sola si el nav pasa a estar sobre superficie oscura
   (marcando el header con `data-nav-over-dark`).

   El alto baja de 34px a 28px: `logo-nav.png` mide 135x48, así que a 28px
   se sirve a ~1.7x y deja de verse pixelado en pantallas retina. Para el
   2x exacto que pide el brief haría falta un archivo de 270x96 o un SVG. */
.gx-nav-logo{position:relative;display:flex;align-items:center;height:28px;flex-shrink:0}
.gx-nav-logo img{display:block;height:100%;width:auto;transition:opacity var(--duration-base) var(--ease-standard)}
.gx-nav-logo .gx-logo-light{position:absolute;left:0;top:0;opacity:0}
.gx-nav[data-nav-over-dark]:not(.is-solid) .gx-logo-dark{opacity:0}
.gx-nav[data-nav-over-dark]:not(.is-solid) .gx-logo-light{opacity:1}

/* --- Botón "Escribinos": hover scale + sombra --- */
/* Base para los botones que ya no llevan estilos inline (el del nav).
   Los del hero y el cierre siguen con inline, que gana sobre esto. */
.gx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-family:var(--font-body);font-weight:var(--weight-semibold);color:var(--text-inverse);background:var(--accent-primary);border:1.5px solid transparent;border-radius:var(--radius-pill);cursor:pointer;white-space:nowrap;transition:background var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard)}
.gx-btn:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
.gx-btn:hover{background:var(--accent-primary-hover)!important;transform:scale(1.02);box-shadow:var(--shadow-md)}
.gx-btn:active{transform:scale(0.99)}

/* --- Cards: hover con elevación --- */
.gx-card{transition:transform var(--duration-base) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard)}
.gx-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)!important}

/* --- Marca blanca: las dos capturas apiladas, cross-fade de ~300ms --- */
.gx-wl-shot{transition:opacity 300ms var(--ease-standard)}

/* --- Chips de casos: hover que rellena con el acento --- */
.gx-chip{transition:background-color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-fast) var(--ease-standard),transform var(--duration-fast) var(--ease-standard)}
.gx-chip:hover{background:var(--accent-primary)!important;border-color:var(--accent-primary)!important;color:#fff!important;box-shadow:var(--shadow-md)!important;transform:translateY(-2px)}
.gx-chip:hover i{color:#fff!important}

/* ============================================================
   HERO FULL-BLEED (index.html)
   La foto de desktop tiene el laptop desde el ~24% del ancho y el
   celular entre el 41% y el 49%. El degradado va opaco sobre la
   izquierda, afloja recién pasado el texto y llega a cero antes del
   borde derecho, así los dos dispositivos siguen leyéndose.
   ============================================================ */
.gx-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;background:var(--surface-dark);min-height:calc(100vh - 65px)}
@supports (height:100svh){.gx-hero{min-height:calc(100svh - 65px)}}

.gx-hero-bg{position:absolute;left:0;right:0;top:0;z-index:0;height:100%}
/* el alto de más existe solo donde corre el parallax, para que no destape
   el borde inferior al desplazarse */
@media(min-width:1024px){.gx-hero-bg{height:calc(100% + 320px)}}
.gx-hero-bg picture{display:block;width:100%;height:100%}
.gx-hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}

.gx-hero-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(100deg,
      rgba(var(--surface-dark-rgb),0.96) 0%,
      rgba(var(--surface-dark-rgb),0.94) 24%,
      rgba(var(--surface-dark-rgb),0.80) 40%,
      rgba(var(--surface-dark-rgb),0.50) 56%,
      rgba(var(--surface-dark-rgb),0.22) 72%,
      rgba(var(--surface-dark-rgb),0.06) 86%,
      rgba(var(--surface-dark-rgb),0) 96%),
    linear-gradient(180deg,
      rgba(var(--surface-dark-rgb),0.45) 0%,
      rgba(var(--surface-dark-rgb),0.05) 26%,
      rgba(var(--surface-dark-rgb),0.05) 68%,
      rgba(var(--surface-dark-rgb),0.42) 100%)}

.gx-hero-inner{position:relative;z-index:2;width:100%;max-width:var(--container-max);margin:0 auto;
  padding:var(--space-24) var(--container-pad);display:flex;flex-direction:column;
  align-items:flex-start;gap:var(--space-6)}
.gx-hero-inner>*{max-width:min(100%,560px)}

/* Tablet (768–1023): sigue la foto de desktop, pero el texto ocupa una
   proporción mayor del ancho, así que el degradado tiene que aflojar más
   tarde para no dejar el final del título sobre la parte clara. */
@media(min-width:768px) and (max-width:1023px){
  .gx-hero-scrim{
    background:
      linear-gradient(100deg,
        rgba(var(--surface-dark-rgb),0.93) 0%,
        rgba(var(--surface-dark-rgb),0.88) 40%,
        rgba(var(--surface-dark-rgb),0.70) 60%,
        rgba(var(--surface-dark-rgb),0.42) 78%,
        rgba(var(--surface-dark-rgb),0.16) 92%,
        rgba(var(--surface-dark-rgb),0.04) 100%),
      linear-gradient(180deg,
        rgba(var(--surface-dark-rgb),0.45) 0%,
        rgba(var(--surface-dark-rgb),0.05) 26%,
        rgba(var(--surface-dark-rgb),0.05) 68%,
        rgba(var(--surface-dark-rgb),0.42) 100%)}
  .gx-hero-inner>*{max-width:min(100%,520px)}
}

/* Mobile (≤767): la foto vertical ya viene oscura y desenfocada, alcanza
   un velo suave y parejo. El texto pasa a ocupar todo el ancho. */
@media(max-width:767px){
  .gx-hero-bg{height:100%}
  .gx-hero-scrim{background:linear-gradient(180deg,
      rgba(var(--surface-dark-rgb),0.62) 0%,
      rgba(var(--surface-dark-rgb),0.38) 34%,
      rgba(var(--surface-dark-rgb),0.46) 66%,
      rgba(var(--surface-dark-rgb),0.72) 100%)}
  .gx-hero-inner>*{max-width:100%}
}

/* --- Preguntas frecuentes: acordeón nativo con <details> ---
   Sin JS, accesible por teclado de fábrica y el contenido queda en el
   DOM aunque esté plegado, así que buscadores y motores con IA lo leen. */
.gx-faq{display:flex;flex-direction:column;gap:var(--space-3)}
.gx-faq-item{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);overflow:hidden;transition:box-shadow var(--duration-base) var(--ease-standard)}
.gx-faq-item:hover{box-shadow:var(--shadow-md)}
.gx-faq-item summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);padding:var(--space-5) var(--space-6);font-family:var(--font-display);font-size:var(--body-lg);font-weight:var(--weight-semibold);color:var(--text-primary);line-height:var(--lh-snug)}
.gx-faq-item summary::-webkit-details-marker{display:none}
.gx-faq-item summary:focus-visible{outline:2px solid var(--focus-ring);outline-offset:-2px}
.gx-faq-item summary i{flex-shrink:0;font-size:20px;color:var(--accent-primary);transition:transform var(--duration-base) var(--ease-standard)}
.gx-faq-item[open] summary i{transform:rotate(180deg)}
.gx-faq-answer{padding:0 var(--space-6) var(--space-5);font-size:var(--body-md);line-height:var(--lh-relaxed);color:var(--text-secondary);max-width:76ch}
@media(max-width:640px){
  .gx-faq-item summary{padding:var(--space-4) var(--space-5);font-size:var(--body-md)}
  .gx-faq-answer{padding:0 var(--space-5) var(--space-4);font-size:var(--body-sm)}
}
@media(prefers-reduced-motion:reduce){
  .gx-faq-item,.gx-faq-item summary i{transition:none!important}
}

/* --- FAB de volver arriba --- */
.gx-fab{position:fixed;right:24px;bottom:24px;z-index:60;width:48px;height:48px;padding:0;border:none;border-radius:50%;background:var(--accent-primary);color:#fff;font-size:22px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--shadow-lg);opacity:0;transform:scale(0.8);pointer-events:none;transition:opacity var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard),background var(--duration-fast) var(--ease-standard)}
.gx-fab.is-visible{opacity:1;transform:scale(1);pointer-events:auto}
.gx-fab:hover{background:var(--accent-primary-hover);transform:scale(1.06)}
.gx-fab:active{transform:scale(0.97)}
.gx-fab:focus-visible{outline:2px solid var(--focus-ring);outline-offset:3px}
@media(max-width:640px){.gx-fab{right:16px;bottom:16px;width:44px;height:44px;font-size:20px}}

/* --- Sub-nav scrollspy (plataforma.html) --- */
[data-subnav-link].is-active{color:var(--accent-primary)!important;border-bottom-color:var(--accent-primary)!important;font-weight:var(--weight-semibold)!important}

/* --- Pulso de acento al aterrizar "Medición" --- */
@keyframes gx-accent-pulse{
  0%{box-shadow:0 0 0 0 rgba(18,80,196,0.55)}
  70%{box-shadow:0 0 0 20px rgba(18,80,196,0)}
  100%{box-shadow:0 0 0 0 rgba(18,80,196,0)}
}
.gx-pulse-accent{animation:gx-accent-pulse 900ms var(--ease-out) 1}

/* --- Marquee de logos (lo arma el JS) --- */
.gx-marquee{flex-wrap:nowrap!important;justify-content:flex-start!important;overflow:hidden;width:100%}
.gx-marquee-track{display:flex;align-items:center;gap:var(--space-4);flex:0 0 auto;will-change:transform}
.gx-marquee-track>*{flex:0 0 auto}

/* ============================================================
   RECORRIDO DE LAS 4 ETAPAS (plataforma.html)
   Un solo markup, dos modos. Por defecto es una lista vertical de
   capacidades que funciona sin JS, en tablet, en mobile y con
   reduced-motion. La clase `gx-journey-on` la agrega el JS solo en
   desktop con movimiento habilitado, y recién ahí pasa a ser el
   recorrido pineado de tres columnas.
   ============================================================ */

/* --- Base: lista vertical --- */
.gx-journey-inner{max-width:var(--container-max);margin:0 auto;padding:var(--space-24) var(--container-pad)}
.gx-rail{display:none}
.gx-steps{display:flex;flex-direction:column;gap:var(--space-20)}
.gx-step{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-8);align-items:center}
.gx-step-copy{display:flex;flex-direction:column;gap:var(--space-5)}
.gx-step-shots{display:flex;flex-direction:column;gap:var(--space-6);min-width:0}
.gx-shot{position:relative;margin:0;aspect-ratio:16/10;border-radius:var(--radius-lg);border:1px solid var(--border-subtle);overflow:hidden;background:var(--surface-sunken)}
.gx-shot img{width:100%;height:100%;display:block}
.gx-slices{display:none}
/* una sola pill por etapa cuando se lee en vertical */
.gx-journey:not(.gx-journey-on) .gx-step:not([data-stage-first]) .gx-step-pill{display:none!important}

/* tablet: vuelven las dos columnas alternadas */
@media(min-width:881px){
  .gx-journey:not(.gx-journey-on) .gx-step{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--space-16)}
  .gx-journey:not(.gx-journey-on) .gx-step:nth-child(even) .gx-step-copy{order:2}
}

/* --- Modo recorrido: pin de tres columnas --- */
.gx-journey-on .gx-journey-pin{display:flex;align-items:center;height:var(--gx-journey-h,80vh)}
.gx-journey-on .gx-journey-inner{width:100%;padding-top:0;padding-bottom:0;display:grid;grid-template-columns:156px minmax(0,1fr);gap:var(--space-10);align-items:center}
.gx-journey-on .gx-steps{position:relative;display:block;height:var(--gx-steps-h,460px)}
.gx-journey-on .gx-step{position:absolute;inset:0;grid-template-columns:minmax(0,0.8fr) minmax(0,1.3fr);gap:var(--space-12);align-items:center;pointer-events:none}
.gx-journey-on .gx-step-copy{opacity:0;will-change:opacity,transform}
.gx-journey-on .gx-step-shots{position:relative;display:block;aspect-ratio:16/10;width:100%}
.gx-journey-on .gx-shot{position:absolute;inset:0;aspect-ratio:auto;opacity:0;box-shadow:var(--shadow-lg);will-change:opacity,transform}

/* en desktop chico el riel se angosta para no comerle ancho al texto */
@media(min-width:1024px) and (max-width:1199px){
  .gx-journey-on .gx-journey-inner{grid-template-columns:116px minmax(0,1fr);gap:var(--space-8)}
  .gx-journey-on .gx-step{gap:var(--space-8)}
}

/* riel de progreso */
.gx-journey-on .gx-rail{display:block;position:relative;align-self:center;padding-left:18px}
.gx-rail-track{position:absolute;left:5px;top:8px;bottom:8px;width:2px;border-radius:2px;background:var(--border-subtle);overflow:hidden}
.gx-rail-fill{display:block;width:100%;height:0%;background:var(--accent-primary);border-radius:2px}
.gx-rail-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--space-8)}
.gx-rail-item{position:relative;display:flex;align-items:center;min-height:16px}
.gx-rail-dot{position:absolute;left:-18px;width:12px;height:12px;border-radius:50%;background:var(--surface-card);border:2px solid var(--border-default);transition:background var(--duration-base) var(--ease-standard),border-color var(--duration-base) var(--ease-standard),transform var(--duration-base) var(--ease-standard)}
.gx-rail-label{font-size:var(--body-xs);font-weight:var(--weight-semibold);letter-spacing:var(--tracking-wide);text-transform:uppercase;color:var(--text-tertiary);transition:color var(--duration-base) var(--ease-standard)}
.gx-rail-item.is-done .gx-rail-dot{background:var(--accent-primary);border-color:var(--accent-primary)}
.gx-rail-item.is-done .gx-rail-label{color:var(--text-secondary)}
.gx-rail-item.is-active .gx-rail-dot{background:var(--accent-primary);border-color:var(--accent-primary);transform:scale(1.25)}
.gx-rail-item.is-active .gx-rail-label{color:var(--accent-primary)}

/* momento pico: las 3 terminales se despliegan en secuencia */
.gx-journey-on [data-shot-split] img{opacity:0}
.gx-journey-on .gx-slices{display:flex;position:absolute;inset:0}
.gx-journey-on .gx-slices>span{flex:1 1 0;background-image:url("../assets/img/interfaz%20de%20terminales.webp");background-size:300% 100%;background-repeat:no-repeat;will-change:opacity,transform}
.gx-journey-on .gx-slices>span:nth-child(1){background-position:0% 50%}
.gx-journey-on .gx-slices>span:nth-child(2){background-position:50% 50%}
.gx-journey-on .gx-slices>span:nth-child(3){background-position:100% 50%}

/* --- Reduced motion: todo visible, nada se mueve --- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .gx-nav,.gx-nav a,.gx-nav .gx-nav-logo,.gx-nav-logo img,.gx-btn,.gx-card,.gx-chip,[data-subnav-link],.gx-fab,.gx-wl-shot{transition:none!important}
  .gx-btn:hover,.gx-card:hover,.gx-chip:hover{transform:none!important}
  .gx-fab{transform:none!important}
  .gx-fab:hover,.gx-fab:active{transform:none!important}
  .gx-pulse-accent{animation:none!important}
}