/* MEGATREND · mascotas de la tienda. GENERADO por outputs/mascotas-megatrend-2026-09/fuente-web/construir-mascotas-web.py */
/* mariposa */
.mt-bfly{width:100%;display:block;cursor:pointer;overflow:visible;--fs:.45s;-webkit-tap-highlight-color:transparent}
.mt-bfly.hover{--fs:.28s}
.mt-bfly.listen{--fs:.33s}
.mt-bfly.think{--fs:.2s}
.mt-bfly.happy{--fs:.18s}
.mt-bfly .flap{transform-origin:120px 130px;animation:mtbfly-flap var(--fs) ease-in-out infinite alternate}
.mt-bfly .flap2{transform-origin:120px 140px;animation:mtbfly-flap var(--fs) ease-in-out .06s infinite alternate}
@keyframes mtbfly-flap{from{transform:scaleX(1)}to{transform:scaleX(.16)}}
.mt-bfly .fly{transform-origin:120px 130px;animation:mtbfly-fly 2.4s ease-in-out infinite}
@keyframes mtbfly-fly{0%,100%{transform:translate(0,6px) rotate(-3deg)}50%{transform:translate(0,-10px) rotate(3deg)}}
.mt-bfly .ant-l{transform-origin:114px 76px;animation:mtbfly-ant 1.1s ease-in-out infinite alternate}
.mt-bfly .ant-r{transform-origin:126px 76px;animation:mtbfly-ant 1.1s ease-in-out .2s infinite alternate-reverse}
.mt-bfly.listen .ant-l,.mt-bfly.listen .ant-r{animation-duration:.4s}
@keyframes mtbfly-ant{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
.mt-bfly .glow{transform-origin:120px 130px;animation:mtbfly-glow 1.6s ease-in-out infinite alternate}
.mt-bfly.hover .glow,.mt-bfly.happy .glow{animation-duration:.6s}
@keyframes mtbfly-glow{from{opacity:.35;transform:scale(.85)}to{opacity:.8;transform:scale(1.1)}}
.mt-bfly .sp{animation:mtbfly-tw 1.5s ease-in-out infinite}
.mt-bfly .sp:nth-of-type(2){animation-delay:.4s}
.mt-bfly .sp:nth-of-type(3){animation-delay:.9s}
@keyframes mtbfly-tw{0%,100%{opacity:0;transform:translateY(0)}50%{opacity:1;transform:translateY(-14px)}}
.mt-bfly .sh{transform-origin:120px 245px;animation:mtbfly-sh 2.4s ease-in-out infinite}
@keyframes mtbfly-sh{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(.7);opacity:.2}}
.mt-bfly .j-jump{transform-origin:120px 200px}
.mt-bfly.jump .j-jump{animation:mtbfly-jump .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes mtbfly-jump{0%{transform:translateY(0) scale(1,1)}20%{transform:translateY(6px) scale(1.08,.9)}55%{transform:translateY(-44px) rotate(360deg) scale(.95,1.05)}100%{transform:translateY(0) rotate(360deg)}}
.mt-bfly .j-blink{transform-box:fill-box;transform-origin:center}
.mt-bfly.blink .j-blink{animation:mtbfly-bl .16s}
@keyframes mtbfly-bl{50%{transform:scaleY(.1)}}
.mt-bfly.happy .j-blink{transform:scaleY(.35)}
.mt-bfly .j-orbit{opacity:0;transform-origin:120px 130px}
.mt-bfly.think .j-orbit{opacity:1;animation:mtbfly-spin 1.1s linear infinite}
@keyframes mtbfly-spin{to{transform:rotate(360deg)}}
.mt-bfly .pt{animation:mtbfly-pt .8s ease-out forwards}
@keyframes mtbfly-pt{from{opacity:1;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}
/* abeja */
.mt-bee{width:100%;display:block;cursor:pointer;overflow:visible;--fs:.09s;-webkit-tap-highlight-color:transparent}
.mt-bee.hover{--fs:.06s}
.mt-bee.listen{--fs:.07s}
.mt-bee.think{--fs:.05s}
.mt-bee.happy{--fs:.05s}
.mt-bee .wl{transform-origin:108px 146px;animation:mtbee-wl var(--fs) ease-in-out infinite alternate}
.mt-bee .wr{transform-origin:132px 146px;animation:mtbee-wr var(--fs) ease-in-out infinite alternate}
@keyframes mtbee-wr{from{transform:rotate(-20deg)}to{transform:rotate(16deg)}}
@keyframes mtbee-wl{from{transform:rotate(20deg)}to{transform:rotate(-16deg)}}
.mt-bee .fly{transform-origin:120px 150px;animation:mtbee-fly 2.6s ease-in-out infinite}
@keyframes mtbee-fly{0%{transform:translate(-7px,4px) rotate(-3deg)}25%{transform:translate(0,-9px)}50%{transform:translate(7px,4px) rotate(3deg)}75%{transform:translate(0,-6px)}100%{transform:translate(-7px,4px) rotate(-3deg)}}
.mt-bee.hover .fly{animation-duration:1.2s}
.mt-bee .ant-l{transform-origin:108px 66px;animation:mtbee-ant 1s ease-in-out infinite alternate}
.mt-bee .ant-r{transform-origin:132px 66px;animation:mtbee-ant 1s ease-in-out .2s infinite alternate-reverse}
.mt-bee.listen .ant-l,.mt-bee.listen .ant-r{animation-duration:.35s}
@keyframes mtbee-ant{from{transform:rotate(-10deg)}to{transform:rotate(10deg)}}
.mt-bee .glow{transform-origin:120px 140px;animation:mtbee-glow 1.6s ease-in-out infinite alternate}
.mt-bee.hover .glow,.mt-bee.happy .glow{animation-duration:.6s}
@keyframes mtbee-glow{from{opacity:.35;transform:scale(.85)}to{opacity:.8;transform:scale(1.1)}}
.mt-bee .sp{animation:mtbee-tw 1.5s ease-in-out infinite}
.mt-bee .sp:nth-of-type(2){animation-delay:.4s}
.mt-bee .sp:nth-of-type(3){animation-delay:.9s}
@keyframes mtbee-tw{0%,100%{opacity:0;transform:translateY(0)}50%{opacity:1;transform:translateY(-14px)}}
.mt-bee .sh{transform-origin:120px 250px;animation:mtbee-sh 2.6s ease-in-out infinite}
@keyframes mtbee-sh{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(.7);opacity:.2}}
.mt-bee .j-jump{transform-origin:120px 150px}
.mt-bee.jump .j-jump{animation:mtbee-jump .8s cubic-bezier(.3,1.4,.5,1)}
@keyframes mtbee-jump{0%{transform:translateY(0)}25%{transform:translateY(-40px) rotate(-180deg)}55%{transform:translateY(-52px) rotate(-360deg)}100%{transform:translateY(0) rotate(-360deg)}}
.mt-bee .j-blink{transform-box:fill-box;transform-origin:center}
.mt-bee.blink .j-blink{animation:mtbee-bl .16s}
@keyframes mtbee-bl{50%{transform:scaleY(.1)}}
.mt-bee.happy .j-blink{transform:scaleY(.35)}
.mt-bee .j-orbit{opacity:0;transform-origin:120px 150px}
.mt-bee.think .j-orbit{opacity:1;animation:mtbee-spin 1s linear infinite}
@keyframes mtbee-spin{to{transform:rotate(360deg)}}
.mt-bee .pt{animation:mtbee-pt .8s ease-out forwards}
@keyframes mtbee-pt{from{opacity:1;transform:translate(0,0) scale(1)}to{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.3)}}

/* ---------- Ubicación y paneles de las mascotas (usa las variables de style.css) ---------- */
.mt-wrap{position:fixed;z-index:79;width:104px}
.mt-bfly{right:12px;bottom:92px}
.mt-bee{left:12px;bottom:12px}
.mt-btn{display:block;width:100%;background:none;border:0;padding:0;margin:0;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;border-radius:18px}
.mt-wrap.mt-drag{z-index:90}
.mt-wrap.mt-drag .mt-btn{cursor:grabbing}
.mt-wrap.mt-drag .mt-svg{transform:scale(1.1) rotate(-5deg)}
.mt-svg{transition:transform .15s}
/* Aleteo según lo que hace la mariposa: rápido al volar, lento al posarse */
.mt-svg.mt-bfly.flying{--fs:.3s}
.mt-svg.mt-bfly.perched{--fs:.8s}
.mt-reset,.mt-roam{display:block;width:100%;margin-top:8px;padding:0;background:none;border:0;color:var(--text-2,#475569);font:inherit;font-size:.76rem;cursor:pointer;text-align:center;text-decoration:underline}
.mt-reset:hover,.mt-roam:hover{color:var(--text-1,#0b1120)}
.mt-btn:focus-visible{outline:3px solid #8a6bff;outline-offset:4px}
.mt-svg{display:block;width:100%;height:auto;overflow:visible;pointer-events:none}
.mt-x{position:absolute;top:-4px;right:-4px;width:22px;height:22px;border-radius:50%;border:0;background:rgba(11,17,32,.65);color:#fff;font-size:15px;line-height:22px;padding:0;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .15s}
/* la × solo aparece cuando el mouse pasa por la mascota; al tocarla, las mascotas dejan de moverse y vuelven a su sitio */
.mt-wrap:hover .mt-x{opacity:1;pointer-events:auto}
.mt-x:focus-visible{opacity:1;pointer-events:auto;outline:2px solid #8a6bff}
.mt-bubble,.mt-panel{position:absolute;bottom:calc(100% + 4px);background:var(--bg-2,#fff);color:var(--text-1,#0b1120);border:1px solid var(--line,#d8e2f0);box-shadow:var(--shadow-2,0 10px 30px rgba(11,17,32,.18))}
/* El globo y el panel se abren hacia el lado y la altura con sitio (lo decide el JS: al-l / al-r / below) */
.mt-wrap.al-r .mt-bubble,.mt-wrap.al-r .mt-panel{right:0;left:auto}
.mt-wrap.al-l .mt-bubble,.mt-wrap.al-l .mt-panel{left:0;right:auto}
.mt-wrap.below .mt-bubble,.mt-wrap.below .mt-panel{top:calc(100% + 4px);bottom:auto}
.mt-wrap.below .mt-x{top:auto;bottom:-4px}
.mt-bubble{width:max-content;max-width:min(250px,68vw);padding:8px 12px;border-radius:14px;font-size:.82rem;line-height:1.35;opacity:0;transform:translateY(6px) scale(.96);transition:opacity .22s,transform .22s;pointer-events:none}
.mt-bubble.on{opacity:1;transform:none}
.mt-panel{width:270px;max-width:86vw;padding:14px;border-radius:16px;font-size:.86rem}
.mt-panel[hidden]{display:none}
.mt-t{margin:0 0 6px;font-weight:700;font-size:.95rem}
.mt-s{margin:0 0 10px;color:var(--text-2,#475569);line-height:1.4}
.mt-form{display:flex;gap:6px;margin:0}
.mt-form input{flex:1;min-width:0;padding:9px 12px;border-radius:10px;border:1px solid var(--line,#d8e2f0);background:transparent;color:inherit;font:inherit}
.mt-form button{border:0;border-radius:10px;padding:0 14px;color:#fff;font-weight:700;cursor:pointer;background:linear-gradient(135deg,#2e6bff,#7f3bff)}
.mt-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.mt-chips a{padding:4px 10px;border-radius:999px;border:1px solid var(--line,#d8e2f0);color:inherit;text-decoration:none;font-size:.78rem}
.mt-chips a:hover{border-color:#7f3bff}
.mt-cta{display:block;text-align:center;padding:10px;border-radius:10px;background:#25d366;color:#fff;font-weight:700;text-decoration:none}
.mt-link{display:block;text-align:center;margin-top:8px;color:var(--text-2,#475569);font-size:.78rem}
.mt-restore{position:fixed;left:12px;bottom:12px;z-index:79;display:none;padding:8px 14px;border-radius:999px;border:1px solid var(--line,#d8e2f0);background:var(--bg-2,#fff);color:var(--text-1,#0b1120);font:inherit;font-size:.82rem;cursor:pointer;box-shadow:var(--shadow-2,0 6px 18px rgba(11,17,32,.15))}
html.mt-off .mt-wrap{display:none}
html.mt-off .mt-restore{display:block}
@media (max-width:640px){.mt-wrap{width:76px}.mt-bfly{bottom:84px;right:8px}.mt-bee{left:8px;bottom:8px}.mt-restore{left:8px;bottom:8px}}
/* Con "reducir movimiento": las alas siguen (más lento) para que se vea que están vivas; se quitan flote, saltos y chispas */
@media (prefers-reduced-motion:reduce){
  .mt-svg .fly,.mt-svg .glow,.mt-svg .sp,.mt-svg .sh{animation:none!important}
  .mt-svg .flap,.mt-svg .flap2,.mt-svg .wl,.mt-svg .wr{animation-duration:.9s!important}
}

/* ---------- Micrófono (búsqueda por voz) ---------- */
.mt-form .mt-mic{width:38px;padding:0;font-size:1rem;background:transparent;border:1px solid var(--line,#d8e2f0);color:inherit;flex:none}
.mt-form .mt-mic:hover{border-color:#7f3bff}
.mt-form .mt-mic.on{background:#ef4444;border-color:#ef4444;color:#fff;animation:mt-mic-pulso 1s ease-in-out infinite}
@keyframes mt-mic-pulso{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.5)}50%{box-shadow:0 0 0 7px rgba(239,68,68,0)}}
.mt-hint{margin:8px 0 0;min-height:1.2em;font-size:.76rem;line-height:1.35;color:var(--text-2,#475569)}

/* ---------- 3D: el lienzo transparente (lo dibuja mascotas3d.js) va detrás de los botones y paneles ---------- */
.mt-stage{position:fixed;left:0;top:0;pointer-events:none;z-index:78}
.mt-wrap.mt-3d .mt-svg{opacity:0}