:root {
  --primary-btn-social: #e72e36;
  --tooltip-btn-text: #fff;

  /* Colores de redes sociales */
  --facebook-btn-color: #1877f2;
  --twitter-btn-color: #000000;
  --whatsapp-btn-color: #25d366;
  --telegram-btn-color: #0088cc;
  --link-btn-color: #666666;

  /* Colores de redes sociales Gris */
  --primary-btn-grey: #c2c2c2;
  --secundary-btn-grey: #d5d5d5;
  --text-btn-grey: #555;
  --hover-btn-grey:: #dfdfdf;
  --tooltip-bg-btn-grey: #555;  
}

.social-buttons {
  display: flex;
  gap: 10px;
  justify-content: start;
  align-items: center;
  /* border-bottom: 1px solid var(--secundary-btn-grey); */
}

.social-button {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-decoration: none;
  font-size: 18px;
  transition: all 0.3s ease-in-out;
  color: var(--primary-btn-social);
  border: 2px solid var(--primary-btn-social);
}

.social-button:hover,
.social-button:focus {
  background: var(--primary-btn-social);
  color: var(--tooltip-btn-text);
}

.social-button:hover i,
.social-button:focus i {
  color: var(--tooltip-btn-text) !important;
}

.social-button:focus {
  outline: 0px ;
  outline-offset: 0px;
}

.gris .social-button {
  color: var(--text-btn-grey);
  border: 2px solid var(--primary-btn-grey);
}

.gris .social-button:hover,
.gris .social-button:focus {
  background: var(--hover-btn-grey);
  color: var(--text-btn-grey);
}

.styleUno .social-button.facebook {
  color: var(--facebook-btn-color);
  border: 2px solid var(--facebook-btn-color);
}

.styleUno .social-button.facebook:hover,
.styleUno .social-button.facebook:focus {
  background: var(--facebook-btn-color);
  color: var(--tooltip-btn-text);
}

.styleUno .social-button.twitter {
  color: var(--twitter-btn-color);
  border: 2px solid var(--twitter-btn-color);
}

.styleUno .social-button.twitter:hover,
.styleUno .social-button.twitter:focus {
  background: var(--twitter-btn-color);
  color: var(--tooltip-btn-text);
}

.styleUno .social-button.whatsapp {
  color: var(--whatsapp-btn-color);
  border: 2px solid var(--whatsapp-btn-color);
}

.styleUno .social-button.whatsapp:hover,
.styleUno .social-button.whatsapp:focus {
  background: var(--whatsapp-btn-color);
  color: var(--tooltip-btn-text);
}

.styleUno .social-button.telegram {
  color: var(--telegram-btn-color);
  border: 2px solid var(--telegram-btn-color);
}

.styleUno .social-button.telegram:hover,
.styleUno .social-button.telegram:focus {
  background: var(--telegram-btn-color);
  color: var(--tooltip-btn-text);
}

.styleUno .social-button.copy-link {
  color: var(--link-btn-color);
  border: 2px solid var(--link-btn-color);
}

.styleUno .social-button.copy-link:hover,
.styleUno .social-button.copy-link:focus {
  background: var(--link-btn-color);
  color: var(--tooltip-btn-text);
}

.styleDos .social-button.facebook {
  color: var(--tooltip-btn-text);
  background: var(--facebook-btn-color);
  border: 2px solid var(--facebook-btn-color);
}

.styleDos .social-button.twitter {
  color: var(--tooltip-btn-text);
  background: var(--twitter-btn-color);
  border: 2px solid var(--twitter-btn-color);
}

.styleDos .social-button.whatsapp {
  color: var(--tooltip-btn-text);
  background: var(--whatsapp-btn-color);
  border: 2px solid var(--whatsapp-btn-color);
}

.styleDos .social-button.telegram {
  color: var(--tooltip-btn-text);
  background: var(--telegram-btn-color);
  border: 2px solid var(--telegram-btn-color);
}

.styleDos .social-button.copy-link {
  color: var(--tooltip-btn-text);
  background: var(--link-btn-color);
  border: 2px solid var(--link-btn-color);
}

.copyColor {
  background: var(--primary-btn-social);
  color: var(--tooltip-btn-text);
}

.copyColorGris {
  background: var(--tooltip-bg-btn-grey);
  color: var(--tooltip-btn-text);
}

.copy-message {
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.copy-message.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(-5px);
}

.fab,
.far {
  font-weight: 400;
  font-size: 20px;
}

.container-share {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0px;
  border-top: 1px solid var(--secundary-btn-grey);
  border-bottom: 1px solid var(--secundary-btn-grey);
}

.share-note {
  font-size: 18px;
  margin-right: 17px;
}

@media (max-width: 767px) {
  .social-buttons {
    justify-content: center;
  }

  .container-share {
    justify-content: center;
    flex-direction: column;
  }

  .share-note {
    margin-right: 0;
    margin-bottom: 10px;
  }
}