/* ===== Workshop de video (demo interactiva) ===== */
.sec--workshop { background: var(--surface-2); }
.wd { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.wd__copy { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.wd__copy .lead { max-width: 52ch; }
.wd__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.wd__list li { position: relative; padding-left: 26px; color: var(--ink-2); font-size: var(--fs-md); line-height: 1.5; }
.wd__list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 12px; border-radius: 50%; background: var(--brand-tint-2); box-shadow: inset 0 0 0 3px var(--brand); }
.wd__list b { color: var(--ink); }
.wd__note { margin-top: 12px; font-size: var(--fs-sm); color: var(--ink-3); max-width: 62ch; }
.wd__body { padding: 14px; display: flex; flex-direction: column; gap: 10px; }

.wd-stage { position: relative; border-radius: 10px; overflow: hidden; aspect-ratio: 100 / 62; background: #2D7A56; cursor: pointer; outline-offset: 2px; }
.wd-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wd-grass { fill: #2D7A56; }
.wd-lines * { fill: none; stroke: rgba(255,255,255,.55); stroke-width: .35; }
.wd-a { fill: #fff; stroke: #0F4130; stroke-width: .35; }
.wd-d { fill: #17231D; stroke: rgba(255,255,255,.7); stroke-width: .3; }
.wd-ball { fill: #E7B84B; stroke: #3D2B00; stroke-width: .3; }
.wd-hud { position: absolute; left: 10px; right: 10px; top: 8px; display: flex; justify-content: space-between; align-items: center; pointer-events: none; }
.wd-live { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 99px; background: rgba(15,45,34,.78); color: #fff; font: 500 11px/1.2 var(--font-ui); }
.wd-live i { width: 6px; height: 6px; border-radius: 50%; background: #E7B84B; }
.wd-time { padding: 3px 9px; border-radius: 99px; background: rgba(15,45,34,.78); color: #fff; font: 500 11px/1.2 var(--font-data); }
.wd-flag { position: absolute; bottom: 10px; padding: 4px 10px; border-radius: 99px; font: 600 11px/1 var(--font-ui); color: #fff; background: var(--brand); box-shadow: 0 4px 10px rgba(0,0,0,.25); pointer-events: none; }
.wd-flag[hidden] { display: none; }
.wd-flag--a { left: 10px; } .wd-flag--b { right: 10px; background: #B24A3D; }

.wd-tl { position: relative; height: 26px; border-radius: 8px; background: var(--surface-3); cursor: pointer; overflow: hidden; outline-offset: 2px; }
.wd-tl__head { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ink); z-index: 3; pointer-events: none; }
.wd-tl__sel { position: absolute; top: 0; bottom: 0; background: rgba(27,103,70,.28); border-inline: 2px solid var(--brand); z-index: 1; pointer-events: none; }
.wd-tl__sel[hidden] { display: none; }
.wd-m { position: absolute; top: 4px; bottom: 4px; padding: 0; border: 0; border-radius: 5px; min-width: 6px; background: #8FA89A; cursor: pointer; z-index: 2; transition: filter .12s, opacity .12s; }
.wd-m:hover { filter: brightness(.88); }
.wd-m--pos { background: #2E8B5E; } .wd-m--neg { background: #C45A4A; } .wd-m--rev { background: #D9A62E; }
.wd-m.is-dim { opacity: .25; }

.wd-ctrl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.wd-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); color: var(--ink); font: 500 var(--fs-sm)/1 var(--font-ui); cursor: pointer; transition: background .15s, border-color .15s; }
.wd-btn:hover { background: var(--surface-2); border-color: var(--brand); }
.wd-btn--play { width: 34px; padding: 0; justify-content: center; background: var(--brand); border-color: var(--brand); color: #fff; }
.wd-btn--play:hover { background: var(--brand-hover); }
.wd-btn kbd { font: 600 10.5px/1 var(--font-data); padding: 2px 6px; border-radius: 5px; background: var(--surface-2); border: 1px solid var(--line-strong); color: var(--ink-2); }
.wd-hint { flex: 1 1 200px; font-size: var(--fs-sm); color: var(--ink-3); }

.wd-save { border: 1px solid var(--brand-tint-2); background: var(--brand-tint); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.wd-save[hidden] { display: none; }
.wd-save__h { display: flex; justify-content: space-between; font-size: var(--fs-sm); }
.wd-save__h span { font-family: var(--font-data); color: var(--brand-ink); }
.wd-row { display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 8px; align-items: start; }
.wd-lbl { font-size: var(--fs-xs); font-family: var(--font-data); text-transform: uppercase; letter-spacing: .06em; color: var(--ink-3); padding-top: 7px; }
.wd-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.wd-chip { height: 28px; padding: 0 11px; border-radius: 99px; border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-2); font: 500 12px/1 var(--font-ui); cursor: pointer; transition: all .15s; }
.wd-chip:hover { border-color: var(--brand); }
.wd-chip.is-on { background: var(--brand); border-color: var(--brand); color: #fff; }
.wd-chip--sm { height: 24px; padding: 0 9px; font-size: 11.5px; }
.wd-chip--pos.is-on { background: #2E8B5E; border-color: #2E8B5E; } .wd-chip--neg.is-on { background: #C45A4A; border-color: #C45A4A; } .wd-chip--rev.is-on { background: #D9A62E; border-color: #D9A62E; color: #3D2B00; }
.wd-save__b { display: flex; gap: 8px; }

.wd-list { border: 1px solid var(--line); border-radius: 12px; background: var(--surface); overflow: hidden; }
.wd-list__h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.wd-list__h span { color: var(--ink-3); font-weight: 400; }
#wdClips { list-style: none; margin: 0; padding: 4px 6px; max-height: 188px; overflow: auto; }
.wd-clip { display: grid; grid-template-columns: 34px minmax(0, 1fr) 22px; gap: 10px; align-items: center; padding: 8px 6px; border-radius: 9px; box-shadow: inset 3px 0 0 transparent; }
.wd-clip:hover { background: var(--surface-2); }
.wd-clip--pos { box-shadow: inset 3px 0 0 #2E8B5E; } .wd-clip--neg { box-shadow: inset 3px 0 0 #C45A4A; } .wd-clip--rev { box-shadow: inset 3px 0 0 #D9A62E; }
.wd-clip__play { width: 28px; height: 28px; border-radius: 50%; border: 0; background: var(--brand-tint); color: var(--brand); display: grid; place-items: center; cursor: pointer; margin-left: 6px; }
.wd-clip__play:hover { background: var(--brand); color: #fff; }
.wd-clip__b b { display: block; font-size: var(--fs-sm); font-weight: 600; }
.wd-clip__b > span { font: 400 11.5px/1.3 var(--font-data); color: var(--ink-3); }
.wd-clip__t { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; }
.wd-clip__t em { font-style: normal; font-size: 11px; padding: 1px 8px; border-radius: 99px; background: var(--surface-2); color: var(--ink-2); }
.wd-r { font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; padding: 2px 8px; border-radius: 99px; }
.wd-r--pos { background: #DDF2E6; color: #0F4130; } .wd-r--neg { background: #F8DEDA; color: #8E2A1E; } .wd-r--rev { background: #FBEFC9; color: #7A5600; }
.wd-clip__x { border: 0; background: transparent; color: var(--ink-3); font-size: 18px; line-height: 1; cursor: pointer; border-radius: 6px; }
.wd-clip__x:hover { color: var(--bad); background: var(--bad-bg); }
.wd-empty { padding: 14px; color: var(--ink-3); font-size: var(--fs-sm); text-align: center; }
.wd-share { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; border-top: 1px solid var(--line); align-items: flex-start; }
.wd-share__box { width: 100%; }
.wd-share__box[hidden] { display: none; }
.wd-link { padding: 9px 12px; border-radius: 9px; background: var(--surface-2); border: 1px dashed var(--line-strong); font: 500 12px/1.3 var(--font-data); color: var(--ink-2); overflow-wrap: anywhere; }
.wd-link b { color: var(--brand); letter-spacing: .1em; }
.wd-share__box p { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--ink-3); }

@media (max-width: 960px) { .wd { grid-template-columns: minmax(0, 1fr); } .wd-row { grid-template-columns: minmax(0, 1fr); } .wd-lbl { padding-top: 0; } }
@media (prefers-reduced-motion: reduce) { .wd-chip, .wd-m, .wd-btn { transition: none; } }