/* ============================================================
   TURBO SEGUIDORES - estilo do site

   As cores estao todas no bloco :root la embaixo. Para mudar
   a identidade visual inteira, mexa so nelas.
   ============================================================ */

:root {
  /* cor principal, o laranja da marca */
  --laranja:        #F26B3A;
  --laranja-claro:  #FB8A5C;
  --laranja-escuro: #DD4E1C;

  --verde:        #16A34A;
  --verde-escuro: #15803D;
  --vermelho:     #DC2626;
  --azul:         #2563EB;

  --texto:        #1F2937;
  --texto-suave:  #6B7280;
  --texto-fraco:  #9CA3AF;

  --fundo:        #FFF8F5;
  --branco:       #FFFFFF;
  --borda:        #EFE3DC;
  --borda-forte:  #E5D5CC;

  --raio:      16px;
  --raio-p:    10px;
  --sombra:    0 1px 2px rgba(31, 41, 55, .04), 0 4px 12px rgba(242, 107, 58, .05);
  --sombra-alta: 0 8px 30px rgba(242, 107, 58, .16);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

/* O atributo hidden do HTML precisa vencer qualquer "display"
   que a gente defina depois. Sem esta linha, um elemento com
   display:grid (o modal, por exemplo) ficaria visivel mesmo
   estando marcado como hidden. */
[hidden] { display: none !important; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--texto);
  background: linear-gradient(180deg, #FFFFFF 0%, var(--fundo) 40%, #FDEEE6 100%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* A nota do TikTok é uma forma cheia, e não um contorno: sem
   isto ela sai como um rabisco vazado em cima do fundo preto. */
svg.icone-tiktok { fill: currentColor; stroke: none; }

svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  flex: none;
}

/* ============================================================
   Barra de promoção
   ============================================================ */
.promo {
  display: flex; align-items: center; justify-content: center;
  gap: 10px; flex-wrap: wrap;
  padding: 13px 16px;
  background: linear-gradient(90deg, var(--laranja-escuro), var(--laranja), var(--laranja-claro));
  color: #fff;
  font-size: 14px; font-weight: 600;
  text-align: center;
}
.promo-fogo { font-size: 15px; }
.promo-relogio {
  background: rgba(255, 255, 255, .22);
  padding: 3px 12px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .5px;
  font-weight: 700;
}

/* ============================================================
   Estrutura da página
   ============================================================ */
.pagina {
  max-width: 660px;
  margin: 0 auto;
  padding: 20px 16px 80px;
}

.topo {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  margin-bottom: 26px;
}

.link-voltar {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer;
  color: var(--texto); font-size: 14.5px; font-weight: 500;
  font-family: inherit;
  padding: 6px 2px;
  border-radius: var(--raio-p);
  transition: color .15s;
}
.link-voltar:hover { color: var(--laranja); }

.marca {
  display: inline-flex; align-items: center; gap: 9px;
  color: var(--laranja);
  font-weight: 700; font-size: 15.5px;
}
.marca-icone {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 9px;
  font-size: 15px;
}

/* ============================================================
   Bolinhas de progresso
   ============================================================ */
.passos {
  display: flex; align-items: center; justify-content: center;
  gap: 0;
  margin-bottom: 30px;
}
.passo-bola {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-size: 14px; font-weight: 700;
  background: #E9DED8; color: #fff;
  transition: background .25s;
}
.passo-bola.ativo,
.passo-bola.feito {
  background: linear-gradient(135deg, var(--laranja), var(--laranja-claro));
  box-shadow: 0 3px 10px rgba(242, 107, 58, .35);
}
.passo-traco {
  width: 34px; height: 3px;
  background: #E9DED8;
  transition: background .25s;
}
.passo-traco.feito { background: var(--laranja); }

/* ============================================================
   Títulos
   ============================================================ */
.titulo {
  font-size: 31px; font-weight: 800;
  text-align: center; line-height: 1.2;
  letter-spacing: -.5px;
}
.titulo em {
  font-style: normal;
  background: linear-gradient(90deg, var(--laranja), var(--laranja-claro));
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.subtitulo {
  text-align: center;
  color: var(--texto-suave);
  font-size: 15px;
  margin-top: 8px;
}

/* ============================================================
   Bloco de dúvidas frequentes (sanfona)
   ============================================================ */
.duvidas {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  margin: 24px 0 18px;
  overflow: hidden;
  box-shadow: var(--sombra);
}
.duvidas-topo {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 16px 18px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 500;
  color: var(--texto); text-align: left;
}
.duvidas-topo .seta { margin-left: auto; transition: transform .2s; }
.duvidas.aberta .duvidas-topo .seta { transform: rotate(180deg); }
.duvidas-corpo { display: none; padding: 0 18px 6px; }
.duvidas.aberta .duvidas-corpo { display: block; }
.duvida {
  padding: 14px 0;
  border-top: 1px solid var(--borda);
}
.duvida strong { display: block; font-size: 14px; margin-bottom: 5px; }
.duvida p { font-size: 13.5px; color: var(--texto-suave); line-height: 1.55; }

/* ============================================================
   Cards de categoria (passo 1)
   ============================================================ */
.lista { display: flex; flex-direction: column; gap: 12px; }

.cartao-categoria {
  display: flex; align-items: center; gap: 15px;
  width: 100%;
  padding: 17px 18px;
  background: var(--branco);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio);
  cursor: pointer; text-align: left;
  font-family: inherit;
  box-shadow: var(--sombra);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.cartao-categoria:hover {
  border-color: var(--laranja-claro);
  transform: translateY(-2px);
  box-shadow: var(--sombra-alta);
}
.cartao-categoria.escolhido {
  border-color: var(--laranja);
  background: #FFF6F2;
}

.cat-icone {
  width: 46px; height: 46px; flex: none;
  display: grid; place-items: center;
  background: #F6F1EE;
  border-radius: 12px;
  color: var(--texto);
}
.cat-icone svg { width: 21px; height: 21px; }

.cat-texto { flex: 1; min-width: 0; }
.cat-nome { font-size: 16px; font-weight: 700; }
.cat-preco { font-size: 12.5px; color: var(--texto-suave); margin-top: 2px; }
.cat-preco b { color: var(--laranja); font-weight: 700; }

.selo-rede {
  width: 27px; height: 27px; flex: none;
  display: grid; place-items: center;
  border-radius: 8px;
  background: linear-gradient(45deg, #F9CE34, #EE2A7B, #6228D7);
  color: #fff;
}
.selo-rede svg { width: 15px; height: 15px; }
.cat-seta { color: var(--texto-fraco); }

/* O selo do card usa o degradê do Instagram por padrão. Cada
   rede que entrar troca só o fundo — o desenho vem do ícone. */
.cartao-categoria .selo-rede.tiktok {
  background: #000;
  box-shadow: 1px 0 0 #25F4EE inset, -1px 0 0 #FE2C55 inset;
}

/* ---------------- abas de plataforma (passo 1) ---------------- */
.abas-rede {
  display: flex; gap: 8px; margin-bottom: 14px;
  overflow-x: auto; padding-bottom: 2px;
}
.aba-rede {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; white-space: nowrap;
  font-family: inherit; font-size: 13.5px; font-weight: 700;
  color: var(--texto-suave); cursor: pointer;
  background: var(--branco); border: 1.5px solid var(--borda);
  border-radius: 999px;
  transition: border-color .15s, color .15s, background .15s;
}
.aba-rede svg { width: 16px; height: 16px; }
.aba-rede:hover { border-color: var(--borda-forte); color: var(--texto); }
.aba-rede.ativa {
  background: var(--laranja); border-color: var(--laranja); color: #fff;
}
/* O atalho da assinatura: pílula com borda pontilhada e brilho
   leve — se parece com as abas, mas se lê como "outra coisa". */
.aba-assinatura {
  text-decoration: none; margin-left: auto;
  border-style: dashed; border-color: var(--laranja); color: var(--laranja);
  background: linear-gradient(90deg, #FFF7F2, var(--branco));
}
.aba-assinatura:hover { background: #FFF1EA; color: var(--laranja); border-color: var(--laranja); }
.aba-assinatura .raio { display: inline-block; animation: raio-pisca 2.4s infinite; }
@keyframes raio-pisca { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.25); } }

/* O cartão da assinatura no fim da lista de categorias. */
.convite-assinatura {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px; padding: 16px 18px;
  background: linear-gradient(135deg, #FFF7F2 0%, var(--branco) 60%);
  border: 1.5px dashed var(--laranja);
  border-radius: var(--raio);
  text-decoration: none; color: var(--texto);
  transition: transform .18s, box-shadow .18s;
}
.convite-assinatura:hover { transform: translateY(-2px); box-shadow: var(--sombra); }
.convite-assinatura-icone {
  flex: none; width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; font-size: 22px;
  background: var(--laranja); color: #fff;
}
.convite-assinatura-texto { display: grid; gap: 3px; min-width: 0; flex: 1; }
.convite-assinatura-texto b { font-size: 14.5px; }
.convite-assinatura-texto span { font-size: 12.5px; color: var(--texto-suave); line-height: 1.45; }

/* ============================================================
   Cards de tipo (passo 2)
   ============================================================ */
.grade-tipos {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (max-width: 560px) {
  .grade-tipos { grid-template-columns: 1fr; }
}

.cartao-tipo {
  position: relative;
  display: flex; align-items: flex-start; gap: 14px;
  padding: 20px 18px;
  background: var(--branco);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio);
  cursor: pointer; text-align: left;
  font-family: inherit;
  box-shadow: var(--sombra);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.cartao-tipo:hover {
  border-color: var(--laranja-claro);
  transform: translateY(-2px);
  box-shadow: var(--sombra-alta);
}
.cartao-tipo.escolhido {
  border-color: var(--laranja);
  background: #FFF6F2;
}

.tipo-emoji {
  font-size: 27px; line-height: 1; flex: none;
  font-weight: 800; color: var(--texto);
  margin-top: 2px;
}
.tipo-nome { font-size: 15.5px; font-weight: 700; margin-bottom: 6px; }
.tipo-desc { font-size: 12.8px; color: var(--texto-suave); line-height: 1.5; }
.tipo-preco { font-size: 12.5px; color: var(--laranja); font-weight: 700; margin-top: 9px; }

.selo-canto {
  position: absolute; top: -9px; right: 14px;
  background: linear-gradient(90deg, var(--laranja-escuro), var(--laranja));
  color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .6px;
  padding: 3px 10px; border-radius: 999px;
}

/* ============================================================
   Cards de pacote (passo 3)
   ============================================================ */
.grade-pacotes {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 13px;
}
@media (max-width: 440px) {
  .grade-pacotes { grid-template-columns: 1fr; }
}

.cartao-pacote {
  position: relative;
  padding: 18px 14px;
  background: var(--branco);
  border: 1.5px solid var(--borda);
  border-radius: var(--raio);
  cursor: pointer; text-align: center;
  font-family: inherit;
  box-shadow: var(--sombra);
  transition: border-color .18s, transform .18s, box-shadow .18s;
}
.cartao-pacote:hover {
  border-color: var(--laranja-claro);
  transform: translateY(-2px);
  box-shadow: var(--sombra-alta);
}
.cartao-pacote.escolhido {
  border-color: var(--laranja);
  background: #FFF6F2;
  box-shadow: var(--sombra-alta);
}

.pac-qtd    { font-size: 22px; font-weight: 800; letter-spacing: -.5px; }
.pac-rotulo { font-size: 12px; color: var(--texto-suave); margin-top: 1px; }
.pac-preco  { font-size: 17px; font-weight: 800; color: var(--laranja); margin-top: 11px; }
.pac-de     { font-size: 12px; color: var(--texto-fraco); text-decoration: line-through; }
.pac-unit   { font-size: 10.5px; color: var(--texto-fraco); margin-top: 2px; }
.pac-teste  { font-size: 10px; color: var(--verde); font-weight: 700; margin-top: 4px; }

.selo-pacote {
  position: absolute; top: -9px; left: 50%;
  transform: translateX(-50%);
  color: #fff; white-space: nowrap;
  font-size: 9.5px; font-weight: 800; letter-spacing: .5px;
  padding: 3px 10px; border-radius: 999px;
}
.selo-pacote.laranja { background: linear-gradient(90deg, var(--laranja-escuro), var(--laranja)); }
.selo-pacote.verde   { background: linear-gradient(90deg, var(--verde-escuro), var(--verde)); }
.selo-pacote.azul    { background: linear-gradient(90deg, #1D4ED8, var(--azul)); }

/* ---- Monte seu pacote ---- */
.montar {
  margin-top: 18px;
  padding: 18px;
  background: #FFF9F6;
  border: 1.5px dashed var(--laranja-claro);
  border-radius: var(--raio);
}
.montar-topo { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; }
.montar-icone {
  width: 38px; height: 38px; flex: none;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--laranja), var(--laranja-claro));
  color: #fff; border-radius: 10px;
}
.montar-titulo { font-size: 14.5px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.montar-titulo span {
  background: var(--laranja); color: #fff;
  font-size: 9px; font-weight: 800; letter-spacing: .5px;
  padding: 2px 7px; border-radius: 999px;
}
.montar-sub { font-size: 12.5px; color: var(--texto-suave); margin-top: 2px; }

.montar-linha { display: flex; gap: 12px; align-items: flex-end; }
@media (max-width: 440px) { .montar-linha { flex-direction: column; align-items: stretch; } }
.montar-campo { flex: 1; }
.montar-total {
  flex: 1;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio-p);
  padding: 9px 14px;
  text-align: right;
}
.montar-total small { display: block; font-size: 9.5px; color: var(--texto-fraco); letter-spacing: .6px; font-weight: 700; }
.montar-total b { font-size: 18px; color: var(--laranja); }
.montar-aviso { font-size: 11.5px; color: var(--texto-suave); margin-top: 9px; display: flex; align-items: center; gap: 6px; }
.montar-aviso svg { width: 13px; height: 13px; }

/* preço por faixa de quantidade */
.montar-faixa {
  font-size: 11.5px; line-height: 1.6;
  color: var(--texto-suave);
  margin-top: 5px;
}
.montar-faixa:empty { display: none; }

/* ============================================================
   Formulários
   ============================================================ */
.rotulo {
  display: block;
  font-size: 12px; font-weight: 600;
  color: var(--texto-suave);
  margin-bottom: 6px;
}
.campo {
  width: 100%;
  padding: 12px 14px;
  font-family: inherit; font-size: 15px;
  color: var(--texto);
  background: var(--branco);
  border: 1.5px solid var(--borda-forte);
  border-radius: var(--raio-p);
  transition: border-color .15s, box-shadow .15s;
}
.campo:focus {
  outline: none;
  border-color: var(--laranja);
  box-shadow: 0 0 0 3px rgba(242, 107, 58, .12);
}
.campo.erro   { border-color: var(--vermelho); }
.campo.certo  { border-color: var(--verde); }
.campo::placeholder { color: var(--texto-fraco); }

/* ============================================================
   Botões
   ============================================================ */
.acoes {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  margin-top: 30px;
}

.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 30px;
  font-family: inherit; font-size: 15px; font-weight: 700;
  color: #fff; cursor: pointer;
  background: linear-gradient(90deg, var(--laranja), var(--laranja-claro));
  border: 0; border-radius: 999px;
  box-shadow: 0 4px 14px rgba(242, 107, 58, .3);
  transition: transform .15s, box-shadow .15s, opacity .15s;
}
.botao:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(242, 107, 58, .4); }
.botao:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

.botao-verde {
  width: 100%;
  background: linear-gradient(90deg, var(--verde-escuro), var(--verde));
  box-shadow: 0 4px 14px rgba(22, 163, 74, .3);
  padding: 16px 24px; font-size: 16px;
}
.botao-verde:hover:not(:disabled) { box-shadow: 0 6px 22px rgba(22, 163, 74, .42); }

.botao-vazio {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 14.5px; font-weight: 500;
  color: var(--texto);
  border-radius: 999px;
  transition: color .15s;
}
.botao-vazio:hover { color: var(--laranja); }

/* ============================================================
   Carregando
   ============================================================ */
.carregando { text-align: center; padding: 60px 20px; color: var(--texto-suave); }
.girando {
  width: 34px; height: 34px; margin: 0 auto 14px;
  border: 3px solid var(--borda);
  border-top-color: var(--laranja);
  border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ============================================================
   Modal
   ============================================================ */
.cortina {
  position: fixed; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(31, 41, 55, .55);
  backdrop-filter: blur(3px);
  animation: aparecer .18s ease;
}
@keyframes aparecer { from { opacity: 0; } }

.modal {
  position: relative;
  width: 100%; max-width: 380px;
  max-height: 90vh; overflow-y: auto;
  padding: 30px 26px 24px;
  background: linear-gradient(180deg, #FFFFFF, #FFF7F3);
  border-radius: 22px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .3);
  text-align: center;
  animation: subir .22s cubic-bezier(.2, .8, .3, 1);
}
@keyframes subir { from { transform: translateY(18px) scale(.97); opacity: 0; } }

.modal-fechar {
  position: absolute; top: 14px; right: 14px;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: var(--texto-fraco); border-radius: 50%;
}
.modal-fechar:hover { background: #F3F4F6; color: var(--texto); }

.modal-icone {
  width: 50px; height: 50px; margin: 0 auto 15px;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--laranja), var(--laranja-claro));
  color: #fff; border-radius: 14px;
  box-shadow: 0 6px 18px rgba(242, 107, 58, .35);
}
.modal-titulo { font-size: 19px; font-weight: 800; }
.modal-sub { font-size: 13.5px; color: var(--texto-suave); margin-top: 7px; line-height: 1.5; }

.modal-oferta {
  margin: 20px 0 16px;
  padding: 18px;
  background: #FFF1EA;
  border: 1.5px solid #FBD5C4;
  border-radius: 16px;
}
.modal-oferta-rotulo {
  font-size: 9.5px; font-weight: 800; letter-spacing: 1px;
  color: var(--laranja); margin-bottom: 4px;
}
.modal-oferta-qtd { font-size: 34px; font-weight: 800; color: var(--laranja); line-height: 1.05; }
.modal-oferta-un  { font-size: 13px; color: var(--texto-suave); margin-top: 1px; }
.modal-precos {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 11px; flex-wrap: wrap;
}
.modal-precos s { color: var(--texto-fraco); font-size: 13.5px; }
.modal-precos b { color: var(--laranja); font-size: 21px; font-weight: 800; }
.modal-precos span {
  background: var(--laranja); color: #fff;
  font-size: 10px; font-weight: 800;
  padding: 2px 8px; border-radius: 999px;
}

.modal-resumo {
  display: flex; justify-content: space-between;
  font-size: 13px; padding: 5px 0;
  color: var(--texto-suave);
}
.modal-resumo b { color: var(--texto); }
.modal-resumo.total b { color: var(--laranja); font-size: 15px; }

.modal-recusar {
  display: block; width: 100%;
  margin-top: 12px;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; font-size: 13.5px;
  color: var(--texto-suave);
  padding: 6px;
}
.modal-recusar:hover { color: var(--texto); text-decoration: underline; }

/* ============================================================
   Aviso flutuante
   ============================================================ */
.aviso {
  position: fixed; left: 50%; bottom: 26px;
  transform: translateX(-50%);
  z-index: 90;
  max-width: 90vw;
  padding: 13px 22px;
  background: var(--texto); color: #fff;
  font-size: 14px; font-weight: 500;
  border-radius: 999px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
  animation: subir .2s ease;
}
.aviso.erro    { background: var(--vermelho); }
.aviso.sucesso { background: var(--verde-escuro); }

/* ============================================================
   Botão do WhatsApp (montado por js/suporte.js)

   Fica no canto de baixo à direita de TODAS as páginas. O verde
   é o do próprio WhatsApp de propósito: a pessoa reconhece o
   botão antes mesmo de ler.
   ============================================================ */
.zap {
  position: fixed; right: 16px; bottom: 20px;
  z-index: 55;
  /* Coluna: o painel de ajuda abre ACIMA, e o balãozinho fica
     ao lado do botão, na linha de baixo. */
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
}

.zap-linha { display: flex; align-items: center; gap: 9px; }

.zap-botao {
  width: 56px; height: 56px; flex: none;
  display: grid; place-items: center;
  color: #fff;
  background: #25D366;
  /* virou <button> para abrir o painel: sem isto vem a
     borda e o cursor padrao do navegador. */
  border: 0; cursor: pointer;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(37, 211, 102, .45);
  transition: transform .15s ease, box-shadow .15s ease;
}
.zap-botao svg { width: 30px; height: 30px; }
.zap-botao:hover {
  transform: scale(1.06);
  box-shadow: 0 8px 26px rgba(37, 211, 102, .55);
}
.zap-botao:active { transform: scale(.96); }

/* pulsinho no começo, só para o olho achar o botão */
@keyframes zap-pulso {
  0%, 100% { box-shadow: 0 6px 20px rgba(37, 211, 102, .45); }
  50%      { box-shadow: 0 6px 20px rgba(37, 211, 102, .45), 0 0 0 12px rgba(37, 211, 102, .16); }
}
.zap-botao { animation: zap-pulso 2.4s ease-out 3; }

/* ---- o balãozinho ao lado ---- */
.zap-balao {
  display: flex; align-items: center; gap: 6px;
  max-width: min(230px, calc(100vw - 100px));
  padding: 10px 8px 10px 14px;
  background: #fff;
  border: 1px solid var(--borda);
  border-radius: 14px;
  box-shadow: 0 8px 26px rgba(31, 41, 55, .16);
  animation: zap-entrar .25s cubic-bezier(.2, .8, .3, 1);
}
@keyframes zap-entrar {
  from { transform: translateX(14px); opacity: 0; }
}
.zap-balao-texto {
  font-size: 13px; font-weight: 600; line-height: 1.35;
  color: var(--texto); text-decoration: none;
  /* tambem virou <button>: agora ele ABRE O PAINEL em vez
     de pular direto para o WhatsApp. */
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; text-align: left;
}
.zap-balao-fechar {
  flex: none; background: none; border: 0; cursor: pointer;
  color: var(--texto-fraco); font-size: 17px; line-height: 1;
  padding: 2px 5px;
}
.zap-balao-fechar:hover { color: var(--texto); }

/* ---- o painel de ajuda ---- */
.zap-painel {
  width: min(300px, calc(100vw - 32px));
  padding: 14px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: 0 12px 34px rgba(31, 41, 55, .18);
  animation: zap-subir .18s cubic-bezier(.2, .8, .3, 1);
}

@keyframes zap-subir {
  from { transform: translateY(10px); opacity: 0; }
}

.zap-painel-topo {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 12px;
}
.zap-painel-titulo {
  flex: 1;
  font-size: 14px; font-weight: 700; color: var(--texto);
}
.zap-painel-fechar {
  flex: none; width: 26px; height: 26px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: var(--texto-fraco); border-radius: 8px;
}
.zap-painel-fechar svg { width: 15px; height: 15px; }
.zap-painel-fechar:hover { color: var(--texto); background: #F3F4F6; }

/* o recado do admin, no mesmo tom da marca */
.zap-nota {
  margin: 0 0 12px;
  padding: 12px 13px;
  font-size: 13.5px; line-height: 1.45; color: var(--laranja-escuro);
  background: var(--fundo);
  border: 1px solid var(--borda-forte);
  border-radius: var(--raio-p);
}

/* ---- cada opção ---- */
.zap-opcoes { display: flex; flex-direction: column; gap: 8px; }

.zap-opcao {
  display: flex; align-items: center; gap: 11px;
  width: 100%; padding: 9px 12px 9px 9px;
  font-family: inherit; font-size: 14.5px; font-weight: 700;
  color: var(--texto); text-align: left; text-decoration: none;
  background: #F5F5F5;
  border: 0; border-radius: 12px; cursor: pointer;
  transition: background .15s ease, transform .15s ease;
}
.zap-opcao:hover { background: #ECECEC; transform: translateX(2px); }
.zap-opcao:active { transform: scale(.99); }

.zap-opcao-icone {
  flex: none; width: 34px; height: 34px;
  display: grid; place-items: center;
  color: #fff; border-radius: 999px;
}
.zap-opcao-icone svg { width: 18px; height: 18px; }
.zap-opcao-icone.verde  { background: #25D366; }
.zap-opcao-icone.escuro { background: #111827; }

/* ---- os dois desenhos do botão flutuante ----
   Todas as regras de display moram no mesmo nível de
   especificidade (.zap-botao + uma classe). Com o seletor solto
   ".zap-icone-fechar" um ".zap-botao span" qualquer o venceria e
   os dois desenhos apareceriam empilhados. */
.zap-botao span { place-items: center; }
.zap-botao .zap-icone-abrir  { display: grid; }
.zap-botao .zap-icone-fechar { display: none; }
.zap-botao.aberto .zap-icone-abrir  { display: none; }
.zap-botao.aberto .zap-icone-fechar { display: grid; }
.zap-botao.aberto { animation: none; }

/* Sem número de WhatsApp cadastrado o botão deixa de ser verde:
   a cor da marca deles prometeria uma conversa que não existe. */
.zap-botao-neutro {
  background: var(--laranja);
  box-shadow: 0 6px 20px rgba(242, 107, 58, .45);
  animation: none;
}
.zap-botao-neutro:hover { box-shadow: 0 8px 26px rgba(242, 107, 58, .55); }

/* ---- a janela do vídeo ---- */
.zap-video {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: 16px;
  background: rgba(17, 24, 39, .72);
  animation: zap-aparecer .16s ease;
}
@keyframes zap-aparecer { from { opacity: 0; } }

.zap-video-caixa {
  width: min(880px, 100%);
  background: var(--branco);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.zap-video-topo {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--borda);
}
.zap-video-titulo {
  flex: 1;
  font-size: 14.5px; font-weight: 700; color: var(--texto);
}
.zap-video-fechar {
  flex: none; width: 30px; height: 30px;
  display: grid; place-items: center;
  background: none; border: 0; cursor: pointer;
  color: var(--texto-suave); border-radius: 8px;
}
.zap-video-fechar svg { width: 16px; height: 16px; }
.zap-video-fechar:hover { color: var(--texto); background: #F3F4F6; }

/* 16:9 sem truque de padding: o aspect-ratio já é do CSS há
   tempo e não deixa a caixa "pular" enquanto o vídeo carrega. */
.zap-video-quadro {
  aspect-ratio: 16 / 9;
  background: #000;
}
.zap-video-quadro iframe,
.zap-video-quadro video {
  display: block; width: 100%; height: 100%; border: 0;
}

/* fundo não rola enquanto o vídeo está aberto */
body.zap-travado { overflow: hidden; }

/* No celular a home tem a barra laranja de comprar colada no
   rodapé — o botão sobe para não ficar em cima dela. */
@media (max-width: 899px) {
  body.inicio .zap { bottom: 92px; }
}

@media (prefers-reduced-motion: reduce) {
  .zap-botao { animation: none; transition: none; }
  .zap-balao { animation: none; }
  .zap-painel { animation: none; }
  .zap-video  { animation: none; }
  .zap-opcao  { transition: none; }
}