/* ============================================================
   BitNR1 — infográficos do hotsite
   Complementa hotsite.css e usa os mesmos tokens (--accent, --ink,
   --surface...), então tema claro e escuro funcionam sem nada extra aqui.

   Três regras que valem para todo este arquivo:

   1. Nenhum número inventado. Onde aparece número, ou ele ilustra uma REGRA
      (o corte de k, por exemplo) e está rotulado como exemplo, ou não existe.
      Um hotsite que inventa métrica de cliente perde a venda na primeira
      pergunta do comprador.
   2. Toda animação é decoração. O texto ao lado diz a mesma coisa; quem
      desliga movimento, ou usa leitor de tela, não perde informação nenhuma.
   3. Nada de biblioteca. A política de segurança de conteúdo do servidor só
      permite recurso do próprio domínio, e é assim de propósito.
   ============================================================ */

/* Movimento só quando a pessoa aceita movimento. Fica no topo para valer
   sobre tudo o que vem depois. */
@media (prefers-reduced-motion: reduce) {
  .ig *, .ig *::before, .ig *::after {
    animation: none !important;
    transition: none !important;
  }
  /* Sem animação, os elementos precisam nascer no estado final, senão a
     pessoa vê uma tela vazia. */
  .ig [class*="ig-"] { opacity: 1 !important; transform: none !important; }
}

.ig { --ig-dur: .8s; }
/* O navegador dá a `figure` uma margem lateral de 40px por padrão, e era ela
   que empurrava cada infográfico para dentro enquanto título, parágrafo e
   cards ficavam na borda da coluna. Zerar aqui alinha tudo no mesmo eixo. */
figure.ig { margin: 0; }
.ig figcaption,
.ig-legenda {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--muted);
  /* Alinhada à esquerda como o resto do texto da página. Centralizada, ela
     criava um segundo eixo de leitura dentro de uma seção que já tem um. */
  text-align: left;
  margin-top: .9rem;
}
/* Exceção: no herói o desenho é uma coluna própria, e ali a legenda centrada
   acompanha o cartão em vez de brigar com ele. */
.ig-hero figcaption { text-align: center; }

/* ---------------------------------------------------------------- 1. HERO
   Da pessoa ao agregado: identidades entram, viram resposta sem dono e saem
   como barra. É a promessa inteira do produto em um desenho. */

.ig-fluxo {
  position: relative;
  display: grid;
  /* A coluna do meio tem largura mínima própria: é ela que carrega o rótulo,
     e sem o mínimo ele quebrava em quatro linhas espremidas. */
  grid-template-columns: auto minmax(132px, 1fr) auto;
  align-items: center;
  gap: clamp(.7rem, 2.8vw, 1.7rem);
  padding: clamp(1.2rem, 3.2vw, 2rem);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
}

.ig-pessoas { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.ig-pessoa {
  width: clamp(16px, 3.8vw, 23px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--line-strong);
  position: relative;
  animation: ig-pulsa 3.2s ease-in-out infinite;
  animation-delay: calc(var(--i) * .16s);
}
/* A "cabeça" faz o ponto ler como pessoa sem custar um ícone. */
.ig-pessoa::after {
  content: "";
  position: absolute;
  inset: 18% 30% auto 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--surface);
  opacity: .55;
}
@keyframes ig-pulsa {
  0%, 100% { opacity: .45; transform: scale(.92); }
  50%      { opacity: 1;   transform: scale(1); }
}

.ig-portao {
  position: relative;
  height: clamp(170px, 26vw, 248px);
  border-left: 1px dashed var(--line-strong);
  border-right: 1px dashed var(--line-strong);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.ig-portao b {
  font-family: var(--font-mono);
  font-size: clamp(.6rem, 1.5vw, .72rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--surface);
  padding: .25em .6em;
  border-radius: 999px;
  border: 1px solid var(--accent-soft);
  z-index: 2;
  /* Sem nowrap: com nowrap o rótulo era mais largo que a coluna do portão e
     ficava cortado pelo overflow. Duas linhas curtas cabem e leem melhor. */
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  max-width: 94%;
}
/* Os pontos atravessam o portão e saem sem cor de identidade. */
.ig-portao i {
  position: absolute;
  top: calc(var(--y) * 1%);
  left: -12px;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--line-strong);
  animation: ig-atravessa 4.4s linear infinite;
  animation-delay: calc(var(--d) * 1s);
}
@keyframes ig-atravessa {
  0%   { left: -12px; background: var(--line-strong); opacity: 0; }
  12%  { opacity: 1; }
  45%  { background: var(--line-strong); }
  55%  { background: var(--accent); }
  88%  { opacity: 1; }
  100% { left: calc(100% + 12px); background: var(--accent); opacity: 0; }
}

.ig-barras { display: flex; align-items: flex-end; gap: .45rem; height: clamp(170px, 26vw, 248px); }
.ig-barras i {
  width: clamp(14px, 3.2vw, 22px);
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 55%, transparent));
  border-radius: 4px 4px 2px 2px;
  height: calc(var(--h) * 1%);
  transform-origin: bottom;
  animation: ig-cresce 3.6s ease-in-out infinite;
  animation-delay: calc(var(--i) * .18s);
}
@keyframes ig-cresce {
  0%, 100% { transform: scaleY(.72); }
  50%      { transform: scaleY(1); }
}

@media (max-width: 560px) {
  .ig-fluxo { grid-template-columns: auto minmax(88px, 1fr) auto; gap: .5rem; padding: .9rem; }
  .ig-portao b { font-size: .55rem; padding: .2em .45em; }
}

/* ------------------------------------------------- 2. INVENTÁRIO DE RISCOS
   A NR-1 não criou um documento novo: acrescentou uma linha a um inventário
   que a empresa já era obrigada a manter. O desenho diz isso melhor que o
   parágrafo. */

.ig-inventario { display: grid; gap: .5rem; max-width: 640px; }
.ig-linha {
  display: grid;
  grid-template-columns: 1.6rem 1fr auto;
  align-items: center;
  gap: .8rem;
  padding: .75rem .95rem;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink-2);
  font-size: .92rem;
}
.ig-linha .ig-sinal {
  width: 1.05rem; aspect-ratio: 1; border-radius: 4px;
  background: var(--line-strong);
}
.ig-linha .ig-ja { font-family: var(--font-mono); font-size: .66rem; color: var(--muted); letter-spacing: .05em; }

.ig-linha.novo {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--ink);
  font-weight: 600;
  /* Nasce fora e entra: é a linha que mudou a obrigação. */
  opacity: 0;
  transform: translateY(10px);
}
.ig-linha.novo .ig-sinal { background: var(--accent); }
.ig-linha.novo .ig-ja { color: var(--accent); font-weight: 700; }
.reveal.in .ig-linha.novo,
.ig-inventario.in .ig-linha.novo {
  animation: ig-entra .7s .55s cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes ig-entra {
  to { opacity: 1; transform: translateY(0); }
}

/* ------------------------------------------------------------ 3. PROBLEMA
   Dois desenhos pequenos, um por card. */

/* 3a. Respostas honestas achatando em "tudo bem". */
.ig-achatamento { display: flex; align-items: flex-end; gap: .3rem; height: 74px; margin: 1rem 0 .2rem; }
.ig-achatamento i {
  flex: 1;
  background: var(--line-strong);
  border-radius: 3px 3px 0 0;
  height: calc(var(--h) * 1%);
  transition: height 1.1s cubic-bezier(.4,0,.2,1), background .9s ease;
  transition-delay: calc(var(--i) * .05s);
}
.in .ig-achatamento i { height: 38%; background: color-mix(in srgb, var(--muted) 55%, transparent); }

/* 3b. Ciclo com a volta faltando. */
.ig-ciclo-quebrado { display: grid; place-items: center; margin: 1rem 0 .2rem; }
.ig-ciclo-quebrado svg { width: 84px; height: 84px; }
.ig-ciclo-quebrado circle {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 7;
  stroke-linecap: round;
  /* Arco aberto: a volta que não se completa. */
  stroke-dasharray: 150 76;
  transform: rotate(-90deg);
  transform-origin: center;
}
.ig-ciclo-quebrado .seta { fill: var(--muted); }
.in .ig-ciclo-quebrado circle { animation: ig-gira 5s linear infinite; }
@keyframes ig-gira {
  from { stroke-dashoffset: 0; }
  to   { stroke-dashoffset: -226; }
}

/* ------------------------------------------------------------- 4. CANAIS
   Matriz de cobertura: qual canal alcança qual realidade de trabalho. É a
   pergunta que o comprador faz de verdade ("e o pessoal da fábrica?"). */

.ig-cobertura {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: .88rem;
}
.ig-cobertura caption {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .05em;
  color: var(--muted);
  text-align: left;
  padding-bottom: .8rem;
}
.ig-cobertura th, .ig-cobertura td {
  padding: .7rem .55rem;
  text-align: center;
  border-bottom: 1px solid var(--line);
}
.ig-cobertura thead th {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  white-space: nowrap;
}
.ig-cobertura tbody th {
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.ig-cobertura .marca {
  display: inline-block;
  width: 13px; aspect-ratio: 1;
  border-radius: 50%;
  background: var(--accent);
  transform: scale(0);
  transition: transform .45s cubic-bezier(.3,1.4,.5,1);
  transition-delay: calc(var(--d) * .07s);
}
.ig-cobertura .marca.parcial {
  background: transparent;
  border: 2px solid var(--line-strong);
}
.in .ig-cobertura .marca { transform: scale(1); }

/* A barra de anonimato por canal anima a largura ao entrar na tela. */
.anon-meter .bar i { transition: width 1.1s cubic-bezier(.3,.9,.3,1); }
.anon-meter .bar i { width: 0; }
.in .anon-meter .bar i { width: var(--w); }

@media (max-width: 640px) {
  .ig-cobertura { font-size: .8rem; }
  .ig-cobertura th, .ig-cobertura td { padding: .55rem .3rem; }
  .ig-cobertura thead th { font-size: .6rem; }
}

/* --------------------------------------------------------- 5. ANONIMATO
   O infográfico central do site. Palco fixo à direita, passos à esquerda;
   clicar (ou esperar) troca o que o palco mostra. */

.ig-anon {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(1.2rem, 4vw, 2.6rem);
  align-items: start;
}
@media (max-width: 900px) {
  .ig-anon { grid-template-columns: 1fr; }
  /* No celular o palco vem ANTES da lista: empurrado para depois de cinco
     passos longos, o desenho ficaria a uma rolagem de distância do texto que
     ele ilustra, e ninguém desce até lá. */
  .ig-anon .ig-palco { order: -1; margin-bottom: 1.2rem; }
}

.ig-passos { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.ig-passo {
  display: grid;
  grid-template-columns: 2rem 1fr;
  gap: .9rem;
  align-items: start;
  padding: .9rem 1rem;
  border: 1px solid var(--brand-line);
  border-radius: var(--r-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  transition: background .3s ease, border-color .3s ease;
}
.ig-passo:hover { background: rgba(255,255,255,.04); }
.ig-passo[aria-selected="true"] {
  background: rgba(255,255,255,.07);
  border-color: var(--accent);
}
.ig-passo .n {
  width: 2rem; height: 2rem;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--brand-line);
  font-family: var(--font-mono);
  font-size: .82rem;
  color: var(--brand-ink-2);
  transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.ig-passo[aria-selected="true"] .n {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-ink);
  font-weight: 700;
}
.ig-passo h3 { margin: 0 0 .2rem; font-size: 1rem; }
.ig-passo p { margin: 0; }

/* O palco. Altura estável para o conteúdo não pular a cada troca. */
.ig-palco {
  position: relative;
  /* Gruda enquanto a lista de passos rola ao lado: o palco precisa estar na
     tela no momento em que a pessoa lê o passo que o comanda. */
  position: sticky;
  top: 92px;
  min-height: 300px;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,.07), transparent 70%),
    rgba(0,0,0,.18);
  padding: clamp(1.1rem, 3vw, 1.8rem);
  display: grid;
  place-items: center;
  overflow: hidden;
}
@media (max-width: 900px) { .ig-palco { position: relative; top: auto; } }
.ig-cena { display: none; width: 100%; }
.ig-cena[data-ativa] { display: block; animation: ig-cena-entra .5s cubic-bezier(.2,.8,.2,1); }
@keyframes ig-cena-entra {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Os dois cofres, que aparecem em quase todas as cenas. */
.ig-cofres { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .7rem; }
.ig-cofre {
  border: 1px solid var(--brand-line);
  border-radius: var(--r-sm);
  background: rgba(0,0,0,.25);
  padding: 1.1rem .9rem;
  text-align: center;
}
.ig-cofre b {
  display: block;
  font-family: var(--font-mono);
  font-size: .66rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--brand-ink-2);
  margin-bottom: .55rem;
}
.ig-cofre .conteudo {
  display: flex; flex-wrap: wrap; gap: .3rem; justify-content: center;
  min-height: 76px; align-content: center;
}
.ig-chip {
  font-family: var(--font-mono);
  font-size: .7rem;
  padding: .3em .55em;
  border-radius: 4px;
  background: rgba(255,255,255,.08);
  color: var(--brand-ink);
  white-space: nowrap;
}
.ig-chip.aceso { background: var(--accent); color: var(--accent-ink); font-weight: 600; }
.ig-chip.riscado { text-decoration: line-through; opacity: .45; }

/* O vão entre os cofres, que é o ponto do desenho inteiro. */
.ig-vao { display: grid; place-items: center; gap: .3rem; padding: 0 .2rem; }
.ig-vao .corte {
  width: 2px; height: 62px;
  /* Mais visível que o --brand-line: é o vão que conta a história toda. */
  background: repeating-linear-gradient(180deg, rgba(255,255,255,.34) 0 6px, transparent 6px 12px);
}
.ig-vao .x {
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(255,120,120,.5);
  color: #FF9B9B;
  font-size: .9rem;
  line-height: 1;
}
.ig-legenda-vao {
  font-family: var(--font-mono);
  font-size: .66rem;
  color: var(--brand-ink-2);
  text-align: center;
  margin-top: 1.1rem;
  opacity: .85;
}

/* Cena 4: o corte do k. */
.ig-k { display: flex; align-items: flex-end; justify-content: center; gap: clamp(.5rem, 2.5vw, 1.1rem); height: 190px; position: relative; }
.ig-k .col { display: grid; justify-items: center; gap: .4rem; }
.ig-k .col i {
  width: clamp(26px, 7vw, 40px);
  background: linear-gradient(180deg, var(--accent), color-mix(in srgb, var(--accent) 50%, transparent));
  border-radius: 5px 5px 0 0;
  height: calc(var(--h) * 1px);
  transform-origin: bottom;
  animation: ig-k-sobe .7s cubic-bezier(.2,.8,.2,1) both;
  animation-delay: calc(var(--i) * .1s);
}
.ig-k .col.cortada i {
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.14) 0 5px, transparent 5px 10px);
  border: 1px dashed rgba(255,255,255,.3);
}
@keyframes ig-k-sobe { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.ig-k .col small {
  font-family: var(--font-mono);
  font-size: .6rem;
  color: var(--brand-ink-2);
  text-align: center;
  line-height: 1.3;
}
.ig-k .col.cortada small { color: #FFC08A; }
/* A linha do corte atravessa o gráfico inteiro: é ela que decide. */
.ig-k .corte-k {
  position: absolute;
  left: 0; right: 0;
  bottom: 84px;
  border-top: 1px dashed var(--accent);
  display: flex; justify-content: flex-end;
  animation: ig-k-linha .6s .55s both;
}
.ig-k .corte-k span {
  transform: translateY(-50%);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-mono);
  font-size: .62rem;
  font-weight: 700;
  padding: .15em .5em;
  border-radius: 999px;
}
@keyframes ig-k-linha { from { opacity: 0; } to { opacity: 1; } }

/* Cena 5: a lente sobre o código aberto. */
.ig-auditoria { display: grid; gap: .6rem; font-family: var(--font-mono); font-size: .68rem; color: var(--brand-ink-2); }
.ig-auditoria .ln { display: flex; gap: .7rem; opacity: .55; }
.ig-auditoria .ln.destaque { opacity: 1; color: var(--accent); }
.ig-auditoria .ln span:first-child { opacity: .5; min-width: 1.4rem; text-align: right; }

/* --------------------------------------------------------------- 6. CICLO
   Roda de sete etapas. Gira sozinha e responde a clique. */

.ig-roda {
  display: grid;
  grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
  gap: clamp(1.6rem, 6vw, 4rem);
  align-items: center;
  /* Sem isto o bloco encostava à esquerda e deixava uma faixa morta à direita
     tão larga quanto a própria roda. */
  max-width: 940px;
}
@media (max-width: 760px) { .ig-roda { grid-template-columns: 1fr; justify-items: center; } }

.ig-roda-svg { width: 100%; max-width: 400px; aspect-ratio: 1; }
.ig-roda-svg .trilho { fill: none; stroke: var(--line); stroke-width: 10; }
.ig-roda-svg .arco {
  fill: none;
  stroke: var(--line-strong);
  stroke-width: 10;
  stroke-linecap: butt;
  cursor: pointer;
  transition: stroke .35s ease, stroke-width .35s ease;
}
.ig-roda-svg .arco:hover { stroke: color-mix(in srgb, var(--accent) 55%, var(--line-strong)); }
.ig-roda-svg .arco.ativo { stroke: var(--accent); stroke-width: 15; }
.ig-roda-svg .rot { font-family: var(--font-mono); font-size: 8.5px; fill: var(--muted); letter-spacing: .03em; }
.ig-roda-svg .rot.ativo { fill: var(--accent); font-weight: 700; }

.ig-roda-texto .etapa-n {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.ig-roda-texto h3 { font-size: clamp(1.35rem, 3.6vw, 1.9rem); margin: .3rem 0 .6rem; }
.ig-roda-texto p { margin: 0; max-width: 46ch; }
.ig-roda-texto .troca { animation: ig-cena-entra .4s cubic-bezier(.2,.8,.2,1); }

.ig-roda-navegacao { display: flex; gap: .4rem; margin-top: 1.4rem; flex-wrap: wrap; }
.ig-roda-navegacao button {
  width: 2rem; height: 2rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: .78rem;
  cursor: pointer;
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.ig-roda-navegacao button[aria-current="true"] {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700;
}

/* ------------------------------------------------------------- 7. ENTREGA
   A pilha de provas que sai no fim. */

.ig-pilha { display: grid; gap: .45rem; max-width: 460px; }
.ig-doc {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .8rem;
  padding: .8rem 1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
  background: var(--surface);
  font-size: .9rem;
  opacity: 0;
  transform: translateX(-12px);
}
.in .ig-doc { animation: ig-doc-entra .6s cubic-bezier(.2,.8,.2,1) forwards; animation-delay: calc(var(--i) * .12s); }
@keyframes ig-doc-entra { to { opacity: 1; transform: translateX(0); } }
.ig-doc .sel {
  font-family: var(--font-mono);
  font-size: .6rem;
  letter-spacing: .05em;
  color: var(--accent);
  border: 1px solid var(--accent-soft);
  border-radius: 999px;
  padding: .2em .55em;
  white-space: nowrap;
}

/* Foco visível em tudo que é clicável aqui, sem exceção. */
.ig :is(button, [role="tab"]):focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

/* Texto só para leitor de tela. A matriz de cobertura comunica por forma
   (círculo cheio, vazado, ausente), e forma sozinha não chega a quem não
   enxerga: cada célula carrega a mesma informação em palavra. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* O miolo da roda: número grande da etapa. Faz o desenho ler como mostrador,
   e não como um anel decorativo com texto solto ao lado. */
.ig-roda-svg .miolo-n {
  font-family: var(--font-mono);
  font-size: 34px;
  font-weight: 700;
  fill: var(--accent);
}
.ig-roda-svg .miolo-t {
  font-family: var(--font-mono);
  font-size: 8px;
  fill: var(--muted);
  letter-spacing: .12em;
}