/* Contenedor */
.share-modal {
  border: 0;
  border-radius: 1rem;
  overflow: hidden;
}

/* Grid de redes */
.share-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(80px, 1fr));
  gap: 14px;
  justify-items: center;
}
@media (min-width: 480px) { .share-grid { grid-template-columns: repeat(6, 1fr); } }

.share-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  text-decoration: none;
  color: inherit;
  padding: 8px 4px;
  border-radius: .75rem;
  transition: transform .18s ease, background .18s ease;
}
.share-btn i { font-size: 1.6rem; }
.share-btn span { font-size: .85rem; }
.share-btn:hover { transform: scale(1.08); background: rgba(0,0,0,.05); }

/* === VISTAS + ANIMACIONES === */

/* Estados base */
.share-view {
  position: relative;
  will-change: transform, opacity;
  opacity: 0;
  pointer-events: none;
  transform: translateX(40px);
}

/* Vista activa visible */
.share-view--active {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(0);
}

/* Clases de transición */
.share-view--enter-from-right   { opacity: 0; transform: translateX(40px); }
.share-view--enter-from-left    { opacity: 0; transform: translateX(-40px); }
.share-view--leave-to-left      { opacity: 0; transform: translateX(-40px); }
.share-view--leave-to-right     { opacity: 0; transform: translateX(40px); }

/* Animación (usa las clases anteriores para start y end) */
.share-view--animating {
  transition: transform .28s ease, opacity .28s ease;
}