.os-product {
  background-color: var(--light-color);
  display: flex;
  flex-direction: row;
  border: 2px solid var(--black-color);
  border-radius: 2vh;
  height: 25vh;
  width: 38vh;
  margin: 10px;
}

.os-product-info {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  width: 50%;
  height: 90%;
  padding: 10px;
  margin: 0px;
}

.os-product-title {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5vh; /* Espacio entre palabras */
}

.os-product-title-word {
  display: inline-block;
  background-color: var(--neutral-color);
  height:3vh;
  font-size: 2vh;
  padding: 3px 6px;
  border-radius: 3px; /* Opcional para bordes redondeados */
  color: var(--black-color);
}

.os-product-btn {
  border-radius: 5px;
  background-color: var(--accent-color);
  padding: 1vh;
  color: var(--primary-color);
  text-decoration: none;
}

.os-product-btn:hover {
  background-color: var(--primary-color);
  color: var(--white-color);
  transition: all 0.3s ease-in-out;
}

.os-product-logo {

  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10%;
  height: 70%;
  width: 40%;

  border-radius: 5px;

  color: var(--primary-color);
  
}

.os-product.--even {
  background-color: var(--neutral-color);

}


.os-product-title.--even {
  color: var(--black-color);
}

.os-product-title-word.--even {
  display: inline-block;
  background-color: var(--light-color);
  padding: 3px 6px;
  border-radius: 3px; /* Opcional para bordes redondeados */
  color: var(--black-color);
}


.icon {
  display: inline-block;
  vertical-align: middle;
}

.icon-outline {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-filled {
  fill: currentColor;
  stroke: none;
}