/* ============================================
   KRIVIO — SOCIAL ICONS (interactive)
   Lift + brand colour on hover/focus, tooltip label, 44px touch targets on phones.
   ============================================ */
.social { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.social__link {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.09); color: #D6D2E5;
  transition: transform .2s var(--ease-out), background .2s ease, color .2s ease, box-shadow .2s ease;
}
.social__link svg { transition: transform .2s var(--ease-out); }
.social__link::after {
  content: attr(data-label);
  position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translate(-50%, 4px);
  background: #fff; color: var(--color-ink);
  font: 600 12px/1 var(--font-body); padding: 6px 9px; border-radius: 6px; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  opacity: 0; pointer-events: none; transition: opacity .15s ease, transform .15s ease;
}
.social__link:hover, .social__link:focus-visible { transform: translateY(-4px); color: #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25); }
.social__link:hover svg, .social__link:focus-visible svg { transform: scale(1.12); }
.social__link:hover::after, .social__link:focus-visible::after { opacity: 1; transform: translate(-50%, 0); }
.social__link:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

.social__link--whatsapp:hover, .social__link--whatsapp:focus-visible { background: #25D366; }
.social__link--instagram:hover, .social__link--instagram:focus-visible { background: linear-gradient(45deg, #F9A825, #EE2A7B 55%, #6228D7); }
.social__link--facebook:hover, .social__link--facebook:focus-visible { background: #1877F2; }
.social__link--linkedin:hover, .social__link--linkedin:focus-visible { background: #0A66C2; }
.social__link--youtube:hover, .social__link--youtube:focus-visible { background: #FF0000; }
.social__link--email:hover, .social__link--email:focus-visible { background: var(--color-violet); }
.social__link--phone:hover, .social__link--phone:focus-visible { background: #2E9E5B; }

/* Light-background variant (contact / about pages) */
.social--light .social__link { background: var(--color-bg-alt); color: var(--color-ink); }
.social--light .social__link:focus-visible { outline-color: var(--color-violet); }
.social--light .social__link::after { background: var(--color-ink); color: #fff; }

@media (pointer: coarse) {
  .social__link { width: 44px; height: 44px; }
  .social__link::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .social__link, .social__link svg, .social__link::after { transition: none; }
  .social__link:hover, .social__link:focus-visible { transform: none; }
}
.footer__brand .social { margin-top: var(--space-3); }