.button {
  position: relative;
  display: flex !important;
  align-items: center;
  justify-content: center;
  min-height: 62px;
  width: 100%;
  margin: 0 0 14px !important;
  padding: 14px 52px;
  overflow: hidden;
  color: var(--button-text-color);
  font-family: var(--font-family);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .015em;
  text-align: center;
  background: var(--button-background-color);
  border: 1px solid rgba(13, 27, 42, .16);
  border-radius: 16px;
  box-shadow: 0 7px 18px rgba(13, 27, 42, .08);
  transition: transform .2s ease, background-color .2s ease, color .2s ease, box-shadow .2s ease;
}

.button:hover, .button:focus-visible {
  color: var(--button-text-hover-color);
  background: var(--napri-navy);
  border-color: var(--napri-navy);
  box-shadow: 0 12px 28px rgba(13, 27, 42, .22);
  outline: none;
  transform: translateY(-2px);
}

.button::after {
  position: absolute;
  inset: auto 18px 0;
  height: 3px;
  content: '';
  background: var(--napri-gold);
  border-radius: 3px 3px 0 0;
  opacity: .9;
}

.icon {
  position: absolute;
  left: 20px;
  width: 21px;
  height: 21px;
  object-fit: contain;
  filter: none;
}

.button:hover .icon { filter: brightness(0) invert(1); }

.social-icon-div { padding: 2px 0 20px; }
.social-icon { padding: 8px; color: var(--napri-navy) !important; font-size: 27px; }
.social-icon:hover { color: var(--napri-gold) !important; }

.sharebutton, sharebutton {
  color: var(--napri-navy);
  background: #fff;
  border: 1px solid rgba(13, 27, 42, .16);
  border-radius: 12px;
  box-shadow: 0 5px 14px rgba(13, 27, 42, .08);
}
.sharebutton:hover { color: #fff; background: var(--napri-navy); }
.sharediv { top: 18px; right: 18px; }

/* El crédito se oculta solo en el perfil que usa el tema Napri. */
.credit-hover { display: none !important; }

.fadein { animation: napri-enter .45s ease both; }
@keyframes napri-enter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }