/* ============================================================
   cta.css — Seção 9: CTA final (faixa teal cheia) + botão flutuante
   ============================================================ */

/* ---------- CTA final: faixa teal cheia (eco da placa) ---------- */
.final-cta {
  position: relative;
  background: linear-gradient(135deg, var(--teal-base), var(--teal-deep));
  color: var(--white);
  overflow: hidden;
}

/* Textura sutil de fundo */
.final-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(40% 60% at 90% 20%, rgba(255, 255, 255, 0.10), transparent 70%),
    radial-gradient(40% 60% at 5% 90%, rgba(241, 90, 41, 0.14), transparent 70%);
  pointer-events: none;
}

.final-cta__inner {
  position: relative;
  max-width: 720px;
  margin-inline: auto;
  text-align: center;
}

.final-cta .eyebrow {
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: var(--space-2);
}

.final-cta h2 {
  color: var(--white);
  margin-bottom: var(--space-3);
}

.final-cta p {
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: var(--space-6);
  font-size: clamp(16px, 2vw, 19px);
}

.final-cta .btn--primary {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
}

.final-cta__note {
  margin-top: var(--space-3);
  font-size: 14px;
  color: rgba(255, 255, 255, 0.75);
}

/* =========================================================
   BOTÃO FLUTUANTE DE WHATSAPP (fixo, com pulso suave)
   ========================================================= */
.float-whatsapp {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: var(--z-float);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  background: var(--action-base);
  color: var(--white);
  font-weight: 600;
  font-size: 15px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-cta);
  transition: transform var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.float-whatsapp svg {
  width: 24px;
  height: 24px;
}

.float-whatsapp:hover {
  background: var(--action-deep);
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--shadow-cta-hover);
}

/* Halo de pulso (para no hover) */
.float-whatsapp::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--action-base);
  z-index: -1;
  animation: pulse-halo 3s var(--ease-out) infinite;
}

.float-whatsapp:hover::before {
  animation-play-state: paused;
}

/* Esconde o texto no mobile, mantém só o ícone circular */
@media (max-width: 560px) {
  .float-whatsapp {
    padding: 16px;
    border-radius: var(--radius-pill);
  }
  .float-whatsapp .float-whatsapp__label {
    display: none;
  }
}

/* =========================================================
   BOTÃO "VOLTAR AO TOPO"
   ========================================================= */
.back-to-top {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: calc(clamp(16px, 3vw, 28px) + 72px);
  z-index: var(--z-backtop);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-pill);
  background: var(--white);
  color: var(--teal-deep);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease-out),
    visibility var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    background-color var(--dur-base) var(--ease-out);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  background: var(--teal-tint);
  transform: translateY(-2px);
}

.back-to-top svg {
  width: 22px;
  height: 22px;
}