/* ==========================================================================
   Rodapé
   Simples: o monograma (volta ao início) e a linha dos direitos reservados,
   centralizados, no preto do site. O divisor vermelho vem antes, como entre
   as seções. Vermelho só no ponto que separa as duas partes da linha.
   ========================================================================== */

.rodape{
  display:flex;flex-direction:column;align-items:center;gap:16px;
  padding:clamp(44px,8vh,72px) 16px calc(clamp(28px,5vh,44px) + env(safe-area-inset-bottom));
  background:var(--void);
  text-align:center;
}

.rodape__marca{display:block;opacity:.8;transition:opacity .25s}
.rodape__marca:hover,
.rodape__marca:focus-visible{opacity:1}
.rodape__marca:focus-visible{outline:1px solid var(--sharingan);outline-offset:6px}
.rodape__marca img{display:block;height:56px;width:auto}

.rodape__direitos{
  margin:0;
  font:500 11px/1.9 var(--f-ui);
  letter-spacing:.24em;text-transform:uppercase;
  color:var(--ink);
}
.rodape__sep{
  display:inline-block;vertical-align:middle;
  width:4px;height:4px;margin:0 1em;
  border-radius:50%;
  background:var(--sharingan);
}

/* celular: as duas partes em linhas separadas, com o ponto vermelho entre elas */
@media (max-width:560px){
  .rodape__sep{display:block;margin:.55em auto}
}