/*=============== TIPOGRAFÍA PARA SERVICIOS ===============*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap');
@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600&display=swap");

.services {
  font-family: "Montserrat", sans-serif;
}

/*=============== SERVICIOS ===============*/

/* Contenedor grid de servicios */
.services .service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

/* Cada tarjeta de servicio */
.services .service-item {
  background-color: #ffffff; /* Fondo fijo blanco */
  padding: 30px;
  border-radius: 8px;
  border: 1px solid #ddd; /* Borde delgado y elegante */
  box-shadow: none; /* Sin sombra por defecto */
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.services .service-item:hover {
  transform: translateY(-10px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); /* Sombra solo en hover */
}

/* Ícono dentro de cada servicio */
.services .service-icon {
  font-size: 3.5rem;
  color: #ff7b00; /* Naranja IPROMSA */
  margin-bottom: 20px;
}

/* Título de cada servicio */
.services .service-item h3 {
  font-size: 1.6rem;
  margin-bottom: 15px;
  color: #333333; /* Gris oscuro neutro */
}

/* Texto dentro de cada servicio */
.services .service-item p {
  font-size: 1.2rem;
  color: #000000;
}

/* Enlace "Ver Detalles" */
.services .read-more {
  display: inline-block;
  color: #ff7b00; /* Mismo naranja */
  font-weight: bold;
  margin-top: 15px;
  text-decoration: none;
  transition: color 0.3s ease;
}

.services .read-more i {
  margin-left: 5px;
  transition: transform 0.3s ease;
}

.services .read-more:hover {
  color: #cc6200; /* Naranja más oscuro */
}

.services .read-more:hover i {
  transform: translateX(5px);
}

/* Títulos y descripción de la sección */
.services h2 {
  text-align: center;
  font-size: 2rem;
  margin-bottom: 10px;
}

.services .section-description {
  text-align: center;
  font-size: 1rem;
  margin-bottom: 40px;
  color: #555555;
}

/* Responsive container si usas uno */
.services .container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}