.top-socials {
  display: flex;
  align-items: center;
  gap: 9px;
}

.social-icon {
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 2px solid rgba(255,255,255,.75);
  border-radius: 14px 18px 13px 17px;
  box-shadow: 0 7px 0 rgba(20,72,103,.18), 0 10px 20px rgba(20,72,103,.14);
  transform: rotate(-4deg);
  transition: transform .2s ease, box-shadow .2s ease;
}

.social-icon:nth-child(2) { transform: rotate(5deg); }
.social-icon:nth-child(3) { transform: rotate(-2deg); }
.social-icon:hover { transform: translateY(-4px) rotate(7deg) scale(1.08); box-shadow: 0 10px 0 rgba(20,72,103,.14), 0 15px 24px rgba(20,72,103,.2); }
.social-icon:focus-visible { outline: 3px solid #ffd94d; outline-offset: 3px; }
.social-icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.social-icon .social-dot { fill: currentColor; stroke: none; }
.social-icon.instagram { background: linear-gradient(135deg,#7c4dff,#ff3976 55%,#ffbd45); }
.social-icon.tiktok { background: #17202d; text-shadow: 2px 1px #ff3b72; }
.social-icon.whatsapp { background: #25d366; }
.social-icon::after { content: "✦"; position: absolute; right: -5px; top: -8px; color: #ffd94d; font-size: 13px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.2)); }

@media (max-width: 980px) {
  .top-socials { margin-left: auto; margin-right: 10px; }
  .social-icon { width: 38px; height: 38px; }
}

@media (max-width: 520px) {
  .top-socials { gap: 5px; margin-right: 3px; }
  .social-icon { width: 34px; height: 34px; border-radius: 11px 14px 10px 13px; box-shadow: 0 5px 0 rgba(20,72,103,.16); }
  .social-icon svg { width: 18px; height: 18px; }
  .social-icon::after { display: none; }
}