/* ==========================================================================
   especialidades.css

   Carregado so na home. Transforma as pilulas de "Para quem e" em links de
   verdade, sem precisar mexer no styles.css (o que obrigaria a trocar o ?v=
   em todos os HTMLs do site).

   A pilula continua com a mesma aparencia; o que muda e que a area clicavel
   passa a ser a pilula inteira, e nao so o texto (lei de Fitts).
   ========================================================================== */

.audience-list li { padding: 0; border: 0; background: none; backdrop-filter: none; }

.audience-list li > a,
.audience-list li > span {
  display: block;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  background: rgba(255, 255, 255, .13);
  backdrop-filter: blur(10px);
  font-weight: 700;
  color: inherit;
  transition: background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}

.audience-list li > a:hover,
.audience-list li > a:focus-visible {
  background: rgba(255, 255, 255, .24);
  border-color: rgba(255, 255, 255, .6);
  transform: translateY(-2px);
  outline: none;
}

/* "e muito mais" nao e link, entao nao finge que e. */
.audience-list li > span { opacity: .72; font-weight: 600; }

/* Rodape: redes sociais agora moram embaixo da marca. */
.footer-brand .socials { margin-top: 18px; }

@media (prefers-reduced-motion: reduce) {
  .audience-list li > a { transition: none; }
  .audience-list li > a:hover { transform: none; }
}