/* Feito pela Sator (escolhida em 28/10): a assinatura da Sator no rodapé de todo site e produto nosso, levando pro
 * Instagram. "feito pela" + o SATOR do logo (com o cubo no O) + a setinha. Discreta: herda a cor e a letra do rodapé
 * e fica a 62%; acende com o mouse ou o foco. O HTML traz o desenho parado (é o que aparece sem JS); o
 * feito-pela-sator.js desenha o cubo vivo por cima, no mesmo lugar. */
.fps {
  --fps-acento: #9b8262; /* o bronze do logo */
  position: relative;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 4px 2px;
  color: inherit; text-decoration: none; opacity: .62;
  font-family: inherit; font-size: 11px; font-weight: 500; line-height: 1.3; letter-spacing: .01em; white-space: nowrap;
  transition: opacity .3s ease;
  -webkit-tap-highlight-color: transparent;
}
.fps:hover, .fps:focus-visible { opacity: 1; }
.fps:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; border-radius: 6px; }
.fps-palavra { display: block; height: 20px; width: auto; flex: none; overflow: visible; }
.fps-palavra path { fill: currentColor; }
.fps-palavra .fps-logo-aro { fill: var(--fps-acento); }
.fps-seta { opacity: .72; transition: opacity .3s, color .3s; }
.fps:hover .fps-seta { opacity: 1; color: var(--fps-acento); }

/* vivo (com o JS): o desenho passa pro palco, no lugar exato da palavra */
.fps-palco { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.fps-viva .fps-palavra { visibility: hidden; }
.fps-letras { fill: currentColor; }
.fps-linhas { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
.fps-aro { fill: var(--fps-acento); }