/* =================== MASCOTA: el mate de Jana ===================
   Un sticker que vive en la esquina de abajo a la derecha (mirando hacia el catálogo, a su izquierda): respira, parpadea, mira el cursor, saluda,
   hace el pulgar y comenta lo que pasa (precio del mate, carrito, cupón). Todo es CSS sobre capas separadas
   del dibujo (cuerpo, brazos, boca, pupilas, párpados); el comportamiento está en mascota.js. */
.mascota { --mw: 124px; --hr: 14px; --hb: calc(12px + env(safe-area-inset-bottom, 0px)); position: fixed; right: calc(var(--hr) - var(--ox, 0px)); bottom: calc(var(--hb) - var(--oy, 0px)); z-index: 24; width: var(--mw); pointer-events: none;
  transition: translate .45s cubic-bezier(.3,.8,.3,1), opacity .35s ease; }
@media (max-width: 700px) { .mascota { --mw: 86px; --hr: 8px; --hb: calc(10px + env(safe-area-inset-bottom, 0px)); } }
.mascota[hidden] { display: none; }
html.con-intro .mascota { visibility: hidden; }

/* con un panel abierto: en pantallas chicas se esconde; en las grandes pasa por encima del velo */
.mascota.tapada { translate: 0 100%; opacity: 0; pointer-events: none; }
.mascota.tapada * { pointer-events: none !important; }
.mascota.sobre { z-index: 125; }
/* dentro del carrito: chiquita, arriba a la derecha (franja del título), para no tapar los precios ni el botón de abajo */
.mascota.en-carrito { --mw: 62px; top: calc(env(safe-area-inset-top, 0px) + 5px); bottom: auto; right: 14px; }
.mascota.en-carrito .m-sombra, .mascota.en-carrito .m-cerrar { display: none; }
/* 28/10: con el carrito abierto la mascota se esconde (el globo tapaba el título) */
.mascota.en-carrito { visibility: hidden; }
.mascota.en-carrito .m-globo { bottom: auto; top: 4px; max-width: min(230px, calc(100vw - 62px - 40px)); transform-origin: 100% 0; }
.mascota.en-carrito .m-globo::before { bottom: auto; top: 16px; }

.m-escena { position: relative; width: 100%; }
.m-sombra { position: absolute; left: 14%; right: 14%; bottom: -3%; height: 8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(43,42,36,.34), rgba(43,42,36,0)); animation: m-sombra 3.6s ease-in-out infinite; }
.m-personaje { position: relative; display: block; width: 100%; aspect-ratio: 446 / 435; padding: 0; border: 0; background: none; cursor: pointer; pointer-events: auto; -webkit-tap-highlight-color: transparent; }
.m-personaje { touch-action: none; cursor: grab; }
.mascota.arrastrada .m-personaje { cursor: grabbing; }
.mascota.arrastrada .m-sombra { opacity: .35; }
/* si la dejaron del lado izquierdo, el globo sale hacia la derecha; si está muy arriba, sale hacia abajo */
.mascota.izq .m-globo { right: auto; left: calc(100% - 4px); border-radius: 18px 18px 18px 5px; transform-origin: 0 100%; }
.mascota.izq .m-globo::before { right: auto; left: -6px; border-right: 0; border-bottom: 1px solid var(--borde, #D9CDB4); border-left: 1px solid var(--borde, #D9CDB4); border-radius: 0 0 0 4px; transform: rotate(45deg); }
.mascota.alto .m-globo { bottom: auto; top: 6%; transform-origin: 100% 0; }
.mascota.alto.izq .m-globo { transform-origin: 0 0; }
.mascota.alto .m-globo::before { bottom: auto; top: 14px; }
.m-personaje:focus-visible { outline: 3px solid var(--oliva, #4A5E2E); outline-offset: 4px; border-radius: 16px; }
.m-salto, .m-cuerpo { position: absolute; inset: 0; display: block; }
.m-salto { transform-origin: 50% 98%; }
.m-cuerpo { transform-origin: 50% 98%; animation: m-respira 3.6s ease-in-out infinite; }
.m-rig, .m-poses { position: absolute; inset: 0; display: block; }
.m-capa { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; user-select: none; -webkit-user-drag: none; }

/* brazos: giran desde el hombro (el brazo va por detrás del cuerpo, así la unión no se ve) */
.m-brazoI { transform-origin: 25.6% 55.9%; }
.m-brazoD { transform-origin: 80% 63%; }
.m-ondas { transform-origin: 20% 60%; opacity: .9; }
.m-chispas { transform-origin: 94% 47%; opacity: 0; transform: scale(.5); }
.m-boca { transform-origin: 41.5% 59%; }
.m-pup { translate: calc(var(--mx, 0) * .75%) calc(var(--my, 0) * 1%); transition: translate .22s ease-out; }

/* párpados: óvalos negros sobre los ojos; para el parpadeo y las caritas de feliz / dormido */
.m-lid { position: absolute; background: #050505; border-radius: 50%; box-shadow: 0 0 0 1px #050505; transform-origin: 50% 0; transform: scaleY(0); }
.m-lid::before, .m-lid::after { content: ""; position: absolute; left: 12%; right: 12%; height: 22%; opacity: 0; transition: opacity .12s; }
.m-lid::after { top: 40%; border-top: calc(var(--mw) * .012 + .6px) solid #fff; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }   /* ^  feliz */
.m-lid::before { top: 34%; border-bottom: calc(var(--mw) * .012 + .6px) solid #fff; border-radius: 0 0 50% 50% / 0 0 100% 100%; } /* ‿  dormido */
.m-lidI { left: 30.16%; top: 42.18%; width: 7.4%; height: 11.5%; }
.m-lidD { left: 45.29%; top: 43.1%; width: 7.4%; height: 11.3%; }

/* poses sueltas (sus momentos): reemplazan al muñeco armado por partes mientras duran */
.m-pose { opacity: 0; transform-origin: 50% 98%; }
.m-pose.on { opacity: 1; animation: m-pose-pop .38s cubic-bezier(.3,1.5,.5,1); }
.m-pose-festeja.on { animation: m-pose-pop .38s cubic-bezier(.3,1.5,.5,1), m-bote .46s .38s ease-in-out infinite alternate; }
.m-pose-sorpresa.on { animation: m-pose-pop .38s cubic-bezier(.3,1.5,.5,1), m-susto .12s .38s 4 alternate; }
.mascota.en-pose .m-rig { visibility: hidden; }

/* ---- globo de diálogo ---- */
.m-globo { position: absolute; right: calc(100% - 4px); bottom: 58%; width: max-content; max-width: min(240px, calc(100vw - var(--mw) - 40px)); min-width: 120px;
  padding: 10px 14px 11px; border-radius: 18px 18px 5px 18px; background: var(--tarjeta, #F8F3E9); color: var(--tinta, #2B2A24); border: 1px solid var(--borde, #D9CDB4);
  font: 500 13.5px/1.4 var(--f-texto, Inter, sans-serif); box-shadow: 0 10px 26px rgba(43,42,36,.2); pointer-events: none;
  opacity: 0; transform: translateY(8px) scale(.82); transform-origin: 100% 100%; transition: opacity .2s ease, transform .35s cubic-bezier(.3,1.5,.5,1); }
.m-globo.visible { opacity: 1; transform: none; }
.m-globo::before { content: ""; position: absolute; right: -6px; bottom: 11px; width: 12px; height: 12px; background: var(--tarjeta, #F8F3E9); border-right: 1px solid var(--borde, #D9CDB4); border-bottom: 1px solid var(--borde, #D9CDB4); border-radius: 0 0 4px 0; transform: rotate(-45deg); }
@media (max-width: 700px) { .m-globo { font-size: 12.5px; padding: 8px 12px 9px; min-width: 110px; } }

.m-cerrar { position: absolute; top: -6px; right: -4px; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--borde, #D9CDB4); background: var(--tarjeta, #F8F3E9); color: var(--tinta-2, #6B6355);
  display: grid; place-items: center; padding: 0; font-size: 13px; line-height: 1; cursor: pointer; pointer-events: auto; opacity: .85; box-shadow: 0 2px 6px rgba(43,42,36,.18); transition: opacity .2s; }
@media (hover: hover) { .m-cerrar { opacity: 0; } .mascota:hover .m-cerrar, .m-cerrar:focus-visible { opacity: 1; } }


/* ---- sueño en dos pasos: primero cabecea (somnolienta), después se acuesta a dormir (durmiendo) ---- */
.mascota.somnolienta .m-lid { transform: scaleY(.62); transition: transform .8s ease; }
.mascota.somnolienta .m-cuerpo { animation: m-cabeceo 4.4s ease-in-out infinite; }
.mascota.somnolienta .m-boca { animation: m-bostezo 6.6s ease-in-out infinite; }
.mascota.dormitando .m-lid { transform: scaleY(1); transition: transform 1s ease; }
.mascota.dormitando .m-lid::before { opacity: 1; }
.mascota.dormitando .m-cuerpo { animation: m-dormita 5.2s ease-in-out infinite; transform-origin: 50% 92%; }
.mascota.dormitando .m-boca { animation: none; transform: scale(.9, .8); }
.m-zzzimg { opacity: 0; transform-origin: 18% 62%; }
.mascota.durmiendo .m-zzzimg { opacity: 1; animation: m-zz 3.2s ease-in-out infinite; }
.mascota.durmiendo .m-pose-duerme.on { animation: m-pose-pop .5s cubic-bezier(.3,1.2,.5,1), m-ronca 3.8s .5s ease-in-out infinite; }
.mascota.durmiendo .m-cuerpo { animation: none; }

/* ---- estados ---- */
.mascota.parpadea .m-lid { animation: m-parpadeo .17s ease-in-out; }
.mascota.g-feliz .m-lid { transform: scaleY(1); }
.mascota.g-feliz .m-lid::after { opacity: 1; }

.mascota.habla .m-boca { animation: m-habla .24s ease-in-out infinite alternate; }
.mascota.habla .m-cuerpo { animation: m-hablando .5s ease-in-out infinite alternate; }
.mascota.g-saludo .m-brazoI { animation: m-saluda 1.5s ease-in-out; }
.mascota.g-saludo .m-ondas { animation: m-ondas 1.5s ease-in-out; }
.mascota.g-pulgar .m-brazoD { animation: m-pulgar 1.1s cubic-bezier(.3,1.4,.5,1); }
.mascota.g-pulgar .m-chispas { animation: m-chispas 1.1s ease-out; }
.mascota.g-hop .m-salto { animation: m-hop .75s cubic-bezier(.3,.6,.4,1); }
.mascota.g-hop .m-sombra { animation: m-sombra-hop .75s ease-out; }
.mascota.g-pensar .m-cuerpo { animation: m-pensar 2.2s ease-in-out; }
.mascota.entra .m-salto { animation: m-entra .9s cubic-bezier(.3,1.3,.5,1) both; }

@keyframes m-respira { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, .982); } }
@keyframes m-sombra { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(1.04); } }
@keyframes m-hablando { from { transform: rotate(-1.4deg) scale(1, 1); } to { transform: rotate(1.4deg) scale(1.012, .985); } }
@keyframes m-habla { from { transform: scale(1, .72); } to { transform: scale(.94, 1.4); } }
@keyframes m-parpadeo { 0%, 100% { transform: scaleY(0); } 40%, 60% { transform: scaleY(1); } }
@keyframes m-saluda { 0% { transform: rotate(0); } 18% { transform: rotate(15deg); } 36% { transform: rotate(-12deg); } 54% { transform: rotate(15deg); } 72% { transform: rotate(-10deg); } 100% { transform: rotate(0); } }
@keyframes m-ondas { 0%, 100% { opacity: .9; transform: none; } 25% { opacity: .2; transform: translateX(-3px); } 50% { opacity: 1; transform: none; } 75% { opacity: .2; transform: translateX(-3px); } }
@keyframes m-pulgar { 0% { transform: rotate(0) scale(1); } 28% { transform: rotate(-16deg) scale(1.2); } 60% { transform: rotate(-5deg) scale(1.1); } 100% { transform: rotate(0) scale(1); } }
@keyframes m-chispas { 0% { opacity: 0; transform: scale(.5); } 30% { opacity: 1; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes m-hop { 0% { transform: none; } 14% { transform: translateY(0) scale(1.09, .9); } 46% { transform: translateY(-13%) scale(.95, 1.08); } 74% { transform: translateY(0) scale(1.08, .92); } 100% { transform: none; } }
@keyframes m-sombra-hop { 0%, 100% { transform: scale(1); opacity: 1; } 46% { transform: scale(.7); opacity: .55; } }
@keyframes m-pensar { 0%, 100% { transform: rotate(0); } 25%, 75% { transform: rotate(-5deg) translateX(-1%); } }
@keyframes m-entra { 0% { transform: translateY(120%) scale(.8); opacity: 0; } 55% { transform: translateY(-8%) scale(.96, 1.08); opacity: 1; } 78% { transform: translateY(0) scale(1.07, .93); } 100% { transform: none; opacity: 1; } }
@keyframes m-pose-pop { 0% { transform: scale(.84, .92); } 55% { transform: scale(1.07, .97); } 100% { transform: none; } }
@keyframes m-bote { from { transform: translateY(0) rotate(-1.5deg); } to { transform: translateY(-5%) rotate(1.5deg); } }
@keyframes m-susto { from { transform: translateX(-1.2%); } to { transform: translateX(1.2%); } }
@keyframes m-cabeceo { 0%, 100% { transform: rotate(0); } 50% { transform: rotate(4deg) translateY(1.5%); } 58% { transform: rotate(-1.5deg); } 68% { transform: rotate(0); } }
@keyframes m-dormita { 0%, 100% { transform: rotate(-2deg); } 45% { transform: rotate(5deg) translateY(2%); } 55% { transform: rotate(5deg) translateY(2%); } 80% { transform: rotate(-1deg); } }
@keyframes m-bostezo { 0%, 70%, 100% { transform: scale(1, 1); } 80% { transform: scale(.9, 2.3); } 90% { transform: scale(.95, 1.4); } }
@keyframes m-zz { 0%, 100% { transform: translate(0, 0) scale(.94); opacity: .5; } 50% { transform: translate(-1.5%, -5%) scale(1.04); opacity: 1; } }
@keyframes m-ronca { 0%, 100% { transform: scale(1, 1); } 50% { transform: scale(1.012, 1.035); } }

/* "reducir movimiento": el mate queda quieto; sólo cambia el globo */
@media (prefers-reduced-motion: reduce) {
  .mascota, .mascota * { animation: none !important; transition: opacity .2s !important; }
}

/* en el pie: volver a mostrarlo si se lo ocultó */
.pie .m-volver { background: none; border: 0; padding: 0; color: var(--oliva); font: inherit; font-weight: 500; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.pie .m-volver[hidden] { display: none; }