/* Botões da parceria, por enquanto só no teste-topo-1.html (carregado depois dos outros CSS).
   Todas as chamadas de WhatsApp da página seguem o botão do topo: contorno de 1 px em pílula, como o Contato do
   cabeçalho, e texto pequeno em caixa alta, sem degradê nem brilho. Os botões do filtro das áreas também viram pílula
   e as setas do carrossel voltam a ser círculos. Com o mouse por cima (ou o dedo, no celular), cada botão se preenche na
   cor de quem representa, como os botões do filtro das áreas:
   - Dr. Marco: dourado sobre o escuro e sobre o marfim;
   - Dra. Rosemary: branco, nos dois fundos.
   As cores vêm de variáveis por fundo: o padrão é o marfim; .dark troca para o escuro; o modo da Rosemary nas áreas e o
   cartão dela no contato voltam ao marfim. */

:root a:is(.hero-parceria-cta, .cta-whatsapp, .contact-whatsapp)[data-lawyer] {
  --bt-linha: rgb(146 104 51 / .6);
  --bt-texto: var(--rosy-ink);
  --bt-icone: var(--rosy-gold-dark);
  --bt-marco-fundo: var(--mc-ouro);
  --bt-marco-linha: var(--mc-ouro-linha);
  --bt-marco-texto: var(--ink);
  --bt-marco-icone: var(--ink);
  --bt-rosy-linha: var(--rosy-gold-dark);
  border: 1px solid var(--bt-linha);
  border-radius: 999px;
  background: transparent;
  box-shadow: none;
  color: var(--bt-texto);
  transform: none;
  transition: background-color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
/* Medidas do botão do topo (hero-parceria.css) levadas às chamadas das seções; o topo mantém os ajustes de celular dele. */
:root a:is(.cta-whatsapp, .contact-whatsapp)[data-lawyer] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  font: 500 var(--fs-caption)/1.2 var(--sans);
  letter-spacing: .14em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
:root .dark a:is(.hero-parceria-cta, .cta-whatsapp, .contact-whatsapp)[data-lawyer] {
  --bt-linha: var(--gold-500);
  --bt-texto: var(--cream);
  --bt-icone: var(--gold-300);
  --bt-marco-fundo: var(--mc-ouro);
  --bt-marco-linha: var(--mc-ouro-linha);
  --bt-marco-texto: var(--ink);
  --bt-marco-icone: var(--ink);
  --bt-rosy-linha: #fff;
}
:root .practice--duo[data-modo="rosy"] a:is(.cta-whatsapp, .contact-whatsapp)[data-lawyer],
:root .contact-duo-card--rosy a:is(.cta-whatsapp, .contact-whatsapp)[data-lawyer] {
  --bt-linha: rgb(146 104 51 / .6);
  --bt-texto: var(--rosy-ink);
  --bt-icone: var(--rosy-gold-dark);
  --bt-marco-fundo: var(--mc-ouro);
  --bt-marco-linha: var(--mc-ouro-linha);
  --bt-marco-texto: var(--ink);
  --bt-marco-icone: var(--ink);
  --bt-rosy-linha: var(--rosy-gold-dark);
}
:root a:is(.hero-parceria-cta, .cta-whatsapp, .contact-whatsapp)[data-lawyer] svg {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  color: var(--bt-icone);
  transition: color var(--dur-2) var(--ease);
}
.button.contact-whatsapp > span > span { gap: 10px; }

@media (hover: hover) {
  :root a:is(.hero-parceria-cta, .cta-whatsapp, .contact-whatsapp)[data-lawyer="marco"]:hover {
    border-color: var(--bt-marco-linha);
    background: var(--bt-marco-fundo);
    box-shadow: none;
    color: var(--bt-marco-texto);
    transform: none;
  }
  :root a:is(.hero-parceria-cta, .cta-whatsapp, .contact-whatsapp)[data-lawyer="marco"]:hover svg { color: var(--bt-marco-icone); }
  :root a:is(.hero-parceria-cta, .cta-whatsapp, .contact-whatsapp)[data-lawyer="rosy"]:hover {
    border-color: var(--bt-rosy-linha);
    background: #fff;
    box-shadow: none;
    color: var(--rosy-ink);
    transform: none;
  }
  :root a:is(.hero-parceria-cta, .cta-whatsapp, .contact-whatsapp)[data-lawyer="rosy"]:hover svg { color: var(--rosy-gold-dark); }
}
:root a:is(.hero-parceria-cta, .cta-whatsapp, .contact-whatsapp)[data-lawyer="marco"]:active {
  border-color: var(--bt-marco-linha);
  background: var(--bt-marco-fundo);
  box-shadow: none;
  color: var(--bt-marco-texto);
}
:root a:is(.hero-parceria-cta, .cta-whatsapp, .contact-whatsapp)[data-lawyer="marco"]:active svg { color: var(--bt-marco-icone); }
:root a:is(.hero-parceria-cta, .cta-whatsapp, .contact-whatsapp)[data-lawyer="rosy"]:active {
  border-color: var(--bt-rosy-linha);
  background: #fff;
  box-shadow: none;
  color: var(--rosy-ink);
}
:root a:is(.hero-parceria-cta, .cta-whatsapp, .contact-whatsapp)[data-lawyer="rosy"]:active svg { color: var(--rosy-gold-dark); }
:root a:is(.hero-parceria-cta, .cta-whatsapp, .contact-whatsapp)[data-lawyer]:focus-visible {
  outline: 1px solid var(--bt-linha);
  outline-offset: 4px;
}

/* Filtro das áreas em pílula, como os outros botões; setas do carrossel em círculo, sem pular ao passar o mouse. */
.practice-filtro-botao { border-radius: 999px; }
.carousel-button { border-radius: 50%; }
.carousel-button:not(:disabled):hover { transform: none; }

@media (max-width: 380px) {
  :root a:is(.cta-whatsapp, .contact-whatsapp)[data-lawyer] { padding-inline: 16px; letter-spacing: .1em; }
}
@media (prefers-reduced-motion: reduce) {
  :root a:is(.hero-parceria-cta, .cta-whatsapp, .contact-whatsapp)[data-lawyer],
  :root a:is(.hero-parceria-cta, .cta-whatsapp, .contact-whatsapp)[data-lawyer] svg { transition: none; }
}

/* Dourado da logo MC para o botão do Dr. Marco preenchido (no fundo escuro e no filtro das áreas): o mesmo degradê
   vertical das letras da logo, do bronze ao brilho claro, e a borda no dourado médio dela. O amarelo liso #dcbc7c
   (--gold-300) ficava diferente da logo. */
:root {
  --mc-ouro: linear-gradient(180deg, #9c7837 0%, #e6cd92 38%, #f6ebc4 52%, #d4ad62 68%, #8c682b 100%);
  --mc-ouro-linha: #d4ad62;
}
.practice-filtro-botao[data-filtro="marco"][aria-pressed="true"] { border-color: var(--mc-ouro-linha); background: var(--mc-ouro); }
@media (hover: hover) {
  .practice-filtro-botao[data-filtro="marco"]:hover { border-color: var(--mc-ouro-linha); background: var(--mc-ouro); }
}