/* flujo.css — El flujo del agente de protocolos, en tres fases.
   Lo monta `efectos/flujo/flujo.js`. La constelación del ratón, `reticula.js`.

   ⚠️ Ni un color literal: todo sale de los tokens del tramo —hoy el claro—
   igual que en landing.css. El logotipo de Google Cloud, que era la única
   excepción, se retiró el 2026-09-14 con las etiquetas de agentes. */

.flujo {
  position: relative;
  margin-top: 56px;
  padding: 40px 0 30px;
  isolation: isolate;
}

/* ── El fondo de puntos ─────────────────────────────────────────────────
   El patrón de cluster_web, medido al píxel sobre su captura: tile de 60×60
   con dieciséis cuadrados de 1,5 px cada 15 px, y dos niveles de alfa (1,0 y
   0,5) en un mapa 4×4 que no es regular — de ahí que la trama no se lea como
   papel milimetrado.

   Va de MÁSCARA y no de imagen: así el color lo pone `--texto` y el bloque
   funciona en cualquier tramo de tono. Con el SVG pintado a un color fijo
   habría que mantener dos copias. */
.flujo-fondo {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: var(--texto);
  opacity: 0.2;
  -webkit-mask-image: var(--trama);
  mask-image: var(--trama);
  -webkit-mask-size: 60px 60px;
  mask-size: 60px 60px;
  -webkit-mask-repeat: repeat;
  mask-repeat: repeat;
}
.flujo {
  --trama: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='%23fff'%3E%3Crect x='1' y='1' width='1.5' height='1.5' opacity='.5'/%3E%3Crect x='16' y='1' width='1.5' height='1.5'/%3E%3Crect x='31' y='1' width='1.5' height='1.5'/%3E%3Crect x='46' y='1' width='1.5' height='1.5' opacity='.5'/%3E%3Crect x='1' y='16' width='1.5' height='1.5' opacity='.5'/%3E%3Crect x='16' y='16' width='1.5' height='1.5' opacity='.5'/%3E%3Crect x='31' y='16' width='1.5' height='1.5'/%3E%3Crect x='46' y='16' width='1.5' height='1.5' opacity='.5'/%3E%3Crect x='1' y='31' width='1.5' height='1.5'/%3E%3Crect x='16' y='31' width='1.5' height='1.5'/%3E%3Crect x='31' y='31' width='1.5' height='1.5' opacity='.5'/%3E%3Crect x='46' y='31' width='1.5' height='1.5'/%3E%3Crect x='1' y='46' width='1.5' height='1.5' opacity='.5'/%3E%3Crect x='16' y='46' width='1.5' height='1.5'/%3E%3Crect x='31' y='46' width='1.5' height='1.5' opacity='.5'/%3E%3Crect x='46' y='46' width='1.5' height='1.5'/%3E%3C/g%3E%3C/svg%3E");
}

/* El canvas de la constelación va por encima de la trama y por debajo de
   todo lo demás. No recibe el ratón: lo escucha el contenedor. */
.flujo-constelacion {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* ── La rejilla de las tres fases ───────────────────────────────────────
   Petición · sistema · borrador. El centro manda: las dos columnas de los
   lados se reparten lo que sobra.

   ⚠️ El centro es `minmax(0, auto)` y no `auto` desde que el núcleo mide 545
   px fijos (2026-09-14). Con `auto` su mínimo pasa a ser esos 545, y entre 901
   y 1024 px la columna del borrador se salía hasta 122 px (oculto por el
   `overflow-x: hidden` del body). La fila de etiquetas de antes podía partirse
   en líneas y encogía sola: con el mínimo a 0 el centro vuelve a medir lo
   mismo que medía —422,9 px a 901, medido contra HEAD— y el núcleo encoge con
   él por su `max-width`. */
.flujo-rejilla {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr minmax(0, auto) 1fr;
  align-items: center;
  gap: 0 clamp(16px, 3vw, 44px);
  min-height: 300px;
}
.flujo-fase { display: flex; flex-direction: column; gap: 14px; }
.flujo-nucleo { align-items: center; }
.flujo-salidas { align-items: flex-end; }

.flujo-rotulo {
  font-family: var(--tipo-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--texto-tenue);
}
/* El rótulo de la fase que toca se enciende: es lo que hace legible que esto
   es una secuencia y no tres cuadros sueltos. */
.flujo-fase[data-viva] .flujo-rotulo { color: var(--acento); }

/* ── Fase 1 · la petición ───────────────────────────────────────────── */
.flujo-prompts ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.flujo-prompt {
  border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--fondo-alt) 70%, transparent);
  padding: 9px 13px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--texto-tenue);
  opacity: 0.5;
  transition: opacity 0.5s, border-color 0.5s, background 0.5s, color 0.5s;
}
.flujo-prompt[data-activo] {
  opacity: 1;
  color: var(--texto);
  background: var(--fondo-alt);
  border-color: color-mix(in srgb, var(--acento) 50%, transparent);
}
/* El cursor sólo existe mientras se escribe. Parpadea en pasos, como uno de
   verdad: una transición suave lo delataría como decorado. */
.flujo-cursor {
  display: none;
  width: 2px;
  height: 1em;
  margin-left: 1px;
  background: var(--acento);
  vertical-align: text-bottom;
}
.flujo-prompt[data-escribiendo] .flujo-cursor {
  display: inline-block;
  animation: flujo-parpadeo 1s steps(1) infinite;
}
@keyframes flujo-parpadeo { 0%, 50% { opacity: 1 } 50.01%, 100% { opacity: 0 } }

/* ── Los raíles ─────────────────────────────────────────────────────────
   Dos hilos rectos que cruzan de fase a fase, con un pulso que los recorre
   cuando el trabajo pasa de una a otra. En cluster_web el destello va en
   bucle cada 2.600 ms; aquí va atado a la coreografía, que es lo que hace
   que se lea como causa y efecto en vez de como adorno. */
.flujo-rail {
  position: absolute;
  top: 50%;
  height: 1px;
  background: color-mix(in srgb, var(--texto) 14%, transparent);
  overflow: hidden;
  z-index: 0;
}
.flujo-pulso {
  position: absolute;
  top: 0;
  left: -46px;
  width: 46px;
  height: 100%;
  background: linear-gradient(90deg, transparent, var(--acento));
  opacity: 0;
}
.flujo-rail[data-corre] .flujo-pulso {
  animation: flujo-recorrido 1s cubic-bezier(0.6, 0, 0.05, 1) forwards;
}
@keyframes flujo-recorrido {
  0% { left: -46px; opacity: 0 }
  12% { opacity: 1 }
  88% { opacity: 1 }
  100% { left: 100%; opacity: 0 }
}

/* ── Fase 2 · el sistema ────────────────────────────────────────────────
   Desde el 2026-09-14 el sistema es UNA pieza: una elipse con tres anillos y,
   dentro, el arnés —el icono que piensa, «Arnés agéntico» y una línea de
   comando con los pasos—. Primero fue una caja «Synthetrial Core» debajo de un
   círculo; Julio la pidió dentro, más pequeña, sin nombre de producto y en
   claro. Medidas y porqués en contexto/seccion_protocolos/
   SPEC-synthetrial-core.md, §11.

   El núcleo mide 545 px, lo que medía la fila de etiquetas, aunque la elipse
   mida 400: es lo que fija la columna central. Al ancho de la elipse, las
   columnas de los lados crecerían y los raíles se quedarían en 24 px. */
.flujo-nucleo { width: 545px; max-width: 100% }

/* Elipse y no círculo: la línea de comando más larga mide 258 px a 10 px de
   cuerpo (medido en la página), y un círculo que la contuviera sería más alto
   que la fase entera. `--anillo` es la separación entre anillos, y del último
   al arnés: concéntricos a distancia constante. */
.flujo-circulo {
  --anillo: 11px;
  position: relative;
  width: 400px;
  max-width: 100%;
  height: 216px;
}
.flujo-anillo {
  position: absolute;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--texto) 11%, transparent);
}
.flujo-anillo:nth-child(1) { inset: 0 }
.flujo-anillo:nth-child(2) { inset: var(--anillo) }
.flujo-anillo:nth-child(3) { inset: calc(var(--anillo) * 2) }
.flujo-nucleo[data-trabajando] .flujo-anillo {
  border-color: color-mix(in srgb, var(--acento) 30%, transparent);
  animation: flujo-latido 2.4s ease-in-out infinite;
}
.flujo-nucleo[data-trabajando] .flujo-anillo:nth-child(2) { animation-delay: 0.2s }
.flujo-nucleo[data-trabajando] .flujo-anillo:nth-child(3) { animation-delay: 0.4s }
/* Sin el giro de 45° que llevaban de círculos: girada, una elipse se tuerce. */
@keyframes flujo-latido {
  0%, 100% { transform: scale(1) }
  50% { transform: scale(1.035) }
}

/* El icono que piensa. Sólo se mueve mientras el agente trabaja: fuera de ese
   tramo descansa entero —con `animation: none` y no en pausa, porque congelado
   a media ola se lee como un glifo roto— y, antes de la petición, atenuado.
   El `!important` hace falta: el isotipo lleva la animación en línea. */
.flujo-isotipo { display: grid; place-items: center; line-height: 0; transition: opacity 0.5s }
.flujo-arnes:not([data-estado="encendido"]) .flujo-isotipo * { animation: none !important }
.flujo-arnes[data-estado="apagado"] .flujo-isotipo { opacity: 0.5 }
/* El isotipo trae la paleta de los componentes del repo —azules grisáceos
   claros— y sobre el fondo claro se pierde. Mismo apaño puntual que en la
   caja de consulta; ver wiki/marca.md. */
.tono-claro .flujo-isotipo .isotipo { filter: brightness(0.58) saturate(1.2) }

/* ── El arnés ───────────────────────────────────────────────────────────
   La elipse de dentro. Se enciende mientras el agente trabaja: una luz
   recorre su borde, un halo respira detrás, el icono piensa y la línea de
   comando pasa por los pasos hasta entregar. */
.flujo-arnes {
  position: absolute;
  inset: calc(var(--anillo) * 3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
  border-radius: 50%;
  background: var(--fondo-alt);
  text-align: center;
  transition: border-color 0.5s;
}
.flujo-arnes-nombre {
  font-family: var(--tipo-mono);
  font-size: 11px;
  line-height: 1.3;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--texto);
}
/* La línea de comando. ⚠️ En JetBrains Mono y NO en Averox: «E6(R2)» lleva un
   6 y un 2, y Averox pinta un agujero en su lugar (wiki/marca.md). En
   escritorio, una línea: la frase más larga mide 258 px a 10 px y cabe. A
   10,5 px Chrome pinta a 10 —medido—: los cuerpos, enteros. */
.flujo-arnes-estado {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--tipo-mono);
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--texto-tenue);
  transition: color 0.5s;
}
/* El «›» va en la frase y no aparte: si la línea se parte en dos (móvil), el
   indicador acompaña a la primera, como en una terminal. */
.flujo-arnes-txt::before { content: "› "; color: var(--acento) }
/* Cada frase nueva es un elemento nuevo (aplicar(), en flujo.js): así la
   entrada se anima sola, sin reiniciar nada a mano. */
.flujo-arnes-txt { animation: flujo-arnes-entra 0.35s ease-out both }
@keyframes flujo-arnes-entra { from { opacity: 0; transform: translateY(4px) } }

.flujo-arnes[data-estado="encendido"] { border-color: color-mix(in srgb, var(--acento) 45%, transparent) }
.flujo-arnes[data-estado="entregado"] { border-color: color-mix(in srgb, var(--acento) 26%, transparent) }
.flujo-arnes[data-estado="encendido"] .flujo-arnes-estado { color: var(--acento) }
.flujo-arnes[data-estado="entregado"] .flujo-arnes-estado { color: var(--texto) }
/* Mientras piensa, un barrido de luz cruza la frase: uno por frase, porque
   dura lo mismo que cada paso (1,8 s). */
.flujo-arnes[data-estado="encendido"] .flujo-arnes-txt {
  background: linear-gradient(100deg, var(--acento) 0 38%, var(--acento-alt) 50%, var(--acento) 62% 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: flujo-arnes-entra 0.35s ease-out both, flujo-arnes-destello 1.8s linear infinite;
}
@keyframes flujo-arnes-destello { from { background-position: 100% 0 } to { background-position: 0 0 } }

/* El halo: los dos acentos, difuminados, detrás de la elipse. Sólo anima la
   OPACIDAD —compositor, sin repintado— y respira con el periodo del latido de
   los anillos (2,4 s).
   ⚠️ Con TINTES claros de los acentos, no con los acentos: en el tramo claro
   son oscuros (#126D7A, #8A2F70) y, difuminados en el hueco entre anillos, se
   leían como una sombra gris sucia, no como luz. Mezclados con el fondo de la
   elipse, brillan.
   Sin z-index en .flujo-arnes, el -1 cae en el contexto de apilado de
   .flujo-rejilla: detrás de los anillos y del arnés, delante de la trama. */
.flujo-arnes::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: -1;
  border-radius: 50%;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--acento) 40%, var(--fondo-alt)),
    color-mix(in srgb, var(--acento-alt) 40%, var(--fondo-alt)) 50%,
    color-mix(in srgb, var(--acento) 40%, var(--fondo-alt))
  );
  filter: blur(16px);
  opacity: 0;
  transition: opacity 0.6s;
  pointer-events: none;
}
.flujo-arnes[data-estado="encendido"]::before { opacity: 0.6; animation: flujo-arnes-respira 2.4s ease-in-out infinite }
.flujo-arnes[data-estado="entregado"]::before { opacity: 0.35 }
@keyframes flujo-arnes-respira { 0%, 100% { opacity: 0.45 } 50% { opacity: 0.8 } }

/* La luz del borde, el «haz»: un trazo discontinuo que da la vuelta a la
   elipse, estela tenue y cabeza brillante delante. flujo.js mide el perímetro
   en --haz-*, porque el de una elipse no existe en CSS. */
.flujo-arnes-haz {
  position: absolute;
  left: -1px;
  top: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  overflow: visible;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s;
}
.flujo-arnes-luz-a { stop-color: var(--acento) }
.flujo-arnes-luz-b { stop-color: var(--acento-alt) }
.flujo-arnes-haz ellipse { fill: none; stroke: url(#flujo-arnes-luz); stroke-linecap: round }
.flujo-arnes-estela { stroke-width: 1.5; opacity: 0.5; stroke-dasharray: var(--haz-estela) }
.flujo-arnes-cabeza { stroke-width: 2.2; stroke-dasharray: var(--haz-cabeza) }
.flujo-arnes[data-estado="encendido"] .flujo-arnes-haz { opacity: 1 }
.flujo-arnes[data-estado="encendido"] .flujo-arnes-estela { animation: flujo-arnes-estela 2.6s linear infinite }
.flujo-arnes[data-estado="encendido"] .flujo-arnes-cabeza { animation: flujo-arnes-cabeza 2.6s linear infinite }
@keyframes flujo-arnes-estela {
  from { stroke-dashoffset: 0px }
  to { stroke-dashoffset: calc(var(--haz-perimetro) * -1px) }
}
/* La cabeza va delante de la estela: su guion empieza «adelanto» px antes. */
@keyframes flujo-arnes-cabeza {
  from { stroke-dashoffset: calc(var(--haz-adelanto) * -1px) }
  to { stroke-dashoffset: calc((var(--haz-adelanto) + var(--haz-perimetro)) * -1px) }
}

/* ── La pausa congela TODO lo que se mueve ─────────────────────────────
   Parar el reloj de flujo.js no basta: el latido de los anillos, las bandas
   del isotipo y la luz del arnés son bucles CSS. Medido el 2026-09-14, con
   la pausa pulsada seguían corriendo 13 animaciones (WCAG 2.2.2). El
   !important hace falta porque el isotipo lleva la animación en `style` en
   línea. */
.flujo[data-parado] *,
.flujo[data-parado] *::before,
.flujo[data-parado] *::after { animation-play-state: paused !important }

/* ── Fase 3 · el borrador ───────────────────────────────────────────── */
.flujo-pila {
  position: relative;
  width: 200px;
  height: 246px;
}
.flujo-doc {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: 14px 15px;
  background: var(--fondo-alt);
  border: 1px solid color-mix(in srgb, var(--texto) 14%, transparent);
  border-radius: 4px;
  box-shadow: 0 10px 26px -20px color-mix(in srgb, var(--texto) 70%, transparent);
  opacity: 0;
  transform: translateY(14px) scale(0.97);
  transition: opacity 0.6s, transform 0.6s;
  overflow: hidden;
}
.flujo-doc[data-visible] { opacity: 1; transform: none }
/* Las que ya salieron se quedan detrás, apiladas: se ve que el agente ha
   entregado más de una sin tener que contarlo. */
.flujo-doc[data-atras="1"] { opacity: 1; transform: translate(9px, -9px) scale(0.97); z-index: -1 }
.flujo-doc[data-atras="2"] { opacity: 1; transform: translate(18px, -18px) scale(0.94); z-index: -2 }
.flujo-doc[data-atras="3"] { opacity: 1; transform: translate(27px, -27px) scale(0.91); z-index: -3 }

.flujo-doc-cabecera {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-family: var(--tipo-mono);
  font-size: 7.5px;
  letter-spacing: 0.05em;
  color: var(--texto-tenue);
  border-bottom: 1px solid color-mix(in srgb, var(--texto) 12%, transparent);
  padding-bottom: 7px;
}
/* ⚠️ Sin nowrap, un flex item con texto largo se PARTE en dos líneas —pasó con
   «Protocolo + PAE · v1.0»— y arrastra al de al lado. Una cabecera de una
   línea es el contrato; si algún día no cabe, se acorta el texto, no se deja
   partir solo. */
.flujo-doc-cabecera span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flujo-doc-cabecera span:first-child { flex: 1 1 auto; min-width: 0; }
.flujo-doc-cabecera span:last-child { flex: none; }

/* El título y el subtítulo se recortan a un número fijo de líneas: sin esto,
   un título largo —el del biosimilar entra en cinco líneas— empuja las
   secciones fuera de la tarjeta en vez de dejar que la máscara de abajo haga
   su trabajo. */
.flujo-doc h4 {
  font-size: 11.5px;
  font-weight: 700;
  line-height: 1.28;
  margin: 9px 0 4px;
  letter-spacing: -0.01em;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.flujo-doc-sub {
  font-size: 9px;
  line-height: 1.4;
  color: var(--texto-tenue);
  margin: 0 0 9px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* La lista ocupa lo que queda y se corta con un desvanecido, no en seco: el
   mismo criterio que las vecinas del carrusel de «El principio» — un párrafo
   cortado a mitad de palabra se lee como un error, no como «hay más». */
.flujo-doc ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3px;
  counter-reset: sec;
  max-height: 78px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, #000 75%, transparent);
  mask-image: linear-gradient(180deg, #000 75%, transparent);
}
.flujo-doc li {
  font-size: 8.5px;
  line-height: 1.35;
  color: var(--texto-tenue);
  counter-increment: sec;
  display: flex;
  gap: 6px;
  overflow: hidden;
}
.flujo-doc li > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flujo-doc li::before {
  content: counter(sec, decimal-leading-zero);
  font-family: var(--tipo-mono);
  color: var(--acento);
  flex: none;
}
/* El sello dice BORRADOR y no se toca: «listo para someter» está vetado por
   escrito (restricciones §6). */
.flujo-doc-sello {
  position: absolute;
  right: 12px;
  bottom: 11px;
  font-family: var(--tipo-mono);
  font-size: 7.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--acento-alt);
  border: 1px solid color-mix(in srgb, var(--acento-alt) 45%, transparent);
  border-radius: 2px;
  padding: 2px 5px;
}

/* ── El mando ───────────────────────────────────────────────────────────
   Hay movimiento automático que dura más de cinco segundos, así que la pausa
   es obligatoria (WCAG 2.2.2). */
.flujo-mando {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 26px;
}
.flujo-pausa {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--texto) 18%, transparent);
  background: none;
  color: var(--texto-tenue);
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.flujo-pausa svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6 }
.flujo-pausa:hover {
  color: var(--acento);
  border-color: color-mix(in srgb, var(--acento) 70%, transparent);
  background: color-mix(in srgb, var(--acento) 7%, transparent);
}
.flujo-pausa:focus-visible { outline: 2px solid var(--acento); outline-offset: 3px }
.flujo-pie {
  font-family: var(--tipo-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--texto-tenue);
}

/* ── Pantalla estrecha ──────────────────────────────────────────────────
   Las tres fases se apilan y los raíles desaparecen: en vertical no unen
   nada, y girarlos costaría más de lo que aporta. */
@media (max-width: 900px) {
  /* `minmax(0, 1fr)` y no `1fr`, por el núcleo de 545 px fijos: con `1fr` la
     columna no baja de su contenido más ancho, y a 390 px la rejilla entera
     se desbordaba 206 px. En una columna que sí puede encoger, el
     `max-width: 100%` del núcleo tiene contra qué medirse. */
  .flujo-rejilla { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 34px }
  .flujo-fase { align-items: center }
  .flujo-salidas { align-items: center }
  .flujo-prompts ul { width: min(100%, 360px) }
  .flujo-rail { display: none }
}

/* En móvil la elipse ocupa el ancho y los anillos se juntan. La línea de
   comando ya no cabe en una: se parte en dos, equilibradas, con un tope que
   la mantiene lejos del borde curvo, y reserva el alto de las dos para que
   nada salte al cambiar de frase —las cortas siguen en una—. */
@media (max-width: 600px) {
  .flujo-circulo { --anillo: 8px; width: 100%; height: 178px }
  .flujo-arnes { gap: 6px }
  .flujo-arnes-estado { white-space: normal; max-width: 190px; min-height: 30px }
  .flujo-arnes-txt { text-wrap: balance }
}

/* Con movimiento reducido no hay coreografía: se enseña el estado final —el
   primer prompt, el sistema encendido y su borrador— y ahí se queda. */
@media (prefers-reduced-motion: reduce) {
  .flujo-prompt,
  .flujo-isotipo,
  .flujo-doc,
  .flujo-arnes,
  .flujo-arnes::before,
  .flujo-arnes-haz,
  .flujo-arnes-estado { transition: none }
  .flujo-nucleo[data-trabajando] .flujo-anillo { animation: none }
  .flujo-rail[data-corre] .flujo-pulso { animation: none; opacity: 0 }
  .flujo-prompt[data-escribiendo] .flujo-cursor { animation: none }
  .flujo-arnes *,
  .flujo-arnes::before { animation: none !important }
  .flujo-arnes[data-estado="encendido"] .flujo-arnes-txt { background: none; color: inherit }
}