/*
 * ==========================================================================
 *  /modulos (sistema F) + ARTEFACTOS animados de los siete módulos
 * ==========================================================================
 *
 * Maqueta validada: `F-modulos.dc.html`. Los artefactos (`.f-mod-art*`,
 * `web/partials/modulos/_art-*.twig`) se reutilizan en las fichas de
 * módulo, que cargan ESTA hoja además de `modulo.css` (así el listado y
 * la ficha comparten caché).
 *
 * Reglas (f-sistema.md): prefijo `f-mod-`; sólo tokens `--f-*`; sólo se
 * animan transform / opacity / clip-path / background-position; cada
 * animación lee `var(--f-dl, 0s)` dentro del shorthand; el estado BASE es
 * el final legible (con `prefers-reduced-motion` f.css pone todo a
 * `animation: none` y esto se lee entero).
 */

/* --------------------------------------------------------------------------
   Utilidades de página
   -------------------------------------------------------------------------- */
.f-mod-min-480 { --f-min: 480px; }
.f-mod-gap { --f-gap: clamp(36px, 5vw, 56px); }

/* --------------------------------------------------------------------------
   Cabecera + barra de saltos
   -------------------------------------------------------------------------- */
.f-mod-hero { padding-block: clamp(56px, 7vw, 80px) clamp(48px, 6vw, 64px); border-bottom: 1px solid var(--f-line); }
.f-mod-hero__top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr)); gap: 32px 48px; align-items: end; }
.f-mod-hero .f-lead { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.1875rem); line-height: 1.5; }

.f-mod-jump {
  margin-top: clamp(32px, 5vw, 48px);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--f-line2); background: var(--f-bg); overflow: hidden;
}
@media (min-width: 640px) { .f-mod-jump { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .f-mod-jump { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.f-mod-jump__a {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 10px; min-height: 44px;
  padding: 16px;
  box-shadow: 1px 0 0 var(--f-line), 0 1px 0 var(--f-line);
  transition: background-color 0.2s ease;
}
.f-mod-jump__a:hover, .f-mod-jump__a:focus-visible { background: var(--f-stone); }
.f-mod-jump__k { display: flex; align-items: center; gap: 8px; font-family: var(--f-font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11px; }
.f-mod-jump__n { display: flex; align-items: baseline; gap: 6px; }
.f-mod-jump__num { font-size: 30px; font-weight: 300; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.f-mod-jump__u { font-family: var(--f-font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 9.5px; color: var(--f-grey); }
.f-mod-jsq { animation: f-mod-jsq 4.2s ease var(--f-dl, 0s) infinite; }
.f-mod-jump__a:hover .f-mod-jsq { opacity: 1; }
@keyframes f-mod-jsq { 0%, 100% { opacity: 0.25; } 8% { opacity: 1; } 16% { opacity: 0.25; } }
.f-mod-jbar {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--f-sig);
  transform-origin: left; opacity: 0;
  animation: f-mod-jbar 4.2s cubic-bezier(0.4, 0, 0.2, 1) var(--f-dl, 0s) infinite;
}
@keyframes f-mod-jbar { 0% { transform: scaleX(0); opacity: 1; } 10% { transform: scaleX(1); opacity: 1; } 14%, 100% { transform: scaleX(1); opacity: 0; } }

/* --------------------------------------------------------------------------
   Una sección por módulo
   -------------------------------------------------------------------------- */
.f-mod-sec { padding-block: clamp(56px, 7vw, 72px); border-bottom: 1px solid var(--f-line); scroll-margin-top: var(--f-nav-h); }
.f-mod-sec--ap { border-bottom-color: var(--f-line2); }
.f-mod-sec__grid { align-items: center; }
.f-mod-sec__txt { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.f-mod-sec__txt .f-p { font-size: 17px; line-height: 1.55; max-width: 540px; }
.f-mod-sec__art { min-width: 0; }
.f-mod-h2 { font-size: clamp(2.25rem, 1.4rem + 2.6vw, 3.375rem); }
.f-mod-h2--ap { font-size: clamp(2.5rem, 1.4rem + 3.2vw, 4rem); }
@media (min-width: 1000px) {
  .f-mod-sec--rev .f-mod-sec__art { order: -1; }
}
.f-mod-sec__top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.f-mod-chip-ink { border-color: var(--f-ink); color: var(--f-ink); }

.f-mod-points { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); border-top: 1px solid var(--f-line2); column-gap: 20px; }
.f-mod-points li { padding: 12px 0; border-bottom: 1px solid var(--f-line2); font-size: 15px; }

.f-mod-kpis { display: flex; gap: 12px 28px; flex-wrap: wrap; align-items: flex-end; border-top: 1px solid var(--f-line); padding-top: 18px; }
.f-mod-sec--ap .f-mod-kpis { border-top: 0; padding-top: 0; }
.f-mod-kpi { display: flex; flex-direction: column; gap: 6px; }
.f-mod-kpi__n { font-size: 34px; font-weight: 300; letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; }
.f-mod-sec--ap .f-mod-kpi__n { font-size: 40px; }
.f-mod-kpi__l { font-family: var(--f-font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; color: var(--f-grey); }

/* --------------------------------------------------------------------------
   Banda «una sola plataforma» (noche: clara en claro)
   -------------------------------------------------------------------------- */
.f-mod-plat { padding-block: clamp(72px, 9vw, 96px); }
.f-mod-plat__cells { margin-top: clamp(32px, 5vw, 48px); border-top: 1px solid var(--f-night-line); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); column-gap: 26px; }
.f-mod-plat__cell { padding: 26px 0 0; display: flex; flex-direction: column; gap: 10px; }
.f-mod-plat__k { display: flex; align-items: center; gap: 8px; font-family: var(--f-font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; opacity: 0.7; }
.f-mod-plat__t { font-size: 20px; letter-spacing: -0.03em; }
.f-mod-plat__d { font-size: 15px; line-height: 1.5; opacity: 0.8; }

/* --------------------------------------------------------------------------
   Por sector (enlaces internos)
   -------------------------------------------------------------------------- */
.f-mod-sectors { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; }
.f-mod-sectors a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; border: 1px solid var(--f-line2); font-size: 15px; transition: border-color 0.2s ease, color 0.2s ease; }
.f-mod-sectors a:hover, .f-mod-sectors a:focus-visible { border-color: var(--f-sig); color: var(--f-sig); }

/* --------------------------------------------------------------------------
   Lo que viene (lista de espera)
   -------------------------------------------------------------------------- */
.f-mod-next__txt { display: flex; flex-direction: column; gap: 20px; max-width: 520px; }
.f-mod-next__form { display: flex; flex-direction: column; gap: 14px; max-width: 480px; }
.f-mod-next__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); border-top: 1px solid var(--f-ink); column-gap: 20px; }
.f-mod-next__list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 16px 0; border-bottom: 1px solid var(--f-line); font-size: 17px; }
.f-mod-next__list li span { font-family: var(--f-font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; color: var(--f-grey); white-space: nowrap; }
.f-mod-legal { font-size: 13px; line-height: 1.5; color: var(--f-grey); }
.f-mod-legal a { text-decoration: underline; }
/* Campo trampa: fuera de pantalla (no `display:none`: hay bots que lo
   descartan). */
.f-mod-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   Cierre
   -------------------------------------------------------------------------- */
.f-mod-close { text-align: start; }
.f-mod-close .f-lead { max-width: 560px; }

/* ==========================================================================
   ARTEFACTOS (bucles; reposo = estado final legible)
   ========================================================================== */
.f-mod-art { position: relative; overflow: hidden; border: 1px solid var(--f-line2); background: var(--f-stone); font-size: 14px; line-height: 1.4; }
.f-mod-art--bg { background: var(--f-bg); }
.f-mod-art__bar { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--f-line2); font-size: 13px; }
.f-mod-art__foot { padding: 10px 14px; text-align: end; }
.f-mod-art .f-sample { font-size: 10px; }
.f-mod-mono { font-family: var(--f-font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; }
.f-mod-ok { color: var(--f-ok); }
.f-mod-warn { color: var(--f-warn); }
.f-mod-sigc { color: var(--f-sig); }

/* Pila de estados: tres rótulos en la misma celda; reposo = el último. */
.f-mod-stack { display: inline-grid; }
.f-mod-stack > * { grid-area: 1 / 1; }
.f-mod-st1, .f-mod-st2 { opacity: 0; }
.f-mod-st1 { animation: f-mod-st1 var(--f-cycle, 8s) ease var(--f-dl, 0s) infinite both; }
.f-mod-st2 { animation: f-mod-st2 var(--f-cycle, 8s) ease var(--f-dl, 0s) infinite both; }
.f-mod-st3 { animation: f-mod-st3 var(--f-cycle, 8s) ease var(--f-dl, 0s) infinite both; }
@keyframes f-mod-st1 { 0%, 30% { opacity: 1; } 34%, 100% { opacity: 0; } }
@keyframes f-mod-st2 { 0%, 30% { opacity: 0; } 34%, 63% { opacity: 1; } 67%, 100% { opacity: 0; } }
@keyframes f-mod-st3 { 0%, 63% { opacity: 0; } 67%, 100% { opacity: 1; } }

.f-mod-cyc { animation: f-mod-cyc 8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--f-dl, 0s) infinite both; }
@keyframes f-mod-cyc { 0% { opacity: 0; transform: translateX(14px); } 8%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.f-mod-pop { animation: f-mod-pop 8s cubic-bezier(0.3, 1.4, 0.5, 1) var(--f-dl, 0s) infinite both; }
@keyframes f-mod-pop { 0%, 10% { opacity: 0; transform: scale(0.6); } 16%, 88% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: none; } }
.f-mod-type { display: inline-block; animation: f-mod-type 8s steps(28) var(--f-dl, 0s) infinite both; }
@keyframes f-mod-type { 0%, 20% { clip-path: inset(0 100% 0 0); } 40%, 100% { clip-path: inset(0 0 0 0); } }

/* --- Administración pública: radar ------------------------------------- */
.f-mod-radar__scan { position: absolute; inset: 41px 0 0 0; pointer-events: none; overflow: hidden; }
.f-mod-radar__scan > span { display: block; height: 12%; background: linear-gradient(180deg, transparent, var(--f-sigsoft), transparent); animation: f-mod-scan 4s ease-in-out var(--f-dl, 0s) infinite; transform: translateY(-100%); }
@keyframes f-mod-scan { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(900%); } }
.f-mod-radar__rows { display: grid; grid-template-columns: minmax(0, 1fr) minmax(84px, 118px); }
.f-mod-radar__t { padding: 12px 14px; border-bottom: 1px solid var(--f-line); display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.f-mod-radar__s { padding: 12px 14px; border-bottom: 1px solid var(--f-line); border-inline-start: 1px solid var(--f-line); display: flex; align-items: center; font-family: var(--f-font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 10.5px; }
.f-mod-radar__s--grey { color: var(--f-grey); }

/* --- Económico: factura -------------------------------------------------- */
.f-mod-inv { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.f-mod-inv__row { display: flex; justify-content: space-between; gap: 12px; font-size: 14px; color: var(--f-ink2); font-variant-numeric: tabular-nums; }
.f-mod-inv__row--line { border-top: 1px solid var(--f-line); padding-top: 10px; }
.f-mod-inv__total { font-size: 20px; letter-spacing: -0.03em; color: var(--f-ink); }
.f-mod-inv__hash { font-family: var(--f-font-mono); font-size: 10.5px; color: var(--f-grey); overflow-wrap: anywhere; }
.f-mod-stamp {
  position: absolute; left: 38%; top: 38%; padding: 6px 12px;
  border: 2px solid var(--f-ok); color: var(--f-ok);
  font-family: var(--f-font-mono); text-transform: uppercase; font-size: 15px; letter-spacing: 0.14em;
  background: color-mix(in oklab, var(--f-stone) 70%, transparent);
  transform: rotate(-12deg);
  animation: f-mod-stamp 8s cubic-bezier(0.3, 1.4, 0.5, 1) var(--f-dl, 0s) infinite both;
}
@keyframes f-mod-stamp {
  0%, 64% { opacity: 0; transform: rotate(-12deg) scale(1.6); }
  70%, 94% { opacity: 1; transform: rotate(-12deg) scale(1); }
  100% { opacity: 0; transform: rotate(-12deg) scale(1); }
}

/* --- CRM: tablero ----------------------------------------------------- */
.f-mod-kan { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.f-mod-kan__col { display: flex; flex-direction: column; min-width: 0; }
.f-mod-kan__col + .f-mod-kan__col { border-inline-start: 1px solid var(--f-line2); }
.f-mod-kan__h { padding: 10px 12px; border-bottom: 1px solid var(--f-line2); color: var(--f-grey); }
.f-mod-kan__b { padding: 10px; display: flex; flex-direction: column; gap: 8px; }
.f-mod-card { padding: 10px; background: var(--f-bg); border: 1px solid var(--f-line); font-size: 13px; display: flex; flex-direction: column; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.f-mod-card .f-code { font-size: 11px; color: var(--f-grey); }
.f-mod-card--move { position: relative; z-index: 2; border-color: var(--f-sig); animation: f-mod-move 7s cubic-bezier(0.65, 0, 0.35, 1) var(--f-dl, 0s) infinite both; }
@keyframes f-mod-move {
  0%, 30% { transform: none; }
  50%, 86% { transform: translate(calc(100% + 21px), 64px); }
  94%, 100% { transform: translate(calc(100% + 21px), 64px); opacity: 0; }
}
.f-mod-kan__gap { height: 56px; }
.f-mod-win { color: var(--f-ok); font-size: 9.5px; animation: f-mod-win 7s ease var(--f-dl, 0s) infinite both; }
@keyframes f-mod-win { 0%, 52% { opacity: 0; transform: translateY(-4px); } 58%, 90% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; } }
.f-mod-kan__foot { grid-column: 1 / -1; border-top: 1px solid var(--f-line2); padding: 8px 12px; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.f-mod-sum1 { opacity: 0; animation: f-mod-sum1 7s ease var(--f-dl, 0s) infinite both; }
.f-mod-sum2 { color: var(--f-ok); animation: f-mod-sum2 7s ease var(--f-dl, 0s) infinite both; }
@keyframes f-mod-sum1 { 0%, 52% { opacity: 1; } 56%, 100% { opacity: 0; } }
@keyframes f-mod-sum2 { 0%, 52% { opacity: 0; } 56%, 100% { opacity: 1; } }

/* --- Proyectos: gantt ------------------------------------------------- */
.f-mod-gantt { --f-mod-lab: 110px; }
@media (min-width: 480px) { .f-mod-gantt { --f-mod-lab: 150px; } }
.f-mod-gantt__head { display: grid; grid-template-columns: var(--f-mod-lab) repeat(6, minmax(0, 1fr)); }
.f-mod-gantt__head > span { padding: 9px 0; border-bottom: 1px solid var(--f-line2); color: var(--f-grey); text-align: center; }
.f-mod-gantt__head > span + span { border-left: 1px solid var(--f-line); }
.f-mod-gantt__head > span:first-child { padding-left: 12px; text-align: left; }
.f-mod-gantt__body { position: relative; overflow: hidden; padding: 6px 0; }
.f-mod-gantt__today { position: absolute; left: var(--f-mod-lab); right: 0; top: 0; bottom: 0; pointer-events: none; }
.f-mod-gantt__today > span { position: absolute; inset: 0; animation: f-mod-today 7s linear var(--f-dl, 0s) infinite; transform: translateX(74%); }
.f-mod-gantt__today i { position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: var(--f-sig); }
.f-mod-gantt__today b { position: absolute; left: 4px; top: 2px; font-weight: 400; font-family: var(--f-font-mono); text-transform: uppercase; font-size: 9px; color: var(--f-sig); }
@keyframes f-mod-today { 0% { transform: translateX(4%); } 100% { transform: translateX(74%); } }
.f-mod-gantt__row { display: grid; grid-template-columns: var(--f-mod-lab) minmax(0, 1fr); align-items: center; height: 38px; }
.f-mod-gantt__row > span:first-child { padding: 0 12px; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-mod-gantt__track { position: relative; height: 100%; }
.f-mod-bar { position: absolute; top: 11px; height: 16px; background: var(--f-ink2); transform-origin: left; animation: f-mod-bar 7s cubic-bezier(0.2, 0.8, 0.2, 1) var(--f-dl, 0s) infinite both; }
.f-mod-bar--1 { left: 0; width: 34%; }
.f-mod-bar--2 { left: 28%; width: 36%; }
.f-mod-bar--3 { left: 50%; width: 42%; background: var(--f-sig); }
@keyframes f-mod-bar { 0% { transform: scaleX(0); } 22%, 90% { transform: scaleX(1); } 100% { transform: scaleX(1); opacity: 0; } }
.f-mod-hito { position: absolute; left: calc(92% - 7px); top: 12px; width: 14px; height: 14px; background: var(--f-sig); transform: rotate(45deg); animation: f-mod-hito 7s ease var(--f-dl, 0s) infinite; }
.f-mod-hito::after { content: ''; position: absolute; inset: -6px; background: var(--f-sigsoft); opacity: 0; animation: f-mod-hito-halo 7s ease var(--f-dl, 0s) infinite; }
@keyframes f-mod-hito { 0%, 62% { transform: rotate(45deg) scale(1); } 70% { transform: rotate(45deg) scale(1.35); } 80%, 100% { transform: rotate(45deg) scale(1); } }
@keyframes f-mod-hito-halo { 0%, 62% { opacity: 0; } 70% { opacity: 1; } 80%, 100% { opacity: 0; } }
.f-mod-gantt__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: 1px solid var(--f-line2); padding: 10px 12px; font-size: 13px; }

/* --- Personas: turnos ------------------------------------------------- */
.f-mod-rota { display: grid; grid-template-columns: 92px repeat(7, minmax(0, 1fr)); font-size: 12px; }
@media (min-width: 480px) { .f-mod-rota { grid-template-columns: 110px repeat(7, minmax(0, 1fr)); } }
.f-mod-rota__d { padding: 8px 0; text-align: center; color: var(--f-grey); }
.f-mod-rota__p { padding: 8px 12px; border-top: 1px solid var(--f-line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.f-mod-rota__c { position: relative; border-top: 1px solid var(--f-line); border-inline-start: 1px solid var(--f-line); }
.f-mod-rota__c--m { background: var(--f-sigsoft); }
.f-mod-rota__c--t { background: var(--f-sig); }
.f-mod-rota__c--v { background: repeating-linear-gradient(45deg, var(--f-line2) 0 2px, transparent 2px 6px); }
.f-mod-fill { animation: f-mod-fill 8s ease var(--f-dl, 0s) infinite both; }
@keyframes f-mod-fill { 0% { opacity: 0; } 6%, 90% { opacity: 1; } 98%, 100% { opacity: 0; } }
.f-mod-hole { position: absolute; inset: 3px; background: var(--f-sigsoft); box-shadow: inset 0 0 0 1.5px var(--f-sig); animation: f-mod-hole 8s cubic-bezier(0.3, 1.4, 0.5, 1) var(--f-dl, 0s) infinite both; }
@keyframes f-mod-hole { 0%, 62% { opacity: 0; transform: scale(0.4); } 70%, 92% { opacity: 1; transform: none; } 100% { opacity: 0; } }
.f-mod-rota__leg { display: flex; gap: 10px 18px; flex-wrap: wrap; align-items: center; border-top: 1px solid var(--f-line2); padding: 10px 14px; color: var(--f-grey); }
.f-mod-rota__leg > span { display: flex; align-items: center; gap: 6px; }
.f-mod-rota__leg i { display: block; width: 10px; height: 10px; }
.f-mod-rota__leg .f-sample { margin-inline-start: auto; }

/* --- Soporte: ticket traducido --------------------------------------- */
.f-mod-tk { padding: 14px; display: flex; flex-direction: column; gap: 12px; font-size: 13.5px; line-height: 1.5; }
.f-mod-bub { max-width: 86%; padding: 10px 12px; background: var(--f-bg); border: 1px solid var(--f-line); display: flex; flex-direction: column; gap: 6px; }
.f-mod-bub--me { align-self: flex-end; background: var(--f-inv); color: var(--f-invink); border-color: var(--f-inv); }
.f-mod-bub__k { font-size: 9.5px; color: var(--f-grey); }
.f-mod-bub--me .f-mod-bub__k { color: inherit; opacity: 0.6; }
.f-mod-bub__tr { color: var(--f-grey); font-size: 12.5px; }
.f-mod-bub--me .f-mod-bub__tr { color: inherit; opacity: 0.65; }

/* --- Automatización: flujo -------------------------------------------- */
.f-mod-flow {
  position: relative; height: 300px;
  background-color: var(--f-stone);
  background-image: radial-gradient(var(--f-line2) 1px, transparent 1px);
  background-size: 16px 16px;
}
.f-mod-flow__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.f-mod-wire { fill: none; stroke: var(--f-line2); stroke-width: 1; vector-effect: non-scaling-stroke; }
.f-mod-flowl { fill: none; stroke: var(--f-sig); stroke-width: 1.4; stroke-dasharray: 3 7; vector-effect: non-scaling-stroke; animation: f-mod-dash 1.8s linear var(--f-dl, 0s) infinite; }
@keyframes f-mod-dash { to { stroke-dashoffset: -40; } }
.f-mod-dot { fill: var(--f-sig); transform-box: view-box; animation: f-mod-dot 4.8s linear var(--f-dl, 0s) infinite; transform: translate(420px, 200px); }
@keyframes f-mod-dot {
  0% { transform: translate(150px, 80px); }
  25% { transform: translate(277px, 80px); }
  45% { transform: translate(400px, 80px); }
  52% { transform: translate(400px, 200px); }
  60%, 100% { transform: translate(420px, 200px); }
}
.f-mod-fnode { position: absolute; background: var(--f-bg); border: 1px solid var(--f-line2); min-width: 0; }
.f-mod-fnode > span { display: block; padding: 6px 9px; }
.f-mod-fnode > span:first-child { border-bottom: 1px solid var(--f-line); color: var(--f-grey); font-family: var(--f-font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 9.5px; }
.f-mod-fnode > span + span { padding: 8px 9px; font-size: 12px; line-height: 1.3; }
@media (min-width: 480px) { .f-mod-fnode > span + span { font-size: 12.5px; } }
.f-mod-fnode--1 { left: 3%; top: 54px; width: 24%; }
.f-mod-fnode--2 { left: 37%; top: 54px; width: 29%; }
.f-mod-fnode--3 { left: 75%; top: 36px; width: 22%; }
.f-mod-fnode--4 { left: 75%; top: 176px; width: 22%; border-color: var(--f-sig); }
.f-mod-glow::after { content: ''; position: absolute; inset: -1px; pointer-events: none; box-shadow: inset 0 0 0 1px var(--f-sig), 0 0 0 4px var(--f-sigsoft); opacity: 0; animation: f-mod-glow 4.8s ease var(--f-dl, 0s) infinite; }
@keyframes f-mod-glow { 0%, 100% { opacity: 0; } 6%, 22% { opacity: 1; } 30% { opacity: 0; } }
.f-mod-flow .f-sample { position: absolute; right: 10px; bottom: 8px; }

/* Lo que sólo existe «durante» la animación desaparece con movimiento reducido. */
@media (prefers-reduced-motion: reduce) {
  .f-mod-jbar, .f-mod-radar__scan, .f-mod-gantt__today, .f-mod-dot { display: none; }
  .f-mod-jsq { opacity: 1; }
}
.f-mod-mt { margin-top: 24px; }
@media (max-width: 479px) { .f-mod-flow { height: 350px; } }