:root {
  --fss-size: 42px;
  --fss-icon: 18px;
  --fss-gap: 6px;
  --fss-pad: 8px;
  --fss-radius: 10px;
  --fss-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  --fss-shadow-hover: 0 6px 20px rgba(0, 0, 0, .22);
  --fss-ease: 0.2s ease;
}

#floatingSocialShare {
  position: relative;
}

#floatingSocialShare *,
#floatingSocialShare *::before,
#floatingSocialShare *::after {
  box-sizing: border-box !important;
}

/* ── Base button ── */
#floatingSocialShare a {
  position: relative;
  width: var(--fss-size);
  height: var(--fss-size);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 2px;
  color: #fff;
  text-decoration: none;
  border-radius: var(--fss-radius);
  box-shadow: var(--fss-shadow);
  transition: transform var(--fss-ease), box-shadow var(--fss-ease), opacity var(--fss-ease);
  will-change: transform;
  outline: none;
}

#floatingSocialShare a:visited,
#floatingSocialShare a:active {
  color: #fff;
  outline: none;
}

/* Left-side hover slides right */
#floatingSocialShare .top-left a:hover,
#floatingSocialShare .top-left a:focus-visible,
#floatingSocialShare .content-left a:hover,
#floatingSocialShare .content-left a:focus-visible {
  transform: translateX(5px);
  box-shadow: var(--fss-shadow-hover);
  opacity: .88;
  outline: none;
}

/* Right-side hover slides left */
#floatingSocialShare .top-right a:hover,
#floatingSocialShare .top-right a:focus-visible,
#floatingSocialShare .content-right a:hover,
#floatingSocialShare .content-right a:focus-visible {
  transform: translateX(-5px);
  box-shadow: var(--fss-shadow-hover);
  opacity: .88;
  outline: none;
}

/* ── SVG icon ── */
#floatingSocialShare svg {
  fill: #fff;
  width: var(--fss-icon);
  height: var(--fss-icon);
  display: block;
  flex-shrink: 0;
}

#floatingSocialShare a.without-counter svg {
  position: static;
  transform: none;
  margin: auto;
}

#floatingSocialShare a.with-counter-desktop {
  height: calc(var(--fss-size) + 14px);
}

#floatingSocialShare .shareCount {
  font-size: 9px;
  font-weight: 600;
  line-height: 1;
  color: rgba(255, 255, 255, .9);
}

/* ── Positioned wrappers ── */
#floatingSocialShare .top-left,
#floatingSocialShare .top-right,
#floatingSocialShare .content-left,
#floatingSocialShare .content-right {
  position: fixed;
  top: 25%;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: var(--fss-gap);
  padding: var(--fss-pad);
}

#floatingSocialShare .top-left,
#floatingSocialShare .content-left {
  left: 0;
}

#floatingSocialShare .top-right,
#floatingSocialShare .content-right {
  right: 0;
}

/* ── Brand colors ── */
#floatingSocialShare .mail          { background-color: #D14836; }
#floatingSocialShare .facebook      { background-color: #1877F2; }
#floatingSocialShare .linkedin      { background-color: #0A66C2; }
#floatingSocialShare .odnoklassniki { background-color: #EE8208; }
#floatingSocialShare .pinterest     { background-color: #E60023; }
#floatingSocialShare .reddit        { background-color: #FF4500; }
#floatingSocialShare .telegram      { background-color: #2AABEE; }
#floatingSocialShare .tumblr        { background-color: #36465D; }
#floatingSocialShare .twitter       { background-color: #1DA1F2; }
#floatingSocialShare .viber         { background-color: #7360F2; }
#floatingSocialShare .vk            { background-color: #4680C2; }
#floatingSocialShare .whatsapp      { background-color: #25D366; }

/* ── Tablet: botones más compactos ── */
@media (max-width: 961px) {
  :root {
    --fss-size: 36px;
    --fss-icon: 15px;
    --fss-gap: 4px;
    --fss-pad: 4px;
    --fss-radius: 8px;
  }
}

/* ── Mobile: barra compacta en la parte inferior ── */
@media (max-width: 640px) {
  #floatingSocialShare .top-left,
  #floatingSocialShare .top-right,
  #floatingSocialShare .content-left,
  #floatingSocialShare .content-right {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    flex-direction: row;
    justify-content: center;
    padding: 10px 12px;
    gap: 10px;
    background: rgba(255, 255, 255, .95);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    border-top: 1px solid rgba(0, 0, 0, .08);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, .08);
  }

  /* Sin animación de deslizamiento en móvil */
  #floatingSocialShare .top-left a:hover,
  #floatingSocialShare .top-left a:focus-visible,
  #floatingSocialShare .top-right a:hover,
  #floatingSocialShare .top-right a:focus-visible,
  #floatingSocialShare .content-left a:hover,
  #floatingSocialShare .content-left a:focus-visible,
  #floatingSocialShare .content-right a:hover,
  #floatingSocialShare .content-right a:focus-visible {
    transform: scale(1.08);
    box-shadow: var(--fss-shadow);
  }

  #floatingSocialShare a {
    --fss-size: 40px;
    --fss-icon: 17px;
    border-radius: 10px;
    box-shadow: none;
  }

  #floatingSocialShare .shareCount {
    display: none;
  }
}