/* ============================
   FOOTER — Thiago Santos
   ============================ */

.site-footer {
  background: #eef3f8;
  margin-top: 0;
  padding-inline: clamp(16px, 4vw, 40px);
  padding-top: 48px;
  color: #2f3b49;
  font-size: 15px;
}

/* GRID 2 colunas (marca/redes | links) */
.site-footer .footer {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: clamp(20px, 3vw, 40px);
  align-items: start;
}

/* COLUNAS — BARRA SIMPLES ENTRE SEÇÕES */
.site-footer .footer__col + .footer__col {
  border-left: 1px solid #e3eaf2;
  padding-left: 24px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Marca */
.site-footer .footer__brand { display: inline-flex; align-items: center; text-decoration: none; }
.site-footer .footer__logo { width: clamp(160px, 15vw, 190px); height: auto; display: block; }
.site-footer .footer__desc { margin: 12px 0 18px; max-width: 52ch; line-height: 1.55; color: #4a5868; }

/* ----------------------------
   REDES SOCIAIS
   ---------------------------- */
.site-footer .socials{
  list-style: none;
  display: flex;
  gap: 24px; /* espaçamento entre ícones */
  align-items: center;
  flex-wrap: wrap;
  padding-left: 0;
  margin: 0;
}

.site-footer .socials .icon-content a{
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #2c2c2c;     /* estado normal */
  border-radius: 50%;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 10px 22px rgba(16,24,40,.08);
  transition: transform .3s ease, background-color .3s ease, border-radius .3s ease, opacity .3s ease;
}

/* Hover padrão (para as outras redes) */
.site-footer .socials .icon-content a:hover{
  transform: scale(1.18);
  border-radius: 14px;
}

/* Active */
.site-footer .socials .icon-content a:active{ transform: scale(0.9); }

/* Ícones (usam currentColor) */
.site-footer .socials .icon-content a .socialSvg{
  width: 20px;
  height: 20px;
  color: #fff;
}
.site-footer .socials .icon-content a .socialSvg path{ fill: currentColor; }

/* Instagram é outline */
.site-footer .socials a[data-social="instagram"] .socialSvg *{
  fill: none; 
  stroke: #fff; 
  stroke-width: 2; 
  stroke-linecap: round; 
  stroke-linejoin: round;
}

/* Cores no hover das outras redes (mantidas) */
.site-footer .socials a[data-social="instagram"]:hover{ background-color: #d62976; }
.site-footer .socials a[data-social="facebook"]:hover { background-color: #1877F2; }
.site-footer .socials a[data-social="linkedin"]:hover  { background-color: #0A66C2; }
.site-footer .socials a[data-social="gmail"]:hover    { background-color: #EA4335; }

/* ====== SOMENTE WHATSAPP — igual ao exemplo que você mandou ====== */
.site-footer .socials a[data-social="whatsapp"]:hover{
  background-color: #25D366;   /* verde do quadrado */
  transform: scale(1.5);       /* cresce mais */
  border-radius: 15px;         /* cantos arredondados */
}
/* Ícone do WhatsApp branco (glyph/outline) */
.site-footer .socials a[data-social="whatsapp"] .socialSvg{ color:#fff; }

/* Animação do ícone ao hover (todas) */
.site-footer .socials .icon-content a:hover .socialSvg{
  animation: slide-in-top .3s both;
}
@keyframes slide-in-top{
  0%   { transform: translateY(50px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

/* Diminui opacidade dos não-hover (grupo) */
.site-footer .socials:has(.icon-content a:hover) .icon-content a:not(:hover){
  opacity: 0.12;
}

/* Foco acessível */
.site-footer .socials .icon-content a:focus-visible{
  outline: 3px solid rgba(61,118,187,.35);
  outline-offset: 3px;
}

/* ----------------------------
   LINKS
   ---------------------------- */
.site-footer nav.footer__col { align-items: flex-start; text-align: left; }
.site-footer .footer__menu { list-style: none; padding-left: 0; margin: 0; }
.site-footer .footer__menu li { margin: 0; }

.site-footer .footer__link{
  display:flex; align-items:center; gap:10px; padding:7px 0; text-decoration:none;
  color:#2f3b49; transition: color .15s ease, transform .15s ease;
}
.site-footer .footer__link:hover{ color:#245fa6; transform: translateX(1px); }
.site-footer .footer__link-icon{ width:18px; height:18px; flex:0 0 18px; fill: currentColor; opacity:.95; }

/* ----------------------------
   RODAPÉ LEGAL
   ---------------------------- */
.site-footer .footer__legal{
  border-top:1px solid #e3eaf2; margin-top:28px; padding:8px; text-align:center;
  color:#5b6775; font-size:10px; display:flex; justify-content:center; align-items:center;
}

/* ----------------------------
   RESPONSIVO
   ---------------------------- */
@media (max-width: 900px){
  .site-footer .footer { grid-template-columns: 1fr; }
  .site-footer .footer__col + .footer__col {
    border-left:none; padding-left:0; border-top:1px solid #e3eaf2; padding-top:18px; margin-top:16px;
  }
}