/* Estilo moderno inspirado en E-commerce/Bancos */
body {
  background-color: #fcfcfc; /* Un fondo muy ligeramente gris */
}

.promo-card {
  transition: all 0.3s ease;
  border: 1px solid #e0e0e0; /* Borde sutil */
  border-radius: 0.5rem; /* Bordes redondeados consistentes */
}

.promo-card:hover {
  transform: translateY(-5px); /* Efecto "lift" */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.card-img-top {
    object-fit: cover; /* Evita que la imagen se deforme */
  border-top-left-radius: 0.5rem; /* Redondea las esquinas superiores de la imagen */
  border-top-right-radius: 0.5rem;
}

.filtro-container {
  background-color: #ffffff; /* Fondo blanco para los filtros */
  padding: 2rem;
  border-radius: 0.5rem;
  margin-bottom: 2.5rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* Sombra más sutil */
  border: 1px solid #e0e0e0;
}

.badge-rubro {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  background-color: #318356; /* <-- Tu color verde personalizado */
  color: #fff;
}

/* Ajustes a los selects de Bootstrap */
.form-select-lg {
  font-size: 1rem;
  padding: 0.75rem 1.25rem;
}

/* Botón Naranja Personalizado */
.btn-promo-naranja {
  color: #db7f30; /* <-- Tu color naranja personalizado */
  border-color: #db7f30; /* <-- Tu color naranja personalizado */
  background-color: transparent;
}

/* Efecto al pasar el mouse (hover) */
.btn-promo-naranja:hover,
.btn-promo-naranja:focus {
  color: #fff; /* Texto blanco */
  background-color: #db7f30; /* <-- Tu color naranja personalizado */
  border-color: #db7f30; /* <-- Tu color naranja personalizado */
  box-shadow: none;
}