/* ==========================================================================
   Rodapé do site (public_html/rodape.php) e da área logada (public_html/painel/footer.php, com a variante
   .rodape--painel, no fim do arquivo)
   Carregado por um <link> que é o primeiro elemento dentro do próprio <footer>: vem depois do CSS de todas as páginas
   e vence os empates. O <link> fica dentro do footer, e não antes dele, para não quebrar as regras "X + footer" das
   páginas. Classes .rodape-*; nenhuma regra antiga do main.css (.container-banner, .menu-footer...) casa com elas.
   Aqui também se neutraliza o que vaza para o rodapé de regras gerais: main.css põe font-weight 600 em todo elemento,
   display: flex no footer e largura, fundo e padding em todo button; institucional.css põe margem em todo li.
   Mobile first.
   ========================================================================== */

/* Entre o fim do conteúdo e o rodapé ficam 48px (3rem; 72px a partir de 2150px, onde a raiz do site passa a 24px).
   footer.rodape empata com ".suporte-page + footer" (suporte.css) e ganha por vir depois. */
footer.rodape {
  display: block;
  margin: 3rem 0 0;
  padding: 72px 0 0;
  background-color: var(--color-3);
  color: #E6EDF7;
  font-size: 1rem;
  line-height: 1.6;
}
footer.rodape,
footer.rodape * {
  font-weight: 400;
}
footer.rodape p,
footer.rodape ul,
footer.rodape li,
footer.rodape h2,
footer.rodape h3 {
  margin: 0;
  padding: 0;
}
footer.rodape ul {
  list-style: none;
}
footer.rodape a {
  color: #E6EDF7;
  text-decoration: none;
}
footer.rodape a:hover {
  color: #ffffff;
  text-decoration: underline;
}
footer.rodape a:focus-visible,
footer.rodape button:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 3px;
  border-radius: 2px;
}
.rodape-icone {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Regras de bloco que caem num p, ul ou li levam o prefixo footer.rodape, para não perder para a limpeza acima. */

/* ---------- Faixa de ajuda (só com $showBanner diferente de false) ---------- */
.rodape-ajuda__conteudo {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
footer.rodape .rodape-ajuda__titulo {
  color: #ffffff;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
}
.rodape-ajuda__acoes {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
footer.rodape .rodape-ajuda__whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  border: 1px solid #ffffff;
  border-radius: 999px;
  color: #ffffff;
  font-weight: 600;
  line-height: 1.5;
}
footer.rodape .rodape-ajuda__whatsapp:hover {
  background-color: rgba(255, 255, 255, 0.1);
  text-decoration: none;
}
footer.rodape .rodape-ajuda__whatsapp:focus-visible {
  border-radius: 999px;
}
.rodape-ajuda__whatsapp img {
  width: 20px;
  height: 20px;
}
footer.rodape .rodape-ajuda__link {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ---------- Grade: marca e quatro colunas de links ----------
   O espaço de cima da grade só existe para afastá-la da divisória da faixa de ajuda; sem a faixa ($showBanner = false),
   a grade começa logo no padding do footer. */
.rodape-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 40px;
  padding: 0 0 48px;
}
.rodape-ajuda + .container-fluid .rodape-grade {
  padding-top: 48px;
}
/* O max-width deixa o logo encolher quando a coluna da marca fica mais estreita que ele (de 992px a cerca de 1240px). */
.rodape-logo {
  display: inline-block;
  max-width: 100%;
}
.rodape-logo img {
  display: block;
  width: 220px;
  max-width: 100%;
  height: auto;
}
footer.rodape .rodape-marca__texto {
  max-width: 320px;
  margin-top: 20px;
}
/* Redes: o círculo de 44px não tem borda; é só a área de clique, que aparece no hover (fundo) e no foco (contorno). */
footer.rodape .rodape-redes {
  display: flex;
  gap: 8px;
  margin-top: 24px;
}
footer.rodape .rodape-redes a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
}
footer.rodape .rodape-redes a:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
footer.rodape .rodape-redes a:focus-visible {
  border-radius: 50%;
}
/* Símbolos oficiais dos kits das redes, na versão branca, com 28px na maior medida (o do YouTube fica com 28 × 19,6),
   o que deixa 8px até a borda da área de 44px. No LinkedIn os 28px são do quadrado: o ® do arquivo sobra à direita, e a
   margem negativa do tamanho dele mantém o quadrado no centro da área. */
footer.rodape .rodape-redes img {
  display: block;
  width: 28px;
  height: auto;
}
footer.rodape .rodape-redes .rodape-redes__linkedin {
  width: auto;
  height: 28px;
  margin-right: -2.16px;
}
footer.rodape .rodape-coluna__titulo {
  margin-bottom: 16px;
  color: #ffffff;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.4;
}
.rodape-lista {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
footer.rodape .rodape-contato__rotulo {
  display: block;
  color: #ffffff;
  font-size: 0.875rem;
  font-weight: 600;
}
footer.rodape .rodape-contato a {
  font-weight: 600;
}
.rodape-contato__horario {
  display: block;
  color: #BAC7DA;
  font-size: 0.875rem;
  line-height: 1.5;
}
/* "Gerenciar cookies" é um button com cara de link: desfaz fundo, padding, borda e largura que main.css põe em todo
   button. */
footer.rodape .rodape-cookies {
  width: auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  color: #E6EDF7;
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  text-align: left;
  cursor: pointer;
}
footer.rodape .rodape-cookies:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ---------- Linha do pagador e barra final ---------- */
footer.rodape .rodape-pagador {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 24px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.rodape-pagador .rodape-icone {
  margin-top: 2px;
}
footer.rodape .rodape-pagador a {
  color: #ffffff;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* O padding da direita deixa a barra fora do caminho do botão flutuante do WhatsApp, que fica no canto. */
.rodape-final {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 80px 32px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #BAC7DA;
  font-size: 0.875rem;
  line-height: 1.5;
}

@media (min-width: 768px) {
  .rodape-ajuda__conteudo {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .rodape-ajuda__acoes {
    flex-direction: row;
    align-items: center;
    gap: 24px;
  }
  .rodape-grade {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 40px 32px;
  }
  .rodape-marca {
    grid-column: 1 / -1;
  }
}

@media (min-width: 992px) {
  footer.rodape {
    padding-top: 96px;
  }
  .rodape-grade {
    grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
    gap: 32px;
    padding-bottom: 56px;
  }
  .rodape-ajuda + .container-fluid .rodape-grade {
    padding-top: 56px;
  }
  .rodape-marca {
    grid-column: auto;
  }
  .rodape-logo img {
    width: 280px;
  }
}

/* A barra final vira linha só a partir de 1200px: abaixo disso o texto legal e o "© ano PagHiper" não cabem lado a lado
   com a reserva do botão flutuante e quebrariam no meio. */
@media (min-width: 1200px) {
  .rodape-final {
    flex-direction: row;
    justify-content: space-between;
    gap: 24px;
  }
}

/* ---------- Botão flutuante do WhatsApp ----------
   Glifo branco oficial sobre o verde de "aprovado" do site (#0E9F5A, 3,4:1 com o branco). Fica abaixo da barra de
   cookies (z-index 1000); o id #waurlsite continua para inicio.css subir o botão quando o CTA fixo da home aparece.
   O "Ajuda?" é só uma dica no hover e no foco, sem temporizador. */
.rodape-whatsapp {
  position: fixed;
  right: 24px;
  bottom: 40px;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background-color: #0E9F5A;
  box-shadow: 0 8px 24px rgba(2, 30, 70, 0.24);
}
.rodape-whatsapp img {
  width: 30px;
  height: 30px;
}
footer.rodape .rodape-whatsapp:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  border-radius: 50%;
  box-shadow: 0 0 0 7px var(--color-3);
}
.rodape-whatsapp__dica {
  position: absolute;
  top: 50%;
  right: calc(100% + 12px);
  padding: 6px 14px;
  border-radius: 999px;
  background-color: #ffffff;
  box-shadow: 0 4px 16px rgba(2, 30, 70, 0.16);
  color: var(--color-3);
  font-size: 0.875rem;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-50%);
  transition: opacity 0.15s ease, visibility 0s linear 0.15s;
}
footer.rodape .rodape-whatsapp__dica {
  font-weight: 600;
}
.rodape-whatsapp:hover .rodape-whatsapp__dica,
.rodape-whatsapp:focus-visible .rodape-whatsapp__dica {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.15s ease, visibility 0s;
}
/* Esc fecha a dica sem tirar o ponteiro nem o foco do botão (rodape.js põe a classe e a tira quando os dois saem). */
.rodape-whatsapp.is-dica-fechada .rodape-whatsapp__dica {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

/* Alto contraste (forced-colors): os fundos viram a cor de fundo do sistema e as imagens não mudam, então o que é imagem
   branca sumiria no tema claro. O botão flutuante, o logo e os círculos das redes ficam com as próprias cores (o logo
   sobre uma placa e os símbolos das redes sobre o círculo, os dois no azul do rodapé, com o contorno de foco na cor de
   destaque do sistema); o glifo da pílula "WhatsApp", decorativo, sai. */
@media (forced-colors: active) {
  .rodape-whatsapp,
  .rodape-logo,
  footer.rodape .rodape-redes a {
    forced-color-adjust: none;
  }
  footer.rodape .rodape-redes a,
  footer.rodape .rodape-redes a:hover {
    background-color: var(--color-3);
  }
  footer.rodape .rodape-redes a:focus-visible {
    outline-color: Highlight;
  }
  .rodape-logo {
    padding: 8px 12px;
    border-radius: 8px;
    background-color: var(--color-3);
  }
  footer.rodape .rodape-logo:focus-visible {
    outline-color: Highlight;
    border-radius: 8px;
  }
  .rodape-ajuda__whatsapp img {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rodape-whatsapp__dica,
  .rodape-whatsapp:hover .rodape-whatsapp__dica,
  .rodape-whatsapp:focus-visible .rodape-whatsapp__dica {
    transition: none;
  }
}

/* ==========================================================================
   Variante da área logada: footer.rodape.rodape--painel (public_html/painel/footer.php)
   Mesma marcação e mesmas classes do rodapé do site, com os links do painel, sem a linha do pagador e com a faixa de
   ajuda sempre visível. O botão flutuante fica fora do <footer>, logo depois dele (.rodape--painel + .rodape-whatsapp),
   para continuar na tela no editor de templates, onde o rodapé fica oculto. Toda regra daqui leva .rodape--painel e não
   casa com o rodapé do site. O que muda em relação a ele:
   - contêiner: no lugar do .container-fluid do site, .rodape-largura, com a largura da .page do painel (1000px,
     centralizada; abaixo disso, fluido, com 20px de cada lado). A faixa azul continua de borda a borda;
   - clear: both, para o rodapé ficar abaixo da barra lateral e do conteúdo, floats que a .page do painel não limpa. Com
     clear, a margem de cima não afasta o rodapé dos floats: os 48px acima da faixa viram padding fora do fundo
     (background-clip), e o padding de cima da faixa passa para a faixa de ajuda;
   - o que no site vem de fora deste arquivo: a cor --color-3 e a fonte Montserrat (main.css; a fonte, do Google Fonts,
     entra no painel pelo segundo <link> do footer.php), o .sr-only e o box-sizing: border-box (Bootstrap);
   - o que vaza do painel.css: p com 16px/25px e #333;
   - a partir de 1200px, a barra final perde a reserva de 80px para o botão flutuante, que ali fica fora da largura do
     conteúdo.
   Os tamanhos em rem dão o mesmo que no site: a raiz do painel tem 16px em toda largura (a do site passa a 24px a partir
   de 2150px, e o conteúdo do painel não acompanha).
   ========================================================================== */
footer.rodape.rodape--painel {
  --color-3: #021e46;
  clear: both;
  margin: 0;
  padding: 48px 0 0;
  background-clip: content-box;
  font-family: "Montserrat", sans-serif;
}
footer.rodape--painel,
footer.rodape--painel *,
.rodape--painel + .rodape-whatsapp,
.rodape--painel + .rodape-whatsapp * {
  box-sizing: border-box;
}
footer.rodape--painel p {
  color: inherit;
  font-size: inherit;
  line-height: inherit;
}
.rodape--painel .sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.rodape--painel .rodape-ajuda {
  padding-top: 72px;
}
.rodape--painel .rodape-largura {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
}
.rodape--painel .rodape-ajuda + .rodape-largura .rodape-grade {
  padding-top: 48px;
}

/* Botão flutuante: fora do <footer>, não herda dele a cor nem a fonte, e as regras do site para o foco e para o peso da
   dica (footer.rodape .rodape-whatsapp...) não casam com ele. */
.rodape--painel + .rodape-whatsapp {
  --color-3: #021e46;
  font-family: "Montserrat", sans-serif;
  text-decoration: none;
}
.rodape--painel + .rodape-whatsapp .rodape-whatsapp__dica {
  font-weight: 600;
}
.rodape--painel + .rodape-whatsapp:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 2px;
  border-radius: 50%;
  box-shadow: 0 0 0 7px var(--color-3);
}

@media (min-width: 992px) {
  .rodape--painel .rodape-ajuda {
    padding-top: 96px;
  }
  .rodape--painel .rodape-ajuda + .rodape-largura .rodape-grade {
    padding-top: 56px;
  }
}

@media (min-width: 1000px) {
  .rodape--painel .rodape-largura {
    padding: 0;
  }
}

@media (min-width: 1200px) {
  .rodape--painel .rodape-final {
    padding-right: 0;
  }
}

/* Editor de templates (templates-editar.php, a única página do painel com .container-fluid direto no body): o rodapé
   fica oculto até 1200px, como o #foot { display: none } do editor-email.css; o botão flutuante fica. */
@media (max-width: 1200px) {
  body > .container-fluid ~ footer.rodape--painel {
    display: none;
  }
}