/* =========================================================
   Selo "Criado por GR Digital" — usado no rodapé de TODOS os
   projetos. Não muda com a identidade de cada site: é sempre igual.

   HTML (copiar exatamente):
   <a class="gr-badge" href="https://www.sitesgrdigital.com.br" (nos demos desta pasta: ../../) target="_top" aria-label="Site criado pela GR Digital">
     <span class="gr-badge-mark" aria-hidden="true">GR<i></i></span>
     <span>Criado por <b>GR Digital</b></span>
   </a>

   Fundo escuro: adicione a classe "gr-badge--dark".
   ========================================================= */
.gr-badge {
  display: inline-flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 12px 0 5px; border-radius: 999px;
  background: #FFFFFF; border: 1px solid #E2DFD8; color: #4A4F57;
  font: 500 12.5px/1 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0; text-decoration: none; white-space: nowrap;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.gr-badge b { color: #0F1114; font-weight: 600; }
.gr-badge:hover { border-color: #0B6E4F; box-shadow: 0 6px 16px -8px rgba(11, 42, 32, .35); transform: translateY(-1px); }
.gr-badge:focus-visible { outline: 2px solid #0B6E4F; outline-offset: 2px; }

/* Logo: quadrado escuro com "GR" e o quadradinho verde no canto */
.gr-badge-mark {
  position: relative; flex: none; width: 24px; height: 24px; border-radius: 6px;
  background: #0F1114; color: #F6F5F1;
  display: grid; place-items: center;
  font: 700 10.5px/1 "Geist", system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: -0.04em;
}
.gr-badge-mark i { position: absolute; right: 3px; bottom: 3px; width: 4px; height: 4px; border-radius: 1px; background: #3DDC97; }

/* Variante para rodapés escuros */
.gr-badge--dark { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); color: #A8C3B7; }
.gr-badge--dark b { color: #F6F5F1; }
.gr-badge--dark .gr-badge-mark { background: #F6F5F1; color: #0F1114; }
.gr-badge--dark .gr-badge-mark i { background: #0B6E4F; }
.gr-badge--dark:hover { border-color: #3DDC97; }

@media (prefers-reduced-motion: reduce) { .gr-badge { transition: none; } .gr-badge:hover { transform: none; } }