/* =====================================================================
   SOMAR · Workforce Capability Intelligence — scroll storytelling
   Reutiliza tokens de style.css (Strata). Sólo CSS + SVG, sin librerías.
   ===================================================================== */
:root{
  /* --- duraciones y ritmo (editar aquí) --- */
  --wf-step-h: 62vh;          /* alto de cada etapa narrativa en desktop */
  --wf-move: .95s;            /* desplazamiento de nodos / red */
  --wf-fade: .55s;            /* aparición de elementos */
  --wf-draw: 1.1s;            /* dibujo de líneas */
  --wf-ease: cubic-bezier(.22,.8,.24,1);
  /* --- estados con significado --- */
  --wf-ok:#3BB98A; --wf-warn:#F2A541; --wf-risk:#E2574C;
  --wf-panel:rgba(13,25,44,.92); --wf-line:rgba(200,212,224,.14);
}

/* ---------- contenedor de la historia ---------- */
.wf-story{background:radial-gradient(1100px 600px at 85% 0%,rgba(44,95,158,.28),transparent 60%),var(--dark);color:#fff;padding:0 0 clamp(80px,9vw,120px)}
.wf-intro{padding:calc(var(--nav-h) + clamp(56px,8vw,110px)) 0 clamp(40px,6vw,72px);max-width:980px;margin-left:max(20px,calc((100% - 1200px)/2))}
.wf-badge{display:inline-flex;align-items:center;gap:10px;font-family:var(--ff-m);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--ice);border:1px solid rgba(127,196,232,.3);border-radius:999px;padding:7px 14px;margin:0 0 26px}
.wf-badge .dot{width:7px;height:7px;border-radius:50%;background:var(--ice);box-shadow:0 0 0 4px rgba(127,196,232,.15)}
.wf-intro h1{font-family:var(--ff-h);font-weight:700;font-size:clamp(40px,6vw,80px);line-height:.98;letter-spacing:-.015em;margin:0 0 24px;text-wrap:balance}
.wf-sub{font-size:clamp(17px,1.5vw,20px);color:var(--silver);max-width:720px;margin:0 0 34px}
.wf-arc{list-style:none;padding:0;margin:44px 0 0;display:flex;flex-wrap:wrap;gap:8px 6px;font-family:var(--ff-m);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.wf-arc li{display:flex;align-items:center;gap:6px}
.wf-arc li+li::before{content:'→';color:rgba(127,196,232,.5)}
.wf-arc li:last-child{color:var(--ice)}
.wf-skip{display:inline-block;margin-top:22px;font-size:13px;color:var(--slate)}
.wf-skip:hover{color:var(--ice)}

/* ---------- pasos narrativos ---------- */
.wf-steps{position:relative}
.wf-step{padding:48px 0;border-top:1px solid var(--wf-line)}
.wf-num{display:flex;align-items:center;gap:12px;font-family:var(--ff-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--slate);margin:0 0 14px}
.wf-num b{color:var(--ice);font-weight:500;border:1px solid rgba(127,196,232,.4);border-radius:4px;padding:2px 7px}
.wf-step h2{font-family:var(--ff-h);font-weight:700;font-size:clamp(28px,2.9vw,40px);line-height:1.04;margin:0 0 18px;color:#fff;text-wrap:balance}
.wf-step p{font-size:16.5px;color:var(--silver);margin:0 0 12px;max-width:520px}
.wf-step .wf-em{color:#fff;font-weight:500}
.wf-step .wf-list{color:rgba(240,244,248,.92)}
.wf-step .wf-note{color:var(--ice);border-left:2px solid var(--ice);padding-left:14px;margin-top:20px}
.wf-quote q{color:#fff;font-weight:500;quotes:'«' '»'}
.wf-stack-lines{font-family:var(--ff-h);font-size:22px!important;line-height:1.2;color:#fff!important;margin-top:18px!important}
.wf-rel{list-style:none;padding:0;margin:10px 0 0;display:grid;gap:6px}
.wf-rel li{position:relative;padding-left:22px;color:#fff;font-size:16.5px}
.wf-rel li::before{content:'';position:absolute;left:0;top:11px;width:12px;height:1px;background:var(--ice)}

/* ---------- visual sticky ---------- */
.wf-visual{display:none}
.wf-hud{display:flex;align-items:center;justify-content:space-between;gap:16px;height:44px}
.wf-hud-label{margin:0;display:flex;align-items:baseline;gap:8px;font-family:var(--ff-m);font-size:12px;color:var(--slate)}
.wf-hud-label b{font-family:var(--ff-h);font-size:22px;color:#fff;font-weight:700}
.wf-hud-label em{font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--ice);font-size:10.5px;margin-left:8px}
.wf-ticks{list-style:none;margin:0;padding:0;display:flex;gap:4px;align-items:center}
.wf-ticks a{display:block;width:14px;height:4px;border-radius:2px;background:rgba(255,255,255,.16);transition:width .3s,background .3s}
.wf-ticks li.done a{background:rgba(74,144,196,.75)}
.wf-ticks li.cur a{width:28px;background:var(--ice)}
.wf-ticks a:hover{background:rgba(127,196,232,.8)}
.wf-ticks a:focus-visible{outline:2px solid var(--ice);outline-offset:4px}
.wf-stage{position:relative;flex:1;min-height:0;border-radius:16px;border:1px solid var(--wf-line);overflow:hidden;
  background:radial-gradient(520px 420px at 50% 42%,rgba(44,95,158,.22),transparent 70%),
             linear-gradient(rgba(127,196,232,.05) 1px,transparent 1px) 0 0/40px 40px,
             linear-gradient(90deg,rgba(127,196,232,.05) 1px,transparent 1px) 0 0/40px 40px,#0C182A}
.wf-svg{position:absolute;inset:0;width:100%;height:100%}
.wf-caption{position:absolute;left:0;right:0;bottom:20px;margin:0;text-align:center;font-family:var(--ff-h);font-size:clamp(18px,1.6vw,22px);font-weight:600;color:#fff;pointer-events:none}
.wf-caption span{display:inline-block;opacity:0;transform:translateY(8px);animation:wfIn var(--wf-fade) var(--wf-ease) forwards;animation-delay:var(--d,0s);margin:0 6px}
.wf-caption span+span{color:var(--ice)}
@keyframes wfIn{to{opacity:1;transform:none}}

/* ===== modo desktop ===== */
.wf-desk .wf-grid{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);gap:clamp(32px,4vw,64px);align-items:start}
.wf-desk .wf-steps{padding:6vh 0 4vh}
.wf-desk .wf-step{min-height:var(--wf-step-h);display:flex;flex-direction:column;justify-content:center;border-top:0;padding:24px 0;opacity:.26;transition:opacity .5s ease}
.wf-desk .wf-step.is-active{opacity:1}
.wf-desk .wf-step-long{min-height:calc(var(--wf-step-h) * 1.9);justify-content:flex-start;padding-top:calc(var(--wf-step-h) * .38)}
.wf-desk .wf-visual{display:flex;flex-direction:column;position:sticky;top:calc(var(--nav-h) + 10px);height:calc(100vh - var(--nav-h) - 22px);max-height:900px}
.wf-desk .wf-mini,.wf-desk .wf-slot{display:none}

/* ===== red SVG compartida ===== */
.wf-svg text{font-family:var(--ff-m);font-size:10px;letter-spacing:.06em;fill:#DCE6F0}
.wf-world{transform-origin:320px 400px;transition:transform var(--wf-move) var(--wf-ease)}
[data-net="lift"] .wf-world{transform:translate(0px,-60px) scale(.86)}
[data-net="compact"] .wf-world{transform:translate(0px,-236px) scale(.48)}
[data-net="half"] .wf-world{transform:translate(0px,-236px) scale(.48)}
@media (min-height:840px){[data-net="half"] .wf-world{transform:translate(0px,-150px) scale(.62)}}

/* fuentes de datos */
.wf-src{transform-origin:0 0;transition:transform var(--wf-move) var(--wf-ease),opacity var(--wf-fade) ease}
.wf-src .pill{fill:#101D31;stroke:rgba(200,212,224,.32);stroke-width:1;transition:stroke .4s,fill .4s}
.wf-src .ic{fill:rgba(74,144,196,.18)}
.wf-src .ico{fill:none;stroke:var(--ice);stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round}
.wf-src text{transition:opacity .4s}
.dim-src .wf-src:not(.hl){opacity:.32}
[data-stage="7"] .wf-src{opacity:.13!important}
[data-net="compact"] .wf-src:not(.hl) text,[data-net="half"] .wf-src:not(.hl) text{opacity:0}
[data-net="compact"] .wf-src:not(.hl),[data-net="half"] .wf-src:not(.hl){opacity:.22}
.wf-src.hl .pill{stroke:var(--ice);stroke-width:2.5;fill:#16304f}
.wf-src.hl[data-tone="warn"] .pill{stroke:var(--wf-warn);fill:#3a2b14}
.wf-src.hl[data-tone="risk"] .pill{stroke:var(--wf-risk);fill:#3a1a18}
.wf-src.gone{opacity:0}
.wf-story.is-live [data-stage="1"] .wf-src .in{animation:wfFloat 5.5s ease-in-out infinite alternate;animation-delay:var(--fd,0s)}
@keyframes wfFloat{from{transform:translate(0,-4px)}to{transform:translate(0,4px)}}

/* líneas (line-draw con pathLength=1) */
.wf-ln{fill:none;stroke:rgba(127,196,232,.42);stroke-width:1.1;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset var(--wf-draw) var(--wf-ease) var(--d,0s),opacity .4s}
.ln-cc{stroke:rgba(127,196,232,.7);stroke-width:1.3}
.ln-corel{stroke:rgba(127,196,232,.22)}
.ln-dec{stroke:rgba(127,196,232,.6);marker-end:url(#wfArrow);opacity:0}
.show-dec .ln-dec{opacity:1}
.ln-pil{stroke:rgba(127,196,232,.5)}
.show-sc .ln-sc,.show-cc .ln-cc,.show-corel .ln-corel,.show-dec .ln-dec,.show-pil .ln-pil{stroke-dashoffset:0}
.wf-stage:not(.show-sc) .ln-sc,.wf-stage:not(.show-cc) .ln-cc,.wf-stage:not(.show-corel) .ln-corel,.wf-stage:not(.show-dec) .ln-dec,.wf-stage:not(.show-pil) .ln-pil{transition-delay:0s;transition-duration:.45s}

/* elementos radiales: conceptos, atributos, decisiones, pilares */
.wf-rad{transform-origin:0 0;opacity:0;transition:transform var(--wf-move) var(--wf-ease),opacity var(--wf-fade) ease}
.show-concepts .wf-cpt,.show-attrs .wf-attr,.show-decisions .wf-dec,.show-pillars .wf-pil{opacity:1}
.wf-cpt circle{fill:var(--sky);stroke:#0C182A;stroke-width:3}
.wf-cpt text{font-family:var(--ff-h);font-size:13px;font-weight:700;letter-spacing:.12em;fill:#fff}
.wf-attr circle{fill:var(--ice)}
.wf-attr text{fill:var(--silver);font-size:11px}
.wf-dec .pill{fill:#14294a;stroke:var(--sky);stroke-width:1.2}
.wf-dec text,.wf-pil text{fill:#fff;font-size:10px}
.wf-pil .pill{fill:#0F223B;stroke:var(--ice);stroke-width:1.2}

/* anillos persona */
.wf-rings circle{fill:none;opacity:0;transform:scale(.6);transform-origin:0 0;transition:transform var(--wf-move) var(--wf-ease),opacity var(--wf-fade),stroke .4s}
.wf-rings .ring-p{stroke:var(--ice);stroke-width:2}
.wf-rings .ring-r{stroke:var(--sky);stroke-width:2;stroke-dasharray:7 5}
.wf-rings .ring-a{stroke:#fff;stroke-width:2;stroke-dasharray:1.5 5;stroke-linecap:round}
.show-rings .wf-rings circle{opacity:.9;transform:scale(1)}
.show-rings .wf-rings .ring-r{transition-delay:.15s}.show-rings .wf-rings .ring-a{transition-delay:.3s}
[data-stage="4"] .wf-rings .ring-p{stroke:var(--wf-ok)}
[data-stage="4"] .wf-rings .ring-r{stroke:var(--wf-warn)}
[data-stage="4"] .wf-rings .ring-a{stroke:var(--wf-risk)}

/* núcleo: vacío, persona, equipo, hub, SOMAR */
.wf-cv{opacity:0;transform:scale(.6);transform-origin:0 0;transition:transform var(--wf-move) var(--wf-ease),opacity var(--wf-fade) ease}
.wf-cv.on{opacity:1;transform:scale(1)}
.v-somar.on{transition-delay:.45s}
.wf-cv .fill{fill:#13243D}
.wf-cv .st-ice{fill:none;stroke:var(--ice);stroke-width:1.5}
.wf-cv .st-w{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round}
.wf-cv .dash{fill:none;stroke:rgba(127,196,232,.6);stroke-width:1.3;stroke-dasharray:4 4}
.wf-cv .q{font-family:var(--ff-h);font-size:24px;font-weight:700;fill:var(--slate);text-anchor:middle}
.wf-cv .hub-t{font-family:var(--ff-h);font-size:15px;font-weight:700;letter-spacing:.08em;fill:#fff;text-anchor:middle}
.wf-cv .pp{transition:opacity .6s,transform .8s var(--wf-ease)}
.wf-cv .pp.hot .st-w{stroke:var(--wf-warn)}
.wf-cv .pp.out{opacity:0;transform:translate(26px,0)}
.v-somar .box{fill:#0F1C30;stroke:var(--ice);stroke-width:1.4}
.v-somar .sb1{fill:#fff}.v-somar .sb2{fill:var(--sky)}.v-somar .sb3{fill:var(--silver)}
.v-somar .sep{stroke:rgba(255,255,255,.4)}
.v-somar .t1{font-family:var(--ff-h);font-size:34px;font-weight:700;letter-spacing:.18em;fill:#fff}
.v-somar .t2{font-size:8px;letter-spacing:.16em;fill:var(--ice)}
.wf-stage.alert .v-group .dash{stroke:var(--wf-warn)}

/* ===== paneles de datos ===== */
.wf-panel{position:relative;color:#fff;font-size:13px;line-height:1.4;opacity:0;transform:translateY(14px);transition:opacity var(--wf-fade) ease,transform var(--wf-fade) var(--wf-ease);background:var(--wf-panel);border:1px solid var(--wf-line);border-radius:14px;padding:18px 20px;display:flex;flex-direction:column;gap:12px;pointer-events:none}
.wf-panel.on{opacity:1;transform:none;pointer-events:auto}
.wf-desk .wf-stage .wf-panel{position:absolute;left:16px;right:16px;top:auto;bottom:16px;max-height:calc(64% - 16px);overflow:hidden;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.wf-desk .wf-stage .wf-strip{top:auto}
.wf-desk .wf-stage .wf-p14{max-height:calc(67% - 16px)}
.wf-ph{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--ff-m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.wf-legend{display:flex;gap:14px;flex-wrap:wrap}
.wf-legend>span{display:inline-flex;align-items:center;gap:6px}
.lg{display:inline-block;width:14px;height:8px;border-radius:2px}
.lg-cap{background:linear-gradient(90deg,var(--sky),var(--ice))}
.lg-req{width:3px;height:12px;background:#fff}
.lg-avail{border:1px solid rgba(127,196,232,.7);background:rgba(127,196,232,.12)}
.lg-used{background:var(--ice)}
.lg-dem{height:3px;background:#fff}
.lg-capf{height:3px;background:var(--ice)}
.wf-tags{display:flex;gap:6px}
.wf-tags span{border:1px solid rgba(242,165,65,.6);color:var(--wf-warn);border-radius:4px;padding:2px 6px}

/* chips de estado (texto + ícono, no sólo color) */
.st{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--wf-line);border-radius:8px;padding:7px 11px;background:rgba(255,255,255,.03);transition:border-color .4s,background .4s,color .4s}
.st i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-style:normal;font-size:11px;font-weight:700;color:#0C182A;background:var(--slate);flex-shrink:0}
.st small{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.st b{font-family:var(--ff-h);font-size:16px;font-weight:700}
.st-ok{border-color:rgba(59,185,138,.5)}.st-ok i{background:var(--wf-ok)}.st-ok b{color:#7fe0b9}
.st-warn{border-color:rgba(242,165,65,.55)}.st-warn i{background:var(--wf-warn)}.st-warn b{color:#ffcf8a}
.st-risk{border-color:rgba(226,87,76,.6)}.st-risk i{background:var(--wf-risk);color:#fff}.st-risk b{color:#ff9b91}
.st-q{border-color:rgba(242,165,65,.55)}.st-q i{background:var(--wf-warn)}
.st-rev{border-color:rgba(127,196,232,.5)}.st-rev b{color:var(--ice)}

/* 03 · tres conceptos */
.wf-strip{flex-direction:row;gap:10px;padding:12px}
.wf-concept{flex:1;display:grid;gap:4px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.04);opacity:0;transform:translateY(8px);transition:opacity .5s,transform .5s var(--wf-ease)}
.wf-concept:nth-child(2){transition-delay:.15s}.wf-concept:nth-child(3){transition-delay:.3s}
.on .wf-concept{opacity:1;transform:none}
.wf-concept b{font-family:var(--ff-h);font-size:16px;letter-spacing:.04em}
.wf-concept span{font-size:12px;color:var(--silver)}
.wf-concept .ln{display:block;width:34px;height:0;border-top:2px solid var(--ice)}
.wf-concept .ln-r{border-top:2px dashed var(--sky)}
.wf-concept .ln-a{border-top:2px dotted #fff}

/* 04 · perfil vs rol */
.wf-bullets{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.wf-bullets li{display:grid;grid-template-columns:108px 1fr 72px;align-items:center;gap:12px}
.wf-bullets .k{color:var(--silver)}
.wf-bullets .track{position:relative;height:10px;border-radius:5px;background:rgba(255,255,255,.07)}
.wf-bullets .cap{position:absolute;inset:0 auto 0 0;width:calc(var(--cap) / 5 * 100%);border-radius:5px;background:linear-gradient(90deg,var(--sky),var(--ice));transform:scaleX(0);transform-origin:left;transition:transform .8s var(--wf-ease) calc(var(--i) * 90ms + .1s)}
.wf-bullets .req{position:absolute;top:-6px;bottom:-6px;left:calc(var(--req) / 5 * 100%);width:3px;margin-left:-1.5px;border-radius:2px;background:#fff;box-shadow:0 0 0 3px rgba(12,24,42,.9);opacity:0;transition:opacity .4s calc(var(--i) * 90ms + .75s)}
.on .wf-bullets .cap{transform:scaleX(1)}
.on .wf-bullets .req{opacity:1}
.wf-bullets .v{font-family:var(--ff-m);font-size:12px;text-align:right;white-space:nowrap}
.wf-bullets .v em{font-style:normal;color:var(--slate);margin-left:8px}
.wf-results{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}
.wf-results .st{flex:1;min-width:0;flex-direction:column;align-items:flex-start;gap:2px;position:relative;padding-left:38px;opacity:0;transform:translateY(8px);transition:opacity .45s,transform .45s}
.wf-results .st i{position:absolute;left:11px;top:50%;margin-top:-9px}
.on .wf-results .st{opacity:1;transform:none}
.on .wf-results .st:nth-child(1){transition-delay:1.35s}.on .wf-results .st:nth-child(2){transition-delay:1.55s}.on .wf-results .st:nth-child(3){transition-delay:1.75s}

/* 05 · demanda vs capacidad disponible */
.wf-kpis{display:flex;align-items:flex-end;gap:22px;flex-wrap:wrap}
.wf-big small{display:block;font-family:var(--ff-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.wf-big strong{font-family:var(--ff-h);font-size:clamp(30px,3vw,42px);line-height:1;font-weight:700}
.wf-big.dim strong{color:var(--silver);font-size:clamp(22px,2vw,28px)}
.wf-kpis .st{margin-left:auto}
.wf-chart{width:100%;height:auto;display:block}
.wf-chart .ax line{stroke:rgba(200,212,224,.12);stroke-width:1}
.wf-chart .xl{font-family:var(--ff-m);font-size:9px;fill:var(--slate);text-anchor:middle;letter-spacing:.06em}
.wf-chart .dem{stroke:#fff;stroke-width:1.4;stroke-dasharray:6 5;opacity:.75}
.wf-chart .dem-t{font-family:var(--ff-m);font-size:9px;fill:#fff;letter-spacing:.1em}
.wf-chart .seg{fill:none;stroke:var(--ice);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .8s var(--wf-ease)}
.wf-chart .seg.s2{stroke:var(--wf-warn)}.wf-chart .seg.s3{stroke:var(--wf-risk)}
.wf-chart .seg.drawn{stroke-dashoffset:0}
.wf-chart .pt{fill:#0C182A;stroke:#fff;stroke-width:2;opacity:0;transition:opacity .3s .6s}
.wf-chart .pt.drawn{opacity:1}
.wf-events{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.wf-events li{display:flex;justify-content:space-between;gap:8px;padding:8px 10px;border-radius:8px;border:1px solid var(--wf-line);color:var(--slate);transition:all .4s}
.wf-events li b{font-family:var(--ff-m);font-weight:500}
.wf-events li.act{color:#fff;border-color:rgba(242,165,65,.55);background:rgba(242,165,65,.08)}
.wf-events li.act[data-ev="3"]{border-color:rgba(226,87,76,.6);background:rgba(226,87,76,.1)}

/* 06 · subutilización */
.wf-team{display:grid;gap:7px}
.wf-team .th,.wf-team .tr{display:grid;grid-template-columns:82px repeat(3,1fr);gap:12px;align-items:center}
.wf-team .th span{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.wf-team .who{color:var(--silver);font-size:12.5px}
.wf-team .mb{position:relative;height:9px;border-radius:5px;background:rgba(255,255,255,.05)}
.wf-team .mb::before{content:'';position:absolute;inset:0 auto 0 0;width:calc(var(--c) / 5 * 100%);border-radius:5px;border:1px solid rgba(127,196,232,.65);background:rgba(127,196,232,.1);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--wf-ease) calc(var(--i) * 70ms)}
.wf-team .mb i{position:absolute;inset:0 auto 0 0;width:calc(var(--u) / 5 * 100%);border-radius:5px;background:var(--ice);transform:scaleX(0);transform-origin:left;transition:transform .6s var(--wf-ease) calc(var(--i) * 70ms + .7s)}
.on .wf-team .mb::before,.on .wf-team .mb i{transform:scaleX(1)}
.wf-totals{display:grid;gap:8px;margin-top:6px;padding-top:12px;border-top:1px solid var(--wf-line)}
.wf-totals>div{display:grid;grid-template-columns:150px 1fr 44px;gap:12px;align-items:center}
.wf-totals small{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.wf-totals .bar{height:12px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.wf-totals .bar i{display:block;height:100%;width:calc(var(--w) * 100%);background:rgba(127,196,232,.35);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--wf-ease) 1.1s}
.wf-totals .bar.used i{background:var(--ice)}
.on .wf-totals .bar i{transform:scaleX(1)}
.wf-totals b{font-family:var(--ff-h);font-size:24px;text-align:right}

/* 08 · divergencia */
.wf-scale{display:flex;gap:6px}
.wf-dots{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.wf-dots li{display:grid;grid-template-columns:150px 1fr 34px;gap:12px;align-items:center}
.wf-dots .k{color:var(--silver)}
.wf-dots .track{position:relative;height:2px;background:rgba(255,255,255,.14)}
.wf-dots .track::before{content:'';position:absolute;top:-10px;bottom:-10px;left:77.5%;width:5%;background:rgba(127,196,232,.13);border-radius:3px}
.wf-dots .track i{position:absolute;top:50%;left:calc((var(--v) - 1) / 4 * 100%);width:13px;height:13px;margin:-6.5px 0 0 -6.5px;border-radius:50%;background:#fff;opacity:0;transform:scale(.3);transition:opacity .4s,transform .5s var(--wf-ease);transition-delay:calc(var(--i) * 120ms + .15s)}
.wf-dots li.off .track i{background:var(--wf-warn);box-shadow:0 0 0 5px rgba(242,165,65,.18);transition-delay:.85s}
.wf-dots li.off .k,.wf-dots li.off b{color:#ffcf8a}
.on .wf-dots .track i{opacity:1;transform:scale(1)}
.wf-dots b{font-family:var(--ff-m);font-weight:500;text-align:right}
.wf-flag{display:flex;align-items:center;gap:10px;flex-wrap:wrap;opacity:0;transition:opacity .5s 1.35s}
.wf-flag .arr{color:var(--slate)}
.on .wf-flag{opacity:1}
.wf-split{display:grid;grid-template-columns:1fr 1fr;gap:10px;opacity:0;transform:translateY(8px);transition:opacity .5s 1.8s,transform .5s 1.8s;margin-top:4px}
.on .wf-split{opacity:1;transform:none}
.wf-split>div{border:1px solid var(--wf-line);border-radius:10px;padding:10px 12px}
.wf-split .hum{border-color:rgba(127,196,232,.45);background:rgba(127,196,232,.06)}
.wf-split b{font-family:var(--ff-h);font-size:16px;letter-spacing:.06em}
.wf-split ul{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:3px;color:var(--silver);font-size:12.5px}
.wf-split li::before{content:'— ';color:var(--slate)}

/* 09 · intervenciones */
.wf-gap{display:grid;gap:10px}
.wf-gap .row{position:relative;display:grid;grid-template-columns:150px 1fr;gap:12px;align-items:center}
.wf-gap small{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.wf-gap .bar{position:relative;height:14px;border-radius:7px;background:rgba(255,255,255,.05)}
.wf-gap .bar i{position:absolute;inset:0 auto 0 0;border-radius:7px;transform:scaleX(0);transform-origin:left;transition:transform .8s var(--wf-ease)}
.wf-gap .req i{width:100%;background:rgba(255,255,255,.75)}
.wf-gap .av i{width:62%;background:var(--sky);transition-delay:.25s}
.on .wf-gap .bar i{transform:scaleX(1)}
.wf-gap .br{position:absolute;left:calc(162px + (100% - 162px) * .62);right:0;top:-6px;height:26px;border:1.5px dashed var(--wf-warn);border-radius:7px;opacity:0;transition:opacity .4s .95s}
.wf-gap .br span{position:absolute;right:8px;bottom:-19px;font-family:var(--ff-m);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--wf-warn)}
.on .wf-gap .br{opacity:1}
.wf-q{margin:6px 0 0;font-family:var(--ff-h);font-size:18px;color:#fff;opacity:0;transition:opacity .4s 1.15s}
.on .wf-q{opacity:1}
.wf-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.wf-chips li{padding:8px 13px;border-radius:999px;border:1px solid rgba(127,196,232,.45);background:rgba(127,196,232,.07);font-family:var(--ff-m);font-size:11px;letter-spacing:.08em;text-transform:uppercase;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s var(--wf-ease);transition-delay:calc(var(--i) * 110ms + 1.3s)}
.on .wf-chips li{opacity:1;transform:none}

/* 10 · concentración y resiliencia */
.wf-risk{display:grid;grid-template-columns:140px 1fr;gap:20px;align-items:center}
.wf-ring{position:relative;width:140px;height:140px}
.wf-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.wf-ring .bg{fill:none;stroke:rgba(255,255,255,.08);stroke-width:10}
.wf-ring .fg{fill:none;stroke:var(--wf-ok);stroke-width:10;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:var(--off,0);transition:stroke-dashoffset 1s var(--wf-ease),stroke .4s}
.wf-ring[data-state="risk"] .fg{stroke:var(--wf-risk)}
.wf-ring>div{position:absolute;inset:0;display:grid;place-content:center;text-align:center}
.wf-ring strong{font-family:var(--ff-h);font-size:34px;line-height:1}
.wf-ring small{font-family:var(--ff-m);font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);max-width:90px}
.wf-conc small{font-family:var(--ff-m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate)}
.wf-bar-stack{display:flex;gap:3px;height:30px;margin:8px 0 10px}
.wf-bar-stack i{flex:0 0 calc(var(--w) * 1% - 3px);display:grid;place-items:center;border-radius:5px;background:rgba(127,196,232,.2);font-style:normal;font-family:var(--ff-m);font-size:11px;overflow:hidden;transition:flex-basis .8s var(--wf-ease),opacity .6s,background .4s}
.wf-bar-stack i.hot{background:rgba(127,196,232,.45)}
.s1 .wf-bar-stack i.hot{background:rgba(242,165,65,.35);outline:1.5px solid var(--wf-warn)}
.wf-bar-stack i.gone{flex-basis:0;opacity:0}
.wf-conc .msg{margin:0;font-size:13px;color:var(--silver);max-height:0;opacity:0;overflow:hidden;transition:opacity .4s,max-height .4s}
.wf-conc .msg b{color:#fff}
.s1 .wf-conc .m1,.s2 .wf-conc .m2{opacity:1;max-height:40px}
.wf-ind{list-style:none;margin:4px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wf-ind .st{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s}
.wf-ind .st b{font-size:14px}
.s3 .wf-ind .st{opacity:1;transform:none}
.s3 .wf-ind .st:nth-child(2){transition-delay:.12s}.s3 .wf-ind .st:nth-child(3){transition-delay:.24s}.s3 .wf-ind .st:nth-child(4){transition-delay:.36s}

/* 11 · desarrollo */
.wf-dev{display:grid;grid-template-columns:.9fr 1.1fr;gap:20px;align-items:center}
.wf-chain{list-style:none;margin:0;padding:0;display:grid;gap:12px;position:relative}
.wf-chain::before{content:'';position:absolute;left:15px;top:14px;bottom:14px;width:1px;background:rgba(127,196,232,.35)}
.wf-chain li{position:relative;display:flex;align-items:center;gap:12px;font-family:var(--ff-h);font-size:17px;font-weight:600;opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .4s var(--wf-ease);transition-delay:calc(var(--i) * 160ms + .1s)}
.wf-chain li::before{content:'';width:31px;height:31px;flex-shrink:0;border-radius:50%;border:1.5px solid rgba(127,196,232,.6);background:#0C182A;box-sizing:border-box}
.wf-chain li.more::before{border-color:var(--ice);background:rgba(127,196,232,.2)}
.wf-chain li.more{color:var(--ice)}
.on .wf-chain li{opacity:1;transform:none}
.wf-dev-status{display:grid;gap:10px}
.wf-dev-status .st{flex-direction:column;align-items:flex-start;gap:2px;position:relative;padding:12px 14px 12px 44px;opacity:0;transition:opacity .45s}
.wf-dev-status .st i{position:absolute;left:14px;top:14px}
.wf-dev-status .st b{font-size:18px;color:#fff}
.wf-dev-status .st small{text-transform:none;letter-spacing:0;font-family:var(--ff);font-size:12px}
.on .wf-dev-status .st:nth-child(1){opacity:1;transition-delay:1s}
.on .wf-dev-status .st:nth-child(2){opacity:1;transition-delay:1.5s}
.wf-dev-note{margin:4px 0 0;font-size:13px;color:var(--ice);opacity:0;transition:opacity .45s 2s}
.on .wf-dev-note{opacity:1}

/* 12 · proyección */
.wf-fc .cap,.wf-fc .dem{fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.2s var(--wf-ease)}
.wf-fc .cap{stroke:var(--ice)}
.wf-fc .dem{stroke:#fff;transition-delay:.25s}
.on .wf-fc .cap,.on .wf-fc .dem{stroke-dashoffset:0}
.wf-fc .gap{fill:rgba(242,165,65,.18);stroke:rgba(242,165,65,.6);stroke-width:1;stroke-dasharray:3 3;opacity:0;transition:opacity .6s 1.3s}
.wf-fc .gap-t{font-family:var(--ff-m);font-size:9px;letter-spacing:.14em;fill:var(--wf-warn);text-anchor:middle;opacity:0;transition:opacity .5s 1.5s}
.on .wf-fc .gap,.on .wf-fc .gap-t{opacity:1}
.wf-factors li{transition-delay:calc(var(--i) * 100ms + 1.6s);font-size:10px;padding:6px 10px}

/* 14 · decisiones */
.wf-qs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px;counter-reset:q}
.wf-qs li{counter-increment:q;position:relative;padding:11px 12px 11px 40px;border:1px solid var(--wf-line);border-radius:10px;background:rgba(255,255,255,.03);font-size:13px;line-height:1.35;opacity:0;transform:translateY(10px);transition:opacity .45s,transform .45s var(--wf-ease),border-color .3s}
.wf-qs li::before{content:counter(q,decimal-leading-zero);position:absolute;left:12px;top:12px;font-family:var(--ff-m);font-size:10px;color:var(--ice)}
.wf-qs li.vis{opacity:1;transform:none}
.wf-qs li.vis:last-child{border-color:rgba(127,196,232,.5)}

/* ---------- cierre ---------- */
.wf-close{text-align:center;padding-top:clamp(40px,6vw,80px)}
.wf-close h2{font-family:var(--ff-h);font-weight:700;font-size:clamp(34px,5vw,64px);line-height:1.02;margin:0 0 18px}
.wf-close h2 span{background:linear-gradient(90deg,#fff,var(--ice));-webkit-background-clip:text;background-clip:text;color:transparent}
.wf-close-sub{font-size:19px;color:var(--silver);margin:0 0 30px}
.wf-oneliner{max-width:820px;margin:0 auto 34px;padding:22px 26px;border:1px solid rgba(127,196,232,.3);border-radius:14px;background:rgba(127,196,232,.06);font-size:16.5px;color:var(--silver);text-align:left}
.wf-oneliner b{color:var(--ice);font-family:var(--ff-m);font-weight:500;font-size:11px;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:6px}

/* ---------- visuales simplificados (mobile) ---------- */
.wf-mini{margin-top:22px;padding:18px;border:1px solid var(--wf-line);border-radius:14px;background:#0C182A}
.wf-m-cap{margin:14px 0 0!important;font-family:var(--ff-h);font-size:19px!important;color:#fff!important}
.wf-m-cap b{color:var(--ice)}
.wf-m-cloud{display:flex;flex-wrap:wrap;gap:10px}
.wf-m-cloud span{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;border:1px solid rgba(200,212,224,.3);border-radius:999px;padding:6px 11px}
.wf-m-cloud span:nth-child(odd){transform:translateY(6px)}
.wf-m-cloud span:nth-child(3n){margin-left:14px}
.wf-m-cloud .wf-m-cap{flex-basis:100%}
.wf-m-net svg{width:100%;max-width:320px;margin:0 auto}
.wf-m-net .mn-l path{fill:none;stroke:rgba(127,196,232,.55);stroke-width:1.2}
.wf-m-net .mn-c{fill:none;stroke:var(--ice);stroke-dasharray:3 3}
.wf-m-net .mn-n circle{fill:var(--sky)}
.wf-m-net text{font-family:var(--ff-m);font-size:10px;fill:#fff;text-anchor:middle}
.wf-m-person{display:grid;grid-template-columns:64px 1fr;gap:14px;align-items:center}
.wf-m-person svg circle,.wf-m-person svg path{fill:none;stroke:#fff;stroke-width:2}
.wf-m-person svg circle:first-child{stroke:var(--ice)}
.wf-m-person div,.wf-m-dec div,.wf-m-somar>div:last-child{display:flex;flex-wrap:wrap;gap:6px}
.wf-m-person span,.wf-m-dec span,.wf-m-somar span{font-family:var(--ff-m);font-size:10px;letter-spacing:.06em;text-transform:uppercase;border:1px solid rgba(127,196,232,.35);border-radius:999px;padding:5px 9px}
.wf-m-dec{display:grid;gap:10px;justify-items:center;text-align:center}
.wf-m-dec i{font-style:normal;color:var(--ice)}
.wf-m-dec b{font-family:var(--ff-h);font-size:20px;border:1.5px solid var(--ice);border-radius:12px;padding:8px 16px}
.wf-m-somar{display:grid;gap:14px}
.wf-core-card{display:flex;align-items:center;gap:14px;padding:14px;border:1.5px solid var(--ice);border-radius:12px}
.wf-core-card b{display:block;font-family:var(--ff-h);font-size:26px;letter-spacing:.18em}
.wf-core-card small{font-family:var(--ff-m);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ice)}
.wf-core-card .strata,.wf-m-somar .wf-core-card span{border:0;padding:0}
.wf-slot .wf-panel{margin-top:22px}
.wf-slot .wf-p14 .wf-qs li{transition-delay:calc(var(--n,0) * 80ms)}
.wf-slot .on .wf-qs li,.wf-slot .wf-panel.on .wf-qs li{opacity:1;transform:none}

/* ---------- diferenciadores ---------- */
.wf-diff-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
.wf-d{border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 20px;background:#fff;transition:transform .3s,box-shadow .3s}
.wf-d:hover{transform:translateY(-4px);box-shadow:var(--shadow2)}
.wf-d svg{width:100%;height:84px;margin-bottom:14px;overflow:visible}
.wf-d svg text{font-family:var(--ff-m);font-size:7.5px;letter-spacing:.06em;fill:var(--navy);text-anchor:middle}
.wf-d svg .tiny{text-anchor:start;fill:var(--slate)}
.wf-d svg .ne{font-family:var(--ff-h);font-size:22px;fill:var(--gold);font-weight:700}
.wf-d .dl path,.wf-d path.dl{fill:none;stroke:var(--sky);stroke-width:1.6;stroke-linecap:round;stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset 1.4s var(--ease,ease) .2s}
.wf-d.visible .dl path,.wf-d.visible path.dl{stroke-dashoffset:0}
.wf-d .dn circle{fill:var(--ice)}
.wf-d .dc{fill:rgba(74,144,196,.08);stroke:var(--sky);stroke-width:1.4}
.wf-d .dc2{fill:rgba(26,43,74,.06);stroke:var(--navy);stroke-width:1.4}
.wf-d .dk{fill:var(--navy);stroke:var(--navy)}
.wf-d .dk+path.dh{stroke:#fff}
.wf-d .dh{fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.wf-d .dd{stroke:var(--slate);stroke-width:1.2;stroke-dasharray:4 4}
.wf-d-k{font-family:var(--ff-m);font-size:11px;color:var(--sky);margin:0 0 6px}
.wf-d h3{font-family:var(--ff-h);font-size:19px;line-height:1.1;color:var(--navy);margin:0 0 10px;text-transform:uppercase;letter-spacing:.02em}
.wf-d p{margin:0;font-size:14px;color:var(--muted)}
.wf-principles{margin-top:44px;padding:28px 30px;border-radius:var(--r-lg);background:var(--navy);color:#fff}
.wf-pr-h{margin:0 0 16px;font-family:var(--ff-m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ice)}
.wf-principles ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 28px}
.wf-principles li{font-size:14.5px;color:var(--silver);padding-left:14px;border-left:2px solid rgba(127,196,232,.4)}
.wf-principles b{display:block;font-family:var(--ff-h);font-size:17px;color:#fff;text-transform:uppercase;letter-spacing:.04em}

/* ---------- problemas (tabs) ---------- */
.wf-tablist{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:#fff;border:1px solid var(--line);margin-bottom:24px}
.wf-tablist button{border:0;background:transparent;padding:10px 18px;border-radius:999px;font:inherit;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
.wf-tablist button[aria-selected="true"]{background:var(--navy);color:#fff}
.wf-tabpanel{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.wf-tabpanel[hidden]{display:none}
.wf-tabpanel article{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;animation:wfCard .45s var(--wf-ease) both}
.wf-tabpanel article:nth-child(2){animation-delay:.05s}.wf-tabpanel article:nth-child(3){animation-delay:.1s}.wf-tabpanel article:nth-child(4){animation-delay:.15s}.wf-tabpanel article:nth-child(5){animation-delay:.2s}.wf-tabpanel article:nth-child(6){animation-delay:.25s}
@keyframes wfCard{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wf-tabpanel span{font-family:var(--ff-m);font-size:11px;color:var(--sky)}
.wf-tabpanel h3{font-family:var(--ff-h);font-size:20px;line-height:1.1;color:var(--navy);margin:8px 0 8px}
.wf-tabpanel p{margin:0;font-size:14px;color:var(--muted)}

/* ---------- capa de integración ---------- */
.wf-layer{display:grid;grid-template-columns:1fr minmax(240px,320px) 1fr;gap:56px;align-items:center}
.wf-sys{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.wf-sys li{position:relative;padding:12px 16px;border:1px solid var(--line);border-radius:10px;background:var(--mist);font-family:var(--ff-m);font-size:12px;letter-spacing:.04em;color:var(--navy)}
.wf-sys li::after{content:'';position:absolute;top:50%;width:56px;height:1px;background:linear-gradient(90deg,var(--silver),var(--sky))}
.wf-sys.left li{text-align:right}
.wf-sys.left li::after{left:100%}
.wf-sys.right li::after{right:100%;background:linear-gradient(90deg,var(--sky),var(--silver))}
.wf-sys li::before{content:'';position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:var(--sky);opacity:0}
.wf-sys.left li::before{left:100%}
.wf-sys.right li::before{right:100%}
.wf-layer.visible .wf-sys li::before{animation:wfPulseL 2.8s ease-in-out infinite;animation-delay:calc(var(--n,0) * .3s)}
.wf-layer.visible .wf-sys.right li::before{animation-name:wfPulseR}
@keyframes wfPulseL{0%{opacity:0;transform:translateX(0)}15%{opacity:1}60%{opacity:1;transform:translateX(50px)}70%,100%{opacity:0;transform:translateX(50px)}}
@keyframes wfPulseR{0%{opacity:0;transform:translateX(0)}15%{opacity:1}60%{opacity:1;transform:translateX(-50px)}70%,100%{opacity:0;transform:translateX(-50px)}}
.wf-layer-core{display:grid;justify-items:center;gap:8px;text-align:center;padding:34px 24px;border-radius:18px;background:var(--navy);color:#fff;box-shadow:var(--shadow)}
.wf-layer-core .strata i:nth-child(1){background:#fff}
.wf-layer-core b{font-family:var(--ff-h);font-size:34px;letter-spacing:.2em;line-height:1;margin-top:6px}
.wf-layer-core small{font-family:var(--ff-m);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ice)}
.wf-layer-core p{margin:10px 0 0;font-size:13px;color:var(--silver)}
.wf-layer-note{margin:24px 0 0;font-size:12.5px;color:var(--slate);text-align:center}

/* ---------- Capability Intelligence Scan ---------- */
.wf-scan{background:radial-gradient(1000px 500px at 10% 0%,rgba(44,95,158,.35),transparent 60%),var(--dark);color:#fff}
.wf-scan-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.wf-scan h2{font-family:var(--ff-h);font-weight:700;font-size:clamp(30px,3.6vw,48px);line-height:1.05;margin:0 0 24px;text-wrap:balance}
.wf-scan .section-kicker{color:var(--ice)}
.wf-scan-name{display:inline-flex;align-items:center;gap:16px;padding:14px 18px;border:1px solid rgba(127,196,232,.35);border-radius:12px;margin-bottom:18px}
.wf-scan-name small{display:block;font-family:var(--ff-m);font-size:10px;letter-spacing:.2em;color:var(--ice)}
.wf-scan-name b{font-family:var(--ff-h);font-size:24px;letter-spacing:.02em}
.wf-scan-desc{font-size:17px;color:var(--silver);margin:0 0 28px;max-width:560px}
.wf-outputs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:10px}
.wf-outputs li{padding:18px;border-radius:12px;border:1px solid var(--wf-line);background:rgba(255,255,255,.04);transition:border-color .25s,transform .25s}
.wf-outputs li:hover{border-color:rgba(127,196,232,.5);transform:translateY(-2px)}
.wf-outputs span{font-family:var(--ff-m);font-size:10.5px;color:var(--ice)}
.wf-outputs b{display:block;font-family:var(--ff-h);font-size:19px;margin:6px 0 4px;text-transform:uppercase;letter-spacing:.03em}
.wf-outputs small{font-size:13px;color:var(--silver)}

/* ---------- responsive ---------- */
@media (max-height:820px){
  .wf-desk .wf-stage .wf-panel{padding:14px 16px;gap:9px;max-height:calc(66% - 16px)}
  .wf-desk .wf-stage .wf-p14{max-height:calc(70% - 16px)}
  .wf-bullets{gap:10px}
  .wf-team{gap:5px}
  .wf-dots{gap:9px}
  .wf-qs li{padding:8px 10px 8px 36px;font-size:12.5px}
  .wf-qs li::before{top:9px}
  .wf-chips li{padding:6px 10px}
}
@media (max-width:1180px){
  .wf-diff-grid{grid-template-columns:repeat(3,1fr)}
  .wf-principles ul{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:999px){
  .wf-scan-grid{grid-template-columns:1fr;gap:36px}
  .wf-tabpanel{grid-template-columns:repeat(2,1fr)}
  .wf-layer{grid-template-columns:1fr;gap:18px}
  .wf-sys{grid-template-columns:repeat(2,1fr)}
  .wf-sys li{text-align:center!important}
  .wf-sys li::after,.wf-sys li::before{display:none}
  .wf-layer-core{order:3}
  .wf-sys.right{order:2}
}
@media (max-width:720px){
  .wf-diff-grid,.wf-tabpanel,.wf-outputs,.wf-principles ul{grid-template-columns:1fr}
  .wf-tablist{display:flex;width:100%}
  .wf-tablist button{flex:1;padding:10px 8px;font-size:11.5px}
  .wf-panel{padding:14px;font-size:12.5px}
  .wf-strip{flex-direction:column}
  .wf-bullets li{grid-template-columns:88px 1fr 64px;gap:8px}
  .wf-team .th,.wf-team .tr{grid-template-columns:66px repeat(3,1fr);gap:8px}
  .wf-totals>div{grid-template-columns:110px 1fr 34px}
  .wf-dots li{grid-template-columns:110px 1fr 28px;gap:8px}
  .wf-gap .row{grid-template-columns:1fr}
  .wf-gap .br{left:62%;top:auto;bottom:-6px}
  .wf-gap{margin-bottom:14px}
  .wf-events{grid-template-columns:1fr}
  .wf-risk{grid-template-columns:110px 1fr;gap:14px}
  .wf-ring{width:110px;height:110px}
  .wf-ring strong{font-size:26px}
  .wf-dev{grid-template-columns:1fr}
  .wf-qs{grid-template-columns:1fr}
  .wf-split{grid-template-columns:1fr}
  .wf-ind{grid-template-columns:1fr}
  .wf-kpis .st{margin-left:0}
  .wf-oneliner{padding:18px}
}
@media (prefers-reduced-motion:reduce){
  .wf-story .wf-src .in{animation:none!important}
  .wf-caption span{animation:none;opacity:1;transform:none}
  .wf-layer .wf-sys li::before{animation:none!important;display:none}
}