/* ==========================================================================
   PÁGINA: SERVIÇOS (servicos.php)
   ========================================================================== */

.service-detail{
  scroll-margin-top:96px;
}
.service-detail:nth-child(even){background:var(--blue-tint);}
.service-detail-grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:64px;
  align-items:center;
}
.service-detail:nth-child(odd) .service-detail-grid{
  grid-template-columns:1.15fr .85fr;
}
.service-detail:nth-child(odd) .service-detail-copy{order:1;}
.service-detail:nth-child(odd) .service-detail-visual{order:2;}

.service-detail-visual{
  aspect-ratio:1/1;
  border-radius:28px;
  background:linear-gradient(150deg, var(--blue-tint), var(--blue-tint-2));
  position:relative;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
}
.service-detail:nth-child(even) .service-detail-visual{
  background:linear-gradient(150deg, #ffffff, var(--blue-tint-2));
}
.service-detail-visual .icon-big{
  width:120px; height:120px;
  border-radius:32px;
  background:var(--blue);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  box-shadow:0 24px 48px -12px rgba(0,82,255,.5);
}

.service-detail-copy .eyebrow{margin-bottom:14px;}
.service-detail-copy h2{
  font-size:clamp(26px,3vw,34px);
  font-weight:400;
  margin-bottom:16px;
}
.service-detail-copy p.desc{
  color:var(--ink-soft);
  font-size:16.5px;
  margin-bottom:28px;
}
.service-benefits{display:flex; flex-direction:column; gap:14px;}
.service-benefits li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:15px;
  color:var(--ink-soft);
}
.service-benefits li .check{
  width:22px; height:22px; border-radius:50%;
  background:var(--blue-tint-2);
  color:var(--blue);
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0;
  margin-top:1px;
}

/* ---------- Responsivo (serviços) ---------- */
@media (max-width:980px){
  .service-detail-grid,
  .service-detail:nth-child(odd) .service-detail-grid{grid-template-columns:1fr; gap:40px;}
  .service-detail:nth-child(odd) .service-detail-copy{order:2;}
  .service-detail:nth-child(odd) .service-detail-visual{order:1;}
  .service-detail-visual{max-width:320px; margin:0 auto;}
}