/* PromoPrint · botón flotante de WhatsApp (todas las páginas; lo inserta whatsapp.js).
   Entra con un pequeño rebote y queda animado todo el tiempo: ondas de "mensaje" y un latido del ícono cada pocos segundos.
   Una vez por visita asoma la burbuja «¿Cotizamos tu proyecto?». Al pasar el cursor se abre en píldora.
   Se oculta cuando llega el pie (no tapa «Volver arriba») y en el teléfono cede su lugar a la barra de cotizar de la ficha. */

.wa-flot {
  --wa-size: 72px;
  --wa-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 55;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  pointer-events: none; /* solo el botón y la burbuja reciben clics */
  transform: translateY(calc(-1 * var(--wa-lift, 0px))); /* sube sobre los controles del video (whatsapp.js) */
  transition: transform 320ms var(--ease-out, ease);
}

.wa-flot__btn {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--wa-size);
  min-width: var(--wa-size);
  padding: 0;
  border-radius: 999px;
  background: var(--brand, #fd5700);
  color: var(--ink, #0b0b0c);
  text-decoration: none;
  box-shadow: 0 14px 34px -10px rgba(253, 87, 0, 0.55), 0 6px 16px -6px rgba(0, 0, 0, 0.6);
  pointer-events: auto;
  /* Entrada: llega pequeño y desde abajo, con rebote. */
  opacity: 0;
  transform: translateY(18px) scale(0.6);
  transition: opacity 420ms var(--ease-out, ease), transform 640ms var(--wa-spring), box-shadow 240ms ease;
}
.wa-flot.is-in .wa-flot__btn { opacity: 1; transform: none; }
.wa-flot.is-out .wa-flot__btn { opacity: 0; transform: translateY(18px) scale(0.85); pointer-events: none; transition-timing-function: ease; }

.wa-flot__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: var(--wa-size);
  height: var(--wa-size);
}
.wa-flot__icon svg { width: 34px; height: 34px; fill: currentColor; transform: rotate(-24deg) scale(0.7); transition: transform 700ms var(--wa-spring) 160ms; }
.wa-flot.is-in .wa-flot__icon svg { transform: none; }

/* Píldora: el texto vive a la izquierda del ícono y se abre con el cursor o el foco. */
.wa-flot__label {
  order: -1;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  font: 600 15px/1 var(--font, system-ui);
  letter-spacing: -0.005em;
  opacity: 0;
  transition: max-width 420ms var(--ease-out, ease), opacity 260ms ease, padding 420ms var(--ease-out, ease);
}
@media (hover: hover) and (pointer: fine) {
  .wa-flot__btn:hover .wa-flot__label, .wa-flot__btn:focus-visible .wa-flot__label { max-width: 220px; padding-left: 22px; opacity: 1; }
  .wa-flot .wa-flot__btn:hover .wa-flot__icon svg { animation: wa-wiggle 520ms ease; }
  .wa-flot__btn:hover { box-shadow: 0 18px 40px -10px rgba(253, 87, 0, 0.7), 0 6px 16px -6px rgba(0, 0, 0, 0.6); }
}
.wa-flot__btn:active { transform: scale(0.94); transition-duration: 120ms; }
.wa-flot__btn:focus-visible { outline: 2px solid var(--paper, #f4f2ee); outline-offset: 4px; }
@keyframes wa-wiggle { 0% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 55% { transform: rotate(10deg); } 80% { transform: rotate(-4deg); } 100% { transform: rotate(0); } }

/* Ondas de "mensaje": dos, escalonadas, sin parar desde que el botón entra. */
.wa-flot__btn::before, .wa-flot__btn::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: var(--wa-size);
  height: var(--wa-size);
  border-radius: 50%;
  border: 2px solid var(--brand, #fd5700);
  opacity: 0;
  pointer-events: none;
}
.wa-flot.is-ping .wa-flot__btn::before { animation: wa-ping 2400ms cubic-bezier(0.2, 0.6, 0.35, 1) infinite; }
.wa-flot.is-ping .wa-flot__btn::after { animation: wa-ping 2400ms cubic-bezier(0.2, 0.6, 0.35, 1) 600ms infinite; }
/* Latido continuo: el ícono «suena» cada pocos segundos, como un mensaje entrando. */
.wa-flot.is-ping .wa-flot__icon svg { animation: wa-suena 3600ms ease-in-out 400ms infinite; }
@keyframes wa-suena { 0%, 72%, 100% { transform: none; } 76% { transform: rotate(-14deg) scale(1.08); } 80% { transform: rotate(11deg) scale(1.08); } 84% { transform: rotate(-7deg) scale(1.04); } 88% { transform: rotate(4deg); } 92% { transform: none; } }
@keyframes wa-ping { 0% { opacity: 0.55; transform: scale(1); } 100% { opacity: 0; transform: scale(1.75); } }

/* Burbuja (una vez por visita): asoma a la izquierda, se queda unos segundos y se retira. */
.wa-flot__bubble {
  position: absolute;
  right: calc(var(--wa-size) + 14px);
  bottom: 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px 11px 16px;
  border-radius: 16px 16px 4px 16px;
  background: var(--paper, #f4f2ee);
  color: var(--ink, #0b0b0c);
  font: 600 14.5px/1.2 var(--font, system-ui);
  white-space: nowrap;
  box-shadow: 0 16px 40px -14px rgba(0, 0, 0, 0.75);
  pointer-events: none;
  opacity: 0;
  transform: translateX(10px) scale(0.92);
  transform-origin: right bottom;
  transition: opacity 320ms ease, transform 520ms var(--wa-spring);
}
.wa-flot.is-bubble .wa-flot__bubble { opacity: 1; transform: none; pointer-events: auto; }
.wa-flot__bubble button {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin: -6px -6px -6px 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: rgba(11, 11, 12, 0.55);
  cursor: pointer;
}
.wa-flot__bubble button:hover { color: var(--ink, #0b0b0c); background: rgba(11, 11, 12, 0.06); }
.wa-flot__bubble svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.wa-flot__dots { display: inline-flex; gap: 3px; }
.wa-flot__dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--brand, #fd5700); animation: wa-dot 1.2s ease-in-out infinite; }
.wa-flot__dots i:nth-child(2) { animation-delay: 0.15s; }
.wa-flot__dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes wa-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.45; } 30% { transform: translateY(-3px); opacity: 1; } }

@media (max-width: 600px) {
  .wa-flot { --wa-size: 64px; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); }
  .wa-flot__bubble { font-size: 14px; }
}
/* Ficha de producto en teléfono: la barra fija de cotizar ya tiene WhatsApp; el flotante no se suma. */
@media (max-width: 960px) {
  .page-producto .wa-flot { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .wa-flot__btn, .wa-flot__icon svg, .wa-flot__bubble, .wa-flot__label { transition: opacity 200ms ease; transform: none !important; }
  .wa-flot.is-ping .wa-flot__btn::before, .wa-flot.is-ping .wa-flot__btn::after, .wa-flot.is-ping .wa-flot__icon svg, .wa-flot__dots i, .wa-flot__btn:hover .wa-flot__icon svg { animation: none; }
}