/* ===============================================
   Variables Globales
=============================================== */
:root {
  --primary-color: #5d1486;
  --accent-color: #ff6b6b;
  --text-color: #ffffff;
  --transition-timing: cubic-bezier(0.4, 0, 0.2, 1);
  --gradient-start: #5d1486;
  --gradient-end: #4114a1;
}

/* ===============================================
   Estilos Básicos de la Sección de Redes Sociales
=============================================== */
.redes {
  position: absolute;
  bottom: 30px;
  left: 30px;
  z-index: 1000;
}

.social-menu {
  position: relative;       /* Necesario para posicionar los pseudo-elementos y las gotas */
  overflow: visible;         /* Permite que las animaciones que salen del contenedor se vean */
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1rem 2rem;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  border-radius: 50px;
  transition: all 0.5s var(--transition-timing);
}

/* Fondo degradado que aparece cuando se añade la clase "scrolled" */
.social-menu::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, var(--gradient-start), var(--gradient-end));
  opacity: 0;
  border-radius: 50px;
  z-index: -2;
  transition: opacity 0.4s ease;
}

.social-menu.scrolled::before {
  opacity: 0.9;
}

.social-menu.scrolled {
  box-shadow: 0 4px 30px rgba(93, 20, 134, 0.3);
}

/* Efecto ripple (onda) que se expande desde la parte superior central */
.social-menu::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: var(--accent-color);
  border-radius: 50%;
  transform: translateX(-50%);
  opacity: 0;
  pointer-events: none;
  animation: ripple 3s infinite;
}

/* Etiqueta del menú con animación de “flotación” */
.menu-label {
  color: var(--text-color);
  font-family: 'Lato', sans-serif;
  font-weight: 700;
  letter-spacing: 1px;
  margin-right: 1rem;
  animation: float 3s ease-in-out infinite;
}

/* Contenedor de los ítems sociales */
.social-items {
  display: flex;
  gap: 1.2rem;
}

/* Cada botón o enlace social */
.social-item {
  position: relative;
  color: var(--text-color);
  text-decoration: none;
  font-family: 'Lato', sans-serif;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 30px;
  overflow: hidden;
  transition: all 0.3s var(--transition-timing);
  transform: translateY(0);
}

.social-item span {
  position: relative;
  z-index: 1;
}

/* Capa que se muestra al hacer hover */
.hover-effect {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, var(--primary-color), var(--accent-color));
  opacity: 0;
  transition: opacity 0.3s var(--transition-timing);
}

/* ===============================================
   Animaciones Básicas
=============================================== */
/* Flotación para la etiqueta del menú */
@keyframes float {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-5px); }
  100% { transform: translateY(0px); }
}

/* Animación de entrada de cada ítem */
@keyframes itemEntrance {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.social-item:nth-child(1) { animation: itemEntrance 0.6s 0.1s forwards; }
.social-item:nth-child(2) { animation: itemEntrance 0.6s 0.2s forwards; }
.social-item:nth-child(3) { animation: itemEntrance 0.6s 0.3s forwards; }
.social-item:nth-child(4) { animation: itemEntrance 0.6s 0.4s forwards; }
.social-item:nth-child(5) { animation: itemEntrance 0.6s 0.5s forwards; }

/* Hover: sube ligeramente y muestra sombra */
.social-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(93, 20, 134, 0.3);
}

.social-item:hover .hover-effect {
  opacity: 0.2;
}

/* Cambios de color según la plataforma */
.social-item[data-platform="twitter"]:hover { color: #1DA1F2; }
.social-item[data-platform="instagram"]:hover { color: #E1306C; }
.social-item[data-platform="tiktok"]:hover { color: #000000; }
.social-item[data-platform="youtube"]:hover { color: #FF0000; }
.social-item[data-platform="linkedin"]:hover { color: #0077B5; }

/* Efecto de “glow” al pasar el mouse sobre el menú */
@keyframes socialGlow {
  0%   { box-shadow: 0 0 10px rgba(255,255,255,0.3); }
  50%  { box-shadow: 0 0 20px rgba(93, 20, 134, 0.5); }
  100% { box-shadow: 0 0 10px rgba(255,255,255,0.3); }
}

.social-menu:hover {
  animation: socialGlow 2s infinite;
}

/* Efecto ripple (onda expansiva) en la pseudo-elemento ::after */
@keyframes ripple {
  0% {
    opacity: 0.6;
    transform: translateX(-50%) translateY(0) scale(1);
  }
  50% {
    opacity: 0;
    transform: translateX(-50%) translateY(0) scale(8);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) translateY(0) scale(8);
  }
}

/* ===============================================
   Responsive
=============================================== */
@media (max-width: 768px) {
  .redes {
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    justify-content: center;
  }
  
  .social-menu {
    width: 100%;
    justify-content: center;
    padding: 0.8rem 1.5rem;
  }
  
  .menu-label {
    display: none;
  }
  
  .social-items {
    gap: 0.8rem;
  }
  
  .social-item {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .social-menu {
    padding: 0.5rem 0.8rem;
  }
  
  .social-items {
    gap: 0.4rem;
  }
  
  .social-item {
    padding: 0.3rem 0.6rem;
    font-size: 0.75rem;
  }
}

/* ===============================================
   NUEVAS ANIMACIONES: GOTAS QUE GOLPEAN LA PARTE SUPERIOR
=============================================== */

/* Cada “gota” que se animará en la parte superior del menú */
.social-menu .drop {
  position: absolute;
  top: -10px; /* Ubicadas justo sobre el contenedor */
  background: var(--accent-color);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  animation: dropImpact 1.5s infinite;
}

/* Keyframes que simulan el impacto de la gota: cae, “choca” y se expande brevemente */
@keyframes dropImpact {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.5);
  }
  20% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  40% {
    opacity: 1;
    transform: translateY(0) scale(1.4);
  }
  60% {
    opacity: 0.6;
    transform: translateY(0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
}

/* Variamos posición, tamaño y retardo para simular aleatoriedad */
.social-menu .drop:nth-child(1) {
  left: 10%;
  width: 6px;
  height: 6px;
  animation-delay: 0.3s;
}
.social-menu .drop:nth-child(2) {
  left: 30%;
  width: 8px;
  height: 8px;
  animation-delay: 0.7s;
}
.social-menu .drop:nth-child(3) {
  left: 50%;
  width: 5px;
  height: 5px;
  animation-delay: 0.5s;
}
.social-menu .drop:nth-child(4) {
  left: 70%;
  width: 7px;
  height: 7px;
  animation-delay: 1s;
}
.social-menu .drop:nth-child(5) {
  left: 90%;
  width: 6px;
  height: 6px;
  animation-delay: 0.9s;
}

/* FIN de las animaciones de gotas */