/* Mascote vivo: os olhos seguem o ponteiro (ou a rolagem, no celular), o corpo inclina,
   a boca muda com o que acontece na página (susto na tela trincada, alegria no conserto),
   a chave acena quando o botão de WhatsApp recebe o ponteiro. mascote.js cuida disso. */
.mc { display: block; overflow: visible; }
.mc-body { transform-box: fill-box; transform-origin: 50% 100%; }
.mc-pupils { transition: transform .08s linear; }
.mc-pupil { transform-box: fill-box; transform-origin: center; transition: transform .18s var(--ease-out); }
.mc.is-shock .mc-pupil { transform: scale(1.55); }
.mc.is-happy .mc-pupil { transform: scale(.85); }
.mc.is-happy .lg-thumb { animation: mc-thumb .7s var(--ease-out) 2; }
.mc.is-wave .lg-wrench { animation: mc-wave .9s ease-in-out infinite; }
.mc.is-shock .mc-body { animation: mc-jolt .35s var(--ease-out); }
@keyframes mc-thumb { 40% { transform: translateY(-4px) rotate(-14deg); } }
@keyframes mc-wave { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-22deg); } 75% { transform: rotate(12deg); } }
@keyframes mc-jolt { 0% { transform: translateY(0) rotate(0); } 30% { transform: translateY(-9%) rotate(-4deg); } 60% { transform: translateY(0) rotate(3deg); } }

/* o cabeçalho continua usando o selo: o mascote lá dentro é o mesmo SVG */
.brand__badge .mc { position: absolute; left: 50%; bottom: -3px; width: 46px; height: 55px; margin-left: -23px; transform-origin: 50% 100%; animation: lg-jump .9s cubic-bezier(.3, 1.4, .5, 1) .55s both; }
.brand:hover .brand__badge .mc, .brand:focus-visible .brand__badge .mc { animation: lg-hop .6s cubic-bezier(.3, 1.4, .5, 1); }
@media (max-width: 600px) { .brand__badge .mc { width: 40px; height: 48px; margin-left: -20px; } }

/* mascote grande da chamada final, com balão de fala em cima dele (o balão fica dentro da própria coluna) */
.cta__mc { position: relative; flex: 0 0 auto; width: 210px; display: flex; flex-direction: column-reverse; align-items: flex-start; gap: 14px; align-self: flex-end; }
.cta__mc .mc { width: 150px; height: auto; margin-left: 12px; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .35)); }
.mc-bubble {
  position: relative; z-index: 2; width: 100%; padding: 10px 14px; border-radius: 12px 12px 12px 3px;
  background: #FFFFFF; color: #0E1F19; font-size: 15px; line-height: 1.35; font-weight: 600; box-shadow: 6px 6px 0 var(--amber);
  opacity: 0; transform: translateY(8px) scale(.94); transform-origin: 0 100%; transition: opacity .3s ease, transform .35s var(--ease-out);
}
.mc-bubble.is-on { opacity: 1; transform: none; }
.mc-bubble::after { content: ''; position: absolute; left: 22px; bottom: -11px; border: 6px solid transparent; border-top-color: #FFFFFF; border-left-color: #FFFFFF; }
.cta__more { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 10px; }
.cta__more .btn svg { width: 20px; height: 20px; }
@media (max-width: 720px) {
  .cta__mc { width: 100%; flex-direction: row; align-items: flex-end; gap: 14px; order: -1; align-self: flex-start; }
  .cta__mc .mc { width: 96px; flex: none; margin-left: 0; }
  .mc-bubble { flex: 1 1 auto; width: auto; max-width: 300px; margin-bottom: 18px; border-radius: 12px 12px 12px 12px; }
  .mc-bubble::after { left: -12px; bottom: 12px; border: 6px solid transparent; border-right-color: #FFFFFF; border-top-color: transparent; border-left-color: transparent; }
}
.is-testing .mc-bubble { display: none; }
@media (prefers-reduced-motion: reduce) {
  .mc-pupils, .mc-body { transition: none !important; transform: none !important; }
  .mc.is-wave .lg-wrench, .mc.is-happy .lg-thumb, .mc.is-shock .mc-body, .brand__badge .mc { animation: none !important; }
}