/*
 * O rodape do site — o mesmo em layouts/site (home, busca, silos, conta,
 * painel) e em layouts/ficha (a ficha publica), que nao compartilham folha
 * de estilo. Carregado pelos dois layouts com ?v= do mtime, como perfil.css.
 *
 * Nao depende de variavel de fora: o :root de cada folha define --ink, e as
 * demais cores sao locais ao .rodape-site.
 */

/* 🚨 FAIXA ESCURA, DE BORDA A BORDA. O rodape anterior era uma linha de
   texto no papel: sem cor propria, em pagina curta parecia legenda solta e
   em pagina longa sumia. A tinta escura contra o papel creme diz "aqui
   acaba o conteudo" sem precisar de divisoria — e e a mesma tinta que ja
   marca a secao ativa do painel e o botao principal da ficha.

   As cores sao locais: o vermelho da marca (#DE1A2B) sobre fundo escuro
   tem contraste de 4,4:1, pouco para texto miudo — a variante clareada
   chega a 6:1. Os textos apagados ficam acima de 7:1. */
.rodape-site {
  --rodape-fundo: var(--ink);
  --rodape-texto: #d9d3c9;
  --rodape-suave: #9c948b;
  --rodape-brilho: #ffffff;
  --rodape-red: #ff5f6b;
  --rodape-fio: rgba(255, 255, 255, 0.09);

  background: var(--rodape-fundo);
  color: var(--rodape-texto);
  margin-top: 0; /* o respiro e o padding-bottom do .wrap */
  font-size: 13.5px; line-height: 1.55;
}
.rodape-site a { color: inherit; text-decoration: none; }
.rodape-site a:hover { color: var(--rodape-brilho); }
.rodape-site a:focus-visible { outline-color: var(--rodape-red); }

/* A mesma coluna de 860px do conteudo, para a marca do rodape cair na
   vertical da marca do topo. */
.rodape-conteudo, .rodape-legal {
  max-width: 892px; margin: 0 auto; padding: 0 16px;
}
.rodape-conteudo {
  display: grid;
  /* A ultima coluna e mais larga: "Politica de privacidade" e o rotulo mais
     comprido e nao pode quebrar em duas linhas ao lado de links de uma. */
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1.3fr;
  gap: 28px 22px;
  padding-top: 44px; padding-bottom: 40px;
}
.rodape-site.compacto .rodape-conteudo { display: none; }

/* A marca em versao clara: "CNPJ" em branco, "Bio" e o ponto no vermelho
   clareado — a mesma divisao do topo, invertida para o fundo escuro. */
.rodape-marca .marca {
  display: inline-block; margin-bottom: 12px;
  font-family: 'IBM Plex Mono', monospace; font-size: 15px; letter-spacing: .01em;
}
.rodape-marca .marca b { font-weight: 600; color: var(--rodape-red); }
.rodape-marca .marca .marca-cnpj { color: var(--rodape-brilho); }
.rodape-marca .marca .marca-ponto { color: var(--rodape-red); font-weight: 700; }
.rodape-marca p { margin: 0 0 8px; max-width: 30em; color: var(--rodape-texto); }
.rodape-marca .rodape-base {
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; letter-spacing: .04em;
  color: var(--rodape-suave);
}
.rodape-marca .rodape-base strong { color: var(--rodape-texto); font-weight: 600; }

.rodape-coluna h2 {
  font-family: 'IBM Plex Mono', monospace; font-size: 10px; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase; color: var(--rodape-suave);
  margin: 0 0 12px;
}
.rodape-coluna ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rodape-coluna a { color: var(--rodape-texto); }
.rodape-coluna a:hover { color: var(--rodape-brilho); }

/* A linha de valor legal, separada por um fio — presente tambem na versao
   compacta do painel. */
.rodape-legal {
  border-top: 1px solid var(--rodape-fio);
  padding-top: 18px; padding-bottom: 22px;
  font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; line-height: 1.7;
  color: var(--rodape-suave);
}
.rodape-site.compacto .rodape-legal { border-top: 0; padding-top: 22px; }
.rodape-legal p { margin: 0; }
.rodape-legal strong { color: var(--rodape-texto); font-weight: 500; }
.rodape-legal a { color: var(--rodape-texto); }
.rodape-legal a:hover { color: var(--rodape-red); }
.rodape-legal .rodape-assinatura { margin-top: 6px; }

@media (max-width: 760px) {
  .rodape-conteudo { grid-template-columns: repeat(2, 1fr); gap: 26px 20px; padding-top: 36px; }
  .rodape-marca { grid-column: 1 / -1; }
}
/* Duas colunas cabem em qualquer celular atual (390-430px); uma coluna so
   viraria uma lista de 13 links de altura. Fica para telas muito estreitas. */
@media (max-width: 340px) {
  .rodape-conteudo { grid-template-columns: 1fr; }
}