/* ============================================
   WORKFACILIT — Galeria de Telas da Plataforma
   Componente compartilhado (hub + landing pages)
   Markup: .wfg[data-wfg] > .browser-frame + caption + thumbs
   ============================================ */

.wfg{max-width:960px;margin:0 auto}
.wfg .browser-frame{max-width:none;animation:none;cursor:zoom-in}
.wfg__viewport{position:relative;aspect-ratio:2940/1846;overflow:hidden;background:#0c0c0e}
.wfg__slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top left;opacity:0;transition:opacity 600ms ease}
.wfg__slide.is-active{opacity:1}
.wfg__caption{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:1rem;font-size:.82rem;color:var(--wf-text-2);text-align:center;min-height:1.4em}
.wfg__caption i{color:var(--wf-primary-light);font-size:1rem}
.wfg__thumbs{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem;margin-top:1rem}
.wfg__thumb{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--wf-r-full);font-size:.74rem;font-weight:600;color:var(--wf-text-2);background:rgba(255,255,255,.04);border:1px solid var(--wf-border);transition:all 250ms var(--wf-ease)}
.wfg__thumb i{font-size:.9rem}
.wfg__thumb:hover{border-color:var(--wf-border-hover);color:var(--wf-text-1)}
.wfg__thumb.is-active{background:rgba(99,102,241,.12);border-color:rgba(99,102,241,.35);color:var(--wf-primary-lighter)}
.wfg__note{display:flex;align-items:center;justify-content:center;gap:6px;margin-top:1.25rem;font-size:.7rem;color:var(--wf-text-3)}
.wfg__note i{font-size:.85rem}

/* ── Lightbox ── */
.wfg-lightbox{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:2rem;background:rgba(5,5,8,.92);backdrop-filter:blur(8px);cursor:zoom-out}
.wfg-lightbox.is-open{display:flex;animation:wfg-fade 250ms ease}
.wfg-lightbox img{max-width:min(1400px,96vw);max-height:90vh;width:auto;height:auto;border-radius:10px;border:1px solid rgba(255,255,255,.12);box-shadow:0 40px 120px rgba(0,0,0,.6)}
.wfg-lightbox__close{position:absolute;top:1.25rem;right:1.5rem;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;color:#fff;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);transition:background 250ms}
.wfg-lightbox__close:hover{background:rgba(255,255,255,.16)}
@keyframes wfg-fade{from{opacity:0}to{opacity:1}}

/* ── Light theme ── */
html[data-theme="light"] .wfg__thumb{background:rgba(0,0,0,.03)}
html[data-theme="light"] .wfg-lightbox{background:rgba(15,23,42,.9)}

@media(max-width:768px){
  .wfg__thumbs{gap:.4rem}
  .wfg__thumb{padding:6px 10px;font-size:.68rem}
  .wfg-lightbox{padding:.75rem}
}