/* 10 · Para quem (tom claro desde 17/10). A faixa "Funciona para qualquer setor com equipe" do site no ar (v5.7):
   rótulo em caixa alta e a lista de setores em pílulas de texto (sem bolinha). Fundo transparente.
   Rodada 2: cada pílula é um botão. Passar o mouse abre uma janelinha com um exemplo; o clique fixa e
   outro clique fecha; no celular o toque abre e fecha; foco de teclado abre e Esc fecha. */

/* A faixa é curta, mas fica entre duas seções claras: com altura de sobra ela cruza o meio da tela
   tempo suficiente para o tom escuro assentar (a troca do tom leva 0,9 s) em vez de piscar. */
#setores.band {
  padding-block: clamp(110px, 15vw, 190px);
  border-block: 1px solid color-mix(in srgb, var(--line) 50%, transparent);
}
#setores .st-in { max-width: 1100px; margin-inline: auto; text-align: center; }
#setores .st-h {
  margin: 0 0 28px;
  font: 700 11px/1.5 'JetBrains Mono', var(--mono);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--ink) 55%, transparent);
}
#setores .st-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 10px; }
#setores .st-item { position: relative; }
#setores .st-item.is-open { z-index: 20; }

/* a pílula é um botão sem aparência de botão */
#setores .st-btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 9px 20px;
  min-height: 38px;
  font: 400 13px/1.4 var(--f-body6);
  color: color-mix(in srgb, var(--ink) 62%, transparent);
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s, color .2s, background-color .2s, transform .2s;
}
@media (hover: hover) {
  #setores .st-btn:hover {
    border-color: color-mix(in srgb, var(--accent) 38%, transparent);
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    transform: translateY(-2px);
  }
}
#setores .st-item.is-open .st-btn {
  border-color: color-mix(in srgb, var(--accent) 38%, transparent);
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
/* fixado pelo clique: borda cheia, para dar para ver que ela fica */
#setores .st-item.is-pinned .st-btn { border-color: var(--accent); }
#setores .st-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

/* a janelinha: cartão com os tokens do tom, aberta por baixo (ou por cima, quando falta espaço) */
#setores .st-pop {
  position: absolute;
  left: 0;
  top: calc(100% + 12px);
  z-index: 1;
  width: min(360px, calc(100vw - 28px));
  padding: 18px 20px 20px;
  text-align: left;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-radius: 16px;
  box-shadow: 0 24px 50px -20px rgba(0, 0, 0, .65), 0 2px 10px rgba(0, 0, 0, .22);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity .18s ease, transform .22s var(--ease-out), visibility 0s linear .22s;
}
#setores .st-pop[data-side="top"] { top: auto; bottom: calc(100% + 12px); transform: translateY(-6px); }
#setores .st-item.is-open .st-pop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition-delay: 0s;
}
/* ponte invisível entre a pílula e a janelinha, para o mouse atravessar o vão sem fechar */
#setores .st-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
#setores .st-pop[data-side="top"]::before { top: auto; bottom: -16px; }
/* setinha apontando para a pílula (acompanha a pílula mesmo quando a janelinha é empurrada para dentro da tela) */
#setores .st-pop::after {
  content: "";
  position: absolute;
  left: var(--ax, 50%);
  top: -7px;
  width: 12px;
  height: 12px;
  margin-left: -6px;
  background: var(--surface);
  border-top: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  border-left: 1px solid color-mix(in srgb, var(--ink) 20%, transparent);
  transform: rotate(45deg);
  border-top-left-radius: 3px;
}
#setores .st-pop[data-side="top"]::after {
  top: auto;
  bottom: -7px;
  transform: rotate(225deg);
}

#setores .st-k {
  margin: 0 0 6px;
  font: 500 11.5px/1.4 var(--mono);
  letter-spacing: .02em;
  color: var(--ink-2);
}
#setores .st-q {
  margin: 0;
  font: 400 15px/1.5 var(--sans);
  color: var(--ink);
}
#setores .st-n { color: var(--ink-2); font-size: 13.5px; white-space: nowrap; }
#setores .st-a {
  margin: 14px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font: 400 14.5px/1.5 var(--sans);
  color: var(--ink-2);
}

#setores .st-hint {
  margin: 30px 0 0;
  font: 400 12px/1.5 var(--mono);
  color: var(--ink-2);
}
#setores .st-hint { transition: opacity .18s; }
#setores.st-any .st-hint { opacity: 0; }
#setores .st-hint-t { display: none; }
@media (hover: none) {
  #setores .st-hint-m { display: none; }
  #setores .st-hint-t { display: inline; }
}

/* sem JavaScript os exemplos aparecem abertos, em cartões (o JS liga .st-on e troca para as janelinhas) */
#setores:not(.st-on) .st-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; text-align: left; }
#setores:not(.st-on) .st-btn { display: block; width: 100%; margin-bottom: 8px; border: 0; padding: 0; min-height: 0; cursor: default; font-weight: 600; color: var(--ink); background: transparent; }
#setores:not(.st-on) .st-pop { position: static; width: auto; opacity: 1; visibility: visible; pointer-events: auto; transform: none; }
#setores:not(.st-on) .st-pop::before, #setores:not(.st-on) .st-pop::after { display: none; }
#setores:not(.st-on) .st-hint { display: none; }

@media (max-width: 700px) {
  #setores .st-btn { padding: 8px 14px; font-size: 12px; min-height: 44px; }
  #setores .st-pop { padding: 16px 18px 18px; }
}
@media (pointer: coarse) {
  #setores .st-btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  #setores .st-btn,
  #setores .st-pop { transition: none; }
  #setores .st-btn:hover { transform: none; }
}