/* ============================================================
   PÁGINA DE SERVIÇOS — Construtora Portellanato
   Extraído de portfolio/services_list.html
   ============================================================ */

.services-hero { padding: 5rem 0 3rem; }
.services-hero-card {
  padding: 3rem; border-radius: 2rem;
  background: linear-gradient(140deg, rgba(15,36,30,0.95), rgba(24,58,48,0.91)), url('../images/obra_fundo.jpg') center/cover no-repeat;
  box-shadow: 0 28px 70px rgba(17,29,25,0.16); color: #fff;
}
.services-hero-card h1, .services-hero-card p { color: #fff; }
.services-hero-card p { max-width: 46rem; color: rgba(255,255,255,0.8); }
.services-hero-card .tag {
  display: inline-flex; padding: 0.55rem 0.95rem; margin-bottom: 1rem; border-radius: 999px;
  background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.15);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.section-kicker {
  display: inline-block; margin-bottom: 0.9rem; color: var(--accent-color);
  font-size: 0.8rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
}
.services-section { padding: 4rem 0; }
.section-soft { background: linear-gradient(180deg, rgba(255,255,255,0.6), rgba(245,241,232,0.72)); }
.service-panel {
  height: 100%; padding: 2rem; border-radius: 1.5rem;
  border: 1px solid rgba(22,53,44,0.08); background: rgba(255,255,255,0.86);
  box-shadow: 0 22px 54px rgba(18,28,24,0.07);
}
.service-icon {
  width: 4.15rem; height: 4.15rem; display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: 1.25rem; border-radius: 1.15rem;
  background: linear-gradient(145deg, rgba(45,95,79,0.14), rgba(200,90,84,0.16));
  color: #16352c; font-size: 1.4rem;
}
.service-panel h3 { margin-bottom: 0.8rem; color: #16352c; }
.service-panel p { margin: 0 0 1.5rem; color: rgba(24,34,30,0.72); }
.service-panel a { color: var(--accent-color); text-decoration: none; font-size: 0.9rem; font-weight: 700; letter-spacing: 0.06em; }
.service-panel a:hover { color: #16352c; }
.differentials { padding: 5rem 0; }
.diff-card {
  height: 100%; padding: 1.8rem; border-radius: 1.5rem;
  border: 1px solid rgba(22,53,44,0.08); background: rgba(255,255,255,0.88);
  box-shadow: 0 18px 46px rgba(18,28,24,0.06);
}
.diff-icon { width: 3.5rem; height: 3.5rem; border-radius: 1rem; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 1.1rem; background: linear-gradient(145deg, rgba(45,95,79,0.12), rgba(200,90,84,0.14)); color: #16352c; font-size: 1.2rem; }
.diff-card h4 { color: #16352c; margin-bottom: 0.7rem; }
.diff-card p { margin: 0; color: rgba(22,53,44,0.72); font-size: 0.95rem; }
.services-cta-section { padding: 5rem 0; }
.cta-panel {
  margin-top: 1rem; padding: 3rem; border-radius: 2rem;
  background: linear-gradient(135deg, rgba(20,46,38,0.96), rgba(24,58,48,0.93)), url('../images/port.jpeg') center/cover no-repeat;
  color: #fff; box-shadow: 0 24px 60px rgba(18,29,25,0.14);
}
.cta-panel h2, .cta-panel p { color: #fff; }
.cta-panel p { color: rgba(255,255,255,0.78); max-width: 48rem; }
.services-description-hint { max-width: 48rem; }

@media (max-width: 767px) {
  .services-hero-card, .cta-panel { padding: 1.8rem; }
  .service-panel, .diff-card { padding: 1.4rem; }
}