/* Ayudante flotante "Cajín" (home + catálogo). Colores explícitos → portable. */
/* El brazo que saluda se sale del cuadro del SVG (overflow:visible) y rota,
   así que con 18px quedaba rozando el filo de la ventana — y con la barra de
   scroll, cortado. En escritorio se separa más del borde. */
.bc-helper{position:fixed;right:26px;bottom:26px;z-index:65;display:flex;align-items:flex-end;gap:10px;transition:bottom .28s ease}
/* Mismo margen abajo que a la derecha. El pill "Ver pedido" va centrado con
   max-width:560px, así que en pantallas anchas no llega hasta aquí y no hace
   falta subir a Cajín: por eso .raised solo actúa en el media query de abajo,
   donde el pill sí ocupa casi todo el ancho y se pisarían. */
@media (max-width:820px){
  .bc-helper{right:16px;bottom:16px}
  .bc-helper.raised{bottom:84px}
}

.bc-box{width:72px;height:72px;padding:0;border:none;background:none;cursor:pointer;flex-shrink:0;filter:drop-shadow(0 8px 14px rgba(10,30,60,.26))}
.bc-box svg{width:100%;height:100%;display:block;overflow:visible}

.bc-bubble{position:relative;background:#fff;border:1.5px solid #E7E1D6;border-radius:14px 14px 4px 14px;padding:12px 14px 13px;max-width:212px;box-shadow:0 14px 30px -14px rgba(10,30,60,.5)}
.bc-bubble[hidden]{display:none}
.bc-bubble b{display:block;font-size:13.5px;font-weight:700;color:#0A1E3C;line-height:1.3}
.bc-bubble>span{display:block;font-size:12px;color:#6b7280;margin-top:2px}
.bc-hwa{display:inline-flex;align-items:center;gap:6px;margin-top:9px;background:#1F8A4C;color:#fff;border-radius:8px;padding:8px 12px;font-size:12.5px;font-weight:700;text-decoration:none}
.bc-hwa:hover{filter:brightness(1.07)}
.bc-bubble::after{content:'';position:absolute;right:-8px;bottom:14px;width:0;height:0;border:8px solid transparent;border-left-color:#fff;border-right:0}
.bc-hclose{position:absolute;top:-9px;right:-9px;width:22px;height:22px;border-radius:50%;background:#0A1E3C;color:#fff;border:2px solid #fff;font-size:11px;line-height:1;cursor:pointer}

/* ── Animaciones ── */
@keyframes bc-peek{0%{transform:translateY(92px)}70%{transform:translateY(-6px)}100%{transform:translateY(0)}}
@keyframes bc-blink{0%,92%,100%{transform:scaleY(1)}96%{transform:scaleY(.12)}}
@keyframes bc-wave{0%,100%{transform:rotate(0)}25%{transform:rotate(17deg)}60%{transform:rotate(-8deg)}}
@keyframes bc-bub{from{opacity:0;transform:translateY(6px) scale(.96)}to{opacity:1;transform:none}}
.bc-box{animation:bc-peek .6s cubic-bezier(.2,.8,.3,1.2) both}
.bc-eye{transform-box:fill-box;transform-origin:center;animation:bc-blink 5.5s infinite}
.bc-arm{transform-box:fill-box;transform-origin:72% 92%}
/* Saluda cuando aparece el globo, no antes: el gesto y el "¡Hola! Soy Cajín"
   se leen como una sola cosa. Antes iba con un retardo fijo y saludaba solo. */
.bc-helper.saluda .bc-arm{animation:bc-wave 1.9s ease-in-out 2}
.bc-box:hover .bc-arm{animation:bc-wave .7s ease}
.bc-bubble:not([hidden]){animation:bc-bub .28s cubic-bezier(.2,.9,.3,1.25)}

.bc-helper.noanim .bc-box,.bc-helper.noanim .bc-eye,.bc-helper.noanim .bc-arm,.bc-helper.noanim .bc-bubble{animation:none}
@media (prefers-reduced-motion:reduce){.bc-box,.bc-eye,.bc-arm,.bc-bubble{animation:none!important}}