/* =========================================================
   SERVIÇOS – PÁGINA
========================================================= */

.servicos-page{
  padding: 10px 0 90px; /* padding bottom antes do footer */
  background: #f6f7fb;
}

.servicos-page .container{
  max-width: 1180px;
}

/* =========================================================
   GRID DE SERVIÇOS
========================================================= */

.servicos-grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

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

.servico-card{
  position: relative;
  background: #fff;
  border: 1px solid #eef0f4;
  border-radius: 16px;
  box-shadow: 0 14px 40px rgba(17, 24, 39, .08);
  padding: 26px;
  overflow: hidden;
  height: 100%;
}

/* Risco inferior */
.servico-card::after{
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: var(--bs-primary);
  border-radius: 0 0 16px 16px;
}

/* =========================================================
   CARD EM DESTAQUE (PRIMEIRO)
========================================================= */

.servico-card.featured{
  grid-column: 1 / -1;
  padding: 34px;
}

.servico-card.featured h2{
  font-size: 1.9rem;
}

/* =========================================================
   CONTEÚDO
========================================================= */

.servico-info{
  min-width: 0;
}

.servico-info h2{
  font-size: 1.65rem;
  line-height: 1.25;
  margin: 0 0 14px;
  color: #111827;
}

.servico-texto{
  line-height: 1.9;
  color: #4b5563;
  font-size: 1rem;
}

/* Ajuste de <p> vindos do editor */
.texto-servico p{
  margin-top: 0;
  margin-bottom: .35rem;
}

/* =========================================================
   ABOUT – INSTITUCIONAL
========================================================= */

.about-institutional{
  padding: 100px 0;
  background: #f6f7fb;
}

/* =========================================================
   IMAGEM COM EFEITO
========================================================= */

.about-image-wrapper{
  position: relative;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--bs-primary), #1f2937);
}

.about-image-wrapper img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 20px 45px rgba(0,0,0,.25);
}

.about-image-wrapper::after{
  content: "";
  position: absolute;
  top: -18px;
  left: -18px;
  width: 80px;
  height: 80px;
  border: 3px solid var(--bs-primary);
  border-radius: 12px;
  z-index: -1;
}

/* ✅ botão invisível pra manter layout e deixar clicável */
.about-img-btn{
  border: 0;
  padding: 0;
  background: transparent;
  width: 100%;
  display: block;
  cursor: zoom-in;
  text-align: left;
}

/* =========================================================
   TEXTO INSTITUCIONAL
========================================================= */

.about-subtitle{
  display: inline-block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--bs-primary);
  margin-bottom: 12px;
}

.about-title{
  font-size: clamp(2rem, 3.2vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 18px;
  color: #111827;
  line-height: 1.25;
}

.about-title strong{
  color: var(--bs-primary);
}

.about-text{
  font-size: 1rem;
  color: #6b7280;
  line-height: 1.7;
  margin-bottom: 14px;
}

/* =========================================================
   RESPONSIVO
========================================================= */

@media (max-width: 991px){
  .servicos-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .about-institutional{
    padding: 80px 0;
  }

  .about-image-wrapper{
    margin-bottom: 30px;
  }
}

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

  .about-institutional{
    padding: 70px 0;
  }

  .servico-card.featured{
    padding: 26px;
  }
}
/*  LUPINHA na imagem clicável (Serviços) */
.about-img-btn,
.about-img-btn img{
  cursor: zoom-in !important;
}