/* [E402] O CHAT DA CASA — folha compartilhada.
   Par de assets/chat.js. Carregada por toda pagina que tem o botao flutuante.

   Antes isto vivia inline no index.html: 213 linhas de CSS que teriam de ser
   copiadas para a pagina de SEO e, com as traducoes, existiriam em SEIS
   arquivos. O primeiro ajuste sairia de sincronia — foi o mesmo raciocinio do
   aviso de cookies no E397.

   UMA ADAPTACAO: o easing vinha de --ease-out, que so a home define; a
   pagina de SEO chama a mesma curva de --ease. As duas entram com o valor
   literal por tras, entao a folha funciona em qualquer pagina, inclusive numa
   que nao declare nenhuma das duas. */

/* ══ [E396] O CONVITE DO CHAT ══
   O Vine queria que o card abrisse sozinho depois de um tempo. Abrir o
   painel inteiro sem pedir licença é o gesto de site que persegue o
   visitante — e no celular ele cobre a tela toda. O convite faz o mesmo
   trabalho pela metade do preço: uma frase ao lado do botão, que a pessoa
   lê de canto de olho e ignora se quiser. Quem clica abre o painel.
   Aparece uma vez por visitante (lembrado no navegador), nunca por cima do
   aviso de cookies, e nunca se a pessoa já abriu o chat por conta. */
.zap-convite {
  position: fixed; right: 22px; bottom: 92px; z-index: 20;
  max-width: min(268px, calc(100vw - 96px));
  display: flex; align-items: flex-start; gap: 10px;
  padding: 13px 14px 13px 16px;
  border-radius: 18px 18px 4px 18px;
  background: rgba(255,255,255,.72);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  border: 1px solid rgba(255,255,255,.7);
  box-shadow: 0 1px 2px rgba(10,10,10,.05), 0 18px 44px -14px rgba(10,10,10,.34);
  color: var(--tinta); font-size: 13.5px; line-height: 1.45;
  opacity: 0; transform: translateY(10px) scale(.96); pointer-events: none;
  transform-origin: bottom right;
  transition: opacity .45s ease, transform .55s var(--ease-out, var(--ease, cubic-bezier(.22, 1, .36, 1)));
}
.zap-convite.visivel { opacity: 1; transform: none; pointer-events: auto; }
.zap-convite p { margin: 0; cursor: pointer; }
.zap-convite b { font-weight: 600; }
.zap-convite button {
  flex: none; width: 20px; height: 20px; margin: -3px -4px 0 0;
  display: grid; place-items: center;
  border: 0; border-radius: 50%; background: transparent; cursor: pointer;
  color: rgba(10,10,10,.42); font-size: 15px; line-height: 1;
  transition: color .2s, background .2s;
}
.zap-convite button:hover { color: var(--tinta); background: rgba(10,10,10,.07); }

/* ══ [E363] O CHAT QUALIFICADOR ══
   O widget é NOSSO; o transporte é o WhatsApp. Três perguntas rápidas e
   a conversa abre no WhatsApp com a mensagem já montada — o lead chega
   qualificado e nenhuma caixa de entrada nova precisa ser vigiada.
   A foto é REAL (o Vine atendendo), pequena e em P&B; enquanto o arquivo
   não existe, o monograma assume sem parecer defeito. */
/* [E394] O chat é um POPOVER funcional e, por isso, recebe o vidro. O
   conteúdo interno usa materiais mais estáveis para não sacrificar a
   leitura. A luz especular acompanha o ponteiro sem mover o painel. */
.zap-caixa {
  --vidro-x: 78%; --vidro-y: 0%;
  position: fixed; right: 22px; bottom: 92px; z-index: 21;
  width: min(374px, calc(100vw - 44px));
  isolation: isolate; overflow: hidden;
  background:
    linear-gradient(145deg, rgba(255,255,255,.82), rgba(239,242,246,.67));
  border: 1px solid rgba(255,255,255,.78); border-radius: 28px;
  -webkit-backdrop-filter: blur(34px) saturate(1.45) brightness(1.04);
  backdrop-filter: blur(34px) saturate(1.45) brightness(1.04);
  box-shadow:
    0 2px 3px rgba(255,255,255,.3) inset,
    0 -1px 1px rgba(10,10,10,.08) inset,
    0 12px 28px -14px rgba(10,10,10,.28),
    0 42px 90px -28px rgba(10,10,10,.48);
  opacity: 0; transform: translateY(18px) scale(.955); pointer-events: none;
  transform-origin: bottom right;
  transition: opacity .28s ease, transform .52s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}
.zap-caixa::before {
  content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(220px circle at var(--vidro-x) var(--vidro-y), rgba(255,255,255,.72), transparent 68%),
    linear-gradient(118deg, rgba(255,255,255,.2), transparent 34% 68%, rgba(255,255,255,.1));
  opacity: .72; transition: opacity .35s ease;
}
.zap-caixa::after {
  content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), inset 1px 0 0 rgba(255,255,255,.3);
}
.zap-caixa > * { position: relative; z-index: 1; }
.zap-caixa.aberto {
  opacity: 1; transform: none; pointer-events: auto;
  box-shadow:
    0 2px 3px rgba(255,255,255,.34) inset,
    0 -1px 1px rgba(10,10,10,.08) inset,
    0 16px 34px -16px rgba(10,10,10,.3),
    0 46px 96px -28px rgba(10,10,10,.5);
}
.zap-topo {
  display: flex; align-items: center; gap: 12px;
  padding: 17px 18px 16px;
  background:
    radial-gradient(180px circle at var(--vidro-x) 0%, rgba(255,255,255,.14), transparent 72%),
    linear-gradient(135deg, rgba(9,10,13,.9), rgba(19,21,26,.82));
  color: var(--claro); border-bottom: 1px solid rgba(255,255,255,.1);
}
.zap-foto {
  width: 42px; height: 42px; border-radius: 50%; flex: 0 0 auto;
  object-fit: cover; filter: grayscale(1) contrast(1.04);
  background: #2a2c31; display: grid; place-items: center;
  font-family: var(--mono); font-size: 13px; color: rgba(242,242,242,.9);
  border: 1px solid rgba(255,255,255,.48);
  box-shadow: 0 0 0 4px rgba(255,255,255,.06), 0 7px 18px rgba(0,0,0,.28);
}
.zap-quem { display: grid; gap: 3px; line-height: 1.25; }
.zap-quem b { font-size: 15px; font-weight: 600; letter-spacing: -.012em; }
.zap-quem span {
  font-family: var(--mono); font-size: 9px; letter-spacing: .16em;
  text-transform: uppercase; color: rgba(242,242,242,.56);
}
.zap-corpo { padding: 18px 18px 14px; display: grid; gap: 12px; }
.zap-fala {
  max-width: 91%; padding: 13px 15px; border-radius: 7px 19px 19px 19px;
  background: rgba(255,255,255,.62); color: var(--tinta);
  border: 1px solid rgba(255,255,255,.82);
  box-shadow: 0 7px 18px -14px rgba(10,10,10,.34), inset 0 1px 0 rgba(255,255,255,.8);
  font-size: 14.5px; line-height: 1.42; letter-spacing: -.006em;
}
.zap-ops { display: grid; gap: 8px; }
.zap-op {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  text-align: left; cursor: pointer; font-family: var(--sans);
  font-size: 14.5px; font-weight: 600; color: var(--tinta);
  background: rgba(255,255,255,.52); border: 1px solid rgba(255,255,255,.9);
  border-radius: 18px; padding: 11px 14px 11px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 7px 20px -18px rgba(10,10,10,.4);
  transition: color .25s ease, background .25s ease, border-color .25s ease,
    transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.zap-op::after {
  content: '›'; flex: 0 0 auto; font-size: 20px; line-height: .8; font-weight: 400;
  color: rgba(10,10,10,.3); transition: color .25s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.zap-op:hover {
  background: rgba(12,13,16,.92); color: var(--claro); border-color: rgba(255,255,255,.18);
  transform: translateY(-1px) scale(1.008); box-shadow: 0 10px 24px -14px rgba(10,10,10,.5);
}
.zap-op:hover::after { color: rgba(242,242,242,.72); transform: translateX(2px); }
.zap-op:focus-visible, .zap-fechar:focus-visible, .zap-campo:focus-visible, .zap-enviar:focus-visible {
  outline: 2px solid var(--tinta); outline-offset: 2px;
}
.zap-campo {
  width: 100%; font-family: var(--sans); font-size: 14.5px; color: var(--tinta);
  background: rgba(255,255,255,.64); border: 1px solid rgba(255,255,255,.9); border-radius: 16px;
  padding: 13px 14px; outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.86), 0 7px 20px -18px rgba(10,10,10,.4);
  transition: background .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.zap-campo:focus { background: rgba(255,255,255,.88); border-color: rgba(10,10,10,.24); box-shadow: 0 0 0 4px rgba(10,10,10,.06); }
.zap-enviar {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; cursor: pointer; text-decoration: none;
  font-family: var(--sans); font-size: 15px; font-weight: 600;
  background: rgba(10,10,10,.94); color: var(--claro);
  border: 1px solid rgba(255,255,255,.14); border-radius: 18px; padding: 13px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 24px -16px rgba(10,10,10,.58);
  transition: background .25s ease, transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease;
}
.zap-enviar:hover { background: #202126; transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 16px 28px -16px rgba(10,10,10,.64); }
.zap-pe {
  padding: 0 18px 17px; font-family: var(--mono); font-size: 8.5px;
  letter-spacing: .15em; text-transform: uppercase; color: rgba(10,10,10,.42);
}
.zap-fechar {
  width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center;
  margin-left: auto; cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: 50%;
  color: rgba(242,242,242,.62); font-size: 15px; line-height: 1;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
  transition: color .22s ease, background .22s ease, transform .3s cubic-bezier(.16,1,.3,1);
}
.zap-fechar:hover { color: var(--claro); background: rgba(255,255,255,.14); transform: rotate(8deg) scale(1.04); }
/* O material acompanha o contexto: claro sobre papel, fumê sobre carbono. */
.zap-caixa.sobre-escuro {
  background: linear-gradient(145deg, rgba(36,38,44,.72), rgba(10,11,14,.78));
  border-color: rgba(255,255,255,.2);
  box-shadow:
    0 2px 2px rgba(255,255,255,.12) inset,
    0 -1px 1px rgba(0,0,0,.28) inset,
    0 16px 34px -16px rgba(0,0,0,.54),
    0 46px 96px -26px rgba(0,0,0,.76);
}
.zap-caixa.sobre-escuro::before { opacity: .36; }
.zap-caixa.sobre-escuro::after {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 1px 0 0 rgba(255,255,255,.08);
}
.zap-caixa.sobre-escuro .zap-fala,
.zap-caixa.sobre-escuro .zap-op,
.zap-caixa.sobre-escuro .zap-campo {
  color: var(--claro); background: rgba(255,255,255,.075);
  border-color: rgba(255,255,255,.14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 9px 22px -17px rgba(0,0,0,.8);
}
.zap-caixa.sobre-escuro .zap-op::after { color: rgba(242,242,242,.36); }
.zap-caixa.sobre-escuro .zap-op:hover {
  color: var(--tinta); background: rgba(242,242,242,.94); border-color: rgba(255,255,255,.74);
}
.zap-caixa.sobre-escuro .zap-op:hover::after { color: rgba(10,10,10,.42); }
.zap-caixa.sobre-escuro .zap-campo::placeholder { color: rgba(242,242,242,.48); }
.zap-caixa.sobre-escuro .zap-campo:focus { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.28); box-shadow: 0 0 0 4px rgba(255,255,255,.07); }
.zap-caixa.sobre-escuro .zap-pe { color: rgba(242,242,242,.44); }
.zap-caixa.sobre-escuro .zap-op:focus-visible,
.zap-caixa.sobre-escuro .zap-fechar:focus-visible,
.zap-caixa.sobre-escuro .zap-campo:focus-visible,
.zap-caixa.sobre-escuro .zap-enviar:focus-visible { outline-color: var(--claro); }
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .zap-caixa { background: rgba(246,247,249,.98); }
  .zap-caixa.sobre-escuro { background: rgba(18,19,23,.98); }
}
@media (max-width: 560px) {
  .zap-caixa { right: 10px; left: 10px; width: auto; bottom: 82px; border-radius: 26px; }
  .zap-topo { padding-inline: 16px; }
  .zap-corpo { padding-inline: 16px; }
  .zap-pe { padding-inline: 16px; }
}
@media (prefers-reduced-motion: reduce) { .zap-caixa { transition: opacity .2s ease; transform: none; } }