/* Small visible circles; stable 44px targets keep touch and keyboard comfortable. */
.sf-social-group {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  inline-size: max-content;
  max-inline-size: 100%;
  min-inline-size: 0;
  position: relative;
  isolation: isolate;
}
.sf-social-group--centered { margin: 0 auto 24px; }
.sf-social-link {
  --social-fill: #1877f2;
  --social-ink: #fff;
  --social-ring: #63a4fa;
  position: relative;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  flex: 0 0 44px;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--social-ink);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sf-social-link--whatsapp { --social-fill: #159957; --social-ring: #39cc82; }
.sf-social-link--instagram { --social-fill: #dc3545; --social-ring: #f37480; }
.sf-social-link--linkedin { --social-fill: #fff; --social-ink: #0a66c2; --social-ring: #66a5e4; }
.sf-social-icon {
  box-sizing: border-box;
  display: grid;
  place-items: center;
  inline-size: 34px;
  block-size: 34px;
  border: 1px solid transparent;
  border-radius: 50%;
  background: var(--social-fill);
  color: var(--social-ink);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .12);
  transition: transform 240ms var(--ease-out, cubic-bezier(.2, .8, .2, 1)), box-shadow 240ms ease;
}
.sf-social-icon svg { display: block; inline-size: 18px; block-size: 18px; fill: currentColor; }
/* Floating names never consume space in the icon row. */
.sf-social-name {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: calc(100% + 5px);
  padding: 6px 9px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 7px;
  background: var(--navy-600, #2a323f);
  color: #fff;
  font: 600 11px/1.3 var(--font-latin, 'Inter', system-ui, sans-serif);
  white-space: nowrap;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(var(--social-label-x, -50%), 7px) scale(.94);
  transition: opacity 160ms ease, transform 200ms var(--ease-out, cubic-bezier(.2, .8, .2, 1)), visibility 160ms;
}
.sf-social-name::after { content: ''; position: absolute; inset: 100% 0 auto; block-size: 7px; }
/* Anchor the outer names inside the row, including RTL and narrow phones. */
.sf-social-link:first-child .sf-social-name { left: 0; --social-label-x: 0%; }
.sf-social-link:last-child .sf-social-name { left: auto; right: 0; --social-label-x: 0%; }
:root[dir="rtl"] .sf-social-link:first-child .sf-social-name { left: auto; right: 0; }
:root[dir="rtl"] .sf-social-link:last-child .sf-social-name { left: 0; right: auto; }
.sf-social-link:focus-visible { outline: 2px solid var(--social-ring); outline-offset: 0; }
.sf-social-link:focus-visible, .sf-social-link.is-pressed { z-index: 3; }
.sf-social-link:active .sf-social-icon { transform: scale(.9); transition-duration: 80ms; }
.sf-social-link:focus-visible .sf-social-icon { transform: translateY(-2px); }
.sf-social-link:not(.is-tooltip-dismissed):focus-visible .sf-social-name,
.sf-social-link:not(.is-tooltip-dismissed).is-pressed .sf-social-name {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate(var(--social-label-x, -50%), 0) scale(1);
}
@media (hover: hover) and (pointer: fine) {
  .sf-social-link:hover { z-index: 3; }
  .sf-social-link:hover .sf-social-icon {
    transform: translateY(-3px) scale(1.06);
    box-shadow: 0 4px 0 -2px var(--social-ring), 0 7px 12px rgba(0, 0, 0, .2);
  }
  .sf-social-link:not(.is-tooltip-dismissed):hover .sf-social-name {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    transform: translate(var(--social-label-x, -50%), 0) scale(1);
  }
}
.sf-social-link::after {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1px solid var(--social-ring);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
}
.sf-social-link.is-pressed .sf-social-icon { animation: sf-social-tap 440ms var(--ease-out, cubic-bezier(.2, .8, .2, 1)); }
.sf-social-link.is-pressed::after { animation: sf-social-ripple 480ms ease-out; }
@keyframes sf-social-tap {
  0%, 100% { transform: scale(1); }
  30% { transform: scale(.86); }
  65% { transform: translateY(-2px) scale(1.08); }
}
@keyframes sf-social-ripple {
  0% { opacity: .65; transform: scale(.9); }
  100% { opacity: 0; transform: scale(1.48); }
}
@media (prefers-reduced-motion: reduce) {
  .sf-social-link, .sf-social-link::after, .sf-social-icon, .sf-social-name {
    transition: none !important;
    animation: none !important;
  }
  .sf-social-link .sf-social-icon { transform: none !important; }
  .sf-social-name { transform: translate(var(--social-label-x, -50%), 0); }
}
@media (forced-colors: active) {
  .sf-social-icon { background: ButtonFace; color: ButtonText; border-color: ButtonText; }
  .sf-social-name { background: CanvasText; color: Canvas; border-color: Canvas; }
  .sf-social-link:focus-visible { outline-color: Highlight; }
}