/*
  Componentes visuais. O botão de link abaixo é o único componente central
  deste projeto — anatomia definida na skill link-bio-esmont. Motion "vivo"
  (entrada, hover, microinterações) entra aqui depois do briefing fechado;
  por enquanto só o suficiente pra ser usável e acessível.
*/

.botao-link {
  display: flex;
  align-items: center;
  gap: var(--esp-3);
  width: 100%;
  padding: var(--esp-3) var(--esp-4);
  border-radius: 8px;
  background: var(--cor-branco);
  border: 1px solid var(--cor-cinza-claro);
  box-shadow: 0 2px 8px rgba(0, 55, 99, 0.12);
  font-family: var(--fonte-corpo);
  font-weight: 600;
  transition: transform var(--anim-rapida) var(--anim-easing),
              box-shadow var(--anim-rapida) var(--anim-easing);
}

.botao-link:hover,
.botao-link:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 55, 99, 0.2);
}

.botao-link__icone {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
}

.botao-link__rotulo {
  flex: 1;
}

@media (prefers-reduced-motion: reduce) {
  .botao-link {
    transition: none;
  }
}