/* === YESMARKET • Floating Chat Button (Final Pro Version) === */
:root{
  --ymw-bg:#25D366;         /* color principal del botón */
  --ymw-text:#ffffff;       /* color del icono */
  --ymw-bubble-bg:#111111;  /* color del globo "¡Contactanos!" */
  --ymw-bubble-text:#ffffff;
}

#ymw{
  position:fixed; right:20px; bottom:20px; z-index:9999;
  display:flex; align-items:center; gap:10px;
  -webkit-tap-highlight-color: transparent;
}

#ymw-btn{
  width:60px; height:60px; border-radius:50%;
  background:var(--ymw-bg); color:var(--ymw-text);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  transition:transform .25s ease, box-shadow .25s ease;
}
#ymw-btn:hover{
  transform:scale(1.05);
  box-shadow:0 12px 36px rgba(0,0,0,.3);
}
#ymw-btn svg{
  width:32px; height:32px; fill:currentColor;
}

/* Globo de texto */
#ymw-label{
  background:var(--ymw-bubble-bg);
  color:var(--ymw-bubble-text);
  padding:10px 14px;
  border-radius:14px;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.25);
  opacity:0;
  transform:translateY(6px) scale(.98);
  pointer-events:none;
  transition:opacity .25s ease, transform .25s ease;
}
#ymw.announce #ymw-label{ opacity:1; transform:translateY(0) scale(1); }

/* Animación de tipeo */
#ymw-label.typing{ border-right:2px solid var(--ymw-bubble-text); }
@keyframes caretBlink{ 0%,100%{opacity:1;} 50%{opacity:0;} }
#ymw-label.typing::after{
  content:''; display:inline-block; width:0; height:1em;
  border-right:2px solid var(--ymw-bubble-text);
  animation:caretBlink 1s step-end infinite;
  margin-left:2px;
}

/* Microvibración */
@keyframes ymw-vibrate{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(-1.5px,1.5px) }
  40%{ transform:translate(1.5px,-1px) }
  60%{ transform:translate(-1px,1.5px) }
  80%{ transform:translate(1px,-1.5px) }
}
#ymw-btn.vibrate{ animation:ymw-vibrate .35s linear 1; }

/* Mobile */
@media (max-width:576px){
  #ymw{ right:14px; bottom:14px; }
  #ymw-btn{ width:56px; height:56px; }
  #ymw-btn svg{ width:28px; height:28px; }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  #ymw-btn, #ymw-label{ transition:none; animation:none }
}