/* Selos 88x31 no estilo dos "anúncios" da web antiga. Desenhados só com CSS/texto (sem logotipos de terceiros). */
.badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; align-items: center; padding: 8px 0; }
.b88 {
  width: 88px; height: 31px; box-sizing: border-box; flex: none; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  text-decoration: none; line-height: 1.05; font-family: 'Courier New', Courier, monospace; font-weight: bold;
  border: 1px solid #000; box-shadow: inset 1px 1px 0 rgba(255,255,255,.55), inset -1px -1px 0 rgba(0,0,0,.45);
}
.b88 small { display: block; font-size: 7px; letter-spacing: .6px; text-transform: uppercase; }
.b88 b { display: block; font-size: 13px; letter-spacing: .3px; }
a.b88:hover { filter: brightness(1.12); }
.b88.node { background: linear-gradient(#35661f, #14300c); color: #c9f19b; }
.b88.node b { color: #8cc84b; font-size: 14px; }
.b88.pix { background: linear-gradient(#3fcdbd, #1f9b8d); color: #fff; }
.b88.pix b { font-size: 15px; letter-spacing: 1px; }
.b88.pix b::before { content: '\25C6\00a0'; font-size: 10px; vertical-align: 1px; }
.b88.html { background: #1d1d1d; color: #ffd24a; } .b88.html b { color: #fff; font-size: 11px; }
.b88.res { background: linear-gradient(#e8eaee, #b9bec7); color: #1a2440; } .b88.res b { font-size: 11px; }
.b88.zap { background: linear-gradient(#35d874, #1a9a4c); color: #fff; } .b88.zap b { font-size: 10px; letter-spacing: 0; }
.b88.ad { background: #fff36b; color: #b00000; border-color: #b00000; }
.b88.ad b { font-size: 14px; animation: b88blink 1.2s steps(2, start) infinite; }
@keyframes b88blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .b88.ad b { animation: none; } }
.badges-label { text-align: center; font-size: 9px; letter-spacing: 2px; color: #8a8f80; text-transform: uppercase; margin-top: 6px; }