/* ===========================================================
   MASTER · el robot de Crown Growth Agency (pieza compartida)
   Se usa así en cualquier página:
     <link rel="stylesheet" href="/assets/bot.css">
     <script>window.BOT_PARADAS=[{sel:'#algo',texto:'Hola'}];</script>
     <script src="/assets/bot.js" defer></script>
   Si no se declaran paradas, acompaña a los elementos con [data-bot].
   =========================================================== */

.bot{position:fixed;left:0;top:0;z-index:12;width:104px;pointer-events:none;
  transform:translate3d(-200px,-200px,0);opacity:0;
  transition:transform 1.1s cubic-bezier(.2,.8,.25,1),opacity .6s ease;will-change:transform}
.bot.visible{opacity:1}
.bot .corona{position:absolute;left:50%;top:1%;width:56%;transform:translateX(-50%);z-index:2;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.55));animation:bot-flota 4.2s ease-in-out infinite;transform-origin:50% 100%}
.bot .flota{animation:bot-flota-svg 4.2s ease-in-out infinite;transform-origin:50% 60%}
@keyframes bot-flota{0%,100%{transform:translate(-50%,0) rotate(-2deg)}50%{transform:translate(-50%,-10px) rotate(2deg)}}
@keyframes bot-flota-svg{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-10px) rotate(2deg)}}
.bot .ojo{animation:bot-parpadeo 5.4s infinite}
@keyframes bot-parpadeo{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.12)}}
.bot .globo{position:absolute;left:50%;bottom:calc(100% - 6px);transform:translateX(-50%);
  background:rgba(12,14,45,.92);border:1px solid rgba(136,145,242,.5);border-radius:12px;
  padding:7px 12px;font:500 12px/1.3 var(--fuente);color:#fff;white-space:nowrap;
  box-shadow:0 12px 30px rgba(5,6,30,.6);opacity:0;transition:opacity .4s ease}
.bot.habla .globo{opacity:1}
@media(max-width:760px){ .bot{width:74px} .bot .globo{font-size:11px;padding:6px 10px} }