/* Floating Social Buttons */
.floating-social {
  position: fixed;
  bottom: 30px;
  left: 30px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Responsive: mostrar flecha y ocultar botones sociales solo si no está activo */
@media (max-width: 991px) {
  .floating-social {
    display: none;
  }
  .floating-social.active {
    display: flex;
  }
  .floating-social-toggle {
    display: flex;
  }
}

/* Botón flotante para mostrar redes sociales en móvil */
.floating-social-toggle {
  display: none;
  position: fixed;
  bottom: 30px;
  left: 30px;
  z-index: 9999;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #222;
  color: #fff;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.18);
  cursor: pointer;
  transition: background 0.2s;
}
.floating-social-toggle:hover {
  background: #555;
}

/* Menú de redes sociales desplegable en móvil */
.floating-social-mobile {
  display: none;
  position: fixed;
  bottom: 100px;
  left: 30px;
  z-index: 9999;
  flex-direction: column;
  gap: 18px;
}
.floating-social-mobile.show {
  display: flex;
}

/* Hacer que los logos resalten en blanco */
.floating-social a img {
  filter: brightness(0) invert(1) grayscale(1) contrast(100);
}
.floating-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 2rem;
  transition: transform 0.2s, box-shadow 0.2s;
  text-decoration: none;
}
.floating-social a:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 18px rgba(0,0,0,0.22);
}
.floating-social .social-whatsapp { background: #25D366; }
.floating-social .social-facebook { background: #1877f3; }
.floating-social .social-instagram { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.floating-social .social-google { background: #ea4335; }
.floating-social .social-yelp { background: #d32323; }
.floating-social .social-yelp svg { background: #fff; border-radius: 50%; }