/* Balao do topo e faixa do rodape da landing (F21). Camadas so por token (Padrao_Elevacao_Zindex): balao --z-toast, faixa --z-sticky.
   Cores e fonte do site (tokens.css); faixa no desenho do pg_IA FACILITA (_footer.html), botao em --accent. */
.le-balao {
  position: fixed;
  top: var(--le-balao-topo, var(--sp-4));
  left: 50%;
  z-index: var(--z-toast);
  width: calc(100% - 28px);
  max-width: 430px;
  padding: 12px 13px 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.78);
  border-radius: 26px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.56));
  -webkit-backdrop-filter: blur(34px) saturate(190%);
  backdrop-filter: blur(34px) saturate(190%);
  box-shadow: 0 20px 55px rgba(20, 16, 14, 0.20), 0 6px 18px rgba(20, 16, 14, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.95);
  font-family: var(--font);
  opacity: 0;
  transform: translate(-50%, -18px) scale(.96);
  filter: blur(5px);
  transition: opacity .45s ease, transform .5s cubic-bezier(.2, .9, .2, 1.25), filter .45s ease;
  pointer-events: none;
}
.le-balao.on { opacity: 1; transform: translate(-50%, 0) scale(1); filter: blur(0); }
/* ou um, ou outro: enquanto o balao esta no topo, o cabecalho do site sobe e some (volta quando o balao sai) */
body.le-com-balao .header { transition: opacity .35s ease, transform .35s ease; }
body.le-balao-no-topo .header { opacity: 0; transform: translateY(-110%); pointer-events: none; }
/* o mesmo desenho serve a previa editavel do painel (.le-balao-estatico): sem posicao fixa nem animacao */
.le-balao.le-balao-estatico { position: static; z-index: auto; left: auto; width: 100%; opacity: 1; transform: none; filter: none; pointer-events: auto; }
.le-balao-conteudo { display: flex; align-items: center; gap: 12px; }
.le-balao-icone {
  display: flex;
  flex: 0 0 43px;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  border-radius: 14px;
  background: linear-gradient(145deg, #8e8e93, #636366 58%, #48484a);
  box-shadow: 0 10px 20px rgba(60, 60, 67, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.45);
  color: #fff;
}
.le-balao-icone i { font-size: 23px; line-height: 1; }
.le-balao-texto { display: flex; flex-direction: column; flex: 1; min-width: 0; padding-right: 4px; }
.le-balao-titulo { font-size: 13.8px; font-weight: 800; line-height: 1.18; letter-spacing: -.22px; color: rgba(18, 16, 15, 0.94); }
.le-balao-msg { margin-top: 2px; font-size: 12.8px; font-weight: 500; line-height: 1.22; color: rgba(18, 16, 15, 0.82); }
.le-balao-rodape { margin-top: 2px; font-size: 11.6px; font-weight: 500; line-height: 1.22; color: rgba(60, 60, 67, 0.60); }
.le-balao-trilho { height: 3px; margin-top: 10px; overflow: hidden; border-radius: 999px; background: rgba(60, 60, 67, 0.12); }
.le-balao-barra { width: 0; height: 100%; border-radius: 999px; background: rgba(60, 60, 67, 0.42); }
.le-balao.on .le-balao-barra { animation: le-barra var(--le-balao-tempo, 20s) linear forwards; }
@keyframes le-barra { from { width: 0; } to { width: 100%; } }

.le-faixa {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  box-shadow: 0 -12px 34px rgba(0, 0, 0, 0.14), 0 -2px 10px rgba(0, 0, 0, 0.06);
  opacity: 0;
  transform: translateY(110%);
  transition: transform .45s cubic-bezier(.4, 0, .2, 1), opacity .45s ease;
}
.le-faixa.on { opacity: 1; transform: translateY(0); }
.le-faixa-in {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-2);
  max-width: 760px;
  margin: 0 auto;
  padding: 14px 20px 15px;
}
.le-faixa-linha { display: flex; align-items: center; justify-content: center; gap: 18px; width: 100%; }
.le-faixa-precos { display: flex; flex-direction: column; align-items: flex-end; min-width: 0; line-height: 1.15; text-align: right; }
.le-faixa-preco { font-size: 17px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; color: var(--text); }
.le-faixa-parcelas { margin-top: 2px; font-size: 13px; font-weight: 500; white-space: nowrap; color: var(--text-dim); }
.le-faixa-divisoria { flex: 0 0 auto; width: 1px; height: 46px; background: var(--border); }
.le-faixa-botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 13px 24px;
  border-radius: var(--radius-pill);
  background: var(--accent);
  color: var(--text-invert);
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  white-space: nowrap;
  text-decoration: none;
  box-shadow: 0 8px 20px var(--accent-glow), 0 4px 10px rgba(255, 117, 0, 0.22);
  transition: background .2s, transform .15s, box-shadow .2s;
}
.le-faixa-botao:hover, .le-faixa-botao:focus-visible { background: var(--accent-hover); color: var(--text-invert); transform: scale(1.035); }
.le-faixa-contagem {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 14px;
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .04em;
  color: var(--text-dim);
}
.le-faixa-ponto { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: le-pulso 1.8s ease-in-out infinite; }
.le-faixa-ponto[hidden] { display: none; }
@keyframes le-pulso { 0%, 100% { opacity: .35; transform: scale(.9); } 50% { opacity: 1; transform: scale(1.15); } }

/* a faixa nao cobre o fim da pagina nem o WhatsApp flutuante */
body.le-com-faixa { padding-bottom: var(--le-faixa-h, 72px); }
body.le-com-faixa .wa-float { bottom: calc(var(--le-faixa-h, 72px) + var(--sp-4)); }

@media (max-width: 480px) {
  .le-balao { width: calc(100% - 20px); padding: 11px 12px 9px; border-radius: 24px; }
  .le-balao-conteudo { gap: 10px; }
  .le-balao-icone { flex-basis: 40px; width: 40px; height: 40px; border-radius: 13px; }
  .le-balao-titulo { font-size: 13.2px; }
  .le-balao-msg { font-size: 12.4px; }
  .le-balao-rodape { font-size: 11.2px; }
  .le-faixa-in { padding: 13px 14px 15px; }
  .le-faixa-linha { gap: 12px; }
  .le-faixa-preco { font-size: 15px; }
  .le-faixa-parcelas { font-size: 12px; }
  .le-faixa-divisoria { height: 42px; }
  .le-faixa-botao { padding: 12px 16px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .le-balao, .le-faixa, .le-faixa-botao, body.le-com-balao .header { transition: none; }
  .le-balao.on .le-balao-barra { animation: none; width: 100%; }
  .le-faixa-ponto { animation: none; opacity: 1; }
}