/* === WhatsApp Float - Styles === */
:root {
  --wa-size: 64px;            /* diámetro del botón */
  --wa-color: #22c55e;        /* verde botón */
  --wa-ring: #ffffff;         /* borde blanco */
  --wa-shadow: 0 8px 16px rgba(0,0,0,.20);
  --wa-shadow-strong: 0 10px 22px rgba(0,0,0,.28);
  --wa-z: 9999;
  --wa-gap: 16px;             /* separación al borde */
  --wa-tooltip-bg: #111827;   /* gris 900 */
  --wa-tooltip-color: #ffffff;
  --wa-bubble-bg: #ffffff;
  --wa-bubble-color: #111827;
  --wa-bubble-border: #e5e7eb; /* gris 200 */
}

/* Contenedor fijo */
.wa-float {
  position: fixed;
  right: var(--wa-gap);
  bottom: var(--wa-gap);
  z-index: var(--wa-z);
}

/* Botón circular */
.wa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--wa-size);
  height: var(--wa-size);
  border-radius: 9999px;
  background: var(--wa-color);
  color: #fff;
  box-shadow: var(--wa-shadow);
  outline: none;
  border: 4px solid var(--wa-ring);
  transition: transform .2s ease, box-shadow .2s ease;
  will-change: transform;
}
.wa-btn:hover { transform: scale(1.05); box-shadow: var(--wa-shadow-strong); }
.wa-btn:focus-visible { box-shadow: 0 0 0 4px rgba(34,197,94,.45), var(--wa-shadow-strong); }

/* Ícono (SVG) ocupa casi todo el botón) */
.wa-btn svg {
  width: calc(var(--wa-size) * .72);
  height: calc(var(--wa-size) * .72);
  display: block;
}

/* Pulso cada 6s (respeta reduce-motion) */
@keyframes wa-pulse6 {
  0%, 92% { transform: scale(1); box-shadow: var(--wa-shadow); }
  94%     { transform: scale(1.08); box-shadow: var(--wa-shadow-strong); }
  96%     { transform: scale(1.05); box-shadow: var(--wa-shadow); }
  100%    { transform: scale(1); box-shadow: var(--wa-shadow); }
}
.wa-pulse-6s { animation: wa-pulse6 6s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .wa-pulse-6s { animation: none; } }

/* Tooltip (desktop) */
.wa-tooltip {
  position: absolute;
  right: calc(var(--wa-size) + 16px);
  bottom: 8px;
  background: var(--wa-tooltip-bg);
  color: var(--wa-tooltip-color);
  font: 500 13px/1.1 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  padding: 8px 12px;
  border-radius: 9999px;
  box-shadow: 0 6px 16px rgba(0,0,0,.2);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
  display: none;
}
.wa-float:hover .wa-tooltip { opacity: 1; transform: translateX(0); }
@media (min-width: 640px) { .wa-tooltip { display: inline-flex; } }

/* Burbuja animada */
.wa-bubble {
  position: absolute;
  right: calc(var(--wa-size) + 16px);
  bottom: calc(var(--wa-size) + 24px);
  background: var(--wa-bubble-bg);
  color: var(--wa-bubble-color);
  border: 1px solid var(--wa-bubble-border);
  font: 500 14px/1.2 system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  padding: 10px 12px;
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.12);
}

/* piquito */
.wa-bubble::after {
  content: "";
  position: absolute;
  right: -6px;
  bottom: 12px;
  width: 10px; height: 10px;
  background: var(--wa-bubble-bg);
  border-right: 1px solid var(--wa-bubble-border);
  border-bottom: 1px solid var(--wa-bubble-border);
  transform: rotate(45deg);
}

/* flotado suave */
@keyframes wa-floaty { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-4px);} }
.wa-floaty { animation: wa-floaty 3s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .wa-floaty { animation: none; } }

/* mostrar/ocultar con transición */
.wa-hidden {
  opacity: 0; transform: translateY(6px);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

/* Mobile por defecto oculta la burbuja; se controla vía JS */
@media (max-width: 639px) {
  .wa-bubble { display: none; }
  .wa-bubble.wa-mobile-show { display: inline-flex; }
}