/* ============================================================
   WORKFACILIT — Faixa "Onde este estúdio se encaixa"
   Liga cada página de estúdio à narrativa do index (#historia):
   cada estúdio nasceu de um gargalo real, na ordem Bot → Chat → Workflow
   → Analytics → Regras → CECI. Só tokens --wf-* (sem hex).
   ============================================================ */

.wf-studios { padding: 2rem 0; background: var(--wf-bg-subtle); border-top: 1px solid var(--wf-border); border-bottom: 1px solid var(--wf-border); }
.wf-studios__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: 1.1rem; }
.wf-studios__k { display: block; margin-bottom: .3rem; font-size: .7rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--wf-primary); }
.wf-studios__why { font-size: .95rem; line-height: 1.5; color: var(--wf-text-secondary); }
.wf-studios__why b { color: var(--wf-text-primary); }
.wf-studios__more { flex: none; display: inline-flex; align-items: center; gap: .35rem; font-size: .84rem; font-weight: 600; color: var(--wf-primary); text-decoration: none; }
.wf-studios__more:hover i { transform: translateX(3px); }
.wf-studios__more i { transition: transform .25s var(--wf-ease); }

.wf-studios__row { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .5rem; list-style: none; margin: 0; padding: 0; }
.wf-studios__row::before { content: ""; position: absolute; left: 1.2rem; right: 1.2rem; top: 1.2rem; height: 2px; background: var(--wf-border-strong); }
.wf-studio { position: relative; }
.wf-studio a { display: grid; justify-items: start; gap: .35rem; padding: 0 .25rem; text-decoration: none; }
.wf-studio__n { position: relative; z-index: 1; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; font-family: var(--wf-display); font-size: .8rem; font-weight: 800;
  color: var(--wf-text-tertiary); background: var(--wf-bg-surface); border: 1px solid var(--wf-border-strong); transition: background .25s, color .25s, border-color .25s; }
.wf-studio__name { font-size: .86rem; font-weight: 700; line-height: 1.2; color: var(--wf-text-primary); }
.wf-studio__role { font-size: .74rem; line-height: 1.35; color: var(--wf-text-tertiary); }
.wf-studio a:hover .wf-studio__n { border-color: var(--wf-primary); color: var(--wf-primary); }
.wf-studio.is-current .wf-studio__n { color: var(--wf-on-primary); background: var(--wf-primary); border-color: transparent; box-shadow: 0 0 0 5px color-mix(in srgb, var(--wf-primary) 16%, transparent); }
.wf-studio.is-current .wf-studio__name { color: var(--wf-primary); }
.wf-studio--ceci .wf-studio__n { border-color: color-mix(in srgb, var(--wf-ai-ceci) 55%, transparent); color: var(--wf-ai-ceci); }
.wf-studio--ceci.is-current .wf-studio__n { color: var(--wf-bg-surface); background: var(--wf-ai-ceci); box-shadow: 0 0 0 5px color-mix(in srgb, var(--wf-ai-ceci) 20%, transparent); }
.wf-studio--ceci.is-current .wf-studio__name { color: var(--wf-ai-ceci-text); }

@media (max-width: 900px) {
  .wf-studios__row { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 1rem; }
  .wf-studios__row::before { display: none; }
}
@media (max-width: 520px) {
  .wf-studios__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}