/* Sección «Así funciona una AAPP» (src/_includes/sections/flow.njk) · propuesta A integrada. Todos los selectores llevan prefijo .fl-.
   Lo global viene de site.css: .wrap, .section-heading, .kicker, .button.primary, .button.outline, .icon, .sr, h2 em (serif) y el foco visible.
   Código de color: salvia/lima = automatismos y agentes; verde bosque = control de calidad y seguridad; lavanda/ciruela = persona, decisiones y conocimiento.
   Estado por defecto del CSS (sin JS) = estado final de los retornos: plan concretado (nodo 8) y aprendizaje guardado (nodo 9); con JS se parte del estado inicial.
   Estados que pone flow.js: en la sección .fl-playing, .fl-static (movimiento reducido o ?reduce=1) y .fl-seek (?fl_t=, sin transiciones);
   en estaciones .fl-lit (activa), .fl-decided (7), .fl-after (8) y .fl-stored (9); en el panel móvil .fl-docked y .fl-open. La página pone .js en el html. */

.fl-section{--plum:#67517f;--fl-belt:#9fb08f;--fl-dec:#9a86b8;--fl-lrn:#7f6a9b;--fl-ring-auto:#bfe08a;--fl-ring-person:#c7b4e0;--fl-ring-control:#7fb890;padding-block:76px 72px}
.fl-section :where(ul){margin:0;padding:0;list-style:none}
.fl-section :where(h4){margin:0}

/* Cabecera compacta: titular y controles a la izquierda, párrafo + etiqueta + leyenda a la derecha (alineados por abajo) */
.fl-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-rows:auto 1fr;gap:0 56px;align-items:start}
.fl-head-title{grid-column:1;grid-row:1}
.fl-head .kicker{display:flex;align-items:center;gap:9px;color:var(--green);margin-bottom:20px}
.fl-head .kicker .icon{width:17px;height:19px;color:#5f7a4b}
.fl-title{text-wrap:balance;font-size:clamp(30px,3.1vw,44px)}
.fl-title em{display:block;margin-top:4px;font-style:italic}
.fl-lead{grid-column:2;grid-row:1/3;align-self:end;max-width:490px;min-width:0;padding-bottom:2px}
.fl-lead p{font-size:17px;line-height:1.65;color:var(--muted)}
.fl-lead strong{color:var(--forest);font-weight:650}
.fl-tagrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-top:14px}
.fl-tag{display:inline-flex;align-items:center;font-size:12px;font-weight:650;color:#5e694e;background:#eef2e4;border:1px solid #d7e0c9;border-radius:6px;padding:4px 9px;white-space:nowrap;line-height:1.3}
.fl-legend{display:flex;gap:6px 16px;flex-wrap:wrap;font-size:12px;color:var(--muted)}
.fl-legend li{display:flex;align-items:center;gap:7px;line-height:1.4}
.fl-legend i{width:13px;height:13px;border-radius:4px;border:1px solid #00000018;flex-shrink:0}
.fl-legend-auto{background:var(--lime)}
.fl-legend-control{background:var(--forest)}
.fl-legend-person{background:var(--lavender)}
.fl-controls{grid-column:1;grid-row:2;display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:26px}
.fl-btn{gap:10px;min-height:48px;padding:10px 18px;justify-content:flex-start}
.fl-btn--play{min-width:206px}
.fl-btn--pause{min-width:150px}
.fl-btn:disabled{opacity:.45}
.fl-btn-hint{font-size:12px;color:var(--muted);margin-left:6px}

/* Planta: rejilla de 13 columnas (7 estaciones + 6 cintas) y 3 filas (retorno de la decisión, estaciones, retorno del aprendizaje) */
.fl-plant{margin-top:22px;background-color:var(--white);background-image:radial-gradient(#e0e6d7 1px,transparent 1.3px);background-size:22px 22px;border:1px solid var(--line);border-radius:var(--radius);padding:22px 20px 20px;box-shadow:0 18px 48px -35px #173f355c;position:relative;overflow-x:clip}
.fl-floor{--fl-bw:42px;--fl-ra:124px;--fl-sh:200px;--fl-rc:138px;--fl-bandc:88px;--fl-sw:calc((100cqw - 6*var(--fl-bw))/7);--fl-p:calc(var(--fl-sw) + var(--fl-bw));--fl-x1:calc(var(--fl-sw)/2);--fl-lineA:calc(var(--fl-ra)*.5);--fl-lineC:calc(var(--fl-ra) + var(--fl-sh) + var(--fl-rc)*.42);position:relative;container-type:inline-size;display:grid;grid-template-columns:repeat(6,minmax(0,1fr) var(--fl-bw)) minmax(0,1fr);grid-template-rows:var(--fl-ra) var(--fl-sh) var(--fl-rc)}
.fl-st[data-i="1"],.fl-belt[data-i="1"]{--i:1}
.fl-st[data-i="2"],.fl-belt[data-i="2"]{--i:2}
.fl-st[data-i="3"],.fl-belt[data-i="3"]{--i:3}
.fl-st[data-i="4"],.fl-belt[data-i="4"]{--i:4}
.fl-st[data-i="5"],.fl-belt[data-i="5"]{--i:5}
.fl-st[data-i="6"],.fl-belt[data-i="6"]{--i:6}
.fl-st[data-i="7"],.fl-belt[data-i="7"]{--i:7}
.fl-tick[data-n="2"]{--n:2}
.fl-tick[data-n="3"]{--n:3}
.fl-tick[data-n="4"]{--n:4}

/* Estaciones y nodos (enlaces sin JS, pestañas con JS). El resaltado de la estación activa (anillo + sombra) va en un ::after con
   sombra fija que solo transiciona opacity, para que iluminar una estación no repinte la planta (revisión técnica F15). */
.fl-st,.fl-node{--fl-ring:var(--fl-ring-auto);position:relative;display:grid;text-align:left;color:var(--ink);border:1px solid #c9d4be;border-radius:14px;background:var(--white);padding:12px 12px 11px;min-width:0;transition:transform .3s var(--ease);font:inherit;line-height:1.3;cursor:pointer}
.fl-st::after,.fl-node::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;opacity:0;box-shadow:0 0 0 3px var(--fl-ring),0 14px 28px -18px #173f3580;transition:opacity .3s var(--ease);will-change:opacity}
.fl-st.fl-lit::after,.fl-node.fl-lit::after{opacity:1}
.fl-playing .fl-st,.fl-playing .fl-node{will-change:transform}
.fl-st{grid-row:2;grid-column:calc(var(--i)*2 - 1);height:var(--fl-sh);grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 16px 1fr auto;gap:6px;align-content:start}
.fl-st-top{grid-row:1}.fl-st-name{grid-row:2}.fl-st-slot{grid-row:4}.fl-st>.fl-who{grid-row:5}
.fl-st[data-kind=auto]{background:var(--sage)}
.fl-st[data-kind=agent]{background:var(--lime)}
.fl-st[data-kind=control]{background:var(--forest);color:#f6f8ee;border-color:var(--forest)}
.fl-st[data-kind=deliv]{background:#fbfbf4}
.fl-st[data-kind=person]{--fl-ring:var(--fl-ring-person);background:var(--lavender);border-color:#cfc3e0}
.fl-st[data-kind=control]{--fl-ring:var(--fl-ring-control)}
.fl-node{--fl-ring:var(--fl-ring-person);background:var(--lavender);border-color:#b9a9cf;z-index:2;padding:10px 12px;gap:6px;align-content:start}
.fl-node--know{background:#e9e2f2}
.fl-num{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;font-size:12px;font-weight:700;background:#ffffffc4;border:1px solid #0000001f;font-variant-numeric:tabular-nums;color:var(--forest);flex-shrink:0;line-height:1}
.fl-node .fl-num{color:var(--plum)}
.fl-st[data-kind=control] .fl-num{background:#ffffff26;border-color:#ffffff55;color:#f6f8ee}
.fl-st-top{display:flex;justify-content:space-between;align-items:center}
.fl-st-top .icon{width:22px;height:22px;color:#4f6937}
.fl-st[data-kind=person] .fl-st-top .icon{color:var(--purple)}
.fl-st[data-kind=control] .fl-st-top .icon{color:#cfe2b6}
.fl-st[data-kind=src] .fl-st-top .icon,.fl-st[data-kind=deliv] .fl-st-top .icon{color:var(--green)}
.fl-st-name{font-size:14px;font-weight:650;line-height:1.2;letter-spacing:-.012em;min-height:34px}
.fl-st-slot{display:grid;min-height:62px;align-content:start}
.fl-st-slot>span{grid-area:1/1;align-self:start;font-size:12px;line-height:1.38;overflow-wrap:anywhere;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.fl-st-desc{color:#4f5f52} /* ≥ 5,2:1 también sobre lima, salvia y lavanda (F3) */
.fl-st[data-kind=control] .fl-st-desc{color:#c7d6bb}
.fl-st-act{opacity:0;transform:translateY(5px);font-weight:650;color:var(--forest)}
.fl-st[data-kind=control] .fl-st-act{color:#f6f8ee}
.fl-st[data-kind=person] .fl-st-act{color:var(--purple)}
.fl-lit .fl-st-desc{opacity:0}
.fl-lit .fl-st-act{opacity:1;transform:none}
.fl-lit.fl-decided .fl-st-act{opacity:0;transform:translateY(-5px)}
.fl-lit.fl-decided .fl-st-act--2{opacity:1;transform:none}
.fl-who{justify-self:start;display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:650;padding:2px 7px;border-radius:5px;background:#ffffffc4;border:1px solid #0000001a;letter-spacing:.01em;white-space:nowrap;line-height:1.4}
.fl-who--auto{color:#4f6937}
.fl-who--agent{color:#3f5a2a}
.fl-who--person{color:#6a5680}
.fl-who--mixed{color:#4f6937}
.fl-st[data-kind=control] .fl-who{background:#ffffff1f;border-color:#ffffff40;color:#e7efdc}
.js .fl-st:hover,.js .fl-node:hover{transform:translateY(-2px);border-color:#9fb08f}
.js .fl-st[aria-selected=true],.js .fl-node[aria-selected=true]{border-color:var(--forest);box-shadow:inset 0 0 0 1px var(--forest)}
.js .fl-node[aria-selected=true]{border-color:var(--plum);box-shadow:inset 0 0 0 1px var(--plum)}
.fl-st.fl-lit,.fl-node.fl-lit{transform:translateY(-3px)}

/* Nodos de retorno: 8 Plan y delegación (sobre el carril superior), 9 Conocimiento del negocio (sobre el carril inferior) */
.fl-node--plan{position:absolute;left:calc(4*var(--fl-p));right:var(--fl-p);top:calc(var(--fl-lineA) - 53px);height:106px}
.fl-node--know{position:absolute;left:var(--fl-p);right:calc(3*var(--fl-p));top:calc(var(--fl-lineC) - 36px);height:100px;gap:10px}
.fl-node-head{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:650;min-width:0}
.fl-node-head .icon{width:18px;height:18px;color:var(--plum)}
.fl-node-head .fl-num{width:20px;height:20px;font-size:12px}
.fl-node-sub{margin-left:auto;font-size:12px;font-weight:600;color:#5e4c78;white-space:nowrap} /* ≥ 5,9:1 sobre lavanda, sin opacidad (F3) */
.fl-plan,.fl-know{display:grid;position:relative}
.fl-plan>span,.fl-know>span{grid-area:1/1;display:grid;gap:3px;transition:opacity .35s var(--ease),transform .35s var(--ease)}
/* Sin JS (y en reducido): estado final visible. Con JS, estado inicial hasta que el ciclo pasa por el retorno. */
.fl-plan-before,.fl-know-before{opacity:0;transform:translateY(-6px)}
.js .fl-plan-before,.js .fl-know-before{opacity:1;transform:none}
.js .fl-plan-after,.js .fl-know-after{opacity:0;transform:translateY(6px)}
.js .fl-after .fl-plan-after,.js .fl-stored .fl-know-after,.js .fl-static .fl-plan-after,.js .fl-static .fl-know-after{opacity:1;transform:none}
.js .fl-after .fl-plan-before,.js .fl-stored .fl-know-before,.js .fl-static .fl-plan-before,.js .fl-static .fl-know-before{opacity:0;transform:translateY(-6px)}
.fl-task{display:flex;gap:6px;align-items:flex-start;font-size:12px;line-height:1.35;color:#4c4260}
.fl-task::before{content:"";width:8px;height:8px;border-radius:50%;border:1.5px solid #9a86b8;flex-shrink:0;margin-top:4px;background:transparent}
.fl-plan-after .fl-task::before{background:var(--plum);border-color:var(--plum)}
.fl-task b{font-weight:650;font-size:12px;padding:1px 5px;border-radius:4px;margin-left:2px;white-space:nowrap;background:#ffffffb8;border:1px solid #0000001a}
.fl-task b.fl-who--agent{background:var(--lime)}
.fl-task b.fl-who--person{background:#fff}
.fl-task i{font-style:normal;color:var(--plum);font-size:12px;font-weight:650;letter-spacing:.03em;text-transform:uppercase}
.fl-know>span{font-size:12px;line-height:1.4;color:#4c4260}
.fl-know-before{color:#665580;font-style:italic}
.fl-know .fl-know-after{display:flex;gap:6px;align-items:flex-start}
.fl-know-after .icon{width:14px;height:14px;color:var(--plum);stroke-width:2;margin-top:2px}
.fl-know-after q{font-family:Georgia,"Times New Roman",serif;font-size:12px;color:var(--plum);quotes:"«" "»"}

/* Cintas entre estaciones, con etiqueta de lo que circula */
.fl-belt{grid-row:2;grid-column:calc(var(--i)*2);position:relative}
.fl-belt::before{content:"";position:absolute;left:-2px;right:-2px;top:var(--fl-bandc);border-top:1.5px solid var(--fl-belt)}
.fl-belt::after{content:"";position:absolute;right:0;top:var(--fl-bandc);width:7px;height:7px;border-right:1.5px solid var(--fl-belt);border-bottom:1.5px solid var(--fl-belt);transform:translate(-1px,-50%) rotate(-45deg)}
.fl-belt-label{position:absolute;left:50%;top:var(--fl-bandc);transform:translate(-50%,calc(-100% - 5px));z-index:4;padding:0 4px;border-radius:4px;background:#fffefaf0;font-size:12px;font-weight:650;color:#4d6741;white-space:nowrap;letter-spacing:.01em;line-height:1.3}   /* etiqueta sobre la cinta: más ancha que la cinta (42 px) a 12 px, así que se dibuja por encima de las estaciones con fondo propio */
.fl-belt--m{display:none}

/* Carriles de retorno: decisión (arriba, de 7 a 3 con ramal en 4) y aprendizaje (abajo, de 7 a 1 con ramales en 2, 3 y 4) */
.fl-track,.fl-tick{position:absolute;pointer-events:none}
.fl-track--dec{top:var(--fl-lineA);height:calc(var(--fl-ra) - var(--fl-lineA));left:calc(var(--fl-x1) + 2*var(--fl-p));right:calc(var(--fl-sw)/2);border:1.5px solid var(--fl-dec);border-bottom:0;border-radius:18px 18px 0 0}
.fl-track--dec::before{content:"";position:absolute;left:-1.5px;bottom:2px;width:7px;height:7px;border-right:1.5px solid var(--fl-dec);border-bottom:1.5px solid var(--fl-dec);transform:translateX(-50%) rotate(45deg)}
.fl-tick--dec{top:var(--fl-lineA);height:calc(var(--fl-ra) - var(--fl-lineA));left:calc(var(--fl-x1) + (var(--n) - 1)*var(--fl-p));width:0;border-left:1.5px solid var(--fl-dec)}
.fl-tick--dec::after{content:"";position:absolute;left:-1.5px;bottom:2px;width:7px;height:7px;border-right:1.5px solid var(--fl-dec);border-bottom:1.5px solid var(--fl-dec);transform:translateX(-50%) rotate(45deg)}
.fl-track--lrn{top:calc(var(--fl-ra) + var(--fl-sh));height:calc(var(--fl-lineC) - var(--fl-ra) - var(--fl-sh));left:var(--fl-x1);right:calc(var(--fl-sw)/2);border:1.5px solid var(--fl-lrn);border-top:0;border-radius:0 0 18px 18px}
.fl-track--lrn::before{content:"";position:absolute;left:-1.5px;top:2px;width:7px;height:7px;border-left:1.5px solid var(--fl-lrn);border-top:1.5px solid var(--fl-lrn);transform:translateX(-50%) rotate(45deg)}
.fl-tick--lrn{top:calc(var(--fl-ra) + var(--fl-sh));height:calc(var(--fl-lineC) - var(--fl-ra) - var(--fl-sh));left:calc(var(--fl-x1) + (var(--n) - 1)*var(--fl-p));width:0;border-left:1.5px solid var(--fl-lrn)}
.fl-tick--lrn::after{content:"";position:absolute;left:-1.5px;top:2px;width:7px;height:7px;border-left:1.5px solid var(--fl-lrn);border-top:1.5px solid var(--fl-lrn);transform:translateX(-50%) rotate(45deg)}
/* Los rótulos van pegados al carril pero fuera de la línea (encima el de la decisión, debajo el del aprendizaje) para que los paquetes que circulan no los tapen */
.fl-track-label{position:absolute;z-index:1;font-size:12px;font-weight:650;letter-spacing:.005em;white-space:nowrap;padding:2px 8px;border-radius:5px;background:var(--white);border:1px solid #cdbfe0;line-height:1.3;pointer-events:none}
.fl-track-label--dec{color:var(--purple);top:var(--fl-lineA);left:calc(var(--fl-x1) + 2*var(--fl-p) + 20px);transform:translateY(calc(-100% - 12px))}
.fl-track-label--lrn{color:var(--plum);top:var(--fl-lineC);left:calc(var(--fl-x1) + 4*var(--fl-p) - 34px);transform:translateY(12px)}

/* Paquetes rotulados (solo se mueven con JS; flow.js los anima con transform/opacity) */
.fl-pkgs{position:absolute;inset:0;pointer-events:none;z-index:4}
.fl-pkg{position:absolute;left:0;top:0;display:inline-flex;align-items:center;gap:5px;opacity:0;margin:-10px 0 0 -10px;will-change:transform,opacity}
/* Paquetes que salen de un nodo hacia la izquierda: el icono va delante y el rótulo detrás. Se anclan al borde derecho del suelo (flow.js resta el ancho). */
.fl-pkg--rev{left:auto;right:0;margin:-10px -10px 0 0;flex-direction:row-reverse}
.fl-pkg i{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;background:var(--lime);border:1px solid #9bb96f;color:var(--forest);box-shadow:0 3px 8px #173f3533}
.fl-pkg i .icon{width:12px;height:12px;stroke-width:2}
.fl-pkg b{font-size:12px;font-weight:650;color:var(--forest);background:var(--white);padding:1px 6px;border-radius:4px;white-space:nowrap;border:1px solid #d3dbc8;box-shadow:0 2px 6px #173f3520}
.fl-pkg--doc i{background:var(--white);border-color:#b7c5a7;color:var(--green)}
.fl-pkg--control i{background:var(--forest);border-color:var(--forest);color:#f6f8ee}
.fl-pkg--person i{background:var(--lavender);border-color:#b39fcc;color:var(--purple)}
.fl-pkg--person b{color:var(--purple)}
.fl-pkg--know i{background:#e2d9ee;border-color:#a48fbf;color:var(--plum)}
.fl-pkg--know b{color:var(--plum)}
.fl-clock{position:absolute;width:0;height:0;overflow:hidden;opacity:1}
.fl-seek .fl-st,.fl-seek .fl-node,.fl-seek .fl-st::after,.fl-seek .fl-node::after,.fl-seek .fl-st-slot>span,.fl-seek .fl-plan>span,.fl-seek .fl-know>span{transition:none!important}

/* Foco visible coherente con el sitio también en los tabpanels y demás elementos con tabindex (F7) */
.fl-section [tabindex]:focus-visible,.fl-section [role=tabpanel]:focus-visible{outline:3px solid #9470ac;outline-offset:5px}

/* Panel de lectura (altura reservada para que nada salte al cambiar de estación) */
.fl-panel{margin-top:18px;background:var(--white);border:1px solid var(--line);border-radius:16px;padding:22px 24px 24px;min-height:214px;box-shadow:0 18px 48px -38px #173f3555}
.fl-panel-bar{display:none}
.fl-bar-pause{display:none}
.fl-detail+.fl-detail{margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
.js .fl-detail+.fl-detail{margin:0;padding:0;border:0}
.fl-detail-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.fl-detail-head h3{font-size:22px;font-weight:620;letter-spacing:-.03em;line-height:1.1}
.fl-detail-head .fl-num{width:26px;height:26px;font-size:12px;background:var(--sage);border-color:#c9d4be}
.fl-detail--return .fl-detail-head .fl-num{background:var(--lavender);border-color:#b9a9cf}
.fl-detail-kind{font-size:12px;font-weight:650;color:var(--muted);letter-spacing:.04em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--line);border-radius:5px}
.fl-detail-grid{display:grid;grid-template-columns:1fr 1.25fr .8fr;gap:26px}
.fl-detail-grid>div{min-width:0}
.fl-detail-grid h4{font-size:12px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin:0 0 9px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.fl-detail-grid p{font-size:14px;line-height:1.6}
.fl-ex{background:#f3f6ec;border-radius:10px;padding:14px 16px 15px;border:1px solid #e1e8d6}
.fl-ex h4 .fl-tag{font-size:12px;padding:2px 7px}
.fl-ex .fl-doc{font-family:Georgia,"Times New Roman",serif;font-size:15px;line-height:1.55;color:#2b4638}
.fl-ex .fl-doc small{display:block;font-family:"Aptos","Segoe UI",Arial,sans-serif;font-size:12px;color:var(--muted);margin-bottom:6px}
.fl-who-list{display:flex;flex-direction:column;gap:9px}
.fl-who-list li{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.45}
.fl-who-list .fl-who{margin-top:1px;background:#f4f6ee}
.fl-who-list .fl-who--person{background:var(--lavender)}
.fl-who-list .fl-who--agent{background:var(--lime)}
.fl-who-list .fl-who--auto{background:var(--sage)}

/* Franja base oscura y nota */
.fl-base{margin-top:18px;background:var(--forest);color:#f6f8ee;border-radius:16px;padding:18px 24px;display:grid;grid-template-columns:auto 1fr;gap:12px 36px;align-items:center}
.fl-base-title{font-size:12px;font-weight:650;color:#b9cd9e;max-width:160px;line-height:1.35}
.fl-base ul{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.fl-base li{display:flex;gap:8px;align-items:flex-start;font-size:12px;line-height:1.35;color:#dfe8d2}
.fl-base .icon{width:18px;height:18px;color:#b9cd9e;margin-top:1px}
.fl-note{margin-top:18px;font-size:12px;color:var(--muted);line-height:1.65;max-width:640px}

/* Escritorio estrecho (1000–1199): cintas más finas, estaciones algo más altas y textos un punto menores para que nada se monte */
@media (max-width:1199px){
  .fl-head{gap:0 36px}
  .fl-lead p{font-size:16px}
}
@media (min-width:1000px) and (max-width:1199px){
  .fl-floor{--fl-bw:30px;--fl-sh:216px;--fl-bandc:92px}
  .fl-st{padding:11px 10px 10px}
  .fl-st-slot>span{font-size:12px}
  .fl-belt-label{font-size:12px}
  .fl-node-sub{display:none}
  .fl-node-head{font-size:12px}
  .fl-task{font-size:12px}
}
.fl-st-slot{overflow:hidden}

/* Tablet: misma planta horizontal, más compacta; cabecera en una columna */
@media (min-width:700px) and (max-width:999px){
  .fl-head{grid-template-columns:1fr;grid-template-rows:none;gap:18px}
  .fl-head-title,.fl-lead,.fl-controls{grid-column:auto;grid-row:auto}
  .fl-lead{max-width:600px;align-self:start;padding-bottom:0}
  .fl-controls{margin-top:6px}
  .fl-plant{padding:18px 16px 16px}
  .fl-floor{--fl-bw:22px;--fl-ra:190px;--fl-sh:162px;--fl-rc:128px;--fl-bandc:75px}   /* fila superior más alta: el nodo del plan, a 12 px, necesita ≈ 160 px */
  .fl-st{padding:9px 8px 8px;gap:5px;border-radius:11px;grid-template-rows:auto auto 16px 1fr auto}
  .fl-st-name{font-size:12px;min-height:29px}
  .fl-st-desc{display:none}
  .fl-st-slot{min-height:42px}
  .fl-st-slot>span{font-size:12px}
  .fl-who{font-size:9px;padding:1px 5px}   /* excepción documentada: las estaciones miden 75 px en tablet; a 12 px «autorizadas» no cabe */
  .fl-num{width:19px;height:19px;font-size:12px}
  .fl-st-slot>span{overflow-wrap:anywhere}
  .fl-st-top .icon{width:18px;height:18px}
  .fl-belt-label{display:none}
  .fl-node{padding:8px 9px;border-radius:11px;gap:4px}
  .fl-node--plan{top:calc(var(--fl-lineA) - 83px);height:160px}
  .fl-task i{display:none}
  .fl-node--know{left:var(--fl-p);right:calc(3*var(--fl-p));top:calc(var(--fl-lineC) - 34px);height:100px;gap:8px}
  .fl-node-head{font-size:12px;gap:5px}
  .fl-node-head .icon{width:15px;height:15px}
  .fl-node-head .fl-num{width:17px;height:17px;font-size:12px}
  .fl-node-sub{display:none}
  .fl-task{font-size:12px;gap:4px}
  .fl-task b{font-size:12px}
  .fl-know>span{font-size:12px}
  .fl-know-after q{font-size:12px}
  .fl-track-label{font-size:12px;padding:1px 6px}
  .fl-track-label b{display:none}
  .fl-track-label--lrn{left:calc(var(--fl-x1) + 4*var(--fl-p) - 26px)}
  .fl-pkg b{display:none}
  .fl-detail-grid{grid-template-columns:1fr 1fr;gap:18px}
  .fl-detail-grid>div:last-child{grid-column:1/-1}
  .fl-who-list{flex-direction:row;flex-wrap:wrap;gap:8px 22px}
  .fl-base ul{grid-template-columns:repeat(3,1fr)}
}

/* Móvil: planta vertical, retornos por los carriles laterales, panel como hoja al pie */
@media (max-width:699px){
  .fl-section{padding-block:56px 48px}
  .fl-head{grid-template-columns:1fr;grid-template-rows:none;gap:16px}
  .fl-head-title,.fl-lead,.fl-controls{grid-column:auto;grid-row:auto}
  .fl-head .kicker{margin-bottom:16px}
  .fl-lead{max-width:none;align-self:start;padding-bottom:0}
  .fl-lead p{font-size:15px;line-height:1.7}
  .fl-tagrow{margin-top:12px}
  .fl-legend{gap:6px 12px;font-size:12px}
  .fl-controls{margin-top:8px;gap:10px}
  .fl-btn,.fl-btn--play,.fl-btn--pause{padding:10px 14px;font-size:13px;min-width:0;min-height:46px}
  .fl-btn-hint{display:none}
  .fl-plant{margin-top:20px;padding:16px 10px 14px;border-radius:16px}
  .fl-floor{--fl-shm:92px;--fl-bhm:34px;--fl-nhm:126px;--fl-pm:calc(var(--fl-shm) + var(--fl-bhm));--fl-tw:18px;container-type:normal;display:flex;flex-direction:column;padding-inline:28px}
  .fl-st{height:var(--fl-shm);grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;grid-template-areas:"top name who" "top slot slot";column-gap:10px;row-gap:4px;align-items:start;align-content:center;padding:10px 12px;scroll-margin:96px 0 120px}
  .fl-st-top{grid-area:top;flex-direction:column;justify-content:flex-start;gap:6px;align-self:center}
  .fl-st-name{grid-area:name;min-height:0;font-size:14px}
  .fl-st-slot{grid-area:slot;min-height:30px}
  .fl-st-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .fl-st>.fl-who{grid-area:who;align-self:start;margin-top:1px}
  .fl-belt{height:var(--fl-bhm);grid-row:auto;grid-column:auto}
  .fl-belt::before{left:50%;right:auto;top:-2px;bottom:-2px;border-top:0;border-left:1.5px solid var(--fl-belt)}
  .fl-belt::after{left:50%;right:auto;top:auto;bottom:0;transform:translate(-50%,-1px) rotate(45deg)}
  .fl-belt-label{left:calc(50% + 12px);top:50%;transform:translateY(-50%);font-size:12px}
  .fl-belt--m{display:block}
  .fl-node{position:static;height:auto;min-height:var(--fl-nhm);scroll-margin:96px 0 120px}
  .fl-st{scroll-margin:96px 0 120px}
  .fl-node--plan,.fl-node--know{position:relative;left:auto;right:auto;top:auto}
  .fl-node-head{display:grid;grid-template-columns:auto auto minmax(0,1fr);align-items:center}
  .fl-node-sub{grid-column:1/-1;margin-left:0;white-space:normal}
  .fl-track--dec{top:calc(2*var(--fl-pm) + var(--fl-shm)/2);height:calc(5*var(--fl-pm) + var(--fl-nhm)/2 - var(--fl-shm)/2);right:4px;left:auto;width:var(--fl-tw);border:1.5px solid var(--fl-dec);border-left:0;border-radius:0 14px 14px 0}
  .fl-track--dec::before{left:0;top:-1.5px;bottom:auto;transform:translate(-45%,-50%) rotate(135deg)}
  .fl-tick--dec{top:calc(3*var(--fl-pm) + var(--fl-shm)/2);height:0;right:4px;left:auto;width:var(--fl-tw);border-left:0;border-top:1.5px solid var(--fl-dec)}
  .fl-tick--dec::after{left:0;top:-1.5px;bottom:auto;transform:translate(-45%,-50%) rotate(135deg)}
  .fl-track--lrn{top:calc(var(--fl-shm)/2);height:auto;bottom:calc(var(--fl-nhm)/2);left:4px;right:auto;width:var(--fl-tw);border:1.5px solid var(--fl-lrn);border-right:0;border-radius:14px 0 0 14px}
  .fl-track--lrn::before{left:auto;right:0;top:-1.5px;transform:translate(45%,-50%) rotate(135deg);border-left:0;border-top:0;border-right:1.5px solid var(--fl-lrn);border-bottom:1.5px solid var(--fl-lrn)}
  .fl-tick--lrn{top:calc((var(--n) - 1)*var(--fl-pm) + var(--fl-shm)/2);height:0;left:4px;width:var(--fl-tw);border-left:0;border-top:1.5px solid var(--fl-lrn)}
  .fl-tick--lrn::after{left:auto;right:0;top:-1.5px;transform:translate(45%,-50%) rotate(135deg);border-left:0;border-top:0;border-right:1.5px solid var(--fl-lrn);border-bottom:1.5px solid var(--fl-lrn)}
  .fl-track-label{writing-mode:vertical-rl;transform:none;padding:6px 1px;font-size:12px;letter-spacing:.02em}
  .fl-track-label--dec{left:auto;right:calc(4px + var(--fl-tw)/2 - 9px);top:calc(4*var(--fl-pm) + 22px)}
  .fl-track-label--lrn{left:calc(4px + var(--fl-tw)/2 - 9px);top:calc(4*var(--fl-pm) + 22px);transform:rotate(180deg)}
  .fl-track-label b{display:none}
  .fl-pkg b{display:none}
  .fl-pkg--person b,.fl-pkg--know b{display:inline}
  .fl-pkg[data-pkg="p9b"] b,.fl-pkg[data-pkg="p10b"] b{display:none} /* los paquetes que bajan y suben por los carriles laterales van solo con icono: el rótulo desbordaría la página */
  /* Hoja de detalle: en reposo va en el flujo; se acopla al pie al elegir una estación o lanzar el ciclo */
  .fl-panel{padding:14px 16px 16px;min-height:0;border-radius:14px}
  .js .fl-panel.fl-docked{position:sticky;bottom:10px;z-index:6;box-shadow:0 14px 38px -18px #173f3580;border-color:#c3cfb6}
  .js .fl-panel-bar{display:flex;gap:10px;align-items:center}
  .fl-panel-bar .fl-num{width:26px;height:26px;font-size:12px;background:var(--sage);border-color:#c9d4be}
  .fl-panel-bar-text{flex:1 1 auto;min-width:0}
  .fl-panel-bar strong{display:block;font-size:13px;font-weight:650;line-height:1.25}
  .fl-panel-bar-text>span{display:-webkit-box;font-size:12px;color:var(--muted);line-height:1.4;overflow:hidden;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .fl-panel-toggle,.fl-bar-pause{width:44px;height:44px;flex-shrink:0;place-items:center;padding:0;border:1px solid #b8c7ae;border-radius:8px;background:transparent;color:var(--forest)}
  .fl-panel-toggle{display:grid}
  .fl-panel-toggle .icon,.fl-bar-pause .icon{width:18px;height:18px}
  .fl-panel-toggle .icon{transition:transform .25s var(--ease)}
  /* Pausar/Continuar en la barra acoplada, solo mientras el ciclo está en marcha (F4) */
  .js .fl-playing .fl-panel.fl-docked .fl-bar-pause{display:grid}
  .fl-bar-pause[aria-pressed=true]{background:var(--sage);border-color:#9fb08f}
  .fl-open .fl-panel-toggle .icon{transform:rotate(180deg)}
  .js .fl-panel-body{display:none;margin-top:14px;padding-top:14px;border-top:1px solid var(--line);max-height:min(58vh,440px);overflow:auto;overscroll-behavior:contain}
  .js .fl-panel.fl-open .fl-panel-body{display:block}
  .fl-detail-head{gap:8px;margin-bottom:12px}
  .fl-detail-head h3{font-size:18px}
  .fl-detail-head .fl-num{display:none}
  .fl-detail-grid{grid-template-columns:1fr;gap:14px}
  .fl-detail-grid p{font-size:13px}
  .fl-ex{padding:12px 13px}
  .fl-ex .fl-doc{font-size:14px}
  .fl-who-list li{font-size:12px}
  .fl-base{grid-template-columns:1fr;padding:16px 18px;gap:12px}
  .fl-base-title{max-width:none}
  .fl-base ul{grid-template-columns:1fr 1fr;gap:12px}
  .fl-base li{font-size:12px}
  .fl-note{font-size:12px}
}
/* Recorte 7 (revisión editorial): en móvil el párrafo introductorio deja dos frases; los botones sustituyen a la tercera */
@media (max-width:767px){
  .fl-lead-more{display:none}
}
@media (max-width:359px){
  .fl-plant{padding:12px 4px 12px}
  .fl-floor{--fl-shm:104px;padding-inline:26px}
  .fl-st{padding:8px 10px;column-gap:8px;grid-template-rows:auto auto auto;grid-template-areas:"top name" "top slot" "top who";grid-template-columns:auto minmax(0,1fr)}
  .fl-st-name{font-size:13px}
  .fl-who{font-size:12px;padding:1px 5px}
  .fl-legend{gap:6px 10px}
}

/* Movimiento reducido (preferencia del sistema o .fl-static por ?reduce=1): sin transiciones; el esquema estático completo lo dejan .js .fl-static y el CSS sin JS */
@media (prefers-reduced-motion:reduce){
  .fl-st,.fl-node,.fl-st::after,.fl-node::after,.fl-st-slot>span,.fl-plan>span,.fl-know>span,.fl-panel-toggle .icon{transition:none}
  .js .fl-st:hover,.js .fl-node:hover{transform:none}
}
.fl-static .fl-st,.fl-static .fl-node,.fl-static .fl-st::after,.fl-static .fl-node::after,.fl-static .fl-st-slot>span,.fl-static .fl-plan>span,.fl-static .fl-know>span,.fl-static .fl-panel-toggle .icon{transition:none}
.fl-static .fl-pkgs{display:none}