/* =========================
   BOTÓN FLOTANTE WHATSAPP (versión mejorada con tooltip personalizado)
   ========================= */
:root {
  --wa-size: 56px;
  --wa-right: 20px;
  --wa-bg: #25D366;
  --wa-shadow: 0 6px 18px rgba(0,0,0,0.18);
  --wa-z: 99999;

  /* === Colores tooltip personalizados === */
  --wa-tooltip-bg: #e3a158;
  --wa-tooltip-color: #000;
}

#whatsapp-button {
  position: fixed;
  right: var(--wa-right);
  top: 50%;
  transform: translateY(-50%);
  z-index: calc(var(--wa-z) + 2);
  width: var(--wa-size);
  height: var(--wa-size);
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--wa-bg);
  color: #fff;
  text-decoration: none;
  box-shadow: var(--wa-shadow);
  font-size: 1.35rem;
  transition: transform .12s ease, box-shadow .12s ease;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
  overflow: visible;
}

#whatsapp-button:hover,
#whatsapp-button:focus {
  transform: translateY(-50%) scale(1.06);
  box-shadow: 0 8px 22px rgba(0,0,0,0.22);
  outline: none;
}

/* TOOLTIP */
#whatsapp-button .wa-tooltip {
  visibility: hidden;
  opacity: 0;
  position: fixed;
  right: calc(var(--wa-right) + var(--wa-size) + 14px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--wa-tooltip-bg);
  color: var(--wa-tooltip-color);
  padding: 8px 14px;
  border-radius: 16px; /* más redondeado */
  white-space: nowrap;
  font-size: 0.92rem;
  font-weight: 500;
  box-shadow: 0 4px 12px rgba(0,0,0,0.25); /* sombra más suave */
  transition: opacity 0.28s ease, transform 0.28s ease;
  z-index: calc(var(--wa-z) + 3);
}

/* Flechita del tooltip */
#whatsapp-button .wa-tooltip::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 100%;
  transform: translateY(-50%);
  border: 6px solid transparent;
  border-left-color: var(--wa-tooltip-bg);
}

/* Mostrar tooltip */
#whatsapp-button:hover .wa-tooltip,
#whatsapp-button:focus .wa-tooltip {
  visibility: visible;
  opacity: 1;
  transform: translateY(-50%) translateX(-6px);
}

/* MÓVIL */
@media (max-width: 576px) {
  #whatsapp-button {
    top: auto;
    bottom: 18px;
    right: 18px;
    transform: none;
    z-index: calc(var(--wa-z) + 2);
  }

  #whatsapp-button .wa-tooltip {
    right: 50%;
    bottom: calc(var(--wa-size) + 24px);
    top: auto;
    transform: translateX(50%);
  }

  #whatsapp-button .wa-tooltip::after {
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-top-color: var(--wa-tooltip-bg);
  }
}