/* Estilos adicionales para mejorar Klüber */

/* Color accent personalizado */
.text-accent {
  color: var(--accent-color) !important;
}

.bg-accent {
  background-color: var(--accent-color) !important;
}

.btn-accent {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: white;
}

.btn-accent:hover {
  background-color: #c53030;
  border-color: #c53030;
  color: white;
}

/* Mejoras para value-card */
.value-card {
  transition: all 0.3s ease;
}

.value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.value-icon {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.value-icon i {
  font-size: 2rem;
}

/* Mejoras para badges */
.badge {
  font-weight: 500;
}

/* Mejoras para history-highlight */
.history-highlight {
  border-left: 4px solid var(--accent-color);
}

/* Mejoras responsive */
@media (max-width: 768px) {
  .display-4 {
    font-size: 2.5rem;
  }
  
  .value-icon {
    width: 60px;
    height: 60px;
  }
  
  .value-icon i {
    font-size: 1.5rem;
  }
}

/* Estilo para los íconos de productos en la nueva sección de portafolio */
.section-padding .fa-cog,
.section-padding .fa-link,
.section-padding .fa-utensils,
.section-padding .fa-pump-soap,
.section-padding .fa-fire,
.section-padding .fa-water {
  /* Asegura un tamaño consistente para los íconos del portafolio */
  font-size: 1.3rem; 
}