/* Sección «Cuatro fundamentos» (src/_includes/sections/foundations.njk). Todos los selectores llevan prefijo .fd-.
   Lo global viene de site.css: .wrap, .section-heading, .kicker, h2 em (serif), .icon, .example-tag, .sr y el foco visible.
   Código de color: lavanda/ciruela = persona, decisiones y conocimiento; salvia/lima = herramienta, agentes y automatismos.
   Motor de pasos: --s es el paso actual de cada tarjeta (lo escribe foundations.js al cambiar de paso, nunca por frame).
   Sin --s (sin JS) vale 99 = estado final. Cada pieza animable lleva --at (paso en que se activa) y opcionalmente --until.
   Estados que añade foundations.js en la sección: .fd-reduced (movimiento reducido o ?reduce=1), .fd-freeze (?fd_t= o ?fd_stage=);
   en cada tarjeta: data-state = idle | playing | paused | done y .fd-snap (rebobinado sin transición).
   Rendimiento: las palabras de la escena 1 (.fd-word) solo tienen capa propia (will-change) mientras la tarjeta está en playing,
   para que sus transiciones de opacidad no repinten la ventana en cada frame; fuera de playing no hay capas extra. */

.fd-section{--plum:#67517f;--fd-plum-ink:#5a4d70;--fd-plum-line:#d9cfe8;--fd-plum-soft:#f3effa;--fd-tool-ink:#4d653e;--fd-tool-line:#cfd9c1;--fd-tool-soft:#f3f6ea;--fd-tool-strong:#557647;padding-block:96px 108px}
.fd-section :where(ul,ol){margin:0;padding:0;list-style:none}
.fd-section h2,.fd-section h3{text-wrap:balance}
.fd-ic{display:block;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}

/* Cabecera */
.fd-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:22px 56px;align-items:start}
.fd-head .kicker{color:var(--green);margin-bottom:22px}
.fd-head h2 em{display:block;margin-top:4px;font-style:italic}
.fd-lead{align-self:end;max-width:470px;min-width:0}
.fd-lead p{font-size:18px;line-height:1.65;color:var(--muted)}
.fd-lead strong{color:var(--forest);font-weight:640}
.fd-lead .fd-lead-ex{font-size:15px;line-height:1.6;margin-top:12px}
.fd-tagrow{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 18px;padding-top:8px;font-size:13px;color:var(--muted)}
.fd-extag{display:inline-flex;align-items:center;font-size:12px;padding:4px 9px;border:1px solid #d7decd;border-radius:6px;color:#5c705b;white-space:nowrap;background:var(--white)}
.fd-legend{display:inline-flex;align-items:center;gap:8px}
.fd-legend i{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}
.fd-legend-p i{background:#b9a6d3}
.fd-legend-t i{background:#9cb879}

/* Cuadrícula y tarjetas */
.fd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px;margin-top:52px}
.fd-card{min-width:0;display:flex;flex-direction:column;gap:20px;padding:28px 28px 26px;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);box-shadow:0 18px 48px -35px #173f355c}
.fd-card-head{display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 14px;align-items:baseline}
.fd-num{font-size:13px;font-weight:650;color:var(--green);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.fd-card h3{font-size:25px;letter-spacing:-.04em;line-height:1.15;max-width:none}
.fd-chain{grid-column:2;font-size:14px;line-height:1.55;color:var(--muted)}
.fd-chain b{font-weight:640;color:var(--ink)}
.fd-chain i{font-style:normal;color:#617552;padding-inline:2px}
.fd-example{font-size:15px;line-height:1.7;color:#465c4c}
.fd-example strong{font-weight:650;color:var(--forest)}
.fd-example q{quotes:"«" "»"}

/* Ventana de producto */
.fd-stage{padding:14px;border-radius:16px}
.fd-stage-p{background:#efeaf7}
.fd-stage-t{background:#e9eedc}
.fd-stage-pt{background:linear-gradient(90deg,#efeaf7 50%,#e9eedc 50%)}
.fd-window{position:relative;background:var(--white);border:1px solid #c4d0b6;border-radius:14px;overflow:hidden;box-shadow:0 25px 45px -22px #193a2e33;min-height:336px;display:flex;flex-direction:column;font-size:12px;line-height:1.4;color:var(--ink);isolation:isolate}
.fd-bar{display:flex;align-items:center;gap:12px;padding:9px 14px;background:#f2f4eb;border-bottom:1px solid #e1e6d8;font-size:12px;color:#5c705b;flex-shrink:0}
.fd-bar .example-tag{font-size:12px;padding:2px 7px;color:#5c705b}
.fd-bar-t{min-width:0;line-height:1.25;overflow-wrap:anywhere}
.fd-dots{display:flex;gap:4px}
.fd-dots i{height:5px;width:5px;background:#c1cbb6;border-radius:50%;display:block}
.fd-body{flex:1;display:flex;flex-direction:column;gap:8px;padding:12px}
.fd-lbl{display:block;font-size:12px;font-weight:650;letter-spacing:.06em;text-transform:uppercase;color:#5c6c58}
.fd-lbl-p{color:#675483}
.fd-box{position:relative;padding:9px 11px;border-radius:10px;border:1px solid var(--fd-tool-line);background:var(--fd-tool-soft);color:var(--fd-tool-ink)}
.fd-box-p{background:var(--fd-plum-soft);border-color:var(--fd-plum-line);color:var(--fd-plum-ink)}
.fd-pill{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;font-size:12px;font-weight:620;border:1px solid;white-space:nowrap;line-height:1.5}
.fd-pill .fd-ic{width:12px;height:12px}
.fd-pill-p{background:var(--lavender);border-color:#d5c9e6;color:var(--plum)}
.fd-pill-t{background:var(--lime);border-color:#b9cfa3;color:#3f5a34}
.fd-mark{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:650;white-space:nowrap}
.fd-mark .fd-ic{width:13px;height:13px}
.fd-mark-p{color:var(--plum)}
.fd-mark-t{color:var(--fd-tool-strong)}
.fd-round{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;flex-shrink:0}
.fd-round-t{background:#e6edda;color:#688649}
.fd-round-p{background:#e3dcef;color:var(--plum)}

/* Motor de pasos: --k es 1 cuando el elemento está activo (paso ≥ --at y < --until) y 0 si aún no. */
.fd-card{--s:99}
.fd-a{--at:0;--until:999;--k:min(clamp(0,calc(var(--s) - var(--at) + 1),1),clamp(0,calc(var(--until) - var(--s)),1));opacity:var(--k);transform:translateY(calc((1 - var(--k)) * 8px));transition:opacity .45s var(--ease),transform .6s var(--ease)}
.fd-dim{opacity:calc(.32 + .68 * var(--k));transform:none}
.fd-fromx{transform:translateX(calc((1 - var(--k)) * 26px))}
.fd-fromleft{transform:translateX(calc((1 - var(--k)) * -16px))}
.fd-static{transform:none}
.fd-snap *,.fd-snap{transition:none!important}
.fd-freeze .fd-card,.fd-freeze .fd-card *,.fd-reduced .fd-card,.fd-reduced .fd-card *{transition:none!important;animation:none!important}
@media (prefers-reduced-motion:reduce){.fd-card,.fd-card *{transition:none!important;animation:none!important}}

/* Pie de la escena: subtítulo vivo + control */
.fd-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.fd-cap{position:relative;flex:1;min-height:42px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.fd-cap span{position:absolute;inset:0;transform:none;transition:opacity .35s ease}
.fd-cap span.fd-cap-on{position:relative}
.fd-cap b{font-weight:640;color:var(--ink)}
.fd-ctl{display:none;flex-direction:column;align-items:flex-end;gap:6px;flex-shrink:0}
.js .fd-ctl{display:flex}
.fd-reduced .fd-ctl{display:none}
.fd-note{display:none;font-size:12px;color:var(--muted);max-width:200px;text-align:right}
.fd-reduced .fd-note{display:block}
.fd-btn{display:inline-flex;align-items:center;gap:9px;min-height:44px;min-width:44px;padding:9px 14px 9px 12px;border:1px solid #b8c7ae;border-radius:8px;font-size:13px;font-weight:650;color:var(--forest);background:var(--white);transition:transform .22s var(--ease),background-color .2s ease}
.fd-btn:hover{background:#f1f4e8}
.fd-section :is(button,[tabindex]):focus-visible{outline:3px solid #9470ac;outline-offset:5px}
.fd-btn:active{transform:scale(.985)}
.fd-btn .fd-ic{width:15px;height:15px}
.fd-prog{width:100%;height:2px;background:#e6ebdc;border-radius:2px;overflow:hidden}
.fd-prog i{display:block;height:100%;width:100%;background:#718c53;transform:scaleX(1);transform-origin:left}

/* ===== Escena 1 · Conocimiento ===== */
.fd-s1-in{display:flex;gap:10px;align-items:flex-start}
.fd-s1-in>.fd-ic{width:18px;height:18px;margin-top:2px;color:var(--plum)}
.fd-s1-in>div{flex:1;min-width:0}
.fd-typed{margin-top:3px;min-height:34px;font-size:12px;line-height:1.45;color:#4e4362}
.fd-word{display:inline;transform:none;transition:opacity .22s linear;transition-delay:calc(var(--i) * .09s)}
.fd-card[data-state="playing"] .fd-word{will-change:opacity}
.fd-s1-lblrow{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:16px}
.fd-boxh{display:flex;align-items:center;gap:7px;font-weight:640;min-height:22px;flex-wrap:wrap}
.fd-boxh .fd-pill{margin-left:auto}
.fd-res{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.fd-res li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:5px 9px;border-radius:7px;background:var(--white);border:1px solid #e3e9d9;font-size:12px;color:#3f5341}
.fd-res li span{flex:1;min-width:0}
.fd-fit{font-size:12px;font-weight:650;padding:1px 7px;border-radius:999px;background:var(--lime);color:#3f5a34;transform:none}
.fd-fit.fd-no{background:#f4f5ef;color:#4f6357;border:1px dashed #8c9784}
.fd-s1-no{border-style:dashed;border-color:#b3bda9}   /* «Fuera»: se marca con borde discontinuo, no con opacidad (el texto conserva su contraste) */
.fd-s1-mem{display:grid;grid-template-columns:1fr;gap:0}
.fd-note-card{position:relative;padding:8px 11px 9px;border-radius:10px;border:1px solid var(--fd-plum-line);background:var(--white);color:var(--fd-plum-ink)}
.fd-note-card q{display:block;font-family:Georgia,"Times New Roman",serif;font-size:12.5px;line-height:1.4;color:#3f3552;margin-top:2px;quotes:"«" "»"}
.fd-note-card .fd-mark{position:absolute;right:10px;top:8px}
.fd-conn{width:2px;height:12px;margin:0 auto;background:#b9a6d3;transform-origin:top;transform:scaleY(var(--k));transition:transform .4s var(--ease)}
.fd-db{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.fd-db>.fd-ic{width:18px;height:18px}
.fd-db b{font-weight:650;font-size:12px}
.fd-stack{display:inline-flex;gap:3px;align-items:flex-end;height:12px}
.fd-stack i{display:block;width:5px;height:12px;border-radius:2px;background:#b9a6d3;transform-origin:bottom;transition-delay:.35s}
.fd-stack i.fd-old{opacity:.55}
.fd-db .fd-pill{margin-left:auto}

/* ===== Escena 2 · Preparación ===== */
.fd-s2{display:grid;grid-template-columns:minmax(0,1.22fr) 88px minmax(0,1fr);gap:10px;align-items:stretch}
.fd-pieces{display:flex;flex-direction:column;gap:5px;margin-top:5px}
.fd-piece{position:relative;display:flex;align-items:center;gap:7px;padding:5px 24px 5px 8px;border-radius:8px;border:1px solid var(--fd-tool-line);background:var(--fd-tool-soft);color:var(--fd-tool-ink);font-size:12px;font-weight:600;line-height:1.3;--k:clamp(0,calc(var(--s) - var(--at) + 1),1)}
.fd-piece>.fd-pl{flex:1;min-width:0}
.fd-piece>.fd-mark{position:absolute;right:7px;top:50%;transform:translateY(-50%);transition-delay:.55s}
.fd-piece .fd-mark .fd-ic{width:12px;height:12px}
.fd-piece-p{border-color:var(--fd-plum-line);background:var(--fd-plum-soft);color:var(--fd-plum-ink)}
.fd-ghost{position:absolute;inset:-1px;z-index:3;display:flex;align-items:center;gap:7px;padding:5px 8px;border-radius:8px;border:1px solid var(--fd-tool-line);background:var(--fd-tool-soft);font-style:normal;pointer-events:none;transform:translate(calc(var(--dx,0px) * var(--k)),calc(var(--dy,0px) * var(--k))) scale(calc(1 - .58 * var(--k)));opacity:calc(1 - var(--k));transition:transform .75s var(--ease),opacity .28s ease .5s}
.fd-piece-p .fd-ghost{border-color:var(--fd-plum-line);background:var(--fd-plum-soft)}
.fd-s2-lbl2{margin-top:10px}
.fd-s2-mid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.fd-folder{width:88px;padding:9px 8px 8px;border-radius:12px;border:1px solid #c4d0b6;background:var(--sage);color:var(--fd-tool-ink);text-align:center;display:flex;flex-direction:column;align-items:center;gap:5px}
.fd-folder>.fd-ic{width:22px;height:22px;color:var(--forest);stroke-width:1.3}
.fd-folder b{font-size:12px;font-weight:650;white-space:nowrap}
.fd-folder .fd-stack{height:14px}
.fd-folder .fd-stack i{width:9px;height:14px;background:#9cb879;transition-delay:.45s}
.fd-folder .fd-stack i.fd-ctxbar{background:#b9a6d3}
.fd-folder .fd-pill{margin-top:2px}
.fd-s2-arrow{width:20px;height:20px;color:#7e9966;transform:translateX(calc((1 - var(--k)) * -8px))}
.fd-s2-plan{display:grid;grid-template-rows:auto 1fr}
.fd-plan-h{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px;flex-wrap:wrap}
.fd-plan-slot{display:grid;margin-top:5px}
.fd-plan-slot>*{grid-area:1/1}
.fd-phases{display:flex;flex-direction:column;gap:5px}
.fd-phases li{display:flex;gap:8px;align-items:flex-start;padding:5px 8px;border-radius:8px;background:var(--white);border:1px solid #e3e9d9}
.fd-phases b{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#e8eddd;font-size:12px;font-weight:650;color:#4d653e;flex-shrink:0;font-variant-numeric:tabular-nums}
.fd-phases strong{display:block;font-size:12px;font-weight:650;color:var(--ink)}
.fd-phases span{display:block;font-size:12px;color:#586c4f;line-height:1.35}
.fd-plan-empty{align-self:center;padding:14px 12px;border:1px dashed #b3bda9;border-radius:10px;font-size:12px;color:#55685a;text-align:center}

/* ===== Escena 3 · Coordinación ===== */
.fd-s3{display:grid;grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr);gap:6px;align-items:stretch;flex:1}
.fd-s3-col{display:flex;flex-direction:column;gap:6px;padding:9px 9px 10px;border-radius:10px;border:1px solid}
.fd-s3-per{background:var(--fd-plum-soft);border-color:var(--fd-plum-line);color:var(--fd-plum-ink)}
.fd-s3-ag{background:var(--fd-tool-soft);border-color:var(--fd-tool-line);color:var(--fd-tool-ink)}
.fd-colh{display:flex;flex-direction:column;align-items:flex-start;gap:4px;line-height:1.2}
.fd-colt{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:650}
.fd-colt .fd-ic{width:15px;height:15px}
.fd-who{font-size:12px;font-weight:650;letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;border-radius:4px;border:1px solid currentColor}
.fd-task{position:relative;padding:7px 8px;border-radius:8px;background:var(--white);border:1px solid #e3e9d9;color:var(--ink)}
.fd-task b{display:block;font-size:12px;font-weight:650;line-height:1.3}
.fd-task>span{display:block;font-size:12px;color:#6b775f;margin-top:2px;line-height:1.3}
.fd-task-p{border-color:#dcd2e9}
.fd-task-p>span{color:#7c6b95}
.fd-opts{display:flex;flex-direction:column;gap:4px;margin-top:6px}
.fd-opt{position:relative;isolation:isolate;display:flex;align-items:center;gap:6px;padding:5px 8px;border-radius:7px;border:1px solid #d9cfe8;background:#f7f4fb;font-size:12px;font-weight:600;color:var(--fd-plum-ink);line-height:1.25}
.fd-opt-a::before{content:"";position:absolute;inset:-1px;z-index:-1;border-radius:7px;border:1.5px solid var(--plum);background:#e6dcf3;opacity:clamp(0,calc(var(--s) - 1),1);transition:opacity .3s ease}
.fd-opt .fd-mark{margin-left:auto}
.fd-cursor{position:absolute;right:14px;bottom:4px;width:15px;height:15px;color:#3f3552;z-index:2;fill:#fffefa;--k1:clamp(0,var(--s),1);--k2:clamp(0,calc(var(--s) - 1),1);--k3:clamp(0,calc(var(--s) - 2),1);opacity:calc(var(--k1) * (1 - var(--k3)));transform:translate(calc((1 - var(--k1)) * 54px),calc((1 - var(--k1)) * 34px)) scale(calc(1 - .2 * var(--k2)));transition:transform .55s var(--ease),opacity .3s ease}
.fd-dec{display:flex;gap:5px;align-items:flex-start;margin-top:7px;font-size:12px;line-height:1.35;color:var(--plum)}
.fd-dec .fd-ic{width:13px;height:13px;margin-top:1px}
.fd-s3-link{display:grid;place-items:center;color:#7e9966}
.fd-s3-link .fd-ic{width:20px;height:20px}
.fd-slot{display:grid}
.fd-slot>*{grid-area:1/1}
.fd-task-done b{color:#586c4f;font-weight:600}
.fd-task-wait{border-style:dashed;border-color:#b3bda9;background:transparent;color:#55685a;font-size:12px;display:flex;align-items:center;min-height:44px}
.fd-task-new{border-color:#b9cfa3;background:#eef5df}
.fd-task-new>span{color:#4f6d3e}
.fd-task .fd-meta{display:flex;align-items:center;justify-content:space-between;gap:4px 8px;flex-wrap:wrap}
.fd-task .fd-pill{font-size:12px;padding:0 6px}
.fd-task-later{border-style:dashed}

/* ===== Escena 4 · Automatización (sincronización del formulario de dudas → agente evaluador → evaluación del piloto) =====
   .fd-news son las respuestas nuevas que entran con la sincronización. */
.fd-s4-cal{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 8px;border-radius:10px;border:1px solid var(--fd-tool-line);background:var(--fd-tool-soft);color:var(--fd-tool-ink)}
.fd-days{display:inline-flex;gap:3px}
.fd-days i{display:grid;place-items:center;width:22px;height:22px;border-radius:6px;font-size:12px;font-weight:650;font-style:normal;color:#55685a;background:var(--white);border:1px solid #d3dcc7}
.fd-days i.fd-today{background:var(--lime);border-color:#b9cfa3;color:#3f5a34}
.fd-s4-cal>span{font-size:12px;font-weight:640}
.fd-s4-cal .fd-ic{width:15px;height:15px;margin-left:auto}
.fd-flow{display:flex;flex-direction:column;gap:4px;position:relative}
.fd-flow li{display:flex;align-items:center;gap:9px;padding:5px 9px;border-radius:8px;background:var(--fd-tool-soft);border:1px solid #e3e9d9;min-height:38px}
.fd-flow .fd-round{--k:clamp(0,calc(var(--s) - var(--at) + 1),1);position:relative;isolation:isolate;background:#e6edda;color:#688649}
.fd-flow .fd-round::before{content:"";position:absolute;inset:0;border-radius:50%;background:var(--fd-tool-strong);z-index:-1;opacity:var(--k);transition:opacity .35s ease}
.fd-flow .fd-round .fd-ic{color:#fffefa;opacity:var(--k);transition:opacity .35s ease}
.fd-flow .fd-round .fd-ic-idle{position:absolute;opacity:calc(1 - var(--k));color:#688649}
.fd-flow li>div{flex:1;min-width:0}
.fd-flow b{display:block;font-size:12px;font-weight:650;color:var(--ink);line-height:1.3}
.fd-flow li>div>span{display:block;font-size:12px;color:#586c4f;line-height:1.3}
.fd-news{display:inline-flex;gap:3px;margin-left:4px;vertical-align:middle}
.fd-news i{display:block;width:7px;height:7px;border-radius:50%;background:#9cb879;transform:scale(var(--k));transition:transform .3s var(--ease);transition-delay:calc(var(--i) * .18s)}
.fd-flow .fd-pill{flex-shrink:0}
.fd-flow .fd-chks{display:flex;gap:5px;flex-wrap:wrap;margin-top:4px}
.fd-chk{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:640;color:#55685a;padding:1px 6px;border-radius:999px;border:1px solid #c5cfb8;background:var(--white);position:relative;isolation:isolate;transform:none}
.fd-chk::before{content:"";position:absolute;inset:-1px;border-radius:999px;background:var(--lime);border:1px solid #b9cfa3;z-index:-1;opacity:var(--k);transition:opacity .3s ease}
.fd-chk .fd-ic{width:11px;height:11px;color:#3f5a34;opacity:var(--k);transition:opacity .3s ease}
.fd-chk-2{transition-delay:.35s}
.fd-chk-2::before,.fd-chk-2 .fd-ic{transition-delay:.35s}
.fd-deliv{border-color:#d7dfc9!important;background:var(--white)!important;align-items:flex-start!important}
.fd-deliv .fd-docsym{color:#4d653e;display:grid;place-items:center;width:26px;height:32px;background:#eef1e4;border:1px solid #dce4cf;border-radius:3px;flex-shrink:0}
.fd-deliv q{display:block;font-family:Georgia,"Times New Roman",serif;font-size:12px;line-height:1.4;color:#3f5341;quotes:"«" "»";margin-top:1px}
.fd-deliv .fd-seal{border:1px solid #b5cba1;background:#dfedcc;color:#5a7744;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;flex-shrink:0}
.fd-s4-back{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:10px;border:1px solid var(--fd-plum-line);background:var(--fd-plum-soft);color:var(--fd-plum-ink);font-size:12px;font-weight:600;line-height:1.3}
.fd-s4-back .fd-round{flex-shrink:0}

/* ===== Franja «Cómo se relacionan» (A) ===== */
.fd-rel{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 36px;align-items:start;margin-top:28px;padding:22px 28px;background:var(--white);border:1px solid var(--line);border-radius:16px}
.fd-rel-h{font-size:12px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;color:var(--green);padding-top:3px;white-space:nowrap}
.fd-rel-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 28px}
.fd-rel-list li{display:flex;gap:10px;align-items:flex-start;font-size:14px;line-height:1.5;color:#3c5044;min-width:0}
.fd-rel-list .icon{width:19px;height:19px;margin-top:2px}
.fd-rel-p .icon{color:var(--plum)}
.fd-rel-t .icon{color:#557647}
.fd-rel-list b{font-weight:650;color:var(--forest)}

/* Responsivo */
@media (max-width:1100px){
  .fd-head{grid-template-columns:1fr}
  .fd-lead{max-width:620px}
  .fd-rel{grid-template-columns:1fr;gap:12px}
}
/* Con las tarjetas de dos en dos (881–1239 px) la escena 2 no cabe en tres columnas: se apila como en móvil */
@media (min-width:881px) and (max-width:1239px){
  .fd-s2{grid-template-columns:1fr;gap:8px}
  .fd-pieces{flex-direction:row;flex-wrap:wrap}
  .fd-piece{flex:1 1 46%}
  .fd-s2-lbl2{margin-top:6px}
  .fd-s2-mid{padding:4px 0;gap:6px}
  .fd-folder{width:auto;flex-direction:row;padding:7px 12px;gap:8px}
  .fd-folder .fd-pill{margin-top:0}
  .fd-s2-arrow{transform:rotate(90deg) translateX(calc((1 - var(--k)) * -8px))}
}
@media (max-width:880px){
  .fd-grid{grid-template-columns:1fr;gap:22px}
  .fd-rel-list{grid-template-columns:1fr}
}
@media (max-width:640px){
  .fd-section{padding-block:64px 72px}
  .fd-head h2{font-size:clamp(32px,9.5vw,44px)}
  .fd-lead p{font-size:16px}
  .fd-lead .fd-lead-ex{font-size:14px}
  .fd-grid{margin-top:36px}
  .fd-card{padding:22px 18px 22px;gap:16px}
  .fd-card h3{font-size:22px}
  .fd-stage{margin-inline:-18px;padding:12px 0;border-radius:0}
  .fd-window{border-radius:0;border-left:0;border-right:0;min-height:0}
  .fd-body{padding:10px}
  .fd-bar-app{display:none}
  .fd-foot{flex-direction:column;align-items:stretch}
  .fd-ctl{align-items:stretch}
  .fd-btn{justify-content:center}
  .fd-note{max-width:none;text-align:left}
  .fd-cap{min-height:62px}
  .fd-cap span{position:static;display:none}
  .fd-cap span.fd-cap-on{display:block}
  .fd-s2{grid-template-columns:1fr;gap:8px}
  .fd-pieces{flex-direction:row;flex-wrap:wrap}
  .fd-piece{flex:1 1 46%}
  .fd-s2-lbl2{margin-top:6px}
  .fd-s2-mid{padding:4px 0;gap:6px}
  .fd-folder{width:auto;flex-direction:row;padding:7px 12px;gap:8px}
  .fd-folder .fd-pill{margin-top:0}
  .fd-s2-arrow{transform:rotate(90deg) translateX(calc((1 - var(--k)) * -8px))}
  .fd-s3{grid-template-columns:1fr;grid-template-rows:auto 24px auto}
  .fd-s4-cal>span:not(.fd-days){flex-basis:100%;order:3}
  .fd-s3-link .fd-ic{transform:rotate(90deg)}
  .fd-rel{margin-top:22px;padding:18px 18px 20px;border-radius:14px}
  .fd-rel-list li{font-size:13.5px}
}
@media (max-width:360px){
  .fd-card{padding:20px 16px}
  .fd-bar-t{white-space:normal;line-height:1.25}
  .fd-stage{margin-inline:-16px}
  .fd-piece{flex-basis:100%}
  .fd-flow li:first-child{flex-wrap:wrap}
  .fd-flow li:first-child>div{flex-basis:calc(100% - 35px)}
  .fd-flow li:first-child .fd-pill{margin-left:35px}
  .fd-rel{padding-inline:16px}
}