/* Componente global de redes sociales. Requiere tokens.css. */
.social-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(0.5rem, 4vw, 1.5rem);
}

.social-links[hidden] {
  display: none;
}

.social-link {
  --social-accent: linear-gradient(90deg, var(--color-border), var(--color-accent));
  position: relative;
  display: inline-flex;
  align-items: flex-start;
  justify-content: center;
  width: 2.75rem;
  height: 3.25rem;
  padding-top: 0.35rem;
  color: var(--color-muted);
  border-radius: var(--radius-sm);
  transition: color var(--transition-smooth), transform var(--transition-smooth);
}

.social-link::after {
  content: "";
  position: absolute;
  right: 0.35rem;
  bottom: 0.25rem;
  left: 0.35rem;
  height: 1px;
  background: var(--social-accent);
  transform: scaleX(0.72);
  transition: transform var(--transition-smooth), opacity var(--transition-smooth);
  opacity: 0.82;
}

.social-link img {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
  opacity: 0.72;
  transition: opacity var(--transition-smooth);
}

.social-link--instagram { --social-accent: linear-gradient(90deg, #833ab4, #e1306c 52%, #f6a43a); }
.social-link--facebook { --social-accent: linear-gradient(90deg, #0866ff, #3b82f6 55%, #8ab4f8); }
.social-link--pinterest { --social-accent: linear-gradient(90deg, #7a0c17, #bd081c 55%, #e45a67); }
.social-link--whatsapp { --social-accent: linear-gradient(135deg, #128c7e 0%, #25d366 58%, #7adf9b 100%); }
.social-link--email { --social-accent: linear-gradient(90deg, var(--color-accent), #b7aaa0, var(--color-border)); }
.social-link--neutral { --social-accent: linear-gradient(90deg, var(--color-border), var(--color-accent), var(--color-border)); }

.social-link:hover,
.social-link:focus-visible {
  color: var(--color-text);
  transform: translateY(-2px);
}

.social-link:hover::after,
.social-link:focus-visible::after {
  transform: scaleX(1);
  opacity: 1;
}

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

.social-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}