/* ============================================================================
   GLOSSÁRIO COMERCIAL — /inventi/o-que-e-cada-coisa/ (SITE-2, 29/09/2026)

   Só tokens do site.css (cores, fontes, linhas): nada de cor nova sem par escuro.
   🔴 O selo de estado NÃO carrega a informação só na cor — o texto do selo diz
   «Entregue», «Em parte», «Em desenvolvimento» ou «Não fazemos». A cor é reforço
   (WCAG 1.4.1). O texto do selo é sempre --fg sobre --bg-inset: o contraste é o
   mesmo do corpo da página nos dois temas.
   ========================================================================== */

.estados { display: flex; flex-wrap: wrap; gap: .5rem .9rem; margin: 1.2rem 0 0; padding: 0; list-style: none; }
.estados li { display: flex; align-items: center; gap: .45rem; font-size: .9rem; color: var(--fg-soft); }

.st {
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  font: 600 .72rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--fg); background: var(--bg-inset);
  border: 1px solid var(--line); border-radius: 999px; padding: .32rem .6rem .3rem;
}
.st::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; flex: none; background: currentColor; }
.st-ok::before    { background: #1f8a4c; }
.st-parte::before { background: #c98a12; }
.st-rm::before    { background: var(--azul); }
.st-nao::before   { background: transparent; box-shadow: inset 0 0 0 2px var(--fg-faint); }

/* ── fichas por termo ─────────────────────────────────────────────── */
.termos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); margin-top: 1.8rem; }
.termo {
  background: var(--bg-soft); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.25rem 1.3rem 1.1rem; box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: .15rem;
}
.termo-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: .8rem; margin-bottom: .35rem; }
.termo-sigla { font: 800 1.6rem/1 var(--display); letter-spacing: -.03em; color: var(--fg); margin: 0; }
.termo-nome { display: block; font: 400 .78rem/1.35 var(--mono); color: var(--fg-faint); margin-top: .3rem; letter-spacing: .02em; }
.termo h4 {
  font: 600 .72rem/1.2 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--rosa-texto); margin: .85rem 0 .3rem;
}
.termo p { font-size: .94rem; margin: 0 0 .3rem; max-width: none; }
.termo p.termo-def { color: var(--fg); font-size: 1rem; }
.termo .termo-rm { font-size: .88rem; color: var(--fg-soft); border-left: 2px solid var(--azul); padding-left: .65rem; margin-top: .45rem; }
.termo a.termo-link { margin-top: auto; padding-top: .8rem; font: 400 .8rem/1.3 var(--mono); text-decoration: none; }
.termo a.termo-link:hover { text-decoration: underline; }

/* ── tabelas (IA × tradicional; componentes) ─────────────────────── */
.tabela-glossario { min-width: 46rem; }
.tabela-glossario th { font: 600 .74rem/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint); vertical-align: bottom; }
.tabela-glossario td { vertical-align: top; color: var(--fg-soft); }
.tabela-glossario td:first-child { color: var(--fg); font-weight: 600; white-space: nowrap; }
.tabela-glossario td.inventi { color: var(--fg); background: var(--bg-inset); }
.tabela-glossario td.inventi .st { margin-bottom: .35rem; }
.scroll-x:focus-visible { outline: 2px solid var(--rosa); outline-offset: 3px; }
.dica-rolagem { display: none; font: 400 .78rem/1.3 var(--mono); color: var(--fg-faint); margin: .5rem 0 0; }
@media (max-width: 760px) { .dica-rolagem { display: block; } }

/* ── custo de ferramentas separadas ──────────────────────────────── */
.custos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); margin-top: 1.6rem; }
.custo { border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem; background: var(--bg-soft); }
.custo h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .45rem; }
.custo p { font-size: .93rem; margin: 0 0 .5rem; }
.custo p.custo-base { color: var(--fg); border-top: 1px solid var(--line); padding-top: .55rem; margin: .2rem 0 0; }

/* ── perdas no tempo ─────────────────────────────────────────────── */
.perdas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); margin-top: 1.6rem; }
.perda { border: 1px solid var(--line); border-radius: 12px; padding: 1.1rem 1.2rem 1rem; background: var(--bg-soft); }
.perda h3 { font-size: 1.05rem; font-weight: 700; margin-bottom: .7rem; }
.perda ol { list-style: none; margin: 0; padding: 0; }
.perda li { display: grid; grid-template-columns: 5.2rem 1fr; gap: .6rem; padding: .5rem 0; border-top: 1px solid var(--line); font-size: .92rem; color: var(--fg-soft); }
.perda li:first-child { border-top: 0; padding-top: 0; }
.perda li b { font: 600 .7rem/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--fg-faint); }
.perda li:last-child b { color: var(--rosa-texto); }
.perda p.perda-inventi { margin: .7rem 0 0; font-size: .9rem; color: var(--fg); }

/* ── perguntas-diagnóstico ───────────────────────────────────────── */
.perguntas { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); margin-top: 1.6rem; counter-reset: pergunta; }
.pergunta {
  position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 1.2rem 1.25rem 1.05rem;
  background: var(--bg-soft); display: flex; flex-direction: column; counter-increment: pergunta;
  transition: border-color .25s, transform .25s;
}
.pergunta:hover { border-color: var(--rosa); transform: translateY(-2px); }
.pergunta::before {
  content: counter(pergunta, decimal-leading-zero);
  font: 600 .74rem/1 var(--mono); color: var(--fg-faint); letter-spacing: .08em; margin-bottom: .6rem;
}
.pergunta h3 { font: 700 1.08rem/1.3 var(--display); letter-spacing: -.015em; margin: 0 0 .6rem; }
.pergunta p { font-size: .92rem; margin: 0 0 .45rem; }
.pergunta p.pergunta-dor { color: var(--fg-soft); }
.pergunta p.pergunta-resposta { color: var(--fg); }
.pergunta a { margin-top: auto; padding-top: .6rem; font: 400 .8rem/1.3 var(--mono); text-decoration: none; }
.pergunta a:hover { text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { .pergunta { transition: none; } .pergunta:hover { transform: none; } }