/* ═══════════════════════════════════════════════════
   ANIMACIONES DEL ASESOR MJ
   Cada página le da una personalidad distinta al muñeco.
   Todo con CSS: no pesa nada y se ve fluido.
   ═══════════════════════════════════════════════════ */

/* ── Saludo al entrar (aparece desde abajo) ── */
@keyframes mj-entrar{
  0%   {opacity:0; transform:translateY(30px) scale(.85)}
  60%  {opacity:1; transform:translateY(-6px) scale(1.03)}
  100% {opacity:1; transform:translateY(0) scale(1)}
}

/* ── INDEX: saluda con la mano, se inclina de lado a lado ── */
@keyframes mj-saludo{
  0%,88%,100% {transform:translateY(0) rotate(0deg)}
  91%         {transform:translateY(-4px) rotate(-7deg)}
  94%         {transform:translateY(-4px) rotate(7deg)}
  97%         {transform:translateY(-2px) rotate(-4deg)}
}

/* ── CATÁLOGO: mira alrededor, curioso ── */
@keyframes mj-curioso{
  0%,100% {transform:translateY(0) rotate(0deg)}
  25%     {transform:translateY(-5px) rotate(-4deg)}
  50%     {transform:translateY(-2px) rotate(0deg)}
  75%     {transform:translateY(-5px) rotate(4deg)}
}

/* ── UNIFORMES: se pavonea, como modelando ── */
@keyframes mj-modelo{
  0%,100% {transform:translateY(0) rotate(-2deg) scale(1)}
  30%     {transform:translateY(-7px) rotate(3deg) scale(1.03)}
  60%     {transform:translateY(-3px) rotate(-3deg) scale(1)}
}

/* ── BOLSAS: rebote alegre, como cargando algo ── */
@keyframes mj-rebote{
  0%,100%  {transform:translateY(0) scaleY(1)}
  15%      {transform:translateY(-12px) scaleY(1.04)}
  30%      {transform:translateY(0) scaleY(.96)}
  45%      {transform:translateY(-6px) scaleY(1.02)}
  60%      {transform:translateY(0) scaleY(1)}
}

/* ── INVITACIONES: flota elegante, sereno ── */
@keyframes mj-elegante{
  0%,100% {transform:translateY(0) rotate(0deg)}
  50%     {transform:translateY(-9px) rotate(1.5deg)}
}

/* ── TARJETA / CLUB: celebra, entusiasmado ── */
@keyframes mj-celebra{
  0%,70%,100% {transform:translateY(0) rotate(0deg) scale(1)}
  76%         {transform:translateY(-14px) rotate(-6deg) scale(1.06)}
  82%         {transform:translateY(-4px) rotate(5deg) scale(1.02)}
  88%         {transform:translateY(-9px) rotate(-3deg) scale(1.04)}
  94%         {transform:translateY(0) rotate(0deg) scale(1)}
}

/* ── Clases que aplican cada personalidad ── */
.mj-anim{
  animation: mj-entrar .7s cubic-bezier(.34,1.56,.64,1) both;
  transform-origin: 50% 90%;   /* pivota desde los pies */
  will-change: transform;
}
.mj-anim.mj-saludo    { animation: mj-entrar .7s cubic-bezier(.34,1.56,.64,1) both, mj-saludo 7s ease-in-out .7s infinite }
.mj-anim.mj-curioso   { animation: mj-entrar .7s cubic-bezier(.34,1.56,.64,1) both, mj-curioso 5s ease-in-out .7s infinite }
.mj-anim.mj-modelo    { animation: mj-entrar .7s cubic-bezier(.34,1.56,.64,1) both, mj-modelo 4.5s ease-in-out .7s infinite }
.mj-anim.mj-rebote    { animation: mj-entrar .7s cubic-bezier(.34,1.56,.64,1) both, mj-rebote 3.4s ease-in-out .7s infinite }
.mj-anim.mj-elegante  { animation: mj-entrar .7s cubic-bezier(.34,1.56,.64,1) both, mj-elegante 4s ease-in-out .7s infinite }
.mj-anim.mj-celebra   { animation: mj-entrar .7s cubic-bezier(.34,1.56,.64,1) both, mj-celebra 6s ease-in-out .7s infinite }

/* ── Al pasar el mouse: se acerca y se inclina (solo en PC) ── */
@media (hover:hover) and (pointer:fine){
  .mj-anim:hover{
    animation-play-state: paused;
    transform: translateY(-8px) scale(1.10) rotate(-4deg);
    transition: transform .28s cubic-bezier(.34,1.56,.64,1);
  }
}
.mj-anim:active{ transform: translateY(-3px) scale(1.04) }

/* ── Respeta a quien pide menos movimiento ── */
@media (prefers-reduced-motion: reduce){
  .mj-anim, .mj-anim.mj-saludo, .mj-anim.mj-curioso, .mj-anim.mj-modelo,
  .mj-anim.mj-rebote, .mj-anim.mj-elegante, .mj-anim.mj-celebra{
    animation: none !important;
  }
}

/* ═══════════════════════════════════════════════════
   PANEL DE AYUDA DEL ASESOR
   ═══════════════════════════════════════════════════ */
.mja-fondo{position:fixed;inset:0;background:rgba(20,18,19,.62);backdrop-filter:blur(3px);z-index:9998;animation:mja-fade .2s ease}
@keyframes mja-fade{from{opacity:0}to{opacity:1}}
.mja-panel{position:fixed;left:50%;bottom:0;transform:translateX(-50%);width:min(560px,100%);max-height:88vh;overflow-y:auto;
  background:#fff;border-radius:22px 22px 0 0;z-index:9999;box-shadow:0 -10px 42px rgba(0,0,0,.3);
  animation:mja-sube .32s cubic-bezier(.2,.9,.25,1);font-family:'DM Sans',system-ui,sans-serif}
@keyframes mja-sube{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
@media(min-width:720px){
  .mja-panel{bottom:auto;top:50%;transform:translate(-50%,-50%);border-radius:22px;max-height:84vh}
  @keyframes mja-sube{from{transform:translate(-50%,-42%);opacity:0}to{transform:translate(-50%,-50%);opacity:1}}
}
.mja-x{position:absolute;top:13px;right:14px;background:rgba(0,0,0,.06);border:none;width:32px;height:32px;border-radius:50%;
  font-size:15px;color:#666;cursor:pointer;z-index:2;line-height:1}
.mja-x:hover{background:rgba(0,0,0,.12)}
.mja-top{background:linear-gradient(135deg,#231F20,#3a3436);padding:20px 22px;display:flex;align-items:center;gap:14px;border-radius:22px 22px 0 0}
@media(min-width:720px){.mja-top{border-radius:22px 22px 0 0}}
.mja-top img{width:66px;flex-shrink:0;animation:mj-saludo 6s ease-in-out infinite;transform-origin:50% 90%}
.mja-saludo{color:#fff;font-size:15.5px;line-height:1.5;font-weight:500}
.mja-cuerpo{padding:18px 20px 24px}
.mja-tit{font-size:11px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:#999;margin:4px 0 10px}
.mja-atajos{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:20px}
@media(max-width:430px){.mja-atajos{grid-template-columns:1fr}}
.mja-atajo{display:block;padding:12px 13px;background:#f7f7f9;border:1px solid #eee;border-radius:11px;
  font-size:13.5px;color:#231F20;text-decoration:none;transition:all .16s;font-weight:500}
.mja-atajo:hover{background:#fff0f8;border-color:#EC008C;color:#EC008C;transform:translateX(2px)}
.mja-q{border:1px solid #eee;border-radius:12px;margin-bottom:8px;overflow:hidden;transition:border-color .18s}
.mja-q.on{border-color:#EC008C}
.mja-qp{padding:13px 15px;font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;color:#231F20}
.mja-q.on .mja-qp{color:#EC008C}
.mja-fl{font-size:19px;color:#bbb;transition:transform .22s;flex-shrink:0}
.mja-q.on .mja-fl{transform:rotate(90deg);color:#EC008C}
.mja-qr{max-height:0;overflow:hidden;transition:max-height .28s ease,padding .28s ease;padding:0 15px;font-size:13.5px;line-height:1.62;color:#555}
.mja-q.on .mja-qr{max-height:460px;padding:0 15px 14px}
.mja-comun{background:linear-gradient(135deg,#fff6fb,#fdf0f7);border:2px solid #EC008C;border-radius:14px;padding:16px 16px 14px;margin-top:18px}
.mja-comun-p{font-weight:700;font-size:14.5px;color:#EC008C;margin-bottom:7px;line-height:1.4}
.mja-comun-r{font-size:13.5px;line-height:1.62;color:#555}
.mja-wa{display:block;text-align:center;background:#25D366;color:#fff;padding:13px;border-radius:11px;
  font-weight:700;font-size:14.5px;text-decoration:none;margin-top:13px}
.mja-wa:hover{background:#1eb855}
.mja-wa2{background:#f2f2f4;color:#444;margin-top:11px;font-weight:600;font-size:13.5px}
.mja-wa2:hover{background:#e8e8ec}

/* ── Selección de tipo de negocio dentro del panel ── */
.mja-negs{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:6px}
.mja-neg{border:1.5px solid #e8e8e8;border-radius:11px;padding:14px 10px;text-align:center;cursor:pointer;transition:all .15s;background:#fff}
.mja-neg:hover{border-color:#EC008C;background:#fff0f8;transform:translateY(-2px)}
.mja-neg-ic{font-size:25px;margin-bottom:5px}
.mja-neg-t{font-size:12.5px;font-weight:600;color:#231F20;line-height:1.3}
.mja-volver{width:100%;background:none;border:1px solid #ddd;color:#777;border-radius:10px;padding:11px;font-size:13px;cursor:pointer;margin-top:15px;font-family:'DM Sans',sans-serif}
.mja-volver:hover{background:#f7f7f9}