/* ============================================================
   Compartilhamento — faixa de botões + botão dentro do lightbox
   ============================================================ */
.compartilhar-secao{
  padding:clamp(20px,4vw,40px) var(--respiro-lateral) clamp(40px,6vw,70px);
}

.compartilhar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:clamp(20px,3vw,40px);
  padding:clamp(26px,3vw,40px);
  border-radius:var(--raio-g);
  background:var(--cartao);
  box-shadow:var(--sombra-m);
}
/* o texto encolhe primeiro para os botões caberem na mesma linha */
.compartilhar-texto{flex:1 1 240px}
.compartilhar h3{
  margin-top:14px;
  font-size:clamp(1.5rem,2.6vw,2rem);
}

.share-botoes{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  flex:0 1 auto;
}

.share-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:13px 20px;
  border-radius:var(--pilula);
  font-size:.88rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:#fff;
  background:var(--tinta);
  box-shadow:var(--sombra-p);
  transition:transform .4s var(--ease-pulo),box-shadow .4s var(--ease),filter .4s var(--ease);
}
.share-btn:hover{
  transform:translateY(-4px) rotate(-1.5deg);
  box-shadow:var(--sombra-m);
  filter:saturate(1.15);
}
.share-btn:active{transform:translateY(-1px) scale(.97)}
/* o display do botão precisa perder para o [hidden] que o JS aplica */
.share-btn[hidden]{display:none}
.share-btn svg{width:19px;height:19px;fill:currentColor;flex:none}

.share-nativo{background:var(--grad-quente)}
.share-zap{background:linear-gradient(140deg,#3ee07a,#1fb15c)}
.share-face{background:#1877f2}
.share-insta{background:linear-gradient(45deg,#f9ce34,#ee2a7b 48%,#6228d7)}
.share-copiar{
  color:var(--tinta);
  background:var(--papel-2);
}

/* confirmação depois de copiar */
.share-copiar.feito{
  color:#fff;
  background:var(--menta);
}

@media(max-width:760px){
  .compartilhar{
    flex-direction:column;
    align-items:flex-start;
    text-align:left;
  }
  /* no eixo vertical o flex-basis viraria altura: some com ele */
  .compartilhar-texto{flex:0 0 auto}
  .share-botoes{width:100%}
  .share-btn{flex:1 1 auto;justify-content:center}
}

/* --- botão dentro do lightbox --- */
.lb-share{
  position:absolute;top:24px;left:clamp(16px,4vw,44px);
  display:inline-flex;
  align-items:center;
  gap:9px;
  height:50px;
  padding:0 20px;
  border-radius:var(--pilula);
  font-size:.85rem;
  font-weight:700;
  color:var(--tinta);
  background:var(--cartao);
  box-shadow:var(--sombra-m);
  transition:transform .4s var(--ease-pulo),background .4s var(--ease),color .4s var(--ease);
}
.lb-share svg{width:18px;height:18px;fill:currentColor}
.lb-share:hover{
  color:#fff;
  background:var(--grad-quente);
  transform:translateY(-3px);
}
@media(max-width:600px){
  .lb-share span{display:none}
  .lb-share{width:50px;padding:0;justify-content:center}
}