/* Home — hero secundario + sección problema (contraste suave, iconos azules) */

.btn-hero-secondary,
.btn-hero-secondary:hover,
.btn-hero-secondary:focus,
.btn-hero-secondary:active {
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

.btn-hero-secondary:hover {
  border-color: rgba(0, 163, 255, 0.35) !important;
  background: rgba(0, 163, 255, 0.08) !important;
  color: #ffffff !important;
}

#problema .problema-tag {
  border-color: rgba(0, 163, 255, 0.14);
  background: rgba(0, 163, 255, 0.06);
  color: rgba(125, 211, 252, 0.82);
}

#problema .problema-title {
  color: rgba(255, 255, 255, 0.86);
  font-weight: 700;
}

#problema .problema-desc {
  color: rgba(148, 163, 184, 0.72);
}

#problema .problema-card {
  border-color: rgba(255, 255, 255, 0.04);
  background: rgba(11, 20, 38, 0.42);
  box-shadow: none;
}

#problema .problema-card:hover {
  border-color: rgba(0, 163, 255, 0.1);
  box-shadow: none;
  transform: none;
}

#problema .problema-card-title {
  color: rgba(255, 255, 255, 0.8);
}

#problema .problema-card-desc {
  color: rgba(148, 163, 184, 0.65);
}

#problema .problema-icon {
  background: rgba(0, 163, 255, 0.1) !important;
  color: #00a3ff !important;
}

#problema .problema-icon svg {
  color: #00a3ff;
  stroke: #00a3ff;
}

#problema .problema-card:hover .problema-icon {
  background: rgba(0, 163, 255, 0.14) !important;
  color: #7dd3fc !important;
}

#problema .problema-card:hover .problema-icon svg {
  color: #7dd3fc;
  stroke: #7dd3fc;
}