.wa-flotante { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1045; }
.wa-boton {
  position: relative;
  width: 58px; height: 58px; border-radius: 50%; border: 0;
  background: #25d366; color: #fff; font-size: 1.6rem;
  box-shadow: 0 12px 28px rgba(37, 211, 102, .35);
  transition: transform 160ms ease-out, background-color 200ms ease;
}
.wa-boton:active { transform: scale(.94); }
.wa-boton .bi { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 180ms ease, transform 220ms var(--ease-out); }
.wa-icono-cerrar { opacity: 0; transform: rotate(-45deg) scale(.8); font-size: 1.15rem; }
.wa-flotante.abierto .wa-boton { background: var(--kf-carbon); box-shadow: 0 12px 28px rgba(58, 50, 55, .3); }
.wa-flotante.abierto .wa-icono-abrir { opacity: 0; transform: rotate(45deg) scale(.8); }
.wa-flotante.abierto .wa-icono-cerrar { opacity: 1; transform: none; }

.wa-panel {
  position: absolute; right: 0; bottom: calc(100% + .75rem);
  width: 320px; max-width: calc(100vw - 2rem);
  background: #fff; border-radius: 10px; overflow: hidden;
  box-shadow: 0 20px 50px rgba(58, 50, 55, .22);
  transform-origin: bottom right;
  opacity: 0; transform: translateY(8px) scale(.96);
  transition: opacity 200ms ease-out, transform 220ms var(--ease-out);
}
.wa-flotante.abierto .wa-panel { opacity: 1; transform: none; }
.wa-cabecera { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.1rem; background: var(--kf-carbon); color: #fff; }
.wa-cabecera img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.wa-cabecera strong { display: block; font-family: "Josefin Sans", sans-serif; font-size: 1.1rem; }
.wa-cabecera small { color: #cbbfc6; font-size: .75rem; }

.carrito-flotante { right: calc(1.25rem + 58px + .75rem); bottom: calc(1.25rem + 1px); }
@media (max-width: 575.98px) {
  .wa-flotante { right: 1rem; bottom: 1rem; }
  .wa-boton { width: 54px; height: 54px; }
  .carrito-flotante { right: calc(1rem + 54px + .6rem); bottom: calc(1rem + 1px); }
}
@media (prefers-reduced-motion: reduce) {
  .wa-panel, .wa-boton .bi { transition: opacity 150ms ease; transform: none !important; }
}

.wa-panel { width: 340px; display: flex; flex-direction: column; }
.wa-cabecera small { display: inline-flex; align-items: center; gap: .35rem; }
.wa-enlinea { width: 7px; height: 7px; border-radius: 50%; background: #25d366; display: inline-block; }
.wa-reiniciar { background: none; border: 0; color: #cbbfc6; font-size: 1rem; padding: .25rem; transition: color 150ms ease; }
.wa-reiniciar:hover { color: #fff; }
.wa-chat {
  min-height: 96px; max-height: 300px; overflow-y: auto;
  padding: 1rem 1rem .5rem;
  display: flex; flex-direction: column; gap: .45rem;
  background: var(--kf-lila-claro);
  scroll-behavior: smooth;
}
.wa-msg {
  max-width: 82%;
  padding: .55rem .8rem;
  font-size: .88rem; line-height: 1.4;
  border-radius: 14px;
  animation: wa-entra 220ms var(--ease-out) both;
}
.wa-bot { align-self: flex-start; background: #fff; color: var(--kf-carbon); border-bottom-left-radius: 4px; }
.wa-yo { align-self: flex-end; background: var(--kf-morado); color: #fff; border-bottom-right-radius: 4px; }
@keyframes wa-entra { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.wa-escribiendo { display: inline-flex; gap: 4px; padding: .7rem .8rem; }
.wa-escribiendo span { width: 6px; height: 6px; border-radius: 50%; background: #b3a6ae; animation: wa-punto 900ms infinite ease-in-out; }
.wa-escribiendo span:nth-child(2) { animation-delay: 150ms; }
.wa-escribiendo span:nth-child(3) { animation-delay: 300ms; }
@keyframes wa-punto { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }
.wa-respuestas { display: flex; flex-wrap: wrap; gap: .4rem; padding: .75rem 1rem; background: #fff; border-top: 1px solid var(--kf-linea); }
.wa-respuestas:empty { display: none; }
.wa-respuestas button {
  border: 1px solid var(--kf-morado); background: #fff; color: var(--kf-morado);
  border-radius: 50px; padding: .4rem .85rem; font-size: .82rem; font-weight: 600;
  transition: background-color 150ms ease, color 150ms ease, transform 160ms ease-out;
}
.wa-respuestas button:hover { background: var(--kf-morado); color: #fff; }
.wa-respuestas button:active { transform: scale(.96); }
.wa-respuestas .wa-final { width: 100%; border: 0; background: #25d366; color: #fff; border-radius: 8px; padding: .75rem; font-size: .92rem; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.wa-respuestas .wa-final:hover { background: #1eb457; color: #fff; }
.wa-entrada { display: flex; gap: .5rem; padding: .75rem 1rem; background: #fff; border-top: 1px solid var(--kf-linea); }
.wa-entrada input { flex: 1; height: 42px; border: 1px solid #d8ccd4; border-radius: 50px; padding: 0 1rem; font-size: 16px; }
.wa-entrada input:focus { outline: none; border-color: var(--kf-morado); }
.wa-entrada button { width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--kf-morado); color: #fff; transition: transform 160ms ease-out; }
.wa-entrada button:active { transform: scale(.94); }
@media (max-width: 575.98px) {
  .wa-chat { max-height: min(300px, 42svh); }
}
@media (prefers-reduced-motion: reduce) {
  .wa-msg { animation: none; }
  .wa-escribiendo span { animation: none; opacity: .6; }
}
.sin-wa .carrito-flotante { right: 1.25rem; }
@media (max-width: 575.98px) {
  .sin-wa .carrito-flotante { right: 1rem; }
}