/* card.css */

/* Apply the 'Inter' font */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/* Card body font */
.card-body {
  font-family: 'Inter', sans-serif;
  padding: 25px;
  padding-bottom: 10px; /* Reducir espacio interno */
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: flex-end;
}

/* Card styling */
.card {
  background-color: rgba(120, 120, 120, 0.05); /* 787878 with 5% opacity */
  border-radius: 2rem;
  border-color: transparent;
  box-shadow: 0 4px 18.4px rgba(0, 0, 0, 0.25); /* Drop shadow */
  margin-bottom: 20px; /* Adds space outside the bottom of the card */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Evitar que los elementos se separen demasiado */
}

/* Button styles */
.btn-outline-custom {
  color: #ED1C24;
  border-color: #ED1C24;
  font-weight: 400;
}

.btn-outline-custom:hover {
  background-color: #ED1C24;
  color: white;
}

.card-img-top {
  width: 100%; /* Asegurar que ocupe el ancho completo */
  height: 300px; /* Ajusta esto según la altura deseada */
  object-fit: contain; /* Mantiene la imagen completa sin recortarla */
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure cards are centered in the grid */
.row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

/* Quitar margen extra de los elementos internos */
.card-body p,
.card-body div {
  margin-bottom: 0;
}

/* Asegurar que el botón esté pegado abajo */
.card-body .d-flex {
  margin-top: auto;
}

.color-circle {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  margin: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  color: white;
  text-align: center;
}

.extra-colors {
  background-color: #bcbcbc;
  font-weight: 200;
}