/* ============================================================
   Botões — pílulas com resposta elástica
   ============================================================ */
.btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:16px 30px;
  overflow:hidden;
  border-radius:var(--pilula);
  font-size:.92rem;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--tinta);
  background:var(--cartao);
  box-shadow:var(--sombra-p);
  transition:transform .45s var(--ease-pulo),box-shadow .45s var(--ease),color .45s var(--ease);
}
.btn > *{position:relative;z-index:2}

/* brilho que atravessa o botão no hover */
.btn::before{
  content:"";
  position:absolute;top:0;left:-60%;z-index:1;
  width:40%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-18deg);
  transition:left .7s var(--ease);
}
.btn:hover{
  transform:translateY(-4px);
  box-shadow:var(--sombra-m);
}
.btn:hover::before{left:120%}
.btn:active{transform:translateY(-1px) scale(.98)}

/* variante preenchida */
.btn-solido{
  color:#fff;
  background:var(--grad-quente);
  box-shadow:0 12px 30px rgba(255,61,148,.32);
}
.btn-solido:hover{box-shadow:0 18px 40px rgba(255,61,148,.42)}

/* variante contornada */
.btn-linha{
  background:transparent;
  box-shadow:inset 0 0 0 2px var(--tinta-linha);
}
.btn-linha:hover{
  background:var(--cartao);
  box-shadow:inset 0 0 0 2px transparent,var(--sombra-m);
}

/* ícone dentro de botões e links */
.icone{
  width:19px;height:19px;
  fill:currentColor;
  flex:none;
}