:root {

  --primario-950: #112B08;
  --primario-700: #2d5d17;
  --primario-600: #357516;
  --primario-500: #5BC121;
  --primario-400: #7ADB40;
  --primario-100: #E1F9CE;
  --primario-50: #F1FDE8;

  --blanco-0: #f9f9f9;
  --blanco-50: #f4f4f4;
  --blanco-100: #c9c9c9;

  --gris-600: #898989;
  --gris-950: #1F1F1F;
  --gris-800: #292929;
}

html body #servicios .servicee {
  width: 100%;
  display: grid;
  justify-items: center;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

/* Para pantallas menores de 992px */
@media (max-width: 1280px) {
  html body #servicios .servicee {
    grid-template-columns: 1fr 1fr;
  }
}

/* Para pantallas de teléfonos */
@media (max-width: 620px) {
  html body #servicios .servicee {
    grid-template-columns: 1fr;
  }
}

html body #servicios .element-service {
  border-radius: 8px;
  min-width: 18rem;
  max-width: 18rem;
}

html body #servicios .element-service:hover {
  cursor: pointer;
}

html body #servicios .element-service div span i {
  font-size: 2rem;
  color: var(--primario-600);
}

html body #servicios .element-service ul {
  list-style-type: none;
  padding-left: 0px !important;
}


html body #servicios .element-service .tarjeta-body {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  padding: 16px;
  border-radius: 8px;

}

html body #servicios .element-service .tarjeta-body .empujar {

  text-align: center;

}

html body #servicios .element-service .tarjeta-title {
  margin-top: 16px;
  margin-bottom: 8px;
}

html body #servicios .tarjeta-body ion-icon {
  color: var(--primario-600);
  padding-left: 8px;
  padding-right: 8px;
  margin-bottom: 1rem;
  border-radius: 60px;
  font-size: 3.5rem;
}

html body .activar {
  background-color: var(--primario-600);
  color: var(--blanco-0) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
}

html body .activar ion-icon {
  color: var(--blanco-0) !important;
}

html body .activar p {
  color: var(--blanco-0) !important;
}

html body .activar .btn-segundario {
  color: var(--blanco-0) !important;
  border: solid 1px var(--blanco-0);
}