/* Avatar flotante del ecosistema Appgile.
   Los colores salen de variables para que cada proyecto ponga las suyas
   sin tocar este fichero. Los valores de respaldo son neutros a propósito. */
.av{
  position:fixed;right:clamp(12px,2.4vw,26px);bottom:clamp(12px,2.4vw,26px);z-index:55;
  display:flex;align-items:flex-end;gap:10px;text-decoration:none;
  opacity:0;transform:translateY(24px) scale(.9);pointer-events:none;
  transition:opacity .7s var(--av-ease,cubic-bezier(.22,1,.36,1)),
             transform .7s var(--av-ease,cubic-bezier(.22,1,.36,1));
}
.av.is-in{opacity:1;transform:none;pointer-events:auto}

/* bocadillo */
.av__b{
  margin-bottom:18px;max-width:min(56vw,226px);
  background:var(--av-papel,#fff);color:var(--av-tinta,#22242a);
  border-radius:18px 18px 5px 18px;padding:11px 15px;
  font-size:14.5px;line-height:1.35;font-weight:500;
  box-shadow:var(--av-sombra,0 24px 50px -22px rgba(20,16,30,.45));
  border:1px solid rgba(0,0,0,.07);
  opacity:0;transform:translateY(6px) scale(.94);transform-origin:100% 100%;
  transition:opacity .45s var(--av-ease,cubic-bezier(.22,1,.36,1)),
             transform .45s var(--av-ease,cubic-bezier(.22,1,.36,1));
}
.av__b b{display:block;font-family:var(--av-titular,inherit);font-weight:700;
  font-size:16px;line-height:1.1;letter-spacing:-.01em;margin-bottom:2px}
.av.is-open .av__b{opacity:1;transform:none}

/* personaje */
.av__c{
  position:relative;flex:none;display:grid;place-items:end center;
  width:clamp(84px,10vw,116px);height:clamp(136px,16vw,188px);
  transition:transform .5s var(--av-ease,cubic-bezier(.22,1,.36,1));
  animation:av-flota 4.6s ease-in-out infinite;
}
/* la sombra en el suelo es lo que evita que parezca una pegatina pegada */
.av__c::after{
  content:'';position:absolute;left:14%;right:14%;bottom:-6px;height:13px;border-radius:50%;
  background:radial-gradient(ellipse at center,rgba(20,16,30,.34),transparent 72%);
  transition:transform .5s var(--av-ease,cubic-bezier(.22,1,.36,1)),opacity .5s;
}
.av:hover .av__c{transform:translateY(-7px) rotate(-2.5deg)}
.av:hover .av__c::after{transform:scale(.86);opacity:.7}
.av:active .av__c{transform:translateY(-2px) scale(.96)}
.av__c img{
  width:100%;height:100%;object-fit:contain;object-position:bottom center;display:block;
  filter:drop-shadow(0 10px 18px rgba(20,16,30,.28));
}
@keyframes av-flota{0%,100%{translate:0 0}50%{translate:0 -7px}}

/* punto de estado sobre la cabeza */
.av__p{
  position:absolute;top:3px;right:19%;width:18px;height:18px;border-radius:50%;
  background:var(--av-pendiente,#25BDB6);border:2.5px solid var(--av-fondo,#fff);
  animation:av-latido 2.3s infinite}
.av.is-hecho .av__p{background:var(--av-hecho,#1FA97F);animation:none}
.av.sin-estado .av__p{display:none}
@keyframes av-latido{
  0%{box-shadow:0 0 0 0 rgba(37,189,182,.6)}
  70%{box-shadow:0 0 0 13px rgba(37,189,182,0)}
  100%{box-shadow:0 0 0 0 rgba(37,189,182,0)}
}

/* respaldo cuando la imagen no carga: mejor un círculo con un emoji que un hueco */
.av__e{display:none;font-size:56px;line-height:1}
.av.sin-img .av__c{height:clamp(84px,10vw,116px);place-items:center}
.av.sin-img .av__c::after{display:none}
.av.sin-img .av__e{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;
  background:var(--av-degradado,linear-gradient(140deg,#F0BC3C,#F2603A 52%,#E02B7C));
  box-shadow:var(--av-sombra,0 18px 40px -14px rgba(20,16,30,.6))}

@media(prefers-reduced-motion:reduce){
  .av__c,.av__p{animation:none}
  .av{transition:none}
}
@media(max-width:420px){
  .av__b{max-width:min(62vw,200px);font-size:13.5px;padding:10px 13px}
}