/* =====================================================
   RP ENGENHARIA — Sections
   Serviços, Diferenciais, Contato e demais seções.
   Depende das variáveis definidas em style.css
===================================================== */


/* =====================================================
   CABEÇALHO DE SEÇÃO (centralizado)
===================================================== */

.section-head {
  text-align: center;
  max-width:  720px;
  margin:     0 auto 50px;
}

.section-head .section-title {
  font-size:     clamp(1.8rem, 3.5vw, 2.4rem);
  margin-bottom: 14px;
}

.section-head .section-sub {
  color:     var(--graphite);
  font-size: 1.05rem;
}


/* =====================================================
   SERVIÇOS — Cards
===================================================== */

.cards {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   30px;
}

.card {
  background:    #fff;
  border:        1px solid var(--gray-100);
  border-radius: var(--radius-lg);
  padding:       34px 28px;
  text-align:    center;
  box-shadow:    var(--shadow-sm);
  transition:    var(--transition);
}

.card:hover {
  transform:  translateY(-6px);
  box-shadow: var(--shadow-md);
}

.card i {
  font-size:     2.6rem;
  color:         var(--blue);
  margin-bottom: 20px;
}

.card h3 {
  font-size:     1.2rem;
  margin-bottom: 12px;
}

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


/* =====================================================
   DIFERENCIAIS
===================================================== */

.diferenciais-bg {
  background: var(--gray-50);
}

.grid-diff {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   30px;
}

.diff-item {
  background:    #fff;
  border-radius: var(--radius-md);
  padding:       28px 24px;
  text-align:    center;
  box-shadow:    var(--shadow-sm);
}

.diff-item i {
  color:         var(--blue);
  margin-bottom: 6px;
}

.diff-item h3 {
  font-size: 1.1rem;
  margin:    14px 0 8px;
}

.diff-item p {
  font-size: .95rem;
}


/* NOTA: O formulário de contato foi movido para o rodapé.
   Seus estilos agora vivem em layout.css (.footer-form). */


/* =====================================================
   SEÇÃO PLACEHOLDER (em construção)
===================================================== */

.section-placeholder {
  text-align: center;
  color:      var(--gray-300);
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 992px) {
  .cards,
  .grid-diff {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .contato-form {
    padding: 26px 20px;
  }
}


/* =====================================================
   SIMULAÇÃO FEA
===================================================== */

.fea-section {
  background: var(--graphite-dark);
}

.fea-section .section-title {
  color: #fff;
}

.fea-section .section-sub {
  color: var(--gray-200);
}

.fea-container {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  height:          100%;
  gap:             36px;
}

/* --- Pills --- */

.fea-pills {
  display:   flex;
  flex-wrap: wrap;
  gap:       12px;
  justify-content: center;
}

.fea-pill {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       8px 18px;
  border:        1px solid var(--blue-light);
  border-radius: 999px;
  color:         var(--blue-light);
  font-size:     .85rem;
  font-weight:   600;
  letter-spacing: .5px;
}

/* --- Grid de grupos --- */

.fea-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   24px;
  width:                 100%;
}

.fea-card {
  background:    rgba(255,255,255,.05);
  border:        1px solid rgba(255,255,255,.10);
  border-radius: var(--radius-lg);
  padding:       32px 20px;
  text-align:    center;
  transition:    var(--transition);
}

.fea-card:hover {
  background:  rgba(255,255,255,.10);
  border-color: var(--blue-light);
  transform:   translateY(-4px);
}

.fea-card__icon {
  font-size:     2rem;
  color:         var(--blue-light);
  margin-bottom: 16px;
}

.fea-card h3 {
  color:     var(--gray-100);
  font-size: 1rem;
  font-weight: 600;
}

/* --- CTA --- */

.fea-cta {
  text-align: center;
}

/* --- Responsive --- */

@media (max-width: 992px) {
  .fea-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .fea-grid {
    grid-template-columns: 1fr 1fr;
  }

  .fea-pill {
    font-size: .78rem;
    padding:   7px 14px;
  }
}