/* Botão flutuante de WhatsApp. O porquê está em nuvia-whatsapp.js.
 *
 * Cores próprias, não as variáveis da marca: o verde é o que faz o botão ser
 * reconhecido como WhatsApp sem precisar de logo — e usar o logo de verdade
 * exigiria respeitar as regras de marca da Meta. O dourado da Nuvia aqui
 * deixaria o botão elegante e invisível, que é o oposto do que ele precisa. */

.zap-flutuante {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 12px 18px;
  border-radius: 999px;

  background: #1faa5a;
  color: #ffffff;
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  transition: transform 0.2s, opacity 0.2s, visibility 0.2s;
}

.zap-flutuante:hover,
.zap-flutuante:focus-visible {
  transform: translateY(-2px);
  color: #ffffff;
}

/* O logo oficial do WhatsApp, em SVG. Dimensionado aqui e não no atributo,
   para o celular poder aumentá-lo sem tocar na marcação. */
.zap-icone {
  display: block;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.zap-icone svg {
  display: block;
  width: 100%;
  height: 100%;
  fill: currentColor;
}

/* Sai da frente do botão de enviar. `visibility` junto com `opacity` para o
   link não continuar clicável enquanto está invisível. */
.zap-escondido {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* No celular o espaço é curto e o texto é o primeiro a sobrar: fica o círculo
   com o ícone, que já é reconhecível. */
@media (max-width: 480px) {
  .zap-flutuante {
    padding: 14px;
    gap: 0;
  }

  .zap-texto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

    .zap-icone {
    width: 26px;
    height: 26px;
  }
}

/* Quem pediu menos animação não recebe o salto no hover. */
@media (prefers-reduced-motion: reduce) {
  .zap-flutuante {
    transition: opacity 0.2s, visibility 0.2s;
  }

  .zap-flutuante:hover,
  .zap-flutuante:focus-visible {
    transform: none;
  }
}