/* ============================================================
   Serviços — cartões coloridos
   ============================================================ */
.servicos-secao{
  background:var(--papel-2);
  border-radius:var(--raio-g);
  margin:0 clamp(10px,2vw,22px);
}

.servicos{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(14px,1.6vw,20px);
}

.servico{
  position:relative;
  overflow:hidden;
  padding:clamp(28px,3vw,40px);
  border-radius:var(--raio-g);
  background:var(--cartao);
  box-shadow:var(--sombra-p);
  transition:transform .5s var(--ease-pulo),box-shadow .5s var(--ease);
}
.servico:hover{
  transform:translateY(-10px) rotate(-1deg);
  box-shadow:var(--sombra-m);
}

/* bolha de cor que cresce no hover */
.servico::before{
  content:"";
  position:absolute;top:-90px;right:-90px;
  width:200px;height:200px;
  border-radius:50%;
  background:var(--uva-leve);
  transform:scale(.4);
  opacity:0;
  transition:transform .7s var(--ease),opacity .7s var(--ease);
}
.servico:hover::before{transform:scale(1);opacity:1}
.servico > *{position:relative;z-index:1}

.servico b{
  display:grid;
  place-items:center;
  width:56px;height:56px;
  margin-bottom:22px;
  border-radius:20px;
  font-family:var(--display);
  font-weight:800;
  font-size:1.35rem;
  line-height:1;
  color:#fff;
  background:var(--grad-quente);
  transition:transform .5s var(--ease-pulo);
}
.servico:hover b{transform:rotate(-10deg) scale(1.06)}

.servico:nth-child(2) b{background:var(--grad-fresco)}
.servico:nth-child(3) b{background:var(--grad-sol)}
.servico:nth-child(2)::before{background:var(--menta-leve)}
.servico:nth-child(3)::before{background:var(--sol-leve)}

.servico h4{
  margin-bottom:10px;
  font-family:var(--display);
  font-weight:800;
  font-size:1.6rem;
  letter-spacing:-.03em;
  color:var(--tinta);
}
.servico p{
  font-size:.98rem;
  line-height:1.72;
  color:var(--tinta-suave);
}

/* chips de detalhe */
.servico .tags{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:20px;
}
.servico .tags span{
  padding:6px 13px;
  border-radius:var(--pilula);
  font-size:.74rem;
  font-weight:700;
  color:var(--tinta-suave);
  background:var(--papel-2);
}

@media(max-width:900px){
  .servicos{grid-template-columns:1fr}
}