/* =========================
   SERVIÇOS
========================= */

.servicos{
  padding:20px 20px;
  background:#fff;
}

.servicos__header{
  width:min(900px,100%);
  margin:0 auto 60px;
  text-align:center;
}

.servicos h2{
  font-family:var(--font-title);
  font-size:clamp(3rem,7vw,4rem);
  line-height:.9;
  margin:10px 0;
  color:var(--rose-dark);
}

.servicos__header p{
  color:#6e5b5b;
  font-size:1.05rem;
  line-height:1.7;
}

/* =========================
   GRID
========================= */

.servicos__grid{
  width:min(1120px,100%);
  margin:auto;

  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

/* =========================
   CARD
========================= */

.servico-card{
  position:relative;
  overflow:hidden;

  background:#050505;
  color:#fff;

  border-radius:28px;
  padding:42px 30px;

  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;

  min-height:340px;

  box-shadow:0 20px 48px rgba(0,0,0,.16);

  transition:
    transform .35s ease,
    box-shadow .35s ease;
}

.servico-card:hover{
  transform:translateY(-8px);

  box-shadow:
    0 28px 60px rgba(0,0,0,.22);
}

.servico-card::before{
  content:"";
  position:absolute;
  inset:0;

  background:
    radial-gradient(
      circle at top right,
      rgba(201,135,146,.25),
      transparent 45%
    );

  pointer-events:none;
}

/* =========================
   ÍCONE
========================= */

.servico-card__icon{
  width:90px;
  height:90px;

  object-fit:contain;

  margin-bottom:24px;

  position:relative;
  z-index:2;
}

/* =========================
   TÍTULO
========================= */

.servico-card h3{
  font-family:var(--font-title);
  font-size:2rem;
  line-height:1.1;

  margin:0 0 18px;

  color:#fff;

  position:relative;
  z-index:2;
}

/* =========================
   DESCRIÇÃO
========================= */

.servico-card p{
  margin:0;

  line-height:1.8;
  font-size:1rem;

  color:rgba(255,255,255,.78);

  position:relative;
  z-index:2;
}

/* =========================
   TABLET
========================= */

@media (max-width:980px){

  .servicos__grid{
    grid-template-columns:1fr;
    max-width:600px;
  }

  .servico-card{
    min-height:auto;
  }
}

/* =========================
   MOBILE
========================= */

@media (max-width:560px){

  .servicos{
    padding:80px 20px;
  }

  .servicos h2{
    font-size:2.8rem;
  }

  .servico-card{
    padding:36px 24px;
  }

  .servico-card__icon{
    width:75px;
    height:75px;
  }

  .servico-card h3{
    font-size:1.8rem;
  }

  .servico-card p{
    font-size:.95rem;
  }
}