#producto {
  margin: 50px 0;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

#producto h2 {
  font-size: 2em; /* Puede ser relativo o se puede ajustar en media queries */
  color: #4fa759;
  margin-bottom: 20px;
}

#producto img {
  max-width: 100%;
  height: auto;
  border-radius: 5px;
  margin-top: 20px; /* Ajustado para menos espacio en pantallas pequeñas */
}

#producto h3 {
  font-size: 1.5em;
  margin-top: 35px;
  font-weight: bold;
}

#description {
  font-size: 1.1em;
}

p {
  font-size: 1em;
  font-weight: normal;
}

#producto p {
  color: #555;
  line-height: 1.6;
  text-align: justify;
}

#producto ul {
  list-style-type: none;
  padding: 0;
}

#producto ul li {
  background: url("img/checkmark.png") no-repeat left center;
  padding-left: 20px;
  margin: 5px 0;
  color: #83bf74;
  font-weight: bold;
}

.btn-primary {
  background-color: #2980b9;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 1em;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn-primary:hover {
  background-color: #3498db;
}

ul {
  margin-top: 20px;
  text-align: left;
  list-style-type: circle;
}

/* Media Queries para Responsividad */
@media (max-width: 768px) {
  #producto {
    padding: 15px; /* Menos padding en pantallas pequeñas */
  }

  #producto h2 {
    font-size: 1.8em; /* Reduce el tamaño del encabezado */
  }

  #producto h3 {
    font-size: 1.4em; /* Reduce el tamaño del subencabezado */
  }

  #producto img {
    margin-top: 20px; /* Espacio ajustado para pantallas pequeñas */
  }

  #producto p {
    font-size: 0.9em; /* Ajusta el tamaño del texto */
  }

  .btn-primary {
    padding: 8px 16px; /* Botón más pequeño */
    font-size: 0.9em; /* Texto más pequeño en el botón */
  }
}

@media (max-width: 480px) {
  #producto {
    margin: 20px 0; /* Menos margen en pantallas muy pequeñas */
  }

  #producto h2 {
    font-size: 1.5em; /* Título más pequeño */
  }

  #producto h3 {
    font-size: 1.2em; /* Subtítulo más pequeño */
  }

  #producto p {
    font-size: 0.8em; /* Texto aún más pequeño */
  }
}