/* Asistente virtual "Barequito" */
.bq { --bq-green: #0b2d23; font-family: var(--sans, system-ui, sans-serif); }
.bq [hidden] { display: none !important; }

/* Minero flotante, encima del botón de WhatsApp (que está abajo a la izquierda) */
/* Mismo eje vertical que el botón de WhatsApp (.wa: left 18px, ancho 58px): el minero se centra sobre él */
.bq-mascot { position: fixed; left: 18px; bottom: 90px; width: 58px; z-index: 81; --s: 68px; }
.bq-avatar { position: relative; display: block; width: var(--s); height: var(--s); margin-left: calc((58px - var(--s)) / 2); padding: 0; border: 0; background: none; border-radius: 50%; cursor: pointer; transition: transform .25s;
  animation: bqEnter .9s cubic-bezier(.34, 1.56, .64, 1) 1.4s both; }
/* Disco redondo (fondo y borde dorado) + minero que se sale un poquito por arriba */
.bq-disc { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--gold-2, #c9a24d); background: radial-gradient(circle at 35% 25%, #1f6b4f, #0b2d23 75%); box-shadow: 0 6px 18px rgba(0, 0, 0, .5); }
/* Caja del tamaño del disco: arriba y a los lados el minero se puede salir (sombrero, mano que saluda); abajo se recorta siguiendo el borde del disco */
.bq-pop { position: absolute; inset: 0; clip-path: polygon(-300% -300%, 400% -300%, 400% 50%, 100% 50%, 98.3% 62.94%, 93.3% 75%, 85.36% 85.36%, 75% 93.3%, 62.94% 98.3%, 50% 100%, 37.06% 98.3%, 25% 93.3%, 14.64% 85.36%, 6.7% 75%, 1.7% 62.94%, 0% 50%, -300% 50%); }
/* Mientras saluda se abre el lado izquierdo hasta abajo para que se vea el brazo completo; en reposo el cuerpo queda recortado por el círculo */
.bq-pop.is-anim { clip-path: polygon(-300% -300%, 400% -300%, 400% 50%, 100% 50%, 98.3% 62.94%, 93.3% 75%, 85.36% 85.36%, 75% 93.3%, 62.94% 98.3%, 50% 100%, 37.06% 98.3%, 25% 93.3%, 14.64% 85.36%, 4% 110%, -300% 110%); }
/* Fotograma (recorte 920×720 del video): el personaje ocupa ~79% del ancho y queda centrado sobre el disco */
.bq-pop .bq-img { position: absolute; max-width: none; width: calc(var(--s) * 1.575); height: auto; left: calc(var(--s) * -.28); bottom: calc(var(--s) * -.088); object-fit: contain; animation: none; }
/* Durante el saludo: fuera del círculo solo se ve la mano y el antebrazo, que se desvanece hacia abajo (así no se ve la manga ni la camisa).
   Máscara = franja vertical con degradado (mano y antebrazo) + el círculo del disco (el cuerpo). */
.bq-pop .bq-anim {
  visibility: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 64%, transparent 80%), radial-gradient(circle calc(var(--s) * .5) at calc(var(--s) * .78) calc(var(--s) * .6405), #000 97%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 64%, transparent 80%), radial-gradient(circle calc(var(--s) * .5) at calc(var(--s) * .78) calc(var(--s) * .6405), #000 97%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.bq-pop .bq-anim.on { visibility: visible; }
.bq-pop .bq-idle.off { visibility: hidden; }
.bq-avatar:hover { transform: scale(1.08); }
/* Respira y flota suavemente */
.bq-mascot { animation: bqBob 3.6s ease-in-out infinite; }
.bq-img { transform-origin: 50% 100%; animation: bqBreath 3.6s ease-in-out infinite; }
/* Saludo: balanceo alegre + aro dorado que pulsa */
.is-waving .bq-disc { animation: bqRing 1.4s ease-out 2; }
/* Solo si no hay animación de video (no cargó o está desactivada): balanceo sencillo */
.is-fallback .bq-avatar { animation: bqGreet 1.4s ease-in-out 2; }
.is-fallback .bq-pop .bq-img { animation: bqPeek 1.4s ease-in-out 2; }
@keyframes bqEnter { from { opacity: 0; transform: scale(.2) translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes bqBreath { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes bqGreet { 0%, 100% { transform: rotate(0); } 12% { transform: rotate(-12deg) scale(1.1); } 28% { transform: rotate(10deg) scale(1.1); } 44% { transform: rotate(-9deg) scale(1.08); } 60% { transform: rotate(7deg) scale(1.05); } 76% { transform: rotate(0); } }
@keyframes bqRing { from { box-shadow: 0 0 0 0 rgba(240, 217, 143, .75), 0 6px 18px rgba(0, 0, 0, .5); } to { box-shadow: 0 0 0 18px rgba(240, 217, 143, 0), 0 6px 18px rgba(0, 0, 0, .5); } }
.bq-avatar:focus-visible, .bq-close:focus-visible, .bq-chip:focus-visible, .bq-btn:focus-visible, .bq-card:focus-visible { outline: 2px solid var(--gold-1, #f0d98f); outline-offset: 2px; }
.bq-img { width: 100%; height: 100%; display: block; object-fit: cover; }
@keyframes bqPeek { 0%, 100% { transform: translateY(0); } 25%, 75% { transform: translateY(-7px) scale(1.04); } }
@keyframes bqBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

.bq-hello { position: absolute; left: 70px; bottom: 14px; width: max-content; max-width: 210px; background: #fff; color: #222; font-size: 13px; line-height: 1.4;
  padding: 10px 28px 10px 14px; border-radius: 12px 12px 12px 2px; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); cursor: pointer; animation: bqPop .35s ease both; }
.bq-hello button { position: absolute; top: 2px; right: 6px; background: none; border: 0; color: #666; font-size: 18px; line-height: 1; padding: 0; cursor: pointer; }
@keyframes bqPop { from { opacity: 0; transform: translateY(6px) scale(.95); } to { opacity: 1; transform: none; } }

/* Ventana de chat */
.bq-chat { position: fixed; left: 14px; bottom: 90px; z-index: 90; width: min(360px, calc(100vw - 28px)); height: min(540px, calc(100vh - 120px));
  display: flex; flex-direction: column; background: #0a2a20; border: 1px solid var(--line, rgba(201, 162, 77, .35)); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .6); overflow: hidden; animation: bqPop .3s ease both; }
.bq-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--bq-green); border-bottom: 1px solid var(--line, rgba(201, 162, 77, .35)); }
.bq-head__av { width: 42px; height: 42px; flex: none; border-radius: 50%; border: 1.5px solid var(--gold-2, #c9a24d); overflow: hidden; background: radial-gradient(circle at 35% 25%, #1f6b4f, #0b2d23 75%); }
.bq-head strong { display: block; color: var(--gold-1, #f0d98f); font-size: 15px; font-weight: 500; }
.bq-head small { display: block; color: var(--muted, #c7bfa6); font-size: 11px; }
.bq-close { margin-left: auto; background: none; border: 0; color: var(--text, #f1e9d2); font-size: 26px; line-height: 1; padding: 4px 8px; cursor: pointer; }
.bq-close:hover { color: var(--gold-1, #f0d98f); }

.bq-log { flex: 1; overflow-y: auto; padding: 14px 12px 6px; display: flex; flex-direction: column; gap: 9px; overscroll-behavior: contain; }
.bq-msg { max-width: 88%; padding: 9px 12px; border-radius: 14px; font-size: 14px; line-height: 1.45; word-wrap: break-word; }
.bq-msg--bot { align-self: flex-start; background: rgba(255, 255, 255, .08); color: var(--text, #f1e9d2); border: 1px solid rgba(201, 162, 77, .2); border-bottom-left-radius: 3px; }
.bq-msg--user { align-self: flex-end; background: var(--gold, linear-gradient(135deg, #e8cd82, #c9a24d)); color: #1c1507; border-bottom-right-radius: 3px; }
.bq-in { animation: bqPop .3s ease both; }
.bq-typing { display: flex; gap: 4px; padding: 12px 14px; }
.bq-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold-2, #c9a24d); animation: bqDot 1s infinite ease-in-out; }
.bq-typing i:nth-child(2) { animation-delay: .15s; } .bq-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes bqDot { 0%, 80%, 100% { opacity: .25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

.bq-btns { display: grid; gap: 6px; margin-top: 9px; }
.bq-btn { display: block; text-align: center; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--gold-2, #c9a24d); color: var(--gold-1, #f0d98f); font-size: 13px; text-decoration: none; transition: .2s; }
.bq-btn:hover { background: rgba(201, 162, 77, .15); }

.bq-cards { align-self: stretch; display: grid; gap: 8px; }
.bq-card { display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; align-items: center; padding: 8px; text-decoration: none; color: var(--text, #f1e9d2);
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(201, 162, 77, .3); border-radius: 10px; transition: .2s; }
.bq-card:hover { border-color: var(--gold-1, #f0d98f); background: rgba(255, 255, 255, .1); }
.bq-card__img { width: 62px; height: 62px; border-radius: 8px; overflow: hidden; background: radial-gradient(circle at 30% 30%, #6c706d, #262926); display: block; }
.bq-card__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bq-card__body { display: grid; gap: 1px; min-width: 0; }
.bq-card__body strong { font-size: 13px; font-weight: 500; line-height: 1.25; }
.bq-card__body small { font-size: 11px; color: var(--gold-2, #c9a24d); }
.bq-card__price { font-size: 13px; color: var(--gold-1, #f0d98f); }
.bq-card__price s { opacity: .55; font-size: 11px; }
.bq-card__go { font-size: 12px; padding: 5px 11px; border-radius: 999px; background: var(--gold, linear-gradient(135deg, #e8cd82, #c9a24d)); color: #1c1507; font-weight: 500; }

.bq-chips { display: flex; gap: 6px; padding: 4px 12px 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.bq-chips::-webkit-scrollbar { display: none; }
.bq-chips:empty { display: none; }
.bq-chip { flex: none; white-space: nowrap; background: transparent; border: 1px solid var(--line, rgba(201, 162, 77, .35)); color: var(--gold-1, #f0d98f); border-radius: 999px; padding: 6px 12px; font: inherit; font-size: 12.5px; cursor: pointer; transition: .2s; }
.bq-chip:hover { background: rgba(201, 162, 77, .15); border-color: var(--gold-2, #c9a24d); }

.bq-form { display: flex; gap: 8px; padding: 10px 12px 12px; border-top: 1px solid var(--line, rgba(201, 162, 77, .35)); background: var(--bq-green); }
.bq-form input { flex: 1; min-width: 0; background: rgba(255, 255, 255, .07); border: 1px solid var(--line, rgba(201, 162, 77, .35)); border-radius: 999px; padding: 10px 14px; color: var(--text, #f1e9d2); font: inherit; font-size: 16px; }
.bq-form input:focus { outline: 0; border-color: var(--gold-1, #f0d98f); }
.bq-form input::placeholder { color: var(--muted, #c7bfa6); }
.bq-form button { width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%; background: var(--gold, linear-gradient(135deg, #e8cd82, #c9a24d)); color: #1c1507; display: grid; place-items: center; cursor: pointer; }

/* Celular: el chat ocupa casi todo el ancho */
@media (max-width: 520px) {
  .bq-mascot { --s: 62px; }
  .bq-chat { left: 8px; right: 8px; bottom: 8px; width: auto; height: min(78vh, 600px); }
}
body.bq-open .wa { visibility: hidden; }
@media (prefers-reduced-motion: reduce) { .bq-mascot, .bq-avatar, .bq-disc, .bq-img, .bq-in, .bq-hello, .bq-chat { animation: none !important; } }