/* ============================================================
   ADVANEXT — Quiénes somos
   Estilos de la página narrativa. Todo bajo el prefijo .qs- para que no
   pueda chocar con styles.css, del que se heredan tokens y utilidades
   (.btn, .container, .eyebrow, .grad, .nav, .footer).

   Aquí no se redefine ningún color de marca: se usan las variables reales
   (--bg, --senal, --text…). Lo único propio es la monoespaciada, que el
   proyecto no tenía, y se resuelve con la pila del sistema para no cargar
   una tercera familia.
   ============================================================ */

/* styles.css pone scroll-behavior:smooth en <html>. Aquí no puede quedarse:
   ScrollTrigger mide refrescando el scroll al origen y devolviéndolo, y con
   scroll suave ese regreso se anima, así que start y end salen desplazados el
   valor del scroll (se ve como una escena que se queda en su último fotograma
   tras un resize, una rotación o la carga de las fuentes). Esta página no
   tiene anclas internas, así que no pierde nada. */
.qs-html { scroll-behavior: auto; }

.qs-page {
  --qs-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Altura del header fijo (topbar + nav). Las escenas centran su contenido
     por debajo de esta franja para que nada quede tapado. */
  /* Alçada real de la capçalera. La mesura quienes-somos.js amb un
     ResizeObserver i la publica com a --header-h a l'element arrel; això
     d'aquí només és el valor de seguretat abans que el JS arrenqui. La
     capçalera fa 120px a escriptori però 134px a 390px —la franja d'horari
     embolica a dues línies—, així que codificar-la a mà no funcionava. */
  --qs-top: var(--header-h, 124px);

  /* Rejilla de fondo y líneas tenues, derivadas del borde del proyecto. */
  --qs-line: rgba(185, 192, 212, 0.13);
  --qs-line-2: rgba(185, 192, 212, 0.26);

  /* Los colores del caos. Son tres y no se hablan entre ellos: ese es el
     argumento. Al converger, todo pasa a --senal, un único color. Están
     bajados de saturación para convivir con el azul y el violeta de la marca
     sin gritar. */
  --qs-amber: #d8a961;
  --qs-moss: #7fa87a;
  --qs-rose: var(--alerta);

  overflow-x: hidden;
}

/* ---------- escenas ---------- */
.qs-scene { position: relative; background: var(--bg); }

.qs-stage {
  position: sticky;
  /* L'escena s'enganxa per sota de la capçalera, no darrere seu. */
  top: var(--qs-top);
  height: calc(100svh - var(--qs-top));
  overflow: hidden;
  display: grid;
  place-items: center;
  background: var(--bg);
  padding-block: clamp(24px, 6vh, 64px);
  padding-inline: max(22px, 5vw);
}

/* Alturas de las escenas pegadas. Son el reloj de sus animaciones: cada
   línea de tiempo se reparte a lo largo de esta distancia, así que subir
   la altura hace el mismo movimiento más lento sin tocar el scroll. Se
   subió un 30% sólo la del caos, que es la que más se mueve. Las seis etapas
   del recorrido van en flujo normal, una pantalla cada una. */
#qs1   { height: 200vh; }
#qsFil { height: 260vh; }
#qs3   { height: 680vh; }
#qs5   { height: 290vh; }
#qs6   { height: 230vh; }

/* Rejilla de ingeniería. Decorativa, pero es la que da la lectura técnica:
   se desvanece hacia los bordes para no cerrar la composición. */
.qs-grid {
  position: absolute;
  inset: -12%;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--qs-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--qs-line) 1px, transparent 1px);
  background-size: 78px 78px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 78%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, #000 30%, transparent 78%);
}

/* ---------- tipografía de escena ---------- */
.qs-display {
  margin: 0;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.6rem, 7.6vw, 7.2rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text);
}
.qs-display__sub {
  display: block;
  margin-top: 0.3em;
  font-size: 0.5em;
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--text-2);
}

/* ---------- 01 · hero ---------- */
.qs-hero {
  position: relative;
  z-index: 2;
  width: min(var(--maxw), 100%);
  will-change: transform, opacity;
}
.qs-hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(18px, 3.2vh, 34px);
}
.qs-hero__eyebrow::after {
  content: "";
  height: 1px;
  flex: 1;
  max-width: 200px;
  background: var(--border-2);
}

.qs-hint {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 4vh, 40px);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 11px;
}
.qs-hint span {
  font-family: var(--qs-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}
.qs-hint i {
  display: block;
  width: 1px;
  height: 42px;
  background: linear-gradient(var(--qs-line-2), transparent);
  /* Lenta y de poco recorrido: es una indicación, no un reclamo. */
  animation: qs-drop 4s ease-in-out infinite;
}
@keyframes qs-drop {
  0%, 100% { transform: scaleY(0.45); transform-origin: top; opacity: 0.3; }
  50%      { transform: scaleY(1); opacity: 0.75; }
}

/* ---------- filosofía · entender, después construir ----------
   Dos columnas, cada una con la etiqueta numerada del recorrido (número
   en color de marca, palabra en mono gris). La etiqueta del paso 01
   termina en un filo que cruza el hueco hasta el paso 02: primero esto,
   después aquello.

   Las dos frases no aparecen: hacen lo que dicen.
   · ENTENDER — la frase está ahí desde el principio, velada y
     desenfocada, y se aclara de izquierda a derecha al paso de una
     línea de escáner. La controla --foco (0 → 1).
   · CONSTRUIR — primero sube el plano (sólo el contorno, en azul) y
     después se rellena de izquierda a derecha. La controla --obra
     (0 → 1); el relleno es un degradado recortado al texto. */
.qs-fil {
  position: relative;
  z-index: 2;
  width: min(var(--maxw), 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--qs-fil-hueco);
  align-items: start;
  --qs-fil-hueco: clamp(32px, 6vw, 96px);
}
.qs-fil__paso { position: relative; min-width: 0; }

.qs-fil__label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(18px, 3.2vh, 32px);
  font-family: var(--qs-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-3);
  opacity: 0;
}
.qs-fil__label b { font-weight: 500; color: var(--senal); }
/* El filo del paso 01 atraviesa el hueco y se queda a un paso del 02. */
.qs-fil__linea {
  position: relative;
  flex: 1;
  height: 1px;
  margin-right: calc(var(--qs-fil-hueco) * -1 + 14px);
  background: linear-gradient(90deg, var(--qs-line-2), rgba(var(--senal-rgb), 0.6));
  transform: scaleX(0);
  transform-origin: left center;
}
.qs-fil__linea::after {
  content: "";
  position: absolute;
  right: -3px;
  top: -3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--senal);
  box-shadow: 0 0 0 4px rgba(var(--senal-rgb), 0.14);
}

.qs-fil__texto { position: relative; width: fit-content; max-width: 100%; }
.qs-fil__frase {
  margin: 0;
  max-width: 12ch;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 4.1vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -0.032em;
  text-wrap: balance;
}

/* 01 · entender: del velo a la nitidez */
.qs-fil__paso--a { --foco: 0; }
.qs-fil__a {
  color: var(--text);
  -webkit-mask-image: linear-gradient(90deg, #000 calc(var(--foco) * 120% - 20%), rgba(0, 0, 0, 0.1) calc(var(--foco) * 120%));
          mask-image: linear-gradient(90deg, #000 calc(var(--foco) * 120% - 20%), rgba(0, 0, 0, 0.1) calc(var(--foco) * 120%));
  filter: blur(calc((1 - var(--foco)) * 5px));
}
/* La línea de escáner viaja justo por el borde entre lo velado y lo nítido. */
.qs-fil__scan {
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: calc(var(--foco) * 120% - 10%);
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(transparent, var(--senal) 30%, var(--senal) 70%, transparent);
  box-shadow: 0 0 22px 3px rgba(var(--senal-rgb), 0.45);
  opacity: 0;
  pointer-events: none;
}

/* 02 · construir: del plano a la pieza */
.qs-fil__paso--b { --obra: 0; }
.qs-fil__b {
  color: transparent;
  -webkit-text-stroke: 1.2px rgba(var(--senal-rgb), 0.95);
  background-image: linear-gradient(90deg, var(--senal) 0 46%, transparent 54% 100%);
  background-size: 220% 100%;
  background-position: calc((1 - var(--obra)) * 100%) 0;
  -webkit-background-clip: text;
          background-clip: text;
  clip-path: inset(100% -3% -12% -3%);
}

/* ---------- 03 · el caos  →  04 · la solución ---------- */
.qs-journey { position: absolute; inset: 0; z-index: 2; }

.qs-wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
}

.qs-frags { position: absolute; inset: 0; z-index: 2; }

.qs-frag {
  position: absolute;
  left: var(--x);
  top: var(--y);
  opacity: 0;
  will-change: transform, opacity;
}
/* El movimiento ambiental vive en este hijo, nunca en .qs-frag: dos
   transformaciones sobre el mismo nodo se pelean. */
.qs-frag__in { position: relative; display: block; }

/* Al converger, todos los fragmentos se tiñen de un solo color. El color
   cuenta la historia: el caos tiene colores que no se hablan, el orden
   tiene uno. */
.qs-frag__tint {
  position: absolute;
  inset: -1px;
  background: var(--senal);
  mix-blend-mode: color;
  opacity: 0;
  border-radius: 12px;
  pointer-events: none;
}

.qs-card {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 11px;
  box-shadow: 0 20px 46px -24px rgba(0, 0, 0, 0.95);
  overflow: hidden;
}
.qs-card__bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.qs-card__bar i {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--text-3);
  display: block;
  flex: none;
}
.qs-card__bar em {
  font-family: var(--qs-mono);
  font-size: 11.5px;
  font-style: normal;
  color: var(--text-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qs-card__body { padding: 11px 12px; }

.qs-sheet { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.qs-sheet i {
  height: 11px;
  background: rgba(185, 192, 212, 0.1);
  border-radius: 1px;
  display: block;
}
.qs-sheet i.f { background: rgba(185, 192, 212, 0.22); }
.qs-sheet i.bad { background: transparent; border: 1px solid var(--qs-rose); }

.qs-mail em {
  font-style: normal;
  display: block;
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 5px;
}
.qs-mail small {
  font-family: var(--qs-mono);
  font-size: 11px;
  color: var(--qs-amber);
  letter-spacing: 0.03em;
}

.qs-wa {
  background: #12241d;
  border: 1px solid rgba(127, 168, 122, 0.34);
  border-radius: 11px 11px 11px 2px;
  padding: 10px 12px;
}
.qs-wa p { margin: 0; font-size: 13.5px; color: #d6e6da; line-height: 1.42; }
.qs-wa small {
  display: block;
  text-align: right;
  font-family: var(--qs-mono);
  font-size: 10px;
  color: var(--qs-moss);
  margin-top: 4px;
}

.qs-scan {
  position: relative;
  background: #10121b;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 13px 12px 11px;
  color: var(--text-2);
}
.qs-scan__rules { display: flex; flex-direction: column; gap: 6px; margin-bottom: 9px; }
.qs-scan__rules i {
  height: 5px;
  background: rgba(185, 192, 212, 0.14);
  border-radius: 1px;
  display: block;
}
.qs-scan__rules i:nth-child(2) { width: 72%; }
.qs-scan__rules i:nth-child(3) { width: 86%; }
.qs-scan svg { display: block; margin-left: auto; opacity: 0.8; }
.qs-scan b {
  position: absolute;
  top: -1px; left: -1px;
  font-family: var(--qs-mono);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.09em;
  background: var(--surface-2);
  color: var(--text-2);
  padding: 3px 8px;
  border-radius: 0 0 5px 0;
}

.qs-note {
  background: #2c2514;
  border: 1px solid rgba(216, 169, 97, 0.36);
  border-radius: 2px;
  padding: 13px 14px;
  font-style: italic;
  font-size: 14px;
  color: #ecd4a4;
  line-height: 1.38;
  box-shadow: 0 16px 34px -20px rgba(0, 0, 0, 0.95);
}

.qs-pdf { display: flex; align-items: center; gap: 10px; }
.qs-pdf b {
  font-family: var(--qs-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--qs-rose);
  border: 1px solid rgba(var(--alerta-rgb), 0.45);
  border-radius: 3px;
  padding: 4px 6px;
  flex: none;
}
.qs-pdf span {
  font-size: 13px;
  color: var(--text-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qs-path {
  font-family: var(--qs-mono);
  font-size: 12px;
  color: var(--text-2);
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 10px 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qs-path b { color: var(--qs-amber); font-weight: 400; }

.qs-form {
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 7px;
  padding: 12px 13px;
}
.qs-form p {
  margin: 0 0 9px;
  font-family: var(--qs-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.qs-form label {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--text-2);
  margin-top: 7px;
}
.qs-form label i {
  width: 12px; height: 12px;
  border: 1px solid var(--border-2);
  border-radius: 2px;
  flex: none;
  display: block;
}
.qs-form label.ok i { border-color: var(--qs-moss); background: rgba(127, 168, 122, 0.34); }

.qs-node {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--bg-3);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 13px;
}
.qs-node b {
  font-family: var(--qs-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.09em;
  color: var(--text);
}
.qs-node u {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--qs-rose);
  display: block;
  text-decoration: none;
  flex: none;
  box-shadow: 0 0 0 3px rgba(var(--alerta-rgb), 0.16);
}
.qs-node small { font-family: var(--qs-mono); font-size: 10.5px; color: var(--qs-rose); }

.qs-pills { display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.qs-pill {
  font-family: var(--qs-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  border: 1px solid var(--border);
  background: var(--bg-3);
  border-radius: 100px;
  padding: 6px 12px;
  color: var(--text-2);
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
}
.qs-pill u {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--qs-amber);
  display: block;
  text-decoration: none;
}

/* ---------- las tres frases del caos ---------- */
.qs-ctext {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  pointer-events: none;
  padding-inline: max(22px, 5vw);
}
.qs-ctext > div { width: min(780px, 100%); text-align: center; }
.qs-ctext p {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.45rem, 3.4vw, 2.6rem);
  line-height: 1.18;
  letter-spacing: -0.024em;
  text-wrap: balance;
  color: var(--text);
  opacity: 0;
}
/* Vela el ruido de detrás justo cuando hay que leer. */
.qs-ctext__veil {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 56% 42% at 50% 50%, var(--bg) 40%, rgba(5, 6, 10, 0) 74%);
  opacity: 0;
}

/* ---------- la interfaz ---------- */
/* Centrado en el escenario, no en el flujo: .qs-journey es absoluto, así que
   un hijo normal caería arriba del todo, detrás del header. El -50%/-50% lo
   pone GSAP con xPercent/yPercent para no pelearse con scale e y. */
.qs-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  width: min(820px, calc(100% - 2 * max(22px, 5vw)));
  background: var(--bg-2);
  border: 1px solid var(--border-2);
  border-radius: 14px;
  box-shadow: 0 56px 110px -54px rgba(0, 0, 0, 1), 0 0 0 1px rgba(var(--senal-rgb), 0.07);
  opacity: 0;
  overflow: hidden;
}
.qs-panel__hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--border);
}
.qs-panel__hd b {
  font-family: var(--qs-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--text-2);
}
.qs-panel__hd u {
  font-family: var(--qs-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--senal);
  text-decoration: none;
  border: 1px solid rgba(var(--senal-rgb), 0.38);
  border-radius: 100px;
  padding: 4px 11px;
  opacity: 0;
  white-space: nowrap;
}
.qs-panel__grid { display: grid; grid-template-columns: 178px 1fr; }
.qs-panel__side { border-right: 1px solid var(--border); padding: 15px 0; }
.qs-phase {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  font-size: 13.5px;
  color: var(--text-3);
}
.qs-phase i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--border-2);
  display: block;
  flex: none;
}
.qs-panel__rows { padding: 15px 18px; display: flex; flex-direction: column; gap: 13px; }
.qs-row { display: flex; align-items: center; gap: 14px; opacity: 0; }
.qs-row > span {
  flex: 1;
  font-size: 14px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.qs-track {
  width: 80px; height: 3px;
  border-radius: 2px;
  background: rgba(185, 192, 212, 0.14);
  flex: none;
  overflow: hidden;
}
.qs-track b { display: block; height: 100%; width: 0; background: var(--senal); border-radius: 2px; }
.qs-st { position: relative; width: 124px; flex: none; height: 18px; }
.qs-st em {
  position: absolute;
  right: 0; top: 0;
  font-family: var(--qs-mono);
  font-size: 10.5px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  font-style: normal;
  white-space: nowrap;
}
.qs-st .a { color: var(--text-3); }
.qs-st .b { color: var(--senal); opacity: 0; }
.qs-panel__ft {
  padding: 11px 18px;
  border-top: 1px solid var(--border);
  font-family: var(--qs-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ---------- los tres tiempos ---------- */
.qs-beats {
  position: absolute;
  left: 0; right: 0;
  bottom: clamp(34px, 8vh, 92px);
  z-index: 6;
  display: grid;
  place-items: center;
  pointer-events: none;
  padding-inline: max(22px, 5vw);
}
.qs-beat {
  grid-area: 1 / 1;
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.45rem, 3.5vw, 2.6rem);
  letter-spacing: -0.024em;
  color: var(--text);
  opacity: 0;
  text-align: center;
}

/* ---------- el momento clave ---------- */
.qs-reveal {
  position: absolute;
  inset: 0;
  z-index: 7;
  display: grid;
  place-items: center;
  padding-inline: max(22px, 6vw);
  pointer-events: none;
  opacity: 0;
}
.qs-reveal p {
  margin: 0;
  max-width: 16ch;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2rem, 6.2vw, 5.4rem);
  line-height: 1;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text);
}
.qs-reveal__glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(ellipse 48% 36% at 50% 50%, rgba(var(--senal-rgb), 0.1), transparent 70%);
}

/* ---------- 05 · nace Advanext ---------- */
.qs-birth {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  /* La escena ya empieza bajo la cabecera: aquí sólo aire, no --qs-top. */
  padding-block: clamp(24px, 6vh, 64px);
  padding-inline: max(22px, 5vw);
}
.qs-birth__stack {
  position: relative;
  z-index: 2;
  width: min(var(--maxw), 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(22px, 4vh, 44px);
  text-align: center;
}

/* El wordmark: mismo tratamiento que .brand__mark del header (display,
   700, letter-spacing .04em, .grad sobre EXT), sólo que enorme. */
.qs-mark { position: relative; margin: 0; }
.qs-mark__text {
  display: inline-block;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.5rem, 8.6vw, 7.2rem);
  line-height: 1;
  letter-spacing: 0.04em;
  color: #fff;
  /* La marca se abre desde su propia línea central hacia arriba y hacia
     abajo: literalmente sale de la línea en la que se comprimió el panel. */
  clip-path: inset(50% 0 50% 0);
}
.qs-mark__text .grad { letter-spacing: 0.04em; }
.qs-mark__glow {
  position: absolute;
  inset: -60% -20%;
  z-index: -1;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(var(--senal-rgb), 0.13), transparent 70%);
  opacity: 0;
  pointer-events: none;
}

.qs-seed {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(430px, 64vw);
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.qs-seed i {
  display: block;
  height: 2px;
  background: var(--border-2);
  border-radius: 2px;
  transform-origin: 50% 50%;
}
.qs-seed i:nth-child(2) { width: 72%; margin-inline: auto; }
.qs-seed i:nth-child(3) { width: 88%; margin-inline: auto; }
.qs-seed i:nth-child(4) { width: 58%; margin-inline: auto; }

.qs-birth__copy { display: flex; flex-direction: column; gap: clamp(12px, 2vh, 20px); opacity: 0; }
.qs-birth__lead {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.3rem, 2.9vw, 2.3rem);
  line-height: 1.16;
  letter-spacing: -0.024em;
  color: var(--text);
  text-wrap: balance;
}
.qs-birth__text {
  margin: 0 auto;
  max-width: 58ch;
  font-size: clamp(0.98rem, 1.25vw, 1.12rem);
  line-height: 1.62;
  color: var(--text-2);
  text-wrap: pretty;
  opacity: 0;
}
.qs-birth__link { opacity: 0; }

/* Ecosistema: qué sale de aquí, con perspectiva y profundidad. Sin una sola
   etiqueta — los servicios ya tienen su sección y aquí no se re-listan. */
.qs-eco {
  position: absolute;
  inset: 0;
  z-index: 1;
  perspective: 1100px;
  pointer-events: none;
}
.qs-eco__item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  opacity: 0;
  color: rgba(var(--senal-rgb), 0.55);
  will-change: transform, opacity;
}
.qs-eco__item[data-eco="win"]  { --x: 20%; --y: 27%; }
.qs-eco__item[data-eco="app"]  { --x: 80%; --y: 25%; }
.qs-eco__item[data-eco="dash"] { --x: 13%; --y: 68%; }
.qs-eco__item[data-eco="flow"] { --x: 87%; --y: 63%; }
.qs-eco__item[data-eco="data"] { --x: 33%; --y: 85%; }
.qs-eco__item[data-eco="doc"]  { --x: 67%; --y: 86%; }

.qs-wire {
  display: block;
  background: rgba(255, 255, 255, 0.022);
  border: 1px solid rgba(var(--senal-rgb), 0.22);
  border-radius: 8px;
  box-shadow: 0 22px 48px -30px rgba(0, 0, 0, 0.9);
}
.qs-wire__bar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px;
  border-bottom: 1px solid rgba(var(--senal-rgb), 0.16);
}
.qs-wire__bar i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; display: block; }
.qs-wire__body { display: flex; flex-direction: column; gap: 5px; padding: 8px; }
.qs-wire__body b { display: block; height: 3px; border-radius: 2px; background: rgba(var(--senal-rgb), 0.3); }
.qs-wire__body b:nth-child(2) { width: 74%; }
.qs-wire__body b:nth-child(3) { width: 88%; }
.qs-wire__body b:nth-child(4) { width: 62%; }

.qs-wire--win { width: 124px; }
.qs-wire--app { width: 54px; border-radius: 10px; padding-top: 8px; }
.qs-wire__notch { display: block; width: 18px; height: 3px; border-radius: 2px; background: rgba(var(--senal-rgb), 0.3); margin: 0 auto; }
.qs-wire--dash { width: 116px; padding: 9px; }
.qs-wire__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-bottom: 7px; }
.qs-wire__tiles u { display: block; height: 13px; border-radius: 3px; background: rgba(var(--senal-rgb), 0.16); text-decoration: none; }
.qs-wire--dash svg { display: block; width: 100%; height: auto; }
.qs-wire--flow { width: 104px; padding: 7px; }
.qs-wire--flow svg { display: block; width: 100%; height: auto; }
.qs-wire--data { width: 92px; padding: 9px; }
.qs-wire__bars { display: flex; align-items: flex-end; gap: 5px; height: 34px; }
.qs-wire__bars u { flex: 1; border-radius: 2px 2px 0 0; background: rgba(var(--senal-rgb), 0.3); text-decoration: none; }
.qs-wire__bars u:nth-child(1) { height: 42%; }
.qs-wire__bars u:nth-child(2) { height: 68%; }
.qs-wire__bars u:nth-child(3) { height: 52%; }
.qs-wire__bars u:nth-child(4) { height: 88%; }
.qs-wire__bars u:nth-child(5) { height: 74%; }
.qs-wire--doc { width: 76px; border-radius: 3px; }

/* ---------- el recorrido · etapas 01–06 ----------
   Una línea a la izquierda y, colgando de ella, seis etapas con la MISMA
   estructura interna. La repetición es deliberada: es lo que se lee como
   orden. Van en flujo normal —sin sticky— porque así un píxel de scroll es
   un píxel de página y el recorrido avanza al ritmo de quien lee.

   Cada etapa ocupa una pantalla completa (descontada la cabecera), así que
   nunca hay dos compitiendo. */
.qs-recorrido {
  position: relative;
  background: var(--bg);
  padding-inline: max(22px, 5vw);
  /* Ancho de la línea y separación entre la línea y el texto. */
  --qs-rail-w: 2px;
  /* El corredor por el que baja la línea: el hueco entre las dos columnas.
     Los bloques se alternan a un lado y a otro, y el filo que sale del nodo
     cruza medio corredor hasta el texto. */
  --qs-corredor: clamp(58px, 8.5vw, 136px);
}
.qs-recorrido__in {
  position: relative;
  width: min(var(--maxw), 100%);
  margin-inline: auto;
}

/* Sólo para lectores de pantalla: el recorrido necesita un encabezado que
   lo nombre, pero en pantalla lo nombran las propias etapas. */
.qs-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---- la línea ----
   Dos capas: una guía tenue de extremo a extremo (para que el recorrido se
   lea como un recorrido y no como un rastro), y encima la línea real, que
   se descubre con el scroll mediante clip-path. Se recorta, no se escala:
   escalarla comprimiría también el degradado y los colores no caerían donde
   toca. Los insets laterales son negativos para que el ensanchamiento del
   atasco no quede cortado. */
.qs-rail {
  position: absolute;
  left: 50%;
  margin-left: calc(var(--qs-rail-w) / -2);
  top: 0;
  bottom: 0;
  width: var(--qs-rail-w);
  z-index: 1;
  pointer-events: none;
}
.qs-rail__track,
.qs-rail__grow {
  position: absolute;
  inset: 0;
  border-radius: 2px;
}
.qs-rail__track { background: var(--qs-line); }
.qs-rail__grow {
  /* El color explica el estado del proceso. Los cortes están calculados
     sobre las seis etapas: el nodo de la etapa N cae en (N − 0,5) / 6. */
  background: linear-gradient(
    to bottom,
    var(--qs-line-2) 0%,
    var(--qs-line-2) 26%,
    var(--qs-amber)  37%,
    var(--qs-rose)   44%,
    var(--qs-rose)   55%,
    var(--senal)     64%,
    var(--senal)     100%
  );
  clip-path: inset(0 -6px 100% -6px);
}
/* El tramo del cuello de botella: la línea engorda justo donde se atasca. */
.qs-rail__swell {
  position: absolute;
  left: 50%;
  top: 40%;
  height: 17%;
  width: 6px;
  margin-left: -3px;
  border-radius: 3px;
  background: var(--qs-rose);
  opacity: 0.9;
}

/* ---- las etapas ---- */
.qs-etapas { list-style: none; margin: 0; padding: 0; }

.qs-etapa {
  position: relative;
  min-height: calc(100svh - var(--qs-top));
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: var(--qs-corredor);
  align-content: center;
  align-items: center;
}
/* El bloque cambia de lado y se alinea contra la línea: el texto nace del
   recorrido, no flota suelto en su mitad. La jerarquía interna —número,
   etiqueta, frase, detalle— no cambia nunca; sólo se refleja. */
.qs-etapa:nth-child(odd) .qs-etapa__bloque {
  grid-column: 1;
  align-items: flex-end;
  text-align: right;
}
.qs-etapa:nth-child(even) .qs-etapa__bloque {
  grid-column: 2;
  grid-row: 1;
  align-items: flex-start;
  text-align: left;
}

/* El nodo, sobre la línea, a la altura del bloque. */
.qs-etapa::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--qs-line-2);
  transform: scale(0.8);
  transition: border-color 0.45s var(--ease), box-shadow 0.45s var(--ease),
              transform 0.5s var(--ease-2);
}
.qs-etapa.is-activa::before {
  border-color: var(--senal);
  box-shadow: 0 0 0 5px rgba(var(--senal-rgb), 0.11);
  transform: scale(1.15);
}
/* La etapa del diagnóstico es la única en rojo: es donde está el problema. */
.qs-etapa[data-etapa="3"].is-activa::before {
  border-color: var(--qs-rose);
  box-shadow: 0 0 0 5px rgba(var(--alerta-rgb), 0.12);
}
/* El filo que cose el nodo con su etapa: sale de la línea hacia el lado
   que ocupa el texto, y se dibuja cuando la etapa entra. Mismo lenguaje
   que la línea, que es lo único decorativo que se repite. */
.qs-etapa::after {
  content: "";
  position: absolute;
  top: 50%;
  width: calc(var(--qs-corredor) / 2 - 9px);
  height: 1px;
  background: var(--qs-line-2);
  transform: scaleX(0);
  transition: transform 0.65s var(--ease-2);
}
.qs-etapa:nth-child(odd)::after {
  right: calc(50% + var(--qs-rail-w));
  transform-origin: right center;
}
.qs-etapa:nth-child(even)::after {
  left: calc(50% + var(--qs-rail-w));
  transform-origin: left center;
}
.qs-etapa.is-activa::after { transform: scaleX(1); }

/* El número se enciende con su etapa: el único cambio de color del bloque. */
.qs-etapa__n { transition: color 0.45s var(--ease); }
.qs-etapa:not(.is-activa) .qs-etapa__n { color: var(--text-3); }

/* ---- la estructura fija: número, etiqueta, frase, detalle ---- */
.qs-etapa__bloque {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.qs-etapa__n {
  margin: 0 0 10px;
  font-family: var(--qs-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--senal);
}
.qs-etapa__label {
  margin: 0 0 clamp(14px, 2.2vh, 22px);
  font-family: var(--qs-mono);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-3);
}
.qs-etapa__frase {
  margin: 0;
  max-width: 19ch;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.7rem, 3.3vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--text);
  text-wrap: balance;
}
.qs-etapa__detalle {
  margin: clamp(16px, 2.4vh, 26px) 0 0;
  max-width: 44ch;
  font-size: clamp(0.97rem, 1.15vw, 1.08rem);
  line-height: 1.6;
  color: var(--text-2);
  text-wrap: pretty;
}


/* ---------- 06 · cierre ---------- */
.qs-halo {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: radial-gradient(ellipse 58% 42% at 50% 44%, rgba(var(--senal-rgb), 0.09), transparent 70%);
  opacity: 0;
  pointer-events: none;
}
.qs-final {
  position: relative;
  z-index: 2;
  width: min(1120px, 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(30px, 6vh, 64px);
}

/* Las dos frases comparten celda: la segunda ocupa el sitio de la primera.
   Una línea de acento barre el bloque y, a su paso, recorta una y descubre
   la otra. No es un fundido: es la frase reescribiéndose. */
.qs-swap { position: relative; display: grid; width: 100%; }
.qs-swap p {
  grid-area: 1 / 1;
  margin: 0;
  text-align: center;
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(2.4rem, 7.6vw, 6.2rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  text-wrap: balance;
  color: var(--text);
}
.qs-swap__b { clip-path: inset(0 100% 0 0); }
.qs-swap__edge {
  position: absolute;
  left: 0;
  top: -5%;
  bottom: -5%;
  width: 2px;
  background: linear-gradient(transparent, var(--senal), transparent);
  opacity: 0;
  pointer-events: none;
}

.qs-cta { display: flex; flex-direction: column; align-items: center; gap: clamp(16px, 2.6vh, 26px); opacity: 0; }
.qs-cta__q {
  margin: 0;
  max-width: 34ch;
  text-align: center;
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.1rem, 2.1vw, 1.6rem);
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: var(--text-2);
  text-wrap: balance;
}

/* ---------- responsive ----------
   Los cortes son los del proyecto: 1100 / 880 / 560. */
@media (max-width: 1100px) {
  .qs-page { --qs-top: var(--header-h, 108px); }
}

/* Móvil y tablet vertical: las frases dejan de volar por la pantalla y pasan
   a una columna centrada. Legibilidad por delante del efecto. */
@media (max-width: 880px) {
  .qs-page { --qs-top: var(--header-h, 96px); }

  /* El recorrido vertical funciona mejor aquí que en escritorio: la línea
     baja por la izquierda y las etapas se cuelgan de ella, en una sola
     columna. No hay alternancia: no hay dos lados. */
  /* Aquí la línea vuelve al lado izquierdo y las etapas se cuelgan de ella
     en una sola columna: a 390px no hay dos mitades que alternar. */
  .qs-recorrido { --qs-corredor: clamp(30px, 9vw, 46px); }
  .qs-rail { left: 0; margin-left: 0; }
  .qs-etapa {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(20px, 3vh, 32px);
    padding-left: var(--qs-corredor);
    min-height: calc(100svh - var(--qs-top));
  }
  .qs-etapa:nth-child(odd) .qs-etapa__bloque,
  .qs-etapa:nth-child(even) .qs-etapa__bloque {
    grid-column: 1;
    grid-row: auto;
    align-items: flex-start;
    text-align: left;
  }
  .qs-etapa__frase { max-width: 100%; font-size: clamp(1.55rem, 6.4vw, 2.2rem); }
  .qs-etapa__detalle { max-width: 100%; }
  .qs-etapa::before { left: 0; }
  .qs-etapa:nth-child(odd)::after,
  .qs-etapa:nth-child(even)::after {
    right: auto;
    left: var(--qs-rail-w);
    width: calc(var(--qs-corredor) - 12px);
    transform-origin: left center;
  }

  .qs-grid { background-size: 52px 52px; }

  #qsFil { height: 220vh; }
  /* En móvil los dos pasos se apilan; el filo del 01 se queda en su
     columna y ya no cruza ningún hueco. */
  .qs-fil { grid-template-columns: minmax(0, 1fr); row-gap: clamp(40px, 8vh, 72px); }
  .qs-fil__linea { margin-right: 0; }
  .qs-fil__frase { max-width: 14ch; font-size: clamp(1.9rem, 8.4vw, 2.6rem); }

  /* Menos elementos a la vez y menos profundidad: el móvil no es una copia
     reducida. Los fragmentos marcados se retiran del todo. */
  .qs-frag[data-qs-hide="1"] { display: none; }

  .qs-eco { perspective: 700px; }
  .qs-eco__item[data-eco="flow"],
  .qs-eco__item[data-eco="data"] { display: none; }
  .qs-eco__item[data-eco="win"]  { --x: 22%; --y: 22%; }
  .qs-eco__item[data-eco="app"]  { --x: 80%; --y: 24%; }
  .qs-eco__item[data-eco="dash"] { --x: 20%; --y: 80%; }
  .qs-eco__item[data-eco="doc"]  { --x: 80%; --y: 78%; }

  .qs-panel__grid { grid-template-columns: 1fr; }
  .qs-panel__side {
    border-right: 0;
    border-bottom: 1px solid var(--border);
    display: flex;
    flex-wrap: wrap;
    padding: 9px 0;
  }
  .qs-phase { padding: 6px 14px; font-size: 12.5px; }
  .qs-track { display: none; }
}

@media (max-width: 560px) {
  .qs-display { font-size: clamp(2.2rem, 11vw, 3.4rem); }
  .qs-st { width: 108px; }
  .qs-panel__rows { padding: 13px 14px; }
  .qs-row > span { font-size: 13px; }
}

/* ---------- movimiento reducido / sin GSAP ----------
   Versión real, no una degradación rota. El recorrido ya va en flujo normal,
   así que aquí casi no hay nada que deshacer: la línea se dibuja entera de
   entrada, los nodos quedan encendidos y las dos únicas escenas pegadas
   (hero y cierre) pasan a estáticas. Todo el contenido, visible.
   .qs-static la pone el JS si GSAP no ha cargado. */
@media (prefers-reduced-motion: reduce) {
  .qs-hint, .qs-grid, .qs-halo, .qs-swap__edge,
  .qs-wires, .qs-ctext__veil, .qs-reveal__glow,
  .qs-seed, .qs-mark__glow { display: none; }

  #qs1, #qsFil, #qs3, #qs5, #qs6 { height: auto; }
  .qs-fil__label { opacity: 1; }
  .qs-fil__linea { transform: none; }
  .qs-fil__paso--a { --foco: 1; }
  .qs-fil__scan { display: none; }
  .qs-fil__b { clip-path: none; color: var(--senal); -webkit-text-stroke: 0; background: none; }

  .qs-journey { position: static; inset: auto; max-width: var(--maxw); margin-inline: auto; }
  .qs-frags {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
    align-items: start;
    margin-bottom: 48px;
  }
  .qs-frag { position: static; width: auto !important; opacity: 1; transform: none; }
  .qs-frag__tint { display: none; }

  .qs-ctext { position: static; display: block; padding: 0; margin-bottom: 48px; }
  .qs-ctext > div { text-align: left; width: auto; }
  .qs-ctext p { opacity: 1; margin-bottom: 12px; }

  .qs-panel { position: static; left: auto; top: auto; width: auto; opacity: 1; transform: none; margin-inline: auto; }
  .qs-panel__hd u { opacity: 1; }
  .qs-row { opacity: 1; transform: none; }
  .qs-track b { width: 100%; }
  .qs-st .a { display: none; }
  .qs-st .b { opacity: 1; }
  .qs-phase { color: var(--text); }
  .qs-phase i { background: var(--senal); }

  .qs-beats { position: static; display: block; margin: 40px 0 0; padding: 0; }
  .qs-beat { opacity: 1; transform: none; display: inline; margin-right: 0.45em; text-align: left; }

  .qs-reveal { position: static; opacity: 1; display: block; padding: 48px 0 0; }
  .qs-reveal p { max-width: 20ch; text-align: left; transform: none; }

  .qs-birth { position: static; display: block; padding: 0; }
  .qs-birth__stack { width: auto; align-items: flex-start; text-align: left; }
  .qs-mark__text { clip-path: none; }
  .qs-birth__copy, .qs-birth__text, .qs-birth__link { opacity: 1; }
  .qs-birth__text { margin-inline: 0; }
  .qs-eco { position: static; display: flex; flex-wrap: wrap; gap: 20px; margin-top: 32px; }
  .qs-eco__item { position: static; opacity: 1; transform: none; }

  .qs-stage {
    position: static;
    height: auto;
    overflow: visible;
    display: block;
    padding-block: clamp(56px, 11vh, 120px);
  }
  .qs-hero { margin-inline: auto; }

  .qs-rail__grow { clip-path: none; }
  .qs-etapa::before { border-color: var(--senal); transform: scale(1); }
  .qs-etapa::after { transform: scaleX(1); }
  .qs-etapa[data-etapa="3"]::before { border-color: var(--qs-rose); }

  .qs-final { align-items: flex-start; width: auto; }
  .qs-swap { display: block; }
  .qs-swap p { text-align: left; }
  .qs-swap__b { clip-path: none; }
  .qs-cta { opacity: 1; align-items: flex-start; }
  .qs-cta__q { text-align: left; }
}

.qs-static .qs-hint,
.qs-static .qs-grid,
.qs-static .qs-halo,
.qs-static .qs-swap__edge,
.qs-static .qs-wires,
.qs-static .qs-ctext__veil,
.qs-static .qs-reveal__glow,
.qs-static .qs-seed,
.qs-static .qs-mark__glow { display: none; }

.qs-static #qs1, .qs-static #qsFil, .qs-static #qs3,
.qs-static #qs5, .qs-static #qs6 { height: auto; }
.qs-static .qs-fil__label { opacity: 1; }
.qs-static .qs-fil__linea { transform: none; }
.qs-static .qs-fil__paso--a { --foco: 1; }
.qs-static .qs-fil__scan { display: none; }
.qs-static .qs-fil__b { clip-path: none; color: var(--senal); -webkit-text-stroke: 0; background: none; }

.qs-static .qs-journey { position: static; inset: auto; max-width: var(--maxw); margin-inline: auto; }
.qs-static .qs-frags {
    position: static;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap: 18px;
    align-items: start;
    margin-bottom: 48px;
.qs-static }
.qs-static .qs-frag { position: static; width: auto !important; opacity: 1; transform: none; }
.qs-static .qs-frag__tint { display: none; }

.qs-static .qs-ctext { position: static; display: block; padding: 0; margin-bottom: 48px; }
.qs-static .qs-ctext > div { text-align: left; width: auto; }
.qs-static .qs-ctext p { opacity: 1; margin-bottom: 12px; }

.qs-static .qs-panel { position: static; left: auto; top: auto; width: auto; opacity: 1; transform: none; margin-inline: auto; }
.qs-static .qs-panel__hd u { opacity: 1; }
.qs-static .qs-row { opacity: 1; transform: none; }
.qs-static .qs-track b { width: 100%; }
.qs-static .qs-st .a { display: none; }
.qs-static .qs-st .b { opacity: 1; }
.qs-static .qs-phase { color: var(--text); }
.qs-static .qs-phase i { background: var(--senal); }

.qs-static .qs-beats { position: static; display: block; margin: 40px 0 0; padding: 0; }
.qs-static .qs-beat { opacity: 1; transform: none; display: inline; margin-right: 0.45em; text-align: left; }

.qs-static .qs-reveal { position: static; opacity: 1; display: block; padding: 48px 0 0; }
.qs-static .qs-reveal p { max-width: 20ch; text-align: left; transform: none; }

.qs-static .qs-birth { position: static; display: block; padding: 0; }
.qs-static .qs-birth__stack { width: auto; align-items: flex-start; text-align: left; }
.qs-static .qs-mark__text { clip-path: none; }
.qs-static .qs-birth__copy, .qs-birth__text, .qs-birth__link { opacity: 1; }
.qs-static .qs-birth__text { margin-inline: 0; }
.qs-static .qs-eco { position: static; display: flex; flex-wrap: wrap; gap: 20px; margin-top: 32px; }
.qs-static .qs-eco__item { position: static; opacity: 1; transform: none; }

.qs-static .qs-stage {
  position: static;
  height: auto;
  overflow: visible;
  display: block;
  padding-block: clamp(56px, 11vh, 120px);
}
.qs-static .qs-hero { margin-inline: auto; }

.qs-static .qs-rail__grow { clip-path: none; }
.qs-static .qs-etapa::before { border-color: var(--senal); transform: scale(1); }
.qs-static .qs-etapa::after { transform: scaleX(1); }
.qs-static .qs-etapa[data-etapa="3"]::before { border-color: var(--qs-rose); }

.qs-static .qs-final { align-items: flex-start; width: auto; }
.qs-static .qs-swap { display: block; }
.qs-static .qs-swap p { text-align: left; }
.qs-static .qs-swap__b { clip-path: none; }
.qs-static .qs-cta { opacity: 1; align-items: flex-start; }
.qs-static .qs-cta__q { text-align: left; }