/* Figuras do framework e da jornada (grupo D2, revisão de 12/10/2026). Escopo: .fig-farol e classes ff*.
   O estado final é o padrão: as regras de entrada só valem na tela, sem movimento reduzido, e só depois que
   figuras.js arma a figura (.is-armado). Sem JS, na impressão e com movimento reduzido, nada daqui esconde dado. */

.fig-farol{--ff-ink:#231F20;--ff-red:#DB1E2F;--ff-gray:#E0E1E0;--ff-ease:cubic-bezier(.16,1,.3,1);
  container-type:inline-size;margin:0;color:var(--ff-ink);
  font-family:"Hanken Grotesk","Proxima Nova",system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.45}
.fig-farol *{box-sizing:border-box}
.fig-farol svg{display:block;width:100%;height:auto;overflow:visible;font-family:inherit}
.fig-farol text{font-variant-numeric:tabular-nums}

/* larga e estreita: troca pela largura que a figura TEM (abaixo de 800 px, a estreita) */
.fig-farol__larga{display:none}
.fig-farol__estreita svg{max-width:540px;margin-inline:auto}
@container (min-width:800px){
  .fig-farol__larga{display:block}
  .fig-farol__estreita{display:none}
}

/* legendas, leitura e nota: HTML, para quebrar linha e manter o corpo do texto */
.fig-farol__corpo{display:grid;gap:28px}
.fig-farol__lado{display:grid;gap:22px;align-content:center;min-width:0}
.fig-farol__pe{display:grid;gap:14px;margin-top:22px;min-width:0}
.fig-farol__niveis,.fig-farol__formas,.fig-farol__amostra{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;line-height:1.35}
.fig-farol__niveis li,.fig-farol__formas li,.fig-farol__amostra li{display:flex;align-items:center;gap:8px;min-width:0}
.fig-farol__niveis svg,.fig-farol__amostra svg{width:22px;height:14px;flex:none}
.fig-farol__formas{flex-direction:column;gap:12px;font-size:15px}
.fig-farol__titulo-leg{margin:0 0 8px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.fig-farol__formas svg{width:40px;height:14px;flex:none}
.fig-farol__formas b{font-weight:800}
.fig-farol__leitura{margin:0;max-width:56ch;font-size:16px;font-weight:600;line-height:1.45;padding-left:14px;border-left:3px solid var(--ff-red)}
.fig-farol__nota{margin-top:18px;max-width:72ch;font-size:13px;opacity:.75}
.fig-farol__tabela{margin-top:8px;max-width:100%;overflow-x:auto;font-size:14px}
.fig-farol__tabela summary{cursor:pointer;font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:6px 0;width:max-content}
.fig-farol__tabela table{border-collapse:collapse;margin-top:8px;min-width:100%}
.fig-farol__tabela th,.fig-farol__tabela td{text-align:left;padding:6px 12px 6px 0;border-bottom:1px solid var(--ff-gray);vertical-align:top}
.fig-farol__tabela thead th{font-size:12px;letter-spacing:.04em;text-transform:uppercase}

/* o radar: desenho e legenda lado a lado quando há espaço */
.fig-farol--radar .fig-farol__larga svg{max-width:640px;margin-inline:auto}
@container (min-width:900px){
  .fig-farol--radar .fig-farol__corpo{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);align-items:center;gap:clamp(24px,4vw,56px)}
  .fig-farol--radar .fig-farol__formas{font-size:16px}
}

/* ------------------------------------------------------------- entrada (só na tela e sem movimento reduzido) */
.fig-farol .ffr-ponto,.fig-farol .ffp-passo,.fig-farol .fft-prog,.fig-farol .fft-saida2{transform-box:fill-box;transform-origin:center}
.fig-farol .fft-prog{transform-origin:left center}

@media screen and (prefers-reduced-motion:no-preference){
  /* radar: a linha da empresa se desenha, os pontos chegam, a fronteira anda (figuras.js move os pontos) */
  .fig-farol.is-armado .ffr-orla{stroke-dasharray:var(--ff-len);stroke-dashoffset:var(--ff-len)}
  .fig-farol.is-armado .ffr-orla-area,.fig-farol.is-armado .ffr-ponto{opacity:0}
  .fig-farol.is-armado .ffr-ponto{transform:scale(.3)}
  .fig-farol.is-armado.is-on .ffr-orla{stroke-dashoffset:0;transition:stroke-dashoffset 1.2s var(--ff-ease) .15s}
  .fig-farol.is-armado.is-on .ffr-orla-area{opacity:1;transition:opacity .7s ease .9s}
  .fig-farol.is-armado.is-on .ffr-ponto{opacity:1;transform:none;transition:opacity .35s ease 1s,transform .5s var(--ff-ease) 1s}

  /* mapa de calor: linha por linha */
  .fig-farol.is-armado .ffc-cel{opacity:0;transform:translateY(6px)}
  .fig-farol.is-armado.is-on .ffc-cel{opacity:1;transform:none;transition:opacity .5s ease calc(var(--i,0)*110ms + .1s),transform .6s var(--ff-ease) calc(var(--i,0)*110ms + .1s)}

  /* variância: primeiro a barra inteira na cor da mediana; depois ela se abre nos cinco níveis */
  .fig-farol.is-armado .ffv-media{opacity:1}
  .fig-farol.is-armado .ffv-seg,.fig-farol.is-armado .ffv-rot,.fig-farol.is-armado .ffv-num{opacity:0}
  .fig-farol.is-armado.is-on .ffv-media{opacity:0;transition:opacity .6s ease calc(var(--i,0)*90ms + .55s)}
  .fig-farol.is-armado.is-on .ffv-seg,.fig-farol.is-armado.is-on .ffv-rot,.fig-farol.is-armado.is-on .ffv-num{opacity:1;transition:opacity .6s ease calc(var(--i,0)*90ms + .55s)}

  /* cinco passos: o caminho se desenha e os passos chegam na ordem; o Raio-X liga no quarto; a volta por último */
  .fig-farol.is-armado .ffp-caminho,.fig-farol.is-armado .ffp-pulso{stroke-dasharray:var(--ff-len);stroke-dashoffset:var(--ff-len)}
  .fig-farol.is-armado .ffp-passo{opacity:0;transform:translateY(10px)}
  .fig-farol.is-armado .ffp-volta,.fig-farol.is-armado .ffp-volta-ponta,.fig-farol.is-armado .ffp-volta-txt{opacity:0}
  .fig-farol.is-armado.is-on .ffp-caminho{stroke-dashoffset:0;transition:stroke-dashoffset 1.8s var(--ff-ease) .1s}
  .fig-farol.is-armado.is-on .ffp-passo{opacity:1;transform:none;transition:opacity .45s ease calc(var(--i,0)*300ms + .15s),transform .6s var(--ff-ease) calc(var(--i,0)*300ms + .15s)}
  .fig-farol.is-armado.is-on .ffp-pulso{stroke-dashoffset:0;transition:stroke-dashoffset 1.4s linear 1.2s}
  .fig-farol.is-armado.is-on .ffp-volta,.fig-farol.is-armado.is-on .ffp-volta-ponta,.fig-farol.is-armado.is-on .ffp-volta-txt{opacity:.8;transition:opacity .7s ease 2.2s}
  .fig-farol.is-armado.is-on .ffp-volta-txt{opacity:1}

  /* travessia: do lado que conversa, a IA "digita"; do lado que trabalha, as tarefas correm juntas e as entregas chegam */
  .fig-farol.is-armado .fft-travessia{stroke-dasharray:var(--ff-len);stroke-dashoffset:var(--ff-len)}
  .fig-farol.is-armado .fft-prog{transform:scaleX(0)}
  .fig-farol.is-armado .fft-saida2{opacity:0;transform:scale(.4)}
  .fig-farol.is-armado.is-on .fft-travessia{stroke-dashoffset:0;transition:stroke-dashoffset 1.6s var(--ff-ease) .5s}
  .fig-farol.is-armado.is-on .fft-prog{transform:none;transition:transform 1.3s cubic-bezier(.4,0,.2,1) calc(var(--j,0)*140ms + 1.2s)}
  .fig-farol.is-armado.is-on .fft-saida2{opacity:1;transform:none;transition:opacity .3s ease calc(var(--j,0)*70ms + 2.4s),transform .45s var(--ff-ease) calc(var(--j,0)*70ms + 2.4s)}
  .fig-farol.is-armado.is-on .fft-pontos{animation:fft-digita 1s ease-in-out 3;animation-delay:calc(var(--j,0)*160ms + .2s)}
}
@keyframes fft-digita{0%,100%{opacity:1}50%{opacity:.2}}
@media print{.fig-farol__desenho{break-inside:avoid}}