/* TodoChileCompra — mascotas kawaii originales (3 variantes) */
:root {
  --coral: #ef6b5e;
  --teal: #17a89d;
  --cream: #fbf3e2;
  --pink: #f7b7b0;
  --yellow: #ffb63f;
  --brown: #5b463c;
}

.mas {
  position: relative;
  font-size: calc(var(--mas-size, 96px) / 6);
  width: 6em;
  height: 6.4em;
  margin: 0 auto;
}
.mas-float {
  position: absolute;
  inset: 0 0 0.45em 0;
  animation: mas-float 4.5s ease-in-out infinite;
}
.mas-shadow {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 3.4em;
  height: 0.5em;
  border-radius: 50%;
  background: rgba(91, 70, 60, 0.12);
  animation: mas-shadow 4.5s ease-in-out infinite;
}
@keyframes mas-float {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-0.45em) rotate(2deg); }
}
@keyframes mas-shadow {
  0%, 100% { transform: translateX(-50%) scaleX(1); opacity: 0.8; }
  50% { transform: translateX(-50%) scaleX(0.76); opacity: 0.5; }
}

/* ---------- carita compartida ---------- */
.mas-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.16em;
}
.mas-eyes { display: flex; gap: 1.15em; }
.mas-eyes span {
  width: 0.55em;
  height: 0.62em;
  background: var(--brown);
  border-radius: 50%;
  position: relative;
  animation: mas-blink 4.6s infinite;
}
.mas-eyes span::after {
  content: "";
  position: absolute;
  top: 16%;
  left: 20%;
  width: 0.2em;
  height: 0.2em;
  background: #fff;
  border-radius: 50%;
}
@keyframes mas-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  94% { transform: scaleY(0.12); }
  98% { transform: scaleY(1); }
}
.mas-cheeks {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 2.5em;
}
.mas-cheeks span {
  width: 0.62em;
  height: 0.4em;
  background: var(--pink);
  border-radius: 50%;
  opacity: 0.95;
}
.mas-mouth {
  width: 0.78em;
  height: 0.5em;
  background: var(--brown);
  border-radius: 0 0 1em 1em;
  position: relative;
  overflow: hidden;
}
.mas-mouth::after {
  content: "";
  position: absolute;
  bottom: -32%;
  left: 50%;
  transform: translateX(-50%);
  width: 0.58em;
  height: 0.45em;
  background: var(--coral);
  border-radius: 50%;
}

/* ---------- variante: Mochi (blob con bracitos) ---------- */
.mas-mochi .mas-blob {
  position: absolute;
  inset: 0.35em 0.45em 0.35em 0.45em;
  background: var(--yellow);
  border-radius: 48% 52% 55% 45% / 55% 50% 50% 45%;
  box-shadow: inset -0.3em -0.45em 0 rgba(91, 70, 60, 0.06);
}
.mas-arm {
  position: absolute;
  width: 1.3em;
  height: 0.72em;
  background: var(--yellow);
  border-radius: 50%;
  top: 50%;
}
.mas-arm-l { left: -0.72em; transform: rotate(28deg); }
.mas-arm-r {
  right: -0.72em;
  transform-origin: 30% 50%;
  transform: rotate(-22deg);
  animation: mas-wave 3.6s ease-in-out infinite;
}
@keyframes mas-wave {
  0%, 64%, 100% { transform: rotate(-22deg); }
  74% { transform: rotate(-66deg); }
  84% { transform: rotate(-18deg); }
  92% { transform: rotate(-52deg); }
}

/* ---------- variante: Estrellita ---------- */
.mas-star { position: absolute; inset: 0; width: 100%; height: 100%; }
.mas-estrella .mas-face { padding-top: 0.42em; }
.mas-estrella .mas-eyes { gap: 1.05em; }
.mas-estrella .mas-eyes span {
  width: 0.62em;
  height: 0.34em;
  background: transparent;
  border-radius: 0;
  border-top: 0.2em solid var(--brown);
  border-radius: 50% / 100% 100% 0 0;
  animation: none;
}
.mas-estrella .mas-eyes span::after { display: none; }
.mas-estrella .mas-cheeks { top: 57%; gap: 2.2em; }
.mas-estrella .mas-mouth { width: 0.66em; height: 0.44em; }

/* ---------- variante: Nubita (nube rosa) ---------- */
.mas-nube .mas-cloud {
  position: absolute;
  left: 0.3em;
  right: 0.3em;
  top: 1.75em;
  bottom: 0.45em;
  background: var(--pink);
  border-radius: 2em;
}
.mas-nube .mas-cloud span {
  position: absolute;
  background: var(--pink);
  border-radius: 50%;
}
.mas-nube .mas-cloud span:first-child {
  width: 2.15em;
  height: 2.15em;
  top: -1em;
  left: 0.55em;
}
.mas-nube .mas-cloud span:last-child {
  width: 1.45em;
  height: 1.45em;
  top: -0.6em;
  right: 0.6em;
}
.mas-nube .mas-face { padding-top: 1.55em; }
.mas-nube .mas-cheeks {
  top: 68%;
  gap: 2.3em;
}
.mas-nube .mas-cheeks span { background: var(--coral); opacity: 0.5; }
.mas-nube .mas-mouth { background: #fff; height: 0.42em; width: 0.7em; }
.mas-nube .mas-mouth::after { background: var(--coral); opacity: 0.8; }

/* ======================================================
   ANIMALITOS KAWAII — cuerpo redondo + orejas + rasgos
   Reutilizan .mas-face (ojos, mejillas, boca) y la flotación.
   ====================================================== */
.mas-animal .mas-body {
  position: absolute;
  left: 0.62em; right: 0.62em; top: 0.92em; bottom: 0.22em;
  background: var(--m-body, var(--yellow));
  border-radius: 47% 47% 45% 45% / 50% 50% 47% 47%;
  box-shadow: inset -0.28em -0.42em 0 rgba(91, 70, 60, 0.06);
}
.mas-animal .mas-ear {
  position: absolute;
  top: -0.5em;
  width: 1.45em; height: 1.45em;
  background: var(--m-ear, var(--m-body, var(--yellow)));
  border-radius: 50%;
}
.mas-animal .mas-ear-l { left: 0.05em; }
.mas-animal .mas-ear-r { right: 0.05em; }
.mas-animal .mas-ear::after { content: ""; position: absolute; border-radius: 50%; }
.mas-animal .mas-d1,
.mas-animal .mas-d2,
.mas-animal .mas-d3 { display: none; position: absolute; }
.mas-animal .mas-face { justify-content: center; padding-top: 0.7em; }
.mas-animal .mas-cheeks { top: 60%; gap: 2.3em; }

/* ---- Gatito (orejas triangulares, interior rosa) ---- */
.mas-gato { --m-body: #d2c4b8; }
.mas-gato .mas-ear {
  top: -0.15em; width: 1.25em; height: 1.2em; border-radius: 0.18em 0.18em 0 0;
  clip-path: polygon(50% 0, 100% 100%, 0 100%);
}
.mas-gato .mas-ear-l { left: 0.45em; transform: rotate(-6deg); }
.mas-gato .mas-ear-r { right: 0.45em; transform: rotate(6deg); }
.mas-gato .mas-ear::after { left: 28%; top: 42%; width: 44%; height: 52%; background: var(--pink); clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }
.mas-gato .mas-d1 { display: block; left: 50%; top: 62%; transform: translateX(-50%); width: 0.34em; height: 0.26em; background: var(--coral); border-radius: 50%; z-index: 3; }

/* ---- Perrito (orejas caídas, hocico claro) ---- */
.mas-perro { --m-body: #e3ab72; }
.mas-perro .mas-ear { top: 0.25em; width: 1.05em; height: 2em; background: #c98c4f; border-radius: 0.55em; }
.mas-perro .mas-ear-l { left: -0.28em; transform: rotate(12deg); }
.mas-perro .mas-ear-r { right: -0.28em; transform: rotate(-12deg); }
.mas-perro .mas-d1 { display: block; left: 50%; top: 58%; transform: translateX(-50%); width: 1.85em; height: 1.35em; background: #f6d6ac; border-radius: 50%; }
.mas-perro .mas-d1::after { content: ""; position: absolute; left: 50%; top: 8%; transform: translateX(-50%); width: 0.5em; height: 0.4em; background: var(--brown); border-radius: 50%; }
.mas-perro .mas-face { padding-top: 0.2em; }
.mas-perro .mas-mouth { display: none; }

/* ---- Dino (verde, púas en la cabeza, pancita clara) ---- */
.mas-dino { --m-body: #7fc8a6; }
.mas-dino .mas-ear { display: none; }
.mas-dino .mas-d1 {
  display: block; left: 50%; top: -0.55em; transform: translateX(-50%);
  width: 2.6em; height: 0.85em; background: #5fae8c;
  clip-path: polygon(0 100%, 12% 25%, 25% 100%, 37% 20%, 50% 100%, 62% 20%, 75% 100%, 87% 25%, 100% 100%);
}
.mas-dino .mas-d2 { display: block; left: 50%; bottom: 0.3em; transform: translateX(-50%); width: 2.1em; height: 1.7em; background: #aee2c9; border-radius: 50% 50% 46% 46%; }

/* ---- Conejito (orejas largas, interior rosa) ---- */
.mas-conejo { --m-body: #f4ede2; }
.mas-conejo .mas-ear { top: -1.7em; width: 0.95em; height: 2.3em; border-radius: 0.5em; background: #f4ede2; }
.mas-conejo .mas-ear-l { left: 1.1em; transform: rotate(-9deg); }
.mas-conejo .mas-ear-r { right: 1.1em; transform: rotate(9deg); }
.mas-conejo .mas-ear::after { left: 26%; top: 16%; width: 48%; height: 64%; background: var(--pink); border-radius: 0.4em; }

/* ---- Osito (orejas redondas, hocico claro) ---- */
.mas-oso { --m-body: #c79a6d; }
.mas-oso .mas-ear { top: -0.35em; width: 1.35em; height: 1.35em; }
.mas-oso .mas-ear-l { left: 0.15em; }
.mas-oso .mas-ear-r { right: 0.15em; }
.mas-oso .mas-ear::after { left: 24%; top: 24%; width: 52%; height: 52%; background: #e2c39c; }
.mas-oso .mas-d1 { display: block; left: 50%; top: 60%; transform: translateX(-50%); width: 1.5em; height: 1.15em; background: #e8cda7; border-radius: 50%; }
.mas-oso .mas-d1::after { content: ""; position: absolute; left: 50%; top: 6%; transform: translateX(-50%); width: 0.46em; height: 0.36em; background: var(--brown); border-radius: 50%; }
.mas-oso .mas-mouth { display: none; }

/* ---- Panda (blanco, orejas y parches negros) ---- */
.mas-panda { --m-body: #fbfaf6; }
.mas-panda .mas-ear { top: -0.3em; width: 1.25em; height: 1.25em; background: #4a3f3a; }
.mas-panda .mas-ear-l { left: 0.1em; }
.mas-panda .mas-ear-r { right: 0.1em; }
.mas-panda .mas-d1, .mas-panda .mas-d2 { display: block; top: 1.85em; width: 1em; height: 1.15em; background: #4a3f3a; border-radius: 50%; }
.mas-panda .mas-d1 { left: 0.95em; transform: rotate(-14deg); }
.mas-panda .mas-d2 { right: 0.95em; transform: rotate(14deg); }

/* ---- Ranita (verde, ojos saltones arriba, boca ancha) ---- */
.mas-rana { --m-body: #8fd06a; }
.mas-rana .mas-ear { top: -0.7em; width: 1.4em; height: 1.4em; background: #8fd06a; }
.mas-rana .mas-ear-l { left: 0.35em; }
.mas-rana .mas-ear-r { right: 0.35em; }
.mas-rana .mas-ear::after { left: 28%; top: 26%; width: 0.5em; height: 0.5em; background: var(--brown); }
.mas-rana .mas-face .mas-eyes { display: none; }
.mas-rana .mas-mouth { width: 1.5em; height: 0.34em; background: transparent; border-bottom: 0.22em solid var(--brown); border-radius: 0 0 1em 1em; }
.mas-rana .mas-mouth::after { display: none; }
.mas-rana .mas-cheeks { top: 52%; gap: 2.5em; }

/* ---- Pollito (amarillo, pico naranjo, alita) ---- */
.mas-pollo { --m-body: #ffd24a; }
.mas-pollo .mas-ear { display: none; }
.mas-pollo .mas-d1 { display: block; left: 50%; top: 54%; transform: translateX(-50%); width: 0.7em; height: 0.55em; background: #f7913b; clip-path: polygon(50% 100%, 0 0, 100% 0); z-index: 3; }
.mas-pollo .mas-d2 { display: block; left: 50%; top: -0.5em; transform: translateX(-50%); width: 0.4em; height: 0.75em; background: #ffb63f; border-radius: 0.3em; }
.mas-pollo .mas-d3 { display: block; right: 0.5em; top: 52%; width: 0.95em; height: 1.2em; background: #ffc83f; border-radius: 50%; }
.mas-pollo .mas-mouth { display: none; }
.mas-pollo .mas-cheeks { top: 64%; }

/* ---- Zorro (naranjo, orejas puntudas, hocico blanco) ---- */
.mas-zorro { --m-body: #ef8d5e; }
.mas-zorro .mas-ear { top: -0.2em; width: 1.2em; height: 1.35em; border-radius: 0.2em 0.2em 0 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mas-zorro .mas-ear-l { left: 0.35em; transform: rotate(-8deg); }
.mas-zorro .mas-ear-r { right: 0.35em; transform: rotate(8deg); }
.mas-zorro .mas-ear::after { left: 30%; top: 46%; width: 40%; height: 50%; background: #5b463c; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mas-zorro .mas-d1 { display: block; left: 50%; bottom: 0.35em; transform: translateX(-50%); width: 2em; height: 1.5em; background: #fbf3e2; border-radius: 50% 50% 48% 48%; }
.mas-zorro .mas-d1::after { content: ""; position: absolute; left: 50%; top: 10%; transform: translateX(-50%); width: 0.42em; height: 0.34em; background: var(--brown); border-radius: 50%; }

/* ---- Pingüino (oscuro, pancita blanca, pico naranjo) ---- */
.mas-pinguino { --m-body: #50505e; }
.mas-pinguino .mas-ear { display: none; }
.mas-pinguino .mas-d1 { display: block; left: 50%; top: 1.5em; transform: translateX(-50%); width: 2.5em; height: 3.1em; background: #fbfaf6; border-radius: 50% 50% 48% 48%; }
.mas-pinguino .mas-d2 { display: block; left: 50%; top: 2.35em; transform: translateX(-50%); width: 0.6em; height: 0.48em; background: #f7913b; clip-path: polygon(50% 100%, 0 0, 100% 0); z-index: 4; }
.mas-pinguino .mas-d3 { display: block; left: 50%; bottom: -0.05em; transform: translateX(-50%); width: 1.7em; height: 0.5em; background: #f7913b; border-radius: 0 0 0.4em 0.4em; box-shadow: -0.55em 0 0 -0.05em #f7913b, 0.55em 0 0 -0.05em #f7913b; }
.mas-pinguino .mas-face { padding-top: 0.55em; }

/* ---- Chanchito (rosa, hocico con fosas, orejitas) ---- */
.mas-chancho { --m-body: #f5a9bb; }
.mas-chancho .mas-ear { top: 0.05em; width: 0.95em; height: 1em; border-radius: 0.2em 0.2em 0 0; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.mas-chancho .mas-ear-l { left: 0.45em; transform: rotate(-12deg); }
.mas-chancho .mas-ear-r { right: 0.45em; transform: rotate(12deg); }
.mas-chancho .mas-d1 { display: block; left: 50%; top: 62%; transform: translateX(-50%); width: 1.25em; height: 0.9em; background: #ef93a8; border-radius: 0.45em; z-index: 3; }
.mas-chancho .mas-d1::before, .mas-chancho .mas-d1::after { content: ""; position: absolute; top: 32%; width: 0.26em; height: 0.34em; background: #cf6c84; border-radius: 50%; }
.mas-chancho .mas-d1::before { left: 26%; }
.mas-chancho .mas-d1::after { right: 26%; }
.mas-chancho .mas-mouth { display: none; }
.mas-chancho .mas-cheeks { top: 56%; }

/* ---- Koala (gris, orejas peludas, nariz grande) ---- */
.mas-koala { --m-body: #aaa7af; }
.mas-koala .mas-ear { top: -0.45em; width: 1.85em; height: 1.7em; background: #bdbac2; }
.mas-koala .mas-ear-l { left: -0.35em; }
.mas-koala .mas-ear-r { right: -0.35em; }
.mas-koala .mas-ear::after { left: 22%; top: 24%; width: 56%; height: 52%; background: #d6d3da; }
.mas-koala .mas-d1 { display: block; left: 50%; top: 56%; transform: translateX(-50%); width: 0.78em; height: 1em; background: #5b4f5a; border-radius: 50% 50% 45% 45%; z-index: 3; }
.mas-koala .mas-mouth { display: none; }
.mas-koala .mas-cheeks { top: 62%; gap: 2.7em; }

@media (prefers-reduced-motion: reduce) {
  .mas-float, .mas-shadow, .mas-eyes span, .mas-arm-r,
  .mas-gato .mas-d1, .mas-perro .mas-ear, .mas-dino .mas-d1,
  .mas-conejo .mas-ear-l, .mas-conejo .mas-ear-r,
  .mas-oso .mas-ear-l, .mas-oso .mas-ear-r,
  .mas-panda .mas-ear-l, .mas-panda .mas-ear-r,
  .mas-rana .mas-ear::after, .mas-pollo .mas-d3,
  .mas-zorro .mas-ear-l, .mas-zorro .mas-ear-r,
  .mas-pinguino .mas-d3, .mas-chancho .mas-d1,
  .mas-koala .mas-ear-l, .mas-koala .mas-ear-r { animation: none; }
}

/* ======================================================
   GESTITOS propios — cada animal con un micro-movimiento
   (además de la flotación y el parpadeo base compartidos)
   ====================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Gatito — saca la lengüita (blep) */
  .mas-gato .mas-d1 { transform-origin: 50% 0; animation: mas-blep 5.2s ease-in-out infinite; }
  @keyframes mas-blep {
    0%, 70%, 100% { transform: translateX(-50%) scaleY(1); }
    80% { transform: translateX(-50%) scaleY(1.55); }
    90% { transform: translateX(-50%) scaleY(1); }
  }

  /* Perrito — orejas que se mecen */
  .mas-perro .mas-ear { transform-origin: 50% 0; }
  .mas-perro .mas-ear-l { animation: mas-dog-l 3.8s ease-in-out infinite; }
  .mas-perro .mas-ear-r { animation: mas-dog-r 3.8s ease-in-out infinite; }
  @keyframes mas-dog-l { 0%, 100% { transform: rotate(12deg); } 50% { transform: rotate(19deg); } }
  @keyframes mas-dog-r { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(-19deg); } }

  /* Dino — las púas vibran */
  .mas-dino .mas-d1 { transform-origin: 50% 100%; animation: mas-spike 4.6s ease-in-out infinite; }
  @keyframes mas-spike {
    0%, 72%, 100% { transform: translateX(-50%) rotate(0); }
    82% { transform: translateX(-50%) rotate(3.5deg); }
    91% { transform: translateX(-50%) rotate(-2.5deg); }
  }

  /* Conejito — orejas largas que se sacuden */
  .mas-conejo .mas-ear { transform-origin: 50% 100%; }
  .mas-conejo .mas-ear-l { animation: mas-rabbit-l 5s ease-in-out infinite; }
  .mas-conejo .mas-ear-r { animation: mas-rabbit-r 5s ease-in-out infinite 0.2s; }
  @keyframes mas-rabbit-l { 0%, 78%, 100% { transform: rotate(-9deg); } 85% { transform: rotate(-22deg); } 92% { transform: rotate(-3deg); } }
  @keyframes mas-rabbit-r { 0%, 78%, 100% { transform: rotate(9deg); } 85% { transform: rotate(22deg); } 92% { transform: rotate(3deg); } }

  /* Osito — orejitas que se mueven */
  .mas-oso .mas-ear { transform-origin: 50% 100%; }
  .mas-oso .mas-ear-l { animation: mas-twitch-l 5.4s ease-in-out infinite; }
  .mas-oso .mas-ear-r { animation: mas-twitch-r 5.4s ease-in-out infinite; }

  /* Panda — orejas que se mueven (desfasado) */
  .mas-panda .mas-ear { transform-origin: 50% 100%; }
  .mas-panda .mas-ear-l { animation: mas-twitch-l 4.8s ease-in-out infinite 0.4s; }
  .mas-panda .mas-ear-r { animation: mas-twitch-r 4.8s ease-in-out infinite 0.4s; }

  /* Koala — orejas peludas que se sacuden */
  .mas-koala .mas-ear { transform-origin: 50% 100%; }
  .mas-koala .mas-ear-l { animation: mas-twitch-l 5.8s ease-in-out infinite; }
  .mas-koala .mas-ear-r { animation: mas-twitch-r 5.8s ease-in-out infinite; }

  @keyframes mas-twitch-l { 0%, 84%, 100% { transform: rotate(0); } 90% { transform: rotate(-11deg); } 95% { transform: rotate(2deg); } }
  @keyframes mas-twitch-r { 0%, 84%, 100% { transform: rotate(0); } 90% { transform: rotate(11deg); } 95% { transform: rotate(-2deg); } }

  /* Ranita — sus ojos saltones parpadean */
  .mas-rana .mas-ear::after { transform-origin: 50% 50%; animation: mas-blink 4.6s infinite; }

  /* Pollito — bate su alita */
  .mas-pollo .mas-d3 { transform-origin: 50% 20%; animation: mas-flap 3.4s ease-in-out infinite; }
  @keyframes mas-flap {
    0%, 68%, 100% { transform: rotate(0); }
    78% { transform: rotate(-18deg); }
    88% { transform: rotate(-4deg); }
  }

  /* Zorro — orejas puntudas que vibran */
  .mas-zorro .mas-ear { transform-origin: 50% 100%; }
  .mas-zorro .mas-ear-l { animation: mas-fox-l 4.4s ease-in-out infinite; }
  .mas-zorro .mas-ear-r { animation: mas-fox-r 4.4s ease-in-out infinite 0.15s; }
  @keyframes mas-fox-l { 0%, 82%, 100% { transform: rotate(-8deg); } 89% { transform: rotate(-22deg); } 94% { transform: rotate(-8deg); } }
  @keyframes mas-fox-r { 0%, 82%, 100% { transform: rotate(8deg); } 89% { transform: rotate(22deg); } 94% { transform: rotate(8deg); } }

  /* Pingüino — caminata meneadita (patitas) */
  .mas-pinguino .mas-d3 { animation: mas-waddle 2.8s ease-in-out infinite; }
  @keyframes mas-waddle {
    0%, 100% { transform: translateX(-50%) rotate(0); }
    25% { transform: translateX(-54%) rotate(-3deg); }
    75% { transform: translateX(-46%) rotate(3deg); }
  }

  /* Chanchito — su hociquito olfatea */
  .mas-chancho .mas-d1 { transform-origin: 50% 50%; animation: mas-sniff 4.2s ease-in-out infinite; }
  @keyframes mas-sniff {
    0%, 58%, 100% { transform: translateX(-50%) scale(1); }
    68% { transform: translateX(-50%) scale(1.12); }
    78% { transform: translateX(-50%) scale(1); }
    84% { transform: translateX(-50%) scale(1.08); }
    90% { transform: translateX(-50%) scale(1); }
  }
}