/* O ajudante: mascote fixo no canto inferior esquerdo, com balão de dicas, tour pelo site e menu.
   guia.js controla tudo; sem JS o bloco fica oculto (hidden no HTML). */
.guia {
  position: fixed; left: 12px; bottom: max(12px, env(safe-area-inset-bottom, 0px)); z-index: 45;
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; pointer-events: none;
  transition: transform .45s var(--ease-out), opacity .3s ease;
}
.guia.is-away { transform: translateX(-130%); opacity: 0; }
.guia > * { pointer-events: auto; }

/* o mascote é um botão */
.guia__mc {
  width: 70px; height: 84px; padding: 0; border: 0; background: none; cursor: pointer; display: block;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .35));
  transform: translateX(-140%); animation: guia-in .8s cubic-bezier(.3, 1.4, .5, 1) forwards;
}
.guia__mc .mc { width: 100%; height: 100%; }
.guia__mc:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; border-radius: 12px; }
.guia__mc.is-hop .mc { animation: guia-hop .6s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes guia-in { to { transform: none; } }
@keyframes guia-hop { 40% { transform: translateY(-14%) scale(1.05, .97); } 70% { transform: translateY(0) scale(.97, 1.03); } }

/* balão de dica */
.guia__bubble {
  position: relative; width: min(340px, calc(100vw - 24px)); padding: 14px 40px 14px 16px; border-radius: 12px 12px 12px 3px;
  background: #FFFFFF; color: #0E1F19; box-shadow: 6px 6px 0 var(--amber);
  font-size: 15px; line-height: 1.4; transform-origin: 0 100%;
  animation: guia-pop .35s var(--ease-out);
}
.guia__bubble::after { content: ''; position: absolute; left: 24px; bottom: -11px; border: 6px solid transparent; border-top-color: #FFFFFF; border-left-color: #FFFFFF; }
@keyframes guia-pop { from { opacity: 0; transform: translateY(10px) scale(.94); } }
.guia__txt { margin: 0; font-weight: 600; }
.guia__txt b { color: var(--accent-deep); }
.guia__x {
  position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: #4A6158;
  font-size: 22px; line-height: 1; cursor: pointer;
}
.guia__x:hover { background: #EEF1EC; color: #0E1F19; }
.guia__act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.guia__act:empty { display: none; }
.guia__act .btn { min-height: 40px; padding: 6px 14px; font-size: 14px; border-radius: 7px; }
.guia__act .btn--soft { background: #EEF1EC; color: #0E1F19; }
.guia__act .btn--soft:hover { background: #DEE5DF; color: #0E1F19; }
.guia__step { margin-left: auto; align-self: center; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: #4A6158; }

/* estado escondido: só uma carinha pequena no canto */
.guia__peek {
  width: 44px; height: 44px; padding: 4px; border: 2px solid var(--amber); border-radius: 50%; background: #FFFFFF; cursor: pointer;
  box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .5);
}
.guia__peek svg { width: 100%; height: 100%; }
.guia.is-min .guia__mc, .guia.is-min .guia__bubble { display: none; }

.is-testing .guia, .fx-xray .guia { display: none; }
@media (min-width: 900px) {
  /* no desktop o balão fica ao lado do mascote, rente ao chão, para cobrir menos conteúdo */
  .guia { left: 24px; bottom: 24px; gap: 14px; flex-direction: row; align-items: flex-end; }
  .guia__mc { width: 104px; height: 124px; }
  .guia__bubble { width: min(380px, calc(100vw - 48px)); margin-bottom: 26px; font-size: 16px; border-radius: 12px 12px 12px 3px; transform-origin: 0 100%; }
  .guia__bubble::after { left: -11px; bottom: 6px; border: 6px solid transparent; border-right-color: #FFFFFF; border-bottom-color: #FFFFFF; }
}
@media (max-height: 560px) { .guia__mc { width: 60px; height: 72px; } }
@media (prefers-reduced-motion: reduce) {
  .guia, .guia__mc, .guia__bubble, .guia__mc.is-hop .mc { animation: none !important; transition: none !important; transform: none !important; }
}