/* ============================================================
   EVO GROWTH SYSTEM — SISTEMA DE ESCENAS (página piloto)
   ------------------------------------------------------------
   Se carga DESPUÉS de index.css y pages.css, y SÓLO en
   /evo-growth-system/. Todo cuelga de `body.gs-page` o de un prefijo
   `.gs-`, así que no puede alcanzar a ninguna otra página aunque alguien
   cargue la hoja por error. `assets/sistema.css` no se carga aquí.

   ============================================================
   QUÉ SE CORRIGIÓ EN LA RONDA DE REFINAMIENTO
   ============================================================
   Comparando esta página con la HOME lado a lado, la diferencia no estaba
   en la composición sino en cinco cosas concretas y medibles:

   1 · MATERIA. La HOME apoya su contenido sobre un plano: filo superior
       encendido, gradiente radial naciendo del canto y una sombra
       profunda. Aquí todo flotaba directamente sobre el vacío. Se
       recuperó ese plano —receta idéntica— y se aplicó SÓLO donde hay
       una superficie de verdad: la columna lateral y el formulario. En
       las fichas del recorrido no, porque ahí serían tarjetas.

   2 · JERARQUÍA. El H1 medía 74px y el H2 de escena 49px: un salto de
       1.5. En la HOME es 74 → 43, un salto de 1.7. Los titulares de
       escena gritaban. Ahora usan exactamente la escala de la HOME.

   3 · MEDIDA Y CONTRASTE. El texto de apoyo iba a 19px y 67 caracteres
       por línea, contra 16px y 52 de la HOME. Y todo el cuerpo usaba
       `--muted`, que la HOME reserva para lo accesorio: lo que hay que
       leer va en un tono más alto (`--gs-tinta`).

   4 · MICRO-RÓTULOS. La HOME tiene un sistema: monoespaciado, .72rem,
       tracking .2em para índices; versalita tracking .13em separada por
       puntos medios para listas. Aquí convivían tres criterios distintos
       y unas píldoras con borde que son lenguaje de SaaS genérico. Ahora
       hay un solo sistema, el de la HOME.

   5 · CONEXIÓN. Las fichas estaban colocadas cerca del arco, no colgadas
       de él. Un tallo de un píxel une cada nodo con su ficha: la
       información emerge del recorrido en vez de posarse encima.

   ============================================================
   REPARTO DE LUZ
   ============================================================
   El fondo es casi negro SIEMPRE. El azul eléctrico aparece en cuatro
   sitios y en ninguno más: la frase acentuada de cada escena, el filo del
   arco con sus nodos, el CTA principal y el foco del teclado.

   El filo del arco lleva degradado (ver `bloques/escenas.js`): nace
   apagado, alcanza su máximo en el tramo de lectura y se apaga. Un trazo
   uniforme de extremo a extremo es lo que hace que una curva luminosa se
   lea como neón.

   ============================================================
   QUÉ MUEVE EL SCROLL
   ============================================================
   `assets/escenas.js` escribe variables y clases; el CSS decide todo lo
   demás. Sin script, los valores por defecto dejan la página entera
   dibujada y legible. Ése es el estado correcto.
   ============================================================ */

.gs-page{
  /* Azul eléctrico del storyboard, separado de --cyan: el cian saturado
     en tipografía de display lee como neón. */
  --gs-acento:#4E8DFF;

  /* Filo del arco. Tres intensidades, no una. */
  --gs-filo:rgba(150,220,255,.5);
  --gs-filo-alto:rgba(198,240,255,.9);
  --gs-nodo:rgba(140,200,245,.3);

  /* Tinta de lectura. `--muted` queda para lo verdaderamente accesorio;
     lo que el visitante tiene que leer va aquí, como en la HOME. */
  --gs-tinta:#BACDE4;

  /* Micro-rótulos: DOS tonos, no cinco. Antes convivían cuatro alfas
     distintas del mismo cian (.82, .72, .70, .60) porque cada rótulo
     venía de una hoja distinta; a esa escala la diferencia no se lee como
     jerarquía, se lee como descuido. */
  --gs-rotulo:rgba(120,215,255,.72);
  --gs-rotulo-alto:rgba(156,228,255,.92);

  /* ------------------------------------------------------------
     EL RITMO, EN UN SOLO SITIO
     ------------------------------------------------------------
     Un solo easing para toda la página: si cada elemento trae el suyo,
     las apariciones dejan de leerse como una orquesta.

     `--gs-dur` y `--gs-paso` gobiernan TODA la aparición del sistema:
     cuánto tarda un elemento en entrar y cuánto se separa del siguiente.
     Ninguna regla de más abajo pone su propia duración a ojo; todas
     salen de aquí o de una fracción declarada de aquí.

     Medido antes del ajuste: una escena que fluye construía sus cuatro
     fichas en 160–200px de scroll —medio segundo a velocidad normal— y
     se iba sin quedarse completa ni un instante. Estos dos valores
     suben un 26% y un 42%; el resto del ritmo lo pone el reparto del
     progreso, en escenas.js.
     ------------------------------------------------------------ */
  --gs-ease:cubic-bezier(.22,1,.36,1);
  --gs-dur:.78s;
  --gs-paso:85ms;
  /* Fracciones del ritmo base para lo que acompaña, no protagoniza. */
  --gs-dur-corta:.62s;
  --gs-dur-media:.55s;

  /* Alto del recuadro del recorrido. Con la curva nueva —diez puntos de
     vano en vez de cuarenta y cuatro— las fichas quedan casi a la misma
     altura y hace falta bastante menos caja. Medido: la ficha más alta son
     158px y el nodo más bajo está al 36.7%, así que el fondo del conjunto
     cae en 0.367·H + 173. Con 320px sobran 30 de cola, que es el aire que
     separa el recorrido de su pie; con 360 sobraban 72 y se leía como un
     hueco. */
  --gs-alto:clamp(300px,36vh,330px);
}

/* El acento de escena. Uno por titular, y sólo uno. */
.gs-page .gs-escena em{font-style:normal;color:var(--gs-acento)}

/* ------------------------------------------------------------
   GRANO
   ------------------------------------------------------------
   Un plano negro absoluto delata cualquier degradado por bandas y, en
   pantallas grandes, se lee como plástico. Un grano de un 3% rompe la
   banda y da la textura de película que tiene la HOME por su capa de
   partículas —que aquí no se replica porque cuesta un canvas repintando.

   Va por DEBAJO del contenido (z-index 0, como la atmósfera), así que no
   toca la nitidez del texto. Es una sola imagen de 120×120 embebida: sin
   petición de red y sin coste por fotograma.
   ------------------------------------------------------------ */
.gs-page::after{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.032;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   LA BARRA SUPERIOR NO SE ESCONDE EN ESTA PÁGINA
   ------------------------------------------------------------
   EL PARPADEO, MEDIDO. `setupHeader()` de `assets/site.js` decide así:

       header-hidden = y > 260 && y > last + 4      con  last = y

   `last` se actualiza en CADA evento de scroll, así que la comparación
   no es contra el gesto sino contra el fotograma anterior. Un gesto real
   de rueda no es un escalón: emite muchos eventos con un desplazamiento
   que decae hasta cero. En cuanto la cola de una muesca baja de 4px por
   evento, la condición se vuelve falsa y la barra vuelve a entrar; la
   muesca siguiente la esconde otra vez.

   Reproducido con inercia decreciente: OCHO muescas producen DIECISÉIS
   conmutaciones. Una salida y una entrada por muesca.

   El defecto es de la lógica compartida y sale igual en EVO ERP —mismos
   dieciséis— pero sólo se PERCIBE aquí: en el resto de páginas el
   contenido se desplaza y el movimiento de la barra se confunde con él;
   en la escena fijada del recorrido el contenido se queda quieto durante
   2340px de scroll y la barra pasa a ser lo único que se mueve.

   SOLUCIÓN: opción A. La barra se queda visible y estable durante toda
   la página. En una escena fijada, esconderla no descubre contenido —no
   hay nada detrás que ganar—, así que el movimiento sólo aporta ruido.

   POR QUÉ ASÍ Y NO TOCANDO EL SCRIPT. `site.js` lo comparten las seis
   páginas internas; corregirlo ahí cambiaría el comportamiento de todas
   y esta ronda es sólo EVO Growth. Neutralizar la transformación bajo
   `.gs-page` es determinista —no hay umbral que oscilar, no hay estado
   que sincronizar— y no puede alcanzar a nada más. La HOME ni siquiera
   carga `site.js`: tiene su propio motor en `index.js`, intacto.

   Queda anotado como hallazgo del script compartido para una ronda
   propia: ahí la corrección es acumular el gesto e introducir histéresis
   entre el umbral de ocultar y el de mostrar, no bajar el 4 a 1.
   ============================================================ */
.gs-page .site-header.header-hidden{transform:none}

/* ------------------------------------------------------------
   Y SIN DESENFOQUE DE FONDO, POR LO MISMO
   ------------------------------------------------------------
   `.site-header.scrolled` lleva `backdrop-filter: blur(16px)`. Mientras
   la barra se escondía al bajar, ese desenfoque casi no llegaba a
   renderizarse. Dejándola fija, el navegador recompone y vuelve a
   desenfocar la franja en CADA fotograma de scroll.

   Medido en la misma pasada: 28.8ms de fotograma mediano con el
   desenfoque, 20.5ms sin él. Ocho milisegundos, sólo por la barra.

   Y no aporta nada aquí: detrás de la cabecera hay fondo casi negro con
   una atmósfera muy tenue, así que desenfocarlo produce el mismo color
   que ponerlo opaco. Se cambia por un fondo al 92%, que es lo que el
   desenfoque estaba calculando de todos modos.
   ------------------------------------------------------------ */
.gs-page .site-header.scrolled{
  background:rgba(2,5,11,.92);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}

/* El tamaño del logo dejó de vivir aquí: aprobado el piloto, subió a
   index.css y lo comparten todas las páginas. */

/* ------------------------------------------------------------
   EL ARCO DE FONDO
   ------------------------------------------------------------
   Es el mismo `.page-horizon` que comparten las páginas internas con la
   HOME: no se sustituye, se le da comportamiento. Al bajar sube unos
   grados y su cresta se enciende. Una sola transformación compuesta.
   ------------------------------------------------------------ */
.gs-page .page-horizon{
  transform:translateX(-50%) translateY(calc(var(--gs-p,0) * -7vh));
  transition:none;
  will-change:transform;
}
.gs-page .page-horizon::after{
  content:"";position:absolute;left:50%;top:-1px;width:52%;height:2px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 50%,rgba(150,225,255,.42),transparent 72%);
  opacity:calc(.2 + var(--gs-p,0) * .5);
}

/* ------------------------------------------------------------
   ARQUITECTURA DE ESCENA
   Mismo idioma que la HOME —sección alta + `sticky` dentro— para que las
   dos se sientan del mismo sitio. La diferencia es que aquí NO se
   secuestra la rueda: el scroll es el del navegador y la escena sólo lee
   su posición. Sin captura no hay microatascos que depurar.
   ------------------------------------------------------------ */
.gs-escena{position:relative;z-index:1}
/* Sólo el recorrido se fija. La promesa es un hero: no hay nada que
   recorrer dentro de ella, y clavarla de más produce un traspaso
   incómodo en el que las dos escenas se ven a la vez. */
.gs-escena--promesa{min-height:100vh;min-height:100dvh;display:grid;align-content:safe center}
/* 320vh y no 260: es el espacio de scroll del que dispone la escena para
   construirse Y para quedarse quieta una vez completa. Ver el reparto del
   progreso en escenas.js. */
.gs-escena--recorrido{height:calc(var(--largo,320) * 1vh)}
.gs-escena--promesa > .gs-pin{position:static;height:auto;overflow:visible}

/* ============================================================
   LA ZONA SEGURA BAJO LA CABECERA
   ------------------------------------------------------------
   EL FALLO, MEDIDO. El pin es una rejilla de una fila con
   `align-content:center`. Cuando su contenido es MÁS ALTO que el pin,
   `center` reparte el exceso a partes iguales arriba y abajo: la mitad
   superior se mete bajo la cabecera fija y `overflow:clip` la recorta.
   El `padding-top:var(--header)` del stage no protegía nada, porque el
   desplazamiento negativo se aplica al stage ENTERO, padding incluido.

   Umbral medido en Agentes de IA, que es la escena con el titular más
   alto: el stage mide entre 631 y 646px, así que por debajo de ~640px de
   altura útil el titular empieza a quedar detrás de la barra. A 600px se
   ocultan 17px; a 560px, 36px.

   LA CORRECCIÓN, en dos piezas:

   1 · `safe center`. Es la garantía dura. Cuando el contenido desborda,
       `safe` degrada a `start` en vez de centrar: el stage se ancla
       arriba y entonces su `padding-top` SÍ funciona como zona segura.
       El contenido nunca puede subir por encima de la cabecera, pase lo
       que pase con el tamaño del texto o de la fuente.

   2 · Por debajo de 700px de altura útil las escenas dejan de fijarse
       (más abajo). Con `safe center` el titular se salva, pero el pie
       del contenido se recortaría por abajo; recomponer es la misma
       decisión que ya se toma por debajo de 1240px de ancho.

   No es un parche para un titular: cualquier escena de cualquier página
   que crezca —una traducción más larga, un tamaño de fuente mayor— cae
   del lado seguro.
   ============================================================ */
.gs-pin{position:sticky;top:0;height:100vh;height:100dvh;
  display:grid;align-content:safe center;overflow:clip}
.gs-stage{width:100%;display:grid;align-content:safe center;justify-items:stretch;
  padding-top:var(--header);padding-bottom:clamp(20px,4vh,44px)}

/* Las escenas con ancla propia tienen que aterrizar por debajo de la
   barra cuando se entra por enlace, por teclado o al recargar. */
.gs-escena[id]{scroll-margin-top:calc(var(--header) + 16px)}

/* ------------------------------------------------------------
   REVELADO ORQUESTADO
   ------------------------------------------------------------
   Por defecto TODO está visible: si el script no llega, la página se lee
   entera. El propio script marca <html class="gs-js"> y sólo entonces los
   elementos empiezan ocultos.

   El desenfoque es de 5px y no más: por encima de eso el texto «respira»
   y se nota que está animándose, que es justo lo contrario de lo que se
   busca. Un mismo easing y un mismo escalón de 60ms en toda la página.
   ------------------------------------------------------------ */
.gs-rise{opacity:1;transform:none;filter:none}
html.gs-js .gs-page .gs-rise{
  opacity:0;transform:translateY(14px);filter:blur(5px);
  transition:opacity var(--gs-dur) var(--gs-ease),
             transform var(--gs-dur) var(--gs-ease),
             filter var(--gs-dur) var(--gs-ease);
  transition-delay:calc(var(--i,0) * var(--gs-paso));
}
html.gs-js .gs-page .gs-rise.gs-visible{opacity:1;transform:none;filter:blur(0)}
/* El foco no espera la transición. Al tabular se puede llegar a un tramo
   que todavía no ha entrado en pantalla: el script lo marca visible, pero
   el fundido de 620ms deja el elemento transparente justo cuando acaba de
   recibir el foco. Con `:focus-within` aparece en el mismo fotograma.
   Medido tabulando hasta el enlace de respaldo del calendario. */
html.gs-js .gs-page .gs-rise:focus-within{opacity:1;transform:none;filter:none;transition:none}

/* ------------------------------------------------------------
   MICRO-RÓTULOS — un solo sistema, el de la HOME
   ------------------------------------------------------------
   `.gs-kicker`  monoespaciado, tracking .2em, para índices y epígrafes
   `.gs-meta`    versalita, tracking .13em, separada por puntos medios
   Sin píldoras: un borde alrededor de cada dato es lenguaje de etiqueta
   de SaaS y compite con el arco por la atención.
   ------------------------------------------------------------ */
.gs-kicker{font:600 .7rem/1 ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gs-rotulo)}
/* El epígrafe y el rótulo del formulario vienen de index.css y pages.css
   con sus propias alfas. En esta página se unifican. */
.gs-page .eyebrow,
.gs-page .form-kicker{color:var(--gs-rotulo)}

.gs-meta{display:flex;flex-wrap:wrap;align-items:center;gap:4px 9px;margin-top:11px;
  font-size:.68rem;letter-spacing:.13em;text-transform:uppercase;color:#7F93AE;line-height:1.5}
.gs-meta li{display:inline-flex;align-items:center;gap:9px}
.gs-meta li::after{content:"·";color:var(--line-lit);font-size:.9rem;line-height:1}
.gs-meta li:last-child::after{content:none}

/* ------------------------------------------------------------
   CABECERAS DE ESCENA
   Escala idéntica a la de la HOME: el salto del H1 al H2 vuelve a ser de
   1.7 y no de 1.5, que era lo que aplanaba la jerarquía.
   ------------------------------------------------------------ */
.gs-cabecera{text-align:center;max-width:min(100% - 2 * var(--gutter),820px);margin-inline:auto}
.gs-cabecera h2{font-size:clamp(1.5rem,1.05rem + 1.9vw,2.7rem);line-height:1.07;
  letter-spacing:-.035em;max-width:21ch;margin-inline:auto}
.gs-cabecera--izq{text-align:left;max-width:none}
.gs-cabecera--izq h2{margin-inline:0;max-width:18ch}

/* Apoyo de escena: tamaño y medida de cuerpo, no de lead. */
.gs-apoyo{color:var(--muted);font-size:clamp(.96rem,.92rem + .3vw,1.06rem);
  line-height:1.7;max-width:52ch;margin-top:16px}
.gs-cabecera:not(.gs-cabecera--izq) .gs-apoyo{margin-inline:auto}

/* ============================================================
   ESCENA 1 · PROMESA
   ============================================================ */
.gs-promesa{text-align:center;display:grid;justify-items:center}
.gs-promesa .crumbs{justify-content:center;margin-bottom:16px;font-size:.75rem}
.gs-promesa .eyebrow{margin-bottom:20px}
.gs-promesa h1{max-width:15ch;margin-bottom:24px}
/* El hero sí conserva medida de lead: es la única frase larga que se lee
   a esa distancia. */
.gs-promesa .gs-apoyo{font-size:var(--fs-lead);line-height:1.72;max-width:54ch;
  margin-top:0;margin-bottom:32px}
.gs-acciones{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ---------- Microinteracción de los CTA ----------
   El hover de `.button` lo hereda de index.css y no se toca. Lo que
   faltaba era el estado PULSADO —sin él, un botón con sombra se siente
   pintado, no físico— y un foco coherente con el resto del sitio. */
.gs-acciones .button{transition:transform var(--t-fast) var(--gs-ease),
  box-shadow var(--t-base) ease,border-color var(--t-fast) ease}
.gs-acciones .button:active{transform:translateY(0) scale(.985);
  box-shadow:0 4px 16px rgba(16,72,190,.3),inset 0 1px 0 rgba(255,255,255,.1)}
.gs-acciones .button.ghost:active{box-shadow:0 0 18px rgba(53,226,255,.07)}

/* ============================================================
   LA TRAYECTORIA — recuadro común de las tres escenas con arco
   ------------------------------------------------------------
   El SVG y los rótulos comparten sistema de coordenadas: viewBox 0–100
   con `preserveAspectRatio="none"` equivale a porcentajes del recuadro,
   así que un nodo en (58,41) y su ficha en left:58%; top:41% caen en el
   mismo píxel a cualquier ancho. Ver bloques/escenas.js.
   ============================================================ */
.gs-traza{position:relative;margin-inline:auto;width:min(100% - 2 * var(--gutter),1320px)}
.gs-traza-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
/* La línea apagada es sólo una insinuación del camino que falta. */
.gs-traza-fondo{fill:none;stroke:rgba(122,166,220,.13);stroke-width:1}
/* Un píxel, no 1.4: el grosor era lo que daba el aire de neón. El color
   viene del degradado declarado en el marcado. */
.gs-traza-linea{fill:none;stroke-width:1;stroke-linecap:round}

/* El trazado. La máscara descubre la línea de izquierda a derecha, que en
   estas tres curvas equivale a recorrerla: ninguna vuelve atrás en x. Con
   el borde emplumado, la punta se lee como luz que avanza y no como un
   corte. Ver la nota de bloques/escenas.js sobre por qué no se usa
   `stroke-dasharray`. Sin script, --gs-avance vale 1 y no oculta nada. */
.gs-traza-luz{
  position:absolute;inset:0;
  --gs-corte:calc(var(--gs-avance,1) * 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 calc(var(--gs-corte) - 3%),rgba(0,0,0,0) var(--gs-corte));
  mask-image:linear-gradient(90deg,#000 calc(var(--gs-corte) - 3%),rgba(0,0,0,0) var(--gs-corte));
}

/* La punta: el foco de luz que va abriendo la línea. Sólo existe si el
   script la coloca (necesita resolver la curva), y se desvanece en los
   dos extremos para que no aparezca ni se quede clavada. */
.gs-traza-punta{display:none}
/* Se mueve con `transform`, NO con `left`/`top`. Medido: colocándola por
   posición, cada fotograma del trazado contaba como desplazamiento de
   maquetación y la página acumulaba un CLS de 0.013 que no existía antes.
   El script le pasa píxeles ya resueltos para que la traslación sea exacta
   —un porcentaje en `translate` se mide contra el propio elemento, no
   contra el recuadro. */
.gs-traza.gs-con-punta .gs-traza-punta{
  display:block;position:absolute;left:0;top:0;
  width:76px;height:76px;margin:-38px 0 0 -38px;pointer-events:none;
  transform:translate(var(--gs-punta-x,0px),var(--gs-punta-y,0px));
  opacity:var(--gs-punta-o,0);
  background:radial-gradient(circle,rgba(150,225,255,.34),rgba(90,180,255,.09) 42%,transparent 68%);
}

/* ---------- El nodo ----------
   Punto hueco sobre la línea. Al pasar la luz se rellena y gana un halo
   muy corto: el brillo tiene que caber dentro del propio punto, no
   convertirse en una farola. */
.gs-hito-nodo{
  position:absolute;left:0;top:0;transform:translate(-50%,-50%);
  width:7px;height:7px;border-radius:50%;
  border:1px solid var(--gs-nodo);background:var(--bg-deep);
  transition:border-color var(--gs-dur-media) var(--gs-ease),
             background-color var(--gs-dur-media) var(--gs-ease),
             box-shadow var(--gs-dur-media) var(--gs-ease);
}
.gs-encendido .gs-hito-nodo{
  border-color:var(--gs-filo-alto);
  background:var(--gs-filo-alto);
  box-shadow:0 0 0 3px rgba(120,215,255,.1),0 0 10px rgba(120,215,255,.28);
}

/* ---------- El tallo ----------
   Un píxel del nodo a la ficha. Es la diferencia entre información
   COLGADA del recorrido e información posada al lado: sin él, seis
   bloques de texto cerca de una curva se leen como seis tarjetas. */
.gs-tallo{
  position:absolute;left:0;top:0;width:1px;height:16px;
  background:linear-gradient(180deg,var(--gs-nodo),transparent);
  transform-origin:top;transition:background var(--gs-dur-media) var(--gs-ease)}
.gs-encendido .gs-tallo{background:linear-gradient(180deg,rgba(150,220,255,.6),transparent)}

/* ---------- Escena 1: los canales, engarzados en el filo ----------
   El disco es opaco al fondo de la página, así que el arco se interrumpe
   detrás de él: la insignia queda ENSARTADA en la línea en lugar de
   apoyada encima. Ése era el detalle que hacía que los seis parecieran
   simplemente alineados. */
.gs-traza--promesa{height:clamp(140px,20vh,196px);margin-top:clamp(30px,5.5vh,60px)}
.gs-canales{position:absolute;inset:0}
.gs-canales > li{
  position:absolute;left:var(--x);top:var(--y);
  width:min(15%,124px);margin-left:calc(min(15%,124px) * -0.5);
  display:grid;justify-items:center;gap:9px;
}
.gs-canal-marca{
  width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-hi);background:var(--bg-deep);
  color:var(--muted);transform:translateY(-50%);
  transition:border-color .4s var(--gs-ease),color .4s var(--gs-ease);
}
.gs-canales > li:hover .gs-canal-marca{border-color:var(--line-lit);color:var(--gs-tinta)}
.gs-canal-marca .gs-glifo{width:17px;height:17px}
.gs-canal-t{font-size:.74rem;letter-spacing:.04em;color:var(--faint);transform:translateY(-46%)}

/* ============================================================
   ESCENA 2 · RECORRIDO
   ============================================================ */
.gs-escena--recorrido .gs-stage{gap:clamp(18px,3vh,34px)}
.gs-traza--recorrido{height:var(--gs-alto)}
.gs-hitos{position:absolute;inset:0;--ficha:min(15.4%,214px)}
/* Alineadas por el borde IZQUIERDO, no centradas: el tallo tiene que caer
   sobre el comienzo del texto. Ver `arranques()` en bloques/escenas.js. */
.gs-hitos > li{position:absolute;left:var(--x);top:var(--y);width:var(--ficha)}
/* Todas del mismo lado: seis fichas colgando forman la escalera que baja.
   Ver la nota de bloques/escenas.js sobre por qué la curva llega al 58%. */
.gs-hito-ficha{position:absolute;left:0;right:0;top:20px}

.gs-hito-rol{display:flex;align-items:center;gap:7px;
  font:600 .64rem/1.2 ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gs-rotulo);
  transition:color var(--gs-dur-media) var(--gs-ease)}
.gs-encendido .gs-hito-rol{color:var(--gs-rotulo-alto)}
.gs-hito-rol .gs-glifo--mini{width:13px;height:13px;flex:none;opacity:.8}
.gs-hito-t{font-size:1.02rem;font-weight:640;letter-spacing:-.018em;line-height:1.24;
  margin-top:8px;color:var(--text)}
.gs-hito-d{font-size:.8rem;line-height:1.62;color:var(--gs-tinta);margin-top:7px}
.gs-nota{text-align:center;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--faint);margin-top:clamp(14px,2.4vh,26px);
  width:min(100% - 2 * var(--gutter),var(--max));margin-inline:auto}

/* ------------------------------------------------------------
   CADA HITO APARECE CUANDO LA LUZ LLEGA A ÉL
   ------------------------------------------------------------
   Es la parte del movimiento que hace trabajo. Con los seis rótulos
   puestos desde el principio, la línea que avanza es decoración; saliendo
   a su paso, el orden del proceso se entiende sin leerlo.

   Tres guardas, y las tres importan:
     · `html.gs-js`  sin script no hay quien encienda nada, así que el
                     estado oculto no debe llegar a existir;
     · el ancho      por debajo del umbral del arco esto es una lista
                     vertical y el revelado lo lleva el observador;
     · movimiento reducido — más abajo.
   ------------------------------------------------------------ */
@media (min-width:1240px){
  html.gs-js .gs-hito-ficha,
  html.gs-js .gs-resultado-ficha{
    opacity:0;transform:translateY(10px);filter:blur(4px);
    transition:opacity var(--gs-dur-corta) var(--gs-ease),transform var(--gs-dur-corta) var(--gs-ease),filter var(--gs-dur-corta) var(--gs-ease);
  }
  html.gs-js .gs-encendido .gs-hito-ficha,
  html.gs-js .gs-encendido .gs-resultado-ficha{opacity:1;transform:none;filter:blur(0)}
  html.gs-js .gs-tallo{transform:scaleY(0);transition:transform var(--gs-dur-media) var(--gs-ease),background var(--gs-dur-media) var(--gs-ease)}
  html.gs-js .gs-encendido .gs-tallo{transform:scaleY(1)}
}

/* ============================================================
   ESCENA 3 · ECOSISTEMA
   ------------------------------------------------------------
   Bandas, no tarjetas. Cada una ocupa el ancho, con su numeral fantasma
   —el mismo recurso de la HOME— y una línea que se apaga hacia la
   derecha. Un borde recto de lado a lado convierte seis bandas en las
   filas de una tabla; un filo que decae las convierte en un ritmo.
   ============================================================ */
.gs-escena--ecosistema{padding:clamp(72px,12vh,150px) 0}
.gs-escena--ecosistema .gs-cabecera{margin-bottom:clamp(34px,5vh,60px)}
.gs-eco{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,296px);
  gap:clamp(30px,4vw,68px);align-items:start}

.gs-bandas{display:grid;gap:0}
.gs-banda{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,2.6vw,38px);padding:clamp(20px,2.6vh,30px) 0;align-items:baseline}
.gs-banda::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--line-hi),rgba(122,166,220,.09) 46%,transparent);
  transition:background .4s var(--gs-ease)}
.gs-banda:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--line-hi),rgba(122,166,220,.09) 46%,transparent)}
/* Enfoque discreto: se enciende el filo y el numeral, nada más. Sin
   fondo, sin desplazamiento, sin sombra: una banda que se levanta al
   pasar el ratón vuelve a ser un botón. */
.gs-banda:hover::before{background:linear-gradient(90deg,rgba(120,215,255,.42),rgba(122,166,220,.1) 46%,transparent)}
.gs-banda:hover .gs-banda-n{color:rgba(120,215,255,.42)}

.gs-banda-n{font:700 clamp(1.15rem,.9rem + 1vw,1.9rem)/1 Inter,sans-serif;
  letter-spacing:-.045em;color:var(--ghost);
  min-width:2.2ch;transition:color .4s var(--gs-ease)}
.gs-banda-t{font-size:.78rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text);margin-bottom:10px}
.gs-banda-r{color:var(--gs-tinta);font-size:1rem;line-height:1.62;max-width:52ch}
/* Mismo recurso que las capacidades de la HOME: versalita fina separada
   por puntos medios. Ni píldoras ni viñetas. */
.gs-banda-d{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:12px;
  font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;color:#7F93AE;line-height:1.5}
.gs-banda-d li{display:inline-flex;align-items:center;gap:10px}
.gs-banda-d li::after{content:"·";color:var(--line-lit);font-size:.9rem;line-height:1}
.gs-banda-d li:last-child::after{content:none}

/* ---------- La columna lateral SÍ es un plano ----------
   Aquí una superficie está justificada: es un panel de referencia, no
   parte del relato. Receta idéntica a la de las tarjetas de la HOME —
   hairline, canto superior encendido, gradiente que nace de ese canto y
   sombra profunda— para que las dos páginas se sientan del mismo sitio. */
.gs-lateral{display:grid;gap:0;position:sticky;top:calc(var(--header) + 24px);
  border:1px solid var(--line);border-top-color:rgba(150,205,255,.16);
  border-radius:var(--r-lg);
  padding:clamp(22px,2.2vw,30px);
  background:
    radial-gradient(120% 62% at 50% -18%,rgba(38,120,220,.09),transparent 58%),
    linear-gradient(180deg,rgba(9,17,30,.72),rgba(3,7,15,.82));
  box-shadow:0 40px 90px rgba(0,0,0,.5);
}
.gs-lateral-bloque + .gs-lateral-bloque{margin-top:clamp(22px,2.8vh,32px);
  padding-top:clamp(22px,2.8vh,32px);border-top:1px solid var(--line)}
.gs-lateral-bloque h3{font:600 .7rem/1 ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gs-rotulo);margin-bottom:14px}
.gs-integraciones{display:grid;gap:0}
.gs-integraciones li{display:flex;align-items:center;gap:12px;padding:9px 0;
  font-size:.85rem;color:var(--gs-tinta);line-height:1.4}
.gs-integraciones li + li{border-top:1px solid rgba(122,166,220,.07)}
/* Todos al mismo tamaño óptico y con el mismo peso: los logotipos de
   marca vienen con densidades distintas y a tamaño igual unos gritaban
   más que otros. */
.gs-integraciones img{width:18px;height:18px;flex:none;opacity:.88}
.gs-para{display:grid;gap:0}
.gs-para li{display:grid;gap:4px;padding:12px 0}
.gs-para li + li{border-top:1px solid rgba(122,166,220,.07)}
.gs-para b{font-size:.88rem;font-weight:640;color:var(--text);letter-spacing:-.005em}
.gs-para span{font-size:.79rem;color:var(--muted);line-height:1.55}

/* ============================================================
   ESCENA 4 · RESULTADO
   El arco se posa y se convierte en la base sobre la que se apoyan los
   tres resultados, que cuelgan de él con el mismo tallo del recorrido.
   ============================================================ */
.gs-escena--resultado{padding:clamp(58px,9vh,112px) 0 0}
.gs-escena--resultado .gs-cabecera{margin-bottom:clamp(10px,1.6vh,20px)}
.gs-traza--resultado{height:clamp(216px,29vh,296px);margin-top:clamp(22px,3.4vh,42px)}
.gs-resultados{position:absolute;inset:0;--ficha:min(27%,286px)}
.gs-resultados > li{position:absolute;left:var(--x);top:var(--y);
  width:var(--ficha);margin-left:calc(var(--ficha) * -0.5)}
.gs-resultados .gs-hito-nodo,
.gs-resultados .gs-tallo{left:50%}
.gs-resultados .gs-tallo{transform:translateX(-50%)}
.gs-resultado-ficha{position:absolute;left:0;right:0;top:24px;text-align:center}
.gs-resultado-ficha h3{font-size:1.02rem;font-weight:640;letter-spacing:-.018em;
  line-height:1.26;margin-bottom:8px}
.gs-resultado-ficha p{font-size:.85rem;color:var(--gs-tinta);line-height:1.6;
  max-width:34ch;margin-inline:auto}

/* ============================================================
   FORMULARIO COMPACTO
   ------------------------------------------------------------
   Mismos controles, mismos `name`, mismos `id`. Aquí sólo cambian la
   densidad y el acabado: el formulario tiene que leerse como el aterrizaje
   del arco, no como un componente pegado al final.
   ============================================================ */
.convert--compacto{padding-top:clamp(46px,7vh,86px);border-top:0;position:relative}
/* El filo que abre la sección de conversión lo hereda de pages.css como
   un borde recto de lado a lado. Aquí se sustituye por el mismo filo que
   decae de las bandas: continuidad con la escena anterior. */
.convert--compacto::before{width:min(94vw,1180px);
  background:linear-gradient(90deg,transparent,rgba(120,215,255,.3),transparent)}
.convert--compacto .convert-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  gap:clamp(28px,4vw,60px)}
.convert--compacto .convert-intro h2{max-width:18ch;letter-spacing:-.035em}
/* Al retirar la lista de expectativas, la columna izquierda es bastante
   más corta que el formulario y quedaba medio metro de vacío debajo. Se
   queda a la vista mientras se rellena, que además es cuando el mensaje
   sirve para algo. */
.convert--compacto .convert-intro{position:sticky;top:calc(var(--header) + 32px)}

.evo-form--compacto{padding:clamp(22px,2.5vw,34px)}
.evo-form--compacto .form-head{margin-bottom:18px;padding-bottom:16px}
.evo-form--compacto .form-head h3{font-size:1.08rem;margin-top:8px;letter-spacing:-.02em}
.evo-form--compacto .form-intro{margin-bottom:16px;font-size:.9rem}
.evo-form--compacto .form-grupo{margin-bottom:12px}
.evo-form--compacto .form-grupo legend{margin-bottom:10px}
.evo-form--compacto .row{gap:13px}
.evo-form--compacto .field{margin-bottom:12px}
/* Etiquetas en el mismo sistema de micro-rótulos que el resto de la
   página, no en el genérico de las otras seis. */
.evo-form--compacto .field > label{font-size:.68rem;letter-spacing:.16em;color:var(--muted)}
.evo-form--compacto input,
.evo-form--compacto select,
.evo-form--compacto textarea{padding:11px 13px;font-size:.92rem;border-radius:10px;
  transition:border-color var(--t-fast) ease,box-shadow var(--t-fast) ease,background var(--t-fast) ease}
.evo-form--compacto textarea{min-height:80px}
/* Un solo tratamiento de foco en toda la página: filo encendido más un
   halo corto. Antes el input, el botón y el enlace tenían tres. */
.evo-form--compacto input:focus-visible,
.evo-form--compacto select:focus-visible,
.evo-form--compacto textarea:focus-visible{
  outline:0;border-color:rgba(120,215,255,.62);
  box-shadow:0 0 0 3px rgba(53,226,255,.13)}
/* Solución de interés va `readonly` —visible para la captura de GHL,
   no editable— y tiene que LEERSE como un dato ya resuelto. El borde
   discontinuo que traía se confundía con un campo subrayado a medio
   rellenar; una superficie hundida con su filo dice «esto ya está» sin
   parecer un error. */
.evo-form--compacto input[readonly]{
  border-style:solid;border-color:rgba(122,166,220,.1);
  background:linear-gradient(180deg,rgba(2,6,14,.6),rgba(4,10,22,.42));
  color:var(--gs-tinta);box-shadow:inset 0 1px 0 rgba(0,0,0,.3)}
.evo-form--compacto input[readonly]:hover{border-color:rgba(122,166,220,.1)}
.evo-form--compacto input[readonly]:focus-visible{
  border-color:rgba(120,215,255,.34);box-shadow:0 0 0 3px rgba(53,226,255,.08)}
.evo-form--compacto .field-fijo > label{color:var(--faint)}

.evo-form--compacto .consent{margin-top:2px}
.evo-form--compacto .consent input[type=checkbox]{transition:background var(--t-fast) ease,border-color var(--t-fast) ease}
.evo-form--compacto .form-foot{margin-top:16px;gap:18px}
.evo-form--compacto .form-foot .button:active{transform:translateY(0) scale(.985)}
/* El mensaje posterior al envío es informativo, no un error ni un éxito:
   filo neutro y tono de lectura. El texto no se toca. */
.evo-form--compacto .form-status:not(.error){
  border-left:1px solid rgba(120,215,255,.35);padding:10px 0 10px 14px;
  color:var(--gs-tinta);background:linear-gradient(90deg,rgba(12,30,64,.28),transparent 70%)}

/* ============================================================
   RESPONSIVE
   ------------------------------------------------------------
   El arco horizontal necesita ancho: seis fichas legibles piden columnas
   de 190px o más, y eso son 1240px de ventana. Por debajo NO se encoge —
   una fila de seis columnas de 150px es «legible pero apretada», que es
   exactamente lo que no se acepta— sino que se pone de pie.

   Antes el umbral estaba en 1000px, así que 1024 y 1180 caían del lado
   apretado. Ahora caen del lado del raíl vertical, que a esos anchos es
   la composición deliberada y no el plan B.
   ============================================================ */
@media (max-width:1239px){
  /* --- Las escenas dejan de fijarse: cada una es un momento que se lee
     entero, no un lienzo que se recorre. --- */
  .gs-escena--promesa,.gs-escena--recorrido{height:auto}
  .gs-pin{position:static;height:auto;overflow:visible}
  .gs-stage{padding-top:clamp(92px,13vh,136px);padding-bottom:clamp(48px,8vh,90px)}

  /* --- El arco se pone de pie. El raíl es el mismo filo con degradado, y
     los nodos siguen engarzados en él. --- */
  .gs-traza--recorrido{height:auto;padding-left:38px;
    width:min(100% - 2 * var(--gutter),860px)}
  .gs-traza--recorrido .gs-traza-svg,
  .gs-traza--recorrido .gs-traza-luz,
  .gs-traza--recorrido .gs-traza-punta{display:none}
  .gs-traza--recorrido::before{
    content:"";position:absolute;left:5px;top:18px;bottom:22px;width:1px;
    background:linear-gradient(180deg,rgba(150,220,255,.12),rgba(150,220,255,.5) 12%,
      rgba(122,166,220,.18) 62%,rgba(150,220,255,.4));
  }
  .gs-hitos{position:static;display:grid;gap:0;--ficha:auto}
  .gs-hitos > li{position:relative;left:auto;top:auto;width:auto;margin-left:0;
    padding:22px 0}
  .gs-hitos > li + li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
    background:linear-gradient(90deg,var(--line-hi),rgba(122,166,220,.08) 40%,transparent)}
  .gs-hito-nodo{left:-38px;top:30px;transform:translate(-50%,-50%)}
  .gs-tallo{display:none}
  .gs-hito-ficha{position:static}
  .gs-hito-t{font-size:1.1rem;margin-top:9px}
  .gs-hito-d{font-size:.9rem;max-width:54ch;margin-top:8px}
  .gs-meta{margin-top:13px;font-size:.7rem}
  .gs-nota{text-align:left;margin-top:22px;
    width:min(100% - 2 * var(--gutter),860px)}
  /* El titular se alinea a la izquierda, pero el bloque SIGUE centrado:
     el encabezado también es `.container` y quitarle el margen automático
     lo pegaba al filo de la pantalla. Se mueve el texto dentro de la caja,
     no la caja. */
  .gs-escena--recorrido .gs-cabecera{text-align:left;
    max-width:min(100% - 2 * var(--gutter),860px)}
  .gs-escena--recorrido .gs-cabecera h2{margin-inline:0;max-width:22ch}
  .gs-escena--recorrido .gs-cabecera .gs-apoyo{margin-inline:0}

  /* --- Resultados: tres momentos apilados sobre la misma línea --- */
  .gs-escena--ecosistema{padding:clamp(64px,9vh,116px) 0}
  .gs-escena--resultado{padding:clamp(48px,7vh,86px) 0 clamp(20px,4vh,44px)}
  .gs-traza--resultado{height:auto;padding-left:38px;margin-top:clamp(22px,4vh,36px);
    width:min(100% - 2 * var(--gutter),860px)}
  .gs-traza--resultado .gs-traza-svg,
  .gs-traza--resultado .gs-traza-luz,
  .gs-traza--resultado .gs-traza-punta{display:none}
  .gs-traza--resultado::before{
    content:"";position:absolute;left:5px;top:18px;bottom:22px;width:1px;
    background:linear-gradient(180deg,rgba(150,220,255,.5),rgba(122,166,220,.2));
  }
  .gs-resultados{position:static;display:grid;gap:0;--ficha:auto}
  .gs-resultados > li{position:relative;left:auto;top:auto;width:auto;margin-left:0;
    padding:22px 0}
  .gs-resultados > li + li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
    background:linear-gradient(90deg,var(--line-hi),rgba(122,166,220,.08) 40%,transparent)}
  .gs-resultados .gs-hito-nodo{left:-38px;top:30px;transform:translate(-50%,-50%)}
  .gs-resultado-ficha{position:static;text-align:left}
  .gs-resultado-ficha h3{font-size:1.1rem}
  .gs-resultado-ficha p{margin-inline:0;max-width:54ch;font-size:.9rem}
  .gs-escena--resultado .gs-cabecera{max-width:min(100% - 2 * var(--gutter),860px)}

  /* --- Ecosistema en una columna --- */
  .gs-eco{grid-template-columns:minmax(0,1fr);gap:clamp(34px,5vh,54px)}
  .gs-lateral{position:static;
    display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));
    gap:clamp(24px,3vw,40px)}
  .gs-lateral-bloque + .gs-lateral-bloque{margin-top:0;padding-top:0;border-top:0}

  .convert--compacto .convert-grid{grid-template-columns:1fr;gap:34px}
  .convert--compacto .convert-intro{position:static}
}

/* Portátiles de 1240 a 1400: la ficha existe pero va justa de aire, así
   que se le quita peso al texto secundario en vez de estrecharla. */
@media (min-width:1240px) and (max-width:1400px){
  .gs-hitos{--ficha:min(15.6%,196px)}
  .gs-hito-t{font-size:.98rem}
  .gs-hito-d{font-size:.78rem}
  .gs-meta{font-size:.65rem;gap:3px 8px}
}

@media (max-width:767px){
  .gs-promesa h1{max-width:none}
  .gs-promesa .gs-apoyo{margin-bottom:26px}
  .gs-acciones{width:100%;flex-direction:column;align-items:stretch}
  .gs-acciones .button{width:100%}

  /* Los canales dejan la curva: en 390px la corona sólo cabe amontonando
     seis rótulos. Se convierten en una tira de tres, separada por el
     mismo filo que decae. */
  .gs-traza--promesa{height:auto;margin-top:clamp(26px,4.5vh,42px);padding-top:22px}
  .gs-traza--promesa .gs-traza-svg,
  .gs-traza--promesa .gs-traza-luz,
  .gs-traza--promesa .gs-traza-punta{display:none}
  .gs-traza--promesa::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
    background:linear-gradient(90deg,transparent,var(--line-hi),transparent)}
  .gs-canales{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
    gap:20px 10px}
  .gs-canales > li{position:static;width:auto;margin-left:0;gap:8px}
  .gs-canal-marca{transform:none}
  .gs-canal-t{transform:none;font-size:.72rem}

  .gs-banda{grid-template-columns:minmax(0,1fr);gap:9px}
  .gs-banda-n{font:600 .68rem/1 ui-monospace,SFMono-Regular,monospace;
    letter-spacing:.2em;color:rgba(120,215,255,.5)}
  .gs-banda-r{font-size:.95rem}
  .gs-cabecera h2,.gs-cabecera--izq h2{max-width:none}
  .gs-escena--recorrido .gs-cabecera h2{max-width:none}

  /* El botón flotante de WhatsApp se come la esquina: el último control
     de la página necesita sitio propio por debajo de él. */
  .convert--compacto{padding-bottom:clamp(96px,16vh,132px)}
}

@media (max-width:429px){
  .gs-canales{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gs-meta{font-size:.64rem}
  .gs-traza--recorrido,.gs-traza--resultado{padding-left:30px}
  .gs-hito-nodo,.gs-resultados .gs-hito-nodo{left:-30px}
}

/* ============================================================
   POCA ALTURA ÚTIL — las escenas dejan de fijarse
   ------------------------------------------------------------
   Una escena fijada necesita caber en la ventana. El stage más alto del
   sistema mide unos 645px; sumando la cabecera y el aire de abajo, por
   debajo de 700px de alto ya no hay sitio, y lo único que se puede hacer
   con una escena que no cabe es dejar de fijarla.

   Es exactamente el mismo criterio que rige por ancho: recomponer, no
   encoger. Aquí la recomposición es más suave —el contenido es el mismo,
   sólo deja de estar clavado— porque la lectura vertical de una escena
   no fijada ya funciona y está probada.

   Afecta a portátiles anchos y bajos (1366x650, 1920x600) y a móviles en
   horizontal.
   ============================================================ */
@media (max-height:699px){
  .gs-escena--promesa,.gs-escena--recorrido{height:auto;min-height:0}
  .gs-pin{position:static;height:auto;overflow:visible}
  .gs-stage{padding-top:calc(var(--header) + clamp(28px,5vh,56px));
    padding-bottom:clamp(34px,6vh,64px)}
}

/* ============================================================
   MOVIMIENTO REDUCIDO
   ------------------------------------------------------------
   Sin fijado, sin revelados y sin trazado: la página entera queda
   dibujada y se recorre con scroll normal. El contenido es exactamente
   el mismo; lo único que se pierde es el orden en que aparece.
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  .gs-escena--promesa,.gs-escena--recorrido{height:auto}
  .gs-pin{position:static;height:auto;overflow:visible}
  .gs-stage{padding-top:clamp(92px,13vh,136px);padding-bottom:clamp(48px,8vh,90px)}
  html.gs-js .gs-page .gs-rise,
  html.gs-js .gs-page .gs-rise.gs-visible{opacity:1;transform:none;filter:none;transition:none}
  html.gs-js .gs-hito-ficha,
  html.gs-js .gs-resultado-ficha{opacity:1;transform:none;filter:none;transition:none}
  html.gs-js .gs-tallo{transform:none;transition:none}
  .gs-traza-luz{-webkit-mask-image:none;mask-image:none}
  .gs-traza-punta,.gs-traza.gs-con-punta .gs-traza-punta{display:none}
  .gs-page .page-horizon{transform:translateX(-50%)}
  .gs-hito-nodo,.gs-banda::before,.gs-banda-n,.gs-canal-marca,.gs-hito-rol{transition:none}
}

/* ============================================================
   BLOQUES SUELTOS
   ------------------------------------------------------------
   Los tramos que unas páginas necesitan y otras no. Comparten el sistema
   de las bandas —filo que decae, numeral fantasma, versalita separada por
   puntos medios— para que la familia se reconozca aunque el guion cambie.
   ============================================================ */

/* ---------- Puntos: límites, criterio, qué ocurre en la reunión ---------- */
.gs-escena--bloque{padding:clamp(58px,9vh,112px) 0}
.gs-escena--bloque .gs-cabecera{margin-bottom:clamp(28px,4vh,48px)}
.gs-puntos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,264px),1fr));
  gap:0 clamp(28px,3.6vw,56px)}
.gs-puntos > li{position:relative;padding:clamp(18px,2.4vh,26px) 0}
.gs-puntos > li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--line-hi),rgba(122,166,220,.09) 52%,transparent)}
.gs-puntos h3{font-size:.98rem;font-weight:640;letter-spacing:-.015em;line-height:1.28;
  margin-bottom:8px;color:var(--text)}
.gs-puntos p{font-size:.86rem;line-height:1.62;color:var(--gs-tinta);max-width:46ch}

/* ---------- Lista fina: ejemplos y referencias ---------- */
.gs-escena--fichas{padding:clamp(58px,9vh,112px) 0}
.gs-escena--fichas .gs-cabecera{margin-bottom:clamp(26px,3.6vh,44px)}
.gs-lista-fina{display:grid;gap:0}
.gs-lista-fina > li{position:relative;display:grid;
  grid-template-columns:minmax(0,.42fr) minmax(0,1fr);gap:clamp(14px,2.4vw,36px);
  padding:clamp(15px,2vh,21px) 0;align-items:baseline}
.gs-lista-fina > li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--line-hi),rgba(122,166,220,.09) 52%,transparent)}
.gs-lista-fina > li:last-child::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(90deg,var(--line-hi),rgba(122,166,220,.09) 52%,transparent)}
.gs-lista-fina b{font-size:.78rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text)}
.gs-lista-fina span{font-size:.92rem;line-height:1.6;color:var(--gs-tinta);max-width:56ch}
.gs-nota--izq{text-align:left;margin-top:clamp(18px,2.6vh,28px);width:auto}

/* ---------- Caso propio: aquí sí hay superficie ---------- */
.gs-escena--caso{padding:clamp(52px,8vh,100px) 0}
.gs-caso{
  border:1px solid var(--line);border-top-color:rgba(150,205,255,.16);
  border-radius:var(--r-lg);padding:clamp(26px,3.4vw,52px);
  background:
    radial-gradient(120% 62% at 50% -18%,rgba(38,120,220,.09),transparent 58%),
    linear-gradient(180deg,rgba(9,17,30,.72),rgba(3,7,15,.82));
  box-shadow:0 40px 90px rgba(0,0,0,.5);
}
.gs-caso .eyebrow{display:block;margin-bottom:18px}
.gs-caso h2{font-size:clamp(1.36rem,1.05rem + 1.3vw,2.15rem);line-height:1.12;
  letter-spacing:-.03em;max-width:24ch;margin-bottom:16px}
.gs-caso-lead{color:var(--gs-tinta);font-size:1rem;line-height:1.68;max-width:60ch}
.gs-caso-puntos{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,272px),1fr));
  gap:10px clamp(24px,3vw,44px);margin-top:clamp(22px,3vh,32px)}
.gs-caso-puntos li{position:relative;padding-left:22px;font-size:.88rem;line-height:1.6;
  color:var(--gs-tinta)}
.gs-caso-puntos li::before{content:"";position:absolute;left:0;top:.66em;width:11px;height:1px;
  background:var(--line-lit)}
.gs-caso-nota{margin-top:clamp(22px,3vh,30px);padding-top:18px;border-top:1px solid var(--line);
  font-size:.84rem;line-height:1.6;color:var(--muted);max-width:64ch}

/* ---------- Proceso numerado ---------- */
.gs-escena--proceso{padding:clamp(48px,7vh,92px) 0}
.gs-proceso{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,238px),1fr));
  gap:0 clamp(24px,3vw,48px)}
.gs-proceso > li{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(12px,1.6vw,20px);padding:clamp(18px,2.4vh,26px) 0;align-items:baseline}
.gs-proceso > li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--line-hi),rgba(122,166,220,.09) 55%,transparent)}
.gs-proceso-n{font:600 .68rem/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.2em;
  color:var(--gs-rotulo)}
.gs-proceso h3{font-size:.8rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--text);margin-bottom:9px}
.gs-proceso p{font-size:.9rem;line-height:1.6;color:var(--gs-tinta);max-width:42ch}

/* ---------- Calendario ---------- */
.gs-escena--calendario{padding:clamp(40px,6vh,80px) 0 clamp(64px,10vh,120px)}
.gs-escena--calendario .gs-cabecera{margin-bottom:clamp(22px,3vh,34px)}
/* El widget se redimensiona solo con `form_embed.js`. El marco no le pone
   altura fija: hacerlo cortaría los pasos de la reserva. El mínimo existe
   sólo para que no colapse a cero mientras carga. */
.gs-calendario{position:relative;border:1px solid var(--line-hi);border-radius:var(--r-lg);
  overflow:hidden;background:rgba(3,9,22,.42);min-height:clamp(560px,72vh,760px)}
.gs-calendario iframe{display:block;width:100%;min-height:inherit;border:0}
.gs-calendario-pie{display:grid;gap:12px;margin-top:22px;max-width:64ch}
.gs-calendario-pie p{color:var(--muted);font-size:.92rem;line-height:1.66}
.gs-calendario-privacidad{color:var(--faint);font-size:.84rem}
.gs-calendario-privacidad a{color:var(--muted);text-decoration:underline;text-underline-offset:2px}

/* Bandas sin columna lateral: ocupan el ancho entero en vez de dejar un
   hueco a la derecha. */
.gs-eco--solo{grid-template-columns:minmax(0,1fr)}

/* ============================================================
   VARIANTES POR PÁGINA
   ------------------------------------------------------------
   La familia es común; lo que cambia por página es la geometría del arco
   —que viaja en el contenido— y estos pocos ajustes de escala. Nada más:
   si cada página trajera su propio sistema, dejarían de parecer del mismo
   sitio.
   ============================================================ */

/* ---------- Evaluación y Agendar: páginas de utilidad ----------
   Estas dos no venden, resuelven: una recoge una situación y la otra
   reserva una hora. Un hero de pantalla completa con un titular de
   display empuja fuera de vista justo lo que la persona vino a hacer.

   Así que el titular baja a escala de sección y el hero deja de ocupar
   100vh: el formulario y el calendario entran antes. */
.gs-page--evaluacion .gs-escena--promesa,
.gs-page--agendar .gs-escena--promesa{min-height:0;display:block}
.gs-page--evaluacion .gs-stage,
.gs-page--agendar .gs-stage{
  padding-top:calc(var(--header) + clamp(34px,6vh,72px));
  padding-bottom:clamp(24px,4vh,48px);
}
.gs-page--evaluacion .gs-promesa h1,
.gs-page--agendar .gs-promesa h1{
  font-size:clamp(1.85rem,1.35rem + 2.1vw,3.1rem);
  letter-spacing:-.035em;max-width:20ch;margin-bottom:20px;
}
.gs-page--evaluacion .gs-promesa .gs-apoyo,
.gs-page--agendar .gs-promesa .gs-apoyo{margin-bottom:26px}

/* En Evaluación el formulario es el producto: entra pegado al proceso y
   sin el filo de separación que usan las páginas de servicio. */
.gs-page--evaluacion .gs-escena--proceso{padding-bottom:clamp(30px,4vh,52px)}
.gs-page--evaluacion .convert--compacto{padding-top:clamp(30px,4vh,56px)}

/* ---------- Presencia: la avenida ----------
   Su arco es casi recto y muy ancho. Con el trazo estándar quedaba
   demasiado tenue para leerse como horizonte, así que gana un punto de
   presencia sin ganar grosor. */
.gs-page--presencia .gs-traza--promesa .gs-traza-fondo{stroke:rgba(122,166,220,.18)}

/* ---------- Agentes: la página más larga ----------
   Nueve tramos. Sin apretar el ritmo entre ellos, la lectura se hace
   interminable; con el mismo aire que una página de cuatro tramos, la
   página mide un tercio más de lo que debería. */
.gs-page--agentes .gs-escena--bloque{padding:clamp(48px,7vh,92px) 0}
.gs-page--agentes .gs-escena--fichas{padding:clamp(48px,7vh,92px) 0}
.gs-page--agentes .gs-escena--caso{padding:clamp(44px,6vh,84px) 0}

/* ============================================================
   FLUJO DE FUENTES — la convergencia del caso propio
   ------------------------------------------------------------
   No es un recorrido: es de dónde sale el contexto. Varias fuentes que
   se juntan en un punto y, desde ahí, un raíl que atraviesa las etapas.

   Mismo idioma que los arcos —viewBox 0–100 con el aspecto suelto, trazo
   de un píxel, nodos huecos— así que fuente, rama y nodo comparten
   sistema de coordenadas y caen alineados a cualquier ancho.
   ============================================================ */
.gs-flujo{position:relative;margin:clamp(26px,3.4vh,38px) 0 clamp(20px,2.6vh,28px);
  height:clamp(230px,26vh,268px)}
.gs-flujo-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gs-flujo-ramas{fill:none;stroke:rgba(122,166,220,.22);stroke-width:1}
.gs-flujo-tronco{fill:none;stroke:var(--gs-filo);stroke-width:1;stroke-linecap:round}

.gs-fuentes,.gs-etapas{position:absolute;inset:0}
.gs-fuentes > li{position:absolute;left:var(--x);top:0;width:min(22%,190px);
  margin-left:calc(min(22%,190px) * -0.5);display:grid;justify-items:center;gap:9px}
.gs-fuente-marca{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;
  border:1px solid var(--line-hi);background:var(--bg-deep);color:var(--muted)}
.gs-fuente-marca .gs-glifo{width:16px;height:16px}
.gs-fuente-t{font:600 .68rem/1 ui-monospace,SFMono-Regular,monospace;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gs-rotulo)}

.gs-etapas > li{position:absolute;left:var(--x);top:62%;width:min(23%,232px);
  margin-left:calc(min(23%,232px) * -0.5);display:grid;gap:6px;padding-top:18px;text-align:center}
.gs-etapas .gs-hito-nodo{left:50%;top:0}
.gs-etapas b{font-size:.86rem;font-weight:650;letter-spacing:-.012em;color:var(--text)}
.gs-etapas span{font-size:.78rem;line-height:1.55;color:var(--gs-tinta)}
.gs-flujo-nota{font-size:.8rem;line-height:1.6;color:var(--muted);max-width:70ch;
  margin-bottom:clamp(22px,3vh,30px)}
.gs-caso-sub{font:600 .7rem/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.2em;
  text-transform:uppercase;color:var(--gs-rotulo);margin-bottom:14px}

/* En estrecho la convergencia se pone de pie: las fuentes en rejilla y
   las etapas como secuencia vertical con su raíl, igual que el recorrido.
   Comprimir dos filas de cuatro en 390px daría columnas de 90px. */
@media (max-width:1023px){
  .gs-flujo{height:auto;display:grid;gap:clamp(22px,3vh,32px)}
  .gs-flujo-svg{display:none}
  .gs-fuentes,.gs-etapas{position:static}
  .gs-fuentes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(50% - 8px,140px),1fr));
    gap:18px 12px;padding-bottom:clamp(20px,2.6vh,26px);position:relative}
  .gs-fuentes::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
    background:linear-gradient(90deg,var(--line-hi),rgba(122,166,220,.09) 52%,transparent)}
  .gs-fuentes > li{position:static;width:auto;margin-left:0}
  .gs-etapas{display:grid;gap:0;padding-left:30px;position:relative}
  .gs-etapas::before{content:"";position:absolute;left:4px;top:14px;bottom:16px;width:1px;
    background:linear-gradient(180deg,var(--gs-filo),rgba(122,166,220,.2))}
  .gs-etapas > li{position:relative;left:auto;top:auto;width:auto;margin-left:0;
    padding:14px 0 14px;text-align:left}
  .gs-etapas > li + li::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
    background:linear-gradient(90deg,var(--line-hi),rgba(122,166,220,.08) 46%,transparent)}
  .gs-etapas .gs-hito-nodo{left:-30px;top:24px;transform:translate(-50%,-50%)}
  .gs-etapas b{font-size:.95rem}
  .gs-etapas span{font-size:.85rem;max-width:56ch}
}