/* Burbuja de WhatsApp flotante y animación de «venta» (enviar el pedido por WhatsApp). Va ultimo. */

/* ===== Burbuja flotante ===== */
.wa-flotante{position:fixed;right:18px;bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:70;display:flex;align-items:center;flex-direction:row-reverse;gap:10px}
.wa-btn{position:relative;width:58px;height:58px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 6px 18px rgba(0,0,0,.28);transition:transform .2s ease,box-shadow .2s ease,background .2s}
.wa-btn svg{width:32px;height:32px;fill:#fff}
.wa-btn:hover{transform:scale(1.08);background:#1FB855;box-shadow:0 8px 22px rgba(0,0,0,.34)}
.wa-btn:focus-visible{outline:3px solid #fff;outline-offset:2px;box-shadow:0 0 0 5px var(--azul)}
.wa-btn::after{content:'';position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;opacity:0;animation:waPulso 3.4s ease-out 2s infinite;pointer-events:none}
.wa-tip{position:relative;background:#fff;color:var(--texto);font-size:14px;padding:10px 34px 10px 14px;border-radius:12px;box-shadow:0 6px 20px rgba(0,0,0,.2);white-space:nowrap;animation:waTip .4s cubic-bezier(.2,1.2,.4,1) both}
.wa-tip::after{content:'';position:absolute;right:-6px;top:50%;width:12px;height:12px;background:#fff;transform:translateY(-50%) rotate(45deg);box-shadow:2px -2px 3px rgba(0,0,0,.06)}
.wa-tip[hidden]{display:none}
.wa-tip strong{color:#128C4A}
.wa-tip button{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:22px;height:22px;border-radius:50%;font-size:17px;line-height:1;color:var(--gris)}
.wa-tip button:hover{background:#F2F3F5}
@keyframes waPulso{0%{opacity:.7;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.65)}}
@keyframes waTip{from{opacity:0;transform:translateX(12px)}to{opacity:1;transform:none}}
/* no tapa nada: se oculta con la intro, el carrito, el ingreso, la bienvenida y la animación de venta */
.con-intro .wa-flotante{display:none}
body:has(#carro.abierto) .wa-flotante,body:has(.modal.abierto) .wa-flotante,body:has(#bienvenida.abierta) .wa-flotante,body:has(#ventaAnim:not([hidden])) .wa-flotante,body:has(#visor:not([hidden])) .wa-flotante{opacity:0;pointer-events:none}
.wa-flotante{transition:opacity .2s}
/* deja lugar al final de la pagina para que la burbuja no tape los enlaces legales del pie */
footer.pie{padding-bottom:66px}
@media (max-width:700px){
  .wa-flotante{right:12px;bottom:calc(14px + env(safe-area-inset-bottom,0px))}
  .wa-btn{width:52px;height:52px}.wa-btn svg{width:29px;height:29px}
  .wa-tip{white-space:normal;max-width:min(60vw,210px);font-size:13px}
  #vistaPedido .wrap,#vistaCuenta .wrap{padding-bottom:96px}
}

/* ===== Animación de venta (≈2,7 s): el personaje arma el pedido y se abre WhatsApp ===== */
#ventaAnim{position:fixed;inset:0;z-index:950;display:flex;align-items:center;justify-content:center;padding:16px;background:radial-gradient(ellipse at 50% 40%,#fff 0%,#F3F6FD 55%,#E4EBFA 100%);opacity:0;animation:vaEntra .25s ease forwards}
#ventaAnim[hidden]{display:none}
#ventaAnim.va-sale{animation:vaSale .35s ease forwards}
.va-escena{width:min(92vw,400px);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.va-pj{position:relative;width:104px;height:130px;animation:vaPop .6s cubic-bezier(.2,1.4,.4,1) both}
.va-pj i{position:absolute;left:0;width:100%;background-repeat:no-repeat;background-size:100% 100%}
.va-cuerpo{top:56.5%;height:43.5%;background-image:url(../img/logo/intro-cuerpo.png)}
.va-cabeza{top:0;height:65.6%;background-image:url(../img/logo/intro-cabeza.png);transform-origin:57.7% 98.4%;animation:vaAsiente 2.6s linear both}
.va-tit{font:700 clamp(22px,6vw,28px)/1.05 'Roboto Condensed',sans-serif;text-transform:uppercase;color:var(--azul-osc);opacity:0;animation:vaSube .4s .15s ease forwards}
.va-num{font:700 15px/1 'Roboto Condensed',sans-serif;letter-spacing:.08em;color:var(--rojo);min-height:16px}
.va-num span{display:inline-block;opacity:0;animation:vaLetra .12s ease forwards;animation-delay:calc(.35s + var(--i)*.04s)}
.va-tk{width:100%;background:#fff;border:1px solid var(--linea);border-radius:12px;padding:10px 14px;text-align:left;box-shadow:0 8px 22px rgba(11,58,154,.1);opacity:0;animation:vaSube .4s .3s ease forwards}
.va-tk ul{list-style:none;display:grid;gap:6px;margin:0;padding:0}
.va-tk li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--texto);opacity:0;animation:vaLinea .35s calc(.6s + var(--i)*.28s) ease forwards}
.va-tk li b{flex:none;width:20px;height:20px;border-radius:50%;background:#E5F5EB;display:grid;place-items:center}
.va-tk li b svg{width:12px;height:12px;stroke:#1B7A3E;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.va-tk li span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.va-tk li em{font-style:normal;color:var(--gris);font-size:12.5px}
.va-barra{width:100%;height:6px;border-radius:4px;background:rgba(11,58,154,.12);overflow:hidden}
.va-barra i{display:block;height:100%;background:linear-gradient(90deg,var(--azul),var(--rojo));transform-origin:left;animation:vaBarra 1.7s .3s cubic-bezier(.4,0,.2,1) both}
.va-sub{position:relative;height:22px;width:100%;font-size:14px;color:var(--gris)}
.va-sub span{position:absolute;inset:0}
.va-sub .va-a{animation:vaSale2 .25s 1.85s ease forwards}
.va-sub .va-b{opacity:0;color:#128C4A;font-weight:500;animation:vaSube .3s 2s ease forwards}
.va-wa{position:absolute;right:calc(50% - 90px);top:-6px;width:46px;height:46px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 6px 16px rgba(0,0,0,.25);transform:scale(0);animation:vaWa .5s 1.95s cubic-bezier(.2,1.5,.4,1) forwards}
.va-wa svg{width:26px;height:26px;fill:#fff}
.va-wa u{position:absolute;right:-3px;bottom:-3px;width:20px;height:20px;border-radius:50%;background:#fff;display:grid;place-items:center;text-decoration:none}
.va-wa u svg{width:12px;height:12px;fill:none;stroke:#1B7A3E;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.va-saltar{position:absolute;right:16px;bottom:16px;padding:8px 16px;border-radius:20px;border:1px solid rgba(11,58,154,.25);background:rgba(255,255,255,.8);color:var(--azul);font-size:13px}
.va-saltar:hover{background:#fff}
@keyframes vaEntra{to{opacity:1}}
@keyframes vaSale{from{opacity:1}to{opacity:0}}
@keyframes vaPop{0%{opacity:0;transform:translateY(24px) scale(.7)}60%{opacity:1;transform:translateY(-6px) scale(1.06)}100%{opacity:1;transform:none}}
@keyframes vaAsiente{0%,12%{transform:rotate(0)}18%{transform:rotate(-6deg)}24%{transform:rotate(4deg)}30%,70%{transform:rotate(0)}76%{transform:rotate(7deg) translateY(1px)}82%{transform:rotate(-2deg)}88%,100%{transform:rotate(0)}}
@keyframes vaSube{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes vaLetra{to{opacity:1}}
@keyframes vaLinea{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
@keyframes vaBarra{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes vaSale2{to{opacity:0}}
@keyframes vaWa{from{transform:scale(0) rotate(-30deg)}to{transform:scale(1) rotate(0)}}
/* La carga del estilo mayorista usa el mismo personaje con barra que las secciones */
.m-grid .cargando{grid-column:1/-1}