/*ESTILIZAÇÃO DO CTA DE SERVIÇOS DA HOME*/

.services {
  padding: 3rem 1rem 3rem 1rem;
  position: relative;
  background: #ececec;
  font-family: Arial, sans-serif;
  text-align: center;
  overflow: hidden;
}

.services > * {
  position: relative;
  z-index: 1;
}

.services h2 {
    color: var(--cor-site-2);
    margin-bottom: 2rem;
    background-color: var(--cor-site-4);
    width: max-content;
    padding: 6px 12px;
    border-radius: 10px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    font-size: 1em;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}

.card {
  position: relative;
  overflow: hidden;
  padding: 1.7rem;
  border-radius: 35px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: 
    transform 0.4s cubic-bezier(0.4,0,0.2,1), 
    box-shadow 0.4s cubic-bezier(0.4,0,0.2,1), 
    background-color 0.4s cubic-bezier(0.4,0,0.2,1), 
    color 0.4s cubic-bezier(0.4,0,0.2,1);
  text-align: left;
  background-color: var(--cor-site-4);
  border: 2px solid var(--cor-site-4);
}

/* Suaviza ainda mais a transição dos textos */
.card h3,
.card p,
.card a {
  transition: color 0.4s cubic-bezier(0.4,0,0.2,1) !important;
  position: relative;
  z-index: 1;
}

/* Imagem de hover (adicione <div class="card-img-hover"></div> em cada card) */
.card .card-img-hover {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s cubic-bezier(0.4,0,0.2,1);
  z-index: 0;
}

/* Exemplo: ajuste conforme as classes dos seus cards */
.card-adm-condominios .card-img-hover {
  background-image: url('../../img/home/servicos/adm-condominios.png');
}
.card-anuncie-imovel .card-img-hover {
  background-image: url('../../img/home/servicos/anuncie-imovel.png');
}
.card-solicite-imovel .card-img-hover {
  background-image: url('../../img/home/servicos/solicite-imovel.png');
}
.card-comprar-imovel .card-img-hover {
  background-image: url('../../img/home/servicos/comprar-imovel.png');
}
.card-alugar-imovel .card-img-hover {
  background-image: url('../../img/home/servicos/alugar-imovel.png');
}

/* Hover: imagem aparece, textos mudam de cor, fundo muda suavemente */
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.15);
  background-color: var(--cor-site-3);
  border: 2px solid var(--cor-site-4);
}

.card:hover .card-img-hover {
  opacity: 1;
}

.card:hover .card-img-hover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.card:hover h3,
.card:hover p,
.card:hover a {
  color: var(--cor-site-4);
}

.card h3 {
  color: var(--cor-site-5);
  margin-bottom: 0.8rem;
  text-align: start;
}

.card p {
  color: var(--cor-site-5);
  font-size: 0.95rem;
  margin-bottom: 1.2rem;
  text-align: start;
}

.card a {
  color: var(--cor-site-2);
  font-weight: bold;
  width: max-content;
  padding: 6px 12px;
  text-decoration: none;
  border-radius: 10px;
  font-size: 27px;
  align-items: start;
  margin-left: 0;
  margin-right: auto;
}

.card a:hover {
  text-decoration: none;
  background-color: var(--cor-site-3);
  color: var(--cor-site-4);
}

/* Responsividade */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
    .cta-anuncie-container {
      background: linear-gradient(-710deg, var(--cor-site-3) 0%, #c2c2c2 100%) !important;
    }

    .cta-anuncie-texts {
      text-align: center;
    }

    .cta-anuncie-benefits > li {
      justify-content: center;
    }
}

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

@media (max-width: 470px) {
    .cta-anuncie-benefits {
        display: none;
    }
}