/* CONTENEDOR PRINCIPAL */
#floating-social {
    position: fixed;
    bottom: 40px;
    left: 70px;
    z-index: 1000;
  }

  .custom-button {
    background-color: white; /* Fondo blanco */
    border: none; /* Quita cualquier borde */
    outline: none; /* Evita bordes de enfoque */
    padding: 10px; /* Ajusta el espaciado */
    border-radius: 50%; /* Forma circular */
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .custom-icon {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ajusta según lo que necesites */
    border-radius: 50%; /* Mantiene la forma circular */
    background-color: white; /* Fondo blanco */
  }
  
  
  /* CONTENEDOR GENERAL */
  .social-wrapper {
    position: relative;
  }
  
  /* ESTILO DEL BOTÓN PRINCIPAL */
  .social-main {
    display: flex;
    align-items: center;
    cursor: pointer;
    animation: pulse 1.5s ease-in-out 1;
  }
  
  /* CÍRCULO DE LOS ÍCONOS */
  .icon-circle {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  }
  
  /* Botón principal: fondo azul con icono blanco */
  .social-main .icon-circle {
    background-color: #fff;
    color: #fff;
  }
  
  /* Etiqueta del botón principal */
  .social-label {
    margin-left: 10px;
    background: rgba(255, 255, 255, 0.85);
    color: #2f08db;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 14px;
    white-space: nowrap;
  }
  
  /* LISTA DE REDES: Se posiciona de forma absoluta justo arriba del botón principal */
  .social-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: absolute;
    bottom: 80px; /* 60px (alto del botón) + 20px de separación */
    left: 0;
    display: none;
    flex-direction: column;
    gap: 10px;
  }
  
  /* Muestra la lista cuando se activa */
  #floating-social.active .social-list {
    display: flex;
    animation: slideUp 0.5s forwards;
  }
  
  /* ESTILO DE CADA ELEMENTO DE RED */
  .social-item {
    display: flex;
    align-items: center;
  }
  
  /* Íconos de redes: círculo más pequeño, fondo blanco y color azul */
  .social-item .icon-circle {
    width: 50px;
    height: 50px;
    background-color: #fff;
    color: #007bff;
  }
  
  /* Enlaces de los íconos de redes: conservan diseño circular y se centran */
  .social-item .icon-circle a {
    outline: none; /* Elimina el borde azul */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    overflow: hidden; /* Evita que cualquier borde se salga */
}
  
  /* Efecto hover para cada red */
  .social-item .icon-circle:hover a {
    background-color: #007bff;
    color: #fff;
  }
  
  /* Etiqueta para cada red */
  .social-item .social-label {
    margin-left: 10px;
    background: #fff;
    color: #007bff;
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 14px;
    white-space: nowrap;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
  }
/* Animación de entrada: Deslizar hacia arriba con suavidad */
@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animación de pulso al cargar */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Animación de resalte al hacer hover */
@keyframes highlight {
  0% { transform: scale(1); box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.2); }
  100% { transform: scale(1.15); box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.5); }
}

/* Estilos para los íconos */
.icon-circle {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease-in-out;
  animation: pulse 1.5s infinite ease-in-out;
}

/* Aplicamos la animación de resalte al hacer hover */
.icon-circle:hover {
  animation: highlight 0.5s ease-in-out forwards;
}