/* Componente Social link (Figma: DS › Social link — Status=Default | Hover)
   Cada estado é uma camada com os vetores exatos do Figma; o hover faz crossfade. */
.social-link {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  box-shadow: var(--shadow-none);
  transition: box-shadow var(--motion-duration) var(--motion-easing);
}

.social-link:focus-visible {
  box-shadow: var(--shadow-hover);
}

@media (hover: hover) {
  .social-link:hover {
    box-shadow: var(--shadow-hover);
  }
}

.social-link__layer {
  position: absolute;
  inset: 0;
  transition: opacity var(--motion-duration) var(--motion-easing);
}

.social-link__layer--hover {
  opacity: 0;
}

.social-link:focus-visible .social-link__layer--default {
  opacity: 0;
}

@media (hover: hover) {
  .social-link:hover .social-link__layer--default {
    opacity: 0;
  }
}

.social-link:focus-visible .social-link__layer--hover {
  opacity: 1;
}

@media (hover: hover) {
  .social-link:hover .social-link__layer--hover {
    opacity: 1;
  }
}

.social-link__bg {
  position: absolute;
  inset: 0;
  width: 40px;
  height: 40px;
}

/* Frame do ícone: 24×24, left/right 20%, top 8px */
.social-link__icon {
  position: absolute;
  top: 8px;
  left: 8px;
  width: 24px;
  height: 24px;
  overflow: hidden;
}

.social-link__icon img {
  position: absolute;
}

/* Ícone em arquivo único (ex.: WhatsApp) ocupando o frame de 24px */
.social-link__icon .icon {
  inset: 0;
  width: 24px;
  height: 24px;
}

/* Posições calculadas a partir dos insets do Figma */
.social-link__icon .v1 { left: 2px;    top: 2px;    width: 20px;  height: 20px; }
.social-link__icon .v2 { left: 6.8px;  top: 10.4px; width: 2px;   height: 6.8px; }
.social-link__icon .v3 { left: 6.8px;  top: 6.8px;  width: 2px;   height: 2.6px; }
.social-link__icon .v4 { left: 11px;   top: 9.2px;  width: 6.8px; height: 8px; }