/* ========================= */
/* style__buttom__index */
/* ========================= */
ul {
  list-style: none;
}
.example-2 {
  display: flex;
  justify-content: left;
  align-items: center;
  margin-left: 1rem;
  animation: scaleUp 1s ease-out; /* Animación de escala */
}
.example-2 .icon-content {
  margin: 0 10px;
  position: relative;
}
.example-2 .icon-content:hover .tooltip {
  opacity: 1;
  visibility: visible;
  top: -50px;
}
.example-2 .icon-content a {
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px; /* Tamaño reducido */
  height: 40px; /* Tamaño reducido */
  border-radius: 50%;
  color: #4d4d4d;
  background-color: #bb423b; /* Color rojo cuando no se interactúa */
}
.example-2 .icon-content a:hover {
  box-shadow: 3px 2px 45px 0px rgb(0 0 0 / 12%);
}
.example-2 .icon-content a svg {
  position: relative;
  z-index: 1;
  width: 20px; /* Tamaño reducido */
  height: 20px; /* Tamaño reducido */
}
.example-2 .icon-content a:hover {
  color: white;
}
.example-2 .icon-content a .filled {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0;
  background-color: #000;
  transition: all 0.3s ease-in-out;
}
.example-2 .icon-content a:hover .filled {
  height: 100%;
}
/* Cambia de color al interactuar */
.example-2 .icon-content a[data-social="discord"] .filled,
.example-2 .icon-content a[data-social="discord"] ~ .tooltip {
  background-color: #000;
}
/* Cambia de color al interactuar */
.example-2 .icon-content a[data-social="steam"] .filled,
.example-2 .icon-content a[data-social="steam"] ~ .tooltip {
  background-color: #000;
}
/* Cambia de color al interactuar */
.example-2 .icon-content a[data-social="spotify"] .filled,
.example-2 .icon-content a[data-social="spotify"] ~ .tooltip {
  background-color: #000;
}
/* Cambia de color al interactuar */
.example-2 .icon-content a[data-social="linkedin"] .filled,
.example-2 .icon-content a[data-social="linkedin"] ~ .tooltip {
  background-color: #000;
}
/* Cambia de color al interactuar */
.example-2 .icon-content a[data-social="github"] .filled,
.example-2 .icon-content a[data-social="github"] ~ .tooltip {
  background-color: #000;
}
/* ========================= */
/* END - style__buttom__index */
/* ========================= */