/* =========================================================
   Tool 2 — Microinterações CTA
   Não altera o tamanho nem a estrutura dos CTAs.
   ========================================================= */

.destination,
.destination .arrow,
.socials a{
  -webkit-tap-highlight-color:transparent;
}

.destination{
  transition:transform .28s ease, border-color .28s ease, box-shadow .28s ease;
}

.destination .arrow{
  transition:transform .28s ease, background .28s ease, border-color .28s ease;
}

/* Desktop: feedback subtil no hover */
@media (hover:hover) and (pointer:fine){
  .destination:hover{
    transform:translateY(-2px);
    border-color:rgba(232,185,77,.42);
    box-shadow:0 12px 28px rgba(0,0,0,.16);
  }

  .destination:hover .arrow{
    transform:translateX(4px);
    border-color:#e8b94d;
  }
}

/* Pequeno "convite" periódico para a seta */
.destination .arrow{
  animation:cta-arrow-hint 5.5s ease-in-out infinite;
  animation-delay:2.2s;
}

@keyframes cta-arrow-hint{
  0%,72%,100%{transform:translateX(0)}
  76%{transform:translateX(4px)}
  80%{transform:translateX(0)}
  84%{transform:translateX(3px)}
  88%{transform:translateX(0)}
}

/* Ao tocar/clicar: feedback imediato */
.destination:active{
  transform:scale(.992);
}

.destination:active .arrow{
  transform:translateX(5px);
  border-color:#e8b94d;
}

/* Mobile: sem hover; mantém apenas a microinteração de toque */
@media (max-width:760px){
  .destination{
    transition:transform .18s ease, border-color .18s ease;
  }

  .destination .arrow{
    animation-duration:6.5s;
  }
}

/* Respeita acessibilidade */
@media (prefers-reduced-motion:reduce){
  .destination,
  .destination .arrow{
    animation:none !important;
    transition:none !important;
  }
}