/* =================================================================
   IATE CLUBE DE ITACURUÇÁ — Botões sociais premium (site todo)
   Eleva, de forma CENTRALIZADA, todos os botões de WhatsApp e
   Instagram. Só aparência/interação — destinos (números, mensagens,
   perfis) permanecem intactos. Carrega DEPOIS de styles.css e
   parceiros.css para refinar os componentes .actbtn / .ig-card / .ig-chip.
   Depende das variáveis de css/styles.css.
   ================================================================= */

/* -----------------------------------------------------------------
   1) WHATSAPP — corpo na paleta do site (coral), identidade verde
      concentrada no ícone: halo suave + leve respiração (sinaliza
      canal de contato ativo). Foco visível, alvo de toque confortável.
   ----------------------------------------------------------------- */
.actbtn--whatsapp .actbtn__ic{position:relative;background:#fff;box-shadow:0 6px 16px rgba(7,94,84,.28)}
.actbtn--whatsapp .actbtn__ic img{transition:transform .4s var(--ease)}

/* anel verde do WhatsApp ao redor do ícone */
.actbtn--whatsapp .actbtn__ic::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 0 rgba(37,211,102,.0);
  animation:wa-breathe 2.8s var(--ease) infinite;
  transition:box-shadow .45s var(--ease);
}
@keyframes wa-breathe{
  0%{box-shadow:0 0 0 0 rgba(37,211,102,.42)}
  70%{box-shadow:0 0 0 9px rgba(37,211,102,0)}
  100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}
}
/* no hover/foco, o anel vira realce fixo e mais forte */
.actbtn--whatsapp:hover .actbtn__ic::after,
.actbtn--whatsapp:focus-visible .actbtn__ic::after{animation:none;box-shadow:0 0 0 5px rgba(37,211,102,.34)}
.actbtn--whatsapp:hover .actbtn__ic img{transform:scale(1.06)}
/* elevação com sombra dupla: coral (corpo) + verde (assinatura) */
.actbtn--whatsapp:hover{box-shadow:0 26px 52px rgba(184,88,75,.42),0 12px 26px rgba(7,94,84,.24)}

/* -----------------------------------------------------------------
   2) INSTAGRAM (botão de ação) — corpo coral, halo no gradiente do
      Instagram concentrado no ícone; realce elegante no hover/foco.
   ----------------------------------------------------------------- */
.actbtn--instagram .actbtn__ic{position:relative;background:#fff}
.actbtn--instagram .actbtn__ic img{transition:transform .4s var(--ease)}
.actbtn--instagram .actbtn__ic::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 0 rgba(214,41,118,0);transition:box-shadow .45s var(--ease);
}
.actbtn--instagram:hover .actbtn__ic::after,
.actbtn--instagram:focus-visible .actbtn__ic::after{box-shadow:0 0 0 5px rgba(214,41,118,.32)}
.actbtn--instagram:hover .actbtn__ic img{transform:scale(1.06)}
.actbtn--instagram:hover{box-shadow:0 26px 52px rgba(184,88,75,.42),0 12px 26px rgba(150,47,191,.26)}

/* -----------------------------------------------------------------
   3) CARDS DE INSTAGRAM (.ig-card) — refino do overlay e do selo:
      leve zoom da imagem + escurecimento suave + realce do ícone.
      Sinaliza com clareza que é clicável.
   ----------------------------------------------------------------- */
.ig-card:hover,.ig-card:focus-visible{transform:translateY(-6px);box-shadow:0 40px 72px rgba(8,24,38,.28)}
.ig-card__media{overflow:hidden}
.ig-card__media img{transition:transform .6s var(--ease)}
.ig-card:hover .ig-card__media img,
.ig-card:focus-visible .ig-card__media img{transform:scale(1.06)}
/* selo do ícone realça no hover */
.ig-card__badge{transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.ig-card:hover .ig-card__badge,
.ig-card:focus-visible .ig-card__badge{transform:scale(1.12);box-shadow:0 10px 24px rgba(214,41,118,.42)}
/* rótulo "Ver no Instagram" sobe suavemente ao aparecer */
.ig-card__open{transform:translateY(8px);transition:opacity .4s var(--ease),background .4s var(--ease),transform .4s var(--ease)}
.ig-card:hover .ig-card__open,
.ig-card:focus-visible .ig-card__open{transform:translateY(0)}
.ig-card__open svg{transition:transform .45s var(--ease)}
.ig-card:hover .ig-card__open svg,
.ig-card:focus-visible .ig-card__open svg{transform:scale(1.08)}

/* -----------------------------------------------------------------
   4) CHIP DE INSTAGRAM (.ig-chip) — brilho varrendo + micro-giro do
      ícone, mantendo o gradiente da marca.
   ----------------------------------------------------------------- */
.ig-chip{position:relative;overflow:hidden;isolation:isolate}
.ig-chip svg,.ig-chip__txt{position:relative;z-index:2}
.ig-chip svg{transition:transform .4s var(--ease)}
.ig-chip:hover svg{transform:rotate(-6deg) scale(1.1)}
.ig-chip:hover{transform:translateY(-3px);box-shadow:0 20px 42px rgba(214,41,118,.52)}
.ig-chip:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.ig-chip::before{
  content:"";position:absolute;top:0;left:-75%;z-index:1;width:45%;height:100%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transform:skewX(-20deg);transition:left .65s var(--ease);
}
.ig-chip:hover::before{left:135%}

/* -----------------------------------------------------------------
   5) Acessibilidade de movimento — respeita prefers-reduced-motion.
   ----------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .actbtn--whatsapp .actbtn__ic::after{animation:none}
  .actbtn--whatsapp .actbtn__ic img,
  .actbtn--instagram .actbtn__ic img,
  .ig-card__media img,
  .ig-card__open,.ig-card__open svg,
  .ig-chip svg{transition:none}
  .ig-card:hover .ig-card__media img,
  .ig-card:focus-visible .ig-card__media img{transform:none}
  .ig-chip::before{display:none}
}